@hutusi/amytis 1.12.0 → 1.14.0

package/src/app/feed.atom/route.ts

@@ -1,62 +1,7 @@
-import { siteConfig } from '../../../site.config';
-import { resolveLocale } from '@/lib/i18n';
-import { getFeedItems } from '@/lib/feed-utils';
+import { generateAtomFeed } from '@/lib/feed-utils';
 
 export const dynamic = 'force-static';
 
-const escapeXml = (v: string) =>
-  v.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-   .replace(/"/g, '&quot;').replace(/'/g, '&apos;');
-
-const escapeCdata = (v: string) => v.replace(/]]>/g, ']]]]><![CDATA[>');
-
 export async function GET() {
-  const { format, content: contentMode } = siteConfig.feed;
-  if (format === 'rss') {
-    return new Response('Not Found', { status: 404 });
-  }
-
-  const baseUrl = siteConfig.baseUrl.replace(/\/+$/, '');
-  const items = getFeedItems();
-  const useFullContent = contentMode === 'full';
-  const feedUpdated = items[0]?.date.toISOString() ?? new Date().toISOString();
-
-  const entriesXml = items
-    .map((item) => {
-      const contentXml = useFullContent
-        ? `<content type="html"><![CDATA[${escapeCdata(item.content)}]]></content>\n    <summary><![CDATA[${escapeCdata(item.excerpt)}]]></summary>`
-        : `<summary><![CDATA[${escapeCdata(item.excerpt)}]]></summary>`;
-      const authorsXml = item.authors?.map((a) => `<author><name>${escapeXml(a)}</name></author>`).join('') ?? '';
-      const categoriesXml = item.tags.map((tag) => `<category term="${escapeXml(tag)}" />`).join('');
-      return `
-  <entry>
-    <title><![CDATA[${escapeCdata(item.title)}]]></title>
-    <link href="${escapeXml(item.url)}" />
-    <id>${escapeXml(item.url)}</id>
-    <published>${item.date.toISOString()}</published>
-    <updated>${item.date.toISOString()}</updated>
-    ${contentXml}
-    ${authorsXml}
-    ${categoriesXml}
-  </entry>`;
-    })
-    .join('');
-
-  const atomXml = `<?xml version="1.0" encoding="UTF-8" ?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-  <title><![CDATA[${escapeCdata(resolveLocale(siteConfig.title))}]]></title>
-  <link href="${escapeXml(baseUrl)}" />
-  <link href="${escapeXml(baseUrl)}/feed.atom" rel="self" type="application/atom+xml" />
-  <id>${escapeXml(baseUrl)}/feed.atom</id>
-  <updated>${feedUpdated}</updated>
-  <subtitle><![CDATA[${escapeCdata(resolveLocale(siteConfig.description))}]]></subtitle>
-${entriesXml}
-</feed>`;
-
-  return new Response(atomXml, {
-    headers: {
-      'Content-Type': 'application/atom+xml; charset=utf-8',
-      'Cache-Control': 'public, max-age=3600',
-    },
-  });
+  return generateAtomFeed('main', '/feed.atom');
 }

package/src/app/feed.xml/route.ts

@@ -1,69 +1,7 @@
-import { siteConfig } from '../../../site.config';
-import { resolveLocale } from '@/lib/i18n';
-import { getFeedItems } from '@/lib/feed-utils';
+import { generateRssFeed } from '@/lib/feed-utils';
 
 export const dynamic = 'force-static';
 
