Merge pull request #919 from lit/edit-this-page

Author: e111077

packages/lit-dev-content/site/_includes/articles.html

@@ -55,6 +55,21 @@ <h1>{{ title }}</h1>
 
       {% block articleContent %}{{ content | safe }}{% endblock %}
 
+      {% set editableDocumentsRegex = r/articles\/article\/.+/ %}
+      {% if editableDocumentsRegex.test(page.inputPath) %}
+      <p id="edit-page-link">
+        <a
+            href="https://github.com/lit/lit.dev/edit/main/packages/lit-dev-content/{{ page.inputPath }}">
+          Edit this page
+          <lazy-svg
+              loading="visible"
+              svg-aria-hidden
+              href="{{ site.baseurl }}/images/icons/edit-square.svg#icon">
+          </lazy-svg>
+        </a>
+      </p>
+      {% endif %}
+
       {% set navItems = collections[collection] | eleventyNavigation | flattenNavigationAndAddNextPrev %}
       {% for item in navItems %}
         {% if item.url === page.url and item.parent %}
@@ -101,5 +116,4 @@ <h1>{{ title }}</h1>
     </article>
   </div>
 
-
 {% endblock %}

packages/lit-dev-content/site/_includes/docs.html

@@ -40,6 +40,7 @@ <h2><a href="#content">Contents: {{ title }}</a></h2>
         </div>
       </nav>
     {% endif %}
+    <litdev-edit-this-page filepath="{{ page.inputPath }}"></litdev-edit-this-page>
   </div>
 
   <div id="articleWrapper">
@@ -57,6 +58,19 @@ <h1>{{ title }}</h1>
 
       {{ content | safe }}
 
+
+      <p id="edit-page-link">
+        <a
+            href="https://github.com/lit/lit.dev/edit/main/packages/lit-dev-content/{{ page.inputPath }}">
+          Edit this page
+          <lazy-svg
+              loading="visible"
+              svg-aria-hidden
+              href="{{ site.baseurl }}/images/icons/edit-square.svg#icon">
+          </lazy-svg>
+        </a>
+      </p>
+
       {% set navItems = collections[collection] | eleventyNavigation | flattenNavigationAndAddNextPrev %}
       {% for item in navItems %}
         {% if item.url === page.url and item.parent %}
@@ -101,5 +115,4 @@ <h1>{{ title }}</h1>
     </article>
   </div>
 
-
 {% endblock %}

packages/lit-dev-content/site/css/docs.css

@@ -14,6 +14,7 @@ main {
     --docs-nav-color: #242424;
     --playground-code-background: #fafafa;
     --code-border: 1px solid #ddd;
+    --docs-on-surface-color: #3e3e3e;
 
   /* IMPORTANT: If any of the following variables change, one or both of the
      @media query thresholds below need to be updated. */
@@ -22,8 +23,8 @@ main {
   --docs-toc-min-width: 5em;
   --docs-article-min-width: 30em;
   --docs-article-max-width: 49em;
-  --docs-article-margin-horizontal: 3em;
-  --docs-margin-top: 32px;
+  --docs-article-margin-inline: 3em;
+  --docs-margin-block: 32px;
 
   display: grid;
   grid-template-columns:
@@ -37,7 +38,7 @@ main {
   font-family: "Open Sans", sans-serif;
 
   background: var(--color-light-gray);
-  padding-top: var(--docs-margin-top);
+  padding-block: var(--docs-margin-block);
 }
 
 /* ------------------------------------
@@ -46,11 +47,11 @@ main {
 
 article {
   max-width: var(--docs-article-max-width);
-  padding: var(--docs-margin-top) var(--docs-article-margin-horizontal) var(--docs-margin-top)
-    var(--docs-article-margin-horizontal);
+  padding-block: var(--docs-margin-block);
+  padding-inline: var(--docs-article-margin-inline);
   line-height: 1.8em;
   font-size: 0.88889em; /* 16px / 18px basis */
-  color: #3e3e3e;
+  color: var(--docs-on-surface-color);
   background: white;
   box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
   margin-right: 2em;
@@ -59,13 +60,31 @@ article {
 }
 
 /* ------------------------------------
- * Body text
+ * Exit externally link
  * ------------------------------------ */
 
-article {
-  color: #3E3E3E;
+#edit-page-link {
+  height: 24px;
+  margin-block-start: 2rem;
+  margin-block-end: 1rem;
+}
+
+#edit-page-link a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
+#edit-page-link lazy-svg::part(svg) {
+  height: 24px;
+  width: 24px;
+  margin-inline-start: 8px;
+}
+
+/* ------------------------------------
+ * Body text
+ * ------------------------------------ */
+
 article :not(litdev-aside) p {
   margin-block-start: 1.5em;
   margin-block-end: 1.5em;
@@ -391,7 +410,7 @@ table.directory tr.subheading {
  #prevAndNextLinks {
    display: flex;
    justify-content: space-between;
-   margin-top: 3em;
+   margin-block-start: 0;
    padding-top: 1.5em;
    border-top: 1px solid rgb(223, 223, 223);
  }
@@ -453,7 +472,7 @@ table.directory tr.subheading {
 
 #docsNavWrapper {
   position: sticky;
-  top: calc(var(--header-height) + var(--docs-margin-top));
+  top: calc(var(--header-height) + var(--docs-margin-block));
   margin-bottom: 1.5em;
   height: calc(100vh - var(--header-height));
   display: flex;
@@ -584,7 +603,7 @@ table.directory tr.subheading {
 #rhsToc {
   padding: 10px 1em 0 0;
   position: sticky;
-  top: calc(var(--header-height) + var(--docs-margin-top));
+  top: calc(var(--header-height) + var(--docs-margin-block));
 }
 
 /* "Contents" heading */
@@ -694,14 +713,14 @@ litdev-banner > a {
  *
  * (14 + 49 + 5 + (3 * 2)) * 18 = 1332
  *  |    |    |    |         +--- font-size
- *  |    |    |    +------------- docs-article-margin-horizontal
+ *  |    |    |    +------------- docs-article-margin-inline
  *  |    |    +------------------ docs-toc-min-width
  *  |    +----------------------- docs-article-max-width
  *  +---------------------------- docs-nav-min-width
  */
 @media (max-width: 1332px) {
   main {
-    --docs-article-margin-horizontal: 2.5em;
+    --docs-article-margin-inline: 2.5em;
   }
 
   #rhsTocWrapper {
@@ -750,7 +769,7 @@ litdev-banner > a {
  *
  * (14 + 30 + 3) * 18 = 846
  *  |    |    |    +------------- font-size
- *  |    |    +------------------ docs-article-margin-horizontal
+ *  |    |    +------------------ docs-article-margin-inline
  *  |    +----------------------- docs-article-min-width
  *  +---------------------------- docs-nav-min-width
  */
@@ -765,7 +784,7 @@ litdev-banner > a {
   }
   article {
     margin: auto;
-    --docs-article-margin-horizontal: 1.5em;
+    --docs-article-margin-inline: 1.5em;
   }
   .anchor {
     left: -1.1rem;