@hutusi/amytis 1.6.0 → 1.8.0

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 => (

package/src/components/Footer.tsx

@@ -43,7 +43,7 @@ export default function Footer() {
           <div>
             <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.nav].sort((a, b) => a.weight - b.weight).map((item) => {
+              {[...(siteConfig.footer?.explore ?? [])].sort((a, b) => a.weight - b.weight).map((item) => {
                 const key = item.name.toLowerCase() as TranslationKey;
                 const translated = t(key);
                 const label = translated !== key ? translated : item.name;
@@ -62,25 +62,26 @@ export default function Footer() {
           <div>
             <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.social.github && (
-                <li>
-                  <a href={siteConfig.social.github} target="_blank" rel="noopener noreferrer" className="text-foreground/80 hover:text-accent transition-colors no-underline flex items-center gap-2">
-                    GitHub
-                  </a>
-                </li>
-              )}
-              {siteConfig.social.twitter && (
-                <li>
-                  <a href={siteConfig.social.twitter} target="_blank" rel="noopener noreferrer" className="text-foreground/80 hover:text-accent transition-colors no-underline flex items-center gap-2">
-                    Twitter
-                  </a>
-                </li>
-              )}
-              <li>
-                <a href="/feed.xml" className="text-foreground/80 hover:text-accent transition-colors no-underline flex items-center gap-2">
-                  RSS Feed
-                </a>
-              </li>
+              {[...(siteConfig.footer?.connect ?? [])].sort((a, b) => a.weight - b.weight).map((item) => {
+                const isExternal = item.url.startsWith('http');
+                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";
+                return (
+                  <li key={item.url}>
+                    {isExternal ? (
+                      <a href={item.url} target="_blank" rel="noopener noreferrer" className={className}>
+                        {label}
+                      </a>
+                    ) : (
+                      <Link href={item.url} className={className}>
+                        {label}
+                      </Link>
+                    )}
+                  </li>
+                );
+              })}
             </ul>
           </div>
         </div>
@@ -89,13 +90,21 @@ export default function Footer() {
         <div className="pt-8 border-t border-muted/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-muted">
           <span>{resolveLocaleValue(siteConfig.footerText, language)}</span>
           <div className="flex items-center gap-6">
-             <LanguageSwitch />
-             <span className="opacity-20">|</span>
-             <Link href="/privacy" className="hover:text-foreground transition-colors no-underline">Privacy</Link>
+             <LanguageSwitch variant="text" />
              <span className="opacity-20">|</span>
-             <a href="https://github.com/hutusi/amytis" target="_blank" rel="noreferrer" className="hover:text-foreground transition-colors no-underline">
-               Built with Amytis
-             </a>
+             <Link href="/privacy" className="hover:text-foreground transition-colors no-underline">{t('privacy')}</Link>
+             {siteConfig.footer?.builtWith?.show && (() => {
+               const cfg = siteConfig.footer.builtWith;
+               const label = cfg.text ? resolveLocaleValue(cfg.text, language) : t('built_with');
+               return (
+                 <>
+                   <span className="opacity-20">|</span>
+                   <a href={cfg.url ?? 'https://github.com/hutusi/amytis'} target="_blank" rel="noreferrer" className="hover:text-foreground transition-colors no-underline">
+                     {label}
+                   </a>
+                 </>
+               );
+             })()}
           </div>
         </div>
       </div>

package/src/components/KnowledgeGraph.tsx

@@ -0,0 +1,324 @@
+'use client';
+
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import * as d3 from 'd3';
+
+// Reactive mobile detection via useSyncExternalStore (avoids setState-in-effect lint rule)
+function subscribeToResize(callback: () => void) {
+  window.addEventListener('resize', callback);
+  return () => window.removeEventListener('resize', callback);
+}
+function getIsMobile() { return window.innerWidth < 768; }
+function getServerIsMobile() { return false; }
+
+interface GraphNode extends d3.SimulationNodeDatum {
+  id: string;
+  title: string;
+  type: 'post' | 'note' | 'flow' | 'series';
+  url: string;
+  connections: number;
+}
+
+interface GraphEdge {
+  source: string | GraphNode;
+  target: string | GraphNode;
+  type: 'wikilink' | 'series';
+}
+
+interface GraphData {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}
+
+const NODE_COLORS: Record<string, string> = {
+  note: 'var(--accent)',
+  post: '#2563eb',
+  flow: '#f59e0b',
+  series: '#10b981',
+};
+
+const TYPE_FILTERS = ['note', 'post', 'flow', 'series'] as const;
+
+function nodeRadius(connections: number): number {
+  return Math.max(5, Math.min(20, 5 + connections * 1.5));
+}
+
+export default function KnowledgeGraph() {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const router = useRouter();
+  const routerRef = useRef(router);
+  useEffect(() => { routerRef.current = router; });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTypes, setActiveTypes] = useState<Set<string>>(new Set(TYPE_FILTERS));
+  const isMobile = useSyncExternalStore(subscribeToResize, getIsMobile, getServerIsMobile);
+  const [graphData, setGraphData] = useState<GraphData | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    fetch('/knowledge-graph.json')
+      .then(res => {
+        if (!res.ok) throw new Error('Graph data not found. Run `bun run build:graph` to generate it.');
+        return res.json();
+      })
+      .then((data: GraphData) => {
+        setGraphData(data);
+        setLoading(false);
+      })
+      .catch((err: Error) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!graphData || !svgRef.current || isMobile) return;
+
+    const svg = svgRef.current;
+    const width = svg.clientWidth || 800;
+    const height = svg.clientHeight || 600;
+
+    // Clear previous content
+    d3.select(svg).selectAll('*').remove();
+
+    // Deep-copy nodes so simulation can modify them
+    const filteredNodes: GraphNode[] = graphData.nodes
+      .filter(n => activeTypes.has(n.type))
+      .map(n => ({ ...n }));
+
+    const filteredNodeIds = new Set(filteredNodes.map(n => n.id));
+    const filteredEdges: GraphEdge[] = graphData.edges
+      .filter(e => {
+        const src = typeof e.source === 'string' ? e.source : e.source.id;
+        const tgt = typeof e.target === 'string' ? e.target : e.target.id;
+        return filteredNodeIds.has(src) && filteredNodeIds.has(tgt);
+      })
+      .map(e => ({ ...e }));
+
+    const svgEl = d3.select(svg);
+
+    // Tooltip
+    const tooltip = d3.select('body')
+      .append('div')
+      .style('position', 'fixed')
+      .style('pointer-events', 'none')
+      .style('background', 'var(--background)')
+      .style('border', '1px solid color-mix(in srgb, var(--muted) 20%, transparent)')
+      .style('border-radius', '6px')
+      .style('padding', '6px 10px')
+      .style('font-size', '12px')
+      .style('color', 'var(--foreground)')
+      .style('opacity', '0')
+      .style('z-index', '100')
+      .style('max-width', '200px')
+      .style('box-shadow', '0 4px 6px rgba(0,0,0,0.1)');
+
+    // Container group for zoom/pan
+    const g = svgEl.append('g');
+
+    // Zoom behavior
+    const zoom = d3.zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.2, 4])
+      .on('zoom', (event) => {
+        g.attr('transform', event.transform.toString());
+      });
+
+    svgEl.call(zoom);
+
+    // Simulation
+    const simulation = d3.forceSimulation<GraphNode>(filteredNodes)
+      .force('link',
+        d3.forceLink<GraphNode, GraphEdge>(filteredEdges)
+          .id(d => d.id)
+          .distance(80)
+      )
+      .force('charge', d3.forceManyBody<GraphNode>().strength(-150))
+      .force('center', d3.forceCenter(width / 2, height / 2))
+      .force('collide', d3.forceCollide<GraphNode>().radius(d => nodeRadius(d.connections) + 2));
+
+    // Edges
+    const link = g.append('g')
+      .selectAll<SVGLineElement, GraphEdge>('line')
+      .data(filteredEdges)
+      .join('line')
+      .attr('stroke', 'currentColor')
+      .attr('stroke-opacity', 0.2)
+      .attr('stroke-width', 1);
+
+    // Node groups
+    const node = g.append('g')
+      .selectAll<SVGGElement, GraphNode>('g')
+      .data(filteredNodes)
+      .join('g')
+      .style('cursor', 'pointer')
+      .call(
+        d3.drag<SVGGElement, GraphNode>()
+          .on('start', (event, d) => {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+          })
+          .on('drag', (event, d) => {
+            d.fx = event.x;
+            d.fy = event.y;
+          })
+          .on('end', (event, d) => {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+          })
+      )
+      .on('click', (_, d) => {
+        routerRef.current.push(d.url);
+      })
+      .on('mouseenter', (event: MouseEvent, d) => {
+        tooltip.style('opacity', '1').text('');
+        tooltip.append('span').style('font-weight', 'bold').text(d.title);
+        tooltip.append('br');
+        tooltip.append('span').style('opacity', '0.6').text(`${d.type} · ${d.connections} links`);
+      })
+      .on('mousemove', (event: MouseEvent) => {
+        tooltip
+          .style('left', `${event.clientX + 12}px`)
+          .style('top', `${event.clientY - 20}px`);
+      })
+      .on('mouseleave', () => {
+        tooltip.style('opacity', '0');
+      });
+
+    node.append('circle')
+      .attr('r', d => nodeRadius(d.connections))
+      .attr('fill', d => NODE_COLORS[d.type] || '#888')
+      .attr('fill-opacity', 0.85)
+      .attr('stroke', '#fff')
+      .attr('stroke-opacity', 0.3)
+      .attr('stroke-width', 1.5);
+
+    // Labels for well-connected nodes
+    node.filter(d => d.connections >= 3)
+      .append('text')
+      .text(d => d.title.length > 20 ? d.title.slice(0, 18) + '…' : d.title)
+      .attr('x', d => nodeRadius(d.connections) + 4)
+      .attr('y', 4)
+      .attr('font-size', '10px')
+      .attr('fill', 'currentColor')
+      .attr('opacity', 0.7)
+      .attr('pointer-events', 'none');
+
+    simulation.on('tick', () => {
+      link
+        .attr('x1', d => (d.source as GraphNode).x ?? 0)
+        .attr('y1', d => (d.source as GraphNode).y ?? 0)
+        .attr('x2', d => (d.target as GraphNode).x ?? 0)
+        .attr('y2', d => (d.target as GraphNode).y ?? 0);
+
+      node.attr('transform', d => `translate(${d.x ?? 0},${d.y ?? 0})`);
+    });
+
+    return () => {
+      simulation.stop();
+      tooltip.remove();
+    };
+  }, [graphData, activeTypes, isMobile]);
+
+  function toggleType(type: string) {
+    setActiveTypes(prev => {
+      const next = new Set(prev);
+      if (next.has(type)) {
+        if (next.size > 1) next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64 text-muted text-sm">
+        Loading graph…
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-muted/20 bg-muted/5 p-8 text-center text-sm text-muted">
+        <p className="mb-2">{error}</p>
+        <code className="text-xs bg-muted/10 px-1.5 py-0.5 rounded">bun run build:graph</code>
+      </div>
+    );
+  }
+
+  // Mobile: render searchable list
+  if (isMobile && graphData) {
+    const filtered = graphData.nodes
+      .filter(n => activeTypes.has(n.type))
+      .filter(n => !searchQuery || n.title.toLowerCase().includes(searchQuery.toLowerCase()));
+
+    return (
+      <div className="space-y-4">
+        <input
+          type="text"
+          placeholder="Search nodes…"
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className="w-full px-3 py-2 text-sm border border-muted/20 rounded-lg bg-transparent outline-none focus:border-accent"
+        />
+        <div className="space-y-1">
+          {filtered.map(n => (
+            <Link
+              key={n.id}
+              href={n.url}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted/5 no-underline text-sm text-foreground"
+            >
+              <span
+                className="w-2 h-2 rounded-full shrink-0"
+                style={{ background: NODE_COLORS[n.type] }}
+              />
+              <span className="flex-1 truncate">{n.title}</span>
+              <span className="text-xs text-muted">{n.type}</span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Filter strip */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {TYPE_FILTERS.map(type => (
+          <button
+            key={type}
+            onClick={() => toggleType(type)}
+            aria-pressed={activeTypes.has(type)}
+            className={`flex items-center gap-1.5 px-3 py-1 text-xs rounded-full border transition-colors ${
+              activeTypes.has(type)
+                ? 'border-current text-foreground'
+                : 'border-muted/20 text-muted'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full" style={{ background: NODE_COLORS[type] }} />
+            {type}
+          </button>
+        ))}
+        {graphData && (
+          <span className="text-xs text-muted ml-auto">
+            {graphData.nodes.filter(n => activeTypes.has(n.type)).length} nodes
+          </span>
+        )}
+      </div>
+
+      {/* Graph SVG */}
+      <svg
+        ref={svgRef}
+        className="w-full rounded-lg border border-muted/20 bg-muted/5"
+        style={{ height: '600px' }}
+      />
+    </div>
+  );
+}

package/src/components/LanguageProvider.tsx

@@ -27,11 +27,6 @@ export function LanguageProvider({ children }: { children: React.ReactNode }) {
     const rafId = requestAnimationFrame(() => {
       if (savedLang && translations[savedLang]) {
         setLanguageState(savedLang);
-      } else {
-        const browserLang = navigator.language.split('-')[0] as Language;
-        if (translations[browserLang]) {
-          setLanguageState(browserLang);
-        }
       }
       setIsHydrated(true);
     });