-const escapeXml = (v: string) =>
-  v.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-   .replace(/"/g, '&quot;').replace(/'/g, '&apos;');
-
-const escapeCdata = (v: string) => v.replace(/]]>/g, ']]]]><![CDATA[>');
-
 export async function GET() {
-  const { format, content: contentMode } = siteConfig.feed;
-  if (format === 'atom') {
-    return new Response('Not Found', { status: 404 });
-  }
-
-  const baseUrl = siteConfig.baseUrl.replace(/\/+$/, '');
-  const items = getFeedItems();
-  const useFullContent = contentMode === 'full';
-  const contentNs = useFullContent ? ' xmlns:content="http://purl.org/rss/modules/content/"' : '';
-  const siteTitle = resolveLocale(siteConfig.title);
-  const lastBuildDate = items[0]?.date.toUTCString() ?? new Date().toUTCString();
-
-  const imageXml = siteConfig.ogImage
-    ? `\n    <image>\n      <url>${escapeXml(baseUrl + siteConfig.ogImage)}</url>\n      <title>${escapeXml(siteTitle)}</title>\n      <link>${escapeXml(baseUrl)}</link>\n    </image>`
-    : '';
-
-  const rssItemsXml = items
-    .map((item) => {
-      const fullContentXml = useFullContent
-        ? `\n          <content:encoded><![CDATA[${escapeCdata(item.content)}]]></content:encoded>`
-        : '';
-      const authorsXml = item.authors?.length
-        ? item.authors.map((a) => `\n          <dc:creator><![CDATA[${escapeCdata(a)}]]></dc:creator>`).join('')
-        : '';
-      return `
-        <item>
-          <title><![CDATA[${escapeCdata(item.title)}]]></title>
-          <link>${escapeXml(item.url)}</link>
-          <guid isPermaLink="true">${escapeXml(item.url)}</guid>
-          <pubDate>${item.date.toUTCString()}</pubDate>
-          <description><![CDATA[${escapeCdata(item.excerpt)}]]></description>${fullContentXml}${authorsXml}
-          ${item.tags.map((tag) => `<category><![CDATA[${escapeCdata(tag)}]]></category>`).join('')}
-        </item>`;
-    })
-    .join('');
-
-  const rssXml = `<?xml version="1.0" encoding="UTF-8" ?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"${contentNs}>
-  <channel>
-    <title><![CDATA[${escapeCdata(siteTitle)}]]></title>
-    <link>${escapeXml(baseUrl)}</link>
-    <description><![CDATA[${escapeCdata(resolveLocale(siteConfig.description))}]]></description>
-    <language>${siteConfig.i18n.defaultLocale}</language>
-    <lastBuildDate>${lastBuildDate}</lastBuildDate>
-    <atom:link href="${escapeXml(baseUrl)}/feed.xml" rel="self" type="application/rss+xml" />${imageXml}
-    ${rssItemsXml}
-  </channel>
-</rss>`;
-
-  return new Response(rssXml, {
-    headers: {
-      'Content-Type': 'application/rss+xml; charset=utf-8',
-      'Cache-Control': 'public, max-age=3600',
-    },
-  });
+  return generateRssFeed('main', '/feed.xml');
 }

package/src/app/flows/[year]/[month]/[day]/page.tsx

