re-implement fulldev Section and Card

remove unnecessary import
adjust Layout spacings
2025-01-14 22:02:30 -05:00 · 2025-01-14 22:02:13 -05:00 · 2025-01-14 21:33:33 -05:00 · 2025-01-14 21:32:54 -05:00 · 2024-12-15 19:57:02 -05:00 · 2024-12-15 19:51:00 -05:00
19 changed files with 199 additions and 79 deletions
@@ -1,6 +1,6 @@
 // @ts-check
 import { defineConfig } from "astro/config";
-import fulldev from "fulldev-ui/integration";
+// import fulldev from "fulldev-ui/integration";
 import UnoCSS from "unocss/astro";
 import mdx from "@astrojs/mdx";
 import cloudflare from "@astrojs/cloudflare";
@@ -18,35 +18,24 @@ export default defineConfig({
  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',
-      colors: {
-        theme: "dark",
-        dark: {
-          background: "#111110",
-          base: "#3E63DD",
-          brand: "#359",
-        },
-        light: {
-          background: "#EEEEEC",
-          base: "#6F6D66",
-          brand: "#3E63DD",
-        },
-      },
+      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",
+    //     },
+    //   },
+    // }),
  ],

  vite: {
@@ -14,12 +14,15 @@
    "@astrojs/check": "^0.9.4",
    "@astrojs/cloudflare": "^12.0.1",
    "@astrojs/mdx": "^4.0.1",
+    "@radix-ui/colors": "^3.0.0",
    "astro": "^5.0.3",
    "fulldev-ui": "^0.4.33",
    "typescript": "^5.7.2"
  },
  "devDependencies": {
+    "@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"
  }
@@ -17,6 +17,9 @@ importers:
      '@astrojs/mdx':
        specifier: ^4.0.1
        version: 4.0.1(astro@5.0.3(@types/node@22.10.1)(jiti@1.21.6)(rollup@4.28.1)(sass@1.82.0)(tsx@4.19.2)(typescript@5.7.2)(yaml@2.6.1))
+      '@radix-ui/colors':
+        specifier: ^3.0.0
+        version: 3.0.0
      astro:
        specifier: ^5.0.3
        version: 5.0.3(@types/node@22.10.1)(jiti@1.21.6)(rollup@4.28.1)(sass@1.82.0)(tsx@4.19.2)(typescript@5.7.2)(yaml@2.6.1)
@@ -27,9 +30,15 @@ importers:
        specifier: ^5.7.2
        version: 5.7.2
    devDependencies:
+      '@iconify-json/mdi':
+        specifier: ^1.2.1
+        version: 1.2.1
      '@unocss/preset-uno':
        specifier: ^0.64.1
        version: 0.64.1
+      '@unocss/reset':
+        specifier: ^0.65.1
+        version: 0.65.1
      unocss:
        specifier: ^0.64.1
        version: 0.64.1(postcss@8.4.49)(rollup@4.28.1)(vite@5.4.11(@types/node@22.10.1)(sass@1.82.0))(vue@3.5.13(typescript@5.7.2))
@@ -863,6 +872,9 @@ packages:
    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
    engines: {node: '>=14'}

+  '@iconify-json/mdi@1.2.1':
+    resolution: {integrity: sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==}
+
  '@iconify-json/tabler@1.2.10':
    resolution: {integrity: sha512-P58U/e0rZNYptzMjnExcFOtSt712xJnqwJI7KoF4iaUJ7EeFQNJawjUXT8X1rvbLMUk/O/fgrzAfhD163XuckA==}

@@ -1445,6 +1457,9 @@ packages:
  '@unocss/reset@0.64.1':
    resolution: {integrity: sha512-xx36rWcrIpyvI1l/v+szQLrxWAgsmk6GH85QQ5iE1qccQbL9IlhWHB1KEd3cRbJ1TFeZ2Mzca/qsjg0LU9ZVnA==}

+  '@unocss/reset@0.65.1':
+    resolution: {integrity: sha512-qyxF7rKGX+Cu3FpV8KCRQbtCvFcBpmzvx5A2wal77tIhrFR5VSH7NzCVmgs2+V9FXvU3aWVNZ79i1KMnLZ5Mjg==}
+
  '@unocss/rule-utils@0.62.4':
    resolution: {integrity: sha512-XUwLbLUzL+VSHCJNK5QBHC9RbFehumge1/XJmsRfmh0+oxgJoO1gvEvxi57gYEmdJdMRJHRJZ66se6+cB0Ymvw==}
    engines: {node: '>=14'}
@@ -4335,6 +4350,10 @@ snapshots:

  '@fastify/busboy@2.1.1': {}

+  '@iconify-json/mdi@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
  '@iconify-json/tabler@1.2.10':
    dependencies:
      '@iconify/types': 2.0.0
@@ -4981,6 +5000,8 @@ snapshots:

  '@unocss/reset@0.64.1': {}

+  '@unocss/reset@0.65.1': {}
+
  '@unocss/rule-utils@0.62.4':
    dependencies:
      '@unocss/core': 0.62.4
@@ -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>
@@ -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/).
@@ -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;
 }
