add notes and web pages for them

2025-08-06 01:15:18 +01:00
parent 5dc7db36f8
commit 2936ab3384
12 changed files with 212 additions and 22 deletions
--- a/src/pages/read.astro
+++ b/src/pages/read.astro
@@ -0,0 +1,94 @@
+---
+import { getCollection } from "astro:content";
+import BaseHead from "../components/BaseHead.astro";
+
+const nowReading = {
+	title: "The Creative Act",
+	slug: "the-creative-act",
+};
+const quote = {
+	content:
+		"Practicing a way of being that allows you to see the world through uncorrupted, innocent eyes can free you to act in concert with the universe's timetable.",
+	bookTitle: "The Creative Act",
+};
+
+const books = (await getCollection("read")).filter(
+	(book) => book.slug !== nowReading.slug,
+);
+---
+
+<!doctype html>
+<html
+	lang="en"
+	class="bg-stone-200 dark:bg-stone-900 text-stone-700 dark:text-stone-400"
+>
+	<head>
+		<BaseHead
+			title="Kenneth's Reads"
+			description="Quotes and notes from my readings."
+		/>
+	</head>
+	<body class="reads px-8">
+		<main class="mt-8 mb-20 md:mt-0 max-w-4xl grid grid-cols-11">
+			<header class="col-span-11 grid grid-cols-11">
+				<h1
+					class="col-span-10 md:col-span-3 md:justify-self-end text-lg font-bold mt-8"
+				>
+					<a href="/" class="hover:underline">Kenneth</a>&#39;s Reads
+				</h1>
+				<p
+					class="col-span-10 md:col-span-8 text-lg font-medium mb-10 md:mb-20 md:ml-12 md:mt-8"
+				>
+					Quotes and notes from my readings.
+				</p>
+			</header>
+
+			<div class="md:justify-self-end col-span-10 md:col-span-3">
+				<div class="flex items-center opacity-70 mb-2 md:mb-20">
+					<div
+						class="w-3 h-3 bg-green-500 border-green-200 dark:bg-green-500 border-2 dark:border-green-300 rounded-full animate-pulse mr-2"
+					>
+					</div>
+					<h2 class="tracking-tight">Now Reading</h2>
+				</div>
+			</div>
+
+			<div class="col-span-10 md:col-span-8 md:ml-12 mb-16 md:mb-20">
+				<a class="font-medium underline" href={`/read/${nowReading.slug}`}
+					>{nowReading.title}</a
+				>
+			</div>
+
+			<div
+				class="md:justify-self-end col-span-10 md:col-span-3 flex flex-col md:items-end opacity-70"
+			>
+				<p class="text-6xl leading-none font-black select-none">“</p>
+				<h2 class="leading-none -translate-y-8 tracking-tight">
+					{quote.bookTitle}
+				</h2>
+			</div>
+			<p
+				class="col-span-10 md:col-span-8 max-w-prose md:ml-12 text-2xl md:text-4xl tracking-tight mb-20"
+			>
+				{quote.content}
+			</p>
+
+			<h2
+				class="col-span-10 md:col-span-3 tracking-tight md:justify-self-end mb-4"
+			>
+				All Books
+			</h2>
+			<ul class="col-span-10 md:col-span-8 md:ml-12 space-y-2">
+				{
+					books.map((book) => (
+						<li>
+							<a class="underline" href={`/read/${book.slug}`}>
+								{book.data.title}
+							</a>
+						</li>
+					))
+				}
+			</ul>
+		</main>
+	</body>
+</html>