feat: refactor site configuration handling (#430)

* chore: update build and deployment scripts for improved client build handling

* feat: Refactor site configuration handling

- Update site configuration to be fetched dynamically from the server at runtime, removing the need for frontend environment variables during build.
- Introduce new hooks (`useSiteConfig` and `useSiteConfigValue`) to access site configuration values throughout the client.
- Modify various components and pages to utilize the new site configuration methods for displaying site name, description, avatar, and pagination size.
- Update documentation to reflect changes in environment variable usage and site configuration management.
- Remove legacy environment variable handling in the client build process.

Author: OXeu

.env.example

@@ -2,20 +2,25 @@
 # 复制此文件为 .env.local 并填入你的实际配置
 
 # ============================================
-# 前端配置 (client/.env)
+# 站点配置（可选，默认值如下）
+# 注意：这些配置可以在部署后通过设置页面修改
+# 配置优先级：设置页面 > 环境变量 > 默认值
 # ============================================
-FRONTEND_PORT=5173
 
-# 网站基本信息
-NAME=YourName
-DESCRIPTION=Your Description
-AVATAR=https://avatars.githubusercontent.com/u/your-id
+# 网站基本信息（默认：Rin）
+# NAME=Rin
 
-# 分页设置
-PAGE_SIZE=5
+# 网站描述（默认：A lightweight personal blogging system）
+# DESCRIPTION=A lightweight personal blogging system
 
-# RSS 设置
-RSS_ENABLE=false
+# 头像地址（默认：空）
+# AVATAR=
+
+# 分页大小（默认：5）
+# PAGE_SIZE=5
+
+# RSS 设置（默认：false）
+# RSS_ENABLE=false
 
 # ============================================
 # 后端配置 (wrangler.toml 中的 vars)

.github/workflows/build.yml

@@ -48,25 +48,13 @@ jobs:
           echo "${{ github.sha }}" > ./build-meta/sha
           echo "${{ github.event.pull_request.head.sha || github.sha }}" > ./build-meta/head_sha
 
-      # Build client with production environment variables (must be before server build)
-      - name: Build client for production
-        env:
-          NAME: ${{ vars.NAME || 'Rin' }}
-          DESCRIPTION: ${{ vars.DESCRIPTION || 'A lightweight personal blogging system' }}
-          AVATAR: ${{ vars.AVATAR || '' }}
-          PAGE_SIZE: ${{ vars.PAGE_SIZE || '5' }}
-          RSS_ENABLE: ${{ vars.RSS_ENABLE || 'false' }}
+      # Build client (no env vars needed, config is fetched from server at runtime)
+      # Note: vite.config.ts builds directly to ../dist/client
+      - name: Build client
         run: |
-          mkdir -p ./dist/client
           cd client
-          echo "NAME=${NAME}" > .env.production
-          echo "DESCRIPTION=${DESCRIPTION}" >> .env.production
-          echo "AVATAR=${AVATAR}" >> .env.production
-          echo "PAGE_SIZE=${PAGE_SIZE}" >> .env.production
-          echo "RSS_ENABLE=${RSS_ENABLE}" >> .env.production
           bun run build
           cd ..
-          cp -r ./client/dist/* ./dist/client/
 
       # Generate wrangler.toml for build (required by wrangler deploy --dry-run)
       - name: Setup Wrangler

.github/workflows/release.yml

@@ -78,13 +78,12 @@ jobs:
         with:
           mode: 'dry-run'
 
+      # Note: vite.config.ts builds directly to ../dist/client
       - name: Build client
         run: |
-          mkdir -p ./dist/client
           cd client
           bun run build
           cd ..
-          cp -r ./client/dist/* ./dist/client/
 
       - name: Build server
         run: |

.github/workflows/test.yml

@@ -2,9 +2,9 @@ name: CI - Test and Type Check
 
 on:
   push:
-    branches: [main, develop]
+    branches: [main, trunk]
   pull_request:
-    branches: [main, develop]
+    branches: [main, trunk]
 
 jobs:
   test-server:

client/public/locales/en/translation.json

@@ -255,6 +255,29 @@
     "other": {
       "title": "Other Settings"
     },
+    "site": {
+      "title": "Site Information",
+      "name": {
+        "title": "Site Name",
+        "desc": "Set the website name displayed in the site title and navigation bar",
+        "label": "Site Name"
+      },
+      "description": {
+        "title": "Site Description",
+        "desc": "Set the short description displayed in the navigation bar",
+        "label": "Site Description"
+      },
+      "avatar": {
+        "title": "Site Avatar",
+        "desc": "Set the avatar URL displayed in the navigation bar",
+        "label": "Avatar URL"
+      },
+      "page_size": {
+        "title": "Page Size",
+        "desc": "Set the number of articles displayed per page in the list",
+        "label": "Articles per page"
+      }
+    },
     "rss": {
       "desc": "Enable RSS subscription link at the site footer",
       "title": "RSS Subscription Link"

client/public/locales/zh-CN/translation.json

@@ -255,6 +255,29 @@
     "other": {
       "title": "其他设置"
     },
+    "site": {
+      "title": "站点信息",
+      "name": {
+        "title": "站点名称",
+        "desc": "设置显示在站点标题和导航栏的网站名称",
+        "label": "站点名称"
+      },
+      "description": {
+        "title": "站点描述",
+        "desc": "设置显示在导航栏的简短描述",
+        "label": "站点描述"
+      },
+      "avatar": {
+        "title": "站点头像",
+        "desc": "设置显示在导航栏的头像 URL",
+        "label": "头像 URL"
+      },
+      "page_size": {
+        "title": "分页大小",
+        "desc": "设置文章列表每页显示的数量",
+        "label": "每页文章数"
+      }
+    },
     "rss": {
       "desc": "启用站点底部 RSS 订阅链接",
       "title": "RSS 订阅链接"

client/src/App.tsx

@@ -73,7 +73,7 @@ function App() {
     }
     ref.current = true
   }, [])
-  const favicon = `${process.env.API_URL}/favicon`;
+  const favicon = '/favicon';
   return (
     <>
       <ClientConfigContext.Provider value={config}>

client/src/components/error-boundary.tsx

@@ -112,11 +112,10 @@ export class GlobalErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoun
     // Call custom error handler if provided
     this.props.onError?.(error, errorInfo);
 
-    // Send to error tracking service in production
-    if (process.env.NODE_ENV === 'production') {
-      // TODO: Integrate with error tracking service (e.g., Sentry)
-      // reportError(error, errorInfo);
-    }
+    // TODO: Integrate with error tracking service (e.g., Sentry)
+    // if (import.meta.env.PROD) {
+    //   reportError(error, errorInfo);
+    // }
   }
 
   componentDidUpdate(prevProps: ErrorBoundaryProps) {

client/src/components/header.tsx

@@ -11,11 +11,13 @@ import { Padding } from "./padding";
 import { ClientConfigContext } from "../state/config";
 import { client } from "../main";
 import { removeAuthToken } from "../utils/auth";
+import { useSiteConfig } from "../hooks/useSiteConfig";
 
 
 export function Header({ children }: { children?: React.ReactNode }) {
     const profile = useContext(ProfileContext);
     const { t } = useTranslation()
+    const siteConfig = useSiteConfig();
 
     return useMemo(() => (
         <>
@@ -25,13 +27,13 @@ export function Header({ children }: { children?: React.ReactNode }) {
                         <div className="w-full flex justify-between items-center">
                             <Link aria-label={t('home')} href="/"
                                 className="hidden opacity-0 md:opacity-100 duration-300 mr-auto md:flex flex-row items-center">
-                                <img src={process.env.AVATAR} alt="Avatar" className="w-12 h-12 rounded-2xl border-2" />
+                                <img src={siteConfig.avatar} alt="Avatar" className="w-12 h-12 rounded-2xl border-2" />
                                 <div className="flex flex-col justify-center items-start mx-4">
                                     <p className="text-xl font-bold dark:text-white">
-                                        {process.env.NAME}
+                                        {siteConfig.name}
                                     </p>
                                     <p className="text-xs text-neutral-500">
-                                        {process.env.DESCRIPTION}
+                                        {siteConfig.description}
                                     </p>
                                 </div>
                             </Link>
@@ -41,14 +43,14 @@ export function Header({ children }: { children?: React.ReactNode }) {
                                     className="flex flex-row items-center bg-w t-primary rounded-full px-2 shadow-xl shadow-light">
                                     <Link aria-label={t('home')} href="/"
                                         className="visible opacity-100 md:hidden md:opacity-0 duration-300 mr-auto flex flex-row items-center py-2">
-                                        <img src={process.env.AVATAR} alt="Avatar"
+                                        <img src={siteConfig.avatar} alt="Avatar"
                                             className="w-10 h-10 rounded-full border-2" />
                                         <div className="flex flex-col justify-center items-start mx-2">
                                             <p className="text-sm font-bold">
-                                                {process.env.NAME}
+                                                {siteConfig.name}
                                             </p>
                                             <p className="text-xs text-neutral-500">
-                                                {process.env.DESCRIPTION}
+                                                {siteConfig.description}
                                             </p>
                                         </div>
                                     </Link>
@@ -68,7 +70,7 @@ export function Header({ children }: { children?: React.ReactNode }) {
             </div>
             <div className="h-20"></div>
         </>
-    ), [profile, children])
+    ), [profile, children, siteConfig])
 }
 
 function NavItem({ menu, title, selected, href, when = true, onClick }: {

client/src/components/site-meta.tsx

@@ -0,0 +1,33 @@
+import { Helmet } from "react-helmet";
+import { useSiteConfig } from "../hooks/useSiteConfig";
+
+interface SiteMetaProps {
+    title?: string;
+    description?: string;
+    image?: string;
+    children: React.ReactNode;
+}
+
+// Component to provide site metadata for pages
+export function SiteMeta({ title, description, image, children }: SiteMetaProps) {
+    const siteConfig = useSiteConfig();
+
+    const pageTitle = title 
+        ? `${title} - ${siteConfig.name}` 
+        : siteConfig.name;
+
+    const pageDescription = description || siteConfig.description;
+    const pageImage = image || siteConfig.avatar;
+
+    return (
+        <>
+            <Helmet>
+                <title>{pageTitle}</title>
+                <meta property="og:title" content={pageTitle} />
+                <meta property="og:description" content={pageDescription} />
+                {pageImage && <meta property="og:image" content={pageImage} />}
+            </Helmet>
+            {children}
+        </>
+    );
+}