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

package/components/comment/emojis.ts

@@ -0,0 +1,152 @@
+export const emojis = {
+  grinning: '😀',
+  smiley: '😃',
+  smile: '😄',
+  grin: '😁',
+  laughing: '😆',
+  satisfied: '😆',
+  sweat_smile: '😅',
+  joy: '😂',
+  wink: '😉',
+  blush: '😊',
+  innocent: '😇',
+  heart_eyes: '😍',
+  kissing_heart: '😘',
+  kissing: '😗',
+  kissing_closed_eyes: '😚',
+  kissing_smiling_eyes: '😙',
+  yum: '😋',
+  stuck_out_tongue: '😛',
+  stuck_out_tongue_winking_eye: '😜',
+  stuck_out_tongue_closed_eyes: '😝',
+  neutral_face: '😐',
+  expressionless: '😑',
+  no_mouth: '😶',
+  smirk: '😏',
+  unamused: '😒',
+  relieved: '😌',
+  pensive: '😔',
+  sleepy: '😪',
+  sleeping: '😴',
+  mask: '😷',
+  dizzy_face: '😵',
+  sunglasses: '😎',
+  confused: '😕',
+  worried: '😟',
+  open_mouth: '😮',
+  hushed: '😯',
+  astonished: '😲',
+  flushed: '😳',
+  frowning: '😦',
+  anguished: '😧',
+  fearful: '😨',
+  cold_sweat: '😰',
+  disappointed_relieved: '😥',
+  cry: '😢',
+  sob: '😭',
+  scream: '😱',
+  confounded: '😖',
+  persevere: '😣',
+  disappointed: '😞',
+  sweat: '😓',
+  weary: '😩',
+  tired_face: '😫',
+  rage: '😡',
+  pout: '😡',
+  angry: '😠',
+  smiling_imp: '😈',
+  smiley_cat: '😺',
+  smile_cat: '😸',
+  joy_cat: '😹',
+  heart_eyes_cat: '😻',
+  smirk_cat: '😼',
+  kissing_cat: '😽',
+  scream_cat: '🙀',
+  crying_cat_face: '😿',
+  pouting_cat: '😾',
+  heart: '❤️',
+  hand: '✋',
+  raised_hand: '✋',
+  v: '✌️',
+  point_up: '☝️',
+  fist_raised: '✊',
+  fist: '✊',
+  monkey_face: '🐵',
+  cat: '🐱',
+  cow: '🐮',
+  mouse: '🐭',
+  coffee: '☕',
+  hotsprings: '♨️',
+  anchor: '⚓',
+  airplane: '✈️',
+  hourglass: '⌛',
+  watch: '⌚',
+  sunny: '☀️',
+  star: '⭐',
+  cloud: '☁️',
+  umbrella: '☔',
+  zap: '⚡',
+  snowflake: '❄️',
+  sparkles: '✨',
+  black_joker: '🃏',
+  mahjong: '🀄',
+  phone: '☎️',
+  telephone: '☎️',
+  envelope: '✉️',
+  pencil2: '✏️',
+  black_nib: '✒️',
+  scissors: '✂️',
+  wheelchair: '♿',
+  warning: '⚠️',
+  aries: '♈',
+  taurus: '♉',
+  gemini: '♊',
+  cancer: '♋',
+  leo: '♌',
+  virgo: '♍',
+  libra: '♎',
+  scorpius: '♏',
+  sagittarius: '♐',
+  capricorn: '♑',
+  aquarius: '♒',
+  pisces: '♓',
+  heavy_multiplication_x: '✖️',
+  heavy_plus_sign: '➕',
+  heavy_minus_sign: '➖',
+  heavy_division_sign: '➗',
+  bangbang: '‼️',
+  interrobang: '⁉️',
+  question: '❓',
+  grey_question: '❔',
+  grey_exclamation: '❕',
+  exclamation: '❗',
+  heavy_exclamation_mark: '❗',
+  wavy_dash: '〰️',
+  recycle: '♻️',
+  white_check_mark: '✅',
+  ballot_box_with_check: '☑️',
+  heavy_check_mark: '✔️',
+  x: '❌',
+  negative_squared_cross_mark: '❎',
+  curly_loop: '➰',
+  loop: '➿',
+  part_alternation_mark: '〽️',
+  eight_spoked_asterisk: '✳️',
+  eight_pointed_black_star: '✴️',
+  sparkle: '❇️',
+  copyright: '©️',
+  registered: '®️',
+  tm: '™️',
+  information_source: 'ℹ️',
+  m: 'Ⓜ️',
+  black_circle: '⚫',
+  white_circle: '⚪',
+  black_large_square: '⬛',
+  white_large_square: '⬜',
+  black_medium_square: '◼️',
+  white_medium_square: '◻️',
+  black_medium_small_square: '◾',
+  white_medium_small_square: '◽',
+  black_small_square: '▪️',
+  white_small_square: '▫️',
+}

