@x-withu/page-withu 1.1.2 → 1.1.3

package/docs/setup.md

@@ -10,6 +10,8 @@
 export default {
     // 站点标题，会显示在页面顶部
     title: "PageWithU",
+    // 浏览器标签页图标，本地路径相对项目根目录，例如 "./content/logo.svg"
+    favicon: "/src/assets/bulb.svg",
     // 作者名，会显示在页脚版权信息中
     author: "Your Name",
     // 版权年份，默认使用当前年份

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-withu/page-withu",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A lightweight personal homepage generator.",
   "repository": {
     "type": "git",

package/src/app/src/app.vue

@@ -82,6 +82,13 @@ const domainsTitle = domainsFrontmatter.title || 'Domains'
 const sites = domainsFrontmatter.sites || []
 const tabTitle = userConfig.tabTitle || userConfig.title || 'PageWithU'
 const favicon = userConfig.favicon === '/src/assets/bulb.svg' ? defaultFavicon : userConfig.favicon || defaultFavicon
+const externalUrlPattern = /^[a-z][a-z\d+.-]*:/i
+
+function resolveFaviconHref(value) {
+    if (value === defaultFavicon || externalUrlPattern.test(value) || value.startsWith('//')) return value
+    const localPath = value.replace(/^\.\//, '')
+    return withBasePath(localPath.startsWith('/') ? localPath : `/${localPath}`)
+}
 
 function applyDocumentMeta() {
     document.title = tabTitle
@@ -91,7 +98,7 @@ function applyDocumentMeta() {
         icon.rel = 'icon'
         document.head.appendChild(icon)
     }
-    icon.href = favicon === defaultFavicon || !favicon.startsWith('/') ? favicon : withBasePath(favicon)
+    icon.href = resolveFaviconHref(favicon)
 }
 
 applyDocumentMeta()

package/src/app/src/styles/main.css

@@ -77,6 +77,49 @@
         --color-tag-bg: rgba(110, 168, 254, 0.15);
         --color-tag-text: #6ea8fe;
     }
+
+    :root:not([data-theme="light"]) main > header {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(18, 18, 18, 0.78);
+        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    }
+
+    :root:not([data-theme="light"]) .site-title,
+    :root:not([data-theme="light"]) .site-title:hover {
+        color: #fff;
+    }
+
+    :root:not([data-theme="light"]) .nav-item {
+        color: rgba(255, 255, 255, 0.68);
+    }
+
+    :root:not([data-theme="light"]) .nav-item:hover,
+    :root:not([data-theme="light"]) .nav-item.active {
+        color: #fff;
+        text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
+    }
+
+    :root:not([data-theme="light"]) .theme-toggle {
+        color: rgba(255, 255, 255, 0.68);
+    }
+
+    :root:not([data-theme="light"]) .theme-toggle:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+        text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
+    }
+
+    :root:not([data-theme="light"]) .theme-toggle .icon-sun {
+        display: none;
+    }
+
+    :root:not([data-theme="light"]) .theme-toggle .icon-moon {
+        display: none;
+    }
+
+    :root:not([data-theme="light"]) .theme-toggle .icon-system {
+        display: block;
+    }
 }
 
 /* Explicit dark mode override */
@@ -184,8 +227,7 @@ main > header {
     -webkit-backdrop-filter: blur(18px) saturate(1.35);
 }
 
