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

package/lib/utils/tagCloud.ts

@@ -0,0 +1,222 @@
+interface TagParams {
+  radius?: number
+  d?: number
+  dtr?: number
+  distr?: boolean
+  tSpeed?: number
+  size?: number
+}
+
+interface TagMeta {
+  on?: boolean
+  offsetWidth: number
+  offsetHeight: number
+  cx: number
+  cy: number
+  cz: number
+  x: number
+  y: number
+  scale: number
+  alpha: number
+  zIndex: number
+}
+
+export default class TagCloudEngine {
+  private oDiv?: HTMLDivElement
+  private aA: HTMLCollectionOf<HTMLAnchorElement> | null = null
+  private sa = 0
+  private ca = 0
+  private sb = 0
+  private cb = 0
+  private sc = 0
+  private cc = 0
+
+  protected radius = 90
+  protected d = 200
+  protected dtr = Math.PI / 180
+  protected mcList: TagMeta[] = []
+  protected distr = true
+  protected tSpeed = 11
+  protected size = 200
+  protected readonly mouseX = 0
+  protected readonly mouseY = 10
+  protected readonly howElliptical = 1
+  private rafId: number | null = null
+
+  constructor(params?: TagParams) {
+    if (params?.radius != null) this.radius = params.radius
+    if (params?.d != null) this.d = params.d
+    if (params?.dtr != null) this.dtr = params.dtr
+    if (params?.distr != null) this.distr = params.distr
+    if (params?.tSpeed != null) this.tSpeed = params.tSpeed
+    if (params?.size != null) this.size = params.size
+  }
+
+  destroy = () => {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+    this.mcList = []
+    this.aA = null
+  }
+
+  init = (container?: HTMLDivElement | string) => {
+    this.destroy()
+
+    if (container instanceof HTMLDivElement) {
+      this.oDiv = container
+    } else if (typeof container === 'string') {
+      this.oDiv = document.querySelector(container) as HTMLDivElement | null
+    }
+
+    if (!this.oDiv) return
+
+    this.aA = this.oDiv.getElementsByTagName('a')
+    if (!this.aA.length) return
+
+    for (let i = 0; i < this.aA.length; i++) {
+      const el = this.aA[i]
+      const meta: TagMeta = {
+        offsetWidth: el.offsetWidth,
+        offsetHeight: el.offsetHeight,
+        cx: 0,
+        cy: 0,
+        cz: 0,
+        x: 0,
+        y: 0,
+        scale: 1,
+        alpha: 1,
+        zIndex: 0,
+      }
+
+      el.onmouseover = function (this: HTMLAnchorElement) {
+        meta.on = true
+        this.style.zIndex = '9999'
+        this.style.color = '#fff'
+        this.style.padding = '5px 10px'
+        this.style.opacity = '1'
+      }
+
+      el.onmouseout = function (this: HTMLAnchorElement) {
+        meta.on = false
+        this.style.zIndex = String(meta.zIndex)
+        this.style.padding = '5px 8px'
+        this.style.opacity = '1'
+      }
+
+      this.mcList.push(meta)
+    }
+
+    this.sineCosine(0, 0, 0)
+    this.positionAll()
+    this.doPosition()
+    this.rafId = requestAnimationFrame(this.update)
+  }
+
+  private update = () => {
+    const a = (Math.min(Math.max(-this.mouseY, -this.size), this.size) / this.radius) * this.tSpeed
+    const b = (-Math.min(Math.max(-this.mouseX, -this.size), this.size) / this.radius) * this.tSpeed
+
+    if (Math.abs(a) > 0.01 || Math.abs(b) > 0.01) {
+      this.sineCosine(a, b, 0)
+
+      for (let i = 0; i < this.mcList.length; i++) {
+        if (this.mcList[i].on) continue
+
+        const rx1 = this.mcList[i].cx
+        const ry1 = this.mcList[i].cy * this.ca + this.mcList[i].cz * -this.sa
+        const rz1 = this.mcList[i].cy * this.sa + this.mcList[i].cz * this.ca
+
+        const rx2 = rx1 * this.cb + rz1 * this.sb
+        const ry2 = ry1
+        const rz2 = rx1 * -this.sb + rz1 * this.cb
+
+        const rx3 = rx2 * this.cc + ry2 * -this.sc
+        const ry3 = rx2 * this.sc + ry2 * this.cc
+        const rz3 = rz2
+
+        this.mcList[i].cx = rx3
+        this.mcList[i].cy = ry3
+        this.mcList[i].cz = rz3
+
+        const per = this.d / (this.d + rz3)
+        this.mcList[i].x = this.howElliptical * rx3 * per - this.howElliptical * 2
+        this.mcList[i].y = ry3 * per
+        this.mcList[i].scale = per
+
+        let alpha = per
+        alpha = (alpha - 0.6) * (10 / 6)
+        this.mcList[i].alpha = alpha * alpha * alpha - 0.2
+        this.mcList[i].zIndex = Math.ceil(100 - Math.floor(this.mcList[i].cz))
+      }
+
+      this.doPosition()
+    }
+
+    this.rafId = requestAnimationFrame(this.update)
+  }
+
+  private positionAll = () => {
+    const max = Math.min(this.mcList.length, this.aA?.length ?? 0)
+    if (!max || !this.oDiv) return
+
+    for (let i = 0; i < max; i++) {
+      const el = this.aA?.[i]
+      if (!el) continue
+
+      let phi = 0
+      let theta = 0
+      if (this.distr) {
+        phi = Math.acos(-1 + (2 * (i + 1) - 1) / max)
+        theta = Math.sqrt(max * Math.PI) * phi
+      } else {
+        phi = Math.random() * Math.PI
+        theta = Math.random() * (2 * Math.PI)
+      }
+
+      this.mcList[i].cx = this.radius * Math.cos(theta) * Math.sin(phi)
+      this.mcList[i].cy = this.radius * Math.sin(theta) * Math.sin(phi)
+      this.mcList[i].cz = this.radius * Math.cos(phi)
+
+      el.style.left = `${this.mcList[i].cx + this.oDiv.offsetWidth / 2 - this.mcList[i].offsetWidth / 2}px`
+      el.style.top = `${this.mcList[i].cy + this.oDiv.offsetHeight / 2 - this.mcList[i].offsetHeight / 2}px`
+    }
+  }
+
+  private doPosition = () => {
+    if (!this.oDiv) return
+
+    const l = this.oDiv.offsetWidth / 2
+    const t = this.oDiv.offsetHeight / 2
+    const count = Math.min(this.mcList.length, this.aA?.length ?? 0)
+
+    for (let i = 0; i < count; i++) {
+      if (this.mcList[i].on) continue
+
+      const el = this.aA?.[i]
+      if (!el) continue
+
+      if (this.mcList[i].alpha > 0.1) {
+        el.style.display = ''
+      } else {
+        el.style.display = 'none'
+        continue
+      }
+
+      el.style.left = `${this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2}px`
+      el.style.top = `${this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2}px`
+      el.style.opacity = '1'
+      el.style.zIndex = String(this.mcList[i].zIndex)
+    }
+  }
+
+  private sineCosine = (a: number, b: number, c: number) => {
+    this.sa = Math.sin(a * this.dtr)
+    this.ca = Math.cos(a * this.dtr)
+    this.sb = Math.sin(b * this.dtr)
+    this.cb = Math.cos(b * this.dtr)
+    this.sc = Math.sin(c * this.dtr)
+    this.cc = Math.cos(c * this.dtr)
+  }
+}