package/components/knowledge/KnowledgeList.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import { EyeIcon } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { Image, LocaleTime } from '@fecommunity/reactpress-toolkit/ui/content'
+import type { IKnowledge } from '@fecommunity/reactpress-toolkit/types'
+
+interface KnowledgeListProps {
+  knowledges?: Array<IKnowledge & { children?: IKnowledge[] }>
+  small?: boolean
+}
+
+export default function KnowledgeList({ knowledges = [], small = false }: KnowledgeListProps) {
+  const { t, locale } = useLocale()
+
+  if (!knowledges.length) {
+    return (
+      <div className="px-4 py-6 text-center text-sm text-[var(--second-text-color)]">
+        {t('empty')}
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-0">
+      {knowledges.map((knowledge) => (
+        <div
+          key={knowledge.id}
+          className={`border-b border-[var(--border-color)] last:border-b-0 ${
+            small ? 'px-3 py-3' : 'px-4 py-4'
+          }`}
+        >
+          <Link
+            href={`/knowledge/${knowledge.id}`}
+            className="block no-underline hover:text-[var(--primary-color)]"
+          >
+            <header className="mb-2">
+              <div className="font-semibold text-[var(--main-text-color)]">{knowledge.title}</div>
+              <div className="mt-1 flex items-center gap-2 text-xs text-[var(--second-text-color)]">
+                <span className="h-3 w-px bg-[var(--border-color)]" />
+                <LocaleTime date={knowledge.publishAt} timeago locale={locale} />
+              </div>
+            </header>
+            {!small ? (
+              <main className="flex gap-4">
+                <div className="min-w-0 flex-1">
+                  {knowledge.summary ? (
+                    <p className="m-0 line-clamp-2 text-sm text-[var(--second-text-color)]">
+                      {knowledge.summary}
+                    </p>
+                  ) : null}
+                  <div className="mt-2 flex items-center gap-1 text-xs text-[var(--second-text-color)]">
+                    <EyeIcon className="h-3.5 w-3.5" />
+                    <span>{knowledge.views}</span>
+                  </div>
+                </div>
+                {knowledge.cover ? (
+                  <div className="h-16 w-24 shrink-0 overflow-hidden rounded">
+                    <Image url={knowledge.cover} size="thumb" alt="cover" loading="lazy" />
+                  </div>
+                ) : null}
+              </main>
+            ) : null}
+          </Link>
+        </div>
+      ))}
+    </div>
+  )
+}

package/components/layout/BackToTop.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export default function BackToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 400)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    onScroll()
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <button
+      type="button"
+      aria-label="Back to top"
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      className={`rp-back-to-top fixed right-6 bottom-6 z-50 flex h-11 w-11 items-center justify-center rounded-full border border-[var(--border-color)] text-lg text-[var(--second-text-color)] shadow-[var(--box-shadow)] hover:text-[var(--primary-color)] ${
+        visible ? 'is-visible' : ''
+      }`}
+    >
+      ↑
+    </button>
+  )
+}

package/components/layout/ConditionalSiteFooter.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import SiteFooter from '@/components/layout/SiteFooter'
+import { useHomeFooter } from '@/lib/reactpress/homeFooter'
+import { usePathname } from 'next/navigation'
+
+function isFeedLikePage(pathname: string): boolean {
+  const path = (pathname || '/').replace(/\/$/, '') || '/'
+  if (path === '/') return true
+  if (path.startsWith('/category/')) return true
+  if (path.startsWith('/tag/')) return true
+  if (path === '/search') return true
+  if (path === '/archives') return true
+  if (path === '/tags') return true
+  return false
+}
+
+function shouldHideSiteFooter(pathname: string, showLayoutFooter: boolean): boolean {
+  if (!isFeedLikePage(pathname)) return false
+  return !showLayoutFooter
+}
+
+export default function ConditionalSiteFooter() {
+  const pathname = usePathname() ?? '/'
+  const { showLayoutFooter } = useHomeFooter()
+
+  if (shouldHideSiteFooter(pathname, showLayoutFooter)) return null
+  return <SiteFooter />
+}

