Issue #466: Podcast page and blog announcement (#471)

* Added podcast pages, content and blog.
* Fixed branding issue in topic list for blogs
* Moved `escape-room` content
* Move form components into separate directory
* Photo updates for staff members

---------

Co-authored-by: Brian Montgomery <brian@accessiblecommunity.org>

Author: rachaelbradley

Makefile

@@ -9,7 +9,7 @@ ifdef OS
 	FixPath = $(subst /,\,$1)
 # The set command will return an error, even though it succeeds.
 else
-	WriteCmd = printf 
+	WriteCmd = printf
 	RemoveCmd = rm -rf
 	RemoveDirCmd = rm -rf
 	FixPath = $1
@@ -24,7 +24,7 @@ up:
 down:
 	@docker compose down
 
-shell:
+shell: up
 	@docker compose exec $(CONTAINER) bash
 
 dist: clean-js-dist $(SOURCE_DIR)/dist

astro/astro.config.mjs

@@ -1,10 +1,3 @@
-import path from "path";
-import { fileURLToPath } from "url";
-
-// https://flaviocopes.com/fix-dirname-not-defined-es-module-scope/
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
 import { defineConfig } from "astro/config";
 import styleGuide from "./style-guide/register.js";
 
@@ -67,14 +60,16 @@ export default defineConfig({
           // Contact Info
           'envelope-at-fill', 'telephone-fill', 'geo-alt-fill',
           // Social Media
-          'facebook', 'instagram', 'linkedin', 'rss-fill', 'tiktok', 'youtube','globe', 'mastodon', 'twitter',
+          'facebook', 'instagram', 'linkedin', 'rss-fill', 'tiktok', 'globe', 'mastodon', 'twitter',
           // Descriptive
           'gift-fill', 'pencil-fill', 'people-fill', 'person-fill', 'puzzle-fill', 'stopwatch-fill', 'tools',
         ],
         // CoreUI Brands
         cib: [
           // Social Media
           'facebook', 'instagram', 'linkedin', 'mastodon', 'twitter',
+          // Streaming
+          'apple-podcasts', 'youtube',
           // Payment
           "cc-paypal", "cc-stripe", "paypal", "stripe",
         ],

astro/src/components/Branding.astro

@@ -6,19 +6,21 @@ interface Props {
 }
 
 let {
-  text = "",
+  "text": inputText = "",
   class: extraClasses = "",
   "no-aria": noAria = false,
 } = Astro.props;
 
-if (Astro.slots.has("default")) text = await Astro.slots.render("default");
+if (Astro.slots.has("default")) inputText = await Astro.slots.render("default");
 
-text = text
+const text = inputText
   .replace(/Accessib(le)/, '<span class="fw-lighter">Accessib$1</span>')
   .replace(
-    /(glob|mutu|loc|t)a11y/i,
-    noAria ?
-      '<span class="text-lowercase">$1<span class="fw-lighter">a11y</span></span>'
+    // Sometimes the YAML parsing inserts a space between => "a 11 y"
+    // TODO: Fix capitalization of second word for programs.
+    /(glob|mutu|loc|t)a\s?11\s?y/i,
+    noAria
+    ? '<span class="text-lowercase">$1<span class="fw-lighter">a11y</span></span>'
     : '<span class="text-lowercase" aria-hidden="true">$1<span class="fw-lighter">a11y</span></span><span class="visually-hidden">$1ally</span>',
   )
   .replace(
@@ -33,6 +35,8 @@ text = text
       '<span class="text-lowercase">$1<span class="fw-lighter">able</span></span>'
     : '<span class="text-lowercase" aria-hidden="true">$1<span class="fw-lighter">able</span></span><span class="visually-hidden">$1able</span>',
   );
+
+const cssClasses = inputText === text ? [extraClasses] : ["text-brand fw-bold", extraClasses];
 ---
 
 {/* Style is up top to remove additional whitespace after the tag */}
@@ -43,4 +47,4 @@ text = text
     line-height: normal;
   }
 </style>
