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

package/components/widgets/LikesWidget.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import ArticleActionButton, {
+  type ArticleActionVariant,
+} from '@/components/widgets/ArticleActionButton'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useState } from 'react'
+
+interface LikesWidgetProps {
+  defaultCount?: number
+  id: string
+  api: (id: string, type: 'like' | 'dislike') => Promise<number>
+  variant?: ArticleActionVariant
+}
+
+export default function LikesWidget({
+  defaultCount = 0,
+  id,
+  api,
+  variant = 'floating',
+}: LikesWidgetProps) {
+  const { locale } = useSiteCatalog()
+  const [count, setCount] = useState(defaultCount)
+  const [liked, setLiked] = useState(false)
+  const label = locale === 'zh' ? '点赞' : 'Like'
+
+  useEffect(() => {
+    setCount(defaultCount)
+  }, [defaultCount])
+
+  useEffect(() => {
+    try {
+      const stored = JSON.parse(window.localStorage.getItem('LIKES') || '[]') as string[]
+      setLiked(stored.includes(id))
+    } catch {
+      setLiked(false)
+    }
+  }, [id])
+
+  const toggle = useCallback(() => {
+    const type = liked ? 'dislike' : 'like'
+    api(id, type).then((next) => {
+      setCount(next)
+      try {
+        const stored = JSON.parse(window.localStorage.getItem('LIKES') || '[]') as string[]
+        const nextStored = liked ? stored.filter((item) => item !== id) : [...stored, id]
+        window.localStorage.setItem('LIKES', JSON.stringify(nextStored))
+        setLiked(!liked)
+      } catch {
+        setLiked(!liked)
+      }
+    })
+  }, [api, id, liked])
+
+  return (
+    <ArticleActionButton
+      active={liked}
+      label={label}
+      count={count}
+      onClick={toggle}
+      variant={variant}
+      activeClassName="is-liked"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="22"
+        height="22"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        aria-hidden
+      >
+        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+      </svg>
+    </ArticleActionButton>
+  )
+}

package/components/widgets/ShareWidget.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import ArticleActionButton, {
+  type ArticleActionVariant,
+} from '@/components/widgets/ArticleActionButton'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface ShareWidgetProps {
+  variant?: ArticleActionVariant
+}
+
+async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    try {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      const ok = document.execCommand('copy')
+      document.body.removeChild(textarea)
+      return ok
+    } catch {
+      return false
+    }
+  }
+}
+
+export default function ShareWidget({ variant = 'floating' }: ShareWidgetProps) {
+  const { t } = useLocale()
+  const [toast, setToast] = useState('')
+  const [copied, setCopied] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [mounted, setMounted] = useState(false)
+  const timerRef = useRef<number | null>(null)
+  const lockingRef = useRef(false)
+
+  const label = t('share')
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => clearTimer, [clearTimer])
+
+  const handleShare = useCallback(async () => {
+    if (lockingRef.current) return
+
+    lockingRef.current = true
+    setBusy(true)
+
+    const ok = await copyToClipboard(window.location.href)
+    if (!ok) {
+      lockingRef.current = false
+      setBusy(false)
+      return
+    }
+
+    setCopied(true)
+    setToast(t('shareLinkCopied'))
+    clearTimer()
+    timerRef.current = window.setTimeout(() => {
+      setToast('')
+      setCopied(false)
+      setBusy(false)
+      lockingRef.current = false
+      timerRef.current = null
+    }, 2000)
+  }, [clearTimer, t])
+
+  return (
+    <>
+      <ArticleActionButton
+        active={copied}
+        disabled={busy}
+        label={label}
+        onClick={handleShare}
+        variant={variant}
+        activeClassName="is-shared"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="22"
+          height="22"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.75"
+          aria-hidden
+        >
+          <circle cx="18" cy="5" r="3" />
+          <circle cx="6" cy="12" r="3" />
+          <circle cx="18" cy="19" r="3" />
+          <path d="m8.59 13.51 6.83 3.98" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M15.41 6.51l-6.82 3.98" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </ArticleActionButton>
+      {toast && mounted
+        ? createPortal(
+            <div className="rp-share-toast" role="status" aria-live="polite">
+              {toast}
+            </div>,
+            document.body
+          )
+        : null}
+    </>
+  )
+}

