feat: work on styling

.github/renovate.json

@@ -1,8 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:best-practices"
-  ],
+  "extends": ["config:best-practices"],
   "dependencyDashboard": true,
   "npm": {
     "minimumReleaseAge": "3 days"

apps/site/astro.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 
+import { resolve } from 'node:path';
 import cloudflare from '@astrojs/cloudflare';
 import db from '@astrojs/db';
 import starlight from '@astrojs/starlight';
@@ -36,20 +37,22 @@ export default defineConfig({
 			customCss: ['./src/styles/starlight.css'],
 			favicon: '/favicon.png',
 			components: {
-				Header: './src/components/StarlightHeader.astro',
+				Header: './src/components/starlight/StarlightHeader.astro',
+				Sidebar: './src/components/starlight/StarlightSidebar.astro',
+				Footer: './src/components/starlight/StarlightFooter.astro',
 			},
 		}),
 		tailwind({
 			applyBaseStyles: false,
 		}),
 		icon({
 			include: {
-				ri: ['github-line', 'twitter-x-line', 'discord-line'],
+				ri: ['github-fill', 'twitter-x-fill', 'discord-fill', 'global-fill'],
 				ph: ['dot-duotone'],
 			},
 		}),
 	],
-	output: 'server',
+	output: 'hybrid',
 	adapter: cloudflare({
 		imageService: 'passthrough',
 		routes: {
@@ -59,6 +62,11 @@ export default defineConfig({
 		},
 	}),
 	vite: {
+		resolve: {
+			alias: {
+				'~': resolve(import.meta.dirname, './src'),
+			},
+		},
 		ssr: {
 			external: ['node:url', 'node:child_process', 'node:path'],
 		},

apps/site/package.json

@@ -10,6 +10,8 @@
     "@astrojs/starlight": "0.21.2",
     "@astrojs/starlight-tailwind": "2.0.1",
     "@astrojs/tailwind": "5.1.0",
+    "@fontsource-variable/dosis": "5.0.19",
+    "@fontsource/atkinson-hyperlegible": "5.0.19",
     "@iconify-json/ph": "1.1.11",
     "@iconify-json/ri": "1.1.20",
     "@tailwindcss/forms": "0.5.7",

apps/site/src/components/ArticleCard.astro

@@ -0,0 +1,38 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+	article: CollectionEntry<'blog'>;
+	class?: string;
+}
+
+const { article, class: className } = Astro.props;
+const { title, publishDate, author } = article.data;
+const { Content } = await article.render();
+---
+
+<div
+  class:list={[
+    "bg-white p-4 rounded-2xl border border-gray-200 shadow-sm relative",
+    className,
+  ]}
+>
+  <p class="inline-block text-sm text-gray-600">
+    {
+      new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(
+        publishDate
+      )
+    } - {author.name}
+  </p>
+  <h2
+    class="font-extrabold uppercase text-2xl text-primary-950 max-w-2xl font-heading"
+  >
+    <a href={`/blog/${article.slug}`}>
+      {title}
+      <span class="absolute inset-0"></span>
+    </a>
+  </h2>
+  <div class="mt-3 text-gray-700 line-clamp-3">
+    <Content />
+  </div>
+</div>

apps/site/src/components/CreativeCommons.astro

@@ -0,0 +1,55 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+	article: CollectionEntry<'blog'>;
+}
+
+const { title, author } = Astro.props.article.data;
+---
+
+<a href={Astro.url}>
+  {title}
+</a>
+<span> © 2024 by </span>
+<a href={author.url}>{author.name}</a>
+<span>is licensed under</span>
+<a href="https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt">
+  CC BY-NC 4.0
+</a>
+<svg
+  class="inline text-sm"
+  xmlns="http://www.w3.org/2000/svg"
+  width="0.875rem"
+  height="0.875rem"
+  viewBox="0 0 496 512"
+>
+  <path
+    fill="currentColor"
+    d="m245.83 214.87-33.22 17.28c-9.43-19.58-25.24-19.93-27.46-19.93-22.13 0-33.22 14.61-33.22 43.84 0 23.57 9.21 43.84 33.22 43.84 14.47 0 24.65-7.09 30.57-21.26l30.55 15.5c-6.17 11.51-25.69 38.98-65.1 38.98-22.6 0-73.96-10.32-73.96-77.05 0-58.69 43-77.06 72.63-77.06 30.72-.01 52.7 11.95 65.99 35.86m143.05 0-32.78 17.28c-9.5-19.77-25.72-19.93-27.9-19.93-22.14 0-33.22 14.61-33.22 43.84 0 23.55 9.23 43.84 33.22 43.84 14.45 0 24.65-7.09 30.54-21.26l31 15.5c-2.1 3.75-21.39 38.98-65.09 38.98-22.69 0-73.96-9.87-73.96-77.05 0-58.67 42.97-77.06 72.63-77.06 30.71-.01 52.58 11.95 65.56 35.86M247.56 8.05C104.74 8.05 0 123.11 0 256.05c0 138.49 113.6 248 247.56 248 129.93 0 248.44-100.87 248.44-248 0-137.87-106.62-248-248.44-248m.87 450.81c-112.54 0-203.7-93.04-203.7-202.81 0-105.42 85.43-203.27 203.72-203.27 112.53 0 202.82 89.46 202.82 203.26-.01 121.69-99.68 202.82-202.84 202.82"
+  ></path>
+</svg>
+<svg
+  class="inline text-sm"
+  xmlns="http://www.w3.org/2000/svg"
+  width="0.875rem"
+  height="0.875rem"
+  viewBox="0 0 496 512"
+>
+  <path
+    fill="currentColor"
+    d="M314.9 194.4v101.4h-28.3v120.5h-77.1V295.9h-28.3V194.4c0-4.4 1.6-8.2 4.6-11.3 3.1-3.1 6.9-4.7 11.3-4.7H299c4.1 0 7.8 1.6 11.1 4.7 3.1 3.2 4.8 6.9 4.8 11.3m-101.5-63.7c0-23.3 11.5-35 34.5-35s34.5 11.7 34.5 35q0 34.5-34.5 34.5c-34.5 0-34.5-11.5-34.5-34.5M247.6 8C389.4 8 496 118.1 496 256c0 147.1-118.5 248-248.4 248C113.6 504 0 394.5 0 256 0 123.1 104.7 8 247.6 8m.8 44.7C130.2 52.7 44.7 150.6 44.7 256c0 109.8 91.2 202.8 203.7 202.8 103.2 0 202.8-81.1 202.8-202.8.1-113.8-90.2-203.3-202.8-203.3"
+  ></path>
+</svg>
+<svg
+  class="inline text-sm"
+  xmlns="http://www.w3.org/2000/svg"
+  width="0.875rem"
+  height="0.875rem"
+  viewBox="0 0 496 512"
+>
+  <path
+    fill="currentColor"
+    d="M247.6 8C387.4 8 496 115.9 496 256c0 147.2-118.5 248-248.4 248C113.1 504 0 393.2 0 256 0 123.1 104.7 8 247.6 8M55.8 189.1Q44.7 219.7 44.7 256c0 110.9 92.1 202.4 203.7 202.4 122.4 0 177.2-101.8 178.5-104.1l-93.4-41.6c-7.7 37.1-41.2 53-68.2 55.4v38.1h-28.8V368q-41.25-.45-75.3-29.7l34.1-34.5c31.7 29.4 86.4 31.8 86.4-2.2 0-6.2-2.2-11.2-6.6-15.1-14.2-6-1.8-.1-219.3-97.4M248.4 52.3c-38.4 0-112.4 8.7-170.5 93l94.8 42.5c10-31.3 40.4-42.9 63.8-44.3v-38.1h28.8v38.1c22.7 1.2 43.4 8.9 62 23L295 199.7c-42.7-29.9-83.5-8-70 11.1 53.4 24.1 43.8 19.8 93 41.6l127.1 56.7c4.1-17.4 6.2-35.1 6.2-53.1 0-57-19.8-105-59.3-143.9-39.3-39.9-87.2-59.8-143.6-59.8"
+  ></path>
+</svg>