add more tutorial routing

Efnilite · Efnilite · commit e40fb0198ed6 · 2025-07-13T14:22:31.000+02:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -8,7 +8,7 @@ export default defineConfig({
     plugins: [tailwindcss()],
   },
   redirects: {
-    "tutorials": "/tutorials/getting-started",
+    "tutorials": "/tutorials/scripting/getting-started",
     "events": "/docs",
     "conditions": "/docs",
     "effects": "/docs",
diff --git a/src/assets/tutorials/api/getting-started.md b/src/assets/tutorials/api/getting-started.md
@@ -0,0 +1,15 @@
+---
+title: Getting Started
+author: Efnilite
+date: 7/13/2024
+url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/getting-started.md
+section: API
+index: 0
+---
+
+# Getting Started
+
+We're happy to see you're interested in learning about the Skript API. 
+On the left, you'll find the list of all official tutorials currently available.
+
+Have fun!
diff --git a/src/assets/tutorials/scripting/commands.md b/src/assets/tutorials/scripting/commands.md
@@ -3,6 +3,8 @@ title: Commands
 author: sovde, blueyescat
 date: 2/20/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/commands.md
+section: Scripting
+index: 4
 ---
 
 # Commands
diff --git a/src/assets/tutorials/scripting/conditionals.md b/src/assets/tutorials/scripting/conditionals.md
@@ -3,6 +3,8 @@ title: Conditionals
 author: sovde
 date: 2/20/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/conditionals.md
+section: Scripting
+index: 2
 ---
 
 # Conditionals
diff --git a/src/assets/tutorials/scripting/functions.md b/src/assets/tutorials/scripting/functions.md
@@ -3,6 +3,8 @@ title: Functions
 author: sovde
 date: 2/20/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/functions.md
+section: Scripting
+index: 5
 ---
 
 # Functions
diff --git a/src/assets/tutorials/scripting/getting-started.md b/src/assets/tutorials/scripting/getting-started.md
@@ -3,6 +3,8 @@ title: Getting Started
 author: Efnilite
 date: 2/2/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/getting-started.md
+section: Scripting
+index: 0
 ---
 
 # Getting Started
diff --git a/src/assets/tutorials/scripting/loops.md b/src/assets/tutorials/scripting/loops.md
@@ -3,6 +3,8 @@ title: Loops
 author: sovde
 date: 2/20/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/loops.md
+section: Scripting
+index: 3
 ---
 
 # Loops
diff --git a/src/assets/tutorials/scripting/text.md b/src/assets/tutorials/scripting/text.md
@@ -3,6 +3,8 @@ title: Text
 author: Efnilite, bensku
 date: 2/2/2024
 url: https://github.com/SkriptLang/docs/blob/master/src/assets/tutorials/text.md
+section: Scripting
+index: 1
 ---
 
 # Text
diff --git a/src/components/docs/DocsFilters.astro b/src/components/docs/DocsFilters.astro
@@ -6,7 +6,7 @@ import docs from "../../assets/docs/docs.json";
 const latest = docs.skriptVersion.match(/\d+\.(\d+)/)!!;
 const latestMinor = parseInt(latest[1], 10)!! - 1;
 
-let versions = ["New"];
+let versions = [latest[0] + " (New)"];
 for (let i = latestMinor; i > latestMinor - 4; i--) {
     versions.push(`2.${i}`);
 }
@@ -107,7 +107,7 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {
                     return;
                 }
 
-                if (filter.versions.includes("New") && element.getAttribute("data-new") === "true") {
+                if (filter.versions.find(it => it.includes("New")) && element.getAttribute("data-new") === "true") {
                     element.classList.remove("hidden-by-version");
                     return;
                 }
diff --git a/src/components/nav/NavTabs.astro b/src/components/nav/NavTabs.astro
@@ -15,7 +15,7 @@ interface TabData {
 
 const pages: TabData[] = [
     { name: "Docs", link: "/docs", color: "9C0505" },
-    { name: "Tutorials", link: "/tutorials/getting-started", color: "1B8C17" },
+    { name: "Tutorials", link: "/tutorials/scripting/getting-started", color: "1B8C17" },
     { name: "Tools", link: "/tools", color: "0099B3" }
 ];
 
diff --git a/src/components/tutorials/Tutorials.astro b/src/components/tutorials/Tutorials.astro
@@ -2,34 +2,51 @@
 import { getCollection } from "astro:content";
 import TutorialsOverview from "./TutorialsOverview.astro";
 
-interface PreTutorial {
+interface TutorialData {
     id: string;
     data: {
         title: string;
         url: string;
+        section: string;
+        index: number;
     }
 }
 
 export interface Tutorial {
     id: string;
     title: string;
     url: string;
+    section: string;
+    index: number;
 }
 
-const tutorials: Tutorial[] = (await getCollection("tutorials") as PreTutorial[])
+interface Frontmatter {
+    title: string;
+    author: string;
+    date: string;
+    url: string;
+    section: string;
+    index: number;
+}
+
+const tutorials: Tutorial[] = (await getCollection("tutorials"))
     .map(post => {
+        const fm = post.rendered?.metadata?.frontmatter as Frontmatter;
+
         return {
-            id: post.id,
-            title: post.data.title,
-            url: post.data.url,
+            id: post.id!!,
+            title: fm.title,
+            url: fm.url,
+            section: fm.section,
+            index: fm.index,
         }
     });
 
 interface Props {
-    selected: string;
+    id: string;
 }
 
-const { selected }: Props = Astro.props;
+const { id }: Props = Astro.props;
 ---
 
 <script>
@@ -48,7 +65,7 @@ const { selected }: Props = Astro.props;
 </script>
 
 <section class="flex flex-col lg:flex-row">
-    <TutorialsOverview selected={selected} tutorials={tutorials}/>
+    <TutorialsOverview id={id} tutorials={tutorials}/>
     <div class="flex flex-col gap-4">
         <div class="md:m-4 px-4 md:pl-24 md:pr-64 py-4">
             <div class="max-w-[896px] rounded-md flex-auto h-fit flex flex-col gap-4">
diff --git a/src/components/tutorials/TutorialsOverview.astro b/src/components/tutorials/TutorialsOverview.astro
@@ -2,11 +2,19 @@
 import type { Tutorial } from './Tutorials.astro';
 
 interface Props {
-    selected: string;
+    id: string;
     tutorials: Tutorial[];
 }
 
-const { selected, tutorials }: Props = Astro.props;
+const { id, tutorials }: Props = Astro.props;
+
+const bySection = tutorials.reduce((acc, tutorial) => {
+    const section = tutorial.section;
+    if (!acc[section]) acc[section] = [];
+    acc[section].push(tutorial);
+    return acc;
+}, {} as Record<string, Tutorial[]>);
+
 ---
 
 <script>
@@ -48,20 +56,27 @@ const { selected, tutorials }: Props = Astro.props;
         </button>
     </div>
     <div id="tutorials-expand-area" class="hidden sm:flex flex-col gap-2">
-        {tutorials.toSorted().map(x => {
-            if (x.title === selected) {
-                return <a href={`/tutorials/${x.id}`} class="text-left px-4 py-3 rounded-md 
-                    bg-skript hover:cursor-pointer
-                    font-bold text-white">
-                    {x.title}
-                </a>
-            } else {
-                return <a href={`/tutorials/${x.id}`} class="text-left px-4 py-3 rounded-md 
-                    bg-l-bg-secondary dark:bg-d-bg-secondary hover:cursor-pointer
-                    font-bold">
-                    {x.title}
-                </a>
-            }
-        })}
+        {Object.entries(bySection).map(([sectionName, tutorials]) => (
+           <div class="flex flex-col gap-1">
+                <h2 class="text-lg font-semibold mt-1">{sectionName}</h2>
+                <div class="flex flex-col gap-2 border-l-1 border-l-neutral-700">
+                    { tutorials.toSorted((x, y) => x.index - y.index).map(x => {
+                    if (x.id === id) {
+                        return <a href={`/tutorials/${x.id}`} class="ml-2 text-left px-4 py-3 rounded-md 
+                            bg-skript hover:cursor-pointer
+                            font-bold text-white">
+                            {x.title}
+                        </a>
+                    } else {
+                        return <a href={`/tutorials/${x.id}`} class="ml-2 text-left px-4 py-3 rounded-md 
+                            bg-l-bg-secondary dark:bg-d-bg-secondary hover:cursor-pointer
+                            font-bold">
+                            {x.title}
+                        </a>
+                    }
+                })}
+                </div>
+           </div>
+        ))}
     </div>
 </div>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -45,8 +45,8 @@ const { title }: Props = Astro.props;
 				prefersDarkScheme()
 			);
 
-			const darkToggle = document.getElementById("dark-toggle");
-			const lightToggle = document.getElementById("light-toggle");
+			const darkToggle = document.getElementById("dark-toggle")!!;
+			const lightToggle = document.getElementById("light-toggle")!!;
 
 			if (prefersDarkScheme()) {
 				localStorage.theme = "dark";
diff --git a/src/pages/tools.astro b/src/pages/tools.astro
@@ -5,7 +5,7 @@ import Page from "../layouts/Page.astro";
 
 <Page title="Tools - Skript Docs">
     <Nav type={PageType.TOOLS}/>
-    <section class="p-4 m-auto flex flex-col gap-2 w-full md:w-120">
+    <section class="p-6 m-auto flex flex-col gap-2 w-full md:w-120">
         <a href="https://docs.skriptlang.org/javadocs/" 
             class="flex flex-col p-4 bg-l-bg-secondary dark:bg-d-bg-secondary rounded-md
             hover:bg-l-icon-hover hover:dark:bg-d-icon-hover transition">
diff --git a/src/pages/tutorials/[...id].astro b/src/pages/tutorials/[...id].astro
@@ -22,9 +22,9 @@ const title = tutorial.data.title;
 const { Content } = await render(tutorial);
 ---
 
-<Page title={`${title} - Tutorials - Skript Docs`}>
+<Page title={`${title} | Tutorials | Skript Docs`}>
     <Nav type={PageType.TUTORIALS} />
-    <Tutorials selected={title}>
-        <Content/>
+    <Tutorials id={tutorial.id}>
+        <Content />
     </Tutorials>
-</Page>
+</Page>

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import docs from "../../assets/docs/docs.json";`
`6`	`6`	`const latest = docs.skriptVersion.match(/\d+\.(\d+)/)!!;`
`7`	`7`	`const latestMinor = parseInt(latest[1], 10)!! - 1;`
`8`	`8`
`9`		`-let versions = ["New"];`
	`9`	`+let versions = [latest[0] + " (New)"];`
`10`	`10`	`for (let i = latestMinor; i > latestMinor - 4; i--) {`
`11`	`11`	versions.push(`2.${i}`);
`12`	`12`	`}`
`@@ -107,7 +107,7 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {`
`107`	`107`	`return;`
`108`	`108`	`}`
`109`	`109`
`110`		`- if (filter.versions.includes("New") && element.getAttribute("data-new") === "true") {`
	`110`	`+ if (filter.versions.find(it => it.includes("New")) && element.getAttribute("data-new") === "true") {`
`111`	`111`	`element.classList.remove("hidden-by-version");`
`112`	`112`	`return;`
`113`	`113`	`}`