Refactor docs (#77)

docs/components.typ

@@ -0,0 +1,16 @@
+#let collapsible(summary: [], open: false, name: "", content) = context {
+  if target() != "html" {
+    summary
+    content
+    return
+  }
+
+  html.details(
+    name: name,
+    open: open,
+    {
+      html.summary(summary)
+      content
+    },
+  )
+}

docs/index.typ

@@ -1,19 +0,0 @@
-#import "sidebar.typ": sidebar
-
-// Typst doesn't have file globbing so we have to add everything here and also in the rheo file oh well
-#let site-nav = (
-  (title: "Getting Started", items: (
-    (id: "index", title: "Home", url: "./index.html"),
-  )),
-)
-
-#show: sidebar.with(
-  nav: site-nav,
-  current: "index",
-  title: "GPUI-CE",
-  home-url: "./index.html",
-)
-
-= Hello World!
-
-Welcome to the GPUI-CE documentation.

docs/pages/index.typ

@@ -0,0 +1,7 @@
+#import "../template.typ": template
+
+#show: template.with(current: "index")
+
+= Hello World!
+
+Welcome to the GPUI-CE documentation.

docs/sidebar.typ

@@ -4,39 +4,36 @@
   title: "",
   home-url: "/",
   doc,
-) = {
-  context if target() == "html" {
-    html.elem("input", attrs: ("type": "checkbox", "id": "t"), [])
-    html.elem("label", attrs: ("for": "t"), [])
-    html.elem("div", attrs: ("id": "l"), [
-      #html.elem("nav", [
-        #html.elem("header", [
-          #html.elem("a", attrs: ("href": home-url), [
-             #html.elem("h1", [#title])
-          ])
-        ])
-        #html.elem("ul", [
-          #for section in nav {
-            html.elem("li", [
-              #html.elem("span", [#section.title])
-            ])
-            for item in section.at("items", default: ()) {
-              let attrs = if item.id == current {
-                ("href": item.url, "aria-current": "page")
-              } else {
-                ("href": item.url,)
-              }
-              html.elem("li", [
-                #html.elem("a", attrs: attrs, [#item.title])
-              ])
-            }
-          }
-        ])
-      ])
-      #html.elem("main", [#doc])
-    ])
-    html.elem("label", attrs: ("for": "t"), [])
-  } else {
-    doc
+) = context {
+  if target() != "html" {
+    return doc
   }
+
+  html.input(type: "checkbox", id: "t")
+  html.label("t")
+  html.div(id: "l", {
+    html.nav({
+      html.header(
+        html.a(href: home-url, html.h1(title)),
+      )
+      html.ul(
+        for section in nav {
+          html.li(
+            html.span(section.title),
+          )
+          for item in section.at("items", default: ()) {
+            html.li(
+              if item.id == current {
+                html.a(href: item.url, aria-current: "page", item.title)
+              } else {
+                html.a(href: item.url, item.title)
+              },
+            )
+          }
+        },
+      )
+    })
+    html.main(doc)
+  })
+  html.label("t")
 }

docs/site-nav.yaml

@@ -0,0 +1,7 @@
+- title: "Getting Started"
+  items:
+    - id: "index"
+      title: "Home"
+      url: "./index.html"
+      
+- title: "Differences between GPUI-CE and GPUI"

docs/template.typ

@@ -0,0 +1,14 @@
+#import "sidebar.typ": sidebar
+
+#let template(current: str, doc) = {
+  let site-nav = yaml("site-nav.yaml")
+
+  show: sidebar.with(
+    nav: site-nav,
+    current: current,
+    title: "GPUI-CE",
+    home-url: "./index.html",
+  )
+
+  doc
+}

rheo.toml

@@ -1,5 +1,5 @@
 version = "0.3.1"
-content_dir = "docs"
+content_dir = "docs/pages"
 
 [[html.assets]]
 css_stylesheet = "./docs/media/sidebar.css"