diff --git a/content/.gitkeep b/content/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/content/advanced/index.md b/content/advanced/index.md new file mode 100644 index 00000000..598317ec --- /dev/null +++ b/content/advanced/index.md @@ -0,0 +1,3 @@ +--- +title: Advanced Topics +--- \ No newline at end of file diff --git a/content/advanced/web-security.md b/content/advanced/web-security.md new file mode 100644 index 00000000..540a96ec --- /dev/null +++ b/content/advanced/web-security.md @@ -0,0 +1,3 @@ +--- +title: Web Security +--- \ No newline at end of file diff --git a/content/backend/index.md b/content/backend/index.md new file mode 100644 index 00000000..df27d605 --- /dev/null +++ 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 new file mode 100644 index 00000000..6a45372a --- /dev/null +++ b/content/backend/nodejs.md @@ -0,0 +1,3 @@ +--- +title: NodeJS +--- \ No newline at end of file diff --git a/content/backend/requests.md b/content/backend/requests.md new file mode 100644 index 00000000..9bd73cb1 --- /dev/null +++ b/content/backend/requests.md @@ -0,0 +1,3 @@ +--- +title: Requests & Responses +--- \ No newline at end of file diff --git a/content/backend/servers.md b/content/backend/servers.md new file mode 100644 index 00000000..bb9e414b --- /dev/null +++ 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 new file mode 100644 index 00000000..75dcdaca --- /dev/null +++ b/content/best-practices/index.md @@ -0,0 +1,3 @@ +--- +title: Best Practices +--- \ No newline at end of file diff --git a/content/frontend/index.md b/content/frontend/index.md new file mode 100644 index 00000000..008caaf1 --- /dev/null +++ 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 new file mode 100644 index 00000000..c623508f --- /dev/null +++ b/content/fundamentals/development-environment.md @@ -0,0 +1,3 @@ +--- +title: The Development Environment +--- \ No newline at end of file diff --git a/content/fundamentals/index.md b/content/fundamentals/index.md new file mode 100644 index 00000000..ce6b42a7 --- /dev/null +++ b/content/fundamentals/index.md @@ -0,0 +1,3 @@ +--- +title: Fundamentals +--- diff --git a/content/fundamentals/javascript.md b/content/fundamentals/javascript.md new file mode 100644 index 00000000..b5ff678c --- /dev/null +++ b/content/fundamentals/javascript.md @@ -0,0 +1,3 @@ +--- +title: JavaScript +--- \ No newline at end of file diff --git a/content/fundamentals/package-management.md b/content/fundamentals/package-management.md new file mode 100644 index 00000000..ff6f551f --- /dev/null +++ b/content/fundamentals/package-management.md @@ -0,0 +1,3 @@ +--- +title: Package Management +--- \ No newline at end of file diff --git a/content/fundamentals/the-url.md b/content/fundamentals/the-url.md new file mode 100644 index 00000000..05ce9ff3 --- /dev/null +++ b/content/fundamentals/the-url.md @@ -0,0 +1,3 @@ +--- +title: Understanding the URL +--- \ No newline at end of file diff --git a/content/fundamentals/the-web.md b/content/fundamentals/the-web.md new file mode 100644 index 00000000..6654752b --- /dev/null +++ b/content/fundamentals/the-web.md @@ -0,0 +1,4 @@ +--- +title: The Web +--- + diff --git a/content/index.md b/content/index.md new file mode 100644 index 00000000..51471d2c --- /dev/null +++ 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. \ No newline at end of file diff --git a/content/mindset/index.md b/content/mindset/index.md new file mode 100644 index 00000000..abc02f43 --- /dev/null +++ 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 new file mode 100644 index 00000000..daa73ce5 --- /dev/null +++ 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 new file mode 100644 index 00000000..55d19830 --- /dev/null +++ b/content/resources/index.md @@ -0,0 +1,3 @@ +--- +title: Resources +--- \ No newline at end of file diff --git a/content/the-company/about.md b/content/the-company/about.md new file mode 100644 index 00000000..a77c3bec --- /dev/null +++ b/content/the-company/about.md @@ -0,0 +1,5 @@ +--- +title: About us +--- + +About us \ No newline at end of file diff --git a/content/the-company/index.md b/content/the-company/index.md new file mode 100644 index 00000000..86ae35fd --- /dev/null +++ b/content/the-company/index.md @@ -0,0 +1,3 @@ +--- +title: The Company +--- diff --git a/package-lock.json b/package-lock.json index 4a8b5833..6ae6dec5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,7 +50,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", @@ -4864,32 +4864,18 @@ } }, "node_modules/remark-smartypants": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/remark-smartypants/-/remark-smartypants-2.0.0.tgz", - "integrity": "sha512-Rc0VDmr/yhnMQIz8n2ACYXlfw/P/XZev884QU1I5u+5DgJls32o97Vc1RbK3pfumLsJomS2yy8eT4Fxj/2MDVA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/remark-smartypants/-/remark-smartypants-2.1.0.tgz", + "integrity": "sha512-qoF6Vz3BjU2tP6OfZqHOvCU0ACmu/6jhGaINSQRI9mM7wCxNQTKB3JUAN4SVoN2ybElEDTxBIABRep7e569iJw==", "dependencies": { "retext": "^8.1.0", - "retext-smartypants": "^5.1.0", - "unist-util-visit": "^4.1.0" + "retext-smartypants": "^5.2.0", + "unist-util-visit": "^5.0.0" }, "engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, - "node_modules/remark-smartypants/node_modules/unist-util-visit": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz", - "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==", - "dependencies": { - "@types/unist": "^2.0.0", - "unist-util-is": "^5.0.0", - "unist-util-visit-parents": "^5.1.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/remark-stringify": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz", diff --git a/package.json b/package.json index 54c67fbf..bdbbc2cd 100644 --- 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 index 8c479ac7..1471ffa6 100644 --- 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 index b5a1639e..7e633c48 100644 --- 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 = { + "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 index 2968a03e..5ccc29fd 100644 --- 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
- + + {/* - + */} {/* render tag if folderBehavior is "link", otherwise render