fix(courses): better typing

Author: goulvenclech

src/data/courses.ts

@@ -1,12 +1,15 @@
+import type { MarkdownInstance } from "astro"
 import type { BaseFrontmatter } from "./shared"
 
 export interface Course extends BaseFrontmatter {
-  type: string
+  type: "SKILL" | "ENGINE"
   short_title: string
   date: string
   author: string
-  medal: string
+  medal: "SILVER" | "BRONZE" | "GOLD" | "PLATINIUM"
   medal_message: string
   cover_wide: string
   cover_tall: string
 }
+
+export type CourseInstance = MarkdownInstance<Course>

src/layouts/AppLayout.astro

@@ -5,7 +5,6 @@ import Header from "../components/header/Header.astro"
 export interface Props {
   title: string
 }
-
 const { title } = Astro.props
 ---
 

src/layouts/ContentLayout.astro

@@ -1,15 +1,17 @@
 ---
-import type { Course } from "../data/courses"
+import type { CourseInstance } from "../data/courses"
 import AppLayout from "./AppLayout.astro"
 
+interface Props {
+  content: CourseInstance
+}
 const { content } = Astro.props
-const frontmatter: Course = content.frontmatter
 ---
 
-<AppLayout title={frontmatter.title}>
+<AppLayout title={content.frontmatter.title}>
   <main class="max-w-screen-md mx-auto px-4 py-2">
     <h2>
-      {frontmatter.title}
+      {content.frontmatter.title}
     </h2>
     <content.Content />
   </main>

src/layouts/MainLayout.astro

@@ -1,6 +1,9 @@
 ---
 import AppLayout from "./AppLayout.astro"
 
+interface Props {
+  title: string
+}
 const { title } = Astro.props
 ---
 

src/pages/[course].astro

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

src/pages/index.astro

@@ -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={"/" + getSlugFromPath(course.file, "Course")}>
             {course.frontmatter.title}
           </a>
         </li>

src/utils/index.ts

@@ -4,17 +4,20 @@
  * @param contentType what's the type of content ?
  * @returns
  */
-export function getSlugFromPath(path: String, contentType: String): String {
+export function getSlugFromPath(
+  path: string,
+  contentType: contentType
+): string {
   switch (contentType) {
-    case "course":
+    case "Course":
       return path.substring(
         // there is probably a smarter way
         path.indexOf("content/") + 8,
         path.indexOf("/index.md")
       )
     default:
-      throw new Error(
-        `contentType from getSlugFromPath() is invalid: ${contentType}`
-      )
+      throw new Error(`contentType not yet implemented: ${contentType}`)
   }
 }
+
+type contentType = "Course" | "Chapter" | "Page"