@hutusi/amytis 1.9.0 → 1.11.0

package/src/components/MarkdownRenderer.tsx

@@ -1,12 +1,14 @@
 import ReactMarkdown, { Components, ExtraProps } from 'react-markdown';
 import Mermaid from '@/components/Mermaid';
 import CodeBlock from '@/components/CodeBlock';
+import RssFeedWidget from '@/components/RssFeedWidget';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import rehypeSlug from 'rehype-slug';
 import rehypeImageMetadata from '@/lib/rehype-image-metadata';
+import { siteConfig } from '../../site.config';
 import remarkWikilinks from '@/lib/remark-wikilinks';
 import ExportedImage from 'next-image-export-optimizer';
 import { PluggableList } from 'unified';
@@ -21,7 +23,8 @@ interface MarkdownRendererProps {
 
 export default function MarkdownRenderer({ content, latex = false, slug, slugRegistry }: MarkdownRendererProps) {
   const remarkPlugins: PluggableList = [remarkGfm];
-  const rehypePlugins: PluggableList = [rehypeRaw, rehypeSlug, [rehypeImageMetadata, { slug }]];
+  const cdnBaseUrl = siteConfig.images?.cdnBaseUrl ?? '';
+  const rehypePlugins: PluggableList = [rehypeRaw, rehypeSlug, [rehypeImageMetadata, { slug, cdnBaseUrl }]];
 
   if (slugRegistry && slugRegistry.size > 0) {
     remarkPlugins.push([remarkWikilinks, { slugRegistry }]);
@@ -61,7 +64,7 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
       );
     },
     // Render 'pre' as a 'div' to allow block-level children
-    pre: ({ children }) => <div className="not-prose">{children}</div>,
+    pre: ({ children }) => <div className="not-prose w-full min-w-0 max-w-full">{children}</div>,
     // Style links individually to avoid hover-all issue
     a: (props) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -99,6 +102,31 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
         </code>
       );
     },
+    // Ensure video elements are responsive and always show controls
+    video: (props: React.ClassAttributes<HTMLVideoElement> & React.VideoHTMLAttributes<HTMLVideoElement> & ExtraProps) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { node: _node, width: _w, height: _h, className: _cls, ...rest } = props;
+      return (
+        <video
+          {...rest}
+          controls
+          className="max-w-full w-full h-auto rounded-lg my-4"
+        />
+      );
+    },
+    // Wrap iframes in a 16:9 responsive container (covers YouTube, Vimeo, Bilibili, etc.)
+    iframe: (props: React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & ExtraProps) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { node: _node, width: _w, height: _h, className: _cls, ...rest } = props;
+      return (
+        <div className="relative w-full my-6 rounded-lg overflow-hidden aspect-video">
+          <iframe
+            {...rest}
+            className="absolute inset-0 w-full h-full border-0"
+          />
+        </div>
+      );
+    },
     // Ensure images are responsive and styled, using optimized image if dimensions exist
     // In development mode, use unoptimized images since WebP versions don't exist yet
     img: (props: React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & ExtraProps) => {
@@ -106,16 +134,19 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
       const { src, alt, width, height, node: _node, ...rest } = props;
       const isDev = process.env.NODE_ENV === 'development';
       const imageSrc = src as string;
-      
-      if (width && height) {
+      const isExternal = imageSrc?.startsWith('http') || imageSrc?.startsWith('//');
+
+      if (!isExternal) {
         return (
           <ExportedImage
             src={imageSrc || ''}
             alt={alt || ''}
-            width={Number(width)}
-            height={Number(height)}
+            width={width ? Number(width) : 1200}
+            height={height ? Number(height) : 900}
             className="max-w-full h-auto rounded-lg my-4"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
             unoptimized={isDev}
+            style={(!width || !height) ? { width: '100%', height: 'auto' } : undefined}
           />
         );
       }
@@ -124,8 +155,12 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
     },
   };
 
