fix README

.gitignore

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

README.md

@@ -1,54 +1,7 @@
-# Astro Starter Kit: Basics
+# The Clog
 
-```sh
+Add blog content to `src/content`.
-npm create astro@latest -- --template basics
-```
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+Preview locally with `pnpm dev`.
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+To deploy, run `pnpm run build` then `wrangler pages deploy`.
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.ts

@@ -1,8 +1,9 @@
 // @ts-check
 import { defineConfig } from "astro/config";
-import fulldev from "fulldev-ui/integration";
+// 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,32 +11,31 @@ 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
+      injectReset: "@unocss/reset/normalize.css",
-    }),
-    fulldev({
-      // css: '/src/css/custom.css',
-      colors: {
-        theme: "dark",
-        dark: {
-          background: "#111110",
-          base: "#3E63DD",
-          brand: "#359",
-        },
-        light: {
-          background: "#EEEEEC",
-          base: "#6F6D66",
-          brand: "#3E63DD",
-        },
-      },
     }),
+    // fulldev({
+    //   // css: '/src/css/custom.css',
+    //   colors: {
+    //     theme: "dark",
+    //     dark: {
+    //       background: "#111110",
+    //       base: "#3E63DD",
+    //       brand: "#359",
+    //     },
+    //     light: {
+    //       background: "#EEEEEC",
+    //       base: "#6F6D66",
+    //       brand: "#3E63DD",
+    //     },
+    //   },
+    // }),
   ],
 
   vite: {

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,12 +12,18 @@
   },
   "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",
+    "@radix-ui/colors": "^3.0.0",
+    "astro": "^5.0.3",
     "fulldev-ui": "^0.4.33",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "devDependencies": {
-    "unocss": "^0.64.1"
+    "@iconify-json/mdi": "^1.2.1",
+    "@unocss/preset-uno": "^0.64.1",
+    "@unocss/reset": "^0.65.1",
+    "unocss": "^0.64.1",
+    "wrangler": "^3.93.0"
   }
 }

src/components/Header.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class:list={["flex", "flex-justify-between"]}>
+  <div class:list={["flex", "flex-content-start"]}>
+    <slot name="left" />
+  </div>
+  <div class:list={["flex", "flex-content-center"]}>
+    <slot name="center" />
+  </div>
+  <div class:list={["flex", "flex-content-end"]}>
+    <slot name="right" />
+  </div>
+</div>

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
+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

@@ -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

@@ -1,5 +1,9 @@
 ---
-import Header from 'fulldev-ui/components/Header.astro'
+import LeftRightSplit from '../structure/LeftRightSplit.astro';
+import Heading from '../typography/Heading.astro';
+import Row from '../structure/Row.astro';
+import NavLink from '../widgets/NavLink.astro';
+
 interface Props {
 	title: string;
 }
@@ -11,66 +15,28 @@ 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" />
+		<link rel="preload" href="/hero.png" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
-	<body>
+	<body class="text-brand-1 p-0 m-0">
-		<Header
+		<LeftRightSplit class="px-8 bg-brand-12 border-b-groove border-width-1 border-brand-10 mb-4">
-			heading="The Clog"
+			<Heading slot="left"><a href="/" class="text-brand-3 decoration-none">The Clog</a></Heading>
-			links={[
+			<Row slot="right" >
-				{
+				<NavLink href="/journal">Journal</NavLink>
-					text: 'Journal',
+				<NavLink href="/articles">Articles</NavLink>
-					href: '/journal',
+				<NavLink class="i-mdi-git" href="https://git.sakal.us/avraham/">Gitea</NavLink>
-				},
+			</Row>
-				{
+		</LeftRightSplit>
-					text: 'Articles',
-					href: '/articles',
-				},
-			]}
-			buttons={[
-				{
-					title: 'Gitea',
-					icon: 'brand-git',
-					href: 'https://git.sakal.us/avraham/',
-					target: '_blank',
-					contrast: true,
-				},
-			]}
-			frame="fill"
-			position="relative"
-			color="brand"
-		/>
 		<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/index.astro

@@ -1,11 +1,26 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Hero from 'fulldev-ui/blocks/Hero.astro';
+import LeftRightSplit from '../structure/LeftRightSplit.astro';
+import NavLink from '../widgets/NavLink.astro';
 ---
 
 <Layout title="The Clog">
 	<main>
-		<Hero
+		<LeftRightSplit class="px-4 align-center">
+			<div slot="left" class="text-center w-full my-auto">
+				<p>The Coding Blog</p>
+				<h1 class="text-4xl font-bold text-brand-3">Welcome to The Clog</h1>
+				<p>A practical coding blog in the form of journal entries and articles.</p>
+				<div>
+					<NavLink href="/journal">Journal</NavLink>
+					<NavLink href="/articles">Articles</NavLink>
+				</div>
+			</div>
+			<div slot="right" class="h-auto max-h-dvh max-w-full w-full my-auto">
+				<img  src="/hero.png" class="object-contain" />
+			</div>
+		</LeftRightSplit>
+		<!-- <Hero
 			badge="The Coding Blog"
 			heading="Welcome to The Clog"
 			text="A practical coding blog in the form of journal entries and articles."
