feat(routing): wip getStaticPathFromContentType & wip Chapter

getStaticPathFromContentType add a standardized way to get static path.
But the function throw an obscure error when used in TS files,
See this issue -> withastro/astro#5552

Author: goulvenclech

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/[...chapter].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/[course].astro

@@ -1,25 +1,16 @@
 ---
-import type { Course, CourseInstance } from "../data/courses"
-import ContentLayout from "../layouts/ContentLayout.astro"
-import { getSlugFromPath } from "../utils"
+import type { CourseInstance } from "$data"
+import { getStaticPathFromContentType } from "./glob.astro"
+import ContentLayout from "$layouts/ContentLayout.astro"
 
 interface Props {
-  course: CourseInstance
+  content: CourseInstance
 }
-const { course } = Astro.props
+const { content } = Astro.props
 
 export async function getStaticPaths() {
-  const courses = await Astro.glob<Course>("../../content/**/index.md")
-
-  return courses.map((course) => ({
-    params: {
-      course: getSlugFromPath(course.file, "Course"),
-    },
-    props: {
-      course: { ...course },
-    },
-  }))
+  return await getStaticPathFromContentType(Astro, "Course")
 }
 ---
 
-<ContentLayout content={course} />
+<ContentLayout content={content} />

src/pages/glob.astro

@@ -0,0 +1,54 @@
+---
+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")
+      return contents.map((content) => ({
+        params: {
+          course: getSlugFromFilePath(content.file, contentType),
+        },
+        props: {
+          content: { ...content },
+        },
+      }))
+
+    case "Chapter":
+      contents = await Astro.glob<Chapter>(`../../content/**/**/chapter.md`)
+
+      return contents.map((content) => ({
+        params: {
+          chapter: getSlugFromFilePath(content.file, contentType),
+        },
+        props: {
+          content: { ...content },
+        },
+      }))
+
+    case "Page":
+      contents = await Astro.glob<Chapter>("../../content/**/**/*.md")
+
+    default:
+      throw new Error(
+        `[getStaticPathFromContentType] contentType not yet implemented: ${contentType}`
+      )
+  }
+}
+---

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,37 @@
+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 extractSlugFromFilePath(path, "index.md")
+    case "Chapter":
+      return extractSlugFromFilePath(path, "chapter.md")
+    default:
+      throw new Error(
+        `[getSlugFromFilePath] contentType not yet implemented: ${contentType}`
+      )
+  }
+}
+
+/**
+ * Private function, utils used by getSlugFromFilePath to substring path
+ * @param path What's the path to substring ?
+ * @param end What's the end of the subtring ?
+ * @returns
+ */
+function extractSlugFromFilePath(path: string, end: string) {
+  return path.substring(
+    // there is probably a smarter way
+    path.indexOf("content/") + 8,
+    path.indexOf(`/${end}`)
+  )
+}

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"]
+    }
+  }
+}