+  // Merge custom HTML elements not in the Components type (e.g. web components used in MDX)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const allComponents = { ...components, 'rss-feed': () => <RssFeedWidget /> } as any;
+
   return (
-    <div className="prose prose-lg max-w-none text-foreground
+    <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
@@ -137,7 +172,7 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
       <ReactMarkdown
         remarkPlugins={remarkPlugins}
         rehypePlugins={rehypePlugins}
-        components={components}
+        components={allComponents}
       >
         {content}
       </ReactMarkdown>

package/src/components/Navbar.tsx

@@ -101,21 +101,30 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
           href="/"
           className="flex items-center gap-3 text-xl font-serif font-bold text-heading hover:text-accent transition-colors duration-200"
         >
-          <svg
-            viewBox="0 0 32 32"
-            className="w-8 h-8 text-accent"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M16 4 L7 28" />
-            <path d="M16 4 L25 28" />
-            <path d="M11.5 18 H 20.5" />
-            <path d="M20.5 18 Q 26 14 26 8 Q 23 12 20.5 18" fill="currentColor" stroke="none" />
-          </svg>
+          {siteConfig.logo?.src ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={siteConfig.logo.src}
+              alt=""
+              className="h-8 w-auto"
+            />
+          ) : (
+            <svg
+              viewBox="0 0 32 32"
+              className="w-8 h-8 text-accent"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M16 4 L7 28" />
+              <path d="M16 4 L25 28" />
+              <path d="M11.5 18 H 20.5" />
+              <path d="M20.5 18 Q 26 14 26 8 Q 23 12 20.5 18" fill="currentColor" stroke="none" />
+            </svg>
+          )}
           <span>{resolveLocaleValue(siteConfig.title, language)}</span>
         </Link>
 

