Feature: navbar

yhttp · Aug 30, 2024 · 4924820 · 4924820
1 parent 11d0785
commit 4924820
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 50 deletions.
diff --git a/TODO.md b/TODO.md
@@ -6,3 +6,4 @@
 - create bookmark button
 - command line argument to set any option
 - raise 404 if file not exists + fallback
+- about page
diff --git a/examples/bar/baz/index.md b/examples/bar/baz/index.md
@@ -0,0 +1,3 @@
+# Baz
+
+## Baz baz
diff --git a/examples/bar/baz/qux/index.md b/examples/bar/baz/qux/index.md
@@ -0,0 +1,3 @@
+# Qux
+
+## Qux qux
diff --git a/yhttp/markdown/master.mako b/yhttp/markdown/master.mako
@@ -32,13 +32,19 @@
 </head>
 <body onload="load()">
 
-<nav id="header">
+<header>
   <a href="/">
     <img src="${metapath}/logo.svg" width="100" height="100"/>
     <h1>${title}</h1>
   </a>
+</header>
+<nav>
+  <a href="/">${hometitle}</a>
+  % for p in paths:
+    /
+    <a href="/${'/'.join(paths[:loop.index + 1])}/">${p}</a>
+  % endfor
 </nav>
-
 <%def name="rendertoc(items)">
 % if items:
   <ul>
@@ -56,15 +62,18 @@
 <div class="content">
   <!-- Sidebar -->
   <aside>
-    <h3>Navigation</h3>
-    <ul>
-    % for h in subdirs:
-      <li><a href="${h}/">${h}</a></li>
-    % endfor
-    </ul>
-    <h3>Table of contents</h3>
-    ${rendertoc(toc)}
-
+    % if subdirs:
+      <h3>Navigation</h3>
+      <ul>
+      % for h in subdirs:
+        <li><a href="${h}/">${h}</a></li>
+      % endfor
+      </ul>
+    % endif
+    % if toc:
+      <h3>Table of contents</h3>
+      ${rendertoc(toc)}
+    % endif
   </aside>
   <div id="splitter" > </div>
   <!-- main content -->

diff --git a/yhttp/markdown/server.py b/yhttp/markdown/server.py
@@ -104,9 +104,11 @@ def get(req, path=None):
 
     renderargs = dict(
         title=settings.server.title,
+        hometitle='Home',
         toc=headings,
         subdirs=subdirs,
         metapath=app.metapath,
+        paths=os.path.dirname(path).split('/') if path else [],
     )
     if not targetfile:
         return t.render(content='', **renderargs)

diff --git a/yhttp/markdown/styles/layout.sass b/yhttp/markdown/styles/layout.sass
@@ -6,46 +6,56 @@ body
   display: flex
   flex-direction: column
   flex-wrap: nowrap
-  nav
-    flex: 0 1
-    display: flex
+
+
+header
+  flex: 0 1
+  display: flex
+  flex-direction: row
+  padding: $gutter
+  a
+    height: $headersize
+    display: flex 
     flex-direction: row
-    padding: $gutter
-    a
+    margin: $gutter
+    img
+      margin: 0px 2px
+      width: $headersize
       height: $headersize
-      display: flex 
-      flex-direction: row
-      margin: $gutter
-      img
-        margin: 0px 2px
-        width: $headersize
-        height: $headersize
-      h1 
-        margin: 0px
-        height: 100%
-
-  .content
-    overflow-y: auto
-    width: 100%
-    height: 100%
-    display: flex
-    flex-direction: row
-    aside
-      padding: $gutter
-      flex-shrink: 0
-    #splitter
-      width: $gutter
-      flex: 0 0 $gutter
-    main
-      padding: $gutter ($gutter * 4)
-      text-align: justify
+    h1 
+      margin: 0px
+      height: 100%
+
+
+nav
+  padding: ($gutter / 2) ($gutter * 2)
+  width: 100%
+  height: 100%
+  flex: 1 0
+
+
+.content
+  overflow-y: auto
+  width: 100%
+  height: 100%
+  display: flex
+  flex-direction: row
+  aside
+    flex-shrink: 0
+  #splitter
+    width: $gutter
+    flex: 0 0 $gutter
+  main
+    padding: $gutter ($gutter * 4)
+    text-align: justify
 
 
-h1, h2, h3, h4, h5, h6
-  margin: ($gutter * 4) 0px ($gutter * 2) 0px 
+// h1, h2, h3, h4, h5, h6
+//   margin: ($gutter * 4) 0px ($gutter * 2) 0px 
 
 
 aside
+  padding: $gutter ($gutter * 2)
   h1, h2, h3, h4, h5, h6
     margin-bottom: 0
   ul

diff --git a/yhttp/markdown/styles/theme.sass b/yhttp/markdown/styles/theme.sass
@@ -38,17 +38,19 @@ a
   cursor: pointer
 
 
-#header
-  background: $bgdark
+header
+  background: lighten($bg, 8%)
   a
     &:visited
       color: $fg
     &:hover
       color: $mangool
 
 
-#splitter
-  cursor: col-resize
-  background-color: $bgdark
+nav
+  background-color: $bgverydark
 
 
+#splitter
+  cursor: col-resize
+  background-color: $bgverydark
diff --git a/yhttp/markdown/styles/variables.sass b/yhttp/markdown/styles/variables.sass
@@ -6,7 +6,8 @@ $mangool: #5a9e70
 
 
 /* derived colors */
-$bgdark: darken($bg, 8%)
+$bgdark: darken($bg, 4%)
+$bgverydark: darken($bg, 8%)
 
 
 /* debug */