Featured: Adding recipes collection.

This has been something I've been meaning to do for a long time, but I
finally got around to stubbing in the basics. I keep a local text file
on my main desktop, that I have filled with some of the basic recipes
and meals that I regular cook and enjoy. I really want to get those
into both a more *durable* place, but also continue some long-running
experiments around recipe formatting.

This first recipe that I'm adding is just a basic bread recipe that I
use almost weekly. But just like this new collection, it's really just a
jumping off point for more experimentation. I look forward to collating
more these and exploring new/better formatting options.

Author: 32bitkid

src/content/config.ts

@@ -110,11 +110,20 @@ const sci0PicsCollection = defineCollection({
     }),
 });
 
+const recipesCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    name: z.string(),
+    servings: z.string().optional(),
+  }),
+});
+
 export const collections = {
   blog: blogCollection,
   projects: projectsCollection,
   sci0games: sci0GamesCollection,
   sci0pics: sci0PicsCollection,
   thoughts: thoughtsCollection,
   TILs: tilsCollection,
+  recipes: recipesCollection,
 };

src/content/recipes/basic-bread.mdx

@@ -0,0 +1,23 @@
+---
+name: "Basic Bread"
+servings: "two loaves"
+---
+
+* <data>1,000 g</data> bread flour
+* <data>600 ml</data> water
+* <data>20 g</data> salt
+* <data>5 g</data> yeast
+
+1. <small>Dissolve</small> water and yeast in small. Let bloom for 3 to 5 minutes
+1. <small>Combine</small> flour and salt in large mixing bowl. Pour the yeast mixture into the flour mixture and mix by hand until combined
+1. <small>Rest</small> dough for 30 minutes
+1. <small>Stretch-and-fold</small>. Repeat at least three more stretch-and-folds, resting 15 to 30 minutes between each
+1. <small>Proof</small> dough until doubled in size
+1. <small>Divide</small> roughly in half and shape into loaf
+1. <small>Bake</small> at 425&deg; F oven for 40 minutes
+1. <small>Rest</small> for at least 30 minutes before slicing
+
+<hr className="simple" />
+
+This is a simple crusty bread recipe, based on a fundamental ratio of 5&ratio;3, flour to water, (or a 60% hydration). This is really just a
+_starting point_ for most other types of bread: _e.g._ pizza dough, bagels, baguettes, and buns.

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

@@ -0,0 +1,73 @@
+---
+import { getCollection } from 'astro:content';
+import Page from '../../layouts/page.astro';
+export async function getStaticPaths() {
+  const recipeEntries = await getCollection('recipes');
+  return recipeEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { recipe: entry },
+  }));
+}
+
+const { recipe } = Astro.props;
+const { name, servings } = recipe.data;
+const { Content } = await recipe.render();
+---
+
+<Page>
+    <article class="markdown recipe">
+        <h1>{name}</h1>
+        {servings && <p class="servings">makes {servings}</p>}
+        <Content />
+    </article>
+</Page>
+
+<style>
+    .recipe {
+        font-feature-settings: 'onum';
+    }
+
+    .servings {
+        text-align: center;
+        font-style: italic;
+        quotes: '(' ')';
+        margin-top: -1rlh;
+        font-size: var(--f-small);
+        &:not(:empty) {
+            &::before { content: open-quote; }
+            &::after { content: close-quote; }
+        }
+    }
+
+    .recipe::before, .recipe::after {
+        display: block;
+        content: '\2042';
+        font-size: var(--f-x-large);
+        margin-block: 2rlh;
+        text-align: center;
+    }
+
+    .recipe h1 {
+        text-align: center;
+        margin-block-start: 0;
+    }
+
+    .recipe :global(ul) {
+        margin-inline: auto;
+        width: max-content;
+        columns: 2;
+        column-rule: 3px double currentColor;
+        column-gap: 4ch;
+        margin-block: 1rlh;
+    }
+
+    .recipe :global(ol) {
+        margin-block: 1rlh;
+    }
+
+    .recipe :global(ol li) {
+        display: inline;
+        &:not(:last-child)::after { content: ' \29F8 '; }
+        &:last-child::after { content: '.'; }
+    }
+</style>

src/pages/recipes/index.astro

@@ -0,0 +1,21 @@
+---
+import { getCollection } from 'astro:content';
+import Page from '../../layouts/page.astro';
+
+const allRecipes = await getCollection('recipes');
+---
+
+<Page title="Recipes" description="Some thoughts on food and recipes.">
+    <h1>Recipes</h1>
+    <ul class="recipes">
+        {allRecipes.map(recipe => <li><a href={`/recipes/${recipe.slug}`}>{recipe.data.name}</a></li>)}
+    </ul>
+    <em>Showing {allRecipes.length} recipes.</em>
+
+</Page>
+
+<style>
+    .recipes {
+        margin-bottom: 1lh;
+    }
+</style>

src/styles/core.css

@@ -158,26 +158,14 @@ mark {
 hr {
   height: 0;
   border: 0;
-  margin: calc(1rlh * 2.5) 0;
+  margin: 2rlh 0;
   position: relative;
   clear: both;
   overflow: visible;
   text-align: center;
   color: var(--pal-light);
   border-bottom: 1px dotted currentColor;
   page-break-after: avoid;
-
-  &::after {
-    content: "\2042";
-    position: relative;
-    font-size: 1.3348rem;
-    color: currentColor;
-    top: calc(1rlh * -1);
-    line-height: calc(1rlh * 2);
-    background-color: white;
-    padding: 1rem;
-    border-radius: 50%;
-  }
 }
 
 q {