@@ -16,6 +31,6 @@ import Hero from 'fulldev-ui/blocks/Hero.astro';
 			structure="split"
 			image="/hero.png"
 			class:list={["p-space-6"]}
-		/>
+		/> -->
 	</main>
 </Layout>

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

@@ -0,0 +1,36 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+import Heading from '../../typography/Heading.astro';
+import Link from 'fulldev-ui/components/Link.astro';
+import DownTheCenter from '../../structure/DownTheCenter.astro';
+import ReadableWidth from '../../sizing/ReadableWidth.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>
+    <DownTheCenter>
+      <ReadableWidth>
+        <Heading>{journalEntry.data.title}</Heading>
+        <Content components={{
+          // p: RegularText,
+          a: Link,
+        }} />
+      </ReadableWidth>
+    </DownTheCenter>
+  </main>
+</Layout>

src/pages/journal/index.astro

@@ -1,9 +1,42 @@
 ---
+import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro';
+
+
+const journalEntries = await getCollection('journal-entries');
+
 export const prerender = true;
 ---
 <Layout title="Journal Entries">
   <main>
+    <div class="flex gap-4 flex-wrap">
+      {journalEntries.map((journalEntry)=>(
+        <div class="w-64 border-solid border-brand-3 border-width-1 rounded-2 px-2 py-1 bg-brand-12 opacity-80">
+          <p>{journalEntry.data.date.toISOString().substring(0,10)} <span class="border-solid border-brand-3 border-width-1 rounded-100 px-2 py-1">{journalEntry.data.category}</span></p>
+          <h3><a class="text-brand-3 decoration-none" href={`/journal/${journalEntry.slug}`}>{journalEntry.data.title}</a></h3>
+          <p>{journalEntry.data.description}</p>
+        </div>
+      ))}
+    </div>
+    <!-- <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>

src/sizing/ReadableWidth.astro

@@ -0,0 +1,5 @@
+---
+---
+<div class="max-w-3xl">
+  <slot />
+</div>

src/structure/DownTheCenter.astro

@@ -0,0 +1,5 @@
+---
+---
+<div class="flex flex-col items-center justify-center">
+  <slot />
+</div>

src/structure/LeftRightSplit.astro

@@ -0,0 +1,7 @@
+---
+
+---
+<div class={`flex flex-row justify-between ${Astro.props.class||''}`}>
+    <slot name="left" />
+    <slot name="right" />
+</div>

src/structure/Row.astro

@@ -0,0 +1,5 @@
+---
+---
+<div class="flex flex-row gap-3 items-center justify-start">
+  <slot />
+</div>

src/typography/Heading.astro

@@ -0,0 +1,5 @@
+---
+---
+<h1 class="text-4xl font-bold text-brand-1">
+  <slot />
+</h1>

src/typography/Link.astro

@@ -0,0 +1,5 @@
+---
+---
+<a class="text-brand underline-dotted" href={Astro.props.href}>
+  <slot />
+</a>

src/widgets/NavLink.astro

@@ -0,0 +1,5 @@
+---
+---
+<a class="text-brand-3 px-4 py-2 decoration-none border-brand-3 border-solid border-rounded border-width-1 border-transparent hover:border-brand-3" href={Astro.props.href}>
+  <slot />
+</a>

tsconfig.json

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

uno.config.ts

@@ -1,8 +1,32 @@
-import { defineConfig } from "unocss";
+import { defineConfig, presetIcons } from "unocss";
-import fulldevUI from "fulldev-ui/unocss";
+import presetUno from "@unocss/preset-uno";
+import { indigo } from "@radix-ui/colors";
+// import fulldevUI from "fulldev-ui/unocss";
 
 export default defineConfig({
-  injectReset: false,
+  // injectReset: true,
-  //@ts-ignore
+  theme: {
-  presets: [fulldevUI],
+    colors: {
+      brand: {
+        "1": indigo.indigo1,
+        "2": indigo.indigo2,
+        "3": indigo.indigo3,
+        "4": indigo.indigo4,
+        "5": indigo.indigo5,
+        "6": indigo.indigo6,
+        "7": indigo.indigo7,
+        "8": indigo.indigo8,
+        "9": indigo.indigo9,
+        "10": indigo.indigo10,
+        "11": indigo.indigo11,
+        "12": indigo.indigo12,
+      },
+    },
+  },
+  presets: [
+    presetUno,
+    //@ts-ignore
+    // fulldevUI,
+    presetIcons(),
+  ],
 });

wrangler.toml

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