package/src/components/NoteSidebar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState, useEffect, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import Link from 'next/link';
-import { useScrollY } from '@/hooks/useScrollY';
 import type { BacklinkSource, Heading } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import TocPanel from './TocPanel';
 
 interface NoteSidebarProps {
   headings: Heading[];
@@ -15,86 +15,16 @@ interface NoteSidebarProps {
 
 export default function NoteSidebar({ headings, showToc, backlinks, breadcrumb }: NoteSidebarProps) {
   const { t } = useLanguage();
-  const scrollY = useScrollY();
-  const [activeHeadingId, setActiveHeadingId] = useState('');
-  const [tocCollapsed, setTocCollapsed] = useState(false);
-
-  useEffect(() => {
-    if (!showToc || headings.length === 0) return;
-    const elements = headings
-      .map(h => document.getElementById(h.id))
-      .filter(Boolean) as HTMLElement[];
-    if (!elements.length) return;
-    const scrollPosition = scrollY + 100;
-    let current = elements[0];
-    for (const el of elements) {
-      if (el.offsetTop <= scrollPosition) current = el;
-      else break;
-    }
-    const rafId = requestAnimationFrame(() => { if (current) setActiveHeadingId(current.id); });
-    return () => cancelAnimationFrame(rafId);
-  }, [scrollY, headings, showToc]);
-
-  const scrollToHeading = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
-    e.preventDefault();
-    const el = document.getElementById(id);
-    if (el) {
-      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
-      history.pushState(null, '', `#${id}`);
-    }
-  };
 
   return (
     <aside 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">
       {breadcrumb && <div className="mb-4">{breadcrumb}</div>}
       {/* TOC */}
-      {showToc && headings.length > 0 && (
-        <nav
-          aria-label="Table of contents"
+      {showToc && (
+        <TocPanel
+          headings={headings}
           className={`mb-6 ${backlinks.length > 0 ? 'pb-6 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(p => !p)}
-              className="text-muted hover:text-foreground transition-colors"
-              aria-label={tocCollapsed ? 'Expand' : 'Collapse'}
-            >
-              <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>
-            </button>
-          </div>
-          {!tocCollapsed && (
-            <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
-              {headings.map(h => {
-                const isActive = h.id === activeHeadingId;
-                return (
-                  <li key={h.id}>
-                    <a
-                      href={`#${h.id}`}
-                      onClick={e => scrollToHeading(e, h.id)}
-                      className={`block py-1 text-[13px] leading-snug no-underline transition-colors duration-200 ${
-                        h.level === 3 ? 'pl-6' : 'pl-3'
-                      } ${
-                        isActive
-                          ? 'text-accent font-medium border-l-2 border-accent -ml-px'
-                          : 'text-foreground/70 hover:text-foreground'
-                      }`}
-                    >
-                      {h.text}
-                    </a>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </nav>
+        />
       )}
 
       {/* Backlinks */}

package/src/components/Pagination.tsx

@@ -39,8 +39,8 @@ export default function Pagination({ currentPage, totalPages, basePath }: Pagina
         pages.push('...');
       }
     }
-    // Filter duplicates (like multiple ...)
-    return pages.filter((item, index) => pages.indexOf(item) === index);
+    // Filter consecutive duplicate ellipses
+    return pages.filter((p, i) => p !== '...' || pages[i - 1] !== '...');
   };
 
   const pages = getPages();

package/src/components/PostCard.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import CoverImage from './CoverImage';
+import { getPostUrl } from '@/lib/urls';
 
 export default function PostCard({ post }: { post: PostData }) {
   return (
-    <Link href={`/posts/${post.slug}`} className="group block h-full no-underline">
+    <Link href={getPostUrl(post)} className="group block h-full no-underline">
       <div className="flex flex-col h-full overflow-hidden rounded-xl border border-muted/20 bg-background transition-all duration-300 hover:border-accent/40 hover:shadow-lg hover:shadow-accent/5">
         <div className="relative h-32 w-full overflow-hidden bg-muted/10">
           <CoverImage 

package/src/components/PostList.tsx

@@ -1,22 +1,26 @@
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import CoverImage from './CoverImage';
+import { getPostUrl } from '@/lib/urls';
+import { t } from '@/lib/i18n';
 
 interface PostListProps {
   posts: PostData[];
   showExcerpt?: boolean;
   showTags?: boolean;
+  excerptLines?: 1 | 2;
 }
 
 export default function PostList({
   posts,
   showExcerpt = true,
   showTags = true,
+  excerptLines = 2,
 }: PostListProps) {
   if (posts.length === 0) {
     return (
       <div className="text-center py-12 text-muted">
-        No posts found.
+        {t('no_posts')}
       </div>
     );
   }
@@ -25,78 +29,93 @@ export default function PostList({
     <div className="space-y-6">
       {posts.map((post) => (
         <article key={post.slug} className="group relative">
+          {/* Cover link — sits above card content via z-index, tag/series links use z-10 to appear above it */}
           <Link
-            href={`/posts/${post.slug}`}
-            className="block no-underline"
-          >
-            {/* Content card */}
-            <div className="rounded-2xl border border-muted/20 bg-muted/5 overflow-hidden transition-all duration-300 group-hover:border-accent/30 group-hover:bg-muted/10 group-hover:shadow-lg group-hover:shadow-accent/5">
-              <div className="flex flex-col sm:flex-row">
-                {/* Thumbnail */}
-                <div className="relative w-full sm:w-48 h-40 sm:h-auto flex-shrink-0 overflow-hidden bg-muted/10">
-                  <CoverImage
-                    src={post.coverImage}
-                    title={post.title}
-                    slug={post.slug}
-                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-                  />
-                  {/* Draft badge on mobile */}
+            href={getPostUrl(post)}
+            className="absolute inset-0 z-0 rounded-2xl"
+            aria-label={post.title}
+          />
+
+          {/* Content card */}
+          <div className="rounded-2xl border border-muted/20 bg-muted/5 overflow-hidden transition-all duration-300 group-hover:border-accent/30 group-hover:bg-muted/10 group-hover:shadow-lg group-hover:shadow-accent/5">
+            <div className="flex flex-col sm:flex-row">
+              {/* Thumbnail */}
+              <div className="relative w-full sm:w-48 h-40 sm:h-auto flex-shrink-0 overflow-hidden bg-muted/10">
+                <CoverImage
+                  src={post.coverImage}
+                  title={post.title}
+                  slug={post.slug}
+                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                />
+                {/* Draft badge on mobile */}
+                {post.draft && (
+                  <div className="absolute top-3 left-3 text-[10px] font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-0.5 rounded tracking-wider">
+                    DRAFT
+                  </div>
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-5 sm:p-6 flex flex-col overflow-hidden">
+                {/* Meta info */}
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-muted mb-3">
+                  {post.category && (
+                    <>
+                      <span className="text-accent uppercase tracking-wider">{post.category}</span>
+                      <span className="hidden sm:inline">•</span>
+                    </>
+                  )}
+                  <span>{post.readingTime}</span>
+                  <span className="hidden sm:inline">•</span>
+                  <span>{post.date}</span>
                   {post.draft && (
-                    <div className="absolute top-3 left-3 text-[10px] font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-0.5 rounded tracking-wider">
+                    <span className="hidden sm:inline text-[10px] font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded tracking-wider">
                       DRAFT
-                    </div>
+                    </span>
                   )}
                 </div>
 
-                {/* Content */}
-                <div className="flex-1 p-5 sm:p-6 flex flex-col">
-                  {/* Meta info */}
-                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-muted mb-3">
-                    <span>{post.date}</span>
-                    <span className="hidden sm:inline">•</span>
-                    <span className="text-accent/80">{post.readingTime}</span>
-                    {post.category && (
-                      <>
-                        <span className="hidden sm:inline">•</span>
-                        <span className="uppercase tracking-wider">{post.category}</span>
-                      </>
-                    )}
-                    {post.draft && (
-                      <span className="hidden sm:inline text-[10px] font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded tracking-wider">
-                        DRAFT
-                      </span>
-                    )}
-                  </div>
+                {/* Title */}
+                <h3 className="font-serif text-xl font-bold text-heading mb-2 leading-snug group-hover:text-accent transition-colors line-clamp-2">
+                  {post.title}
+                </h3>
 
-                  {/* Title */}
-                  <h3 className="font-serif text-xl font-bold text-heading mb-2 leading-snug group-hover:text-accent transition-colors line-clamp-2">
-                    {post.title}
-                  </h3>
+                {/* Series indicator */}
+                {post.series && post.seriesTitle && (
+                  <p className="text-xs text-muted mb-2">
+                    <Link
+                      href={`/series/${post.series}`}
+                      className="relative z-10 hover:text-accent transition-colors no-underline"
+                    >
+                      {t('series')}: {post.seriesTitle}
+                    </Link>
+                  </p>
+                )}
 
-                  {/* Excerpt */}
-                  {showExcerpt && post.excerpt && (
-                    <p className="text-sm text-muted leading-relaxed line-clamp-2 mb-4">
-                      {post.excerpt}
-                    </p>
-                  )}
+                {/* Excerpt */}
+                {showExcerpt && (post.subtitle || post.excerpt) && (
+                  <p className={`text-sm text-muted leading-relaxed ${excerptLines === 1 ? 'line-clamp-1' : 'line-clamp-2 mb-4'}`}>
+                    {post.subtitle || post.excerpt}
+                  </p>
+                )}
 
-                  {/* Tags */}
-                  {showTags && post.tags && post.tags.length > 0 && (
-                    <div className="mt-auto flex flex-wrap gap-2">
-                      {post.tags.slice(0, 3).map(tag => (
-                        <span
-                          key={tag}
-                          className="text-xs px-2 py-0.5 rounded-full bg-muted/10 text-muted/70"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                </div>
+                {/* Tags */}
+                {showTags && post.tags && post.tags.length > 0 && (
+                  <div className="mt-auto flex flex-wrap gap-2">
+                    {post.tags.slice(0, 3).map(tag => (
+                      <Link
+                        key={tag}
+                        href={`/tags/${encodeURIComponent(tag)}`}
+                        className="relative z-10 text-xs px-2 py-0.5 rounded-full bg-muted/10 text-muted/70 hover:bg-accent/10 hover:text-accent transition-colors no-underline"
+                      >
+                        {tag}
+                      </Link>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
-          </Link>
+          </div>
         </article>
       ))}
     </div>

package/src/components/PostNavigation.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import { t } from '@/lib/i18n';
+import { getPostUrl } from '@/lib/urls';
 
 interface PostNavigationProps {
   prev: PostData | null;
@@ -15,9 +16,9 @@ export default function PostNavigation({ prev, next }: PostNavigationProps) {
       className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-1 sm:grid-cols-2 gap-3"
       aria-label={t('post_navigation')}
     >
-      {prev ? (
+      {prev && (
         <Link
-          href={`/posts/${prev.slug}`}
+          href={getPostUrl(prev)}
           className="group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline"
         >
           <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted flex items-center gap-1.5">
@@ -31,12 +32,12 @@ export default function PostNavigation({ prev, next }: PostNavigationProps) {
           </span>
           <span className="text-xs font-mono text-muted/60">{prev.date}</span>
         </Link>
-      ) : <div />}
+      )}
 
-      {next ? (
+      {next && (
         <Link
-          href={`/posts/${next.slug}`}
-          className="group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline sm:items-end sm:text-right"
+          href={getPostUrl(next)}
+          className={`group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline sm:items-end sm:text-right${!prev ? ' sm:col-start-2' : ''}`}
         >
           <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted flex items-center gap-1.5">
             {t('next')}
@@ -49,7 +50,7 @@ export default function PostNavigation({ prev, next }: PostNavigationProps) {
           </span>
           <span className="text-xs font-mono text-muted/60">{next.date}</span>
         </Link>
-      ) : <div />}
+      )}
     </nav>
   );
 }