package/next.config.js

@@ -0,0 +1,103 @@
+const path = require('path')
+const { config } = require('@fecommunity/reactpress-toolkit/config')
+const {
+  resolveThemeApiEnv,
+  resolveApiRewriteOrigin,
+  resolveClientSiteUrl,
+  isLocalhostUrl,
+} = require('./scripts/resolve-api-env.mjs')
+
+// App Router (Next 15): do not use createReactPressNextConfig's react webpack alias —
+// it conflicts with Next's compiled React and causes SSR "useContext" null errors.
+// Server code imports `@fecommunity/reactpress-toolkit/theme/server` (no UI barrel).
+
+const themeApiEnv = resolveThemeApiEnv()
+
+function resolveUploadRewriteOrigin() {
+  if (process.env.REACTPRESS_MOCK_API === '1') {
+    const site = resolveClientSiteUrl()
+    if (site && !isLocalhostUrl(site)) return site
+  }
+  return resolveApiRewriteOrigin(themeApiEnv)
+}
+
+const uploadRewriteOrigin = resolveUploadRewriteOrigin()
+
+/** Only inline browser-safe env — server API URLs must stay runtime on Vercel. */
+const publicThemeEnv = {
+  NEXT_PUBLIC_REACTPRESS_API_URL: themeApiEnv.NEXT_PUBLIC_REACTPRESS_API_URL,
+  NEXT_PUBLIC_REACTPRESS_ADMIN_URL: themeApiEnv.NEXT_PUBLIC_REACTPRESS_ADMIN_URL,
+  CLIENT_SITE_URL: themeApiEnv.CLIENT_SITE_URL,
+}
+
+const basePath = process.env.BASE_PATH || undefined
+const output = process.env.EXPORT ? 'export' : undefined
+
+/** @type {import('next').NextConfig} */
+module.exports = {
+  output,
+  basePath,
+  distDir: process.env.NEXT_DIST_DIR || '.next',
+  outputFileTracingRoot: path.join(__dirname),
+  ...(config.CLIENT_ASSET_PREFIX ? { assetPrefix: config.CLIENT_ASSET_PREFIX } : {}),
+  poweredByHeader: false,
+  reactStrictMode: true,
+  trailingSlash: true,
+  skipTrailingSlashRedirect: true,
+  transpilePackages: ['@fecommunity/reactpress-toolkit'],
+  experimental: {
+    optimizePackageImports: [
+      '@fecommunity/reactpress-toolkit',
+      '@fecommunity/reactpress-toolkit/ui',
+    ],
+    // Avoid SegmentViewNode manifest corruption in dev (Next 15.5+).
+    devtoolSegmentExplorer: false,
+  },
+  eslint: { ignoreDuringBuilds: process.env.ENFORCE_ESLINT === '1' ? false : true },
+  typescript: { ignoreBuildErrors: process.env.ENFORCE_TYPECHECK === '1' ? false : true },
+  env: {
+    ...publicThemeEnv,
+  },
+  images: {
+    remotePatterns: [
+      { protocol: 'http', hostname: 'localhost' },
+      { protocol: 'https', hostname: '**' },
+    ],
+    unoptimized: process.env.UNOPTIMIZED ? true : undefined,
+  },
+  webpack: (webpackConfig) => {
+    webpackConfig.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+    return webpackConfig
+  },
+  async rewrites() {
+    return [{ source: '/uploads/:path*', destination: `${uploadRewriteOrigin}/uploads/:path*` }]
+  },
+  async redirects() {
+    return [
+      { source: '/blog', destination: '/', permanent: true },
+      { source: '/blog/', destination: '/', permanent: true },
+      { source: '/tags/:tag', destination: '/tag/:tag', permanent: true },
+      { source: '/tags/:tag/page/:page', destination: '/tag/:tag', permanent: true },
+      { source: '/page/suggestions', destination: '/suggestions', permanent: true },
+      { source: '/page/suggestions/', destination: '/suggestions/', permanent: true },
+      { source: '/nav', destination: '/search', permanent: true },
+      { source: '/nav/', destination: '/search/', permanent: true },
+    ]
+  },
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+          { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
+          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
+        ],
+      },
+    ]
+  },
+}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@fecommunity/reactpress-theme-starter",
+  "version": "1.0.0-beta.0",
+  "description": "ReactPress 博客主题 Starter：Tailwind CSS + Next.js App Router，对接 toolkit 动态内容",
+  "license": "MIT",
+  "keywords": [
+    "reactpress",
+    "nextjs",
+    "blog",
+    "theme",
+    "tailwindcss",
+    "headless-cms"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fecommunity/reactpress-theme-starter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fecommunity/reactpress-theme-starter/issues"
+  },
+  "homepage": "https://github.com/fecommunity/reactpress-theme-starter#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "app",
+    "components",
+    "lib",
+    "public",
+    "scripts",
+    "theme.json",
+    "theme.manifest.schema.json",
+    "next.config.js",
+    "postcss.config.js",
+    "prettier.config.js",
+    "eslint.config.mjs",
+    "tsconfig.json",
+    "svg.d.ts",
+    "vercel.json",
+    ".env.example"
+  ],
+  "packageManager": "pnpm@9.15.9",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "node scripts/dev.mjs",
+    "dev:mock": "cross-env REACTPRESS_MOCK_API=1 node scripts/dev.mjs",
+    "clean": "rm -rf .next .next-dev",
+    "build": "cross-env INIT_CWD=$PWD next build",
+    "build:mock": "node scripts/build-mock.mjs",
+    "build:ci": "pnpm clean && cross-env INIT_CWD=$PWD next build",
+    "start": "cross-env INIT_CWD=$PWD next start -p 3001",
+    "start:mock": "node scripts/start-mock.mjs",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "pnpm run lint:check && pnpm run format:check",
+    "postinstall": "node scripts/verify-toolkit.mjs && node scripts/ensure-env.mjs"
+  },
+  "dependencies": {
+    "@fecommunity/reactpress-toolkit": "^3.1.0",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/typography": "^0.5.19",
+    "cross-env": "^10.1.0",
+    "highlight.js": "^9.18.5",
+    "next": "15.5.12",
+    "nprogress": "^0.2.0",
+    "postcss": "^8.5.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "^4.1.18",
+    "viewerjs": "^1.5.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.18.0",
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^20.17.0",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "eslint": "^9.18.0",
+    "eslint-config-next": "15.5.12",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "globals": "^17.3.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "typescript": "^5.9.3"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+}

package/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "ReactPress",
+  "short_name": "ReactPress",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#087ea4",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/scripts/build-mock.mjs

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+/**
+ * Production build against the in-process mock API (same data as `pnpm dev:mock`).
+ *
+ * Used by Vercel and CI: start `next dev` with mock routes, wait until ready,
+ * then run `next build` so SSR/ISR prefetch uses mock data instead of a remote API.
+ */
+import { spawn } from 'node:child_process'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { ensureEnvFile } from './ensure-env.mjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const projectRoot = path.resolve(__dirname, '..')
+
+const MOCK_PORT = Number(process.env.REACTPRESS_MOCK_BUILD_PORT) || 3010
+const MOCK_HOST = process.env.REACTPRESS_MOCK_BUILD_HOST || '127.0.0.1'
+const MOCK_API = `http://${MOCK_HOST}:${MOCK_PORT}/api`
+const DEV_DIST_DIR = process.env.NEXT_DIST_DIR || '.next-dev'
+
+function run(command, args, env = process.env) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      cwd: projectRoot,
+      env,
+      stdio: 'inherit',
+      shell: process.platform === 'win32',
+    })
+
+    child.on('error', reject)
+    child.on('exit', (code, signal) => {
+      if (code === 0) resolve()
+      else reject(new Error(`${command} exited with code ${code ?? signal}`))
+    })
+  })
+}
+
+async function waitForMockApi() {
+  const healthUrl = `${MOCK_API}/setting/get`
+  const maxAttempts = 90
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    try {
+      const response = await fetch(healthUrl, { method: 'POST' })
+      if (response.ok) {
+        console.log(`[build:mock] Mock API ready at ${MOCK_API}`)
+        return
+      }
+    } catch {
+      // dev server still starting
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  }
+
+  throw new Error(`Mock API failed to start at ${MOCK_API}`)
+}
+
+async function main() {
+  const clientSiteUrl =
+    process.env.CLIENT_SITE_URL?.trim() || 'https://reactpress-theme-starter.vercel.app'
+
+  ensureEnvFile(projectRoot, {
+    overrides: {
+      REACTPRESS_MOCK_API: '1',
+      REACTPRESS_API_URL: MOCK_API,
+      SERVER_API_URL: MOCK_API,
+      NEXT_PUBLIC_REACTPRESS_API_URL: MOCK_API,
+      CLIENT_SITE_URL: clientSiteUrl,
+    },
+  })
+
+  const devEnv = {
+    ...process.env,
+    INIT_CWD: projectRoot,
+    REACTPRESS_ORIGINAL_CWD: projectRoot,
+    NEXT_DIST_DIR: DEV_DIST_DIR,
+    REACTPRESS_MOCK_API: '1',
+    REACTPRESS_API_URL: MOCK_API,
+    SERVER_API_URL: MOCK_API,
+    NEXT_PUBLIC_REACTPRESS_API_URL: MOCK_API,
+    NEXT_TELEMETRY_DISABLED: '1',
+  }
+
+  console.log(`[build:mock] Starting mock dev server on ${MOCK_HOST}:${MOCK_PORT}`)
+  const devProcess = spawn(
+    'pnpm',
+    ['exec', 'next', 'dev', '-p', String(MOCK_PORT), '-H', MOCK_HOST],
+    {
+      cwd: projectRoot,
+      env: devEnv,
+      stdio: 'inherit',
+      shell: process.platform === 'win32',
+      detached: process.platform !== 'win32',
+    }
+  )
+
+  const stopDev = () => {
+    if (devProcess.killed) return
+    if (process.platform === 'win32') {
+      devProcess.kill()
+      return
+    }
+    try {
+      process.kill(-devProcess.pid, 'SIGTERM')
+    } catch {
+      devProcess.kill('SIGTERM')
+    }
+  }
+
+  process.on('SIGINT', stopDev)
+  process.on('SIGTERM', stopDev)
+
+  try {
+    await waitForMockApi()
+
+    const buildEnv = {
+      ...process.env,
+      INIT_CWD: projectRoot,
+      VERCEL: '1',
+      REACTPRESS_MOCK_API: '1',
+      REACTPRESS_API_URL: MOCK_API,
+      SERVER_API_URL: MOCK_API,
+      CLIENT_SITE_URL: clientSiteUrl,
+      // Client bundle must use same-origin /api at runtime (not build-time localhost).
+      NEXT_PUBLIC_REACTPRESS_API_URL: '/api',
+    }
+
+    console.log('[build:mock] Running production build')
+    await run('pnpm', ['exec', 'next', 'build'], buildEnv)
+  } finally {
+    stopDev()
+  }
+}
+
+main().catch((error) => {
+  console.error('[build:mock]', error.message || error)
+  process.exit(1)
+})