addd docs next and prev bottom navigation

beforesemicolon · Nov 9, 2024 · 425b021 · 425b021
1 parent c5948d3
commit 425b021
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 3 deletions.
diff --git a/docs/_layouts/document.js b/docs/_layouts/document.js
@@ -27,6 +27,18 @@ const navCategoryToHTML = (docs, currentPath) =>
 export default (props) => {
     const docs = props.siteMap.get('documentation')
     const docsMenu = `<ul>${navCategoryToHTML(docs, props.path)}</ul>`
+    const pages = [...docs.values()].flatMap((page) =>
+        page instanceof Map ? [...page.values()] : [page]
+    )
+
+    let nextPage, previousPage
+
+    for (let i = 0; i < pages.length; i++) {
+        if (pages[i].path === props.path) {
+            nextPage = pages[i + 1]
+            previousPage = pages[i - 1]
+        }
+    }
 
     return `
 <!doctype html>
@@ -48,6 +60,11 @@ export default (props) => {
             <article>
                 ${props.content}
                 
+                <div id="page-navigation">
+                    ${previousPage ? `<a href="${previousPage.path}" id="prev-doc">&lt;&lt; ${previousPage.name}</a>` : ''}
+                    ${nextPage ? `<a href="${nextPage.path}" id="next-doc">${nextPage.name} &gt;&gt;</a>` : ''}
+                </div>
+                
                 <a href="${
                     props.path === '/documentation'
                         ? `${githubDocsPath}/index.md`

diff --git a/docs/stylesheets/documentation.css b/docs/stylesheets/documentation.css
@@ -323,10 +323,42 @@ body {
     font-size: 0.9rem;
 }
 
-#documentation article #edit-doc {
-    margin: 30px 0 0;
+/* #edit-doc */
+
+#edit-doc {
+    margin-top: 50px;
     display: inline-block;
     color: coral;
+    font-size: 0.8rem;
+    float: right;
+}
+
+/* #page-navigation */
+
+#page-navigation {
+    border-top: 1px solid #222;
+    padding: 20px 0;
+    margin-top: 30px;
+}
+
+#page-navigation::after {
+    clear: both;
+    display: table;
+    content: '';
+}
+
+#prev-doc,
+#next-doc {
+    text-decoration: none;
+    color: #92c5ee;
+}
+
+#prev-doc {
+    float: left;
+}
+
+#next-doc {
+    float: right;
 }
 
 /* #table-of-content ------------ */

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "scripts": {
         "test": "jest --coverage",
         "test:watch": "jest --watch",
-        "docs:watch": "rm -rf website && nodemon --watch docs -e ts,css,md,json --exec 'node node_modules/@beforesemicolon/builder/dist/esm/docs/run.js'",
+        "docs:watch": "rm -rf website && nodemon --watch docs -e js,css,md,json --exec 'node node_modules/@beforesemicolon/builder/dist/esm/docs/run.js'",
         "local": "nodemon --watch src -e ts --exec 'npm run build && npm pack && npm link'",
         "build:docs": "node node_modules/@beforesemicolon/builder/dist/esm/docs/run.js",
         "build:browser": "node node_modules/@beforesemicolon/builder/dist/esm/build-browser.js",