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

package/lib/reactpress/useFeedFooterPlacement.ts

@@ -0,0 +1,22 @@
+'use client'
+
+import { useLayoutEffect } from 'react'
+
+import {
+  shouldPlaceFooterInSidebar,
+  type FeedFooterPlacementOptions,
+} from '@/lib/reactpress/feedFooterPlacement'
+import { useHomeFooter } from '@/lib/reactpress/homeFooter'
+
+export function useFeedFooterPlacement(options: FeedFooterPlacementOptions) {
+  const { setShowLayoutFooter } = useHomeFooter()
+  const footerInSidebar = shouldPlaceFooterInSidebar(options)
+  const footerAtBottom = !footerInSidebar
+
+  useLayoutEffect(() => {
+    setShowLayoutFooter(footerAtBottom)
+    return () => setShowLayoutFooter(false)
+  }, [footerAtBottom, setShowLayoutFooter])
+
+  return { footerInSidebar, footerAtBottom }
+}

package/lib/reactpress/useSiteNavConfig.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import { fetchVisitorSetting } from '@/lib/reactpress/fetchSetting'
+import { resolveSiteNavConfig, type SiteNavBlocks } from '@/lib/reactpress/resolveSiteNav'
+import themeManifest from '../../theme.json'
+import { safeJsonParse } from '@fecommunity/reactpress-toolkit/theme'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useEffect, useRef, useState } from 'react'
+
+export function useSiteNavConfig(initialNav?: Partial<SiteNavBlocks>) {
+  const { locale } = useLocale()
+  const initialLocaleRef = useRef(locale)
+  const skipInitialFetchRef = useRef(Boolean(initialNav?.urlConfig?.length))
+  const [nav, setNav] = useState<SiteNavBlocks>(() => ({
+    urlConfig: initialNav?.urlConfig ?? [],
+    searchCategories: initialNav?.searchCategories ?? { categories: [], subCategories: {} },
+  }))
+
+  useEffect(() => {
+    if (skipInitialFetchRef.current && locale === initialLocaleRef.current) {
+      skipInitialFetchRef.current = false
+      return
+    }
+
+    let cancelled = false
+
+    fetchVisitorSetting().then((setting) => {
+      if (cancelled || !setting) return
+      const raw = safeJsonParse(setting.globalSetting, {})
+      setNav(resolveSiteNavConfig(raw, locale, themeManifest.id))
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [locale])
+
+  return nav
+}

package/lib/utils/archiveBanner.ts

@@ -0,0 +1,8 @@
+export function getArchiveBannerImage(articles: { cover?: string }[] = []) {
+  const cover = articles.find((article) => article.cover)?.cover
+  const fallback = '/logo.png'
+  return {
+    url: cover || fallback,
+    isBrandFallback: !cover,
+  }
+}

package/lib/utils/colors.ts

@@ -0,0 +1,119 @@
+const TAG_COLORS = [
+  '#389e0d',
+  '#cf1322',
+  '#096dd9',
+  '#d48806',
+  '#c41d7f',
+  '#531dab',
+  '#a8071a',
+  '#006d75',
+  '#237804',
+  '#d4380d',
+  '#434343',
+  '#ad8b00',
+  '#595959',
+  '#08979c',
+  '#3f8600',
+  '#0050b3',
+]
+
+function parseHexColor(hex: string): [number, number, number] | null {
+  const normalized = hex.replace('#', '').trim()
+  if (normalized.length === 3) {
+    return [
+      parseInt(normalized[0] + normalized[0], 16),
+      parseInt(normalized[1] + normalized[1], 16),
+      parseInt(normalized[2] + normalized[2], 16),
+    ]
+  }
+  if (normalized.length === 6) {
+    return [
+      parseInt(normalized.slice(0, 2), 16),
+      parseInt(normalized.slice(2, 4), 16),
+      parseInt(normalized.slice(4, 6), 16),
+    ]
+  }
+  return null
+}
+
+function toHex(r: number, g: number, b: number): string {
+  const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)))
+  return `#${[clamp(r), clamp(g), clamp(b)]
+    .map((value) => value.toString(16).padStart(2, '0'))
+    .join('')}`
+}
+
+function relativeLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r, g, b].map((channel) => {
+    const normalized = channel / 255
+    return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4)
+  })
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+}
+
+function contrastBetween(bg: string, text: string): number {
+  const bgRgb = parseHexColor(bg)
+  const textRgb = parseHexColor(text)
+  if (!bgRgb || !textRgb) return 1
+  const bgLum = relativeLuminance(...bgRgb)
+  const textLum = relativeLuminance(...textRgb)
+  const lighter = Math.max(bgLum, textLum)
+  const darker = Math.min(bgLum, textLum)
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+export function getColorFromNumber(num: number): string {
+  return TAG_COLORS[num % TAG_COLORS.length]
+}
+
+export function getReadableTextColor(backgroundColor: string): '#ffffff' | '#1a1a1a' {
+  const whiteContrast = contrastBetween(backgroundColor, '#ffffff')
+  const blackContrast = contrastBetween(backgroundColor, '#1a1a1a')
+  return whiteContrast >= blackContrast ? '#ffffff' : '#1a1a1a'
+}
+
+function adjustTagColors(
+  backgroundColor: string,
+  textColor: '#ffffff' | '#1a1a1a',
+  factor: number
+): { backgroundColor: string; color: string } | null {
+  let bg = backgroundColor
+
+  for (let attempt = 0; attempt < 16; attempt += 1) {
+    if (contrastBetween(bg, textColor) >= 4.5) {
+      return { backgroundColor: bg, color: textColor }
+    }
+    const rgb = parseHexColor(bg)
+    if (!rgb) break
+    bg = toHex(rgb[0] * factor, rgb[1] * factor, rgb[2] * factor)
+  }
+
+  return null
+}
+
+export function getTagStyle(backgroundColor: string): { backgroundColor: string; color: string } {
+  const whitePath = adjustTagColors(backgroundColor, '#ffffff', 0.85)
+  const blackPath = adjustTagColors(backgroundColor, '#1a1a1a', 1.12)
+
+  if (whitePath && blackPath) {
+    const originalContrast = Math.max(
+      contrastBetween(backgroundColor, '#ffffff'),
+      contrastBetween(backgroundColor, '#1a1a1a')
+    )
+    const whiteDelta = Math.abs(
+      contrastBetween(whitePath.backgroundColor, '#ffffff') - originalContrast
+    )
+    const blackDelta = Math.abs(
+      contrastBetween(blackPath.backgroundColor, '#1a1a1a') - originalContrast
+    )
+    return whiteDelta <= blackDelta ? whitePath : blackPath
+  }
+
+  return (
+    whitePath ??
+    blackPath ?? {
+      backgroundColor,
+      color: getReadableTextColor(backgroundColor),
+    }
+  )
+}

package/lib/utils/comment.ts

@@ -0,0 +1,46 @@
+import type { IComment } from '@fecommunity/reactpress-toolkit/types'
+
+export type CommentNode = IComment & { children?: CommentNode[] }
+
+const AVATAR_COLORS = [
+  '#52c41a',
+  '#f5222d',
+  '#1890ff',
+  '#faad14',
+  '#ff0064',
+  '#722ed1',
+  '#dc3545',
+  '#17a2b8',
+  '#00b74a',
+  '#fc651f',
+  '#6c757d',
+  '#f5c800',
+  '#808695',
+  '#2db7f5',
+  '#87d068',
+  '#108ee9',
+]
+
+const colorCache: Record<string, string> = {}
+
+export function getRandomColor(key: string): string {
+  if (!colorCache[key]) {
+    colorCache[key] = AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)]
+  }
+  return colorCache[key]
+}
+
+type SessionUser = {
+  name?: string
+  email?: string
+  token?: string
+  avatar?: string
+}
+
+export function isLoggedInUser(
+  user: SessionUser | null | undefined
+): user is SessionUser & { name: string; token: string } {
+  return Boolean(user?.name?.trim() && user?.token?.trim())
+}
+
+export const COMMENT_DOM_ID = 'js-comment-id'