package/components/layout/ContentStylesLoader.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import 'highlight.js/styles/atom-one-dark.css'
+import 'viewerjs/dist/viewer.css'
+
+/** Ensures article content styles (hljs, viewerjs) are bundled on reading routes. */
+export function ContentStylesLoader() {
+  return null
+}

package/components/layout/DoubleColumnLayout.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import ArticleReadingChrome from '@/components/article/ArticleReadingChrome'
+import CommentIconButton from '@/components/comment/CommentIconButton'
+import BookmarkWidget from '@/components/widgets/BookmarkWidget'
+import LikesWidget from '@/components/widgets/LikesWidget'
+import ShareWidget from '@/components/widgets/ShareWidget'
+import SystemNotification from '@/components/layout/SystemNotification'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+import { type ReactNode, useCallback, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface LikesProps {
+  defaultCount?: number
+  id: string
+  api: (id: string, type: 'like' | 'dislike') => Promise<number>
+}
+
+interface DoubleColumnLayoutProps {
+  leftNode: ReactNode
+  rightNode?: ReactNode | null
+  topNode?: ReactNode
+  likesProps?: LikesProps
+  bookmarkId?: string
+  showComment?: boolean
+  showShare?: boolean
+  coverPreloadUrl?: string
+  className?: string
+  fillMinHeight?: boolean
+  sidebarCollapsible?: boolean
+}
+
+const TOC_COLLAPSED_KEY = 'rp-toc-collapsed'
+
+export default function DoubleColumnLayout({
+  leftNode,
+  rightNode,
+  topNode,
+  likesProps,
+  bookmarkId,
+  showComment = false,
+  showShare = false,
+  coverPreloadUrl,
+  className = '',
+  fillMinHeight = true,
+  sidebarCollapsible = false,
+}: DoubleColumnLayoutProps) {
+  const { locale } = useSiteCatalog()
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  const hasActions = Boolean(likesProps || bookmarkId || showComment || showShare)
+  const useFixedSidebar = Boolean(rightNode) && sidebarCollapsible
+  const showInlineSidebar = Boolean(rightNode) && !sidebarCollapsible
+  const showReadingChrome = hasActions || useFixedSidebar
+
+  const collapseLabel = locale === 'zh' ? '收起目录' : 'Collapse table of contents'
+  const expandLabel = locale === 'zh' ? '展开目录' : 'Expand table of contents'
+  const tocLabel = locale === 'zh' ? '目录' : 'TOC'
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!sidebarCollapsible) return
+    try {
+      setSidebarCollapsed(window.localStorage.getItem(TOC_COLLAPSED_KEY) === '1')
+    } catch {
+      setSidebarCollapsed(false)
+    }
+  }, [sidebarCollapsible])
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarCollapsed((prev) => {
+      const next = !prev
+      try {
+        window.localStorage.setItem(TOC_COLLAPSED_KEY, next ? '1' : '0')
+      } catch {
+        /* ignore */
+      }
+      return next
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!coverPreloadUrl) return
+    const link = document.createElement('link')
+    link.rel = 'preload'
+    link.as = 'image'
+    link.href = coverPreloadUrl
+    document.head.appendChild(link)
+    return () => {
+      document.head.removeChild(link)
+    }
+  }, [coverPreloadUrl])
+
+  const floatingActions = hasActions ? (
+    <>
+      {likesProps ? <LikesWidget {...likesProps} /> : null}
+      {bookmarkId ? <BookmarkWidget id={bookmarkId} /> : null}
+      {showComment ? <CommentIconButton /> : null}
+      {showShare ? <ShareWidget /> : null}
+    </>
+  ) : null
+
+  const mobileActions = hasActions ? (
+    <>
+      {likesProps ? <LikesWidget {...likesProps} variant="mobile" /> : null}
+      {bookmarkId ? <BookmarkWidget id={bookmarkId} variant="mobile" /> : null}
+      {showComment ? <CommentIconButton variant="mobile" /> : null}
+      {showShare ? <ShareWidget variant="mobile" /> : null}
+    </>
+  ) : null
+
+  const layoutClass = [
+    'rp-double-column',
+    showReadingChrome ? 'rp-double-column--reading-chrome' : '',
+    showInlineSidebar ? 'rp-double-column--sidebar' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const readingChromeProps = {
+    actions: floatingActions,
+    mobileActions,
+    showToc: useFixedSidebar,
+    tocExpanded: !sidebarCollapsed,
+    onToggleToc: toggleSidebar,
+    tocPanel: rightNode,
+    collapseLabel,
+    expandLabel,
+    tocLabel,
+  }
+
+  const mobileChromePortal =
+    showReadingChrome && mounted
+      ? createPortal(<ArticleReadingChrome {...readingChromeProps} mode="mobile" />, document.body)
+      : null
+
+  const tocChromePortal =
+    useFixedSidebar && mounted
+      ? createPortal(<ArticleReadingChrome {...readingChromeProps} mode="toc" />, document.body)
+      : null
+
+  const sideChromePortal =
+    showReadingChrome && hasActions && mounted
+      ? createPortal(<ArticleReadingChrome {...readingChromeProps} mode="side" />, document.body)
+      : null
+
+  return (
+    <div className={`${fillMinHeight ? 'flex min-h-0 flex-1 flex-col' : ''} ${className}`.trim()}>
+      <SystemNotification />
+      {topNode}
+      <div className={`${layoutClass} relative pt-4 pb-8`}>
+        <section className="rp-double-column__main w-full min-w-0 flex-1 pt-0 pb-6 min-[1280px]:pb-8">
+          {leftNode}
+        </section>
+
+        {showInlineSidebar ? (
+          <aside className="rp-double-column__aside rp-sidebar-slot hidden min-[1280px]:block">
+            <div className="rp-sidebar-slot__content">{rightNode}</div>
+          </aside>
+        ) : null}
+      </div>
+      {sideChromePortal}
+      {mobileChromePortal}
+      {tocChromePortal}
+    </div>
+  )
+}

