@hutusi/amytis 1.13.0 → 1.14.0

package/content/flows/2026/03/05.md

@@ -1,4 +1,5 @@
 ---
+title: 'JSDoc type comments'
 tags: ["typescript", "tooling"]
 ---
 

package/content/flows/2026/03/07.md

@@ -2,6 +2,8 @@
 tags: ["ai", "workflow"]
 ---
 
+# Using Claude Code
+
 Been using Claude Code for a week now as a daily coding assistant. A few observations so far.
 
 It is most useful for tasks where the shape of the solution is clear but the execution is tedious — refactoring, writing tests, tracking down why a CSS rule isn't applying. For genuinely novel design problems, talking through the approach matters more than generating code.

package/content/series/modern-web-dev/index.mdx

@@ -5,9 +5,11 @@ excerpt: "A curated path through modern web development: JavaScript fundamentals
 date: "2026-03-01"
 featured: true
 items:
-  - post: asynchronous-javascript
-  - post: understanding-react-hooks
+  - post: posts/asynchronous-javascript
+  - post: posts/understanding-react-hooks
   - series: nextjs-deep-dive
+  - post: markdown-showcase/中文测试文章
+  - post: digital-garden/02-architecture
 ---
 
 This collection assembles the essential reading for anyone building modern web applications. Start with the JavaScript fundamentals that underpin everything, move into React patterns, then go deep on Next.js.

package/docs/ARCHITECTURE.md

@@ -57,7 +57,14 @@ src/app/
   authors/[author]/page.tsx
   archive/page.tsx
   graph/page.tsx
-  feed.xml/route.ts
+  feed.xml/route.ts                 # Main curated RSS feed
+  feed.atom/route.ts                # Main curated Atom feed
+  all.xml/route.ts                  # Firehose RSS feed
+  all.atom/route.ts                 # Firehose Atom feed
+  posts/feed.xml/route.ts           # Posts-only RSS feed
+  posts/feed.atom/route.ts          # Posts-only Atom feed
+  flows/feed.xml/route.ts           # Flows-only RSS feed
+  flows/feed.atom/route.ts          # Flows-only Atom feed
   search.json/route.ts
   sitemap.ts
   [slug]/page.tsx                   # Static pages + custom series listing path

package/docs/DIGITAL_GARDEN.md

@@ -37,12 +37,33 @@ The `/graph` route visualizes your entire digital garden as an interactive netwo
 - **Edges**: Represent wiki-links connecting them.
 - **Interaction**: Click a node to navigate to that page.
 
-### 5. Flows (`/flows`)
+### 5. Collections (`/series`)
+While a "Series" is typically a linear progression of posts (e.g., Part 1, Part 2), a **Collection** allows you to manually curate an arbitrary list of posts and other series into a single grouped page.
+
+To create a collection, set `type: collection` in a series index file:
+
+- **Location:** `content/series/[collection-slug]/index.mdx`
+- **Frontmatter:**
+  ```yaml
+  ---
+  title: "Modern Web Development"
+  type: collection
+  items:
+    - post: posts/asynchronous-javascript  # Namespaced reference to a standalone post
+    - post: ai-nexus-weekly/week-11        # Namespaced reference to a post inside another series
+    - post: understanding-react-hooks      # Fallback reference (searches all posts by slug)
+    - series: nextjs-deep-dive             # Embeds all posts from another series
+  ---
+  ```
+Using a namespace (`folder/slug`) in the `post` definition prevents slug collisions and explicitly targets the exact file location.
+
+### 6. Flows (`/flows`)
 Flows are a stream-style collection of daily notes, micro-blogging, or imported chat logs. They are ideal for quick thoughts that don't necessarily warrant a full blog post.
 
 - **Location:** `content/flows/YYYY/MM/DD.mdx`
 - **Navigation:** Grouped by date in a timeline view.
 - **Importing:** Use `bun run new-flow-from-chat` to bring in external conversations.
