From 0614e2b7ef377d00a07dbfcd4f9dc8782f707262 Mon Sep 17 00:00:00 2001 From: Henrique Ramos Date: Sat, 1 Feb 2025 18:26:43 -0300 Subject: [PATCH] feat: use astro files for slides --- src/content.config.ts | 14 --- src/layouts/SlideLayout.astro | 2 +- src/pages/[id].astro | 18 ++-- src/pages/index.astro | 32 +++---- src/slides/flexbox/index.astro | 92 +++++++++++++++++++ .../index.astro} | 8 +- src/utils/getAstroPages.ts | 38 ++++++++ src/utils/getSlides.ts | 25 +++++ 8 files changed, 182 insertions(+), 47 deletions(-) delete mode 100644 src/content.config.ts create mode 100644 src/slides/flexbox/index.astro rename src/slides/{statex-gamedev.md => statex-gamedev/index.astro} (93%) create mode 100644 src/utils/getAstroPages.ts create mode 100644 src/utils/getSlides.ts diff --git a/src/content.config.ts b/src/content.config.ts deleted file mode 100644 index 833a358..0000000 --- a/src/content.config.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { defineCollection, z } from "astro:content"; -import { glob } from "astro/loaders"; // Not available with legacy API - -const slides = defineCollection({ - loader: glob({ pattern: "**/*.md", base: "./src/slides" }), - schema: z.object({ - title: z.string(), - description: z.string(), - authors: z.array(z.string()), - publishedAt: z.coerce.date(), - }), -}); - -export const collections = { slides }; diff --git a/src/layouts/SlideLayout.astro b/src/layouts/SlideLayout.astro index e384d33..da7ce8d 100644 --- a/src/layouts/SlideLayout.astro +++ b/src/layouts/SlideLayout.astro @@ -5,7 +5,7 @@ export interface Props { description?: string; } import Layout from "./BaseLayout.astro"; -import "@themes/hnrq.scss"; +import "@theme"; const { title, authors, description } = Astro.props; --- diff --git a/src/pages/[id].astro b/src/pages/[id].astro index ff652d6..36745f9 100644 --- a/src/pages/[id].astro +++ b/src/pages/[id].astro @@ -1,21 +1,17 @@ --- import SlideLayout from "@layouts/SlideLayout.astro"; -import { getCollection, render } from "astro:content"; +import { getSlides } from "@utils/getSlides"; -export const getStaticPaths = async () => - (await getCollection("slides")).map((slide) => ({ - params: { id: slide.id }, - props: { slide }, - })); +export const getStaticPaths = () => + getSlides().map((slide) => ({ params: { id: slide.id }, props: { slide } })); const { slide } = Astro.props; -const { Content } = await render(slide); --- - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 61e8e35..e11e580 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,10 +1,8 @@ --- import Layout from "@layouts/BaseLayout.astro"; -import { getCollection } from "astro:content"; +import { getSlides } from "@utils/getSlides"; -const slides = (await getCollection("slides")).sort((c1, c2) => - c1.data.title > c2.data.title ? -1 : 1 -); +const slides = getSlides().sort((c1, c2) => (c1.title > c2.title ? -1 : 1)); --- @@ -13,21 +11,21 @@ const slides = (await getCollection("slides")).sort((c1, c2) => { slides.map((slide) => ( -

{slide.data.title}

-

{slide.data.description}

- {slide.data.publishedAt.toLocaleDateString()} +

{slide.title}

+

{slide.description}

+ {new Date(slide.publishedAt).toLocaleDateString()} )) } - diff --git a/src/slides/flexbox/index.astro b/src/slides/flexbox/index.astro new file mode 100644 index 0000000..22f83da --- /dev/null +++ b/src/slides/flexbox/index.astro @@ -0,0 +1,92 @@ +--- +export const title = "CSS Flexbox" +export const authors = ["Henrique Ramos"] +export const publishedAt = "2025-01-27" +export const description = "Do you even flex?" +--- + +
+

What is Flexbox?

+ +
+ +
+

Basic Flexbox Container

+
+
1
+
2
+
3
+
+ 

+.container {'{'}
+  display: flex;
+{'}'}
+
+
+ +
+

justify-content

+
+
1
+
2
+
3
+
+ 

+.container {'{'}
+  justify-content: space-between;
+{'}'}
+
+
+ +
+

align-items

+
+
1
+
2
+
3
+
+ 

+.container {'{'}
+  align-items: center;
+{'}'}
+
+
+ +
+

flex-direction

+
+
1
+
2
+
3
+
+ 

+.container {'{'}
+  flex-direction: column;
+{'}'}
+
+
+ + + diff --git a/src/slides/statex-gamedev.md b/src/slides/statex-gamedev/index.astro similarity index 93% rename from src/slides/statex-gamedev.md rename to src/slides/statex-gamedev/index.astro index 0180462..a32da47 100644 --- a/src/slides/statex-gamedev.md +++ b/src/slides/statex-gamedev/index.astro @@ -1,8 +1,8 @@ --- -title: "Finite State Machines with XState for Game Development using Three.js" -authors: ["Henrique Ramos"] -publishedAt: 2024-12-13 -description: "Using XState Finite State Machines to coordinate character actions in a Three.js game" +export const title = "Finite State Machines with XState for Game Development using Three.js" +export const authors = ["Henrique Ramos"] +export const publishedAt = "2024-12-13" +export const description = "Using XState Finite State Machines to coordinate character actions in a Three.js game" ---
diff --git a/src/utils/getAstroPages.ts b/src/utils/getAstroPages.ts new file mode 100644 index 0000000..27732fc --- /dev/null +++ b/src/utils/getAstroPages.ts @@ -0,0 +1,38 @@ +import type { AstroInstance } from "astro"; + +type Opts> = { + files: Record; + requiredFields?: string[]; +}; + +/** + * Get all Astro pages from a given path. + * @param opts - The options for the function. + * @param opts.files - The files to get the Astro pages from. Use import.meta.glob eager: true. + * @param opts.requiredFields - The required fields for the Astro pages. + * @returns The Astro pages in the root of the given path, or looks for index.astro files in subdirectories (single level). + */ +const getAstroPages = & AstroInstance>({ + files, + requiredFields = [], +}: Opts) => + Object.values(files).map((module) => { + if (!requiredFields.every((field) => module[field as keyof T])) { + throw new Error( + `Missing required fields for ${module.file}: ${requiredFields + .filter((field) => !module[field as keyof T]) + .join(", ")}`, + ); + } + + return { + id: ( + module.file + .split("/") + .at(module.file.includes("index.astro") ? -2 : -1) ?? "" + ).replace(".astro", ""), + ...module, + }; + }); + +export default getAstroPages; diff --git a/src/utils/getSlides.ts b/src/utils/getSlides.ts new file mode 100644 index 0000000..6a583d2 --- /dev/null +++ b/src/utils/getSlides.ts @@ -0,0 +1,25 @@ +import type { AstroInstance } from "astro"; +import getAstroPages from "./getAstroPages"; + +type Slide = AstroInstance & { + [key: string]: unknown; + title: string; + description: string; + authors: string[]; + publishedAt: string; +}; + +const slideRequiredFields = ["title", "description", "authors", "publishedAt"]; + +/** + * Get all slides from the slides directory. + * @returns The slides. + */ +export const getSlides = () => + getAstroPages({ + files: import.meta.glob( + ["@slides/**/index.astro", "@slides/*.astro"], + { eager: true }, + ), + requiredFields: slideRequiredFields, + });