@x-withu/page-withu 1.1.0 → 1.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 <p align="center">
   <strong>
-    一款轻量、优雅的个人主页生成器
+    一款轻量的个人主页生成器
   </strong>
 </p>
 
@@ -41,15 +41,14 @@
 # 安装 page-withu
 npm install -g @x-withu/page-withu
 
-# 创建项目，默认配置会写入 config.js，后续可自行编辑
+# 创建项目
 page-withu new my-homepage
-
 cd my-homepage
 
 # 本地预览
 page-withu serve
 
-# 构建分发产物
+# 生成静态网站
 page-withu build
 ```
 

package/bin/page-withu.js

@@ -1,31 +1,58 @@
 #!/usr/bin/env node
 import { spawn } from 'node:child_process';
+import fs from 'node:fs/promises';
+import { constants as fsConstants } from 'node:fs';
 import { createRequire } from 'node:module';
-import { Command } from 'commander';
-import fs from 'fs-extra';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import chalk from 'chalk';
-import ora from 'ora';
 
-const pkg = await fs.readJson(new URL('../package.json', import.meta.url));
+const pkg = JSON.parse(await fs.readFile(new URL('../package.json', import.meta.url), 'utf8'));
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const packageRoot = path.resolve(__dirname, '..');
-const templateDir = path.join(packageRoot, 'template');
-const viteConfigPath = path.join(templateDir, 'vite.config.js');
-const require = createRequire(import.meta.url);
-const vitePackageDir = path.dirname(require.resolve('vite/package.json'));
+const sourceDir = path.join(packageRoot, 'src');
+const defaultsDir = path.join(sourceDir, 'defaults');
+const viteConfigPath = path.join(sourceDir, 'vite.config.js');
+const packageRequire = createRequire(import.meta.url);
+const vitePackageDir = path.dirname(packageRequire.resolve('vite/package.json'));
 const viteBin = path.join(vitePackageDir, 'bin/vite.js');
-const program = new Command();
+
+const cyan = (text) => `\x1b[36m${text}\x1b[0m`;
+const green = (text) => `\x1b[32m${text}\x1b[0m`;
+const red = (text) => `\x1b[31m${text}\x1b[0m`;
+const yellow = (text) => `\x1b[33m${text}\x1b[0m`;
+
+async function exists(filePath) {
+    try {
+        await fs.access(filePath, fsConstants.F_OK);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+function run(command, args, options = {}) {
+    return new Promise((resolve, reject) => {
+        const child = spawn(command, args, { stdio: 'inherit', ...options });
+        child.on('error', reject);
+        child.on('exit', (code, signal) => {
+            if (signal) {
+                process.kill(process.pid, signal);
+                return;
+            }
+            if (code === 0) resolve();
+            else reject(new Error(`${command} ${args.join(' ')} exited with code ${code}`));
+        });
+    });
+}
 
 async function detectProject(projectDir) {
     const required = ['config.js', 'content/index.md', 'content/domains.md'];
     const missing = [];
 
     for (const item of required) {
-        if (!await fs.pathExists(path.join(projectDir, item))) missing.push(item);
+        if (!await exists(path.join(projectDir, item))) missing.push(item);
     }
 
     return missing;
@@ -35,26 +62,26 @@ async function createProject(projectName = 'my-homepage') {
     const targetDir = projectName.trim() || 'my-homepage';
     const fullPath = path.resolve(process.cwd(), targetDir);
 
-    if (await fs.pathExists(fullPath)) {
-        console.error(chalk.red(`\nError: Directory ${targetDir} already exists.`));
+    if (await exists(fullPath)) {
+        process.stderr.write(red(`\nError: Directory ${targetDir} already exists.\n`));
         process.exit(1);
     }
 
-    const spinner = ora('Creating project...').start();
+    process.stdout.write('Creating project...\n');
 
     try {
-        await fs.ensureDir(fullPath);
-        await fs.copy(path.join(templateDir, 'config.js'), path.join(fullPath, 'config.js'));
-        await fs.copy(path.join(templateDir, 'content'), path.join(fullPath, 'content'));
-        await fs.ensureDir(path.join(fullPath, 'content/blog'));
-
-        spinner.succeed(chalk.green(`Successfully created PageWithU project in ${targetDir}!`));
-        console.log('\nNext steps:');
-        console.log(chalk.cyan(`  cd ${targetDir}`));
-        console.log(chalk.cyan('  page-withu serve'));
-        console.log(chalk.cyan('  page-withu build\n'));
+        await fs.mkdir(fullPath, { recursive: true });
+        await fs.copyFile(path.join(defaultsDir, 'config.js'), path.join(fullPath, 'config.js'));
+        await fs.cp(path.join(defaultsDir, 'content'), path.join(fullPath, 'content'), { recursive: true });
+        await fs.mkdir(path.join(fullPath, 'content/blog'), { recursive: true });
+
+        process.stdout.write(`${green(`Successfully created PageWithU project in ${targetDir}!`)}\n`);
+        process.stdout.write('\nNext steps:\n');
+        process.stdout.write(cyan(`  cd ${targetDir}\n`));
+        process.stdout.write(cyan('  page-withu serve\n'));
+        process.stdout.write(cyan('  page-withu build\n\n'));
     } catch (err) {
-        spinner.fail(chalk.red('Failed to create project.'));
+        process.stderr.write(`${red('Failed to create project.')}\n`);
         console.error(err);
         process.exit(1);
     }
@@ -64,52 +91,107 @@ async function runVite(command, args) {
     const projectRoot = process.cwd();
     const missing = await detectProject(projectRoot);
     if (missing.length) {
-        console.error(chalk.red('Current directory does not look like a PageWithU project.'));
-        console.error(chalk.yellow(`Missing: ${missing.join(', ')}`));
+        process.stderr.write(`${red('Current directory does not look like a PageWithU project.')}\n`);
+        process.stderr.write(`${yellow(`Missing: ${missing.join(', ')}`)}\n`);
         process.exit(1);
     }
 
     const viteArgs = command === 'serve'
         ? ['--config', viteConfigPath, ...args]
         : ['build', '--config', viteConfigPath, ...args];
-    const child = spawn(process.execPath, [viteBin, ...viteArgs], {
-        cwd: projectRoot,
-        stdio: 'inherit',
-        env: {
-            ...process.env,
-            PAGE_WITHU_PROJECT_ROOT: projectRoot,
-        },
-    });
 
-    child.on('exit', (code, signal) => {
-        if (signal) {
-            process.kill(process.pid, signal);
-            return;
-        }
-        process.exit(code ?? 1);
-    });
+    try {
+        await run(process.execPath, [viteBin, ...viteArgs], {
+            cwd: projectRoot,
+            env: {
+                ...process.env,
+                PAGE_WITHU_PROJECT_ROOT: projectRoot,
+            },
+        });
+    } catch (err) {
+        console.error(err.message);
+        process.exit(1);
+    }
+}
+
+function printMainHelp() {
+    console.log(`Usage: page-withu [options] [command]
+
+CLI to scaffold, preview, and build a lightweight personal homepage
+
+Options:
+  -V, --version       output the version number
+  -h, --help          display help for command
+
+Commands:
+  new [project-name]  create a new PageWithU project with the default content and config
+  serve [args...]     start local preview for the current PageWithU project
+  build [args...]     build dist assets for the current PageWithU project
+  help [command]      display help for command`);
+}
+
+function printCommandHelp(command) {
+    if (command === 'new') {
+        console.log(`Usage: page-withu new [options] [project-name]
+
+create a new PageWithU project with the default content and config
+
+Options:
+  -h, --help  display help for command`);
+        return;
+    }
+    if (command === 'serve') {
+        console.log(`Usage: page-withu serve [options] [args...]
+
+start local preview for the current PageWithU project
+
+Options:
+  -h, --help  display help for command`);
+        return;
+    }
+    if (command === 'build') {
+        console.log(`Usage: page-withu build [options] [args...]
+
+build dist assets for the current PageWithU project
+
+Options:
+  -h, --help  display help for command`);
+        return;
+    }
+    printMainHelp();
+}
+
+async function main(argv) {
+    const [command, ...args] = argv;
+
+    if (!command || command === '--help' || command === '-h') {
+        printMainHelp();
+        return;
+    }
+    if (command === '--version' || command === '-V') {
+        console.log(pkg.version);
+        return;
+    }
+    if (command === 'help') {
+        printCommandHelp(args[0]);
+        return;
+    }
+    if (args.includes('--help') || args.includes('-h')) {
+        printCommandHelp(command);
+        return;
+    }
+    if (command === 'new') {
+        await createProject(args[0]);
+        return;
+    }
+    if (command === 'serve' || command === 'build') {
+        await runVite(command, args);
+        return;
+    }
+
+    process.stderr.write(`Unknown command: ${command}\n\n`);
+    printMainHelp();
+    process.exit(1);
 }
 
-program
-    .name('page-withu')
-    .description('CLI to scaffold, preview, and build a lightweight personal homepage')
-    .version(pkg.version);
-
-program
-    .command('new [project-name]')
-    .description('create a new PageWithU project with the default content and config')
-    .action(createProject);
-
-program
-    .command('serve [args...]')
-    .description('start local preview for the current PageWithU project')
-    .allowUnknownOption(true)
-    .action((args = []) => runVite('serve', args));
-
-program
-    .command('build [args...]')
-    .description('build dist assets for the current PageWithU project')
-    .allowUnknownOption(true)
-    .action((args = []) => runVite('build', args));
-
-program.parse();
+await main(process.argv.slice(2));

package/docs/develop.md

@@ -9,23 +9,26 @@ Page With U 的目标是保持轻量、清晰、容易定制。开发时建议
 - 优先修改已有文件，不要为了小功能引入复杂架构。
 - 模板默认配置要适合大多数用户开箱即用。
 - 文档中的用户流程要始终和 CLI 行为保持一致。
-- 修改 `template/` 后，需要用模板本身或新生成项目执行一次 `page-withu build`。
-- 不要引入大型 UI 框架，样式优先维护在 `template/src/styles/main.css`。
-- Markdown 能力优先在 `template/vite.config.js` 中集中处理，避免分散到多个组件。
+- 修改包内运行时或默认内容后，需要用源码目录或新生成项目执行一次 `page-withu build`。
+- 不要引入大型 UI 框架，样式优先维护在 `src/app/src/styles/main.css`。
+- Markdown 能力优先在 `src/vite.config.js` 中集中处理，避免分散到多个组件。
 
 项目结构：
 
 ```text
 page-withu/
 ├── bin/
-│   └── page-withu.js     # CLI 入口
-├── docs/                 # 使用、部署、开发文档
-├── template/
-│   ├── config.js         # 新项目默认配置
-│   ├── content/          # 新项目默认内容
-│   ├── src/              # 包内 Vue 运行时源码
-│   └── vite.config.js    # 包内 Markdown 渲染与静态路由生成
-├── package.json          # page-withu CLI 与运行时依赖配置
+│   └── page-withu.js       # CLI 入口
+├── docs/                   # 使用、部署、开发文档
+├── src/
+│   ├── app/                # 包内 Vue 运行时应用
+│   │   ├── index.html
+│   │   └── src/
+│   ├── defaults/           # 新项目默认配置和内容
+│   │   ├── config.js
+│   │   └── content/
+│   └── vite.config.js      # 包内 Markdown 渲染与静态路由生成
+├── package.json            # page-withu CLI 与运行时依赖配置
 └── README.md
 ```
 
@@ -70,8 +73,8 @@ page-withu new my-homepage
 调整 CLI 行为时，通常需要同步修改：
 
 - `bin/page-withu.js` 中的 commander command。
-- 必要时修改 `template/config.js` 的默认字段。
-- 必要时修改模板中读取配置的 Vue 组件。
+- 必要时修改 `src/defaults/config.js` 的默认字段。
+- 必要时修改包内运行时中读取配置的 Vue 组件。
 - 必要时更新 `README.md` 和 `docs/setup.md`。
 
 测试脚手架生成流程：
@@ -86,30 +89,36 @@ node /path/to/page-withu/bin/page-withu.js build
 
 如果构建成功，说明内容型项目可以通过包内运行时正常生成。
 
-## 开发 Template
+## 开发包内运行时与默认内容
 
-模板应用位于：
+包内 Vue 运行时应用位于：
 
 ```text
-template/
+src/app/
 ```
 
-启动模板开发服务：
+新项目默认配置和内容位于：
+
+```text
+src/defaults/
+```
+
+启动运行时开发服务：
 
 ```bash
-cd template
-node ../bin/page-withu.js serve
+cd src/defaults
+node ../../bin/page-withu.js serve
 ```
 
 常见开发位置：
 
-- `template/src/app.vue`：主页面路由、布局、浏览器标签页标题和 favicon。
-- `template/src/components/blog-list.vue`：博客列表、分页、搜索、标签和时间线。
-- `template/src/components/blog-detail.vue`：文章详情、ToC、图片放大、Mermaid 渲染。
-- `template/src/styles/main.css`：全局样式、亮暗模式、响应式布局、Markdown 样式。
-- `template/vite.config.js`：Markdown 插件、callout、代码高亮、静态 `.html` 路由生成。
-- `template/config.js`：站点默认配置。
-- `template/content/`：默认内容样例。
+- `src/app/src/app.vue`：主页面路由、布局、浏览器标签页标题和 favicon。
+- `src/app/src/components/blog_list.vue`：博客列表、分页、搜索、标签和时间线。
+- `src/app/src/components/blog_detail.vue`：文章详情、ToC、图片放大、Mermaid 渲染。
+- `src/app/src/styles/main.css`：全局样式、亮暗模式、响应式布局、Markdown 样式。
+- `src/vite.config.js`：Markdown 插件、callout、代码高亮、静态 `.html` 路由生成。
+- `src/defaults/config.js`：站点默认配置。
+- `src/defaults/content/`：默认内容样例。
 
 修改 Markdown 渲染逻辑后，建议检查这些能力：
 
@@ -118,11 +127,11 @@ node ../bin/page-withu.js serve
 - Mermaid、LaTeX、脚注、Emoji 是否能正常渲染。
 - callout 是否在亮色和暗色模式下都可读。
 
-构建模板：
+构建默认内容项目：
 
 ```bash
-cd template
-node ../bin/page-withu.js build
+cd src/defaults
+node ../../bin/page-withu.js build
 ```
 
 如果改动影响脚手架生成后的项目，还需要用 CLI 重新生成一个临时项目并构建。
@@ -150,7 +159,10 @@ npm run pack:check
 确认包中至少包含：
 
 - `bin/page-withu.js`
-- `template/`
+- `src/app/`
+- `src/defaults/config.js`
+- `src/defaults/content/`
+- `src/vite.config.js`
 - `docs/`
 - `package.json`
 - `README.md`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@x-withu/page-withu",
-  "version": "1.1.0",
-  "description": "A lightweight, elegant personal homepage generator.",
+  "version": "1.1.2",
+  "description": "A lightweight personal homepage generator.",
   "repository": {
     "type": "git",
     "url": "https://github.com/Explorer-Dong/page-withu"
@@ -12,32 +12,19 @@
   },
   "files": [
     "bin/",
-    "template/config.js",
-    "template/content/",
-    "template/src/",
-    "template/index.html",
-    "template/vite.config.js",
     "docs/",
+    "src/app/",
+    "src/defaults/config.js",
+    "src/defaults/content/",
+    "src/vite.config.js",
     "README.md"
   ],
   "scripts": {
     "pack:check": "npm pack --dry-run"
   },
-  "keywords": [
-    "homepage",
-    "blog",
-    "generator",
-    "vue",
-    "vite"
-  ],
-  "author": "Explorer-Dong",
-  "license": "MIT",
   "dependencies": {
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@vitejs/plugin-vue": "^5.2.3",
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "fs-extra": "^11.2.0",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
     "katex": "^0.16.45",
@@ -45,8 +32,15 @@
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "mermaid": "^11.15.0",
-    "ora": "^8.0.1",
     "vite": "^6.3.1",
     "vue": "^3.5.13"
-  }
+  },
+  "keywords": [
+    "static site generator",
+    "lightweight",
+    "vue",
+    "vite"
+  ],
+  "author": "Explorer-Dong",
+  "license": "MIT"
 }

package/{template → src/app}/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WithU</title>
+    <title>PageWithU</title>
     <link rel="icon" type="image/svg" href="/src/assets/bulb.svg">
     <script>
         (function () {

package/{template → src/app}/src/app.vue

@@ -41,12 +41,18 @@
 
 
         <footer>
-            <p>&copy; {{ userConfig.year }} {{ userConfig.author }}</p>
-            <div class="footer-links">
-                <template v-for="(link, index) in userConfig.footerLinks" :key="link.label">
-                    <a :href="link.url">{{ link.label }}</a>
-                    <span v-if="index < userConfig.footerLinks.length - 1" class="separator">&middot;</span>
-                </template>
+            <div class="footer-content">
+                <div class="footer-meta">
+                    <p>&copy; {{ userConfig.year }} {{ userConfig.author }}</p>
+                    <div class="footer-links">
+                        <template v-for="(link, index) in userConfig.footerLinks" :key="link.label">
+                            <a :href="link.url">{{ link.label }}</a>
+                            <span v-if="index < userConfig.footerLinks.length - 1" class="separator">&middot;</span>
+                        </template>
+                    </div>
+                </div>
+                <p class="made-with-page-withu">Made with <a href="https://github.com/Explorer-Dong/page-withu" target="_blank"
+                        rel="noreferrer">PageWithU</a></p>
             </div>
         </footer>
     </main>
@@ -57,8 +63,8 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import userConfig from '@page-withu/user-config'
 import ThemeToggle from './components/theme_toggle.vue'
 import SiteCard from './components/site_card.vue'
-import BlogList from './components/blog-list.vue'
-import BlogDetail from './components/blog-detail.vue'
+import BlogList from './components/blog_list.vue'
+import BlogDetail from './components/blog_detail.vue'
 import { frontmatter as domainsFrontmatter } from '@page-withu/user-content/domains.md'
 import { sections as aboutSections } from '@page-withu/user-content/index.md'
 import defaultFavicon from './assets/bulb.svg'
@@ -67,13 +73,14 @@ const blogModules = import.meta.glob('@page-withu/user-content/blog/*.md', { eag
 const validPages = ['about', 'domains', 'blog']
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, '')
 const navItems = [
-    { page: 'domains', label: 'Domains' },
-    { page: 'blog', label: 'Blog' },
+    { page: 'about', label: '主页' },
+    { page: 'domains', label: '项目' },
+    { page: 'blog', label: '博客' },
 ]
 
 const domainsTitle = domainsFrontmatter.title || 'Domains'
 const sites = domainsFrontmatter.sites || []
-const tabTitle = userConfig.tabTitle || userConfig.title || 'WithU'
+const tabTitle = userConfig.tabTitle || userConfig.title || 'PageWithU'
 const favicon = userConfig.favicon === '/src/assets/bulb.svg' ? defaultFavicon : userConfig.favicon || defaultFavicon
 
 function applyDocumentMeta() {

package/{template/src/components/blog-detail.vue → src/app/src/components/blog_detail.vue}

@@ -3,13 +3,13 @@
         <a class="blog-back" :href="blogHref" @click.prevent="$emit('back')">← Back to all posts</a>
         <div :class="['blog-article-layout', { 'without-toc': !toc.length }]">
             <div class="blog-article-main">
-                <header class="blog-article-header">
+                <div class="blog-article-header">
                     <h1 class="markdown-body">{{ post.title }}</h1>
                     <div class="blog-meta">
                         <time :datetime="post.date">{{ formatDate(post.date) }}</time>
                         <span v-for="tag in post.tags" :key="tag" class="tag">{{ tag }}</span>
                     </div>
-                </header>
+                </div>
 
                 <div ref="contentRef" class="markdown-body" @click="openImage" v-html="post.html"></div>
 
@@ -35,10 +35,12 @@
                     <button class="blog-toc-close" type="button" aria-label="Close table of contents"
                         @click="tocOpen = false">×</button>
                 </div>
-                <a v-for="item in toc" :key="item.id" :href="`#${item.id}`"
-                    :class="[`toc-level-${item.level}`, { active: activeHeading === item.id }]" @click="tocOpen = false">
-                    {{ item.title }}
-                </a>
+                <div class="blog-toc-links">
+                    <a v-for="item in toc" :key="item.id" :href="`#${item.id}`"
+                        :class="[`toc-level-${item.level}`, { active: activeHeading === item.id }]" @click="tocOpen = false">
+                        {{ item.title }}
+                    </a>
+                </div>
             </aside>
         </div>
 

package/{template → src/app}/src/styles/main.css

@@ -165,63 +165,115 @@ main {
 }
 
 /* ===== Header ===== */
-header {
+main > header {
+    position: sticky;
+    top: 16px;
+    z-index: 80;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 24px;
+    width: min(100%, 720px);
+    margin: 0 auto;
+    padding: 6px 8px 6px 20px;
+    border: 1px solid var(--color-card-border);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.85);
+    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(18px) saturate(1.35);
+    -webkit-backdrop-filter: blur(18px) saturate(1.35);
+}
+
+[data-theme="dark"] main > header,
+: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);
+}
+
+main > header::before {
+    content: none;
 }
 
 .site-title {
-    font-size: 1.45rem;
-    font-weight: 750;
-    color: var(--color-heading);
+    flex: 0 0 auto;
+    max-width: 180px;
+    overflow: hidden;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.95rem;
+    font-weight: 800;
     text-decoration: none;
     margin: 0;
     padding: 0;
     background: none;
 }
 
+[data-theme="dark"] .site-title,
+:root:not([data-theme="light"]) .site-title {
+    color: #fff;
+}
+
 .site-title:hover {
-    color: var(--color-heading);
+    color: var(--color-link);
     background: none;
 }
 
+[data-theme="dark"] .site-title:hover,
+:root:not([data-theme="light"]) .site-title:hover {
+    color: #fff;
+}
+
 .header-actions {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 24px;
+    min-width: 0;
 }
 
 /* ===== Navigation Bar ===== */
 .nav-bar {
     display: flex;
-    gap: 4px;
-    padding: 4px;
-    border: 1px solid var(--color-card-border);
-    border-radius: 999px;
-    background: var(--color-card-bg);
+    align-items: center;
+    gap: 24px;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
 }
 
 .nav-item {
-    padding: 5px 12px;
+    padding: 6px 0;
     font-size: 0.9rem;
-    font-weight: 500;
+    font-weight: 650;
     color: var(--color-subtext);
     text-decoration: none;
-    border-radius: 999px;
-    transition: color 0.2s ease, background-color 0.2s ease;
+    border-radius: 0;
+    transition: color 0.2s ease, text-shadow 0.2s ease;
     background: none;
+    white-space: nowrap;
 }
 
-.nav-item:hover {
-    color: var(--color-text);
-    background: var(--color-link-hover-bg);
+[data-theme="dark"] .nav-item,
+:root:not([data-theme="light"]) .nav-item {
+    color: rgba(255, 255, 255, 0.68);
 }
 
+.nav-item:hover,
 .nav-item.active {
-    color: var(--color-link);
-    background: var(--color-link-active-bg);
+    color: var(--color-text);
+    background: none;
+    text-shadow: none;
+}
+
+[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 {
+    color: #fff;
+    text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
 }
 
 /* ===== Section Titles ===== */
@@ -398,6 +450,17 @@ footer p {
     margin-bottom: 6px;
 }
 
+.footer-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.footer-meta {
+    min-width: 0;
+}
+
 .footer-links {
     display: flex;
     align-items: center;
@@ -419,40 +482,75 @@ footer p {
     color: var(--color-separator);
 }
 
+.made-with-page-withu {
+    flex-shrink: 0;
+    margin: 0;
+    color: var(--color-footer-text);
+    font-size: 0.85rem;
+    text-align: right;
+    white-space: nowrap;
+}
+
+.made-with-page-withu a {
+    color: var(--color-footer-link);
+    font-weight: 600;
+}
+
+.made-with-page-withu a:hover {
+    color: var(--color-footer-link-hover);
+    background: var(--color-footer-link-hover-bg);
+}
+
 /* ===== Theme Toggle ===== */
 .theme-toggle {
-    width: 38px;
-    height: 38px;
-    border: 1px solid var(--color-card-border);
+    width: 34px;
+    height: 34px;
+    border: none;
     border-radius: 50%;
-    background: var(--color-card-bg);
+    background: transparent;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
-    box-shadow: 0 1px 4px var(--color-card-active-shadow);
+    transition: background-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
+    color: var(--color-subtext);
+}
+
+[data-theme="dark"] .theme-toggle,
+:root:not([data-theme="light"]) .theme-toggle {
+    color: rgba(255, 255, 255, 0.68);
 }
 
 .theme-toggle:hover {
-    border-color: var(--color-card-hover-border);
-    box-shadow: 0 2px 8px var(--color-card-hover-shadow);
-    transform: scale(1.05);
+    background: var(--color-link-hover-bg);
+    color: var(--color-text);
+    text-shadow: none;
+}
+
+[data-theme="dark"] .theme-toggle:hover,
+: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);
 }
 
 .theme-toggle:active {
-    transform: scale(0.95);
+    transform: scale(0.92);
 }
 
 .theme-toggle svg {
-    width: 19px;
-    height: 19px;
+    width: 18px;
+    height: 18px;
     fill: none;
-    stroke: var(--color-subtext);
+    stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
-    transition: stroke 0.3s ease;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle:hover svg {
+    transform: rotate(15deg);
 }
 
 .theme-toggle .icon-sun {
@@ -553,6 +651,39 @@ footer p {
     padding: 16px;
     overflow-x: auto;
     margin-bottom: 1em;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.markdown-body pre:hover {
+    scrollbar-color: color-mix(in srgb, var(--color-subtext) 45%, transparent) transparent;
+}
+
+.markdown-body pre::-webkit-scrollbar {
+    height: 4px;
+}
+
+.markdown-body pre::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
+.markdown-body pre::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.markdown-body pre::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 999px;
+}
+
+.markdown-body pre:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-subtext) 42%, transparent);
+}
+
+.markdown-body pre::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-subtext) 62%, transparent);
 }
 
 .markdown-body pre code {
@@ -1007,12 +1138,53 @@ footer p {
     flex-direction: column;
     gap: 8px;
     max-height: calc(100vh - 48px);
-    padding: 0 0 16px 16px;
+    padding: 0 4px 16px 16px;
     border-left: 1px solid var(--color-footer-border);
-    overflow-y: auto;
+    overflow: hidden;
     font-size: 0.84rem;
 }
 
+.blog-toc-links {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.blog-toc-links:hover {
+    scrollbar-color: color-mix(in srgb, var(--color-subtext) 45%, transparent) transparent;
+}
+
+.blog-toc-links::-webkit-scrollbar {
+    width: 4px;
+}
+
+.blog-toc-links::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
+.blog-toc-links::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.blog-toc-links::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 999px;
+}
+
+.blog-toc-links:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-subtext) 42%, transparent);
+}
+
+.blog-toc-links::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-subtext) 62%, transparent);
+}
+
 .blog-toc-header {
     display: flex;
     align-items: center;
@@ -1204,14 +1376,34 @@ footer p {
         gap: 28px;
     }
 
-    header {
-        align-items: flex-start;
-        flex-direction: column;
+    main > header {
+        top: 12px;
+        gap: 18px;
+        width: 100%;
+        padding: 8px 10px 8px 18px;
     }
 
     .header-actions {
-        width: 100%;
-        justify-content: space-between;
+        flex: 1;
+        width: auto;
+        justify-content: flex-end;
+        gap: 18px;
+        min-width: 0;
+    }
+
+    .nav-bar {
+        gap: 18px;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .nav-bar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .theme-toggle {
+        width: 38px;
+        height: 38px;
     }
 }
 
@@ -1227,12 +1419,13 @@ footer p {
     }
 
     .site-title {
-        font-size: 1.3rem;
+        max-width: 120px;
+        font-size: 0.9rem;
     }
 
     .nav-item {
-        padding: 5px 10px;
-        font-size: 0.84rem;
+        padding: 7px 0;
+        font-size: 0.86rem;
     }
 
     .about-section {
@@ -1322,6 +1515,7 @@ footer p {
         box-shadow: var(--shadow-card);
         transform: translate(-50%, -50%);
         display: none;
+        overflow: hidden;
     }
 
     .blog-toc.open {
@@ -1329,12 +1523,11 @@ footer p {
     }
 
     .blog-toc-header {
-        position: sticky;
-        top: -16px;
         margin: -16px -16px 4px;
         padding: 16px;
         background: var(--color-card-bg);
         border-bottom: 1px solid var(--color-footer-border);
+        flex-shrink: 0;
     }
 
     .blog-toc-close {
@@ -1377,3 +1570,27 @@ footer p {
         height: 36px;
     }
 }
+
+@media (max-width: 520px) {
+    main > header {
+        padding-left: 14px;
+        gap: 14px;
+    }
+
+    .site-title {
+        max-width: 80px;
+    }
+
+    .header-actions {
+        gap: 14px;
+    }
+
+    .nav-bar {
+        gap: 14px;
+    }
+
+    .theme-toggle {
+        width: 32px;
+        height: 32px;
+    }
+}

package/{template → src}/vite.config.js

@@ -1,19 +1,23 @@
 import { createHash } from 'node:crypto'
+import { createRequire } from 'node:module'
 import { tmpdir } from 'node:os'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import MarkdownIt from 'markdown-it'
-import mk from '@traptitech/markdown-it-katex'
-import footnote from 'markdown-it-footnote'
-import { full as emoji } from 'markdown-it-emoji'
-import matter from 'gray-matter'
-import hljs from 'highlight.js'
 import { mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
 import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
-const runtimeRoot = dirname(fileURLToPath(import.meta.url))
+const sourceRoot = dirname(fileURLToPath(import.meta.url))
+const appRoot = resolve(sourceRoot, 'app')
 const projectRoot = resolve(process.env.PAGE_WITHU_PROJECT_ROOT || process.cwd())
+const packageRoot = resolve(sourceRoot, '..')
+const dependencyRoot = resolve(packageRoot, 'node_modules')
+const runtimeRequire = createRequire(import.meta.url)
+const loadRuntimeModule = async (specifier) => import(pathToFileURL(runtimeRequire.resolve(specifier)).href)
+const runtimeModuleAlias = Object.fromEntries([
+    'vue',
+    'katex/dist/katex.min.css',
+    'highlight.js/styles/github.css',
+    'mermaid',
+].map((specifier) => [specifier, runtimeRequire.resolve(specifier)]))
 const userConfigFile = resolve(projectRoot, 'config.js')
 const userContentDir = resolve(projectRoot, 'content')
 const cacheKey = createHash('sha256').update(projectRoot).digest('hex').slice(0, 12)
@@ -73,7 +77,7 @@ function callouts(md) {
     })
 }
 
-function createMarkdownRenderer() {
+function createMarkdownRenderer({ MarkdownIt, mk, footnote, emoji, hljs }) {
     const toc = []
     let md
     md = new MarkdownIt({
@@ -127,8 +131,9 @@ function renderMarkdown(md, content) {
     return { html, toc: env.toc }
 }
 
-function markdown() {
-    const { md } = createMarkdownRenderer()
+function markdown(deps) {
+    const { md } = createMarkdownRenderer(deps)
+    const { matter } = deps
     return {
         name: 'vite-plugin-markdown',
         transform(code, id) {
@@ -187,24 +192,44 @@ function staticHtmlRoutes(userConfig) {
     }
 }
 
+const { defineConfig } = await loadRuntimeModule('vite')
+
 export default defineConfig(async () => {
+    const [vueModule, MarkdownItModule, mkModule, footnoteModule, emojiModule, matterModule, hljsModule] = await Promise.all([
+        loadRuntimeModule('@vitejs/plugin-vue'),
+        loadRuntimeModule('markdown-it'),
+        loadRuntimeModule('@traptitech/markdown-it-katex'),
+        loadRuntimeModule('markdown-it-footnote'),
+        loadRuntimeModule('markdown-it-emoji'),
+        loadRuntimeModule('gray-matter'),
+        loadRuntimeModule('highlight.js'),
+    ])
+    const deps = {
+        MarkdownIt: MarkdownItModule.default,
+        mk: mkModule.default,
+        footnote: footnoteModule.default,
+        emoji: emojiModule.full,
+        matter: matterModule.default,
+        hljs: hljsModule.default,
+    }
     const userConfig = (await import(`${pathToFileURL(userConfigFile).href}?t=${Date.now()}`)).default
 
     return {
-        root: runtimeRoot,
+        root: appRoot,
         base: basePath,
         cacheDir,
         resolve: {
             alias: {
+                ...runtimeModuleAlias,
                 '@page-withu/user-config': userConfigFile,
                 '@page-withu/user-content': userContentDir,
             },
         },
-        plugins: [vue(), markdown(), staticHtmlRoutes(userConfig)],
+        plugins: [vueModule.default(), markdown(deps), staticHtmlRoutes(userConfig)],
         server: {
             port: 5500,
             fs: {
-                allow: [runtimeRoot, projectRoot],
+                allow: [appRoot, projectRoot, dependencyRoot],
             },
         },
         build: {