Fix local images and em dash rendering

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);
 ---
@@ -27,7 +28,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

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}
 

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 = ({
@@ -16,11 +17,52 @@ const BlogPosts = ({
   // Get the first post as the featured post
   const featuredPost = posts[0];
   const remainingPosts = posts.slice(1);
+  const slugFor = (post: any) => post.id.replace(/\/index$/, "");
   const hrefFor = (post: any) =>
-    collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
+    collection ? `/${collection}/${slugFor(post)}/` : `/${slugFor(post)}/`;
+
+  const PostVisual = ({
+    post,
+    featured = false,
+  }: {
+    post: any;
+    featured?: boolean;
+  }) => {
+    const displayTitle = typographicText(post.data.title);
+
+    if (post.data.image) {
+      return (
+        <img
+          src={post.data.image}
+          alt={displayTitle}
+          className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
+        />
+      );
+    }
+
+    return (
+      <div className="bg-accent/70 text-accent-foreground flex aspect-video w-full items-center justify-center rounded-lg border px-6 text-center">
+        <span
+          className={
+            featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
+          }
+        >
+          {displayTitle}
+        </span>
+      </div>
+    );
+  };
+
+  if (!featuredPost) {
+    return (
+      <div className="text-muted-foreground container max-w-3xl py-16">
+        No posts yet.
+      </div>
+    );
+  }
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -35,22 +77,18 @@ const BlogPosts = ({
             <div className="flex flex-col gap-6 lg:flex-row">
               <div className="lg:w-1/2">
                 <div className="p-2 lg:p-4">
-                  <img
-                    src={featuredPost.data.image}
-                    alt={featuredPost.data.title}
-                    className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
-                  />
+                  <PostVisual post={featuredPost} featured />
                 </div>
               </div>
               <div className="flex flex-col justify-center p-4 pb-8 lg:w-1/2 lg:pr-8">
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
-                  {featuredPost.data.title}
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
+                  {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">
@@ -89,18 +127,14 @@ const BlogPosts = ({
                 href={hrefFor(post)}
               >
                 <div className="p-2">
-                  <img
-                    src={post.data.image}
-                    alt={post.data.title}
-                    className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.01]"
-                  />
+                  <PostVisual post={post} />
                 </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">

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, "—");
+}

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,11 +11,13 @@ 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,
-      link: `/${post.id}/`,
+      title: typographicText(post.data.title),
+      description: typographicText(post.data.description),
+      link: `/${post.id.replace(/\/index$/, "")}/`,
     })),
   });
 }