Fix local images and em dash rendering

sites/art/astro.config.mjs

@@ -12,6 +12,7 @@ import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
 import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
 import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
 const remarkPlugins = [
@@ -19,6 +20,7 @@ const remarkPlugins = [
   remarkInlineFootnotes,
   remarkCodeFenceLanguages,
   remarkMath,
+  remarkTypography,
   remarkCallouts,
 ];
 const rehypePlugins = [rehypeKatex];

sites/art/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/art/src/components/sections/blog-post.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -18,6 +19,7 @@ const BlogPost = ({
   children: ReactNode;
 }) => {
   const { title, image, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
@@ -30,12 +32,12 @@ const BlogPost = ({
             </time>
             <span>{readingTime} min read</span>
           </div>
-          <h1 className="blog-post-title">{title}</h1>
+          <h1 className="blog-post-title">{displayTitle}</h1>
         </header>
 
         {image ? (
           <figure className="blog-post-hero-image">
-            <img src={image} alt={title} />
+            <img src={image} alt={displayTitle} />
           </figure>
         ) : null}
 

sites/art/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/art/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/art/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/art/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}

sites/poetry/astro.config.mjs

@@ -2,6 +2,7 @@
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import sitemap from "@astrojs/sitemap";
 
@@ -9,9 +10,19 @@ import react from "@astrojs/react";
 // @ts-ignore - TailwindCSS v4 Vite plugin has type compatibility issues with Astro
 import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
+import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
+import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
-const remarkPlugins = [remarkMath, remarkCallouts];
+const remarkPlugins = [
+  remarkGfm,
+  remarkInlineFootnotes,
+  remarkCodeFenceLanguages,
+  remarkMath,
+  remarkTypography,
+  remarkCallouts,
+];
 const rehypePlugins = [rehypeKatex];
 
 // https://astro.build/config

sites/poetry/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/poetry/src/components/sections/blog-post.tsx

@@ -1,4 +1,5 @@
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -17,12 +18,13 @@ const BlogPost = ({
   children: React.ReactNode;
 }) => {
   const { title, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
     <section className="container px-6 py-2 md:py-6">
       <article className="poetry-post mx-auto">
-        <h1 className="poetry-post-title">{title}</h1>
+        <h1 className="poetry-post-title">{displayTitle}</h1>
         <div className="poetry-post-meta">
           <time dateTime={pubDate.toISOString()}>
             {format(pubDate, "MMMM d, yyyy")}

sites/poetry/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/poetry/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/poetry/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/poetry/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}

sites/puzzles/astro.config.mjs

@@ -12,6 +12,7 @@ import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
 import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
 import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
 const remarkPlugins = [
@@ -19,6 +20,7 @@ const remarkPlugins = [
   remarkInlineFootnotes,
   remarkCodeFenceLanguages,
   remarkMath,
+  remarkTypography,
   remarkCallouts,
 ];
 const rehypePlugins = [rehypeKatex];

sites/puzzles/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/puzzles/src/components/sections/blog-post.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -18,6 +19,7 @@ const BlogPost = ({
   children: ReactNode;
 }) => {
   const { title, image, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
@@ -30,12 +32,12 @@ const BlogPost = ({
             </time>
             <span>{readingTime} min read</span>
           </div>
-          <h1 className="blog-post-title">{title}</h1>
+          <h1 className="blog-post-title">{displayTitle}</h1>
         </header>
 
         {image ? (
           <figure className="blog-post-hero-image">
-            <img src={image} alt={title} />
+            <img src={image} alt={displayTitle} />
           </figure>
         ) : null}
 

sites/puzzles/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/puzzles/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/puzzles/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/puzzles/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}

sites/reflections/astro.config.mjs

@@ -12,6 +12,7 @@ import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
 import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
 import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
 const remarkPlugins = [
@@ -19,6 +20,7 @@ const remarkPlugins = [
   remarkInlineFootnotes,
   remarkCodeFenceLanguages,
   remarkMath,
+  remarkTypography,
   remarkCallouts,
 ];
 const rehypePlugins = [rehypeKatex];

sites/reflections/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/reflections/src/components/sections/blog-post.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -18,6 +19,7 @@ const BlogPost = ({
   children: ReactNode;
 }) => {
   const { title, image, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
@@ -30,12 +32,12 @@ const BlogPost = ({
             </time>
             <span>{readingTime} min read</span>
           </div>
-          <h1 className="blog-post-title">{title}</h1>
+          <h1 className="blog-post-title">{displayTitle}</h1>
         </header>
 
         {image ? (
           <figure className="blog-post-hero-image">
-            <img src={image} alt={title} />
+            <img src={image} alt={displayTitle} />
           </figure>
         ) : null}
 

sites/reflections/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/reflections/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/reflections/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/reflections/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}

sites/research/astro.config.mjs

@@ -12,6 +12,7 @@ import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
 import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
 import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
 const remarkPlugins = [
@@ -19,6 +20,7 @@ const remarkPlugins = [
   remarkInlineFootnotes,
   remarkCodeFenceLanguages,
   remarkMath,
+  remarkTypography,
   remarkCallouts,
 ];
 const rehypePlugins = [rehypeKatex];

sites/research/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/research/src/components/sections/blog-post.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -18,6 +19,7 @@ const BlogPost = ({
   children: ReactNode;
 }) => {
   const { title, image, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
@@ -30,12 +32,12 @@ const BlogPost = ({
             </time>
             <span>{readingTime} min read</span>
           </div>
-          <h1 className="blog-post-title">{title}</h1>
+          <h1 className="blog-post-title">{displayTitle}</h1>
         </header>
 
         {image ? (
           <figure className="blog-post-hero-image">
-            <img src={image} alt={title} />
+            <img src={image} alt={displayTitle} />
           </figure>
         ) : null}
 

sites/research/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/research/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/research/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/research/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}

sites/reviews/astro.config.mjs

@@ -12,6 +12,7 @@ import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
 import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
 import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
 const remarkPlugins = [
@@ -19,6 +20,7 @@ const remarkPlugins = [
   remarkInlineFootnotes,
   remarkCodeFenceLanguages,
   remarkMath,
+  remarkTypography,
   remarkCallouts,
 ];
 const rehypePlugins = [rehypeKatex];

sites/reviews/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/reviews/src/components/sections/blog-post.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -18,6 +19,7 @@ const BlogPost = ({
   children: ReactNode;
 }) => {
   const { title, image, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
@@ -30,12 +32,12 @@ const BlogPost = ({
             </time>
             <span>{readingTime} min read</span>
           </div>
-          <h1 className="blog-post-title">{title}</h1>
+          <h1 className="blog-post-title">{displayTitle}</h1>
         </header>
 
         {image ? (
           <figure className="blog-post-hero-image">
-            <img src={image} alt={title} />
+            <img src={image} alt={displayTitle} />
           </figure>
         ) : null}
 

sites/reviews/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/reviews/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/reviews/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/reviews/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}

sites/vibes/astro.config.mjs

@@ -12,6 +12,7 @@ import tailwindcss from "@tailwindcss/vite";
 import remarkCallouts from "./src/remark/callouts.mjs";
 import remarkCodeFenceLanguages from "./src/remark/code-fence-languages.mjs";
 import remarkInlineFootnotes from "./src/remark/inline-footnotes.mjs";
+import remarkTypography from "./src/remark/typography.mjs";
 import { ACTIVE_BLOG_SITE } from "./src/blog-sites.js";
 
 const remarkPlugins = [
@@ -19,6 +20,7 @@ const remarkPlugins = [
   remarkInlineFootnotes,
   remarkCodeFenceLanguages,
   remarkMath,
+  remarkTypography,
   remarkCallouts,
 ];
 const rehypePlugins = [rehypeKatex];

sites/vibes/src/components/BaseHead.astro

@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import { SITE_TITLE, SITE_METADATA } from '../consts';
+import { typographicText } from '@/lib/typography';
 
 interface Props {
 	title: string;
@@ -13,8 +14,8 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
-const finalTitle = title || SITE_METADATA.title.default;
-const finalDescription = description || SITE_METADATA.description;
+const finalTitle = typographicText(title || SITE_METADATA.title.default);
+const finalDescription = typographicText(description || SITE_METADATA.description);
 const finalImage = image || SITE_METADATA.openGraph.images[0].url;
 const imageURL = new URL(finalImage, Astro.url);
 ---

sites/vibes/src/components/sections/blog-post.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { format } from "date-fns";
+import { typographicText } from "@/lib/typography";
 
 const getReadingTime = (body: string | undefined) => {
   const words = (body ?? "")
@@ -18,6 +19,7 @@ const BlogPost = ({
   children: ReactNode;
 }) => {
   const { title, image, pubDate } = post.data;
+  const displayTitle = typographicText(title);
   const readingTime = getReadingTime(post.body);
 
   return (
@@ -30,12 +32,12 @@ const BlogPost = ({
             </time>
             <span>{readingTime} min read</span>
           </div>
-          <h1 className="blog-post-title">{title}</h1>
+          <h1 className="blog-post-title">{displayTitle}</h1>
         </header>
 
         {image ? (
           <figure className="blog-post-hero-image">
-            <img src={image} alt={title} />
+            <img src={image} alt={displayTitle} />
           </figure>
         ) : null}
 

sites/vibes/src/components/sections/blog-posts.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
+import { typographicText } from "@/lib/typography";
 import { PlusSigns } from "../icons/plus-signs";
 
 const BlogPosts = ({
@@ -27,11 +28,13 @@ const BlogPosts = ({
     post: any;
     featured?: boolean;
   }) => {
+    const displayTitle = typographicText(post.data.title);
+
     if (post.data.image) {
       return (
         <img
           src={post.data.image}
-          alt={post.data.title}
+          alt={displayTitle}
           className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
         />
       );
@@ -44,7 +47,7 @@ const BlogPosts = ({
             featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
           }
         >
-          {post.data.title}
+          {displayTitle}
         </span>
       </div>
     );
@@ -82,10 +85,10 @@ const BlogPosts = ({
                   Featured Post
                 </Badge>
                 <h2 className="blog-card-title-featured mb-3 group-hover:underline">
-                  {featuredPost.data.title}
+                  {typographicText(featuredPost.data.title)}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
-                  {featuredPost.data.description}
+                  {typographicText(featuredPost.data.description)}
                 </p>
 
                 <div className="mb-6 flex gap-4">
@@ -128,10 +131,10 @@ const BlogPosts = ({
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">
-                    {post.data.title}
+                    {typographicText(post.data.title)}
                   </h2>
                   <p className="text-muted-foreground line-clamp-2 text-sm">
-                    {post.data.description}
+                    {typographicText(post.data.description)}
                   </p>
 
                   <div className="text-muted-foreground mt-3 flex items-center gap-3 text-xs">

sites/vibes/src/content/vibes/building-interactives/index.md

@@ -397,22 +397,17 @@ For visual clarity we also follow up with the following suggestion.
 > for smaller ones)?
 
 
-<figure id="fig:003">
-<figure>
-<img src="image003-a.png" />
-<figcaption>The initial configuration</figcaption>
-</figure>
-<figure>
-<img src="image003-b.png" />
-<figcaption>An example where the current cost is worse than the optimal
-cost.</figcaption>
-</figure>
-<figure>
-<img src="image003-c.png" />
-<figcaption>An example where the current and optimal costs are the
-same.</figcaption>
-</figure>
-</figure>
+![The initial configuration](image003-a.png)
+
+_The initial configuration_
+
+![An example where the current cost is worse than the optimal cost.](image003-b.png)
+
+_An example where the current cost is worse than the optimal cost._
+
+![An example where the current and optimal costs are the same.](image003-c.png)
+
+_An example where the current and optimal costs are the same._
 
 The current version of this implementation is [here](https://filestorage2.netlify.app/),
 and it's still a little quirky in terms of the first couple of times you drag the slider,

sites/vibes/src/lib/typography.ts

@@ -0,0 +1,5 @@
+const EM_DASH_PATTERN = /---/g;
+
+export function typographicText(value: string | null | undefined) {
+  return (value ?? "").replace(EM_DASH_PATTERN, "—");
+}

sites/vibes/src/pages/rss.xml.js

@@ -2,6 +2,7 @@ import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { ACTIVE_BLOG_SITE } from "../blog-sites.js";
+import { typographicText } from "@/lib/typography";
 
 export async function GET(context) {
   const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
@@ -10,10 +11,12 @@ export async function GET(context) {
 
   return rss({
     title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    description: typographicText(SITE_DESCRIPTION),
     site: context.site,
     items: posts.map((post) => ({
       ...post.data,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
       link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });

sites/vibes/src/remark/typography.mjs

@@ -0,0 +1,22 @@
+const EM_DASH_PATTERN = /---/g;
+
+function visitTextNodes(node) {
+  if (!node || typeof node !== "object") return;
+
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = node.value.replace(EM_DASH_PATTERN, "—");
+    return;
+  }
+
+  if (!Array.isArray(node.children)) return;
+
+  for (const child of node.children) {
+    visitTextNodes(child);
+  }
+}
+
+export default function remarkTypography() {
+  return (tree) => {
+    visitTextNodes(tree);
+  };
+}