@hutusi/amytis 1.6.0 → 1.8.0

package/src/components/TagContentTabs.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useState } from 'react';
+import { useLanguage } from './LanguageProvider';
+import PostList from './PostList';
+import FlowTimelineEntry from './FlowTimelineEntry';
+import type { PostData } from '@/lib/markdown';
+
+type Tab = 'all' | 'posts' | 'flows';
+
+interface FlowEntry {
+  slug: string;
+  date: string;
+  title: string;
+  excerpt: string;
+  tags: string[];
+}
+
+interface TagContentTabsProps {
+  posts: PostData[];
+  flows: FlowEntry[];
+}
+
+export default function TagContentTabs({ posts, flows }: TagContentTabsProps) {
+  const { t } = useLanguage();
+  const hasBoth = posts.length > 0 && flows.length > 0;
+  const [activeTab, setActiveTab] = useState<Tab>('all');
+
+  const showPosts = activeTab === 'all' || activeTab === 'posts';
+  const showFlows = activeTab === 'all' || activeTab === 'flows';
+
+  const tabs: { key: Tab; label: string; count: number }[] = [
+    { key: 'all', label: t('tab_all'), count: posts.length + flows.length },
+    { key: 'posts', label: t('posts'), count: posts.length },
+    { key: 'flows', label: t('flow_notes'), count: flows.length },
+  ];
+
+  return (
+    <div>
+      {/* Type tabs — only shown when both content types exist */}
+      {hasBoth && (
+        <div role="tablist" className="flex mb-8 border-b border-muted/20">
+          {tabs.map(({ key, label, count }) => (
+            <button
+              key={key}
+              type="button"
+              role="tab"
+              aria-selected={activeTab === key}
+              onClick={() => setActiveTab(key)}
+              className={`px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                activeTab === key
+                  ? 'text-accent border-accent'
+                  : 'text-muted border-transparent hover:text-foreground'
+              }`}
+            >
+              {label}
+              <span className={`ml-1.5 text-xs font-mono ${activeTab === key ? 'text-accent/60' : 'text-muted/50'}`}>
+                {count}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Posts section */}
+      {showPosts && posts.length > 0 && (
+        <div>
+          <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-6">
+            {t('posts')}
+            <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
+              {posts.length}
+            </span>
+          </h2>
+          <PostList posts={posts} />
+        </div>
+      )}
+
+      {/* Flows section */}
+      {showFlows && flows.length > 0 && (
+        <div className={showPosts && posts.length > 0 ? 'mt-12' : ''}>
+          <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-4">
+            {t('flow_notes')}
+            <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
+              {flows.length}
+            </span>
+          </h2>
+          <div>
+            {flows.map(flow => (
+              <FlowTimelineEntry
+                key={flow.slug}
+                date={flow.date}
+                excerpt={flow.excerpt}
+                tags={flow.tags}
+                slug={flow.slug}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TagPageHeader.tsx

@@ -5,18 +5,15 @@ import { useLanguage } from './LanguageProvider';
 
 interface TagPageHeaderProps {
   tag: string;
-  postCount: number;
 }
 
-export default function TagPageHeader({ tag, postCount }: TagPageHeaderProps) {
-  const { t, tWith } = useLanguage();
-
-  const subtitleKey = postCount === 1 ? 'tag_posts_found_one' : 'tag_posts_found';
-  const subtitle = tWith(subtitleKey, { count: postCount });
+export default function TagPageHeader({ tag }: TagPageHeaderProps) {
+  const { t } = useLanguage();
 
   return (
     <>
-      <nav className="mb-12 flex justify-center">
+      {/* Back link: visible only on mobile (desktop has sidebar) */}
+      <nav className="mb-8 flex lg:hidden">
         <Link
           href="/tags"
           className="text-xs font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline"
@@ -25,13 +22,10 @@ export default function TagPageHeader({ tag, postCount }: TagPageHeaderProps) {
         </Link>
       </nav>
 
-      <header className="mb-20 text-center">
-        <h1 className="text-4xl md:text-6xl font-serif font-bold text-heading mb-6 capitalize">
-          <span className="text-accent/50 mr-2">#</span>{tag}
+      <header className="mb-10">
+        <h1 className="text-3xl md:text-4xl font-serif font-bold text-heading">
+          <span className="text-accent/50 mr-1">#</span>{tag}
         </h1>
-        <p className="text-lg text-muted font-serif italic">
-          {subtitle}
-        </p>
       </header>
     </>
   );

package/src/components/TagSidebar.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { t, tWith } from '@/lib/i18n';
+import { LuTag, LuX, LuSearch } from 'react-icons/lu';
+
+const INITIAL_SHOW = 12;
+
+interface TagSidebarProps {
+  tags: Record<string, number>;
+  activeTag: string;
+}
+
+export default function TagSidebar({ tags, activeTag }: TagSidebarProps) {
+  const [filter, setFilter] = useState('');
+  const [expanded, setExpanded] = useState(false);
+
+  const totalCount = Object.keys(tags).length;
+
+  const sortedTags = Object.entries(tags)
+    .sort((a, b) => b[1] - a[1])
+    .filter(([tag]) => !filter || tag.toLowerCase().includes(filter.toLowerCase()));
+
+  const activeIndex = sortedTags.findIndex(([tag]) => tag === activeTag);
+
+  // Compute visible tags:
+  // - Filtering or expanded: show all
+  // - Default: show first INITIAL_SHOW, then append active tag (with a separator)
+  //   if it falls beyond the initial slice — keeps sidebar compact while
+  //   always making the selected tag visible
+  const getVisibleTags = (): { entries: [string, number][]; appendedAt: number | null } => {
+    if (filter || expanded) return { entries: sortedTags, appendedAt: null };
+    const initial = sortedTags.slice(0, INITIAL_SHOW);
+    if (activeIndex >= INITIAL_SHOW) {
+      return { entries: [...initial, sortedTags[activeIndex]], appendedAt: INITIAL_SHOW };
+    }
+    return { entries: initial, appendedAt: null };
+  };
+
+  const { entries: visibleTags, appendedAt } = getVisibleTags();
+  const remainingCount = sortedTags.length - visibleTags.length;
+  const showExpandButton = !filter && !expanded && remainingCount > 0;
+  // Only allow collapsing if it won't hide the active tag
+  const showCollapseButton = expanded && !filter && (activeIndex === -1 || activeIndex < INITIAL_SHOW);
+
+  return (
+    <aside className="hidden lg:block flex-shrink-0">
+      <div className="sticky top-24">
+
+        {/* Section heading → links to all tags, shows total count */}
+        <Link
+          href="/tags"
+          className="flex items-center gap-1.5 text-[10px] font-sans font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline mb-3"
+        >
+          <LuTag className="w-3 h-3" />
+          <span>{t('tags')}</span>
+          <span className="ml-auto font-mono font-normal normal-case tracking-normal text-muted/50">
+            {totalCount}
+          </span>
+        </Link>
+
+        {/* Filter input with clear button */}
+        <div className="relative mb-3">
+          <LuSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-muted/40 pointer-events-none" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter…"
+            aria-label={t('filter_tags')}
+            className="w-full pl-8 pr-7 py-1.5 text-xs bg-muted/5 border border-muted/15 rounded-lg outline-none focus:border-accent/40 text-foreground placeholder:text-muted/40 transition-colors"
+          />
+          {filter && (
+            <button
+              onClick={() => setFilter('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted/40 hover:text-muted transition-colors p-0.5 rounded"
+              aria-label="Clear filter"
+            >
+              <LuX className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+
+        {/* Tag list — no overflow, no scrollbar */}
+        <nav className="space-y-0.5">
+          {visibleTags.map(([tag, count], index) => {
+            const isActive = tag === activeTag;
+            // Thin separator before the appended active tag
+            const showSeparator = appendedAt !== null && index === appendedAt;
+            return (
+              <div key={tag}>
+                {showSeparator && <div className="my-1.5 h-px bg-muted/10" />}
+                <Link
+                  href={`/tags/${encodeURIComponent(tag)}`}
+                  className={`flex items-center justify-between px-2.5 py-1.5 rounded-lg text-sm no-underline transition-colors ${
+                    isActive
+                      ? 'bg-accent/10 text-accent font-medium'
+                      : 'text-foreground/70 hover:text-foreground hover:bg-muted/10'
+                  }`}
+                >
+                  <span className="truncate">{tag}</span>
+                  <span className={`ml-2 text-xs font-mono flex-shrink-0 ${isActive ? 'text-accent/70' : 'text-muted/50'}`}>
+                    {count}
+                  </span>
+                </Link>
+              </div>
+            );
+          })}
+
+          {/* Expand button */}
+          {showExpandButton && (
+            <button
+              onClick={() => setExpanded(true)}
+              aria-expanded={false}
+              className="w-full text-left px-2.5 py-1.5 text-xs text-muted/50 hover:text-accent transition-colors"
+            >
+              {tWith('more_tags', { count: remainingCount })}
+            </button>
+          )}
+
+          {/* Collapse button */}
+          {showCollapseButton && (
+            <button
+              onClick={() => setExpanded(false)}
+              aria-expanded={true}
+              className="w-full text-left px-2.5 py-1.5 text-xs text-muted/50 hover:text-accent transition-colors"
+            >
+              {t('collapse_tags')}
+            </button>
+          )}
+
+          {/* Empty state */}
+          {visibleTags.length === 0 && (
+            <p className="text-xs text-muted/60 italic px-2.5 py-2">{t('no_tags_found')}</p>
+          )}
+        </nav>
+
+      </div>
+    </aside>
+  );
+}

package/src/components/TagsIndexClient.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { LuSearch, LuX } from 'react-icons/lu';
+import { useLanguage } from './LanguageProvider';
+
+interface TagsIndexClientProps {
+  tags: Record<string, number>;
+}
+
+type SortMode = 'popular' | 'alpha';
+
+function getTagClasses(count: number, min: number, max: number): string {
+  const ratio = max === min ? 0.5 : (count - min) / (max - min);
+  if (ratio >= 0.8) return 'text-xl font-bold px-5 py-2.5';
+  if (ratio >= 0.6) return 'text-lg font-semibold px-5 py-2';
+  if (ratio >= 0.4) return 'text-base font-medium px-4 py-2';
+  if (ratio >= 0.2) return 'text-sm px-3.5 py-1.5';
+  return 'text-xs px-3 py-1.5';
+}
+
+function TagLink({ tag, count, min, max }: { tag: string; count: number; min: number; max: number }) {
+  return (
+    <Link
+      href={`/tags/${encodeURIComponent(tag)}`}
+      className={`group inline-flex items-baseline gap-1.5 rounded-xl border border-muted/20 bg-muted/5 hover:bg-background hover:border-accent hover:shadow-md hover:shadow-accent/5 no-underline transition-all duration-200 ${getTagClasses(count, min, max)}`}
+    >
+      <span className="text-foreground group-hover:text-accent transition-colors">{tag}</span>
+      <span className="font-mono text-muted/50 group-hover:text-accent/50 transition-colors" style={{ fontSize: '0.7em' }}>{count}</span>
+    </Link>
+  );
+}
+
+export default function TagsIndexClient({ tags }: TagsIndexClientProps) {
+  const { t, tWith } = useLanguage();
+  const [filter, setFilter] = useState('');
+  const [sort, setSort] = useState<SortMode>('popular');
+
+  const total = Object.keys(tags).length;
+  const allEntries = Object.entries(tags);
+  const counts = allEntries.map(([, c]) => c);
+  const min = Math.min(...counts);
+  const max = Math.max(...counts);
+
+  const filtered = allEntries
+    .filter(([tag]) => !filter || tag.toLowerCase().includes(filter.toLowerCase()))
+    .sort((a, b) =>
+      sort === 'popular'
+        ? b[1] - a[1]
+        : a[0].localeCompare(b[0])
+    );
+
+  // Group by first letter for A-Z mode
+  const letterGroups = sort === 'alpha'
+    ? filtered.reduce<Record<string, [string, number][]>>((acc, entry) => {
+        const letter = /^[a-zA-Z]/.test(entry[0]) ? entry[0][0].toUpperCase() : '#';
+        if (!acc[letter]) acc[letter] = [];
+        acc[letter].push(entry);
+        return acc;
+      }, {})
+    : null;
+
+  const sortedLetters = letterGroups
+    ? Object.keys(letterGroups).sort((a, b) => a === '#' ? 1 : b === '#' ? -1 : a.localeCompare(b))
+    : null;
+
+  return (
+    <div>
+      {/* Controls */}
+      <div className="flex flex-col sm:flex-row gap-3 mb-10">
+        <div className="relative flex-1 max-w-sm">
+          <LuSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted/50 pointer-events-none" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter tags…"
+            aria-label={t('filter_tags')}
+            className="w-full pl-9 pr-8 py-2 text-sm bg-muted/5 border border-muted/15 rounded-lg outline-none focus:border-accent/40 text-foreground placeholder:text-muted/40 transition-colors"
+          />
+          {filter && (
+            <button
+              onClick={() => setFilter('')}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted/40 hover:text-muted transition-colors p-0.5 rounded"
+              aria-label="Clear filter"
+            >
+              <LuX className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex rounded-lg border border-muted/15 overflow-hidden text-xs font-sans font-semibold self-start">
+          <button
+            type="button"
+            onClick={() => setSort('popular')}
+            aria-pressed={sort === 'popular'}
+            className={`px-4 py-2 transition-colors ${sort === 'popular' ? 'bg-accent/10 text-accent' : 'text-muted hover:text-foreground hover:bg-muted/5'}`}
+          >
+            {t('sort_popular')}
+          </button>
+          <button
+            type="button"
+            onClick={() => setSort('alpha')}
+            aria-pressed={sort === 'alpha'}
+            className={`px-4 py-2 border-l border-muted/15 transition-colors ${sort === 'alpha' ? 'bg-accent/10 text-accent' : 'text-muted hover:text-foreground hover:bg-muted/5'}`}
+          >
+            {t('sort_az')}
+          </button>
+        </div>
+      </div>
+
+      {/* Result count when filtering */}
+      {filter && (
+        <p className="text-xs font-mono text-muted mb-6">
+          {tWith('tags_count', { shown: filtered.length, total })}
+        </p>
+      )}
+
+      {/* Popular mode: flat size-scaled cloud */}
+      {sort === 'popular' && (
+        <div className="flex flex-wrap gap-3 items-baseline">
+          {filtered.map(([tag, count]) => (
+            <TagLink key={tag} tag={tag} count={count} min={min} max={max} />
+          ))}
+          {filtered.length === 0 && (
+            <p className="text-sm text-muted italic">{tWith('tags_no_match', { filter })}</p>
+          )}
+        </div>
+      )}
+
+      {/* A-Z mode: grouped under letter section headers */}
+      {sort === 'alpha' && sortedLetters && (
+        <div>
+          {sortedLetters.length === 0 ? (
+            <p className="text-sm text-muted italic">{tWith('tags_no_match', { filter })}</p>
+          ) : (
+            sortedLetters.map((letter, i) => (
+              <div key={letter} className={i > 0 ? 'mt-10' : ''}>
+                <div className="flex items-center gap-3 mb-4">
+                  <span className="text-xs font-mono font-bold text-muted/40 w-4">{letter}</span>
+                  <div className="flex-1 h-px bg-muted/10" />
+                </div>
+                <div className="flex flex-wrap gap-3 items-baseline">
+                  {letterGroups![letter].map(([tag, count]) => (
+                    <TagLink key={tag} tag={tag} count={count} min={min} max={max} />
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/hooks/useScrollY.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Module-level subscriber set — only one DOM scroll listener exists
+ * regardless of how many components call this hook.
+ */
+const listeners = new Set<(y: number) => void>();
+
+function onScroll() {
+  const y = window.scrollY;
+  listeners.forEach(fn => fn(y));
+}
+
+/**
+ * Returns the current window.scrollY, updating on every scroll event.
+ * A single passive scroll listener is shared across all consumers.
+ */
+export function useScrollY(): number {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    if (listeners.size === 0) {
+      window.addEventListener('scroll', onScroll, { passive: true });
+    }
+    listeners.add(setScrollY);
+    // Sync on mount via RAF to avoid cascading render error
+    const rafId = requestAnimationFrame(() => setScrollY(window.scrollY));
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      listeners.delete(setScrollY);
+      if (listeners.size === 0) {
+        window.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, []);
+
+  return scrollY;
+}

package/src/i18n/translations.ts

@@ -25,8 +25,12 @@ export const translations = {
     categories: "Categories",
     articles: "Articles",
     posts: "Posts",
+    links: "Links",
     explore: "Explore",
     connect: "Connect",
+    rss_feed: "RSS Feed",
+    privacy: "Privacy",
+    built_with: "Built with Amytis",
     on_this_page: "On this page",
     back_to_top: "Back to top",
     archive_subtitle: "{count} posts across {years} years.",
@@ -56,7 +60,7 @@ export const translations = {
     selected_books: "Selected Books",
     flow: "Flow",
     recent_notes: "Recent Notes",
-    all_flows: "All Notes",
+    all_flows: "All Flows",
     no_flows: "No notes yet.",
     flow_subtitle: "{count} daily notes.",
     flows_in_year: "Notes in {year}",
@@ -75,6 +79,54 @@ export const translations = {
     search_tip_phrase: "Quoted string for exact matching (\" \" = Exact match)",
     search_tip_and: "Use spaces to combine keywords (Space = AND)",
     search_tip_exclude: "Exclude a term (- = Exclude)",
+    discuss_post: "Discuss this post",
+    share_post: "Share",
+    copy_link: "Copy link",
+    link_copied: "Copied!",
+    flow_notes: "Flow Notes",
+    tag_post_count: "{count} posts",
+    tag_post_count_one: "1 post",
+    tag_flow_count: "{count} flow notes",
+    tag_flow_count_one: "1 flow note",
+    subscribe: "Subscribe",
+    subscribe_subtitle: "Stay updated with new posts and notes via your preferred channel.",
+    rss_readers: "RSS Readers",
+    rss_description: "Subscribe with any RSS reader for automatic updates when new content is published.",
+    email_newsletter: "Email Newsletter",
+    email_newsletter_description: "Get new posts delivered directly to your inbox.",
+    telegram_channel: "Telegram",
+    telegram_channel_description: "Instant updates via Telegram channel.",
+    wechat_official: "WeChat Official Account",
+    wechat_description: "Follow on WeChat for updates.",
+    scan_qr_code: "Scan to follow",
+    copy_feed_url: "Copy feed URL",
+    feed_url_copied: "Copied!",
+    join_channel: "Join Channel",
+    subscribe_on_substack: "Subscribe on Substack",
+    subscribe_via_email: "Subscribe via Email",
+    social_connections: "Social",
+    older: "Older",
+    newer: "Newer",
+    tab_all: "All",
+    post_navigation: "Post navigation",
+    filter_tags: "Filter tags",
+    no_tags_found: "No tags found",
+    more_tags: "+ {count} more",
+    collapse_tags: "Show less",
+    sort_popular: "Popular",
+    sort_az: "A–Z",
+    tags_count: "{shown} / {total} tags",
+    tags_no_match: "No tags match \"{filter}\"",
+    notes: "Notes",
+    notes_subtitle: "{count} knowledge base notes.",
+    tab_daily_flow: "Daily",
+    tab_graph: "Graph",
+    backlinks: "Backlinks",
+    graph_subtitle: "A visual map of connected knowledge.",
+    search_type_note: "Note",
+    all_notes: "All Notes",
+    no_notes: "No notes yet.",
+    more: "More",
   },
   zh: {
     home: "首页",
@@ -102,8 +154,12 @@ export const translations = {
     categories: "分类",
     articles: "文章",
     posts: "文章",
+    links: "链接",
     explore: "探索",
     connect: "连接",
+    rss_feed: "RSS 订阅",
+    privacy: "隐私政策",
+    built_with: "基于 Amytis 构建",
     on_this_page: "本页目录",
     back_to_top: "返回顶部",
     archive_subtitle: "横跨 {years} 年，共 {count} 篇文章。",
@@ -152,6 +208,54 @@ export const translations = {
     search_tip_phrase: "加引号精确匹配短语（\" \" 表示精确匹配）",
     search_tip_and: "使用空格组合关键词（空格表示 AND）",
     search_tip_exclude: "排除关键词（- 表示排除）",
+    discuss_post: "讨论这篇文章",
+    share_post: "分享",
+    copy_link: "复制链接",
+    link_copied: "已复制",
+    flow_notes: "随笔",
+    tag_post_count: "{count} 篇文章",
+    tag_post_count_one: "1 篇文章",
+    tag_flow_count: "{count} 条随笔",
+    tag_flow_count_one: "1 条随笔",
+    subscribe: "订阅",
+    subscribe_subtitle: "通过您喜爱的方式订阅，及时获取新文章和随笔。",
+    rss_readers: "RSS 阅读器",
+    rss_description: "通过 RSS 阅读器订阅，发布新内容时自动获取更新。",
+    email_newsletter: "邮件订阅",
+    email_newsletter_description: "将新文章直接发送到您的邮箱。",
+    telegram_channel: "Telegram 频道",
+    telegram_channel_description: "通过 Telegram 频道获取即时更新。",
+    wechat_official: "微信公众号",
+    wechat_description: "关注微信公众号获取更新。",
+    scan_qr_code: "扫码关注",
+    copy_feed_url: "复制订阅链接",
+    feed_url_copied: "已复制！",
+    join_channel: "加入频道",
+    subscribe_on_substack: "在 Substack 订阅",
+    subscribe_via_email: "邮件订阅",
+    social_connections: "社交媒体",
+    older: "更早",
+    newer: "更新",
+    tab_all: "全部",
+    post_navigation: "文章导航",
+    filter_tags: "筛选标签",
+    no_tags_found: "未找到标签",
+    more_tags: "还有 {count} 个",
+    collapse_tags: "收起",
+    sort_popular: "热门",
+    sort_az: "A–Z",
+    tags_count: "{shown} / {total} 个标签",
+    tags_no_match: "未找到匹配\"{filter}\"的标签",
+    notes: "笔记",
+    notes_subtitle: "共 {count} 条知识库笔记。",
+    tab_daily_flow: "随笔",
+    tab_graph: "图谱",
+    backlinks: "反向链接",
+    graph_subtitle: "知识连接的可视化地图。",
+    search_type_note: "笔记",
+    all_notes: "全部笔记",
+    no_notes: "暂无笔记。",
+    more: "更多",
   },
 };