@hutusi/amytis 1.7.0 → 1.8.0

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

@@ -0,0 +1,128 @@
+import { getAllNotes, getNoteBySlug, buildSlugRegistry, getBacklinks, getAdjacentNotes } from '@/lib/markdown';
+import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+import { siteConfig } from '../../../../site.config';
+import { t, resolveLocale } from '@/lib/i18n';
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+import NoteSidebar from '@/components/NoteSidebar';
+import Tag from '@/components/Tag';
+import Link from 'next/link';
+
+export function generateStaticParams() {
+  const notes = getAllNotes();
+  // Return a placeholder when empty so Next.js static export doesn't error on the dynamic route
+  if (notes.length === 0) return [{ slug: '_empty' }];
+  return notes.map(note => ({ slug: note.slug }));
+}
+
+export const dynamicParams = false;
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  const note = getNoteBySlug(slug);
+  if (!note) return { title: 'Not Found' };
+  return {
+    title: `${note.title} | ${resolveLocale(siteConfig.title)}`,
+    description: note.excerpt,
+    openGraph: {
+      title: note.title,
+      description: note.excerpt,
+      type: 'article',
+      publishedTime: note.date,
+      siteName: resolveLocale(siteConfig.title),
+    },
+  };
+}
+
+export default async function NotePage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const note = getNoteBySlug(slug);
+  if (!note) notFound();
+
+  const slugRegistry = buildSlugRegistry();
+  const backlinks = getBacklinks(slug);
+  const { prev, next } = getAdjacentNotes(slug);
+
+  const showToc = note.toc !== false && note.headings.length > 0;
+  const visibleBacklinks = note.backlinks !== false ? backlinks : [];
+  const showSidebar = showToc || visibleBacklinks.length > 0;
+
+  const breadcrumb = (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-sm text-muted">
+      <Link href="/notes" className="hover:text-accent no-underline">
+        {t('notes')}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <span className="text-foreground truncate">{note.title}</span>
+    </nav>
+  );
+
+  return (
+    <div className="layout-main">
+      {!showSidebar && <div className="mb-6">{breadcrumb}</div>}
+
+      <div className={showSidebar
+        ? 'grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start'
+        : 'max-w-3xl mx-auto'
+      }>
+        {showSidebar && (
+          <NoteSidebar
+            headings={note.headings}
+            showToc={showToc}
+            backlinks={visibleBacklinks}
+            breadcrumb={breadcrumb}
+          />
+        )}
+        <article className="min-w-0 max-w-3xl mx-auto">
+          <header className="mb-8 border-b border-muted/10 pb-8">
+            {note.draft && (
+              <div className="mb-4">
+                <span className="text-xs font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded tracking-widest inline-block">
+                  DRAFT
+                </span>
+              </div>
+            )}
+            <time className="text-sm font-mono text-accent" data-pagefind-meta="date[content]">
+              {note.date}
+            </time>
+            <h1 className="mt-2 text-3xl md:text-4xl font-serif font-bold text-heading leading-tight">
+              {note.title}
+            </h1>
+            {note.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-4">
+                {note.tags.map(tag => (
+                  <Tag key={tag} tag={tag} variant="default" />
+                ))}
+              </div>
+            )}
+          </header>
+
+          <MarkdownRenderer content={note.content} slug={note.slug} slugRegistry={slugRegistry} />
+
+          {/* Prev/Next navigation */}
+          <nav aria-label="Note navigation" className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-2 gap-4">
+            {prev ? (
+              <Link href={`/notes/${prev.slug}`} className="group text-left no-underline">
+                <span className="text-xs text-muted">{t('older')}</span>
+                <div className="text-sm font-medium text-heading group-hover:text-accent transition-colors truncate">
+                  {prev.title}
+                </div>
+                <span className="text-xs font-mono text-muted">{prev.date}</span>
+              </Link>
+            ) : <div />}
+            {next ? (
+              <Link href={`/notes/${next.slug}`} className="group text-right no-underline">
+                <span className="text-xs text-muted">{t('newer')}</span>
+                <div className="text-sm font-medium text-heading group-hover:text-accent transition-colors truncate">
+                  {next.title}
+                </div>
+                <span className="text-xs font-mono text-muted">{next.date}</span>
+              </Link>
+            ) : <div />}
+          </nav>
+        </article>
+      </div>
+    </div>
+  );
+}
+

