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

package/components/search/SearchQuickLinks.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import ThemeImage from '@/components/shared/ThemeImage'
+import { getNavIconByName } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+interface NavChild {
+  key: string
+  label: string
+  description?: string
+  url?: string
+  icon?: string
+}
+
+interface NavGroup {
+  key: string
+  label: string
+  icon?: string
+  children?: NavChild[]
+}
+
+interface SearchQuickLinksProps {
+  dataSource?: NavGroup[]
+}
+
+function getHostname(url?: string) {
+  if (!url?.trim()) return ''
+  try {
+    return new URL(url.trim()).hostname
+  } catch {
+    return ''
+  }
+}
+
+function getSiteFaviconUrl(url?: string) {
+  if (!url?.trim()) return ''
+  try {
+    return `${new URL(url.trim()).origin}/favicon.ico`
+  } catch {
+    return ''
+  }
+}
+
+function getGoogleFaviconUrl(url?: string) {
+  const host = getHostname(url)
+  if (!host) return ''
+  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`
+}
+
+function getIconSources(item: { icon?: string; url?: string }) {
+  if (item?.icon?.trim()) {
+    return { primary: item.icon.trim(), fallback: '' }
+  }
+  return {
+    primary: getSiteFaviconUrl(item?.url),
+    fallback: getGoogleFaviconUrl(item?.url),
+  }
+}
+
+function getInitial(label: string) {
+  const trimmed = label.trim()
+  if (!trimmed) return '?'
+  return trimmed.charAt(0).toUpperCase()
+}
+
+function plainDescription(value?: string) {
+  if (!value?.trim()) return ''
+  return value
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function sectionId(key: string) {
+  return `rp-nav-portal-${key}`
+}
+
+function getScrollOffset(tabsHeight: number) {
+  const headerOffset = parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue('--rp-header-offset') || '0'
+  )
+  return headerOffset + tabsHeight + 12
+}
+
+function SiteIcon({ child }: { child: NavChild }) {
+  const { primary, fallback } = getIconSources(child)
+  const [src, setSrc] = useState(primary)
+  const [loaded, setLoaded] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const initial = getInitial(child.label)
+  const showFallback = failed || !loaded
+
+  useEffect(() => {
+    setSrc(primary)
+    setLoaded(false)
+    setFailed(false)
+  }, [primary, child.key])
+
+  const handleError = () => {
+    setLoaded(false)
+    if (fallback && src !== fallback) {
+      setSrc(fallback)
+      return
+    }
+    setFailed(true)
+  }
+
+  return (
+    <span className="rp-nav-portal__site-icon-stack" aria-hidden>
+      {showFallback ? <span className="rp-nav-portal__site-fallback">{initial}</span> : null}
+      {src && !failed ? (
+        <ThemeImage
+          key={src}
+          src={src}
+          alt=""
+          width={34}
+          height={34}
+          loading="lazy"
+          className={`rp-nav-portal__site-img${loaded ? 'is-visible' : ''}`}
+          onLoad={() => setLoaded(true)}
+          onLoadingComplete={() => setLoaded(true)}
+          onError={handleError}
+        />
+      ) : null}
+    </span>
+  )
+}
+
+function SiteTile({ child }: { child: NavChild }) {
+  const tip = plainDescription(child.description) || child.label
+
+  return (
+    <li className="rp-nav-portal__site-item">
+      <Link href={`/nav/${child.key}/`} title={tip} className="rp-nav-portal__site">
+        <span className="rp-nav-portal__site-icon">
+          <SiteIcon child={child} />
+        </span>
+        <span className="rp-nav-portal__site-name">{child.label}</span>
+      </Link>
+    </li>
+  )
+}
+
+export default function SearchQuickLinks({ dataSource = [] }: SearchQuickLinksProps) {
+  const { t } = useLocale()
+  const groups = useMemo(
+    () => dataSource.filter((group) => (group.children?.length ?? 0) > 0),
+    [dataSource]
+  )
+  const [activeKey, setActiveKey] = useState(groups[0]?.key ?? '')
+  const [flashKey, setFlashKey] = useState<string | null>(null)
+  const scrollingRef = useRef(false)
+  const tabsRef = useRef<HTMLDivElement>(null)
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({})
+
+  const scrollToGroup = useCallback((key: string) => {
+    const section = document.getElementById(sectionId(key))
+    if (!section) return
+
+    setActiveKey(key)
+    setFlashKey(key)
+    scrollingRef.current = true
+
+    const tabsHeight = tabsRef.current?.offsetHeight ?? 0
+    const top = section.getBoundingClientRect().top + window.scrollY - getScrollOffset(tabsHeight)
+    window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' })
+
+    tabRefs.current[key]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+
+    window.setTimeout(() => {
+      scrollingRef.current = false
+    }, 700)
+    window.setTimeout(() => {
+      setFlashKey((current) => (current === key ? null : current))
+    }, 900)
+  }, [])
+
+  useEffect(() => {
+    if (groups.length <= 1) return undefined
+
+    const sections = groups
+      .map((group) => document.getElementById(sectionId(group.key)))
+      .filter((node): node is HTMLElement => Boolean(node))
+
+    if (!sections.length) return undefined
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (scrollingRef.current) return
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
+        if (!visible?.target?.id) return
+        const key = visible.target.id.replace('rp-nav-portal-', '')
+        setActiveKey(key)
+        tabRefs.current[key]?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'center',
+        })
+      },
+      {
+        rootMargin: '-18% 0px -52% 0px',
+        threshold: [0, 0.2, 0.45],
+      }
+    )
+
+    sections.forEach((section) => observer.observe(section))
+    return () => observer.disconnect()
+  }, [groups])
+
+  if (!groups.length) return null
+
+  const showTabs = groups.length > 1
+
+  return (
+    <section className="rp-nav-portal rp-page-enter-delayed" aria-label={t('nav')}>
+      <div className="rp-nav-portal__card">
+        {showTabs ? (
+          <div ref={tabsRef} className="rp-nav-portal__tabs-wrap">
+            <nav className="rp-nav-portal__tabs-track" aria-label={t('nav')}>
+              {groups.map((group) => {
+                const Icon = getNavIconByName(group.icon)
+                const isActive = activeKey === group.key
+                return (
+                  <button
+                    key={group.key}
+                    ref={(node) => {
+                      tabRefs.current[group.key] = node
+                    }}
+                    type="button"
+                    aria-current={isActive ? 'true' : undefined}
+                    onClick={() => scrollToGroup(group.key)}
+                    className={`rp-nav-portal__tab ${isActive ? 'is-active' : ''}`}
+                  >
+                    <Icon size={14} className="rp-nav-portal__tab-icon" />
+                    <span className="rp-nav-portal__tab-label">{group.label}</span>
+                  </button>
+                )
+              })}
+            </nav>
+          </div>
+        ) : null}
+
+        <div className="rp-nav-portal__body">
+          {groups.map((group, index) => {
+            const Icon = getNavIconByName(group.icon)
+            const isFlashing = flashKey === group.key
+            return (
+              <section
+                key={group.key}
+                id={sectionId(group.key)}
+                className={[
+                  'rp-nav-portal__section',
+                  index > 0 ? 'rp-nav-portal__section--gap' : '',
+                  activeKey === group.key && showTabs ? 'is-active' : '',
+                  isFlashing ? 'is-flash' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                <header
+                  className={`rp-nav-portal__section-head${showTabs ? 'rp-nav-portal__section-head--compact' : ''}`}
+                >
+                  <Icon size={16} className="rp-nav-portal__section-icon" />
+                  <h3 className="rp-nav-portal__section-title">{group.label}</h3>
+                  <span className="rp-nav-portal__section-count">
+                    {(group.children ?? []).length}
+                  </span>
+                </header>
+                <ul className="rp-nav-portal__grid">
+                  {(group.children ?? []).map((child, childIndex) => (
+                    <SiteTile key={child.key ?? childIndex} child={child} />
+                  ))}
+                </ul>
+              </section>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

package/components/shared/DevChunkRecovery.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { DevChunkRecovery as ToolkitDevChunkRecovery } from '@fecommunity/reactpress-toolkit/app'
+
+/** Dev-only: auto-reload when on-demand route chunks are stale after compilation. */
+export default function DevChunkRecovery() {
+  return <ToolkitDevChunkRecovery />
+}

package/components/shared/Link.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import NextLink from 'next/link'
+import type { AnchorHTMLAttributes } from 'react'
+
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href?: string
+}
+
+const CustomLink = ({ href, ...rest }: LinkProps) => {
+  if (!href) {
+    return <a className="break-words" {...rest} />
+  }
+
+  const isInternalLink = href.startsWith('/')
+  const isAnchorLink = href.startsWith('#')
+
+  if (isInternalLink) {
+    return <NextLink href={href} className="break-words" {...rest} />
+  }
+
+  if (isAnchorLink) {
+    return <a className="break-words" href={href} {...rest} />
+  }
+
+  return (
+    <a className="break-words" target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+  )
+}
+
+export default CustomLink

package/components/shared/SectionHeading.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+
+interface SectionHeadingProps {
+  children: ReactNode
+  className?: string
+}
+
+export default function SectionHeading({ children, className = '' }: SectionHeadingProps) {
+  return (
+    <div className={`rp-section-heading ${className}`.trim()}>
+      <h2 className="rp-section-heading__title">{children}</h2>
+    </div>
+  )
+}
+
+export function EmptyState({ message }: { message?: string }) {
+  const { t } = useLocale()
+  return (
+    <div className="rp-empty-state" role="status">
+      <svg
+        className="rp-empty-state__icon"
+        viewBox="0 0 24 24"
+        width="32"
+        height="32"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        aria-hidden
+      >
+        <path d="M9 12h6M12 9v6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+      <p className="rp-empty-state__text">{message ?? t('empty')}</p>
+    </div>
+  )
+}

package/components/shared/ThemeImage.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import Image, { type ImageProps } from 'next/image'
+import { forwardRef } from 'react'
+
+const ThemeImage = forwardRef<HTMLImageElement, ImageProps>(function ThemeImage(
+  { alt = '', ...props },
+  ref
+) {
+  return <Image ref={ref} alt={alt} {...props} />
+})
+
+export default ThemeImage

package/components/shared/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 102" fill="none" role="img" aria-label="ReactPress">
+  <title>ReactPress</title>
+  <g><path fill="none" stroke="#087ea4" stroke-width="5.333" stroke-linecap="round" d="M56 75.165c29.455 0 53.333-10.745 53.333-24s-23.878-24-53.333-24-53.334 10.745-53.334 24 23.879 24 53.334 24Z"/>
+    <path fill="none" stroke="#087ea4" stroke-width="5.333" stroke-linecap="round" d="M35.215 63.165c14.728 25.509 35.972 40.815 47.451 34.188 11.48-6.628 8.846-32.68-5.882-58.188-14.727-25.51-35.972-40.816-47.45-34.188-11.48 6.627-8.846 32.679 5.881 58.188Z"/>
+    <path fill="none" stroke="#087ea4" stroke-width="5.333" stroke-linecap="round" d="M35.215 39.165c-14.727 25.509-17.36 51.56-5.882 58.188 11.48 6.627 32.724-8.68 47.451-34.188 14.728-25.51 17.362-51.56 5.883-58.188-11.48-6.628-32.724 8.679-47.452 34.188Z"/></g>
+  <text x="56" y="52" text-anchor="middle" dominant-baseline="central" fill="#087ea4" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="33" font-weight="600" letter-spacing="-0.03em">P</text>
+</svg>

package/components/views/ArchivesClient.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import HomeSidebar from '@/components/widgets/HomeSidebar'
+import Link from '@/components/shared/Link'
+import { FEED_PAGE_SIZE } from '@/lib/reactpress/feedFooterPlacement'
+import { useFeedFooterPlacement } from '@/lib/reactpress/useFeedFooterPlacement'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import {
+  countArchiveArticles,
+  formatArchiveDay,
+  sortedArchiveYears,
+  type ArchiveArticle,
+  type ArchiveTree,
+} from '@fecommunity/reactpress-toolkit/theme'
+import { useMemo, useState } from 'react'
+
+const INITIAL_OPEN_YEARS = 2
+
+interface ArchivesClientProps {
+  articles: ArchiveTree
+}
+
+function ArchiveMonthList({ month, articles }: { month: string; articles: ArchiveArticle[] }) {
+  return (
+    <div className="px-4 py-2">
+      <h3 className="m-0 text-base text-[var(--second-text-color)]">{month}</h3>
+      <ul className="m-0 list-none pl-10">
+        {articles.map((article) => (
+          <li key={article.id} className="relative py-2 hover:text-[var(--primary-color)]">
+            <span
+              className="absolute top-[17px] -left-4 h-1.5 w-1.5 rounded-full bg-[var(--disable-text-color,#999)]"
+              aria-hidden
+            />
+            <Link
+              href={`/article/${article.id}`}
+              aria-label={article.title}
+              className="inline-flex w-full gap-3 overflow-hidden text-ellipsis whitespace-nowrap no-underline hover:text-inherit"
+            >
+              <span className="shrink-0 text-sm text-[var(--second-text-color)]">
+                {formatArchiveDay(article.publishAt)}
+              </span>
+              <span className="truncate font-semibold text-[var(--main-text-color)]">
+                {article.title}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default function ArchivesClient({ articles }: ArchivesClientProps) {
+  const { t } = useLocale()
+  const years = useMemo(() => sortedArchiveYears(articles), [articles])
+  const total = useMemo(() => countArchiveArticles(articles), [articles])
+  const { footerInSidebar, footerAtBottom } = useFeedFooterPlacement({
+    itemCount: total,
+    pageSize: FEED_PAGE_SIZE,
+  })
+  const [openYears, setOpenYears] = useState<Set<string>>(
+    () => new Set(years.slice(0, INITIAL_OPEN_YEARS))
+  )
+
+  const toggleYear = (year: string) => {
+    setOpenYears((prev) => {
+      const next = new Set(prev)
+      if (next.has(year)) next.delete(year)
+      else next.add(year)
+      return next
+    })
+  }
+
+  return (
+    <DoubleColumnLayout
+      fillMinHeight={footerAtBottom}
+      leftNode={
+        <div className="overflow-hidden rounded-lg bg-[var(--bg-box)] shadow-[var(--box-shadow)]">
+          <div className="border-b border-[var(--border-color)] px-4 py-6 text-center">
+            <p className="m-0 text-2xl font-medium text-[var(--primary-color)]">{t('archives')}</p>
+            <p className="mt-2 mb-0 text-lg text-[var(--primary-color)]">
+              {t('total')} <span>{total}</span> {t('piece')}
+            </p>
+          </div>
+          {years.map((year) => {
+            const isOpen = openYears.has(year)
+            const monthKeys = Object.keys(articles[year])
+            return (
+              <section key={year} className="px-5 py-4">
+                <button
+                  type="button"
+                  className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent p-0 text-left"
+                  aria-expanded={isOpen}
+                  onClick={() => toggleYear(year)}
+                >
+                  <h2 className="m-0 text-2xl text-[var(--main-text-color)]">{year}</h2>
+                  <span className="text-xl text-[var(--second-text-color)]">
+                    {isOpen ? '−' : '+'}
+                  </span>
+                </button>
+                {isOpen
+                  ? monthKeys.map((month) => (
+                      <ArchiveMonthList
+                        key={`${year}-${month}`}
+                        month={month}
+                        articles={articles[year][month]}
+                      />
+                    ))
+                  : null}
+              </section>
+            )
+          })}
+          {openYears.size < years.length ? (
+            <div className="px-5 pb-6 text-center">
+              <button
+                type="button"
+                onClick={() => setOpenYears(new Set(years))}
+                className="cursor-pointer rounded-lg border border-[var(--border-color)] bg-[var(--bg)] px-4 py-2 text-sm text-[var(--main-text-color)] hover:border-[var(--primary-color)] hover:text-[var(--primary-color)]"
+              >
+                {t('all')} {t('archives')}
+              </button>
+            </div>
+          ) : null}
+        </div>
+      }
+      rightNode={
+        <HomeSidebar
+          showTags={false}
+          showCategories
+          showAboutUs={footerInSidebar}
+          deferRecommend={false}
+        />
+      }
+    />
+  )
+}

package/components/views/CategoryClient.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import ArchiveBanner from '@/components/article/ArchiveBanner'
+import ArticleFeedSection from '@/components/article/ArticleFeedSection'
+import ArticleList from '@/components/article/ArticleList'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import HomeSidebar from '@/components/widgets/HomeSidebar'
+import { FEED_PAGE_SIZE } from '@/lib/reactpress/feedFooterPlacement'
+import { useFeedFooterPlacement } from '@/lib/reactpress/useFeedFooterPlacement'
+import { ArticleProvider } from '@/lib/providers/client'
+import { getArchiveBannerImage } from '@/lib/utils/archiveBanner'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { slimArticlesForList, type ListArticle } from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+interface CategoryClientProps {
+  initialArticles: ListArticle[]
+  total: number
+  category: { value: string; label: string }
+}
+
+const pageSize = FEED_PAGE_SIZE
+
+export default function CategoryClient({
+  initialArticles = [],
+  total = 0,
+  category,
+}: CategoryClientProps) {
+  const { t } = useLocale()
+  const [page, setPage] = useState(1)
+  const [articles, setArticles] = useState<ListArticle[]>(initialArticles)
+  const banner = useMemo(() => getArchiveBannerImage(articles), [articles])
+  const hasMore = page * pageSize < total
+  const { footerInSidebar, footerAtBottom } = useFeedFooterPlacement({
+    hasMore,
+    itemCount: articles.length,
+    pageSize,
+  })
+
+  useEffect(() => {
+    setArticles(initialArticles)
+    setPage(1)
+  }, [initialArticles])
+
+  const getArticles = useCallback(
+    (nextPage: number) => {
+      return ArticleProvider.getArticlesByCategory(category.value, {
+        page: nextPage,
+        pageSize,
+        status: 'publish',
+      }).then((res) => {
+        setPage(nextPage)
+        setArticles((prev) => [...prev, ...slimArticlesForList(res[0])])
+      })
+    },
+    [category.value]
+  )
+
+  return (
+    <DoubleColumnLayout
+      fillMinHeight={footerAtBottom}
+      leftNode={
+        <>
+          <ArchiveBanner
+            className="mb-4"
+            imageUrl={banner.url}
+            isBrandFallback={banner.isBrandFallback}
+            title={
+              <>
+                <span>{category.label}</span> {t('categoryArticle')}
+              </>
+            }
+            subtitle={
+              <>
+                {t('totalSearch')} <span>{total}</span> {t('piece')}
+              </>
+            }
+          />
+          <ArticleFeedSection pageStart={1} loadMore={getArticles} hasMore={hasMore}>
+            <ArticleList articles={articles} />
+          </ArticleFeedSection>
+        </>
+      }
+      rightNode={<HomeSidebar showAboutUs={footerInSidebar} />}
+    />
+  )
+}

package/components/views/HomeClient.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import ArticleCarousel from '@/components/article/ArticleCarousel'
+import ArticleFeedSection from '@/components/article/ArticleFeedSection'
+import ArticleList from '@/components/article/ArticleList'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import HomeSidebar from '@/components/widgets/HomeSidebar'
+import { FEED_PAGE_SIZE } from '@/lib/reactpress/feedFooterPlacement'
+import { useFeedFooterPlacement } from '@/lib/reactpress/useFeedFooterPlacement'
+import { ArticleProvider } from '@/lib/providers/client'
+import {
+  slimArticlesForList,
+  type CarouselArticle,
+  type ListArticle,
+} from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useState } from 'react'
+
+interface HomeClientProps {
+  initialArticles: ListArticle[]
+  total: number
+  recommendedArticles: CarouselArticle[]
+}
+
+const pageSize = FEED_PAGE_SIZE
+
+export default function HomeClient({
+  initialArticles = [],
+  recommendedArticles = [],
+  total = 0,
+}: HomeClientProps) {
+  const [page, setPage] = useState(1)
+  const [articles, setArticles] = useState<ListArticle[]>(initialArticles)
+  const hasMore = page * pageSize < total
+  const { footerInSidebar, footerAtBottom } = useFeedFooterPlacement({
+    hasMore,
+    itemCount: articles.length,
+    pageSize,
+  })
+
+  useEffect(() => {
+    setArticles(initialArticles)
+    setPage(1)
+  }, [initialArticles])
+
+  const getArticles = useCallback((nextPage: number) => {
+    return ArticleProvider.getArticles({
+      page: nextPage,
+      pageSize,
+      status: 'publish',
+    }).then((res) => {
+      setPage(nextPage)
+      setArticles((prev) => [...prev, ...slimArticlesForList(res[0])])
+    })
+  }, [])
+
+  const hasCarousel = recommendedArticles?.some((article) => article.cover)
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <DoubleColumnLayout
+        className="flex-1"
+        fillMinHeight={footerAtBottom}
+        leftNode={
+          <>
+            {hasCarousel ? (
+              <div className="mb-5">
+                <ArticleCarousel articles={recommendedArticles} />
+              </div>
+            ) : null}
+            <ArticleFeedSection pageStart={1} loadMore={getArticles} hasMore={hasMore}>
+              <ArticleList articles={articles} />
+            </ArticleFeedSection>
+          </>
+        }
+        rightNode={<HomeSidebar showAboutUs={footerInSidebar} />}
+      />
+    </div>
+  )
+}