-<span class:list={["text-brand fw-bold", extraClasses]} set:html={text} />
+<span class:list={cssClasses} set:html={text} />

astro/src/components/Footer.astro

@@ -147,6 +147,9 @@ const Socials = [
           <li>
             <a class="link-light footer-link" href="/blog">Our Blog</a>
           </li>
+          <li>
+            <a class="link-light footer-link" href="/podcasts">Our Podcasts</a>
+          </li>
           <li><hr class="border-light" /></li>
           <li>
             <a

astro/src/components/NavSiteList.astro

@@ -64,6 +64,9 @@ const { main = false, class: classes = "" } = Astro.props;
         <li>
           <a class="dropdown-item" href="/blog">Our Blog</a>
         </li>
+        <li>
+          <a class="dropdown-item" href="/podcasts">Our Podcasts</a>
+        </li>
         <li><hr class="dropdown-divider" /></li>
         <li>
           <a class="dropdown-item" href="/globa11y/"

astro/src/components/SocialLinks.astro

@@ -1,10 +1,10 @@
 ---
-import { capitalize, isEmpty, toPairs } from "lodash-es";
+import { isEmpty, kebabCase, startCase, toPairs } from "lodash-es";
 import { Icon } from "astro-icon/components";
 
 // TODO: Not specific enough as a type
-interface SocialLinkDictionary {
-  [index: string]: URL;
+export interface SocialLinkDictionary {
+  [index: string]: URL | undefined;
 }
 
 interface LinkConfig {
@@ -31,11 +31,11 @@ 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 return `cib:${type}`;
+    else return `cib:${kebabCase(type)}`;
   })();
 
   const href = type == "email" ? `mailto:${url}` : url;
-  const service = type == "linkedin" ? "LinkedIn" : capitalize(type);
+  const service = type == "linkedin" ? "LinkedIn" : startCase(type);
   const description = type == "email" ? "address" : "profile";
   const theme = brandingThemes[type] ?? type;
 

astro/src/components/StaffList.astro

@@ -0,0 +1,52 @@
+---
+import { getCollection, type CollectionEntry } from 'astro:content';
+import { sortBy } from "lodash-es";
+
+interface Props {
+  team: string; // TODO: declare enum;
+}
+
+const { team } = Astro.props;
+const staff: CollectionEntry<"staff">[] = sortBy(
+  await getCollection(
+    "staff", ({data}) => data.current && Object.keys(data.roles ?? {}).includes(team)
+  ),
+  // Alphabetize by first name
+  ({data}) => data.cited?.first || data.name.first,
+);
+
+import TeamVignette from "@components/TeamVignette.astro";
+---
+
+<ul class="list-inline-block text-center px-2 px-md-4">
+  {staff.map((member) => {
+    return (
+      <li class="list-inline-item staff-list-item my-2 m-md-2 w-100">
+        <div class="text-start bg-body shadow-sm rounded-1 p-2 pt-3 fs-4">
+          <TeamVignette
+            {member}
+            role={team}
+            firstNameOnly
+            highlightName
+            branded
+            showLinks
+            valign="start"
+            size="lg"
+          />
+        </div>
+      </li>
+    );
+  })}
+</ul>
+<style>
+  .staff-list-item {
+    max-width: 18rem;
+  }
+  .staff-list-item :global(.vignette-name) {
+    color: var(--bs-primary-text-emphasis);
+    margin-bottom: -0.1em;
+  }
+  .staff-list-item :global(.vignette-title) {
+    line-height: 1.1em;
+  }
+</style>

astro/src/components/TeamVignette.astro

@@ -70,7 +70,7 @@ function getLinkIcon(linkType: string) {
     phone: "bi:telephone-fill",
     facebook: "bi:facebook",
     instagram: "bi:instagram",
-    youtube: "bi:youtube",
+    youtube: "cib:youtube",
   };
   return iconMap[linkType] || "bi:link-45deg";
 }