package/lib/utils/headerPosition.ts

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export const HEADER_BAR_SELECTOR = '.rp-header-bar'
+
+export function measureHeaderTop(): number {
+  const header = document.querySelector(HEADER_BAR_SELECTOR)
+  if (!header) return 0
+  const { top } = header.getBoundingClientRect()
+  // Header visible: align with its top edge. Header hidden: stay at viewport top.
+  return Math.max(0, top)
+}
+
+export function useHeaderTop() {
+  const [top, setTop] = useState(0)
+
+  useEffect(() => {
+    let frame = 0
+
+    const update = () => {
+      frame = 0
+      setTop(measureHeaderTop())
+    }
+
+    const onScroll = () => {
+      if (frame) return
+      frame = window.requestAnimationFrame(update)
+    }
+
+    update()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onScroll, { passive: true })
+
+    const header = document.querySelector(HEADER_BAR_SELECTOR)
+    header?.addEventListener('transitionend', onScroll)
+
+    const onHeaderState = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return
+      if (event.data?.id !== 'header-state') return
+      onScroll()
+    }
+    window.addEventListener('message', onHeaderState)
+
+    return () => {
+      if (frame) cancelAnimationFrame(frame)
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onScroll)
+      header?.removeEventListener('transitionend', onScroll)
+      window.removeEventListener('message', onHeaderState)
+    }
+  }, [])
+
+  return top
+}

