Show features for experiments and posts

src/components/Header/Header.astro

@@ -5,28 +5,39 @@ import Logo from "./Logo.astro";
 
 const currentPath = Astro.url.pathname;
 const topLevelPath = currentPath.split("/")[1];
+
+const navigation = [
+  {
+    label: "Garden",
+    url: "/garden",
+  },
+  {
+    label: "About",
+    url: "/about",
+  },
+  {
+    label: "Now",
+    url: "/now",
+  },
+];
 ---
 
 <header>
   <Center>
     <nav id="nav">
       <Logo />
       <div class="links">
-        <a
-          href="/garden"
-          data-fathom="nav-link"
-          class={topLevelPath === "garden" ? "active" : ""}>The Garden</a
-        >
-        <a
-          href="/about"
-          data-fathom="nav-link"
-          class={topLevelPath === "about" ? "active" : ""}>About</a
-        >
-        <a
-          href="/now"
-          data-fathom="nav-link"
-          class={topLevelPath === "now" ? "active" : ""}>Now</a
-        >
+        {
+          navigation.map((item) => (
+            <a
+              href={item.url}
+              data-fathom="nav-link"
+              class={topLevelPath === item.url.split("/")[1] ? "active" : ""}
+            >
+              {item.label}
+            </a>
+          ))
+        }
         <button type="button" data-theme-toggle aria-label="Toggle theme">
           <Icon icon="sun" size="20" variant="line" className="sun" />
           <Icon icon="moon" size="20" variant="line" className="moon" />

src/components/PostLink.astro

@@ -1,14 +1,20 @@
 ---
 import { RelativeDate } from "./RelativeDate/RelativeDate";
 
+interface Feature {
+  name: string;
+  url: string;
+}
+
 interface Props {
   url: string;
   title: string;
   description?: string;
   datePublished?: Date;
+  features?: Feature[];
 }
 
-const { url, title, description, datePublished } = Astro.props;
+const { url, title, description, datePublished, features } = Astro.props;
 ---
 
 <div class="post">
@@ -21,6 +27,17 @@ const { url, title, description, datePublished } = Astro.props;
   }
   <a href={url} class="title">{title}</a>
   <span class="description">{description}</span>
+  {
+    features && (
+      <span class="features">
+        Featured on:{" "}
+        {features.map(({ name, url }, i) => [
+          i > 0 && ", ",
+          <a href={url}>{name}</a>,
+        ])}
+      </span>
+    )
+  }
 </div>
 
 <style lang="scss">
@@ -30,7 +47,8 @@ const { url, title, description, datePublished } = Astro.props;
     gap: var(--space-2xs);
   }
 
-  .date {
+  .date,
+  .features {
     color: var(--gray-11);
     font-size: var(--step--1);
   }

src/content/config.ts

@@ -16,6 +16,13 @@ export const collections = {
           })
           .optional(),
         ogImage: image().optional(),
+        features: z
+          .object({
+            name: z.string(),
+            url: z.string().url(),
+          })
+          .array()
+          .optional(),
       }),
   }),
 
@@ -65,8 +72,16 @@ export const collections = {
     schema: () =>
       z.object({
         title: z.string(),
+        datePublished: z.date(),
         description: z.string().optional(),
         url: z.string(),
+        features: z
+          .object({
+            name: z.string(),
+            url: z.string().url(),
+          })
+          .array()
+          .optional(),
       }),
   }),
 

src/content/experiments/america-my-face.yml

@@ -1,3 +1,4 @@
 title: America, My Face Is Saying Everything That You Need To Know
 description: (dot com)
+datePublished: 2018-06-14 12:00:00-04:00
 url: https://americamyfaceissayingeverythingthatyouneedtoknow.com

src/content/experiments/composed.yml

@@ -1,3 +1,4 @@
 title: Composed
 description: Generative staff paper for non-linear time.
+datePublished: 2024-02-14 12:00:00-04:00
 url: https://composed.eva.town

src/content/experiments/design-is.yml

@@ -1,3 +1,7 @@
 title: Design Is
 description: How do you define design?
+datePublished: 2024-02-01 12:00:00-04:00
 url: https://design.eva.town
+features:
+  - name: Codrops Collective No. 842
+    url: https://mailchi.mp/codrops/collective842-ksqa

src/content/experiments/genderswap.yml

@@ -0,0 +1,9 @@
+title: Genderswap.fm
+description: Cataloguing gender-reversal in cover songs.
+datePublished: 2023-10-19 12:00:00-04:00
+url: https://genderswap.fm
+features:
+  - name: kottke.org
+    url: https://kottke.org/24/06/0044752-genderswapdotfm-is-a-cata
+  - name: Made With Svelte
+    url: https://madewithsvelte.com/genderswap-fm

src/content/experiments/hypersensitive.yml

@@ -1,3 +1,4 @@
 title: HYPERSENSITIVE
 description: A looping, generative meditation on overwhelm, autism, and synesthesia.
+datePublished: 2024-02-10 12:00:00-04:00
 url: /hypersensitive

src/content/experiments/lissajous.yml

@@ -1,3 +1,7 @@
 title: Lissajous Curve SVG Generator
 description: Create and export Lissajous Curves in SVG.
+datePublished: 2024-03-10 12:00:00-04:00
 url: https://lissajous.eva.town
+features:
+  - name: Codrops Collective No. 823
+    url: https://mailchi.mp/codrops/collective823-yxzi-1622956

src/content/experiments/wind-waker.yml

@@ -1,3 +1,4 @@
 title: Wind Waker
 description: "A pixel art recreation of the water from The Legend of Zelda: The Wind Waker."
+datePublished: 2024-02-14 12:00:00-04:00
 url: /wind-waker

src/content/posts/design-outside-the-computer/index.mdx

@@ -7,6 +7,13 @@ img:
   src: ./guestbook-cover.png
   alt: A collection of hand-drawn postcards. The middle one has a flower drawn with a green highlighter.
 ogImage: ./guestbook-cover.png
+features:
+  - name: Codrops Collective No. 846
+    url: https://mailchi.mp/codrops/collective846-xzvb
+  - name: TLDR Design
+    url: https://tldr.tech/design/2024-06-18
+  - name: The Astro Newsletter
+    url: https://buttondown.email/withastro/archive/astro-monthly-newsletter-may-2024/
 ---
 
 This weekend, I added a new feature to my site. It's an old-school kind of webpage—something I've always wanted to create, but never really had the tools for until now.

src/pages/garden.astro

@@ -16,6 +16,11 @@ posts.sort((a, b) => {
 });
 
 const experiments = await getCollection("experiments");
+experiments.sort((a, b) => {
+  return dayjs(b.data.datePublished).isBefore(dayjs(a.data.datePublished))
+    ? -1
+    : 1;
+});
 
 const title = "The Garden";
 const description = "Every garden starts somewhere. This is mine.";
@@ -33,6 +38,7 @@ const description = "Every garden starts somewhere. This is mine.";
             title={smartquotes(post.data.title)}
             description={smartquotes(post.data.description)}
             datePublished={post.data.datePublished}
+            features={post.data.features}
           />
         ))
       }
@@ -45,6 +51,8 @@ const description = "Every garden starts somewhere. This is mine.";
             url={experiment.data.url}
             title={experiment.data.title}
             description={experiment.data.description}
+            datePublished={experiment.data.datePublished}
+            features={experiment.data.features}
           />
         ))
       }