re-implement fulldev Section and Card

astro.config.ts

@@ -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
+      injectReset: "@unocss/reset/normalize.css",
-      // 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",
-        },
-      },
     }),
+    // fulldev({
+    //   // css: '/src/css/custom.css',
+    //   colors: {
+    //     theme: "dark",
+    //     dark: {
+    //       background: "#111110",
+    //       base: "#3E63DD",
+    //       brand: "#359",
+    //     },
+    //     light: {
+    //       background: "#EEEEEC",
+    //       base: "#6F6D66",
+    //       brand: "#3E63DD",
+    //     },
+    //   },
+    // }),
   ],
 
   vite: {

package.json

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

pnpm-lock.yaml

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

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/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;
 }
@@ -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>
+	<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"
-			class:list={["mb-6"]}
-		/>
 		<slot />
 	</body>
 </html>

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/RegularText.astro

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

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

@@ -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>
+    <DownTheCenter>
+      <ReadableWidth>
         <Heading>{journalEntry.data.title}</Heading>
         <Content components={{
-      p: RegularText,
+          // p: RegularText,
           a: Link,
         }} />
+      </ReadableWidth>
+    </DownTheCenter>
   </main>
 </Layout>

src/pages/journal/index.astro

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

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>

uno.config.ts

@@ -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(),
   ],
 });

wrangler.toml

@@ -2,5 +2,7 @@
 name = "blog"
 compatibility_date = "2024-12-06"
 
+pages_build_output_dir = "dist"
+
 [env]
 production = { }