Better topbar for examples

Author: embedding-shapes

examples/blog/build.nix

@@ -19,6 +19,7 @@ let
     [ "head"
       [ "meta" { charset = "utf-8"; } ]
       [ "title" title ]
+      [ "style" (h.raw "body { color: #eee; } a { color: #6ab0ff; }") ]
     ]
     [ "body"
       header

website.nix

@@ -20,18 +20,36 @@ let
   );
 
   # Wrap example in showcase page (source left, rendered right)
+  exampleNames = builtins.sort builtins.lessThan (
+    builtins.filter (name: if name == "docs" then isLinux else true) exampleDirs
+  );
+
   showcaseStyles = ''
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { display: flex; height: 100vh; font-family: system-ui, sans-serif; background: #1a1a2e; color: #eee; }
+    body { display: flex; flex-direction: column; height: 100vh; font-family: system-ui, sans-serif; background: #1a1a2e; color: #ccc; }
+    .topbar { padding: 0.6rem 1rem; background: #151525; border-bottom: 1px solid #333; font-size: 0.85rem; letter-spacing: 0.01em; }
+    .topbar a { color: #6ab0ff; text-decoration: none; }
+    .topbar a:hover { text-decoration: underline; }
+    .topbar .current { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
+    .content { display: flex; flex: 1; min-height: 0; }
     .source { flex: 1; overflow: auto; padding: 1rem; border-right: 1px solid #333; }
-    .source h1 { font-size: 1rem; margin-bottom: 0.5rem; color: #999; }
-    .source h1 a { color: #6ab0ff; text-decoration: none; }
     .source pre { margin: 0; font-size: 0.8rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
     .source code { font-family: ui-monospace, monospace; }
     .preview { flex: 1; }
     .preview iframe { width: 100%; height: 100%; border: none; }
   '';
 
+  exampleLink = current: name:
+    if name == current
+    then [ "span.current" name ]
+    else [ "a" { href = "../${name}/"; } name ];
+
+  navBar = current: [ "nav.topbar"
+    [ "a" { href = "../../"; } "niccup docs" ]
+    " | Examples: "
+    (builtins.tail (pkgs.lib.concatMap (name: [ " - " (exampleLink current name) ]) exampleNames))
+  ];
+
   wrapExample = name: drv:
     let
       source = builtins.readFile ./examples/${name}/build.nix;
@@ -42,12 +60,10 @@ let
           [ "style" (h.raw showcaseStyles) ]
         ]
         [ "body"
-          [ "div.source"
-            [ "h1" [ "a" { href = "../../"; } "← niccup" ] " / ${name}" ]
-            [ "pre" [ "code" source ] ]
-          ]
-          [ "div.preview"
-            [ "iframe" { src = "demo/"; } ]
+          (navBar name)
+          [ "div.content"
+            [ "div.source" [ "pre" [ "code" source ] ] ]
+            [ "div.preview" [ "iframe" { src = "demo/"; } ] ]
           ]
         ]
       ];