add entry for 2024-12-07

.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/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,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 = { }