@@ -88,6 +88,9 @@ export default async function FlowPage({ params }: { params: Promise<{ year: str
           {/* Header */}
           <header className="mb-8">
             <time className="text-base font-mono text-accent" data-pagefind-meta="date[content]">{flow.date}</time>
+            {flow.title !== flow.date && (
+              <h1 className="mt-2 text-xl sm:text-2xl font-serif font-bold text-heading">{flow.title}</h1>
+            )}
             {flow.tags.length > 0 && (
               <div className="mt-3 flex flex-wrap gap-2">
                 {flow.tags.map(tag => (
@@ -121,6 +124,11 @@ export default async function FlowPage({ params }: { params: Promise<{ year: str
                 <div className="text-sm font-mono text-heading group-hover:text-accent transition-colors">
                   {prev.date}
                 </div>
+                {prev.title !== prev.date && (
+                  <div className="text-sm text-muted group-hover:text-accent/80 transition-colors truncate">
+                    {prev.title}
+                  </div>
+                )}
               </Link>
             ) : <div />}
             {next ? (
@@ -132,6 +140,11 @@ export default async function FlowPage({ params }: { params: Promise<{ year: str
                 <div className="text-sm font-mono text-heading group-hover:text-accent transition-colors">
                   {next.date}
                 </div>
+                {next.title !== next.date && (
+                  <div className="text-sm text-muted group-hover:text-accent/80 transition-colors truncate">
+                    {next.title}
+                  </div>
+                )}
               </Link>
             ) : <div />}
           </nav>

package/src/app/flows/feed.atom/route.ts

@@ -0,0 +1,7 @@
+import { generateAtomFeed } from '@/lib/feed-utils';
+
+export const dynamic = 'force-static';
+
+export async function GET() {
+  return generateAtomFeed('flows', '/flows/feed.atom');
+}

package/src/app/flows/feed.xml/route.ts

@@ -0,0 +1,7 @@
+import { generateRssFeed } from '@/lib/feed-utils';
+
+export const dynamic = 'force-static';
+
+export async function GET() {
+  return generateRssFeed('flows', '/flows/feed.xml');
+}

package/src/app/page.tsx

@@ -34,7 +34,6 @@ type HomepageSection = {
   enabled?: boolean;
   weight: number;
   maxItems?: number;
-  scrollThreshold?: number;
 };
 
 export default function Home() {
@@ -97,6 +96,7 @@ export default function Home() {
     ? recentFlows.map(f => ({
         slug: f.slug,
         date: f.date,
+        title: f.title,
         excerpt: f.excerpt,
       }))
     : [];
@@ -133,7 +133,6 @@ export default function Home() {
             key="featured-series"
             allSeries={seriesItems}
             maxItems={section.maxItems ?? 6}
-            scrollThreshold={section.scrollThreshold ?? 2}
           />
         );
       case 'featured-books':

package/src/app/posts/[slug]/page.tsx

@@ -45,10 +45,6 @@ export async function generateStaticParams() {
     return (p.redirectFrom ?? []).includes(`/${basePath}/${p.slug}`);
   });
 
-  if (filtered.length === 0) return [{ slug: '_' }];
-  // Work around Next dev static-param checks for percent-encoded Unicode paths
-  // under `output: "export"` by including encoded variants only in development.
-  // Production export keeps raw segment values.
   const slugs = new Set<string>();
   for (const post of filtered) {
     slugs.add(post.slug);
@@ -56,6 +52,22 @@ export async function generateStaticParams() {
       slugs.add(encodeURIComponent(post.slug));
     }
   }
+
+  // Also include redirectFrom slugs at this basePath (e.g. /posts/old-name → /posts/new-name).
+  for (const post of posts) {
+    for (const from of post.redirectFrom ?? []) {
+      const segments = from.split('/').filter(Boolean);
+      if (segments.length !== 2 || segments[0] !== basePath) continue;
+      if (from === getPostUrl(post)) continue;
+      const fromSlug = segments[1];
+      slugs.add(fromSlug);
+      if (process.env.NODE_ENV !== 'production') {
+        slugs.add(encodeURIComponent(fromSlug));
+      }
+    }
+  }
+
+  if (slugs.size === 0) return [{ slug: '_' }];
   return Array.from(slugs).map((slug) => ({ slug }));
 }
 
@@ -63,7 +75,12 @@ export const dynamicParams = false;
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug: rawSlug } = await params;
-  const post = resolvePostFromParam(rawSlug);
+  const slug = safeDecodeParam(rawSlug);
+  const basePath = getPostsBasePath();
+  const currentPath = `/${basePath}/${slug}`;
+  const post =
+    resolvePostFromParam(rawSlug) ??
+    getAllPosts().find(p => p.redirectFrom?.includes(currentPath));
 
   if (!post) {
     return {
@@ -73,7 +90,6 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
   const siteUrl = siteConfig.baseUrl.replace(/\/+$/, '');
   const canonicalUrl = getPostUrl(post);
-  const currentPath = `/${getPostsBasePath()}/${safeDecodeParam(rawSlug)}`;
 
   // For redirect pages, return minimal metadata pointing to the canonical URL
   if (canonicalUrl !== currentPath) {
@@ -120,16 +136,19 @@ export default async function PostPage({
 }) {
   const { slug: rawSlug } = await params;
   const slug = safeDecodeParam(rawSlug);
-  const post = resolvePostFromParam(rawSlug);
+  const basePath = getPostsBasePath();
+  const currentPath = `/${basePath}/${slug}`;
+  const post =
+    resolvePostFromParam(rawSlug) ??
+    getAllPosts().find(p => p.redirectFrom?.includes(currentPath));
 
   if (!post) {
     notFound();
   }
 
   // If the canonical URL differs from the current path, render a redirect page.
-  // This handles posts moved by autoPaths or customPaths that opted in via redirectFrom.
+  // This handles posts moved by autoPaths or customPaths, or renamed within the same prefix.
   const canonicalUrl = getPostUrl(post);
-  const currentPath = `/${getPostsBasePath()}/${slug}`;
   if (canonicalUrl !== currentPath) {
     return <RedirectPage to={canonicalUrl} />;
   }

package/src/app/posts/feed.atom/route.ts

@@ -0,0 +1,9 @@
+import { generateAtomFeed } from '@/lib/feed-utils';
+import { getPostsBasePath } from '@/lib/urls';
+
+export const dynamic = 'force-static';
+
+export async function GET() {
+  const basePath = getPostsBasePath();
+  return generateAtomFeed('posts', `/${basePath}/feed.atom`);
+}

package/src/app/posts/feed.xml/route.ts

@@ -0,0 +1,9 @@
+import { generateRssFeed } from '@/lib/feed-utils';
+import { getPostsBasePath } from '@/lib/urls';
+
+export const dynamic = 'force-static';
+
+export async function GET() {
+  const basePath = getPostsBasePath();
+  return generateRssFeed('posts', `/${basePath}/feed.xml`);
+}

package/src/app/series/[slug]/page.tsx

@@ -8,14 +8,38 @@ import CoverImage from '@/components/CoverImage';
 import Link from 'next/link';
 import { t, resolveLocale } from '@/lib/i18n';
 import { getPostUrl, getPostUrlInCollection } from '@/lib/urls';
+import RedirectPage from '@/components/RedirectPage';
 
 const PAGE_SIZE = siteConfig.pagination.series;
 
+/** Returns the series whose index.mdx lists `path` in its redirectFrom array, or null. */
+function findSeriesByRedirectFrom(path: string) {
+  for (const seriesSlug of Object.keys(getAllSeries())) {
+    const data = getSeriesData(seriesSlug);
+    if (data?.redirectFrom?.includes(path)) {
+      return { slug: seriesSlug, data };
+    }
+  }
+  return null;
+}
+
 export async function generateStaticParams() {
   const allSeries = getAllSeries();
-  const slugs = Object.keys(allSeries);
-  if (slugs.length === 0) return [{ slug: '_' }];
-  return slugs.map((slug) => ({ slug }));
+  const slugs = new Set(Object.keys(allSeries));
+
+  // Also include old slugs from redirectFrom entries at /series/[old-slug].
+  for (const seriesSlug of Object.keys(allSeries)) {
+    const data = getSeriesData(seriesSlug);
+    for (const from of data?.redirectFrom ?? []) {
+      const segments = from.split('/').filter(Boolean);
+      if (segments.length !== 2 || segments[0] !== 'series') continue;
+      if (from === `/series/${seriesSlug}`) continue;
+      slugs.add(segments[1]);
+    }
+  }
+
+  if (slugs.size === 0) return [{ slug: '_' }];
+  return Array.from(slugs).map((slug) => ({ slug }));
 }
 
 export const dynamicParams = false;
@@ -23,8 +47,19 @@ export const dynamicParams = false;
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug: rawSlug } = await params;
   const slug = decodeURIComponent(rawSlug);
+  const currentPath = `/series/${slug}`;
+
+  const redirect = findSeriesByRedirectFrom(currentPath);
+  if (redirect) {
+    const siteUrl = siteConfig.baseUrl.replace(/\/+$/, '');
+    return {
+      title: redirect.data.title,
+      alternates: { canonical: `${siteUrl}/series/${redirect.slug}` },
+    };
+  }
+
   const seriesData = getSeriesData(slug);
-  
+
   if (!seriesData) {
     // If no explicit series metadata, try to infer from posts or return default
     const posts = getSeriesPosts(slug);
@@ -64,6 +99,13 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 export default async function SeriesPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug: rawSlug } = await params;
   const slug = decodeURIComponent(rawSlug);
+  const currentPath = `/series/${slug}`;
+
+  const redirect = findSeriesByRedirectFrom(currentPath);
+  if (redirect) {
+    return <RedirectPage to={`/series/${redirect.slug}`} />;
+  }
+
   const seriesData = getSeriesData(slug);
   const isCollection = seriesData?.type === 'collection';
   const allPosts = isCollection ? getCollectionPosts(slug) : getSeriesPosts(slug);

package/src/components/CuratedSeriesSection.tsx

@@ -6,7 +6,7 @@ import HorizontalScroll from './HorizontalScroll';
 import CoverImage from './CoverImage';
 import { useLanguage } from './LanguageProvider';
 import { shuffle, shuffleSeeded } from '@/lib/shuffle';
-import { getPostUrl } from '@/lib/urls';
+import { getPostUrl, getSeriesListUrl } from '@/lib/urls';
 
 export interface SeriesItem {
   name: string;
@@ -21,10 +21,9 @@ export interface SeriesItem {
 interface CuratedSeriesSectionProps {
   allSeries: SeriesItem[];
   maxItems: number;
-  scrollThreshold: number;
 }
 
-export default function CuratedSeriesSection({ allSeries, maxItems, scrollThreshold }: CuratedSeriesSectionProps) {
+export default function CuratedSeriesSection({ allSeries, maxItems }: CuratedSeriesSectionProps) {
   const { t } = useLanguage();
   // Use a daily seed so SSR and client hydration agree on the initial order,
   // preventing a visible reshuffle flash on page load.
@@ -47,7 +46,7 @@ export default function CuratedSeriesSection({ allSeries, maxItems, scrollThresh
           {allSeries.length > maxItems && (
             <button
               onClick={handleShuffle}
-              className="text-sm text-muted hover:text-accent transition-colors focus:outline-none"
+              className="rounded-sm text-sm text-muted transition-colors hover:text-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2"
               aria-label={t('shuffle_series')}
               title={t('shuffle_series')}
             >
@@ -56,21 +55,18 @@ export default function CuratedSeriesSection({ allSeries, maxItems, scrollThresh
               </svg>
             </button>
           )}
-          <Link href="/series" className="text-sm text-muted hover:text-accent transition-colors no-underline">
+          <Link href={getSeriesListUrl()} className="text-sm text-muted hover:text-accent transition-colors no-underline">
             {t('all_series')} →
           </Link>
         </div>
       </div>
-      <HorizontalScroll
-        itemCount={displayed.length}
-        scrollThreshold={scrollThreshold}
-      >
-        <div className={`flex gap-8 ${displayed.length > scrollThreshold ? 'pb-4' : ''}`}>
+      <HorizontalScroll>
+        <div className={`flex gap-8 ${displayed.length > 1 ? 'pb-4' : ''}`}>
           {displayed.map((series, idx) => (
             <div
               key={series.name}
               className={`card-base group flex flex-col p-0 overflow-hidden snap-start ${
-                displayed.length > scrollThreshold
+                displayed.length > 1
                   ? 'w-[85vw] md:w-[calc(50%-1rem)] flex-shrink-0'
                   : 'flex-1 md:max-w-[calc(50%-1rem)]'
               }`}

package/src/components/FeaturedStoriesSection.tsx

@@ -80,7 +80,7 @@ export default function FeaturedStoriesSection({ allFeatured, maxItems }: Featur
         {canShuffle && (
           <button
             onClick={handleShuffle}
-            className="text-sm text-muted hover:text-accent transition-colors focus:outline-none"
+            className="rounded-sm text-sm text-muted transition-colors hover:text-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2"
             aria-label={t('shuffle_posts')}
             title={t('shuffle_posts')}
           >

package/src/components/FlowCalendarSidebar.tsx

@@ -79,7 +79,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
   }, [firstDay, daysInMonth]);
 
   return (
-    <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)]">
+    <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] select-none">
       {breadcrumb && <div className="mb-4">{breadcrumb}</div>}
       <div className="border border-muted/20 rounded-lg p-4">
         {/* Month navigation */}

package/src/components/FlowContent.tsx

@@ -9,7 +9,7 @@ import Pagination from '@/components/Pagination';
 interface FlowItem {
   slug: string;
   date: string;
-  title: string;
+  title?: string;
   excerpt: string;
   tags: string[];
 }
@@ -102,6 +102,7 @@ export default function FlowContent({ flows, allFlows, entryDates, tags, current
               <FlowTimelineEntry
                 key={flow.slug}
                 date={flow.date}
+                title={flow.title}
                 excerpt={flow.excerpt}
                 tags={flow.tags}
                 slug={flow.slug}

package/src/components/FlowTimelineEntry.tsx

@@ -3,12 +3,15 @@ import Tag from './Tag';
 
 interface FlowTimelineEntryProps {
   date: string;
+  title?: string;
   excerpt: string;
   tags: string[];
   slug: string;
 }
 
-export default function FlowTimelineEntry({ date, excerpt, tags, slug }: FlowTimelineEntryProps) {
+export default function FlowTimelineEntry({ date, title, excerpt, tags, slug }: FlowTimelineEntryProps) {
+  const hasExplicitTitle = title && title !== date;
+
   return (
     <article className="relative pl-6 pb-8 border-l-2 border-muted/20 last:pb-0">
       {/* Timeline dot */}
@@ -16,6 +19,9 @@ export default function FlowTimelineEntry({ date, excerpt, tags, slug }: FlowTim
 
       <Link href={`/flows/${slug}`} className="no-underline group">
         <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{date}</time>
+        {hasExplicitTitle && (
+          <h3 className="mt-1 text-base font-semibold text-heading group-hover:text-accent transition-colors">{title}</h3>
+        )}
       </Link>
       {excerpt && (
         <p className="mt-1.5 text-sm text-muted leading-relaxed line-clamp-3">{excerpt}</p>

package/src/components/Footer.tsx

@@ -11,12 +11,12 @@ export default function Footer() {
   const { t, language } = useLanguage();
   
   return (
-    <footer className="bg-muted/5 border-t border-muted/10 mt-auto">
+    <footer className="bg-muted/5 border-t border-muted/10 mt-auto select-none">
       <div className="max-w-6xl mx-auto px-6 py-10 lg:py-16">
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 mb-10 lg:mb-12">
           {/* Brand */}
           <div className="col-span-2 lg:col-span-2">
-            <Link href="/" className="flex items-center gap-2 mb-4 group no-underline">
+            <Link href="/" className="flex items-center justify-center lg:justify-start gap-2 mb-4 group no-underline">
               <svg
                 viewBox="0 0 32 32"
                 className="w-6 h-6 text-accent group-hover:rotate-12 transition-transform duration-300"
@@ -34,13 +34,13 @@ export default function Footer() {
               </svg>
               <span className="font-serif font-bold text-lg text-heading">{resolveLocaleValue(siteConfig.title, language)}</span>
             </Link>
-            <p className="text-sm text-muted leading-relaxed max-w-sm">
+            <p className="text-sm text-muted leading-relaxed max-w-sm mx-auto text-center lg:mx-0 lg:text-left">
               {resolveLocaleValue(siteConfig.description, language)}
             </p>
           </div>
           
           {/* Navigation */}
-          <div>
+          <div className="text-center lg:text-left">
             <h4 className="font-sans font-bold text-xs uppercase tracking-widest text-muted/80 mb-6">{t('explore')}</h4>
             <ul className="space-y-3 text-sm">
               {[...(siteConfig.footer?.explore ?? [])].sort((a, b) => a.weight - b.weight).map((item) => {
@@ -59,7 +59,7 @@ export default function Footer() {
           </div>
 
           {/* Connect */}
-          <div>
+          <div className="text-center lg:text-left">
             <h4 className="font-sans font-bold text-xs uppercase tracking-widest text-muted/80 mb-6">{t('connect')}</h4>
             <ul className="space-y-3 text-sm">
               {[...(siteConfig.footer?.connect ?? [])].sort((a, b) => a.weight - b.weight).map((item) => {
@@ -67,7 +67,7 @@ export default function Footer() {
                 const key = item.name.toLowerCase() as TranslationKey;
                 const translated = t(key);
                 const label = translated !== key ? translated : item.name;
-                const className = "text-foreground/80 hover:text-accent transition-colors no-underline flex items-center gap-2";
+                const className = "text-foreground/80 hover:text-accent transition-colors no-underline flex items-center justify-center lg:justify-start gap-2";
                 return (
                   <li key={item.url}>
                     {isExternal ? (

package/src/components/HorizontalScroll.tsx

@@ -4,15 +4,11 @@ import { useRef, useState, useEffect, ReactNode, useCallback } from 'react';
 
 interface HorizontalScrollProps {
   children: ReactNode;
-  itemCount: number;
-  scrollThreshold: number;
   className?: string;
 }
 
 export default function HorizontalScroll({
   children,
-  itemCount,
-  scrollThreshold,
   className = ''
 }: HorizontalScrollProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -20,7 +16,7 @@ export default function HorizontalScroll({
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
 
-  const shouldShowArrows = itemCount > scrollThreshold;
+  const hasOverflow = canScrollLeft || canScrollRight;
 
   const updateScrollState = useCallback(() => {
     if (!scrollRef.current) return;
@@ -54,7 +50,6 @@ export default function HorizontalScroll({
     });
   }, []);
 
-  // Handle keyboard navigation
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'ArrowLeft' && canScrollLeft) {
       e.preventDefault();
@@ -65,10 +60,6 @@ export default function HorizontalScroll({
     }
   }, [canScrollLeft, canScrollRight, scroll]);
 
-  if (!shouldShowArrows) {
-    return <div className={className}>{children}</div>;
-  }
-
   return (
     <div
       ref={containerRef}
@@ -78,10 +69,10 @@ export default function HorizontalScroll({
       role="region"
       aria-label="Scrollable content"
     >
-      {/* Left Arrow - positioned outside content in margin area */}
+      {/* Left Arrow */}
       <button
         onClick={() => scroll('left')}
-        className={`absolute -left-4 lg:-left-14 top-1/2 -translate-y-1/2 z-20 p-2 lg:p-3 bg-background border border-muted/20 rounded-full shadow-lg transition-all duration-200 hidden md:flex items-center justify-center ${
+        className={`absolute -left-4 lg:-left-14 top-1/2 -translate-y-1/2 z-20 p-2 lg:p-3 bg-background border border-muted/20 rounded-full shadow-lg transition-all duration-200 ${hasOverflow ? 'hidden md:flex' : 'hidden'} items-center justify-center ${
           canScrollLeft
             ? 'text-muted hover:text-accent hover:border-accent/40 hover:shadow-accent/10 focus:outline-none focus:ring-2 focus:ring-accent/50'
             : 'text-muted/30 cursor-not-allowed opacity-50'
@@ -104,10 +95,10 @@ export default function HorizontalScroll({
         {children}
       </div>
 
-      {/* Right Arrow - positioned outside content in margin area */}
+      {/* Right Arrow */}
       <button
         onClick={() => scroll('right')}
-        className={`absolute -right-4 lg:-right-14 top-1/2 -translate-y-1/2 z-20 p-2 lg:p-3 bg-background border border-muted/20 rounded-full shadow-lg transition-all duration-200 hidden md:flex items-center justify-center ${
+        className={`absolute -right-4 lg:-right-14 top-1/2 -translate-y-1/2 z-20 p-2 lg:p-3 bg-background border border-muted/20 rounded-full shadow-lg transition-all duration-200 ${hasOverflow ? 'hidden md:flex' : 'hidden'} items-center justify-center ${
           canScrollRight
             ? 'text-muted hover:text-accent hover:border-accent/40 hover:shadow-accent/10 focus:outline-none focus:ring-2 focus:ring-accent/50'
             : 'text-muted/30 cursor-not-allowed opacity-50'

package/src/components/MarkdownRenderer.test.tsx

@@ -41,4 +41,10 @@ describe("MarkdownRenderer", () => {
     expect(html).toContain("not-prose w-full min-w-0 max-w-full");
     expect(html).toContain("overflow-x-auto");
   });
+
+  test("wraps content in a background container for copy-paste fidelity", () => {
+    const content = "Hello world";
+    const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+    expect(html).toMatch(/class="[^"]*\bbg-background\b[^"]*"/);
+  });
 });