Add previous/next page links at bottom of docs pages

packages/lit-dev-content/.eleventy.js

@@ -99,19 +99,26 @@ ${content}
     return url.substring(0, url.length - extension.length);
   });
 
+  const docsByUrl = new Map();
   eleventyConfig.addCollection('docs', function (collection) {
-    return collection.getFilteredByGlob('site/docs/**').sort(function (a, b) {
-      if (a.fileSlug == 'docs') {
-        return -1;
-      }
-      if (a.fileSlug < b.fileSlug) {
-        return -1;
-      }
-      if (b.fileSlug < a.fileSlug) {
-        return 1;
-      }
-      return 0;
-    });
+    const docs = collection
+      .getFilteredByGlob('site/docs/**')
+      .sort(function (a, b) {
+        if (a.fileSlug == 'docs') {
+          return -1;
+        }
+        if (a.fileSlug < b.fileSlug) {
+          return -1;
+        }
+        if (b.fileSlug < a.fileSlug) {
+          return 1;
+        }
+        return 0;
+      });
+    for (const page of docs) {
+      docsByUrl.set(page.url, page);
+    }
+    return docs;
   });
 
   // The reverse filter isn't working in Liquid templates
@@ -131,6 +138,44 @@ ${content}
     return minified;
   });
 
+  /**
+   * Flatten a navigation object into an array, and add "next" and "prev"
+   * properties.
+   *
+   * See https://github.com/11ty/eleventy-navigation/issues/22
+   */
+  eleventyConfig.addFilter('flattenNavigationAndAddNextPrev', (nav) => {
+    const flat = [];
+    // TODO(aomarks) For an unknown reason, every page in the "Templates"
+    // section is duplicated in the nav. Doesn't affect any other section. Just
+    // de-dupe by URL for now.
+    const seen = new Set();
+    const visit = (items) => {
+      for (const item of items) {
+        if (seen.has(item.url)) {
+          continue;
+        }
+        seen.add(item.url);
+        flat.push(item);
+        visit(item.children);
+      }
+    };
+    visit(nav);
+    for (let i = 0; i < flat.length; i++) {
+      const item = flat[i];
+      item.prev = flat[i - 1];
+      item.next = flat[i + 1];
+    }
+    return flat;
+  });
+
+  /**
+   * Gets the title given a docs URL.
+   */
+  eleventyConfig.addFilter('docsUrlTitle', (url) => {
+    return docsByUrl.get(url)?.data?.title;
+  });
+
   /**
    * Render the given content as markdown.
    */

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

@@ -47,6 +47,46 @@ <h1>{{ title }}</h1>
       {% endif %}
 
       {{ content | safe }}
+
+      {% set navItems = collections.docs | eleventyNavigation | flattenNavigationAndAddNextPrev %}
+      {% for item in navItems %}
+        {% if item.url === page.url and item.parent %}
+          {% set prev = item.prev %}
+          {% if not prev.parent %}
+            {% set prev = prev.prev %}
+          {% endif %}
+          {% set next = item.next %}
+          {% if not next.parent %}
+            {% set next = next.next %}
+          {% endif %}
+
+          <div id="prevAndNextLinks">
+            <a id="prevLink" href="{{ prev.url }}">
+              {% if prev %}
+                <!-- Source: https://material.io/resources/icons/?icon=arrow_back -->
+                <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor">
+                  <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                </svg>
+                <span class="direction">Previous</span>
+                <span class="title">{{ prev.url | docsUrlTitle }}</span>
+              {% endif %}
+            </a>
+
+            <a id="nextLink" href="{{ next.url }}">
+              {% if next %}
+                <span class="direction">Next</span>
+                <span class="title">{{ next.url | docsUrlTitle }}</span>
+                <!-- Source: https://material.io/resources/icons/?icon=arrow_forward -->
+                <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+                </svg>
+              {% endif %}
+            </a>
+          </div>
+        {% endif %}
+      {% endfor %}
     </article>
   </div>
+
+
 {% endblock %}

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

@@ -132,8 +132,8 @@ playground-ide {
 
 figure {
   /* We put code snippets in figures for improved a11y semantics, but they come
-     with a default left margin. */
-  margin-left: 0;
+     with default margins. */
+  margin: 0;
 }
 
 /* ------------------------------------
@@ -310,6 +310,69 @@ td {
   color: red;
 }
 
+/* ------------------------------------
+ * Prev/next links
+ * ------------------------------------ */
+
+ #prevAndNextLinks {
+   display: flex;
+   justify-content: space-between;
+   margin-top: 3em;
+   padding-top: 1.5em;
+   border-top: 1px solid rgb(223, 223, 223);
+ }
+
+ #prevLink,
+ #nextLink {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-gap: 0em 1.5em;
+  align-items: center;
+  color: black;
+  text-decoration: none;
+}
+
+#nextLink {
+  grid-template-columns: 1fr min-content;
+  text-align: right;
+}
+
+#prevAndNextLinks > a > .arrow {
+  grid-row: 1 / 3;
+  color: #757575;
+}
+
+#nextLink > .arrow {
+  grid-column: 2;
+}
+
+#prevAndNextLinks > a > .direction {
+  display: block;
+  color: #757575;
+  font-size: 15px;
+}
+
+#prevAndNextLinks > a:hover > .direction {
+  color: var(--color-blue);
+}
+
+#prevAndNextLinks > a:hover > .arrow {
+  color: var(--color-blue);
+}
+
+#prevAndNextLinks > a > .title {
+  font-size: 18px;
+}
+
+#prevAndNextLinks > a:hover > .title {
+  color: var(--color-blue);
+}
+
+#prevAndNextLinks > a:first-of-type {
+  margin-right: 2em;
+  text-align: left;
+}
+
 /* ------------------------------------
  * LHS nav (desktop)
  * ------------------------------------ */

packages/lit-dev-content/site/docs/components/rendering.md

@@ -82,7 +82,6 @@ For more information about working with shadow DOM in your component, see [Worki
 
 ## See also
 
-* [Reactive properties](/docs/components/properties/)
 * [Shadow DOM](/docs/components/shadow-dom/)
 * [Templates overview](/docs/templates/overview/)
 * [Template expressions](/docs/templates/overview/)