package/src/app/notes/page/[page]/page.tsx

@@ -0,0 +1,58 @@
+import { getAllNotes, getNoteTags } from '@/lib/markdown';
+import { siteConfig } from '../../../../../site.config';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { t, resolveLocale } from '@/lib/i18n';
+import PageHeader from '@/components/PageHeader';
+import NoteContent from '@/components/NoteContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
+
+const PAGE_SIZE = siteConfig.pagination.notes ?? 20;
+
+export function generateStaticParams() {
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+  const pageCount = Math.max(1, totalPages - 1);
+  return Array.from({ length: pageCount }, (_, i) => ({
+    page: (i + 2).toString(),
+  }));
+}
+
+export const dynamicParams = false;
+
+export async function generateMetadata({ params }: { params: Promise<{ page: string }> }): Promise<Metadata> {
+  const { page } = await params;
+  return {
+    title: `${t('notes')} - ${page} | ${resolveLocale(siteConfig.title)}`,
+  };
+}
+
+export default async function NotesPaginatedPage({ params }: { params: Promise<{ page: string }> }) {
+  const { page: pageStr } = await params;
+  const page = parseInt(pageStr, 10);
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+
+  if (page > totalPages) notFound();
+
+  const tags = getNoteTags();
+  const start = (page - 1) * PAGE_SIZE;
+  const notes = allNotes.slice(start, start + PAGE_SIZE);
+
+  return (
+    <div className="layout-main">
+      <PageHeader
+        titleKey="notes"
+        subtitleKey="page_of_total"
+        subtitleParams={{ page, total: totalPages }}
+        className="mb-12"
+      />
+      <FlowHubTabs />
+      <NoteContent
+        notes={notes}
+        tags={tags}
+        pagination={{ currentPage: page, totalPages, basePath: '/notes' }}
+      />
+    </div>
+  );
+}

package/src/app/notes/page.tsx

@@ -0,0 +1,31 @@
+import { getAllNotes, getNoteTags } from '@/lib/markdown';
+import { siteConfig } from '../../../site.config';
+import { Metadata } from 'next';
+import { t, tWith, resolveLocale } from '@/lib/i18n';
+import NoteContent from '@/components/NoteContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
+
+const PAGE_SIZE = siteConfig.pagination.notes ?? 20;
+
+export const metadata: Metadata = {
+  title: `${t('notes')} | ${resolveLocale(siteConfig.title)}`,
+  description: 'Knowledge base notes.',
+};
+
+export default function NotesPage() {
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+  const notes = allNotes.slice(0, PAGE_SIZE);
+  const tags = getNoteTags();
+
+  return (
+    <div className="layout-main">
+      <FlowHubTabs subtitle={tWith('notes_subtitle', { count: allNotes.length })} />
+      <NoteContent
+        notes={notes}
+        tags={tags}
+        pagination={totalPages > 1 ? { currentPage: 1, totalPages, basePath: '/notes' } : undefined}
+      />
+    </div>
+  );
+}

package/src/app/page.tsx

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

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

@@ -1,4 +1,4 @@
-import { getPostBySlug, getAllPosts, getRelatedPosts, getSeriesPosts, getSeriesData, getAdjacentPosts, PostData } from '@/lib/markdown';
+import { getPostBySlug, getAllPosts, getRelatedPosts, getSeriesPosts, getSeriesData, getAdjacentPosts, buildSlugRegistry, getBacklinks, PostData } from '@/lib/markdown';
 import { notFound } from 'next/navigation';
 import PostLayout from '@/layouts/PostLayout';
 import SimpleLayout from '@/layouts/SimpleLayout';
