fix: getStaticPaths doesn't run unless in prerender mode

.gitignore

@@ -22,3 +22,5 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+.wrangler

astro.config.mjs

@@ -1,8 +1,9 @@
 // @ts-check
 import { defineConfig } from "astro/config";
 import fulldev from "fulldev-ui/integration";
-import node from "@astrojs/node";
 import UnoCSS from "unocss/astro";
+import mdx from "@astrojs/mdx";
+import cloudflare from "@astrojs/cloudflare";
 // import { createRequire } from "node:module";
 
 // const require = createRequire(import.meta.url);
@@ -10,15 +11,25 @@ import UnoCSS from "unocss/astro";
 // https://astro.build/config
 export default defineConfig({
   // pre-render by default; opt-in to dynamic SSR:
-  output: "hybrid",
+  output: "server",
 
-  adapter: node({
+  adapter: cloudflare(),
-    mode: "standalone",
-  }),
 
   integrations: [
+    mdx(),
     UnoCSS({
       // injectReset: true, // or a path to the reset file
+      // preflights: [
+      //   {
+      //     getCSS: ({ theme }) => `
+      //       * {
+      //         color: ${theme.colors.gray?.[200] ?? "#ccc"};
+      //         padding: 0;
+      //         margin: 0;
+      //       }
+      //     `,
+      //   },
+      // ],
     }),
     fulldev({
       // css: '/src/css/custom.css',

package.json

@@ -12,12 +12,15 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/node": "^8.3.4",
+    "@astrojs/cloudflare": "^12.0.1",
-    "astro": "^4.16.13",
+    "@astrojs/mdx": "^4.0.1",
+    "astro": "^5.0.3",
     "fulldev-ui": "^0.4.33",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "devDependencies": {
-    "unocss": "^0.64.1"
+    "@unocss/preset-uno": "^0.64.1",
+    "unocss": "^0.64.1",
+    "wrangler": "^3.93.0"
   }
 }

src/content/config.ts

@@ -1,11 +1,29 @@
 // 1. Import utilities from `astro:content`
-import { defineCollection } from "astro:content";
+import { defineCollection, z } from "astro:content";
 // 2. Define your collection(s)
-const blogCollection = defineCollection({
+const journalCollection = defineCollection({
-  /* ... */
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    tags: z.string().array(),
+    category: z.string().optional(),
+    description: z.string().optional(),
+  }),
+});
+const articleCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    tags: z.string().array(),
+    category: z.string().optional(),
+    description: z.string().optional(),
+  }),
 });
 // 3. Export a single `collections` object to register your collection(s)
 //    This key should match your collection directory name in "src/content"
 export const collections = {
-  blog: blogCollection,
+  "journal-entries": journalCollection,
+  articles: articleCollection,
 };

src/content/journal-entries/2024-11-19.mdx

@@ -1,6 +1,9 @@
 ---
 title: MySQL JSON Shenanigans
 date: 2024-11-19
+tags: ["mysql"]
+category: "MySQL"
+description: "Out of the box, there is a MySQL text encoding mismatch between VARCHAR columns and JSON columns."
 ---
 
 In an effort to support out-of-date installations of our app, I had to keep a JSON column in our database. The column is obsolete, as are the values within it; but these installations continue to use it. So, knowing this, I decided to put the proper values into the column. I didn't want to pollute the code of our services to do so, though. So I made it into a `GENERATED` column.

src/content/journal-entries/2024-11-20.mdx

@@ -1,6 +1,9 @@
 ---
 title: Elasticsearch Ingestion Daemon
 date: 2024-11-20
+tags: ["elasticsearch"]
+category: "Elasticsearch"
+description: "Batch-processing boundaries need to be defined with enough information to point to exactly one record, taking into account records being updated between batches."
 ---
 
 I still saw requests coming in through an old Cloudflare-Worker-based proxy I had set up, before I released the current one, which rewrites `m3u8` files on-the-fly, besides proxying the segment files themselves (among other features). I updated our website and app to use the new proxy; where were these requests coming from? I inspected some requests as they came in using the Cloudflare interface, and I found that the User Agent was always one of our apps; and different versions of it at that. We still had un-updated versions of our app out in the wild, but I also saw requests from the latest version! How could this be?

src/content/journal-entries/2024-11-21.mdx

@@ -1,6 +1,9 @@
 ---
 title: React-Admin Wrestling, a Little More Elasticsearch
 date: 2024-11-21
+tags: ["react", "react-admin", "elasticsearch"]
+category: "React Admin"
+description: "(This article is still incomplete. I began writing this entry after work the day it happened, and I didn't get a chance to get back to it until today (12 days later), so I forgot what I was planning on writing about!)"
 ---
 
 React-admin is a wonderful framework, and is quite flexible; but if you need something that it doesn't offer, it's very difficult to dig through the docs to find out how to do it.