+- **Optional Title:** Set `title` in frontmatter or use an `# Heading` in the content to display a title alongside the date.
 
 ## How to Use
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hutusi/amytis",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "A high-performance digital garden and blog engine with Next.js 16 and Tailwind CSS v4",
   "repository": {
     "type": "git",
@@ -48,16 +48,16 @@
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "image-size": "^2.0.2",
-    "katex": "^0.16.33",
-    "mermaid": "^11.12.3",
-    "next": "16.1.6",
+    "katex": "^0.16.42",
+    "mermaid": "^11.13.0",
+    "next": "16.2.1",
     "next-image-export-optimizer": "^1.20.1",
     "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-icons": "^5.5.0",
+    "react-icons": "^5.6.0",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^16.1.0",
+    "react-syntax-highlighter": "^16.1.1",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
@@ -72,22 +72,22 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/bun": "^1.3.9",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/bun": "^1.3.11",
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/image-size": "^0.8.0",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^24.10.13",
+    "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "16.1.6",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "16.2.1",
     "pagefind": "^1.4.0",
     "pdf-to-img": "^5.0.0",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3"
   },
   "ignoreScripts": [

package/scripts/new-flow.ts

@@ -33,6 +33,7 @@ if (!fs.existsSync(dirPath)) {
 }
 
 const content = `---
+# title: ""
 tags: []
 ---
 

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

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

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

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

package/src/app/archive/page.tsx

@@ -128,12 +128,12 @@ export default function ArchivePage() {
                               <li key={post.slug} className="group">
                                 <Link href={getPostUrl(post)} className="block no-underline">
                                   <div className="flex flex-col sm:flex-row sm:items-baseline justify-between gap-2 sm:gap-6">
-                                    <div className="flex items-baseline gap-6">
+                                    <div className="flex items-baseline gap-6 min-w-0 flex-1">
                                       <span className="font-mono text-base text-muted shrink-0 w-8">
                                         {day}
                                       </span>
-                                      <div className="flex items-baseline gap-2">
-                                        <h4 className="text-xl font-serif font-medium text-heading/80 group-hover:text-accent transition-colors duration-200">
+                                      <div className="flex items-baseline gap-2 min-w-0 flex-1">
+                                        <h4 className="text-xl font-serif font-medium text-heading/80 group-hover:text-accent transition-colors duration-200 truncate">
                                           {post.title}
                                         </h4>
                                         {post.series && (
@@ -147,7 +147,10 @@ export default function ArchivePage() {
                                       </div>
                                     </div>
                                     {showAuthors && post.authors.length > 0 && (
-                                      <span className="text-sm font-sans italic text-muted/60 shrink-0 hidden sm:block">
+                                      <span 
+                                        title={post.authors.join(', ')}
+                                        className="text-sm font-sans italic text-muted/60 hidden sm:block max-w-[12rem] md:max-w-[16rem] lg:max-w-[20rem] truncate text-right shrink-0"
+                                      >
                                         {post.authors.join(', ')}
                                       </span>
                                     )}

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

@@ -96,6 +96,7 @@ export default function Home() {
     ? recentFlows.map(f => ({
         slug: f.slug,
         date: f.date,
+        title: f.title,
         excerpt: f.excerpt,
       }))
     : [];

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/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,7 +11,7 @@ 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 */}

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[^"]*"/);
+  });
 });

package/src/components/MarkdownRenderer.tsx

@@ -164,22 +164,24 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
   return (
     <>
     {latex && <KatexStyles />}
-    <div className="prose prose-lg max-w-none min-w-0 overflow-x-hidden text-foreground
-          prose-headings:font-serif prose-headings:text-heading 
-          prose-p:text-foreground prose-p:leading-loose
-          prose-strong:text-heading prose-strong:font-semibold
-          prose-code:bg-muted/15 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:border prose-code:border-muted/20 prose-code:text-[0.9em] prose-code:font-medium
-          prose-code:before:content-none prose-code:after:content-none
-          prose-blockquote:italic
-          prose-th:text-heading prose-td:text-foreground
-          dark:prose-invert">
-      <ReactMarkdown
-        remarkPlugins={remarkPlugins}
-        rehypePlugins={rehypePlugins}
-        components={allComponents}
-      >
-        {content}
-      </ReactMarkdown>
+    <div className="bg-background"> {/* Explicit background for better copy-paste fidelity */}
+      <div className="prose prose-lg max-w-none min-w-0 overflow-x-hidden text-foreground
+            prose-headings:font-serif prose-headings:text-heading 
+            prose-p:text-foreground prose-p:leading-loose
+            prose-strong:text-heading prose-strong:font-semibold
+            prose-code:bg-muted/15 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:border prose-code:border-muted/20 prose-code:text-[0.9em] prose-code:font-medium
+            prose-code:before:content-none prose-code:after:content-none
+            prose-blockquote:italic
+            prose-th:text-heading prose-td:text-foreground
+            dark:prose-invert">
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={allComponents}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
     </div>
     </>
   );

package/src/components/Navbar.tsx

@@ -91,7 +91,7 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
   }, [isMenuOpen]);
 
   return (
-    <nav className={`fixed top-0 left-0 w-full z-50 border-b transition-all duration-300 ${
+    <nav className={`fixed top-0 left-0 w-full z-50 border-b transition-all duration-300 select-none ${
       isScrolled
         ? 'border-muted/10 bg-background/90 backdrop-blur-md shadow-sm'
         : 'border-transparent bg-transparent'

package/src/components/PostSidebar.tsx

@@ -73,7 +73,7 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, collection
     <aside
       ref={sidebarRef}
       data-testid="post-sidebar"
-      className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin"
+      className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin select-none"
     >
       {/* TOC — always at top */}
       <TocPanel

package/src/components/RecentNotesSection.tsx

@@ -6,6 +6,7 @@ import { useLanguage } from './LanguageProvider';
 export interface RecentNoteItem {
   slug: string;
   date: string;
+  title?: string;
   excerpt: string;
 }
 
@@ -36,6 +37,9 @@ export default function RecentNotesSection({ notes }: RecentNotesSectionProps) {
             <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
             <Link href={`/flows/${note.slug}`} className="no-underline group">
               <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{note.date}</time>
+              {note.title && note.title !== note.date && (
+                <h3 className="mt-0.5 text-sm font-semibold text-heading group-hover:text-accent transition-colors">{note.title}</h3>
+              )}
             </Link>
             {note.excerpt && (
               <p className="mt-1.5 text-sm text-muted line-clamp-2">{note.excerpt}</p>