feat: collapsible sidebar entries

matoous · Apr 2, 2024 · 7a12b88 · 7a12b88
1 parent 7c9b9ef
commit 7a12b88
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 11 deletions.
diff --git a/mwp-content/src/lib.rs b/mwp-content/src/lib.rs
@@ -156,6 +156,7 @@ pub struct Content {
     pages: HashMap<String, Page>,
 }
 
+#[derive(Debug)]
 pub struct Node {
     pub name: String,
     pub path: String,

diff --git a/mwp-web/build.rs b/mwp-web/build.rs
@@ -10,5 +10,10 @@ fn main() -> Result<(), Box<grass::Error>> {
     // see: https://github.com/rust-lang/cargo/issues/3076
     let mut file = File::create("static/styles.css")?;
     file.write_all(css.as_bytes())?;
+
+    println!("cargo:rerun-if-changed=src/static/script.js");
+    let mut file = File::create("static/script.js")?;
+    file.write_all(include_bytes!("src/static/script.js"))?;
+
     Ok(())
 }
diff --git a/mwp-web/src/main.rs b/mwp-web/src/main.rs
@@ -5,7 +5,7 @@ use actix_web::{
     web, App, HttpServer, Result as AwResult,
 };
 use clap::{command, Parser};
-use maud::{html, Markup, PreEscaped};
+use maud::{html, Markup, PreEscaped, DOCTYPE};
 use mwp_content::Content;
 use mwp_search::{Doc, SearchIndex};
 use rusqlite::Connection;
@@ -57,6 +57,7 @@ async fn search_page(q: web::Query<SearchQuery>, index: web::Data<Index>) -> AwR
     let result = search::search(index.into_inner(), &*query, q.page.unwrap_or(0)).unwrap();
 
     Ok(html! {
+        (DOCTYPE)
         html {
             (render::header("Search | Matt's Wiki"))
             body {
@@ -89,6 +90,7 @@ async fn tag_page(tag: web::Path<String>, index: web::Data<Index>) -> AwResult<M
     let result = search::search(index.into_inner(), &*query, 0).unwrap();
 
     Ok(html! {
+        (DOCTYPE)
         html {
             (render::header("Tags | Matt's Wiki"))
             body {
@@ -146,12 +148,16 @@ async fn content_page(
     }
 
     Ok(html! {
+        (DOCTYPE)
         html {
             (render::header(format!("{} | Matt's Wiki", title).as_str()))
             body {
                 (render::layout(
                     html! {
-                        (render::content_navigation(content.build_tree()))
+                        (render::content_navigation(
+                            content.build_tree(),
+                            hiearchy.iter().map(|(name, _)| name.clone()).collect(),
+                        ))
                     },
                     html! {
                         ol .hiearchy {

diff --git a/mwp-web/src/render.rs b/mwp-web/src/render.rs
@@ -1,12 +1,14 @@
-use maud::{html, Markup, DOCTYPE};
+use maud::{html, Markup, PreEscaped};
 use tantivy::aggregation::agg_result::BucketEntry;
 
+const EXPAND_ICON: &str = include_str!("static/expand.svg");
+
 pub fn header(page_title: &str) -> Markup {
     html! {
-        (DOCTYPE)
         meta charset="utf-8";
-        link rel="stylesheet" href="/styles.css";
         title { (page_title) }
+        link rel="stylesheet" href="/styles.css";
+        script type="text/javascript" defer="" src="/script.js"{}
     }
 }
 
@@ -85,28 +87,34 @@ pub fn tags_filter(agg: Option<Vec<BucketEntry>>) -> Markup {
     }
 }
 
-fn tree_node(n: mwp_content::Node) -> Markup {
+fn tree_node(n: mwp_content::Node, hiearchy: &[String]) -> Markup {
+    let expanded = hiearchy.contains(&n.name);
     html! {
         .entry {
-            a href=(n.path) {
+            a .active[expanded] href=(n.path) {
                 (n.name)
             }
             @if !n.children.is_empty() {
-                .folder {
+                button aria-controls=(n.name) aria-expanded=(expanded.to_string()) {
+                    span .icon {
+                        (PreEscaped(EXPAND_ICON))
+                    }
+                }
+                .folder .expanded[expanded] id=(n.name) {
                     @for child in n.children {
-                        (tree_node(child))
+                        (tree_node(child, hiearchy.get(1..).unwrap_or_default()))
                     }
                 }
             }
         }
     }
 }
 
-pub fn content_navigation(children: Vec<mwp_content::Node>) -> Markup {
+pub fn content_navigation(children: Vec<mwp_content::Node>, hiearchy: Vec<String>) -> Markup {
     html! {
         .tree {
             @for child in children {
-                (tree_node(child))
+                (tree_node(child, hiearchy.get(1..).unwrap_or_default()))
             }
         }
     }

diff --git a/mwp-web/src/static/expand.svg b/mwp-web/src/static/expand.svg
diff --git a/mwp-web/src/static/script.js b/mwp-web/src/static/script.js
@@ -0,0 +1,14 @@
+document.querySelectorAll("[aria-expanded]").forEach(button => {
+  button.addEventListener("click", () => {
+    const expanded = button.getAttribute("aria-expanded");
+    if (expanded === "true") {
+      const target = button.getAttribute("aria-controls");
+      document.getElementById(target).classList.toggle("expanded");
+      button.setAttribute("aria-expanded", "false");
+    } else {
+      const target = button.getAttribute("aria-controls");
+      document.getElementById(target).classList.toggle("expanded");
+      button.setAttribute("aria-expanded", "true");
+    }
+  });
+});
diff --git a/mwp-web/static/script.js b/mwp-web/static/script.js
@@ -0,0 +1,14 @@
+document.querySelectorAll("[aria-expanded]").forEach(button => {
+  button.addEventListener("click", () => {
+    const expanded = button.getAttribute("aria-expanded");
+    if (expanded === "true") {
+      const target = button.getAttribute("aria-controls");
+      document.getElementById(target).classList.toggle("expanded");
+      button.setAttribute("aria-expanded", "false");
+    } else {
+      const target = button.getAttribute("aria-controls");
+      document.getElementById(target).classList.toggle("expanded");
+      button.setAttribute("aria-expanded", "true");
+    }
+  });
+});
diff --git a/mwp-web/static/styles.css b/mwp-web/static/styles.css
@@ -258,3 +258,48 @@ article {
   margin-bottom: var(--spacings-bit);
   font-weight: bold;
 }
+
+.tree a {
+  text-decoration: none;
+}
+.tree a.active {
+  font-weight: bold;
+}
+.tree .entry {
+  position: relative;
+}
+.tree .folder {
+  display: none;
+}
+.tree .folder.expanded {
+  display: block;
+}
+
+button[aria-expanded] {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--foreground);
+  position: absolute;
+  left: -22px;
+  top: 2px;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font-size: 0.7rem;
+}
+button[aria-expanded][aria-expanded=false] {
+  transform: rotate(-90deg);
+}
+
+.icon {
+  min-width: 12px;
+  min-height: 12px;
+  width: 0.75em;
+  height: 0.75em;
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
diff --git a/mwp-web/static/styles.scss b/mwp-web/static/styles.scss
@@ -279,4 +279,58 @@ article {
   }
 
   margin-bottom: var(--spacings-mega);
+}
+
+.tree {
+  a {
+    text-decoration: none;
+
+    &.active {
+      font-weight: bold;
+    }
+  }
+
+  .entry {
+    position: relative;
+  }
+
+  .folder {
+    display: none;
+
+    &.expanded {
+      display: block;
+    }
+  }
+}
+
+button[aria-expanded] {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--foreground);
+
+  position: absolute;
+  left: -22px;
+  top: 2px;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font-size: 0.7rem;
+
+  &[aria-expanded="false"] {
+    transform: rotate(-90deg);
+  }
+}
+
+.icon {
+  min-width: 12px;
+  min-height: 12px;
+  width: 0.75em;
+  height: 0.75em;
+  display: inline-block;
+  vertical-align: text-bottom;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 }