package/components/widgets/TagCloud.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import TagCloudEngine from '@/lib/utils/tagCloud'
+import { type ReactNode, useLayoutEffect, useRef } from 'react'
+
+interface TagCloudProps {
+  children: ReactNode
+  className?: string
+  onReadyChange?: (ready: boolean) => void
+  'aria-hidden'?: boolean
+}
+
+function canInitialize(el: HTMLDivElement) {
+  const anchors = el.getElementsByTagName('a')
+  if (!anchors.length || el.offsetWidth === 0 || el.offsetHeight === 0) return false
+
+  for (let i = 0; i < anchors.length; i++) {
+    if (anchors[i].offsetWidth > 0) return true
+  }
+
+  return false
+}
+
+export default function TagCloud({
+  children,
+  className = '',
+  onReadyChange,
+  ...rest
+}: TagCloudProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const engineRef = useRef<TagCloudEngine | null>(null)
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return undefined
+
+    if (!engineRef.current) {
+      engineRef.current = new TagCloudEngine()
+    }
+
+    const engine = engineRef.current
+    let cancelled = false
+    let observer: ResizeObserver | null = null
+
+    const markReady = (ready: boolean) => {
+      onReadyChange?.(ready)
+    }
+
+    const tryInit = () => {
+      if (cancelled || !ref.current) return true
+      if (!canInitialize(ref.current)) return false
+
+      ref.current.classList.remove('is-ready')
+      markReady(false)
+      engine.init(ref.current)
+      ref.current.classList.add('is-ready')
+      markReady(true)
+      return true
+    }
+
+    el.classList.remove('is-ready')
+    markReady(false)
+
+    if (!tryInit()) {
+      observer = new ResizeObserver(() => {
+        if (tryInit() && observer) {
+          observer.disconnect()
+          observer = null
+        }
+      })
+      observer.observe(el)
+
+      if (typeof document !== 'undefined' && document.fonts?.ready) {
+        void document.fonts.ready.then(() => {
+          if (!cancelled) tryInit()
+        })
+      }
+    }
+
+    return () => {
+      cancelled = true
+      observer?.disconnect()
+      engine.destroy()
+      el.classList.remove('is-ready')
+      markReady(false)
+    }
+  }, [children, onReadyChange])
+
+  return (
+    <div ref={ref} className={`rp-tag-cloud ${className}`.trim()} {...rest}>
+      {children}
+    </div>
+  )
+}