-[data-theme="dark"] main > header,
-:root:not([data-theme="light"]) main > header {
+[data-theme="dark"] main > header {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(18, 18, 18, 0.78);
     box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
@@ -210,8 +252,7 @@ main > header::before {
     background: none;
 }
 
-[data-theme="dark"] .site-title,
-:root:not([data-theme="light"]) .site-title {
+[data-theme="dark"] .site-title {
     color: #fff;
 }
 
@@ -220,8 +261,7 @@ main > header::before {
     background: none;
 }
 
-[data-theme="dark"] .site-title:hover,
-:root:not([data-theme="light"]) .site-title:hover {
+[data-theme="dark"] .site-title:hover {
     color: #fff;
 }
 
@@ -248,7 +288,7 @@ main > header::before {
     padding: 6px 0;
     font-size: 0.9rem;
     font-weight: 650;
-    color: var(--color-subtext);
+    color: var(--color-subtext-light, #8a9ba8);
     text-decoration: none;
     border-radius: 0;
     transition: color 0.2s ease, text-shadow 0.2s ease;
@@ -256,8 +296,7 @@ main > header::before {
     white-space: nowrap;
 }
 
-[data-theme="dark"] .nav-item,
-:root:not([data-theme="light"]) .nav-item {
+[data-theme="dark"] .nav-item {
     color: rgba(255, 255, 255, 0.68);
 }
 
@@ -269,9 +308,7 @@ main > header::before {
 }
 
 [data-theme="dark"] .nav-item:hover,
-[data-theme="dark"] .nav-item.active,
-:root:not([data-theme="light"]) .nav-item:hover,
-:root:not([data-theme="light"]) .nav-item.active {
+[data-theme="dark"] .nav-item.active {
     color: #fff;
     text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
 }
@@ -516,8 +553,7 @@ footer p {
     color: var(--color-subtext);
 }
 
-[data-theme="dark"] .theme-toggle,
-:root:not([data-theme="light"]) .theme-toggle {
+[data-theme="dark"] .theme-toggle {
     color: rgba(255, 255, 255, 0.68);
 }
 
@@ -527,8 +563,7 @@ footer p {
     text-shadow: none;
 }
 
-[data-theme="dark"] .theme-toggle:hover,
-:root:not([data-theme="light"]) .theme-toggle:hover {
+[data-theme="dark"] .theme-toggle:hover {
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
     text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);

package/src/vite.config.js

@@ -1,7 +1,7 @@
 import { createHash } from 'node:crypto'
 import { createRequire } from 'node:module'
 import { tmpdir } from 'node:os'
-import { mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
+import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
 import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
@@ -23,6 +23,18 @@ const userContentDir = resolve(projectRoot, 'content')
 const cacheKey = createHash('sha256').update(projectRoot).digest('hex').slice(0, 12)
 const cacheDir = resolve(tmpdir(), `page-withu-${cacheKey}`)
 const basePath = process.env.BASE_PATH || '/'
+const externalUrlPattern = /^[a-z][a-z\d+.-]*:/i
+
+function resolveProjectAssetPath(path) {
+    if (!path || path === '/src/assets/bulb.svg' || externalUrlPattern.test(path) || path.startsWith('//') || path.startsWith('/')) return null
+    const relativePath = path.replace(/^\.\//, '')
+    return {
+        relativePath,
+        sourcePath: join(projectRoot, relativePath),
+        outputPath: join(resolve(projectRoot, 'dist'), relativePath),
+        href: withBasePath(`/${relativePath}`),
+    }
+}
 
 function slugify(text) {
     return text
@@ -160,6 +172,27 @@ function markdown(deps) {
     }
 }
 
+function projectAssets(userConfig) {
+    return {
+        name: 'project-assets',
+        configureServer(server) {
+            const favicon = resolveProjectAssetPath(userConfig.favicon)
+            if (!favicon) return
+
+            server.middlewares.use((req, res, next) => {
+                const pathname = decodeURI((req.url || '').split('?')[0])
+                if (pathname !== `/${favicon.relativePath}` || !existsSync(favicon.sourcePath)) {
+                    next()
+                    return
+                }
+
+                if (favicon.sourcePath.endsWith('.svg')) res.setHeader('Content-Type', 'image/svg+xml')
+                res.end(readFileSync(favicon.sourcePath))
+            })
+        },
+    }
+}
+
 function staticHtmlRoutes(userConfig) {
     return {
         name: 'static-html-routes',
@@ -179,7 +212,7 @@ function staticHtmlRoutes(userConfig) {
 
             const pageSize = userConfig.pagination?.pageSize || 5
             const totalPages = Math.max(1, Math.ceil(blogPosts.length / pageSize))
-            const routes = ['domains.html', 'blog.html']
+            const routes = ['index.html', 'domains.html', 'blog.html']
             for (let page = 2; page <= totalPages; page += 1) routes.push(`blog/page/${page}.html`)
             for (const slug of blogPosts) routes.push(`blog/${slug}.html`)
 
@@ -188,6 +221,19 @@ function staticHtmlRoutes(userConfig) {
                 mkdirSync(dirname(file), { recursive: true })
                 writeFileSync(file, index)
             }
+
+            const favicon = resolveProjectAssetPath(userConfig.favicon)
+            if (favicon && existsSync(favicon.sourcePath)) {
+                mkdirSync(dirname(favicon.outputPath), { recursive: true })
+                copyFileSync(favicon.sourcePath, favicon.outputPath)
+
+                for (const route of routes) {
+                    const file = join(dist, route)
+                    if (!existsSync(file)) continue
+                    const html = readFileSync(file, 'utf8').replace(/<link rel="icon"[^>]*href="[^"]*"[^>]*>/, `<link rel="icon" href="${favicon.href}">`)
+                    writeFileSync(file, html)
+                }
+            }
         },
     }
 }
@@ -225,7 +271,7 @@ export default defineConfig(async () => {
                 '@page-withu/user-content': userContentDir,
             },
         },
-        plugins: [vueModule.default(), markdown(deps), staticHtmlRoutes(userConfig)],
+        plugins: [vueModule.default(), markdown(deps), projectAssets(userConfig), staticHtmlRoutes(userConfig)],
         server: {
             port: 5500,
             fs: {