Add nav for docs pages

kepano · kepano · commit 3ffda29235d9 · 2024-03-15T08:23:07.000-07:00
diff --git a/.layouts/default.html b/.layouts/default.html
@@ -34,7 +34,7 @@
           <iframe
             width="100%"
             height="100%"
-            src="/spec/1.0">
+            src="/spec/1.0?hidenav=true">
           </iframe>
         </node>
 
diff --git a/.layouts/docs.html b/.layouts/docs.html
@@ -3,17 +3,22 @@
 {% include head.html %}
   <body>
 
-    <nav>
-      <a href="/"><img width="120" height="44" src="/logo.svg" alt="JSON Feed" /></a>
-    </nav>
-
-    <hr>
+    {% include nav.html %}
 
     <div class="page">
         {{ content }}
     </div>
 
     <script>
+      document.addEventListener("DOMContentLoaded", function() {
+          const urlParams = new URLSearchParams(window.location.search);
+          const hideNav = urlParams.get('hidenav');
+          if(hideNav === 'true') {
+              document.body.classList.add('hidenav');
+          }
+      });
+      </script>
+      <script>
       document.addEventListener('DOMContentLoaded', function() {
         const links = document.querySelectorAll('a');
         links.forEach(link => {
diff --git a/.layouts/nav.html b/.layouts/nav.html
@@ -0,0 +1,10 @@
+    <div id="navbar">
+      <nav>
+        <a href="/" id="logo"><img width="120" height="44" src="/logo.svg" alt="JSON Feed" /></a>
+        <a href="/spec/1.0" class="link">Spec</a>
+        <a href="/docs/apps" class="link">Apps</a>
+        <a href="https://github.com/obsidianmd/jsoncanvas" class="link">GitHub</a>
+      </nav>
+
+      <hr>
+    </div>
diff --git a/.layouts/node.html b/.layouts/node.html
diff --git a/_config.yml b/_config.yml
@@ -24,7 +24,7 @@ defaults:
   - scope:
       path: "spec/**/*.md"
     values:
-      layout: "node"
+      layout: "docs"
   - scope:
       path: "docs/**/*.md"
     values:
diff --git a/assets/style.css b/assets/style.css
@@ -208,6 +208,25 @@ nav {
   padding: 24px 36px;
   max-width: 48em;
   margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+nav #logo {
+  flex-grow: 1;
+}
+nav .link {
+  color: var(--color-ax-1);
+  text-decoration: none;
+  padding: 0.25em 0.5em;
+  border-radius: 6px;
+}
+nav .link:hover {
+  color: var(--color-bg-1);
+  background-color: var(--color-ax-1);
+}
+.hidenav #navbar {
+ display: none;
 }
 
 /* Specific nodes */
