style: toc in sidebar

picosh · Nov 18, 2024 · 1ca4804 · 1ca4804
1 parent f5d769a
commit 1ca4804
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/go.mod b/go.mod
@@ -4,7 +4,7 @@ go 1.21.5
 
 // replace github.com/picosh/pdocs => /home/erock/dev/pico/pdocs
 
-require github.com/picosh/pdocs v0.0.0-20240626184614-7aff67648d6e
+require github.com/picosh/pdocs v0.0.0-20241118043636-3059918103f6
 
 require (
 	github.com/alecthomas/chroma v0.10.0 // indirect

diff --git a/go.sum b/go.sum
@@ -6,8 +6,8 @@ github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
 github.com/dlclark/regexp2 v1.10.0 h1:+/GIL799phkJqYW+3YbOd8LCcbHzT0Pbo8zl70MHsq0=
 github.com/dlclark/regexp2 v1.10.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
-github.com/picosh/pdocs v0.0.0-20240626184614-7aff67648d6e h1:SdfU2G7pMYi1pZd4khx/prmgfF5WZ0pRROhCpPMq0H4=
-github.com/picosh/pdocs v0.0.0-20240626184614-7aff67648d6e/go.mod h1:KXO3Z0EVdA811AX6mlK4lwFDT+KgmegRVrEmZU5uLXU=
+github.com/picosh/pdocs v0.0.0-20241118043636-3059918103f6 h1:yU+cusov9cu4tcxL1E12GpBibMyxnwIWMRKRFbEffwY=
+github.com/picosh/pdocs v0.0.0-20241118043636-3059918103f6/go.mod h1:KXO3Z0EVdA811AX6mlK4lwFDT+KgmegRVrEmZU5uLXU=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=

diff --git a/static/main.css b/static/main.css
@@ -30,21 +30,27 @@
   color: var(--visited);
 }
 
+.toc {
+  padding: 0 var(--line-height) 0 0;
+  width: 250px;
+}
+
 .sitemap {
-  width: 200px;
-  flex: 0 0 200px;
+  width: 250px;
   margin: 0;
+  padding-bottom: 2rem !important;
+  height: calc(100vh - 3px - (3 * var(--line-height)));
+  overflow-y: auto;
 }
 
 .post {
   max-width: 700px;
   height: calc(100vh - 3px - (3 * var(--line-height)));
   overflow-y: auto;
-  padding-right: 20px;
 }
 
 .post-container {
-  max-width: 60rem;
+  max-width: 100%;
 }
 
 .container-xs {
@@ -92,6 +98,7 @@
   display: flex;
   gap: 1rem;
   flex-direction: row-reverse;
+  justify-content: center;
 }
 
 @media only screen and (max-width: 800px) {
@@ -113,6 +120,10 @@
     padding-right: 0;
   }
 
+  .toc {
+    display: none;
+  }
+
   .sitemap {
     column-count: 2;
     width: 100%;

diff --git a/tmpl/post.page.tmpl b/tmpl/post.page.tmpl
@@ -12,6 +12,10 @@
 {{template "nav" .}}
 
 <div class="post-group">
+  <article class="md toc">
+    {{.Data.TocHtml}}
+  </article>
+
   <main class="post">
     <h1 class="text-2xl text-hdr m-0 flex items-center">
       {{if .Cur.Data}}