From be261ba45a3ad261c4cc1850bfca9a51db2fcb64 Mon Sep 17 00:00:00 2001
From: Eva Decker <itsevadecker@gmail.com>
Date: Tue, 25 Jun 2024 21:50:16 -0400
Subject: [PATCH 1/3] Show features for experiments and posts

---
 src/components/Header/Header.astro            | 41 ++++++++++++-------
 src/components/PostLink.astro                 | 22 +++++++++-
 src/content/config.ts                         | 15 +++++++
 src/content/experiments/america-my-face.yml   |  1 +
 src/content/experiments/composed.yml          |  1 +
 src/content/experiments/design-is.yml         |  4 ++
 src/content/experiments/genderswap.yml        |  9 ++++
 src/content/experiments/hypersensitive.yml    |  1 +
 src/content/experiments/lissajous.yml         |  4 ++
 src/content/experiments/wind-waker.yml        |  1 +
 .../design-outside-the-computer/index.mdx     |  7 ++++
 src/pages/garden.astro                        |  8 ++++
 12 files changed, 97 insertions(+), 17 deletions(-)
 create mode 100644 src/content/experiments/genderswap.yml

diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 660aab45..29117be7 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -5,6 +5,21 @@ 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>
@@ -12,21 +27,17 @@ const topLevelPath = currentPath.split("/")[1];
     <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" />
diff --git a/src/components/PostLink.astro b/src/components/PostLink.astro
index 77655e2d..f91dac79 100644
--- a/src/components/PostLink.astro
+++ b/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);
   }
diff --git a/src/content/config.ts b/src/content/config.ts
index bf9fe348..ec52a31d 100644
--- a/src/content/config.ts
+++ b/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(),
       }),
   }),
 
diff --git a/src/content/experiments/america-my-face.yml b/src/content/experiments/america-my-face.yml
index d195c102..7b906256 100644
--- a/src/content/experiments/america-my-face.yml
+++ b/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
diff --git a/src/content/experiments/composed.yml b/src/content/experiments/composed.yml
index d604736c..7f39ea0b 100644
--- a/src/content/experiments/composed.yml
+++ b/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
diff --git a/src/content/experiments/design-is.yml b/src/content/experiments/design-is.yml
index d9422c4a..f60430bf 100644
--- a/src/content/experiments/design-is.yml
+++ b/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
diff --git a/src/content/experiments/genderswap.yml b/src/content/experiments/genderswap.yml
new file mode 100644
index 00000000..3b4399d1
--- /dev/null
+++ b/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
diff --git a/src/content/experiments/hypersensitive.yml b/src/content/experiments/hypersensitive.yml
index bfcc0623..d1c4688d 100644
--- a/src/content/experiments/hypersensitive.yml
+++ b/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
diff --git a/src/content/experiments/lissajous.yml b/src/content/experiments/lissajous.yml
index a164d95e..aaedcfe2 100644
--- a/src/content/experiments/lissajous.yml
+++ b/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
diff --git a/src/content/experiments/wind-waker.yml b/src/content/experiments/wind-waker.yml
index f64dd27e..3e4907e5 100644
--- a/src/content/experiments/wind-waker.yml
+++ b/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
diff --git a/src/content/posts/design-outside-the-computer/index.mdx b/src/content/posts/design-outside-the-computer/index.mdx
index 400632dd..60ae7628 100644
--- a/src/content/posts/design-outside-the-computer/index.mdx
+++ b/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.
diff --git a/src/pages/garden.astro b/src/pages/garden.astro
index b2540547..f2985f4b 100644
--- a/src/pages/garden.astro
+++ b/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}
           />
         ))
       }

From cab6e2138e3e2492ff0ccfe877f41ae5076f6115 Mon Sep 17 00:00:00 2001
From: Eva Decker <itsevadecker@gmail.com>
Date: Tue, 25 Jun 2024 21:54:18 -0400
Subject: [PATCH 2/3] Remove colon

---
 src/components/PostLink.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PostLink.astro b/src/components/PostLink.astro
index f91dac79..3763dc81 100644
--- a/src/components/PostLink.astro
+++ b/src/components/PostLink.astro
@@ -30,7 +30,7 @@ const { url, title, description, datePublished, features } = Astro.props;
   {
     features && (
       <span class="features">
-        Featured on:{" "}
+        Featured on{" "}
         {features.map(({ name, url }, i) => [
           i > 0 && ", ",
           <a href={url}>{name}</a>,

From 09b36c8cdf84376c1a9b43162f19279d6627f4c1 Mon Sep 17 00:00:00 2001
From: Eva Decker <itsevadecker@gmail.com>
Date: Tue, 25 Jun 2024 21:55:47 -0400
Subject: [PATCH 3/3] Add missing env variable to Github workflow

---
 .github/workflows/ci.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 806a3464..01494b1f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,5 +1,8 @@
 name: CI
 
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{ secrets.ASTRO_STUDIO_APP_TOKEN }}
+
 on:
   push:
     branches: main