Issue #466: Various updates to the podcast page (#473)

brian-montgomery · web-flow · commit 5417a1931685 · 2026-01-22T08:54:30.000-05:00
* Section IDs and corrections
* Made titles consistent
* Fix size issues
diff --git a/astro/astro.config.mjs b/astro/astro.config.mjs
@@ -73,6 +73,10 @@ export default defineConfig({
           // Payment
           "cc-paypal", "cc-stripe", "paypal", "stripe",
         ],
+        'simple-icons': [
+          // Streaming
+          'podcastindex'
+        ],
       }
     }),
     sitemap({
diff --git a/astro/package-lock.json b/astro/package-lock.json
diff --git a/astro/package.json b/astro/package.json
@@ -18,6 +18,7 @@
     "@fontsource/atkinson-hyperlegible": "5.0.20",
     "@iconify-json/bi": "1.1.23",
     "@iconify-json/cib": "1.1.8",
+    "@iconify-json/simple-icons": "1.2.67",
     "astro": "5.16.11",
     "astro-icon": "1.1.5",
     "astro-lazy-youtube-embed": "0.5.4",
diff --git a/astro/src/components/SocialLinks.astro b/astro/src/components/SocialLinks.astro
@@ -17,11 +17,12 @@ interface LinkConfig {
 
 interface Props {
   links: SocialLinkDictionary;
-  adjective?: string;
+  label?: string;
   gap?: number;
+  iconSize?: string;
 }
 
-const { links, adjective = "" } = Astro.props;
+const { links, label = "", iconSize = "2em", gap = 2 } = Astro.props;
 const brandingThemes = {
   email: "primary",
 };
@@ -31,6 +32,7 @@ const socialLinks: Array<LinkConfig> = toPairs(links).map(([type, url]) => {
     if (type == "email") return "envelope-at";
     else if (type == "threads") return "threads-logo-black";
     else if (type == "website") return "bi:globe";
+    else if (type == "podcastIndex") return "simple-icons:podcastindex";
     else return `cib:${kebabCase(type)}`;
   })();
 
@@ -51,12 +53,9 @@ const socialLinks: Array<LinkConfig> = toPairs(links).map(([type, url]) => {
 
 {
   !isEmpty(socialLinks) && (
-    <ul
-      class="list-unstyled d-inline-block mb-2"
-      aria-label={`${adjective} Communications and Social Media Links`}
-    >
+    <ul class="list-unstyled d-inline-block mb-2" aria-label={label}>
       {socialLinks.map((sl) => (
-        <li class="d-inline-block mx-2">
+        <li class:list={["d-inline-block", `mx-${gap}`]}>
           <a
             href={sl.href}
             class="d-inline-block align-middle"
@@ -67,7 +66,9 @@ const socialLinks: Array<LinkConfig> = toPairs(links).map(([type, url]) => {
               name={sl.icon}
               class="bi social-icon"
               role="img"
-              aria-label={`${adjective} ${sl.service} ${sl.description}`}
+              aria-label={`${label} ${sl.service} ${sl.description}`}
+              width={iconSize}
+              height={iconSize}
             />
           </a>
         </li>
@@ -76,12 +77,12 @@ const socialLinks: Array<LinkConfig> = toPairs(links).map(([type, url]) => {
   )
 }
 
-<style>
+<style define:vars={{ "si-icon-size": iconSize }}>
   .social-icon {
     fill: currentColor;
-    width: 2rem;
-    height: 2rem;
-    min-height: 2rem;
-    min-width: 2rem;
+    width: var(--si-icon-size);
+    height: var(--si-icon-size);
+    min-height: var(--si-icon-size);
+    min-width: var(--si-icon-size);
   }
 </style>
diff --git a/astro/src/components/StaffList.astro b/astro/src/components/StaffList.astro
@@ -4,9 +4,10 @@ import { sortBy } from "lodash-es";
 
 interface Props {
   team: string; // TODO: declare enum;
+  size?: string;
 }
 
-const { team } = Astro.props;
+const { team, size = "18rem" } = Astro.props;
 const staff: CollectionEntry<"staff">[] = sortBy(
   await getCollection(
     "staff", ({data}) => data.current && Object.keys(data.roles ?? {}).includes(team)
@@ -38,9 +39,9 @@ import TeamVignette from "@components/TeamVignette.astro";
     );
   })}
 </ul>
-<style>
+<style define:vars={{ "sli-size": size }}>
   .staff-list-item {
-    max-width: 18rem;
+    max-width: var(--sli-size);
   }
   .staff-list-item :global(.vignette-name) {
     color: var(--bs-primary-text-emphasis);
diff --git a/astro/src/components/TeamMemberBio.astro b/astro/src/components/TeamMemberBio.astro
@@ -34,7 +34,7 @@ const { Content } = await render(member);
   <div
     class="col-md-3 pb-2 pt-md-3 pe-3 pe-lg-3 pe-xl-4 ps-md-2 text-center text-md-end align-self-center"
   >
-    {!isEmpty(links) && <SocialLinks links={links} adjective={`${name}'s`} />}
+    {!isEmpty(links) && <SocialLinks links={links} label={`${name}'s Communications and Social Media Links`} />}
   </div>
 </div>
 <div class="p-2">
diff --git a/astro/src/content.config.ts b/astro/src/content.config.ts
@@ -118,6 +118,7 @@ const podcastShows = defineCollection({
         .object({
           youtube: z.string().url(),
           applePodcasts: z.string().url(),
+          podcastIndex: z.string().url(),
         })
         .partial()
         .optional(),
diff --git a/astro/src/content/blogs/day-in-life-announcement.mdx b/astro/src/content/blogs/day-in-life-announcement.mdx
@@ -9,7 +9,7 @@ author: esther-klang
 
 Accessibility work is strongest when grounded in real-world experience. Not in assumptions. Not in checklists alone. In the everyday experiences of disabled people navigating systems that shape how we work, communicate, learn, and participate.
 
-"Day in the Life" is a multimedia storytelling project created to do precisely that.
+A [Day in the Life](/podcasts/#day-in-the-life) is a multimedia storytelling project created to do precisely that.
 
 This series centers on real experiences of living with a disability and presents them with care, intention, and professional respect. It is designed for education, outreach, and accessibility practice, with a clear goal: to treat lived experience as legitimate expertise and to share it responsibly.
 
@@ -25,7 +25,7 @@ Day in the Life was created to surface that knowledge. Not as anecdote, but as a
 
 ## How the Stories Are Created
 
-Each episode of Day in the Life is based on a full interview conducted by Taylor Dorward from _Accessible Community_.
+Each episode of [Day in the Life](/podcasts/#day-in-the-life) is based on a full interview conducted by Taylor Dorward from _Accessible Community_.
 
 Participants talk through their daily routines, decision-making processes, access needs, and the systems they interact with regularly. The focus is not on diagnosis or personal history, but on lived interaction with the world as it is designed today.
 
diff --git a/astro/src/content/podcasts/shows/day-in-the-life.mdx b/astro/src/content/podcasts/shows/day-in-the-life.mdx
@@ -2,6 +2,10 @@
 title: A 'Day in the Life'
 host: taylor-dorward
 image: src/images/podcasts/day-in-the-life.png
+links:
+   youtube: https://www.youtube.com/playlist?list=PL8BDCgijUWjMMXT1ZE3BEgYQSN2H57YKW
+   applePodcasts: https://podcasts.apple.com/us/podcast/accessible-community/id1870924919
+   podcastIndex: https://podcastindex.org/podcast/7666499
 ---
 Accessibility work is strongest when grounded in real-world experience. Not in assumptions. Not in checklists alone. In the everyday experiences of disabled people navigating systems that shape how we work, communicate, learn, and participate.
 
diff --git a/astro/src/content/staff/esther-klang.mdx b/astro/src/content/staff/esther-klang.mdx
@@ -7,7 +7,7 @@ roles:
   content: Writer
   communications: Director
   leadership: Director, Communications
-  podcasts: Communications, Contributor
+  podcasts: Contributor, Communications
 photo:
   image: ../../images/staff/3d/estherk_headshot.png
 links:
diff --git a/astro/src/content/staff/jonathan-ko.mdx b/astro/src/content/staff/jonathan-ko.mdx
@@ -6,7 +6,7 @@ roles:
   default: Director, Content
   content: Director
   leadership: Director, Content
-  podcasts: Accessibility in Practice, Lead
+  podcasts: Lead, Accessibility in Practice
 photo:
   image: ../../images/staff/3d/JonathanKO_headshot.png
   alt: Person with glasses, brown beard, and brown hair in a sweater and collared shirt
diff --git a/astro/src/content/staff/katelyn.md b/astro/src/content/staff/katelyn.md
@@ -7,7 +7,7 @@ cited:
 roles:
   default: Communications Team
   communications: Team Lead, Social Media
-  podcasts: Communications, Contributor
+  podcasts: Contributor, Communications
 links:
   linkedin: https://www.linkedin.com/in/kcrosby92/
 photo:
diff --git a/astro/src/content/staff/kazuya-ando.md b/astro/src/content/staff/kazuya-ando.md
@@ -8,7 +8,7 @@ cited:
 roles:
   default: UX Researcher and Designer, DAF
   content: UX Designer, Day in the Life
-  podcasts: Day in the Life, Contributor
+  podcasts: Contributor, Day in the Life
   ux: UX Researcher and Designer, DAF
 links:
   linkedin: https://www.linkedin.com/in/kazuyoando
diff --git a/astro/src/content/staff/sabrina.md b/astro/src/content/staff/sabrina.md
@@ -5,5 +5,5 @@ name:
 roles:
   default: Writer, Day in the Life
   content: Writer, Day in the Life
-  podcasts: Day in the Life, Contributor
+  podcasts: Contributor, Day in the Life
 ---
diff --git a/astro/src/content/staff/sean.md b/astro/src/content/staff/sean.md
@@ -8,5 +8,5 @@ roles:
   default: Content Team
   communications: Writer, Day in the Life
   content: Writer, Day in the Life
-  podcasts: Day in the Life, Contributor
+  podcasts: Contributor, Day in the Life
 ---
diff --git a/astro/src/content/staff/taylor-dorward.mdx b/astro/src/content/staff/taylor-dorward.mdx
@@ -8,6 +8,8 @@ roles:
   content: PM, Day in the Life
   leadership: Project Manager, Day in the Life
   podcasts: Lead/Host, Day in the Life
+photo:
+  image: ../../images/staff/3d/taylor.png
 links:
   linkedin: https://www.linkedin.com/in/taylordorward/
   website: https://www.meetup.com/dug-diverse-minds/members/
diff --git a/astro/src/images/colored-hero/podcast.png b/astro/src/images/colored-hero/podcast.png
diff --git a/astro/src/images/staff/3d/taylor.png b/astro/src/images/staff/3d/taylor.png
diff --git a/astro/src/lib/hero-image.ts b/astro/src/lib/hero-image.ts
@@ -10,6 +10,7 @@ import balloonsImage from "../images/colored-hero/balloons.png";
 import blogImage from "../images/colored-hero/pen-paper.png";
 import handsImage from "../images/colored-hero/hands-together.png";
 import notesImage from "../images/colored-hero/post-it-notes.png";
+import podcastImage from "../images/colored-hero/podcast.png";
 import policyImage from "../images/colored-hero/policy.png";
 import teamImage from "../images/colored-hero/team.png";
 
@@ -18,6 +19,7 @@ export enum HeroTheme {
   hands = "hands",
   notes = "notes",
   party = "party",
+  podcast = "podcast",
   policy = "policy",
   team = "team",
 }
@@ -33,6 +35,7 @@ const heroImagePaths: HeroThemeMapping<string> = {
   hands: "./src/images/colored-hero/hands-together.png",
   notes: "./src/images/colored-hero/post-it-notes.png",
   party: "./src/images/colored-hero/balloons.png",
+  podcast: "./src/images/colored-hero/podcast.png",
   policy: "./src/images/colored-hero/policy.png",
   team: "./src/images/colored-hero/team.png",
 };
@@ -41,6 +44,7 @@ const heroImages: HeroThemeMapping<ImageMetadata> = {
   hands: handsImage,
   notes: notesImage,
   party: balloonsImage,
+  podcast: podcastImage,
   policy: policyImage,
   team: teamImage,
 };
@@ -64,6 +68,11 @@ const heroBackgroundCss: HeroThemeMapping<object> = {
     "background-position": "center 60%",
     "background-size": "cover",
   },
+  podcast: {
+    height: "11rem",
+    "background-position": "center 55%",
+    "background-size": "cover",
+  },
   team: {
     height: "9rem",
     "background-position": "center 30%",
diff --git a/astro/src/pages/podcasts/index.astro b/astro/src/pages/podcasts/index.astro
@@ -49,16 +49,20 @@ const music: Music[] = [{
 import components from "@lib/mdx";
 import ExternalLink from "@components/ExternalLink.astro";
 import { Image } from "astro:assets";
+import ImageHeading from "@components/ImageHeading.astro";
 import Layout from "src/layouts/Layout.astro";
 import SocialLinks from "@components/SocialLinks.astro";
 import StaffList from "@components/StaffList.astro";
 import ThemedSection from "@components/ThemedSection.astro";
 ---
 
 <Layout title="Podcasts">
+  <ImageHeading image="podcast" slot="header">
+    <h1 class="display-3">Podcasts</h1>
+  </ImageHeading>
   {
     shows.map((show, index) => (
-      <ThemedSection style={(index % 2) ? "tertiary" : undefined}>
+      <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id}>
         <div
           class:list={[
             "d-flex flex-column flex-md-row-reverse gap-4",
@@ -74,9 +78,16 @@ import ThemedSection from "@components/ThemedSection.astro";
           </div>
           <div class="col col-md-3 col-lg-2">
             <Image class="d-none d-md-block logo rounded" src={show.data.image} alt={`${show.data.title} logo`} />
-            { show.data.links && (
-              <SocialLinks links={toUrlMap(show.data.links)} />
-            )}
+            {
+              show.data.links ? (
+                <div>
+                  <span class="d-md-none display-6 fw-bold align-middle">Available at:</span>
+                  <SocialLinks links={toUrlMap(show.data.links)} iconSize="1.5em" label="Podcast Locations" />
+                </div>
+              ) : (
+                <div class="display-7 fw-bold">Coming Soon.</div>
+              )
+            }
           </div>
         </div>
       </ThemedSection>
@@ -86,7 +97,7 @@ import ThemedSection from "@components/ThemedSection.astro";
     <h2>Credits</h2>
     <h3 class="mt-4 mb-2">Contributors</h3>
     <p>Thank you to all of our staff who help make these podcasts possible.</p>
-    <StaffList team="podcasts" />
+    <StaffList team="podcasts" size="19rem" />
 
     <h3 class="mt-4 mb-2">Music</h3>
     <p>

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const { Content } = await render(member);`
`34`	`34`	`<div`
`35`	`35`	`class="col-md-3 pb-2 pt-md-3 pe-3 pe-lg-3 pe-xl-4 ps-md-2 text-center text-md-end align-self-center"`
`36`	`36`	`>`
`37`		- {!isEmpty(links) && <SocialLinks links={links} adjective={`${name}'s`} />}
	`37`	+ {!isEmpty(links) && <SocialLinks links={links} label={`${name}'s Communications and Social Media Links`} />}
`38`	`38`	`</div>`
`39`	`39`	`</div>`
`40`	`40`	`<div class="p-2">`