package/lib/utils/icons.tsx

@@ -0,0 +1,238 @@
+import type { ReactNode, SVGProps } from 'react'
+
+type IconProps = SVGProps<SVGSVGElement> & { size?: number }
+
+function SvgIcon({ size = 20, children, ...rest }: IconProps & { children: ReactNode }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...rest}
+    >
+      {children}
+    </svg>
+  )
+}
+
+export function HomeIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V20h14V9.5" />
+    </SvgIcon>
+  )
+}
+
+export function NavIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" />
+    </SvgIcon>
+  )
+}
+
+export function ArchivesIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 2" />
+    </SvgIcon>
+  )
+}
+
+export function FolderIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M3 7h6l2 2h10v10H3z" />
+    </SvgIcon>
+  )
+}
+
+export function HeartIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" />
+    </SvgIcon>
+  )
+}
+
+export function EyeIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
+      <circle cx="12" cy="12" r="3" />
+    </SvgIcon>
+  )
+}
+
+export function ClockIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 2" />
+    </SvgIcon>
+  )
+}
+
+export function TagIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M3 11v-2l8-6 8 6v2l-8 10z" />
+      <circle cx="7.5" cy="9.5" r="1" fill="currentColor" stroke="none" />
+    </SvgIcon>
+  )
+}
+
+export function UserIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="8" r="4" />
+      <path d="M4 20c1.5-4 6-6 8-6s6.5 2 8 6" />
+    </SvgIcon>
+  )
+}
+
+export function BellIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M18 16H6l2-2V10a4 4 0 0 1 8 0v4z" />
+      <path d="M10 18a2 2 0 0 0 4 0" />
+    </SvgIcon>
+  )
+}
+
+export function FlameIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12 3c2 4 5 5 5 9a5 5 0 0 1-10 0c0-3 2-4 3-7 1 2 1 3 2 5z" />
+    </SvgIcon>
+  )
+}
+
+export function SearchIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-4-4" />
+    </SvgIcon>
+  )
+}
+
+export function ChevronRightIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="m9 6 6 6-6 6" />
+    </SvgIcon>
+  )
+}
+
+export function ChevronLeftIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="m15 18-6-6 6-6" />
+    </SvgIcon>
+  )
+}
+
+export function MessageIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 5h16v11H7l-3 3z" />
+    </SvgIcon>
+  )
+}
+
+export function MenuFoldIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 6h16M4 12h10M4 18h16" />
+    </SvgIcon>
+  )
+}
+
+export function MenuUnfoldIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 6h16M10 12h10M4 18h16" />
+    </SvgIcon>
+  )
+}
+
+export function ToolIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M14.7 6.3a4.5 4.5 0 0 0-6.1 6.1L3 18l3 3 5.6-5.6a4.5 4.5 0 0 0 6.1-6.1z" />
+      <path d="M15 5l4 4" />
+    </SvgIcon>
+  )
+}
+
+export function CodeIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 8 4 12l5 4" />
+      <path d="M15 8l5 4-5 4" />
+      <path d="M11 20 13 4" />
+    </SvgIcon>
+  )
+}
+
+import type { JSX } from 'react'
+
+const iconMap: Record<string, (props: IconProps) => JSX.Element> = {
+  HomeOutlined: HomeIcon,
+  home: HomeIcon,
+  GlobalOutlined: NavIcon,
+  nav: NavIcon,
+  ToolOutlined: ToolIcon,
+  tool: ToolIcon,
+  CodeOutlined: CodeIcon,
+  code: CodeIcon,
+  HistoryOutlined: ArchivesIcon,
+  archives: ArchivesIcon,
+  FolderOutlined: FolderIcon,
+  folder: FolderIcon,
+  TagOutlined: TagIcon,
+  tag: TagIcon,
+  UserOutlined: UserIcon,
+  user: UserIcon,
+  SearchOutlined: SearchIcon,
+  search: SearchIcon,
+  MessageOutlined: MessageIcon,
+  message: MessageIcon,
+  suggestions: MessageIcon,
+  ProfileOutlined: UserIcon,
+  profile: UserIcon,
+}
+
+export function getIconByName(name?: string | ReactNode) {
+  if (!name || typeof name !== 'string') return null
+  return iconMap[name] ?? null
+}
+
+/** Nav category icons — fallback to folder when name is unknown. */
+export function getNavIconByName(name?: string) {
+  if (!name) return FolderIcon
+  return iconMap[name] ?? FolderIcon
+}
+
+export function getFirstLevelRoute(path: string, locales: string[] = ['zh', 'en']) {
+  if (!path.startsWith('/')) path = `/${path}`
+  if (path.endsWith('/') && path.length > 1) path = path.slice(0, -1)
+  const segments = path.split('/').filter(Boolean)
+  if (segments.length > 0 && locales.includes(segments[0])) {
+    segments.shift()
+    path = segments.length ? `/${segments.join('/')}` : '/'
+  }
+  const secondSlashIndex = path.indexOf('/', 1)
+  return secondSlashIndex === -1 ? path : path.slice(0, secondSlashIndex)
+}

package/lib/utils/reading.ts

@@ -0,0 +1,16 @@
+/** Estimate reading time from HTML content (CJK-aware). */
+export function estimateReadMinutes(html: string): number {
+  const text = html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!text) return 1
+
+  const cjkChars = (text.match(/[\u4e00-\u9fff\u3040-\u30ff\uac00-\ud7af]/g) || []).length
+  if (cjkChars > text.length * 0.25) {
+    return Math.max(1, Math.ceil(text.length / 400))
+  }
+
+  const words = text.split(/\s+/).filter(Boolean).length
+  return Math.max(1, Math.ceil(words / 220))
+}

package/lib/utils/scroll.ts

@@ -0,0 +1,8 @@
+export function getDocumentScrollTop(): number {
+  return (
+    document.documentElement.scrollTop ||
+    window.pageYOffset ||
+    window.scrollY ||
+    document.body.scrollTop
+  )
+}