@@ -99,6 +99,8 @@ export default async function PostPage({
 
   const relatedPosts = getRelatedPosts(slug);
   const { prev, next } = getAdjacentPosts(slug);
+  const slugRegistry = buildSlugRegistry();
+  const backlinks = getBacklinks(slug);
   let seriesPosts: PostData[] = [];
   let seriesTitle: string | undefined;
 
@@ -109,5 +111,5 @@ export default async function PostPage({
   }
 
   // Default to standard post layout
-  return <PostLayout post={post} relatedPosts={relatedPosts} seriesPosts={seriesPosts} seriesTitle={seriesTitle} prevPost={prev} nextPost={next} />;
+  return <PostLayout post={post} relatedPosts={relatedPosts} seriesPosts={seriesPosts} seriesTitle={seriesTitle} prevPost={prev} nextPost={next} backlinks={backlinks} slugRegistry={slugRegistry} />;
 }

package/src/app/search.json/route.ts

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllBooks, getBookChapter, getAllFlows } from '@/lib/markdown';
+import { getAllPosts, getAllBooks, getBookChapter, getAllFlows, getAllNotes } from '@/lib/markdown';
 import { stripMarkdown } from '@/lib/search-utils';
 
 export const dynamic = 'force-static';
@@ -49,5 +49,19 @@ export async function GET() {
     });
   }
 
+  // Add notes to search index
+  const notes = getAllNotes();
+  for (const note of notes) {
+    searchIndex.push({
+      title: note.title,
+      slug: `notes/${note.slug}`,
+      date: note.date,
+      excerpt: note.excerpt,
+      category: 'Note',
+      tags: note.tags,
+      content: stripMarkdown(note.content),
+    });
+  }
+
   return Response.json(searchIndex);
 }

