95 lines
2.5 KiB
Plaintext
95 lines
2.5 KiB
Plaintext
---
|
|
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>'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>
|