added the logo to the docs

packages/docs/package.json

@@ -17,6 +17,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "deepmerge": "^4.2.2",
     "escape-html": "^1.0.3",
+    "file-loader": "^6.2.0",
     "hast-util-sanitize": "^4.0.0",
     "html-loader": "^3.1.2",
     "prismjs": "^1.28.0",
@@ -28,6 +29,7 @@
     "remark-twemoji": "^0.1.1",
     "twemoji": "^14.0.2",
     "unist-util-visit": "^4.1.0",
+    "url-loader": "^4.1.1",
     "webpack": "^5.73.0"
   }
 }

packages/docs/src/components/DocsComponent.pupper

@@ -1,4 +1,7 @@
 import SyntaxComponent(from="../documentation/essentials/Syntax.md")
+import GettingStarted(from="../documentation/Getting Started.md")
+
+import IconImage(from="url-loader!../img/icon.png")
 
 template
     link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css")
@@ -7,27 +10,44 @@ template
         .row
             //- Sidebar
             .col-12.col-lg-4.col-xl-3
-                each section in sections
-                    div
-                        strong=section.title
+                img.mb-5(width="25%", :src="icon")
+
+                ul
+                    each section in sections
+                        li
+                            unless section.subSections
+                                a.text-dark(href="#", @click="changeToSection({ section }, $event)")
+                                    strong=section.title
+                            else
+                                strong=section.title
 
-                        .list-group
-                            each subSection in section.subSections
-                                .list-group-item.list-group-item-action(
-                                    role="button",
-                                    @click="changeToSection(subSection)"
-                                )=subSection.title
+                            if section.subSections
+                                .list-group
+                                    each subSection in section.subSections
+                                        .list-group-item.list-group-item-action(
+                                            role="button",
+                                            @click="changeToSection({ section: subSection, parent: section })"
+                                        )=subSection.title
 
             //- Section content
             .col-12.col-lg-6.col-xl-7.mt-3.mt-lg-0
-                slot(name="section")
+                div
+                    slot(name="section")
 
 data
+    icon = IconImage
     sections = [
         {
+            id: "getting-started",
+            title: "Getting Started",
+            component: GettingStarted
+        },
+        {
+            id: "essentials",
             title: "Essentials",
             subSections: [
                 {
+                    id: "syntax",
                     title: "Syntax",
                     component: SyntaxComponent
                 }
@@ -36,8 +56,44 @@ data
     ]
 
 implementation
-    #changeToSection(section)
+    #changeToSection(data, e = undefined)
+        e?.preventDefault();
+
         const template = document.createElement("template");
-        template.innerHTML = section.component;
+        template.innerHTML = data.section.component;
+
+        this.$slots.section.replace(template.content);
+
+        let hash = "#/docs/";
+
+        if (data.parent) {
+            hash += data.parent.id + "/";
+        }
+
+        hash += data.section.id;
+
+        window.location.hash = hash;
+
+    when#mounted
+        this.$nextTick(() => {
+            const sectionParts = window.location.hash.split("docs/")?.[1].split("/");
+
+            let currentSection = this.sections.find((section) => section.id === sectionParts.shift());
+            let part = 0;
+
+            while(part <= sectionParts.length) {
+                const currentPart = sectionParts[part++];
+
+                if (currentSection.id !== currentPart) {
+                    currentSection = currentSection?.subSections.find((s) => s.id === currentPart);
+
+                    if (!currentSection) {
+                        break;
+                    }
+                }
+            }
 
-        this.$slots.section.replace(template.content);
+            if (currentSection) {
+                this.changeToSection(currentSection);
+            }
+        });

packages/docs/src/documentation/Getting Started.md

@@ -0,0 +1 @@
+## Getting Started

packages/docs/src/documentation/essentials/Syntax.md

@@ -17,7 +17,7 @@ Normal JavaScript works fine with components:
 template
     body(class=authenticated ? "authed" : "anon")
 data
-    authed = false
+    authenticated = false
 ```
 
 ### Multi-line Attributes