New version with a improved menu

CHANGELOG.md

@@ -6,6 +6,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.9.0] - Unreleased
+### Changed
+- Ability to collapse/expande tree nodes [#9]
+- Fixed sort menu items [#8]
+- Menu appearance:
+  - Replaced folder icons with carets.
+  - Menu is sticky on desktop.
+  - Changed colors and spaces.
+
 ## [0.8.2] - 2024-05-01
 ### Changed
 - Added `language` attribute to `html` element [#6].
@@ -114,7 +123,10 @@ First version
 [#2]: https://github.com/lumeland/theme-simple-wiki/issues/2
 [#4]: https://github.com/lumeland/theme-simple-wiki/issues/4
 [#6]: https://github.com/lumeland/theme-simple-wiki/issues/6
+[#8]: https://github.com/lumeland/theme-simple-wiki/issues/8
+[#9]: https://github.com/lumeland/theme-simple-wiki/issues/9
 
+[0.9.0]: https://github.com/lumeland/theme-simple-wiki/compare/v0.8.2...HEAD
 [0.8.2]: https://github.com/lumeland/theme-simple-wiki/compare/v0.8.1...v0.8.2
 [0.8.1]: https://github.com/lumeland/theme-simple-wiki/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/lumeland/theme-simple-wiki/compare/v0.7.1...v0.8.0

deno.json

@@ -1,6 +1,6 @@
 {
   "imports": {
-    "lume/": "https://deno.land/x/lume@v2.1.4/",
+    "lume/": "https://deno.land/x/lume@v2.2.4/",
     "lume/cms/": "https://cdn.jsdelivr.net/gh/lumeland/[email protected]/"
   },
   "lock": false,

plugins.ts

@@ -28,6 +28,7 @@ export default function () {
       .use(basePath())
       .data("layout", "layout.vto")
       .data("date", "Git Last Modified")
+      .data("order", 0)
       .mergeKey("extra_head", "stringArray")
       .copy([
         ".jpg",

src/_includes/css/menu.css

@@ -49,58 +49,76 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  border-left: solid 1px var(--color-line);
   font: var(--font-small);
   color: var(--color-dim);
-  max-height: calc(100vh - 110px);
   overflow-y: auto;
   scrollbar-width: thin;
+  scrollbar-color: var(--color-dim) var(--color-background);
 
   & ul {
     list-style: none;
     margin-left: .9em;
     padding: 0;
-    border-left: solid 1px var(--color-line);
   }
-  & li {
-    position: relative;
-    padding-left: .6em;
-    margin-block: 2px;
 
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: .5em;
-      border-top: solid 1px var(--color-line);
-      left: 0;
-      top: 1em;
-    }
+  > li:last-child:has(details) {
+    border-bottom: solid 1px var(--color-line);
+  }
+
+  details {
+    border: none;
+    padding: .3em 0;
+    border-top: solid 1px var(--color-line);
+  }
+  summary {
+    --marker-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 256 256"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path></svg>');
+    display: flex;
+    padding-top: 0;
+    padding-bottom: 0;
+    align-items: center;
+    border-radius: .3em;
+    font-weight: var(--font-bold);
+  }
+  details[open] > summary {
+    --marker-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 256 256"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
   }
 
   & a,
   & li > span {
     display: block;
     border-radius: .3em;
     text-decoration: none;
-    padding: .3em;
+    padding: .8em .5em;
   }
 
   & a {
-    padding: .3em .5em;
     text-decoration: none;
+    color: inherit;
 
-    &:hover {
-      background: var(--color-line);
+    &:not([aria-current="page"]):hover {
+      text-decoration: underline;
+      color: var(--color-base);
     }
 
     @media (max-width: 949px) {
       max-width: max-content;
     }
   }
 
-  & a[aria-current="page"] {
+  & li > a[aria-current="page"],
+  & summary:has(a[aria-current="page"]) {
     color: var(--color-base);
-    background: var(--color-line);
+    background-color: var(--color-line);
+  }
+}
+
+[data-theme="dark"] {
+  .menu {
+    summary {
+      --marker-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 256 256"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path></svg>');
+    }
+    details[open] > summary {
+      --marker-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 256 256"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
+    }
   }
 }

src/_includes/templates/breadcrumb.vto

@@ -2,7 +2,7 @@
   <ul class="breadcrumb">
     {{ for item of nav.breadcrumb(url) }}
     {{ if item.data && item.data.url != url }}
-    <li class="breadcrumb-item"><a href="{{ item.data.url }}">{{ item.data.title }}</a></li>
+    <li class="breadcrumb-item"><a href="{{ item.data.url }}">{{ item.data.title || item.slug }}</a></li>
     {{ else if !item.data }}
     <li class="breadcrumb-item"><strong>{{ item.slug }}</strong></li>
     {{ /if }}

src/_includes/templates/menu.vto

@@ -10,7 +10,7 @@
   {{ /if }}
 
   <ul class="menu">
-  {{ for item of nav.menu().children?.sort((a, b) => a.data?.order - b.data?.order) }}
+  {{ for item of nav.menu("/", "", "order=asc basename=asc").children }}
     <li>
       {{ include "templates/menu_item.vto" { item } }}
     </li>

src/_includes/templates/menu_item.vto

@@ -1,20 +1,28 @@
-{{ set folder = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--color-dim)" viewBox="0 0 256 256"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64l27.73,20.8a16.12,16.12,0,0,0,9.6,3.2H200v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Zm112,136H43.1l26.67-80H232Z"></path></svg>' }}
+{{ set expandable = !!item.children }}
 
+{{> let urlPrefix = `${prefix ?? "/" }${item.slug}/` }}
+{{ set expanded = expandable ? url.startsWith(urlPrefix) : false }}
+
+{{ if expandable }}<details{{ expanded ? " open" : "" }}><summary>{{ /if }}
 {{ if item.data }}
   <a {{ if item.data.url == url }}aria-current="page"{{ /if }} href="{{ item.data.url }}">
-    {{ if item.children }}<span class="icon">{{ folder }}</span>{{ /if }}
+    {{ if item.children }}{{ /if }}
     {{ item.data.title || item.slug }}
   </a>
 {{ else }}
-  <strong><span class="icon">{{ folder }}</span> {{ item.slug }}</strong>
+  <strong>{{ item.slug }}</strong>
 {{ /if }}
 
+{{ if expandable }}</summary>{{ /if }}
+
 {{ if item.children }}
 <ul>
   {{ for child of item.children.sort((a, b) => a.data?.order - b.data?.order) }}
   <li>
-    {{ include "templates/menu_item.vto" { item: child } }}
+    {{ include "templates/menu_item.vto" { item: child, prefix: urlPrefix } }}
   </li>
   {{ /for }}
 </ul>
 {{ /if }}
+
+{{ if expandable }}</details>{{ /if }}

src/folder/first-note.md

@@ -21,6 +21,4 @@ Here is a footnote reference,[^1] and [^2]another. And this[^3] is a long note.
 
     Subsequent paragraphs are indented (4 spaces) to show that they belong to the previous footnote.
 
-> [!tip]
-> This is a tip paragraph
-
+> [!tip] This is a tip paragraph

src/folder/index.md

@@ -0,0 +1 @@
+index page

src/folder/other-folder/first-note.md

@@ -1,3 +1,7 @@
+---
+order: 2
+---
+
 # First note
 
 This is a note

src/styles.css

@@ -60,8 +60,14 @@
     display: grid;
     align-content: start;
     grid-template-columns: 1fr minmax(10vw, 250px);
+    grid-template-rows: auto minmax(0, 1fr);
     padding-top: 2rem;
+    padding-bottom: 0;
     border-right: solid 1px var(--color-line);
+    align-self: start;
+    height: 100vh;
+    position: sticky;
+    top: 0;
 
     > * {
       grid-column: 2;