package/src/components/Backlinks.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { BacklinkSource } from '@/lib/markdown';
+import { t } from '@/lib/i18n';
+
+interface BacklinksProps {
+  backlinks: BacklinkSource[];
+}
+
+export default function Backlinks({ backlinks }: BacklinksProps) {
+  if (!backlinks.length) return null;
+
+  return (
+    <div className="mt-12 pt-12 border-t border-muted/20">
+      <h3 className="text-sm font-sans font-semibold uppercase tracking-widest text-muted mb-4">
+        {t('backlinks')}
+      </h3>
+      <div className="flex flex-col gap-4">
+        {backlinks.map(bl => (
+          <div key={`${bl.type}-${bl.slug}`} className="flex flex-col gap-1">
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted/60 border border-muted/20 rounded px-1.5 py-0.5">
+                {bl.type}
+              </span>
+              <Link
+                href={bl.url}
+                className="text-sm font-medium text-heading hover:text-accent no-underline transition-colors"
+              >
+                {bl.title}
+              </Link>
+            </div>
+            {bl.context && (
+              <p className="text-sm text-muted leading-relaxed">&ldquo;{bl.context}&rdquo;</p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/FlowCalendarSidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, type ReactNode } from 'react';
 import Link from 'next/link';
 import { useLanguage } from '@/components/LanguageProvider';
 
@@ -10,11 +10,12 @@ interface FlowCalendarSidebarProps {
   tags?: Record<string, number>;
   selectedTag?: string | null;
   onTagSelect?: (tag: string) => void;
+  breadcrumb?: ReactNode;
 }
 
 const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 
-export default function FlowCalendarSidebar({ entryDates, currentDate, tags, selectedTag, onTagSelect }: FlowCalendarSidebarProps) {
+export default function FlowCalendarSidebar({ entryDates, currentDate, tags, selectedTag, onTagSelect, breadcrumb }: FlowCalendarSidebarProps) {
   const { t } = useLanguage();
   const initialDate = currentDate ? new Date(currentDate + 'T00:00:00') : new Date();
   const [viewYear, setViewYear] = useState(initialDate.getFullYear());
@@ -77,6 +78,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
 
   return (
     <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)]">
+      {breadcrumb && <div className="mb-4">{breadcrumb}</div>}
       <div className="border border-muted/20 rounded-lg p-4">
         {/* Month navigation */}
         <div className="flex items-center justify-between mb-3">

package/src/components/FlowContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, type ReactNode } from 'react';
 import { useLanguage } from '@/components/LanguageProvider';
 import FlowCalendarSidebar from '@/components/FlowCalendarSidebar';
 import FlowTimelineEntry from '@/components/FlowTimelineEntry';
@@ -24,9 +24,10 @@ interface FlowContentProps {
     totalPages: number;
     basePath: string;
   };
+  breadcrumb?: ReactNode;
 }
 
-export default function FlowContent({ flows, entryDates, tags, currentDate, pagination }: FlowContentProps) {
+export default function FlowContent({ flows, entryDates, tags, currentDate, pagination, breadcrumb }: FlowContentProps) {
   const { t } = useLanguage();
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
 
@@ -47,6 +48,7 @@ export default function FlowContent({ flows, entryDates, tags, currentDate, pagi
         tags={tags}
         selectedTag={selectedTag}
         onTagSelect={handleTagSelect}
+        breadcrumb={breadcrumb}
       />
 
       <div className="flex-1 min-w-0">
@@ -72,7 +74,6 @@ export default function FlowContent({ flows, entryDates, tags, currentDate, pagi
               <FlowTimelineEntry
                 key={flow.slug}
                 date={flow.date}
-                title={flow.title}
                 excerpt={flow.excerpt}
                 tags={flow.tags}
                 slug={flow.slug}

package/src/components/FlowHubTabs.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { useLanguage } from './LanguageProvider';
+
+interface FlowHubTabsProps {
+  subtitle?: string;
+}
+
+export default function FlowHubTabs({ subtitle }: FlowHubTabsProps) {
+  const pathname = usePathname();
+  const { t } = useLanguage();
+
+  // Normalize: strip trailing slash added by next.config trailingSlash:true
+  const path = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+
+  const isFlowsActive = path === '/flows' || path.startsWith('/flows/page');
+  const isNotesActive = path === '/notes' || path.startsWith('/notes/page');
+  const isGraphActive = path.startsWith('/graph');
+
+  const tabs = [
+    { href: '/flows', label: t('tab_daily_flow'), active: isFlowsActive },
+    { href: '/notes', label: t('notes'), active: isNotesActive },
+    { href: '/graph', label: t('tab_graph'), active: isGraphActive },
+  ];
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-end gap-8 border-b border-muted/20">
+        {tabs.map(tab => (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            className={`pb-3 text-3xl font-bold no-underline border-b-2 -mb-px transition-colors ${
+              tab.active
+                ? 'border-accent text-heading'
+                : 'border-transparent text-muted/30 hover:text-muted/60'
+            }`}
+          >
+            {tab.label}
+          </Link>
+        ))}
+      </div>
+      {subtitle && (
+        <p className="mt-3 text-sm text-muted">{subtitle}</p>
+      )}
+    </div>
+  );
+}

package/src/components/FlowTimelineEntry.tsx

@@ -3,25 +3,23 @@ import Tag from './Tag';
 
 interface FlowTimelineEntryProps {
   date: string;
-  title: string;
   excerpt: string;
   tags: string[];
   slug: string;
 }
 
-export default function FlowTimelineEntry({ date, title, excerpt, tags, slug }: FlowTimelineEntryProps) {
+export default function FlowTimelineEntry({ date, excerpt, tags, slug }: FlowTimelineEntryProps) {
   return (
     <article className="relative pl-6 pb-8 border-l-2 border-muted/20 last:pb-0">
       {/* Timeline dot */}
       <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
 
-      <time className="text-xs font-mono text-accent">{date}</time>
-      <h3 className="mt-1 mb-2 font-serif text-xl font-bold text-heading">
-        <Link href={`/flows/${slug}`} className="no-underline hover:text-accent transition-colors">
-          {title}
-        </Link>
-      </h3>
-      <p className="text-sm text-muted leading-relaxed line-clamp-3">{excerpt}</p>
+      <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>
+      </Link>
+      {excerpt && (
+        <p className="mt-1.5 text-sm text-muted leading-relaxed line-clamp-3">{excerpt}</p>
+      )}
       {tags.length > 0 && (
         <div className="mt-2 flex flex-wrap gap-2">
           {tags.map(tag => (