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

package/components/article/ArticleList.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import Logo from '@/components/shared/logo.svg'
+import { getColorFromNumber, getTagStyle } from '@/lib/utils/colors'
+import { ClockIcon, EyeIcon, FolderIcon, HeartIcon } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { Image, LocaleTime } from '@fecommunity/reactpress-toolkit/ui/content'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+import { useEffect, useMemo, useRef } from 'react'
+
+interface Article {
+  id: string
+  title: string
+  cover?: string
+  summary: string
+  category?: { value: string; label: string }
+  likes: number
+  views: number
+  publishAt: string
+}
+
+interface ArticleListProps {
+  articles: Article[]
+  /** Tighter spacing for recommend blocks. */
+  density?: 'feed' | 'compact'
+}
+
+const COVER_WIDTH = 200
+const COVER_HEIGHT = 114
+
+function ArticleCard({
+  article,
+  categoryIndex,
+  index,
+  animate = false,
+  compact = false,
+}: {
+  article: Article
+  categoryIndex: number
+  index: number
+  animate?: boolean
+  compact?: boolean
+}) {
+  const { locale } = useLocale()
+  const eager = index < 3
+
+  return (
+    <div
+      className={`rp-article-card group/card rp-surface relative flex w-full justify-between overflow-hidden rounded-xl border border-transparent ring-1 ring-black/5 transition-[box-shadow,border-color] duration-300 ease-out hover:border-[color-mix(in_srgb,var(--border-color)_70%,transparent)] hover:shadow-[0_8px_24px_color-mix(in_srgb,var(--main-text-color)_10%,transparent),var(--box-shadow)] dark:ring-white/5 hover:[&_header_.title]:text-[var(--primary-color)] ${
+        compact ? 'p-3' : 'p-4'
+      } ${animate ? 'rp-home-card-enter' : ''}`}
+    >
+      <span
+        className="absolute top-5 left-0 h-6 w-1 rounded-r bg-[var(--primary-color)] opacity-90 shadow-sm transition-opacity duration-300 group-hover/card:opacity-100"
+        aria-hidden
+      />
+      <div className="rp-cover-zoom-host mr-2.5 h-[114px] w-[200px] shrink-0 overflow-hidden rounded-lg bg-[var(--bg-second)] max-md:h-20 max-md:w-[140px]">
+        {article.cover ? (
+          <Link href={`/article/${article.id}`} className="block h-full w-full overflow-hidden">
+            <Image
+              url={article.cover}
+              size="thumb"
+              alt={`${article.title} cover`}
+              width={COVER_WIDTH}
+              height={COVER_HEIGHT}
+              loading={eager ? 'eager' : 'lazy'}
+              fetchPriority={index === 0 ? 'high' : undefined}
+              decoding={index === 0 ? 'sync' : 'async'}
+              className="rp-article-cover-img rp-cover-zoom h-full w-full object-contain object-center"
+            />
+          </Link>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-[var(--bg-second)]">
+            <Logo className="h-12 w-auto max-w-[155px] object-contain" aria-label="ReactPress" />
+          </div>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <header className="flex items-start gap-1">
+          <Link
+            href={`/article/${article.id}`}
+            className="title line-clamp-2 min-w-0 flex-1 text-base leading-snug font-semibold text-[var(--main-text-color)] no-underline transition-colors duration-300"
+          >
+            {article.title}
+          </Link>
+          {article.category && categoryIndex >= 0 ? (
+            <Link
+              href={`/category/${article.category.value}`}
+              className="rp-category-tag ml-1 inline-flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-xs no-underline transition-opacity duration-200 hover:opacity-80"
+              style={getTagStyle(getColorFromNumber(categoryIndex))}
+            >
+              <FolderIcon size={12} className="opacity-90" />
+              <span>{article.category.label}</span>
+            </Link>
+          ) : null}
+        </header>
+        <Link href={`/article/${article.id}`} className="mt-2 block no-underline">
+          <main className="flex flex-col justify-between">
+            <div
+              className="rp-rich-text line-clamp-2 text-sm text-[var(--second-text-color)] max-md:line-clamp-1"
+              dangerouslySetInnerHTML={{ __html: article.summary }}
+            />
+            <div className="mt-3 flex items-center justify-between text-sm whitespace-nowrap text-[#8590a6]">
+              <div className="flex items-center gap-2">
+                <span className="inline-flex items-center text-[var(--second-text-color)]">
+                  <HeartIcon size={14} />
+                  <span className="ml-1.5">{article.likes}</span>
+                </span>
+                <span>·</span>
+                <span className="inline-flex items-center text-[var(--second-text-color)]">
+                  <EyeIcon size={14} />
+                  <span className="ml-1.5">{article.views}</span>
+                </span>
+              </div>
+              <span className="inline-flex items-center max-md:hidden">
+                <ClockIcon size={14} />
+                <span className="ml-1.5">
+                  <LocaleTime date={article.publishAt} format="yyyy-MM-dd" locale={locale} />
+                </span>
+              </span>
+            </div>
+          </main>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default function ArticleList({ articles = [], density = 'feed' }: ArticleListProps) {
+  const { t } = useLocale()
+  const { categories } = useSiteCatalog()
+  const compact = density === 'compact'
+  const animatedCountRef = useRef(0)
+
+  useEffect(() => {
+    animatedCountRef.current = articles.length
+  }, [articles])
+
+  const categoryIndices = useMemo(
+    () =>
+      articles.map((article) =>
+        categories?.findIndex((category) => category?.value === article?.category?.value)
+      ),
+    [articles, categories]
+  )
+
+  const animateFromIndex = animatedCountRef.current
+
+  return (
+    <div className="rp-article-list rp-home-stagger flex w-full flex-col gap-4">
+      {articles.length ? (
+        articles.map((article, index) => (
+          <ArticleCard
+            key={article.id}
+            article={article}
+            categoryIndex={categoryIndices[index]}
+            index={index}
+            animate={index >= animateFromIndex}
+            compact={compact}
+          />
+        ))
+      ) : (
+        <div className="rounded-xl bg-[var(--bg-box)] p-8 text-center text-[var(--second-text-color)]">
+          {t('empty')}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/article/ArticleReadingChrome.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+type ReadingChromeMode = 'side' | 'mobile' | 'toc' | 'all'
+
+interface ArticleReadingChromeProps {
+  actions: ReactNode
+  mobileActions: ReactNode
+  showToc: boolean
+  tocExpanded: boolean
+  onToggleToc: () => void
+  tocPanel: ReactNode
+  collapseLabel: string
+  expandLabel: string
+  tocLabel: string
+  mode?: ReadingChromeMode
+}
+
+function TocIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      aria-hidden
+    >
+      <path d="M4 6h16M4 12h10M4 18h14" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+export default function ArticleReadingChrome({
+  actions,
+  mobileActions,
+  showToc,
+  tocExpanded,
+  onToggleToc,
+  tocPanel,
+  collapseLabel,
+  expandLabel,
+  tocLabel,
+  mode = 'all',
+}: ArticleReadingChromeProps) {
+  const showSide = mode === 'side' || mode === 'all'
+  const showMobile = mode === 'mobile' || mode === 'all'
+  const showTocDrawer = mode === 'toc' || mode === 'all'
+
+  return (
+    <>
+      {showToc && showTocDrawer ? (
+        <>
+          <button
+            type="button"
+            className={`rp-toc-toggle${tocExpanded ? 'is-open' : ''}`}
+            aria-label={tocExpanded ? collapseLabel : expandLabel}
+            aria-expanded={tocExpanded}
+            aria-controls="rp-toc-fixed-drawer"
+            onClick={onToggleToc}
+          >
+            <TocIcon />
+          </button>
+          <aside
+            id="rp-toc-fixed-drawer"
+            className={`rp-toc-fixed-drawer${tocExpanded ? '' : 'is-collapsed'}`}
+            aria-hidden={!tocExpanded}
+          >
+            <div className="rp-toc-fixed-drawer__inner">{tocPanel}</div>
+          </aside>
+        </>
+      ) : null}
+
+      {showSide && actions ? (
+        <nav className="rp-reading-dock rp-reading-dock--side" aria-label="Reading actions">
+          <div className="rp-reading-dock__actions">{actions}</div>
+        </nav>
+      ) : null}
+
+      {showMobile ? (
+        <nav className="rp-reading-dock rp-reading-dock--bottom" aria-label="Reading actions">
+          <div className="rp-reading-dock__inner rp-reading-dock__inner--bottom">
+            {showToc ? (
+              <button
+                type="button"
+                className={`rp-reading-dock__toc rp-reading-dock__toc--mobile${tocExpanded ? 'is-open' : ''}`}
+                aria-label={tocExpanded ? collapseLabel : expandLabel}
+                aria-expanded={tocExpanded}
+                aria-controls="rp-toc-fixed-drawer"
+                onClick={onToggleToc}
+              >
+                <TocIcon />
+                <span className="rp-reading-dock__toc-label">{tocLabel}</span>
+              </button>
+            ) : null}
+            {mobileActions}
+          </div>
+        </nav>
+      ) : null}
+    </>
+  )
+}

package/components/article/ArticleReadingProgress.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useHeaderTop } from '@/lib/utils/headerPosition'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+const ARTICLE_SELECTOR = '#js-article-wrapper'
+
+function measureProgress(): number {
+  const article = document.querySelector(ARTICLE_SELECTOR)
+  if (!article) return 0
+
+  const rect = article.getBoundingClientRect()
+  const articleHeight = rect.height
+  const viewportHeight = window.innerHeight
+  const scrollable = articleHeight - viewportHeight
+
+  if (scrollable <= 0) {
+    return rect.top <= 0 ? 100 : 0
+  }
+
+  const scrolled = -rect.top
+  return Math.min(100, Math.max(0, (scrolled / scrollable) * 100))
+}
+
+export default function ArticleReadingProgress() {
+  const headerTop = useHeaderTop()
+  const [progress, setProgress] = useState(0)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    let frame = 0
+
+    const update = () => {
+      frame = 0
+      setProgress(measureProgress())
+    }
+
+    const onScroll = () => {
+      if (frame) return
+      frame = window.requestAnimationFrame(update)
+    }
+
+    update()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onScroll, { passive: true })
+
+    return () => {
+      if (frame) window.cancelAnimationFrame(frame)
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onScroll)
+    }
+  }, [])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <div
+      className="rp-reading-progress"
+      style={{ top: headerTop }}
+      role="progressbar"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Reading progress"
+    >
+      <div className="rp-reading-progress__bar" style={{ width: `${progress}%` }} />
+    </div>,
+    document.body
+  )
+}