src/content/journal-entries/2024-11-23.mdx

@@ -1,5 +1,8 @@
 ---
 title: "@astrojs/node Build Error"
+tags: ["astro"]
+category: "Astro"
+description: "Always prefix native imports with `node:`, even in dependencies. If a dependency doesn't do it, adjust your build-step to do it for you."
 date: 2024-11-23
 ---
 
@@ -28,13 +31,13 @@ It ran fine in dev mode (`pnpm run dev`), but when I tried to build it (`pnpm ru
 ```
 23:29:44 [ERROR] [vite] x Build failed in 331ms
 [commonjs--resolver] Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.
-file: /home/avraham/sakal.us/blog-astro/node_modules/.pnpm/send@0.19.1/node_modules/send/index.js
+file: .../blog-astro/node_modules/.pnpm/send@0.19.1/node_modules/send/index.js
   Stack trace:
-    at packageEntryFailure (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46637:15)
+    at packageEntryFailure (file://.../blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46637:15)
-    at tryNodeResolve (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46450:16)
+    at tryNodeResolve (file://.../blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46450:16)
-    at Object.handler (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65653:15)
+    at Object.handler (file://.../blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65653:15)
-    at async PluginDriver.hookFirstAndGetPlugin (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:21099:28)
+    at async PluginDriver.hookFirstAndGetPlugin (file://.../blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:21099:28)
-    at async ModuleLoader.resolveId (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:20132:15)
+    at async ModuleLoader.resolveId (file://.../blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:20132:15)
  ELIFECYCLE  Command failed with exit code 1.
 ```
 
@@ -62,4 +65,4 @@ export default defineConfig({
 });
 ```
 
-The worked famously.
+This worked famously.

src/content/journal-entries/2024-11-24.mdx

@@ -1,6 +1,9 @@
 ---
 title: "Content Frontmatter Causes `astro build` Error?"
 date: 2024-11-24
+tags: ["astro"]
+category: "Astro"
+description: "Keep your eyes peeled for special characters."
 ---
 
 Another entry for this site. I ran `pnpm run build` after adding yesterday's entry, and got this error:
@@ -17,13 +20,13 @@ end of the stream or a document separator is expected
     See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
 
   Location:
-    /home/avraham/sakal.us/blog-astro/src/content/journal-entries/2024-11-23.md:1:7
+    .../blog-astro/src/content/journal-entries/2024-11-23.md:1:7
   Stack trace:
-    at generateError (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
+    at generateError (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
-    at readDocument (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1545:5)
+    at readDocument (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1545:5)
-    at load (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
+    at load (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
-    at module.exports (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/lib/parse.js:12:17)
+    at module.exports (.../blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/lib/parse.js:12:17)
-    at matter (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/index.js:50:10)
+    at matter (.../blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/index.js:50:10)
  ELIFECYCLE  Command failed with exit code 1.
 ```
 
@@ -48,3 +51,5 @@ date: 2024-11-23
 
 <... rest of the file...>
 ```
+
+It seems that the `@` character signals an import from another file, and obviously there wasn't any so-named file.

src/content/journal-entries/2024-12-01.mdx

@@ -0,0 +1,64 @@
+---
+title: "Getting FullDev UI to Work with MDX in Astro"
+tags: ["astro", "fulldev-ui"]
+category: "Astro"
+description: "I'm using MDX in my Astro blog, and I want to use FullDev UI's components in it."
+date: 2024-12-01
+---
+
+I wanted to keep the moving parts of this blog to a minimum, so I wanted to use plain Markdown for the content. But, I also wanted to use the [FullDev UI](https://fulldev.dev) styling for headings, text, links, etc. because the rest of the site is using [FullDev UI](https://fulldev.dev).
+
+So, I had to add the MDX integration to the blog. This allowed me to override which components to used for each Markdown element. So far, I've only overridden the `p` and `a` components:
+
+```jsx
+<Layout title={journalEntry.data.title}>
+  <main>
+    <Heading>{journalEntry.data.title}</Heading>
+    <Content
+      components={{
+        p: RegularText,
+        a: Link,
+      }}
+    />
+  </main>
+</Layout>
+```
+
+The `RegularText` component is a simple wrapper around `Text` from FullDev UI:
+
+```jsx
+import Text from "fulldev-ui/components/Text.astro";
+
+<Text contrast={true}>
+  <slot />
+</Text>;
+```
+
+I had to create this wrapper as a separate component because the Astro syntax doesn't allow defining inline components like this:
+
+```jsx
+<Layout title={journalEntry.data.title}>
+  <main>
+    <Heading>{journalEntry.data.title}</Heading>
+    <Content
+      components={{
+        p: () => (
+          <Text contrast={true}>
+            <slot />
+          </Text>
+        ),
+        a: Link,
+      }}
+    />
+  </main>
+</Layout>
+```
+
+In that case it gives a build error:
+
+```
+15:06:29 [ERROR] Expected ">" but found "contrast"
+  Stack trace:
+    at failureErrorWithLog (.../blog-astro/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
+    [...] See full stack trace in the browser, or rerun with --verbose.
+```

src/layouts/Layout.astro

@@ -11,7 +11,7 @@ const { title } = Astro.props;
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
+		<meta name="description" content="A practical coding blog in the form of journal entries and articles." />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
@@ -42,35 +42,14 @@ const { title } = Astro.props;
 			frame="fill"
 			position="relative"
 			color="brand"
+			class:list={["mb-6"]}
 		/>
 		<slot />
 	</body>
 </html>
 <style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
 	html {
 		font-family: system-ui, sans-serif;
 		background: #13151a;
 	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
 </style>

src/pages/articles/index.astro

@@ -1,9 +1,30 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+import Section from 'fulldev-ui/components/Section.astro';
+import { getCollection } from 'astro:content';
+
+const articles = await getCollection('articles');
 export const prerender = true;
 ---
 <Layout title="Articles">
   <main>
+    <Section 
+      title="Articles"
+      text="Coming Soon!"
+      cards={articles.map((article)=>({
+          frame:"panel",
+          title:article.data.title,
+          tagline: article.data.date.toISOString().substring(0,10),
+          // list: ["one", "two"],
+          badge: article.data.category,
+          href: `/articles/${article.slug}`,
+          description: article.data.description,
+      }))}
 
+      align='center'
+      justify="start"
+      structure="grid"
+    >
+    </Section>
   </main>
 </Layout>

src/pages/journal/RegularText.astro

@@ -0,0 +1,4 @@
+---
+import Text from 'fulldev-ui/components/Text.astro';
+---
+<Text contrast={true}><slot /></Text>

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

@@ -0,0 +1,31 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+import Heading from 'fulldev-ui/components/Heading.astro';
+import Link from 'fulldev-ui/components/Link.astro';
+import RegularText from './RegularText.astro';
+
+export const prerender = true;
+
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const journalEntries = await getCollection('journal-entries');
+  return journalEntries.map(journalEntry => ({
+    params: { slug: journalEntry.slug }, props: { journalEntry },
+  }));
+}
+
+// 2. For your template, you can get the entry directly from the prop
+const { journalEntry } = Astro.props;
+const { Content } = await journalEntry.render();
+
+---
+<Layout title={journalEntry.data.title}>
+  <main>
+    <Heading>{journalEntry.data.title}</Heading>
+    <Content components={{
+      p: RegularText,
+      a: Link,
+    }} />
+  </main>
+</Layout>

src/pages/journal/index.astro

@@ -1,9 +1,35 @@
 ---
+import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro';
+import Section from 'fulldev-ui/components/Section.astro';
+import Text from 'fulldev-ui/components/Text.astro';
+
+
+const journalEntries = await getCollection('journal-entries');
+
 export const prerender = true;
 ---
 <Layout title="Journal Entries">
   <main>
+    <Section 
+      title="Journal Entries"
+      cards={journalEntries.map((journalEntry)=>({
+          frame:"panel",
+          title:journalEntry.data.title,
+          tagline: journalEntry.data.date.toISOString().substring(0,10),
+          badge: journalEntry.data.category,
+          // badges: journalEntry.data.tags,
+          href: `/journal/${journalEntry.slug}`,
+          description: journalEntry.data.description,
+          // html: <Text>{journalEntry.data.description}</Text>,
+          size: "sm",
+      }))}
 
+      align='center'
+      justify="start"
+      structure="grid"
+      size="md"
+    >
+    </Section>
   </main>
 </Layout>

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "strictNullChecks": true
+  }
 }

uno.config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from "unocss";
+import presetUno from "@unocss/preset-uno";
 import fulldevUI from "fulldev-ui/unocss";
 
 export default defineConfig({
-  injectReset: false,
+  injectReset: true,
-  //@ts-ignore
+  presets: [
-  presets: [fulldevUI],
+    presetUno,
+    //@ts-ignore
+    fulldevUI,
+  ],
 });

wrangler.toml

@@ -0,0 +1,6 @@
+# Generated by Wrangler on Fri Dec 06 2024 12:22:28 GMT-0500 (Eastern Standard Time)
+name = "blog"
+compatibility_date = "2024-12-06"
+
+[env]
+production = { }