@@ -14,36 +18,19 @@ const { title } = Astro.props;
 		<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>
-		<Header
-			heading="The Clog"
-			links={[
-				{
-					text: 'Journal',
-					href: '/journal',
-				},
-				{
-					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"
-			class:list={["mb-6"]}
-		/>
+	<body class="text-brand-1 p-0 m-0">
+		<LeftRightSplit class="px-8 bg-brand-12 border-b-groove border-width-1 border-brand-10 mb-4">
+			<Heading slot="left"><a href="/" class="text-brand-3 decoration-none">The Clog</a></Heading>
+			<Row slot="right" >
+				<NavLink href="/journal">Journal</NavLink>
+				<NavLink href="/articles">Articles</NavLink>
+				<NavLink class="i-mdi-git" href="https://git.sakal.us/avraham/">Gitea</NavLink>
+			</Row>
+		</LeftRightSplit>
 		<slot />
 	</body>
 </html>
@@ -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>
@@ -1,4 +0,0 @@
---
-import Text from 'fulldev-ui/components/Text.astro';
---
-<Text contrast={true}><slot /></Text>
@@ -1,9 +1,10 @@
 ---
 import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro';
-import Heading from 'fulldev-ui/components/Heading.astro';
+import Heading from '../../typography/Heading.astro';
 import Link from 'fulldev-ui/components/Link.astro';
-import RegularText from './RegularText.astro';
+import DownTheCenter from '../../structure/DownTheCenter.astro';
+import ReadableWidth from '../../sizing/ReadableWidth.astro';

 export const prerender = true;

@@ -22,10 +23,14 @@ const { Content } = await journalEntry.render();
 ---
 <Layout title={journalEntry.data.title}>
  <main>
-    <Heading>{journalEntry.data.title}</Heading>
-    <Content components={{
-      p: RegularText,
-      a: Link,
-    }} />
+    <DownTheCenter>
+      <ReadableWidth>
+        <Heading>{journalEntry.data.title}</Heading>
+        <Content components={{
+          // p: RegularText,
+          a: Link,
+        }} />
+      </ReadableWidth>
+    </DownTheCenter>
  </main>
 </Layout>
@@ -1,8 +1,6 @@
 ---
 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');
@@ -11,7 +9,16 @@ export const prerender = true;
 ---
 <Layout title="Journal Entries">
  <main>
-    <Section 
+    <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",
@@ -30,6 +37,6 @@ export const prerender = true;
      structure="grid"
      size="md"
    >
-    </Section>
+    </Section> -->
  </main>
 </Layout>
@@ -0,0 +1,5 @@
+---
+---
+<div class="max-w-3xl">
+  <slot />
+</div>
@@ -0,0 +1,5 @@
+---
+---
+<div class="flex flex-col items-center justify-center">
+  <slot />
+</div>
@@ -0,0 +1,7 @@
+---
+
+---
+<div class={`flex flex-row justify-between ${Astro.props.class||''}`}>
+    <slot name="left" />
+    <slot name="right" />
+</div>
@@ -0,0 +1,5 @@
+---
+---
+<div class="flex flex-row gap-3 items-center justify-start">
+  <slot />
+</div>
@@ -0,0 +1,5 @@
+---
+---
+<h1 class="text-4xl font-bold text-brand-1">
+  <slot />
+</h1>
@@ -0,0 +1,5 @@
+---
+---
+<a class="text-brand underline-dotted" href={Astro.props.href}>
+  <slot />
+</a>
@@ -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>
@@ -1,12 +1,32 @@
-import { defineConfig } from "unocss";
+import { defineConfig, presetIcons } from "unocss";
 import presetUno from "@unocss/preset-uno";
-import fulldevUI from "fulldev-ui/unocss";
+import { indigo } from "@radix-ui/colors";
+// import fulldevUI from "fulldev-ui/unocss";

 export default defineConfig({
-  injectReset: true,
+  // injectReset: true,
+  theme: {
+    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,
+    // fulldevUI,
+    presetIcons(),
  ],
 });
@@ -2,5 +2,7 @@
 name = "blog"
 compatibility_date = "2024-12-06"

+pages_build_output_dir = "dist"
+
 [env]
 production = { }
Author	SHA1	Message	Date
Avraham Sakal	5e13636094	re-implement fulldev Section and Card	2025-01-14 22:02:30 -05:00
Avraham Sakal	9eb7dda047	remove unnecessary import	2025-01-14 22:02:13 -05:00
Avraham Sakal	b2d21088cb	adjust Layout spacings	2025-01-14 21:33:33 -05:00
Avraham Sakal	15601e7bd4	replace homepage Hero	2025-01-14 21:32:54 -05:00
Avraham Sakal	102d4716e0	add `pages_build_output_dir` to `wrangler.toml`	2024-12-15 19:57:02 -05:00
Avraham Sakal	a116090136	begin	2024-12-15 19:51:00 -05:00
Avraham Sakal	79deff3b6c	add entry for 2024-12-07	2024-12-07 22:30:24 -05:00