package/components/layout/HeaderSearch.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import { SearchIcon, TOOLBAR_ICON_SIZE, useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { usePathname } from 'next/navigation'
+
+export default function HeaderSearch() {
+  const { t } = useLocale()
+  const pathname = usePathname()
+  const isActive = pathname === '/search'
+
+  return (
+    <Link
+      href="/search"
+      aria-label={t('search')}
+      className={`rp-icon-btn inline-flex h-10 w-10 items-center justify-center rounded-full hover:bg-[var(--bg-second)] hover:text-[var(--primary-color)] ${
+        isActive ? 'text-[var(--primary-color)]' : 'text-[var(--main-text-color)]'
+      }`}
+    >
+      <SearchIcon size={TOOLBAR_ICON_SIZE} />
+    </Link>
+  )
+}

package/components/layout/LocaleSwitcher.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import {
+  LocaleToggleButton,
+  nextLocale,
+  TOOLBAR_ICON_SIZE,
+  useLocale,
+} from '@fecommunity/reactpress-toolkit/ui'
+
+export default function LocaleSwitcher() {
+  const { t, locale, locales = [], setLocale } = useLocale()
+  const activeLocale = locale ?? locales[0] ?? 'zh'
+  const next = nextLocale(activeLocale, locales)
+
+  return (
+    <LocaleToggleButton
+      locale={activeLocale}
+      locales={locales}
+      onLocaleChange={setLocale}
+      size={TOOLBAR_ICON_SIZE}
+      aria-label={next === 'en' ? t('locale.switchToEn') : t('locale.switchToZh')}
+    />
+  )
+}

package/components/layout/PageContainer.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+
+interface PageContainerProps {
+  children: ReactNode
+  className?: string
+}
+
+/** Content width aligned with twentytwentyfive `.container` breakpoints. */
+export default function PageContainer({ children, className = '' }: PageContainerProps) {
+  return <div className={`rp-container mx-auto w-full px-4 ${className}`}>{children}</div>
+}

package/components/layout/PageLoadProgress.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { useHeaderTop } from '@/lib/utils/headerPosition'
+
+const MIN_PROGRESS = 0.08
+const TRICKLE_INC = 0.012
+const TRICKLE_MS = 180
+const HIDE_DELAY_MS = 280
+
+function clearLoadingMarker() {
+  document.documentElement.removeAttribute('data-rp-loading')
+}
+
+function isSameRoute(pathname: string, href: string) {
+  try {
+    const url = new URL(href, window.location.href)
+    if (url.origin !== window.location.origin) return true
+    const current = `${pathname}${window.location.search}`
+    const next = `${url.pathname}${url.search}`
+    return current === next
+  } catch {
+    return true
+  }
+}
+
+function PageLoadProgressInner() {
+  const headerTop = useHeaderTop()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [mounted, setMounted] = useState(false)
+  const [visible, setVisible] = useState(false)
+  const [progress, setProgress] = useState(0)
+
+  const progressRef = useRef(0)
+  const trickleTimerRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined)
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const initialLoadDoneRef = useRef(false)
+  const navigatingRef = useRef(false)
+  const controlsRef = useRef<{ start: () => void; done: () => void } | null>(null)
+
+  controlsRef.current = {
+    start() {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current)
+        hideTimerRef.current = undefined
+      }
+      progressRef.current = MIN_PROGRESS
+      setProgress(MIN_PROGRESS)
+      setVisible(true)
+
+      if (trickleTimerRef.current) {
+        clearInterval(trickleTimerRef.current)
+      }
+      trickleTimerRef.current = setInterval(() => {
+        const current = progressRef.current
+        if (current >= 0.92) return
+        const next = current + TRICKLE_INC * (1 - current)
+        progressRef.current = next
+        setProgress(next)
+      }, TRICKLE_MS)
+    },
+    done() {
+      if (trickleTimerRef.current) {
+        clearInterval(trickleTimerRef.current)
+        trickleTimerRef.current = undefined
+      }
+      progressRef.current = 1
+      setProgress(1)
+      clearLoadingMarker()
+      hideTimerRef.current = setTimeout(() => {
+        setVisible(false)
+        progressRef.current = 0
+        setProgress(0)
+      }, HIDE_DELAY_MS)
+    },
+  }
+
+  useLayoutEffect(() => {
+    setMounted(true)
+    clearLoadingMarker()
+
+    if (document.readyState === 'complete') {
+      initialLoadDoneRef.current = true
+      return
+    }
+
+    controlsRef.current?.start()
+    const onLoad = () => {
+      initialLoadDoneRef.current = true
+      controlsRef.current?.done()
+    }
+    window.addEventListener('load', onLoad)
+    return () => window.removeEventListener('load', onLoad)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted || !initialLoadDoneRef.current || !navigatingRef.current) return
+    navigatingRef.current = false
+    controlsRef.current?.done()
+  }, [mounted, pathname, searchParams])
+
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented) return
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+
+      const target = event.target
+      if (!(target instanceof Element)) return
+
+      const anchor = target.closest('a')
+      if (!anchor) return
+      if (anchor.target === '_blank' || anchor.hasAttribute('download')) return
+
+      const href = anchor.getAttribute('href')
+      if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) {
+        return
+      }
+
+      if (isSameRoute(pathname, href)) return
+
+      navigatingRef.current = true
+      controlsRef.current?.start()
+    }
+
+    document.addEventListener('click', onClick, true)
+    return () => document.removeEventListener('click', onClick, true)
+  }, [pathname])
+
+  useEffect(
+    () => () => {
+      if (trickleTimerRef.current) clearInterval(trickleTimerRef.current)
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
+    },
+    []
+  )
+
+  if (!mounted || !visible) return null
+
+  const percent = Math.round(progress * 100)
+
+  return createPortal(
+    <div
+      className="rp-page-load-progress"
+      style={{ top: headerTop }}
+      role="progressbar"
+      aria-valuenow={percent}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Page load progress"
+    >
+      <div className="rp-page-load-progress__track">
+        <div className="rp-page-load-progress__bar" style={{ width: `${percent}%` }} />
+      </div>
+    </div>,
+    document.documentElement
+  )
+}
+
+export default function PageLoadProgress() {
+  return (
+    <Suspense fallback={null}>
+      <PageLoadProgressInner />
+    </Suspense>
+  )
+}