feat: add Journal page

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

@@ -0,0 +1,139 @@
+---
+import cx from 'classnames';
+
+import { getCollection } from 'astro:content';
+
+import { sortByDate } from '../utils';
+import { dateToFormat, dateToISO, wordCount } from '../utils';
+
+import GridLayout from '../layouts/GridLayout.astro';
+import PageTitle from '../components/PageTitle.astro';
+import Pagination from '../components/Pagination.astro';
+import Picture from '../components/Picture.astro';
+import { TextLink } from '../components';
+
+import { mapping } from '../mdx-components';
+
+export async function getStaticPaths() {
+	const journalEntries = await getCollection('journal');
+	const numberOfPages = journalEntries.length;
+	journalEntries.sort(sortByDate).reverse();
+
+	return journalEntries.map((entry, index) => ({
+		params: { slug: entry.slug },
+		props: {
+			entry,
+			next:
+				index + 1 === numberOfPages
+					? { slug: null, data: null }
+					: journalEntries[index + 1],
+			prev: index === 0 ? {} : journalEntries[index - 1],
+		},
+	}));
+}
+
+const { entry, prev, next } = Astro.props;
+const {
+	Content,
+	remarkPluginFrontmatter: { minutesRead },
+} = await entry.render();
+
+const title = entry.data.title;
+const description = '…';
+---
+
+<GridLayout title={title} description={description} grid="fullsize" innerGrid backLink="/journal/">
+	<PageTitle slot="title" class="!text-6">
+		{entry.data.title}
+	</PageTitle>
+
+	{
+		entry.data.cover && (
+			<Picture
+				alt={entry.data.title}
+				aspect={1.6}
+				breakpoints={[300, 500, 700, 1000, 1300, 1500, 1800, 2000]}
+				class="col-span-full h-auto !mbe-0 xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
+				format={['webp', 'avif']}
+				src={entry.data.cover}
+			/>
+		)
+	}
+
+	<aside
+		class={cx(
+			'col-start-2 col-end-18 md:col-start-5 md:col-end-15 xl:col-start-15 xl:col-end-18 xl:row-start-2 3xl:col-start-14 3xl:col-end-18',
+			{ 'row-start-3': entry.data.cover }
+		)}
+	>
+		<div class="leading-none mbe-6">
+			<em>By</em>
+			<TextLink href="/about/">{entry.data.author}</TextLink>
+		</div>
+		<div class="leading-tight">
+			<time datetime={dateToISO(entry.data.date)}>{dateToFormat(entry.data.date)}</time>
+		</div>
+		<div class="leading-none">
+			{wordCount(entry.body)}
+			<span class="italic">words</span> • {minutesRead}
+			<span class="italic">read</span>
+		</div>
+	</aside>
+	<div
+		class="journal-post col-start-2 col-end-18 md:col-start-5 md:col-end-15 xl:col-start-6 xl:col-end-14 3xl:col-start-7 3xl:col-end-13"
+	>
+		<Content components={mapping} />
+		{
+			entry.data.updated && (
+				<footer class="mbs-10">
+					<b>Last Updated:</b>
+					<time datetime={dateToISO(entry.data.updated)}>
+						{dateToFormat(entry.data.updated)}
+					</time>
+				</footer>
+			)
+		}
+	</div>
+
+	<Pagination
+		nextText={'Next'}
+		nextUrl={next.slug && next.slug}
+		previousText={'Next'}
+		previousUrl={prev.slug && prev.slug}
+	/>
+</GridLayout>
+
+<style is:global>
+	.journal-post {
+		& > h2 {
+			@apply text-4 mbe-9 mbs-14;
+		}
+
+		& > h3,
+		& > h4,
+		& > h5,
+		& > h6 {
+			@apply text-3 !mbs-14;
+		}
+
+		& > h2:first-of-type,
+		& > h3:first-of-type,
+		& > h4:first-of-type,
+		& > h5:first-of-type,
+		& > h6:first-of-type {
+			@apply mbs-0;
+		}
+
+		& > *:first-child {
+			@apply mbs-0;
+		}
+
+		& > pre {
+			@apply md:mie-[calc(5.55vw_*_-1)] md:mis-[calc(5.55vw_*_-1)];
+		}
+
+		& > figure {
+			@apply md:mie-[calc(5.55vw_*_-1_*_3)] md:mis-[calc(5.55vw_*_-1_*_3)] xl:mie-[calc(5.55vw_*_-1_*_2)] xl:mis-[calc(5.55vw_*_-1_*_2)];
+		}
+	}
+</style>

src/pages/ai-art.astro

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 import { getCollection } from 'astro:content';
 
-import { sortBySortKey } from '../utils/sort-by-sortkey';
+import { sortBySortKey } from '../utils';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
@@ -24,12 +24,12 @@ const description = '…';
 	<PageTitle grid="wide" innerGrid>AI Art</PageTitle>
 
 	<article
-		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+		class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
 	>
 		<Intro components={mapping} />
 	</article>
 
-	<nav class="md:col-start-1 md:col-end-16" aria-label="AI Art">
+	<nav class="col-start-1 col-end-18 md:col-start-1 md:col-end-16" aria-label="AI Art">
 		<ol
 			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-gallery md:grid-cols-gallery md:grid-rows-gallery"
 		>

src/pages/ai-art/[...slug].astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { sortBySortKey } from '../../utils/sort-by-sortkey';
+import { sortBySortKey } from '../../utils';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHeader from '../../components/PageHeader.astro';

src/pages/haiku.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { sortByDate } from '../utils/sort-by-date';
+import { sortByDate } from '../utils';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';

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

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { sortByDate } from '../../utils/sort-by-date';
+import { sortByDate } from '../../utils';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHeader from '../../components/PageHeader.astro';

src/pages/journal.astro

@@ -0,0 +1,42 @@
+---
+import { getCollection } from 'astro:content';
+
+import { sortBySortKey } from '../utils';
+
+import GridLayout from '../layouts/GridLayout.astro';
+import PageTitle from '../components/PageTitle.astro';
+import { Content as Intro } from '../text/journal/intro.mdx';
+import { Link } from '../components';
+
+import { mapping } from '../mdx-components';
+
+const allJournal = await getCollection('journal');
+allJournal.sort(sortBySortKey);
+
+const title = 'Journal';
+const description = '…';
+---
+
+<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
+	<PageTitle grid="wide" innerGrid>Journal</PageTitle>
+
+	<article
+		class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+	>
+		<Intro components={mapping} />
+	</article>
+
+	<nav class="md:col-start-1 md:col-end-16" aria-label="Journal">
+		<ol>
+			{
+				allJournal.map(({ slug, data }) => (
+					<li>
+						<Link title={data.title} href={`/${slug}/`}>
+							{data.title}
+						</Link>
+					</li>
+				))
+			}
+		</ol>
+	</nav>
+</GridLayout>

src/pages/projects.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { sortBySortKey } from '../utils/sort-by-sortkey';
+import { sortBySortKey } from '../utils';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';

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

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { sortBySortKey } from '../../utils/sort-by-sortkey';
+import { sortBySortKey } from '../../utils';
 
 import GridLayout from '../../layouts/GridLayout.astro';
 import PageTitle from '../../components/PageTitle.astro';

src/pages/sketchnotes.astro

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 import { getCollection } from 'astro:content';
 
-import { sortBySortKey } from '../utils/sort-by-sortkey';
+import { sortBySortKey } from '../utils';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';

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

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { sortBySortKey } from '../../utils/sort-by-sortkey';
+import { sortBySortKey } from '../../utils';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHeader from '../../components/PageHeader.astro';