@fecommunity/reactpress-theme-starter 1.0.0-beta.0

package/components/article/ArticleRecommend.tsx

@@ -0,0 +1,362 @@
+'use client'
+
+import ArticleList from '@/components/article/ArticleList'
+import Link from '@/components/shared/Link'
+import SectionHeading, { EmptyState } from '@/components/shared/SectionHeading'
+import { ArticleProvider } from '@/lib/providers/client'
+import { normalizeList, normalizePaginated } from '@/lib/reactpress/normalizeApiResponse'
+import { EyeIcon, HeartIcon } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { slimArticlesForList } from '@fecommunity/reactpress-toolkit/theme'
+import type { IArticle } from '@fecommunity/reactpress-toolkit/types'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type TransitionEvent,
+} from 'react'
+
+interface ArticleRecommendProps {
+  articleId?: string | null
+  mode?: 'inline' | 'vertical'
+  needTitle?: boolean
+  deferFetch?: boolean
+  /** Render as article page section (heading + panel wrapper). */
+  asPageSection?: boolean
+  /** Hide entire section when loaded with no articles. */
+  hideWhenEmpty?: boolean
+}
+
+type RecommendArticle = {
+  id: string
+  title: string
+  views: number
+  summary?: string
+  likes?: number
+  publishAt?: string
+  cover?: string
+  category?: { value: string; label: string }
+}
+
+const SKELETON_ROWS = 5
+const INLINE_VISIBLE = 5
+const INLINE_FETCH_SIZE = 15
+const VERTICAL_FETCH_SIZE = 6
+const SCROLL_ROW_PX = 42
+const SCROLL_INTERVAL_MS = 3600
+
+function formatCompactViews(views: number): string {
+  if (views >= 10000) {
+    return `${(views / 10000).toFixed(1).replace(/\.0$/, '')}w`
+  }
+  if (views >= 1000) {
+    return `${(views / 1000).toFixed(1).replace(/\.0$/, '')}k`
+  }
+  return String(views)
+}
+
+function dedupeById(articles: RecommendArticle[]): RecommendArticle[] {
+  const seen = new Set<string>()
+  return articles.filter((article) => {
+    if (seen.has(article.id)) return false
+    seen.add(article.id)
+    return true
+  })
+}
+
+/** Recommend API may still cap at 6 on older backends — pad with hot articles from list API. */
+async function loadRecommendArticles(
+  articleId: string | null,
+  fetchSize: number
+): Promise<RecommendArticle[]> {
+  const recommended = slimArticlesForList(
+    normalizeList<IArticle>(await ArticleProvider.getRecommend(articleId, fetchSize))
+  )
+  let pool = dedupeById(recommended)
+  pool.sort((a, b) => b.views - a.views)
+
+  if (pool.length >= fetchSize || articleId) {
+    return pool.slice(0, fetchSize)
+  }
+
+  const [listRows] = normalizePaginated<IArticle>(
+    await ArticleProvider.getArticles({
+      page: 1,
+      pageSize: Math.max(fetchSize * 2, 24),
+      status: 'publish',
+    })
+  )
+
+  pool = dedupeById([...pool, ...slimArticlesForList(listRows)])
+  pool.sort((a, b) => b.views - a.views)
+  return pool.slice(0, fetchSize)
+}
+
+function RecommendSkeleton() {
+  return (
+    <ul className="rp-recommend-list m-0 list-none" aria-hidden>
+      {Array.from({ length: SKELETON_ROWS }, (_, i) => (
+        <li key={i} className="rp-recommend-item">
+          <div className="flex items-center gap-2.5 px-4 py-2.5">
+            <span className="h-4 w-5 shrink-0 animate-pulse rounded bg-[var(--border-color)]" />
+            <span className="h-3.5 flex-1 animate-pulse rounded bg-[var(--border-color)]" />
+            <span className="h-3 w-9 shrink-0 animate-pulse rounded bg-[var(--border-color)]" />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function RecommendRow({
+  article,
+  rank,
+  compact = false,
+}: {
+  article: RecommendArticle
+  rank: number
+  compact?: boolean
+}) {
+  return (
+    <li className={compact ? 'rp-recommend-scroll-row' : 'rp-recommend-item'}>
+      <Link
+        href={`/article/${article.id}`}
+        title={article.title}
+        className="rp-recommend-link group flex items-center gap-3 px-4 py-2.5 no-underline"
+      >
+        <span className="rp-recommend-rank" data-rank={rank} aria-hidden>
+          {rank}
+        </span>
+        <span className="rp-recommend-title min-w-0 flex-1 truncate text-[var(--main-text-color)] transition-colors group-hover:text-[var(--primary-color)]">
+          {article.title}
+        </span>
+        <span className="rp-recommend-views inline-flex shrink-0 items-center gap-1 tabular-nums">
+          <EyeIcon size={12} />
+          <span>{formatCompactViews(article.views)}</span>
+        </span>
+      </Link>
+    </li>
+  )
+}
+
+function RecommendInlineScroller({ articles }: { articles: RecommendArticle[] }) {
+  const [offset, setOffset] = useState(0)
+  const [trackY, setTrackY] = useState(0)
+  const [moving, setMoving] = useState(false)
+  const [paused, setPaused] = useState(false)
+  const [instant, setInstant] = useState(false)
+  const [reduceMotion, setReduceMotion] = useState(false)
+  const resetTimerRef = useRef<number | null>(null)
+
+  const rankById = useMemo(() => {
+    const map = new Map<string, number>()
+    articles.forEach((article, index) => map.set(article.id, index + 1))
+    return map
+  }, [articles])
+
+  const loopArticles = useMemo(() => [...articles, ...articles], [articles])
+
+  const windowItems = useMemo(
+    () =>
+      loopArticles.slice(offset, offset + INLINE_VISIBLE + 1).map((article, index) => ({
+        article,
+        rank: rankById.get(article.id) ?? offset + index + 1,
+        key: `${article.id}-${offset + index}`,
+      })),
+    [loopArticles, offset, rankById]
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const sync = () => setReduceMotion(mq.matches)
+    sync()
+    mq.addEventListener('change', sync)
+    return () => mq.removeEventListener('change', sync)
+  }, [])
+
+  const canScroll = articles.length > INLINE_VISIBLE && !reduceMotion
+
+  const clearResetTimer = useCallback(() => {
+    if (resetTimerRef.current !== null) {
+      window.clearTimeout(resetTimerRef.current)
+      resetTimerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    setOffset(0)
+    setTrackY(0)
+    setMoving(false)
+    setInstant(false)
+  }, [articles])
+
+  useEffect(() => {
+    if (!canScroll || paused || moving) return undefined
+
+    const timer = window.setInterval(() => {
+      setMoving(true)
+      setTrackY(-SCROLL_ROW_PX)
+    }, SCROLL_INTERVAL_MS)
+
+    return () => window.clearInterval(timer)
+  }, [canScroll, moving, paused])
+
+  useEffect(() => clearResetTimer, [clearResetTimer])
+
+  const handleTrackTransitionEnd = (event: TransitionEvent<HTMLUListElement>) => {
+    if (event.target !== event.currentTarget || event.propertyName !== 'transform' || instant) {
+      return
+    }
+    if (!moving) return
+
+    setInstant(true)
+    setOffset((prev) => (prev + 1) % articles.length)
+    setTrackY(0)
+    setMoving(false)
+    resetTimerRef.current = window.setTimeout(() => {
+      setInstant(false)
+      resetTimerRef.current = null
+    }, 24)
+  }
+
+  if (!canScroll) {
+    return (
+      <ul className="rp-recommend-list rp-recommend-fade-in m-0 list-none">
+        {articles.map((article, index) => (
+          <RecommendRow key={article.id} article={article} rank={index + 1} />
+        ))}
+      </ul>
+    )
+  }
+
+  return (
+    <div
+      className={`rp-recommend-scroll rp-recommend-fade-in${paused ? 'is-paused' : ''}`}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocusCapture={() => setPaused(true)}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setPaused(false)
+        }
+      }}
+    >
+      <div className={`rp-recommend-scroll-viewport${moving ? 'is-moving' : ''}`} aria-live="off">
+        <ul
+          className={`rp-recommend-list rp-recommend-scroll-track m-0 list-none ${instant ? 'is-instant' : ''}${moving ? 'is-moving' : ''}`}
+          style={{ transform: `translate3d(0, ${trackY}px, 0)` }}
+          onTransitionEnd={handleTrackTransitionEnd}
+        >
+          {windowItems.map(({ article, rank, key }) => (
+            <RecommendRow key={key} article={article} rank={rank} compact />
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default function ArticleRecommend({
+  mode = 'vertical',
+  articleId = null,
+  needTitle = true,
+  deferFetch = false,
+  asPageSection = false,
+  hideWhenEmpty = false,
+}: ArticleRecommendProps) {
+  const { t } = useLocale()
+  const requestKey = `${articleId ?? ''}:${mode}`
+  const [fetchedKey, setFetchedKey] = useState<string | undefined>(undefined)
+  const [articles, setArticles] = useState<RecommendArticle[]>([])
+
+  useEffect(() => {
+    if (fetchedKey === requestKey) return
+    let cancelled = false
+
+    const fetchSize = mode === 'inline' ? INLINE_FETCH_SIZE : VERTICAL_FETCH_SIZE
+
+    const run = () => {
+      loadRecommendArticles(articleId, fetchSize)
+        .then((next) => {
+          if (cancelled) return
+          setArticles(next)
+          setFetchedKey(requestKey)
+        })
+        .catch(() => {
+          if (cancelled) return
+          setArticles([])
+          setFetchedKey(requestKey)
+        })
+    }
+
+    if (deferFetch && typeof window !== 'undefined' && 'requestIdleCallback' in window) {
+      const id = window.requestIdleCallback(() => run(), { timeout: 2500 })
+      return () => {
+        cancelled = true
+        window.cancelIdleCallback(id)
+      }
+    }
+
+    run()
+    return () => {
+      cancelled = true
+    }
+  }, [articleId, deferFetch, fetchedKey, requestKey, mode])
+
+  const ready = fetchedKey === requestKey
+  const showSkeleton = !ready && articles.length === 0
+  const showEmpty = ready && articles.length === 0
+
+  if (mode === 'vertical') {
+    if (hideWhenEmpty && showEmpty) return null
+
+    let body: ReactNode
+    if (showSkeleton) {
+      body = <RecommendSkeleton />
+    } else if (showEmpty) {
+      body = <EmptyState />
+    } else {
+      body = (
+        <ArticleList
+          articles={articles as Parameters<typeof ArticleList>[0]['articles']}
+          density="feed"
+        />
+      )
+    }
+
+    if (asPageSection) {
+      return (
+        <section className="rp-article-recommend">
+          <SectionHeading>{t('recommendToReading')}</SectionHeading>
+          <div className="rp-article-recommend-panel">{body}</div>
+        </section>
+      )
+    }
+
+    return body
+  }
+
+  return (
+    <div className="rp-widget-panel rp-sidebar-widget mb-5 overflow-hidden rounded-xl bg-[var(--bg-box)] leading-snug shadow-[var(--box-shadow)] ring-1 ring-black/5 dark:ring-white/5">
+      {needTitle ? (
+        <div className="rp-sidebar-widget__header">
+          <HeartIcon size={16} className="mr-2 inline-block text-[var(--primary-color)]" />
+          <span>{t('recommendToReading')}</span>
+        </div>
+      ) : null}
+
+      <div className="rp-sidebar-widget__body">
+        {showSkeleton ? (
+          <RecommendSkeleton />
+        ) : showEmpty ? (
+          <EmptyState />
+        ) : (
+          <RecommendInlineScroller articles={articles} />
+        )}
+      </div>
+    </div>
+  )
+}

package/components/article/ArticleTocPanel.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { ArticleToc, type TocItem } from '@fecommunity/reactpress-toolkit/ui/content'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+
+interface ArticleTocPanelProps {
+  tocs: TocItem[]
+}
+
+export default function ArticleTocPanel({ tocs }: ArticleTocPanelProps) {
+  const { t } = useLocale()
+  if (!tocs.length) return null
+
+  return (
+    <nav className="rp-toc-panel rp-toc-panel--minimal" aria-label={t('toc')}>
+      <ArticleToc items={tocs} showTitle={false} maxHeight="none" indentStep={6} />
+    </nav>
+  )
+}

package/components/article/ArticleViewClient.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import ArticleCopyrightBar from '@/components/article/ArticleCopyrightBar'
+import ArticleReadingProgress from '@/components/article/ArticleReadingProgress'
+import ArticleRecommend from '@/components/article/ArticleRecommend'
+import ArticleTocPanel from '@/components/article/ArticleTocPanel'
+import SectionHeading from '@/components/shared/SectionHeading'
+import CommentSection from '@/components/comment/CommentSection'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import ReadingContent from '@/components/article/ReadingContent'
+import Link from '@/components/shared/Link'
+import { ArticleProvider } from '@/lib/providers/client'
+import { estimateReadMinutes } from '@/lib/utils/reading'
+import { getColorFromNumber } from '@/lib/utils/colors'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import {
+  Image,
+  ImageViewer,
+  LocaleTime,
+  parseArticleToc,
+} from '@fecommunity/reactpress-toolkit/ui/content'
+import {
+  resolveImageUrl,
+  useSiteCatalog,
+  useSiteSetting,
+} from '@fecommunity/reactpress-toolkit/theme'
+import type { IArticle } from '@fecommunity/reactpress-toolkit/types'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+interface ArticleViewClientProps {
+  article: IArticle
+}
+
+function tagLabel(tag: string | { label?: string }) {
+  return typeof tag === 'string' ? tag : (tag?.label ?? '')
+}
+
+function tagValue(tag: string | { value?: string; label?: string }) {
+  return typeof tag === 'string' ? tag : (tag?.value ?? tag?.label ?? '')
+}
+
+export default function ArticleViewClient({ article: initialArticle }: ArticleViewClientProps) {
+  const { t } = useLocale()
+  const setting = useSiteSetting()
+  const { locale } = useSiteCatalog()
+  const [article, setArticle] = useState(initialArticle)
+  const [needPassword, setNeedPassword] = useState(Boolean(initialArticle.needPassword))
+  const passwdRef = useRef('')
+  const tocs = parseArticleToc(article.toc ?? '')
+  const readMinutes = useMemo(() => estimateReadMinutes(article.html ?? ''), [article.html])
+  const readTimeLabel = locale === 'zh' ? `${readMinutes} 分钟阅读` : `${readMinutes} min read`
+
+  const likesApi = useCallback(
+    (id: string, type: 'like' | 'dislike') =>
+      ArticleProvider.updateArticleLikes(id, type).then((res) => res.likes),
+    []
+  )
+
+  useEffect(() => {
+    setArticle(initialArticle)
+    setNeedPassword(Boolean(initialArticle.needPassword))
+  }, [initialArticle])
+
+  useEffect(() => {
+    if (!needPassword) {
+      ArticleProvider.updateArticleViews(article.id)
+    }
+  }, [needPassword, article.id])
+
+  const checkPassword = useCallback(() => {
+    ArticleProvider.checkPassword(article.id, passwdRef.current).then((res) => {
+      if (res.pass) {
+        setArticle((prev) => ({ ...prev, ...res }))
+        setNeedPassword(false)
+      }
+    })
+  }, [article.id])
+
+  if (needPassword) {
+    return (
+      <div className="mx-auto max-w-lg rounded-lg bg-[var(--bg-box)] p-6 shadow-[var(--box-shadow)]">
+        <h2 className="mt-0 text-lg font-semibold">{t('protectedArticleMsg')}</h2>
+        <input
+          type="password"
+          onChange={(e) => {
+            passwdRef.current = e.target.value
+          }}
+          className="mt-4 w-full rounded-md border border-[var(--border-color)] px-3 py-2"
+          placeholder={t('passwd')}
+        />
+        <div className="mt-4 flex gap-3">
+          <button
+            type="button"
+            onClick={checkPassword}
+            className="rounded-md bg-[var(--primary-color)] px-4 py-2 text-white"
+          >
+            {t('confirm')}
+          </button>
+          <Link
+            href="/"
+            className="rounded-md border border-[var(--border-color)] px-4 py-2 no-underline"
+          >
+            {t('backHome')}
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  const content = (
+    <ImageViewer containerSelector="#js-article-wrapper">
+      <div className="rp-article-page">
+        <article id="js-article-wrapper" className="rp-article-wrap">
+          {setting.systemUrl ? (
+            <>
+              <meta
+                itemProp="url"
+                content={new URL(`/article/${article.id}`, setting.systemUrl).href}
+              />
+              <meta itemProp="headline" content={article.title} />
+              {article.tags?.length ? (
+                <meta itemProp="keywords" content={article.tags.map(tagLabel).join(' ')} />
+              ) : null}
+              <meta itemProp="datePublished" content={article.publishAt} />
+              {article.cover ? (
+                <meta itemProp="image" content={resolveImageUrl(article.cover, 'large')} />
+              ) : null}
+            </>
+          ) : null}
+
+          {article.cover ? (
+            <div className="rp-article-cover-hero rp-cover-zoom-host">
+              <Image
+                url={article.cover}
+                size="large"
+                alt={t('articleCover')}
+                className="rp-cover-zoom h-full w-full object-cover"
+              />
+            </div>
+          ) : null}
+
+          <div className="rp-article-inner">
+            <header className="rp-article-header">
+              <div className="rp-article-meta-row">
+                <time className="rp-article-meta-chip">
+                  <LocaleTime date={article.publishAt} locale={locale} />
+                </time>
+                <span className="rp-article-meta-dot" aria-hidden />
+                <span className="rp-article-meta-chip">{readTimeLabel}</span>
+                <span className="rp-article-meta-dot" aria-hidden />
+                <span className="rp-article-meta-chip">
+                  {article.views} {t('readings')}
+                </span>
+              </div>
+              <h1 className="rp-article-title">{article.title}</h1>
+              {article.tags?.length ? (
+                <div className="rp-article-tags rp-article-tags--header">
+                  {article.tags.map((tag, index) => (
+                    <Link
+                      key={tagValue(tag) || index}
+                      href={`/tag/${tagValue(tag)}`}
+                      className="rp-article-tag rp-article-tag--hash"
+                      style={{ color: getColorFromNumber(index) }}
+                    >
+                      #{tagLabel(tag)}
+                    </Link>
+                  ))}
+                </div>
+              ) : null}
+            </header>
+
+            <div className="rp-article-body">
+              <ReadingContent content={article.html} />
+            </div>
+
+            <footer className="rp-article-footer">
+              <ArticleCopyrightBar publishAt={article.publishAt} />
+            </footer>
+          </div>
+        </article>
+
+        {article.isCommentable ? (
+          <section id="rp-comment-section" className="rp-comment-wrap">
+            <SectionHeading>{t('comment')}</SectionHeading>
+            <div className="rp-comment-panel">
+              <CommentSection hostId={article.id} />
+            </div>
+          </section>
+        ) : null}
+
+        <ArticleRecommend
+          articleId={article.id}
+          needTitle={false}
+          mode="vertical"
+          asPageSection
+          hideWhenEmpty
+        />
+      </div>
+    </ImageViewer>
+  )
+
+  return (
+    <>
+      <ArticleReadingProgress />
+      <DoubleColumnLayout
+        leftNode={content}
+        rightNode={tocs.length ? <ArticleTocPanel tocs={tocs} /> : null}
+        sidebarCollapsible={tocs.length > 0}
+        likesProps={{
+          defaultCount: article.likes,
+          id: article.id,
+          api: likesApi,
+        }}
+        bookmarkId={article.id}
+        showComment={Boolean(article.isCommentable)}
+        showShare
+        coverPreloadUrl={article.cover ? resolveImageUrl(article.cover, 'large') : undefined}
+      />
+    </>
+  )
+}

package/components/article/CategoryMenu.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { usePathname } from 'next/navigation'
+import { useMemo } from 'react'
+
+interface Category {
+  value: string
+  label: string
+}
+
+interface CategoryMenuProps {
+  categories: Category[]
+}
+
+function normalizePath(pathname: string | null) {
+  const raw = (pathname ?? '/').replace(/\/$/, '') || '/'
+  return raw
+}
+
+export default function CategoryMenu({ categories }: CategoryMenuProps) {
+  const { t } = useLocale()
+  const pathname = usePathname()
+  const normalizedPath = normalizePath(pathname)
+  const isHome = normalizedPath === '/'
+
+  const selectedKey = useMemo(() => {
+    if (isHome) return 'all'
+    const categorySlug = normalizedPath.replace(/^\/category\//, '')
+    const active = categories.find((category) => category.value === categorySlug)
+    return active?.value ?? ''
+  }, [normalizedPath, categories, isHome])
+
+  return (
+    <nav className="rp-category-menu-glass rounded-t-xl" aria-label={t('categoryTitle')}>
+      <ul className="m-0 flex [scrollbar-width:none] list-none flex-nowrap gap-0 overflow-x-auto border-b border-[color-mix(in_srgb,var(--border-color)_65%,transparent)] p-2 [-ms-overflow-style:none] md:flex-wrap [&::-webkit-scrollbar]:hidden">
+        <li className="shrink-0 md:shrink">
+          <Link
+            href="/"
+            className={`inline-block rounded-lg px-4 leading-10 whitespace-nowrap no-underline transition-all duration-300 ${
+              selectedKey === 'all'
+                ? 'bg-[color-mix(in_srgb,var(--primary-color)_12%,transparent)] font-medium text-[var(--primary-color)] dark:text-[#ff6659]'
+                : 'text-[var(--main-text-color)] hover:bg-[color-mix(in_srgb,var(--primary-color)_8%,transparent)] hover:text-[var(--primary-color)] dark:hover:text-[#ff6659]'
+            }`}
+          >
+            {t('all')}
+          </Link>
+        </li>
+        {categories.map((category) => (
+          <li key={category.value} className="shrink-0 md:shrink">
+            <Link
+              href={`/category/${category.value}`}
+              className={`inline-block rounded-lg px-4 leading-10 whitespace-nowrap no-underline transition-all duration-300 ${
+                selectedKey === category.value
+                  ? 'bg-[color-mix(in_srgb,var(--primary-color)_12%,transparent)] font-medium text-[var(--primary-color)] dark:text-[#ff6659]'
+                  : 'text-[var(--main-text-color)] hover:bg-[color-mix(in_srgb,var(--primary-color)_8%,transparent)] hover:text-[var(--primary-color)] dark:hover:text-[#ff6659]'
+              }`}
+            >
+              {category.label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}