package/components/widgets/TagsWidget.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import TagCloud from '@/components/widgets/TagCloud'
+import { getColorFromNumber, getTagStyle } from '@/lib/utils/colors'
+import { TagIcon } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useCallback, useEffect, useState } from 'react'
+
+interface Tag {
+  id?: string | number
+  value: string
+  label: string
+  articleCount?: number
+}
+
+function tagKey(tag: Tag, index: number): string {
+  return String(tag.id ?? tag.value ?? index)
+}
+
+interface TagsWidgetProps {
+  tags: Tag[]
+  needTitle?: boolean
+  animationMode?: boolean
+}
+
+const TAG_CLOUD_SKELETON_ITEMS = [
+  { top: '16%', left: '18%', width: 68 },
+  { top: '28%', left: '56%', width: 54 },
+  { top: '42%', left: '8%', width: 76 },
+  { top: '50%', left: '42%', width: 48 },
+  { top: '64%', left: '24%', width: 62 },
+  { top: '70%', left: '58%', width: 52 },
+]
+
+function TagCloudSkeleton() {
+  return (
+    <div className="rp-tag-cloud-skeleton mx-auto my-2" aria-hidden>
+      {TAG_CLOUD_SKELETON_ITEMS.map((item, index) => (
+        <span
+          key={index}
+          className="rp-tag-cloud-skeleton-item"
+          style={{
+            top: item.top,
+            left: item.left,
+            width: item.width,
+            animationDelay: `${index * 80}ms`,
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function TagsWidget({
+  tags = [],
+  needTitle = true,
+  animationMode = false,
+}: TagsWidgetProps) {
+  const { t } = useLocale()
+  const [cloudReady, setCloudReady] = useState(false)
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
+
+  useEffect(() => {
+    setCloudReady(false)
+  }, [tags])
+
+  const handleCloudReadyChange = useCallback((ready: boolean) => {
+    setCloudReady(ready)
+  }, [])
+
+  const useTagCloud = animationMode && tags.length > 4
+  const showCloudSkeleton = useTagCloud && tags.length > 0 && (!hydrated || !cloudReady)
+
+  const compactTagList =
+    tags.length > 0 ? (
+      <ul className="rp-sidebar-widget__tags-list">
+        {tags.map((tag, index) => (
+          <li key={tagKey(tag, index)} className="m-0 p-0">
+            <Link
+              href={`/tag/${tag.value}`}
+              className="inline-block rounded px-2 py-1 text-sm no-underline transition-all duration-200 hover:scale-105 hover:opacity-90 hover:shadow-sm"
+              style={getTagStyle(getColorFromNumber(index))}
+            >
+              {tag.label}
+              {typeof tag.articleCount === 'number' ? ` [${tag.articleCount}]` : ''}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <div className="flex h-full items-center justify-center px-4 text-sm text-[var(--second-text-color)]">
+        {t('empty')}
+      </div>
+    )
+
+  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${useTagCloud ? 'rp-sidebar-widget--cloud' : 'rp-sidebar-widget--compact'}`}
+    >
+      {needTitle ? (
+        <div className="rp-sidebar-widget__header">
+          <TagIcon size={16} className="mr-2 inline-block text-[var(--primary-color)]" />
+          <span>{t('tagTitle')}</span>
+        </div>
+      ) : null}
+
+      <div className="rp-sidebar-widget__body">
+        {useTagCloud ? (
+          <>
+            <div className="rp-sidebar-widget__tag-host">
+              {showCloudSkeleton ? <TagCloudSkeleton /> : null}
+              {tags.length > 0 ? (
+                <TagCloud
+                  className={`transition-opacity duration-300 ${cloudReady ? 'opacity-100' : 'opacity-0'}`}
+                  onReadyChange={handleCloudReadyChange}
+                  aria-hidden
+                >
+                  {tags.map((tag, index) => (
+                    <a
+                      key={tagKey(tag, index)}
+                      href={`/tag/${tag.value}`}
+                      tabIndex={-1}
+                      aria-hidden
+                      style={getTagStyle(getColorFromNumber(index))}
+                    >
+                      {tag.label}
+                    </a>
+                  ))}
+                </TagCloud>
+              ) : (
+                <div className="flex h-full items-center justify-center px-4 text-sm text-[var(--second-text-color)]">
+                  {t('empty')}
+                </div>
+              )}
+            </div>
+            <nav aria-label={t('tagTitle')} className="sr-only">
+              <ul>
+                {tags.map((tag, index) => (
+                  <li key={tagKey(tag, index)}>
+                    <Link href={`/tag/${tag.value}`}>
+                      {tag.label}
+                      {typeof tag.articleCount === 'number' ? ` [${tag.articleCount}]` : ''}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </>
+        ) : (
+          compactTagList
+        )}
+      </div>
+    </div>
+  )
+}

package/eslint.config.mjs

@@ -0,0 +1,80 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import globals from 'globals'
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+})
+
+const eslintConfig = [
+  {
+    ignores: [
+      'next-env.d.ts',
+      'next.config.js',
+      '.next/**',
+      '.next-dev/**',
+      'node_modules/**',
+      'scripts/**',
+    ],
+  },
+  js.configs.recommended,
+  ...compat.extends(
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:prettier/recommended',
+    'next',
+    'next/core-web-vitals'
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+
+    rules: {
+      'prettier/prettier': 'error',
+      'react/react-in-jsx-scope': 'off',
+      'jsx-a11y/anchor-is-valid': [
+        'error',
+        {
+          components: ['Link'],
+          specialLink: ['hrefLeft', 'hrefRight'],
+          aspects: ['invalidHref', 'preferButton'],
+        },
+      ],
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      'react/no-unescaped-entities': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  },
+]
+
+export default eslintConfig

package/lib/auth/githubOAuth.ts

@@ -0,0 +1,26 @@
+const BASE_PATH = (process.env.BASE_PATH || '').replace(/\/$/, '')
+
+export function resolveGithubCallbackUrl(from = '/'): string {
+  if (typeof window === 'undefined') {
+    const site = (process.env.CLIENT_SITE_URL || 'http://localhost:3001').replace(/\/$/, '')
+    const safeFrom = from.startsWith('/') ? from : '/'
+    return `${site}${BASE_PATH}/login/?from=${encodeURIComponent(safeFrom)}`
+  }
+
+  const origin = window.location.origin
+  const safeFrom = from.startsWith('/') ? from : '/'
+  return `${origin}${BASE_PATH}/login/?from=${encodeURIComponent(safeFrom)}`
+}
+
+export function resolveGithubAuthorizeUrl(from = '/'): string | null {
+  const clientId = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID?.trim()
+  if (!clientId) return null
+
+  const params = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: resolveGithubCallbackUrl(from),
+    scope: 'user:email',
+  })
+
+  return `https://github.com/login/oauth/authorize?${params.toString()}`
+}

package/lib/auth/sessionUser.ts

@@ -0,0 +1,41 @@
+import type { ThemeSessionUser } from '@fecommunity/reactpress-toolkit/theme'
+
+function readToken(record: Record<string, unknown>): string {
+  if (typeof record.token === 'string' && record.token.trim()) {
+    return record.token.trim()
+  }
+  if (typeof record.accessToken === 'string' && record.accessToken.trim()) {
+    return record.accessToken.trim()
+  }
+  const tokens = record.tokens
+  if (tokens && typeof tokens === 'object') {
+    const accessToken = (tokens as Record<string, unknown>).accessToken
+    if (typeof accessToken === 'string' && accessToken.trim()) {
+      return accessToken.trim()
+    }
+  }
+  return ''
+}
+
+/** Map `/auth/login` and `/auth/github` payloads to theme session storage shape. */
+export function normalizeSessionUser(data: unknown): ThemeSessionUser | null {
+  if (!data || typeof data !== 'object') return null
+
+  const record = data as Record<string, unknown>
+  const nested =
+    record.user && typeof record.user === 'object'
+      ? (record.user as Record<string, unknown>)
+      : record
+
+  const name = typeof nested.name === 'string' ? nested.name.trim() : ''
+  const token = readToken(record) || readToken(nested)
+  if (!name) return null
+
+  return {
+    name,
+    email: typeof nested.email === 'string' ? nested.email : '',
+    avatar: typeof nested.avatar === 'string' ? nested.avatar : '',
+    token,
+    role: typeof nested.role === 'string' ? nested.role : undefined,
+  }
+}