add entry for 2024-12-07

.gitignore

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

astro.config.mjs

@@ -1,21 +1,35 @@
 // @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);
 
 // https://astro.build/config
 export default defineConfig({
   // pre-render by default; opt-in to dynamic SSR:
-  output: "hybrid",
+  output: "server",
 
-  adapter: node({
-    mode: "standalone",
-  }),
+  adapter: cloudflare(),
 
   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',
@@ -34,4 +48,20 @@ export default defineConfig({
       },
     }),
   ],
+
+  vite: {
+    resolve: {
+      alias: {
+        fs: "node:fs",
+        // fs: require.resolve("rollup-plugin-node-builtins"),
+        // http: require.resolve('rollup-plugin-node-builtins'),
+        // util: require.resolve('rollup-plugin-node-builtins'),
+        // stream: require.resolve('rollup-plugin-node-builtins'),
+        // buffer: require.resolve('rollup-plugin-node-builtins'),
+        // process: require.resolve('rollup-plugin-node-builtins'),
+        // url: require.resolve('rollup-plugin-node-builtins'),
+        // querystring: require.resolve('rollup-plugin-node-builtins'),
+      },
+    },
+  },
 });

biome.json

@@ -9,6 +9,9 @@
   },
   "linter": {
     "enabled": true,
+    "include": [
+      "src/**/*.{js,jsx,ts,tsx,mjs,cjs,mts,cts}"
+    ],
     "rules": {
       "recommended": true
     }

package.json

@@ -1,7 +1,8 @@
 {
   "name": "blog-astro",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
+  "packageManager": "pnpm@9.7.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -11,13 +12,15 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/node": "^8.3.4",
-    "astro": "^4.16.13",
+    "@astrojs/cloudflare": "^12.0.1",
+    "@astrojs/mdx": "^4.0.1",
+    "astro": "^5.0.3",
     "fulldev-ui": "^0.4.33",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "devDependencies": {
-    "@unocss/reset": "^0.64.1",
-    "unocss": "^0.64.1"
+    "@unocss/preset-uno": "^0.64.1",
+    "unocss": "^0.64.1",
+    "wrangler": "^3.93.0"
   }
 }

src/components/Card.astro

@@ -1,61 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

src/content/config.ts

@@ -0,0 +1,29 @@
+// 1. Import utilities from `astro:content`
+import { defineCollection, z } from "astro:content";
+// 2. Define your collection(s)
+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 = {
+  "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

@@ -0,0 +1,68 @@
+---
+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
+---
+
+Today's entry is about this very site.
+
+I'm using [Astro](https://astro.build) to build this site, with the [Astro Node](https://github.com/withastro/astro/tree/main/packages/integrations/node) integration for SSR.
+
+Well, I installed it, and set it up in `astro.config.mjs`:
+
+```js
+import { defineConfig } from "astro/config";
+import node from "@astrojs/node";
+
+export default defineConfig({
+  // pre-render by default; opt-in to dynamic SSR:
+  output: "hybrid",
+
+  adapter: node({
+    mode: "standalone",
+  }),
+});
+```
+
+It ran fine in dev mode (`pnpm run dev`), but when I tried to build it (`pnpm run build`), I got this error:
+
+```
+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: .../blog-astro/node_modules/.pnpm/send@0.19.1/node_modules/send/index.js
+  Stack trace:
+    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://.../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://.../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://.../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://.../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.
+```
+
+Of course I searched the 'net, and never found the exact same issue; only similar issues. This is surprising, because it's not like I have an edge-case setup. Anyway, long story short, the fix was not to be found on the Internet, but on a hunch I added the following to `astro.config.mjs`:
+
+```js
+import { defineConfig } from "astro/config";
+import node from "@astrojs/node";
+
+export default defineConfig({
+  // pre-render by default; opt-in to dynamic SSR:
+  output: "hybrid",
+
+  adapter: node({
+    mode: "standalone",
+  }),
+
+  vite: {
+    resolve: {
+      alias: {
+        fs: "node:fs",
+      },
+    },
+  },
+});
+```
+
+This worked famously.

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

@@ -0,0 +1,55 @@
+---
+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:
+
+```
+✘ [ERROR] The build was canceled
+
+end of the stream or a document separator is expected
+  Hint:
+    Browser APIs are not available on the server.
+
+    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.
+
+    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
+
+  Location:
+    .../blog-astro/src/content/journal-entries/2024-11-23.md:1:7
+  Stack trace:
+    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 (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1545:5)
+    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 (.../blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/lib/parse.js:12:17)
+    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.
+```
+
+I was obviously not using Browser APIs in an `.md` file. But, it did report that file as the culprit (specifically, the first line), so I checked it out.
+
+```md
+---
+title: @astrojs/node Build Error
+date: 2024-11-23
+---
+
+<... rest of the file...>
+```
+
+I noticed the `@` was a different color than the rest of the line. I thought YAML interprets any non-digit character as the start of a string; but just in case I wrapped the line in quotes, and it worked!
+
+```md
+---
+title: "@astrojs/node Build Error"
+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/content/journal-entries/2024-12-07.mdx

@@ -0,0 +1,25 @@
+---
+title: "Kubernetes Crash: Node Pressure"
+tags: ["kubernetes"]
+category: "Kubernetes"
+description: 'All pods were evicted, due to "disk pressure".'
+date: 2024-12-07
+---
+
+I run my own private git server, using Gitea; and it's deployed on my one-node Kubernetes cluster. I tried pushing a commit for this very blog, and I got a `521` error response from the server.
+
+```
+The node was low on resource: ephemeral-storage. Threshold quantity: 3681937462,
+    available: 10701128Ki. Container frontend was using 32Ki, request is 0, has larger
+    consumption of ephemeral-storage.
+```
+
+Or:
+
+```
+Pod was rejected: The node had condition: [DiskPressure].
+```
+
+My disk was nowhere near full (86%), so I thought maybe clickhouse was taking up too many inodes. That wasn't the case.
+
+I found [this on StackOverflow](https://stackoverflow.com/a/76529494), and it turned out that 85% is the threshold for `imagefs`, which is what Kubernetes uses to hold image layers. It's not that I had too many images on the disk (I had less than 3GB-worth), rather since my disk usage was at 86%, only 14% was available for more image layers, which Kubernetes says is no good. I just deleted some journal log files, which only added up to 4Gb, so this may happen again. The problem is that the disk is rather small, and Clickhouse is allocated like 50Gb due to my [stock options project](https://calendar-optimizer-frontend.sakal.us/).

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,8 +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,8 +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,
-  //@ts-ignore
-  presets: [fulldevUI],
+  injectReset: true,
+  presets: [
+    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 = { }