feat(routing): wip getStaticPathFromContentType & wip Chapter

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/basics",
+  "name": "fairedesjeux",
   "type": "module",
   "version": "0.0.1",
   "private": true,

src/data/chapters.ts

@@ -0,0 +1,6 @@
+import type { MarkdownInstance } from "astro"
+import type { BaseFrontmatter } from "./shared"
+
+export interface Chapter extends BaseFrontmatter {}
+
+export type ChapterInstance = MarkdownInstance<Chapter>

src/data/index.ts

@@ -0,0 +1,3 @@
+export * from "./chapters"
+export * from "./courses"
+export * from "./shared"

src/data/shared.ts

@@ -3,3 +3,5 @@ export interface BaseFrontmatter {
   description: string
   opengraph_image: string | null
 }
+
+export type ContentType = "Course" | "Chapter" | "Page"

src/layouts/AppLayout.astro

@@ -1,6 +1,6 @@
 ---
-import Footer from "../components/footer/Footer.astro"
-import Header from "../components/header/Header.astro"
+import Footer from "$components/footer/Footer.astro"
+import Header from "$components/header/Header.astro"
 
 export interface Props {
   title: string

src/layouts/ContentLayout.astro

@@ -1,5 +1,5 @@
 ---
-import type { CourseInstance } from "../data/courses"
+import type { CourseInstance } from "$data"
 import AppLayout from "./AppLayout.astro"
 
 interface Props {

src/pages/[course]/[slug].astro

@@ -0,0 +1,13 @@
+---
+import type { Chapter, ChapterInstance } from "$data"
+import { getStaticPathFromContentType } from "../glob.astro"
+
+interface Props {
+  slug: ChapterInstance
+}
+const { content } = Astro.props
+
+export async function getStaticPaths() {
+  return await getStaticPathFromContentType(Astro, "Chapter")
+}
+---

src/pages/[slug].astro

@@ -0,0 +1,16 @@
+---
+import type { CourseInstance } from "$data"
+import { getStaticPathFromContentType } from "./glob.astro"
+import ContentLayout from "$layouts/ContentLayout.astro"
+
+interface Props {
+  content: CourseInstance
+}
+const { content } = Astro.props
+
+export async function getStaticPaths() {
+  return await getStaticPathFromContentType(Astro, "Course")
+}
+---
+
+<ContentLayout content={content} />

src/pages/glob.astro

@@ -0,0 +1,44 @@
+---
+import type { Chapter, ContentType, Course } from "$data"
+import { getSlugFromFilePath } from "$utils"
+import type { AstroGlobal } from "astro"
+
+/**
+ * A standardized way to get all Static Paths of a given content type.
+ * ==============================================
+ * Temporarily moved from `src/utils/glob.ts`,
+ * see this issue -> https://github.com/withastro/astro/issues/5552
+ * @param Astro needed to use Astro.glob<t> inside a TypeScript file
+ * @param contentType what's the type of content needed ?
+ * @returns A promise of an array with all Static Paths
+ */
+export async function getStaticPathFromContentType(
+  Astro: Readonly<AstroGlobal>,
+  contentType: ContentType
+) {
+  let contents: Array<any> = []
+
+  switch (contentType) {
+    case "Course":
+      contents = await Astro.glob<Course>("../../content/**/index.md")
+      break
+    case "Chapter":
+      contents = await Astro.glob<Chapter>("../../content/**/**/chapter.md")
+    case "Page":
+      contents = await Astro.glob<Chapter>("../../content/**/**/*.md")
+    default:
+      throw new Error(
+        `[getStaticPathFromContentType] contentType not yet implemented: ${contentType}`
+      )
+  }
+
+  return contents.map((content) => ({
+    params: {
+      slug: getSlugFromFilePath(content.file, contentType),
+    },
+    props: {
+      content: { ...content },
+    },
+  }))
+}
+---

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
-import type { Course } from "../data/courses"
-import MainLayout from "../layouts/MainLayout.astro"
-import { getSlugFromPath } from "../utils"
+import type { Course } from "$data"
+import { getSlugFromFilePath } from "$utils"
+import MainLayout from "$layouts/MainLayout.astro"
 
 const courses = await Astro.glob<Course>("../../content/**/index.md")
 ---
@@ -12,7 +12,7 @@ const courses = await Astro.glob<Course>("../../content/**/index.md")
     {
       courses.map((course) => (
         <li>
-          <a href={"/" + getSlugFromPath(course.file, "Course")}>
+          <a href={"/" + getSlugFromFilePath(course.file, "Course")}>
             {course.frontmatter.title}
           </a>
         </li>

src/utils/files.ts

@@ -0,0 +1,25 @@
+import type { ContentType } from "$data"
+
+/**
+ * Get content's slug from a content file path
+ * @param path where is the content file ?
+ * @param contentType what's the type of content ?
+ * @returns
+ */
+export function getSlugFromFilePath(
+  path: string,
+  contentType: ContentType
+): string {
+  switch (contentType) {
+    case "Course":
+      return path.substring(
+        // there is probably a smarter way
+        path.indexOf("content/") + 8,
+        path.indexOf("/index.md")
+      )
+    default:
+      throw new Error(
+        `[getSlugFromFilePath] contentType not yet implemented: ${contentType}`
+      )
+  }
+}

src/utils/glob.ts

@@ -0,0 +1,7 @@
+/**
+ * Temporarily moved to `src/pages/glob.astro`,
+ * see this issue -> https://github.com/withastro/astro/issues/5552
+ */
+export async function getStaticPathFromContentType() {
+  throw new Error("Temporarily moved to `src/pages/glob.astro`")
+}

src/utils/index.ts

@@ -1,23 +1,2 @@
-/**
- * Get content's slug from a content file path
- * @param path where is the content file ?
- * @param contentType what's the type of content ?
- * @returns
- */
-export function getSlugFromPath(
-  path: string,
-  contentType: contentType
-): string {
-  switch (contentType) {
-    case "Course":
-      return path.substring(
-        // there is probably a smarter way
-        path.indexOf("content/") + 8,
-        path.indexOf("/index.md")
-      )
-    default:
-      throw new Error(`contentType not yet implemented: ${contentType}`)
-  }
-}
-
-type contentType = "Course" | "Chapter" | "Page"
+export * from "./files"
+export * from "./glob"

tsconfig.json

@@ -1,3 +1,12 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$components/*": ["src/components/*"],
+      "$data": ["src/data/index.ts"],
+      "$layouts/*": ["src/layouts/*"],
+      "$utils": ["src/utils/index.ts"]
+    }
+  }
+}