@hutusi/amytis 1.5.6 → 1.7.0

package/src/components/PostSidebar.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { PostData, Heading } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import { useScrollY } from '@/hooks/useScrollY';
+import ShareBar from './ShareBar';
+import { siteConfig } from '../../site.config';
 
 interface PostSidebarProps {
   seriesSlug?: string;
@@ -11,28 +14,52 @@ interface PostSidebarProps {
   posts?: PostData[];
   currentSlug: string;
   headings: Heading[];
+  localeHeadings?: Record<string, Heading[]>;
+  shareUrl?: string;
+  shareTitle?: string;
 }
 
-export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlug, headings }: PostSidebarProps) {
-  const { t } = useLanguage();
+function getVisibleIndices(total: number, current: number): (number | 'ellipsis')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i);
+  const result: (number | 'ellipsis')[] = [];
+  result.push(0);
+  const windowStart = Math.max(1, current - 2);
+  const windowEnd = Math.min(total - 2, current + 2);
+  if (windowStart > 1) result.push('ellipsis');
+  for (let i = windowStart; i <= windowEnd; i++) result.push(i);
+  if (windowEnd < total - 2) result.push('ellipsis');
+  result.push(total - 1);
+  return result;
+}
+
+export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlug, headings, localeHeadings, shareUrl, shareTitle }: PostSidebarProps) {
+  const { t, language } = useLanguage();
+  const activeHeadings = localeHeadings?.[language] ?? headings;
   const hasSeries = !!(seriesSlug && posts && posts.length > 0);
   const currentIndex = hasSeries ? posts!.findIndex(p => p.slug === currentSlug) : -1;
+  // Chronological sort (ascending date) — used for both progress counter and isPast styling
+  const sortedPosts = hasSeries
+    ? [...posts!].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+    : null;
+  const progressIndex = hasSeries ? sortedPosts!.findIndex(p => p.slug === currentSlug) : -1;
   const currentItemRef = useRef<HTMLLIElement>(null);
   const sidebarRef = useRef<HTMLElement>(null);
   const [activeHeadingId, setActiveHeadingId] = useState<string>('');
   const [tocCollapsed, setTocCollapsed] = useState(false);
+  const [seriesCollapsed, setSeriesCollapsed] = useState(false);
+  const scrollY = useScrollY();
 
-  // Scroll tracking for page headings
-  const handleScroll = useCallback(() => {
-    if (headings.length === 0) return;
+  // Derive active heading from shared scroll position
+  useEffect(() => {
+    if (activeHeadings.length === 0) return;
 
-    const headingElements = headings
+    const headingElements = activeHeadings
       .map(h => document.getElementById(h.id))
       .filter(Boolean) as HTMLElement[];
 
     if (headingElements.length === 0) return;
 
-    const scrollPosition = window.scrollY + 100;
+    const scrollPosition = scrollY + 100;
     let current = headingElements[0];
     for (const el of headingElements) {
       if (el.offsetTop <= scrollPosition) {
@@ -42,23 +69,11 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       }
     }
 
-    if (current) {
-      setActiveHeadingId(current.id);
-    }
-  }, [headings]);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-    
-    // Use requestAnimationFrame to avoid cascading render lint error on mount
-    const rafId = requestAnimationFrame(handleScroll);
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll, headings.length]);
+    const rafId = requestAnimationFrame(() => {
+      if (current) setActiveHeadingId(current.id);
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [scrollY, activeHeadings]);
 
   const scrollToHeading = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
     e.preventDefault();
@@ -88,113 +103,33 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       ref={sidebarRef}
       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"
     >
-      {/* Series section */}
-      {hasSeries && (
-        <>
-          <div className="mb-6 pb-4 border-b border-muted/10">
-            <Link href={`/series/${seriesSlug}`} className="group block no-underline">
-              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent mb-2 block">
-                {t('series')}
-              </span>
-              <h3 className="font-serif font-bold text-heading text-lg leading-snug group-hover:text-accent transition-colors">
-                {seriesTitle}
-              </h3>
-            </Link>
-
-            {/* Progress */}
-            <div className="mt-3 flex items-center gap-3">
-              <div className="flex-1 h-1 bg-muted/10 rounded-full overflow-hidden">
-                <div
-                  className="h-full bg-accent/60 rounded-full transition-all duration-500"
-                  style={{ width: `${((currentIndex + 1) / posts!.length) * 100}%` }}
-                />
-              </div>
-              <span className="text-xs font-mono text-muted whitespace-nowrap">
-                {currentIndex + 1}/{posts!.length}
-              </span>
-            </div>
-          </div>
-
-          {/* Series posts list */}
-          <nav aria-label="Series navigation" className="mb-6">
-            <ul className="space-y-1 relative">
-              <div className="absolute left-[11px] top-3 bottom-3 w-px bg-muted/15" />
-              {posts!.map((post, index) => {
-                const isCurrent = post.slug === currentSlug;
-                const isPast = index < currentIndex;
-
-                return (
-                  <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
-                    <Link
-                      href={`/posts/${post.slug}`}
-                      className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
-                        isCurrent ? 'bg-accent/5' : 'hover:bg-muted/5'
-                      }`}
-                      aria-current={isCurrent ? 'page' : undefined}
-                    >
-                      <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
-                        isCurrent
-                          ? 'bg-accent text-white shadow-sm shadow-accent/30'
-                          : isPast
-                            ? 'bg-accent/20 text-accent'
-                            : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
-                      }`}>
-                        {String(index + 1).padStart(2, '0')}
-                      </div>
-                      <div className="flex-1 min-w-0 pt-0.5">
-                        <span className={`block text-sm leading-snug transition-colors ${
-                          isCurrent
-                            ? 'text-accent font-semibold'
-                            : isPast
-                              ? 'text-foreground/70 group-hover:text-foreground'
-                              : 'text-muted group-hover:text-foreground'
-                        }`}>
-                          {post.title}
-                        </span>
-                      </div>
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-
-          {/* Footer link */}
-          <div className="mb-6 pb-4 border-b border-muted/10">
-            <Link
-              href={`/series/${seriesSlug}`}
-              className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+      {/* TOC — always at top */}
+      {activeHeadings.length > 0 && (
+        <nav
+          aria-label="Table of contents"
+          className={`mb-6 ${hasSeries ? 'pb-4 border-b border-muted/10' : ''}`}
+        >
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
+              {t('on_this_page')}
+            </span>
+            <button
+              onClick={() => setTocCollapsed(prev => !prev)}
+              className="text-muted hover:text-foreground transition-colors"
+              aria-label={tocCollapsed ? 'Expand table of contents' : 'Collapse table of contents'}
             >
-              {t('view_full_series')}
-              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              <svg
+                className={`w-3.5 h-3.5 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
+                fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
               </svg>
-            </Link>
+            </button>
           </div>
-        </>
-      )}
-
-      {/* Page TOC */}
-      {headings.length > 0 && (
-        <nav aria-label="Table of contents">
-          <button
-            onClick={() => setTocCollapsed(prev => !prev)}
-            className="w-full flex items-center justify-between gap-2 mb-3"
-          >
-            <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
-              {t('on_this_page')}
-            </h2>
-            <svg
-              className={`w-3.5 h-3.5 text-muted flex-shrink-0 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
-              fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
 
           {!tocCollapsed && (
             <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
-              {headings.map(heading => {
+              {activeHeadings.map(heading => {
                 const isActive = heading.id === activeHeadingId;
                 const isH3 = heading.level === 3;
 
@@ -220,6 +155,117 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
           )}
         </nav>
       )}
+
+      {/* Series section — below TOC */}
+      {hasSeries && (
+        <div>
+          {/* Header — always visible */}
+          <div className="mb-3">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent">
+                {t('series')}
+              </span>
+              <span className="text-[10px] font-mono text-muted/60">
+                {progressIndex >= 0 ? progressIndex + 1 : '?'} / {posts!.length}
+              </span>
+            </div>
+            <div className="flex items-start justify-between gap-2">
+              <Link href={`/series/${seriesSlug}`} className="group block no-underline flex-1 min-w-0">
+                <h3 className="font-serif font-bold text-heading text-base leading-snug group-hover:text-accent transition-colors">
+                  {seriesTitle}
+                </h3>
+              </Link>
+              <button
+                onClick={() => setSeriesCollapsed(prev => !prev)}
+                className="flex-shrink-0 mt-0.5 text-muted hover:text-foreground transition-colors"
+                aria-label={seriesCollapsed ? 'Expand series' : 'Collapse series'}
+              >
+                <svg
+                  className={`w-3.5 h-3.5 transition-transform duration-200 ${seriesCollapsed ? '' : 'rotate-180'}`}
+                  fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Collapsible: post list + footer link */}
+          {!seriesCollapsed && (
+            <>
+              <nav aria-label="Series navigation" className="mb-4 animate-slide-down">
+                <ul className="space-y-1 relative before:absolute before:left-[11px] before:top-3 before:bottom-3 before:w-px before:bg-muted/15">
+                  {getVisibleIndices(posts!.length, currentIndex).map((item, i) => {
+                    if (item === 'ellipsis') {
+                      return (
+                        <li key={`ellipsis-${i}`} className="flex items-center py-1 pl-3">
+                          <span className="text-xs font-mono text-muted/40 tracking-widest">···</span>
+                        </li>
+                      );
+                    }
+                    const post = posts![item];
+                    const isCurrent = post.slug === currentSlug;
+                    const chronoIndex = sortedPosts ? sortedPosts.findIndex(p => p.slug === post.slug) : item;
+                    const isPast = chronoIndex < progressIndex;
+
+                    return (
+                      <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
+                        <Link
+                          href={`/posts/${post.slug}`}
+                          className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
+                            isCurrent ? 'bg-accent/5' : 'hover:bg-muted/5'
+                          }`}
+                          aria-current={isCurrent ? 'page' : undefined}
+                        >
+                          <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
+                            isCurrent
+                              ? 'bg-accent text-white shadow-sm shadow-accent/30'
+                              : isPast
+                                ? 'bg-accent/20 text-accent'
+                                : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
+                          }`}>
+                            {String(item + 1).padStart(2, '0')}
+                          </div>
+                          <div className="flex-1 min-w-0 pt-0.5">
+                            <span className={`block text-sm leading-snug transition-colors ${
+                              isCurrent
+                                ? 'text-accent font-semibold'
+                                : isPast
+                                  ? 'text-foreground/70 group-hover:text-foreground'
+                                  : 'text-muted group-hover:text-foreground'
+                            }`}>
+                              {post.title}
+                            </span>
+                          </div>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </nav>
+
+              <Link
+                href={`/series/${seriesSlug}`}
+                className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+              >
+                {t('view_full_series')}
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </Link>
+            </>
+          )}
+        </div>
+      )}
+
+      {shareUrl && siteConfig.share?.enabled && (
+        <div className="mt-6 pt-6 border-t border-muted/10">
+          <p className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-3">
+            {t('share_post')}
+          </p>
+          <ShareBar url={shareUrl} title={shareTitle ?? ''} />
+        </div>
+      )}
     </aside>
   );
 }

package/src/components/ReadingProgressBar.tsx

@@ -1,28 +1,13 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useScrollY } from '@/hooks/useScrollY';
 
 export default function ReadingProgressBar() {
-  const [progress, setProgress] = useState(0);
-
-  const handleScroll = useCallback(() => {
-    const scrollTop = window.scrollY;
-    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
-    if (docHeight > 0) {
-      setProgress(Math.min(100, Math.max(0, (scrollTop / docHeight) * 100)));
-    }
-  }, []);
-
-  useEffect(() => {
-    // Initial check on mount via animation frame to avoid cascading render error
-    const rafId = requestAnimationFrame(handleScroll);
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
+  const scrollY = useScrollY();
+  const docHeight = typeof document !== 'undefined'
+    ? document.documentElement.scrollHeight - window.innerHeight
+    : 0;
+  const progress = docHeight > 0 ? Math.min(100, Math.max(0, (scrollY / docHeight) * 100)) : 0;
 
   if (progress <= 0) return null;
 

package/src/components/RelatedPosts.tsx

@@ -6,7 +6,7 @@ export default function RelatedPosts({ posts }: { posts: PostData[] }) {
   if (!posts || posts.length === 0) return null;
 
   return (
-    <div className="mt-16 pt-12 border-t border-muted/20">
+    <div className="mt-12 pt-12 border-t border-muted/20">
       <h3 className="text-2xl font-serif font-bold text-heading mb-8">{t('related_posts')}</h3>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         {posts.map(post => (