From f9a8c62bd90652a9531f0245a091117272bc4d50 Mon Sep 17 00:00:00 2001
From: Nevsor <Nevsor@users.noreply.github.com>
Date: Sat, 20 Jun 2026 15:37:49 +0200
Subject: [PATCH] Refactor docs (#77)

---
 docs/components.typ  | 16 +++++++++++
 docs/index.typ       | 19 -------------
 docs/pages/index.typ |  7 +++++
 docs/sidebar.typ     | 65 +++++++++++++++++++++-----------------------
 docs/site-nav.yaml   |  7 +++++
 docs/template.typ    | 14 ++++++++++
 rheo.toml            |  2 +-
 7 files changed, 76 insertions(+), 54 deletions(-)
 create mode 100644 docs/components.typ
 delete mode 100644 docs/index.typ
 create mode 100644 docs/pages/index.typ
 create mode 100644 docs/site-nav.yaml
 create mode 100644 docs/template.typ

diff --git a/docs/components.typ b/docs/components.typ
new file mode 100644
index 0000000000..a341098c97
--- /dev/null
+++ b/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
+    },
+  )
+}
diff --git a/docs/index.typ b/docs/index.typ
deleted file mode 100644
index b97a9d4ef7..0000000000
--- a/docs/index.typ
+++ /dev/null
@@ -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.
diff --git a/docs/pages/index.typ b/docs/pages/index.typ
new file mode 100644
index 0000000000..2caa8df322
--- /dev/null
+++ b/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.
diff --git a/docs/sidebar.typ b/docs/sidebar.typ
index 95fcf08aac..d3cfda9c23 100644
--- a/docs/sidebar.typ
+++ b/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")
 }
diff --git a/docs/site-nav.yaml b/docs/site-nav.yaml
new file mode 100644
index 0000000000..49e7eca17d
--- /dev/null
+++ b/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"
diff --git a/docs/template.typ b/docs/template.typ
new file mode 100644
index 0000000000..4840df98c1
--- /dev/null
+++ b/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
+}
diff --git a/rheo.toml b/rheo.toml
index e187a7a00a..a90d75ec67 100644
--- a/rheo.toml
+++ b/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"