webamboos · dependabot · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/content/.gitkeep b/content/.gitkeep
diff --git a/content/advanced/index.md b/content/advanced/index.md
@@ -0,0 +1,3 @@
+---
+title: Advanced Topics
+---
diff --git a/content/advanced/web-security.md b/content/advanced/web-security.md
@@ -0,0 +1,3 @@
+---
+title: Web Security
+---
diff --git a/content/backend/index.md b/content/backend/index.md
@@ -0,0 +1,3 @@
+---
+title: Into the Backend
+---
diff --git a/content/backend/nodejs.md b/content/backend/nodejs.md
@@ -0,0 +1,3 @@
+---
+title: NodeJS
+---
diff --git a/content/backend/requests.md b/content/backend/requests.md
@@ -0,0 +1,3 @@
+---
+title: Requests & Responses
+---
diff --git a/content/backend/servers.md b/content/backend/servers.md
@@ -0,0 +1,5 @@
+---
+title: Servers
+---
+
+Ever wondered why we call the internet, the "web"? Because it's, in the simplest possible definition, just many computers connected to eachother, just like a spider web.
diff --git a/content/best-practices/index.md b/content/best-practices/index.md
@@ -0,0 +1,3 @@
+---
+title: Best Practices
+---
diff --git a/content/frontend/index.md b/content/frontend/index.md
@@ -0,0 +1,3 @@
+---
+title: Into the Frontend
+---
diff --git a/content/fundamentals/development-environment.md b/content/fundamentals/development-environment.md
@@ -0,0 +1,3 @@
+---
+title: The Development Environment
+---
diff --git a/content/fundamentals/index.md b/content/fundamentals/index.md
@@ -0,0 +1,3 @@
+---
+title: Fundamentals
+---
diff --git a/content/fundamentals/javascript.md b/content/fundamentals/javascript.md
@@ -0,0 +1,3 @@
+---
+title: JavaScript
+---
diff --git a/content/fundamentals/package-management.md b/content/fundamentals/package-management.md
@@ -0,0 +1,3 @@
+---
+title: Package Management
+---
diff --git a/content/fundamentals/the-url.md b/content/fundamentals/the-url.md
@@ -0,0 +1,3 @@
+---
+title: Understanding the URL
+---
diff --git a/content/fundamentals/the-web.md b/content/fundamentals/the-web.md
@@ -0,0 +1,4 @@
+---
+title: The Web
+---
+
diff --git a/content/index.md b/content/index.md
@@ -0,0 +1,21 @@
+---
+title: The Webamboos Guidebook
+---
+
+Welcome! Glad you found your way to our Guidebook. You may be asking what you'll find here, and we'll gladly answer that curiosity. We are big advocates of [lifelong learning](https://en.wikipedia.org/wiki/Lifelong_learning), so we decided to create and share some sort of learning resource for newbies and veterans alike in the web community.
+
+## ⭐ A brief introduction
+
+The **Webamboos Guidebook** is a collection of learning resources. As the web is vast and the technology advances quickly, we want to build a good knowledge foundation for everyone trying to get into web development, but also software engineering as a whole.
+
+While the guidebook is written for beginners, our philosophy does not exclude practicants with years of experience, we want to write interesting information for everyone. You never know what hidden gems you'll find!
+
+> [!tip] Tip!
+> 
+> **Go explore!** Learning is not linear, not even this guidebook. *Please*, click through all the links you find, try to build your own mental model of all the knowledge you can get. When you get back to a topic, everything will feel familiar!
+
+Before delving into technical information, we'll first visit the [the Mindset](/mindset/problem-solving). We'll show you why an engineer is a *problem solver*, how he takes decisions and why factors other than code need to be taken into account when creating new solutions.
+
+In the second chapter of the Guidebook you'll jump into the [Fundamentals](/fundamentals/the-web). Everything is interconnected (also why we chose to show you the nice graph on the side), having a good grasp of the fundamentals will allow you to go way beyond just the basics. Understanding the building blocks will show you how simple the web actually is.
+
+Chapter three introduces the first actual technical challenges, and we'll start by building a simple [Backend](/backend/servers) server. This chapter will show you how to build a simple server, how to handle [requests](/backend/requests), [responses](/backend/requests#responses), connecting and using a [database](/backend/databases), and more.
diff --git a/content/mindset/index.md b/content/mindset/index.md
@@ -0,0 +1,4 @@
+---
+title: Mindset
+---
+
diff --git a/content/mindset/problem-solving.md b/content/mindset/problem-solving.md
@@ -0,0 +1,3 @@
+---
+title: Problem Solving
+---
diff --git a/content/resources/index.md b/content/resources/index.md
@@ -0,0 +1,3 @@
+---
+title: Resources
+---
diff --git a/content/the-company/about.md b/content/the-company/about.md
@@ -0,0 +1,5 @@
+---
+title: About us
+---
+
+About us
diff --git a/content/the-company/index.md b/content/the-company/index.md
@@ -0,0 +1,3 @@
+---
+title: The Company
+---
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
-    "remark-smartypants": "^2.0.0",
+    "remark-smartypants": "^2.1.0",
     "rfdc": "^1.3.1",
     "rimraf": "^5.0.5",
     "serve-handler": "^6.1.5",

diff --git a/quartz.config.ts b/quartz.config.ts
@@ -3,21 +3,19 @@ import * as Plugin from "./quartz/plugins"
 
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4.0",
+    pageTitle: "The Guidebook",
     enableSPA: true,
     enablePopovers: true,
-    analytics: {
-      provider: "plausible",
-    },
+    analytics: null,
     locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
-    ignorePatterns: ["private", "templates", ".obsidian"],
-    defaultDateType: "created",
+    baseUrl: "guidebook.webamboos.com",
+    ignorePatterns: ["private", "templates", ".obsidian", "docs"],
+    defaultDateType: "modified",
     theme: {
       cdnCaching: true,
       typography: {
-        header: "Schibsted Grotesk",
-        body: "Source Sans Pro",
+        header: "Onest",
+        body: "Onest",
         code: "IBM Plex Mono",
       },
       colors: {
@@ -27,19 +25,19 @@ const config: QuartzConfig = {
           gray: "#b8b8b8",
           darkgray: "#4e4e4e",
           dark: "#2b2b2b",
-          secondary: "#284b63",
+          secondary: "#222222",
           tertiary: "#84a59d",
           highlight: "rgba(143, 159, 169, 0.15)",
         },
         darkMode: {
-          light: "#161618",
+          light: "#0f0f0f",
           lightgray: "#393639",
           gray: "#646464",
           darkgray: "#d4d4d4",
           dark: "#ebebec",
-          secondary: "#7b97aa",
+          secondary: "#eeeeee",
           tertiary: "#84a59d",
-          highlight: "rgba(143, 159, 169, 0.15)",
+          highlight: "rgba(143, 159, 169, 0)",
         },
       },
     },
@@ -50,7 +48,7 @@ const config: QuartzConfig = {
       Plugin.CreatedModifiedDate({
         // you can add 'git' here for last modified from Git
         // if you do rely on git for dates, ensure defaultDateType is 'modified'
-        priority: ["frontmatter", "filesystem"],
+        priority: ["frontmatter", "filesystem", "git"],
       }),
       Plugin.Latex({ renderEngine: "katex" }),
       Plugin.SyntaxHighlighting({

diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -7,12 +7,56 @@ export const sharedPageComponents: SharedLayout = {
   header: [],
   footer: Component.Footer({
     links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
+      "webamboos.com": "https://webamboos.com",
+      GitHub: "https://github.com/webamboos",
+      LinkedIn: "https://linkedin.com/company/webamboos",
+      Facebook: "https://www.facebook.com/webamboos",
+      Instagram: "https://www.instagram.com/webamboos",
     },
   }),
 }
 
+function explorer () {
+  return Component.Explorer({
+    sortFn(a, b) {
+      const nameOrderMap: Record<string, number> = {
+        "mindset": 100,
+
+        "fundamentals": 200,
+        "the-web": 201,
+        "the-url": 202,
+        "javascript": 203,
+        "development-environment": 204,
+        "package-management": 205,
+
+        "backend": 300,
+        "frontend": 400,
+        "advanced": 500,
+        "best-practices": 600,
+        "resources": 700,
+        "the-company": 800,
+      }
+
+      let orderA = 0
+      let orderB = 0
+
+      if (a.file && a.file.slug) {
+        orderA = nameOrderMap[a.file.slug] || nameOrderMap[a.name] || 0
+      } else if (a.name) {
+        orderA = nameOrderMap[a.name] || 0
+      }
+
+      if (b.file && b.file.slug) {
+        orderB = nameOrderMap[b.file.slug] || nameOrderMap[b.name] || 0
+      } else if (b.name) {
+        orderB = nameOrderMap[b.name] || 0
+      }
+
+      return orderA - orderB
+    }
+  })
+}
+
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
@@ -26,7 +70,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.DesktopOnly(explorer()),
   ],
   right: [
     Component.Graph(),
@@ -43,7 +87,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.DesktopOnly(explorer()),
   ],
   right: [],
 }
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
@@ -188,7 +188,9 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
             // Node with entire folder
             // Render svg button + folder name, then children
             <div class="folder-container">
-              <svg
+              <svg class="folder-icon closed" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity={0.2}></path><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"></path></g></svg>
+              <svg class="folder-icon open" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 88v24H69.77a8 8 0 0 0-7.59 5.47L32 208V64a8 8 0 0 1 8-8h53.33a8 8 0 0 1 4.8 1.6l27.74 20.8a8 8 0 0 0 4.8 1.6H200a8 8 0 0 1 8 8" opacity={0.2}></path><path d="M245 110.64a16 16 0 0 0-13-6.64h-16V88a16 16 0 0 0-16-16h-69.33l-27.73-20.8a16.14 16.14 0 0 0-9.6-3.2H40a16 16 0 0 0-16 16v144a8 8 0 0 0 8 8h179.1a8 8 0 0 0 7.59-5.47l28.49-85.47a16.05 16.05 0 0 0-2.18-14.42M93.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></g></svg>
+              {/* <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="12"
                 height="12"
@@ -201,7 +203,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
                 class="folder-icon"
               >
                 <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
+              </svg> */}
               {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
               <div key={node.name} data-folderpath={folderPath}>
                 {folderBehavior === "link" ? (

diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
@@ -21,10 +21,11 @@ button#explorer {
     margin-left: 0.5rem;
     transition: transform 0.3s ease;
     opacity: 0.8;
+    transform: scale(0.75);
   }
 
   &.collapsed .fold {
-    transform: rotateZ(-90deg);
+    transform: rotateZ(-90deg) scale(0.75);
   }
 }
 
@@ -55,16 +56,19 @@ button#explorer {
 
   & ul {
     list-style: none;
-    margin: 0.08rem 0;
+    margin: 0.1rem 0;
     padding: 0;
     transition:
       max-height 0.35s ease,
       transform 0.35s ease,
       opacity 0.2s ease;
+
     & li > a {
       color: var(--dark);
-      opacity: 0.75;
+      opacity: 0.8;
       pointer-events: all;
+      font-weight: 500;
+      line-height: 0.95;
     }
   }
 }
@@ -121,19 +125,24 @@ svg {
 }
 
 .folder-icon {
-  margin-right: 5px;
-  color: var(--secondary);
+  margin-right: 6px;
+  color: var(--dark);
   cursor: pointer;
   transition: transform 0.3s ease;
   backface-visibility: visible;
 }
 
-li:has(> .folder-outer:not(.open)) > .folder-container > svg {
-  transform: rotate(-90deg);
+li:has(> .folder-outer.open) > .folder-container > .folder-icon.closed {
+  display: none;
 }
-
-.folder-icon:hover {
-  color: var(--tertiary);
+li:has(> .folder-outer.open) > .folder-container > .folder-icon.open {
+  display: block;
+}
+li:has(> .folder-outer:not(.open)) > .folder-container > .folder-icon.closed {
+  display: block;
+}
+li:has(> .folder-outer:not(.open)) > .folder-container > .folder-icon.open {
+  display: none;
 }
 
 .no-background::after {