@x-withu/page-withu 1.0.0 → 1.1.1

package/README.md

@@ -44,9 +44,7 @@ npm install -g @x-withu/page-withu
 # 创建项目，默认配置会写入 config.js，后续可自行编辑
 page-withu new my-homepage
 
-# 安装依赖
 cd my-homepage
-npm install
 
 # 本地预览
 page-withu serve

package/bin/page-withu.js

@@ -1,115 +1,252 @@
 #!/usr/bin/env node
 import { spawn } from 'node:child_process';
-import { Command } from 'commander';
-import fs from 'fs-extra';
+import { createHash } from 'node:crypto';
+import fs from 'node:fs/promises';
+import { constants as fsConstants } from 'node:fs';
+import { createRequire } from 'node:module';
+import { homedir } from 'node:os';
 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 templateDir = path.resolve(__dirname, '../template');
-const program = new Command();
+const packageRoot = path.resolve(__dirname, '..');
+const templateDir = path.join(packageRoot, 'template');
+const viteConfigPath = path.join(templateDir, 'vite.config.js');
+const runtimeDependencies = {
+    '@traptitech/markdown-it-katex': '^3.6.0',
+    '@vitejs/plugin-vue': '^5.2.3',
+    'gray-matter': '^4.0.3',
+    'highlight.js': '^11.11.1',
+    'katex': '^0.16.45',
+    'markdown-it': '^14.1.0',
+    'markdown-it-emoji': '^3.0.0',
+    'markdown-it-footnote': '^4.0.0',
+    'mermaid': '^11.15.0',
+    'vite': '^6.3.1',
+    'vue': '^3.5.13',
+};
+const runtimeKey = createHash('sha256').update(JSON.stringify(runtimeDependencies)).digest('hex').slice(0, 12);
+const runtimeDir = path.join(homedir(), '.page-withu', 'runtime', `${pkg.version}-${runtimeKey}`);
+
+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`;
+
+function npmCommand() {
+    return process.platform === 'win32' ? 'npm.cmd' : 'npm';
+}
+
+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 ensureRuntime() {
+    const marker = path.join(runtimeDir, '.ready');
+    if (await exists(marker)) return runtimeDir;
+
+    process.stdout.write('Preparing Page With U runtime...\n');
+    try {
+        await fs.mkdir(runtimeDir, { recursive: true });
+        await fs.writeFile(path.join(runtimeDir, 'package.json'), `${JSON.stringify({
+            private: true,
+            type: 'module',
+            dependencies: runtimeDependencies,
+            allowScripts: {
+                esbuild: true,
+            },
+        }, null, 2)}\n`);
+        await run(npmCommand(), ['install', '--fund=false', '--audit=false'], {
+            cwd: runtimeDir,
+            stdio: 'ignore',
+        });
+        await fs.writeFile(marker, new Date().toISOString());
+        process.stdout.write(`${green('Page With U runtime is ready.')}\n`);
+        return runtimeDir;
+    } catch (err) {
+        process.stderr.write(`${red('Failed to prepare Page With U runtime.')}\n`);
+        throw err;
+    }
+}
+
+function resolveRuntimeFile(runtimeRoot, specifier) {
+    const runtimeRequire = createRequire(path.join(runtimeRoot, 'package.json'));
+    return runtimeRequire.resolve(specifier);
+}
 
 async function detectProject(projectDir) {
-    const required = ['package.json', 'config.js', 'content', 'src', 'vite.config.js'];
+    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;
 }
 
-function shouldCopyTemplateItem(source) {
-    return path.relative(templateDir, source) !== '.gitignore';
-}
-
-function normalizePackageName(name) {
-    return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/^-+|-+$/g, '') || 'page-withu-site';
-}
-
 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.copy(templateDir, fullPath, { filter: shouldCopyTemplateItem });
-
-        const pkgPath = path.join(fullPath, 'package.json');
-        const projectPkg = await fs.readJson(pkgPath);
-        projectPkg.name = normalizePackageName(path.basename(targetDir));
-        await fs.writeJson(pkgPath, projectPkg, { spaces: 2 });
-
-        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('  npm install'));
-        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(templateDir, 'config.js'), path.join(fullPath, 'config.js'));
+        await fs.cp(path.join(templateDir, '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);
     }
 }
 
-async function runProjectScript(script, args) {
-    const missing = await detectProject(process.cwd());
+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 npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
-    const child = spawn(npmCommand, ['run', script, '--', ...args], {
-        cwd: process.cwd(),
-        stdio: 'inherit',
-    });
+    const runtimeRoot = await ensureRuntime();
+    const vitePackageDir = path.dirname(resolveRuntimeFile(runtimeRoot, 'vite/package.json'));
+    const viteBin = path.join(vitePackageDir, 'bin/vite.js');
+    const viteArgs = command === 'serve'
+        ? ['--config', viteConfigPath, ...args]
+        : ['build', '--config', viteConfigPath, ...args];
 
-    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,
+                NODE_PATH: path.join(runtimeRoot, 'node_modules'),
+                PAGE_WITHU_PROJECT_ROOT: projectRoot,
+                PAGE_WITHU_RUNTIME_ROOT: runtimeRoot,
+            },
+        });
+    } 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 template config')
-    .action(createProject);
-
-program
-    .command('serve [args...]')
-    .description('start local preview for the current PageWithU project')
-    .allowUnknownOption(true)
-    .action((args = []) => runProjectScript('dev', args));
-
-program
-    .command('build [args...]')
-    .description('build dist assets for the current PageWithU project')
-    .allowUnknownOption(true)
-    .action((args = []) => runProjectScript('build', args));
-
-program.parse();
+await main(process.argv.slice(2));

package/docs/deploy.md

@@ -7,7 +7,7 @@
 构建生产版本：
 
 ```bash
-npm run build
+page-withu build
 ```
 
 构建产物会输出到：
@@ -28,10 +28,10 @@ blog/<slug>.html
 
 这样可以直接部署到 GitHub Pages、Cloudflare Pages、OSS 等对象存储上。
 
-预览生产版本：
+预览生产版本可以在构建后用任意静态服务器打开 `dist/`，例如：
 
 ```bash
-npm run preview
+npx serve dist
 ```
 
 如果觉得没什么问题，就可以把这些文件上传到服务器进行部署了。
@@ -75,9 +75,8 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: npm
-      - run: npm ci
-      - run: npm run build
+      - run: npm install -g @x-withu/page-withu
+      - run: page-withu build
       - uses: actions/upload-pages-artifact@v3
         with:
           path: dist
@@ -104,7 +103,7 @@ Settings → Pages → Build and deployment → Source → GitHub Actions
 如果仓库名不是用于根域名的 `用户名.github.io`，通常需要给构建命令设置子路径。例如仓库名是 `my-homepage`：
 
 ```yaml
-- run: BASE_PATH=/my-homepage/ npm run build
+- run: BASE_PATH=/my-homepage/ page-withu build
 ```
 
 ### 方式二：手动上传 dist
@@ -112,7 +111,7 @@ Settings → Pages → Build and deployment → Source → GitHub Actions
 如果不想使用 GitHub Actions，也可以本地构建后手动上传 `dist/`。
 
 ```bash
-npm run build
+page-withu build
 ```
 
 然后把 `dist/` 内容上传到用于 GitHub Pages 的发布分支或目录。
@@ -132,7 +131,7 @@ Cloudflare Pages 适合托管静态站点，并且可以自动连接 GitHub 仓
 
 ```text
 Framework preset: None 或 Vue
-Build command: npm run build
+Build command: npm install -g @x-withu/page-withu && page-withu build
 Build output directory: dist
 Root directory: /
 ```
@@ -177,7 +176,7 @@ Root directory: /
 本地构建：
 
 ```bash
-npm run build
+page-withu build
 ```
 
 然后把 `dist/` 中的所有文件上传到 Bucket 根目录。
@@ -201,7 +200,7 @@ ossutil cp -r dist/ oss://your-bucket-name/ --update
 每次更新内容后重新执行：
 
 ```bash
-npm run build
+page-withu build
 ossutil cp -r dist/ oss://your-bucket-name/ --update
 ```
 

package/docs/develop.md

@@ -9,7 +9,7 @@ Page With U 的目标是保持轻量、清晰、容易定制。开发时建议
 - 优先修改已有文件，不要为了小功能引入复杂架构。
 - 模板默认配置要适合大多数用户开箱即用。
 - 文档中的用户流程要始终和 CLI 行为保持一致。
-- 修改 `template/` 后，需要用模板本身或新生成项目执行一次 `npm run build`。
+- 修改 `template/` 后，需要用模板本身或新生成项目执行一次 `page-withu build`。
 - 不要引入大型 UI 框架，样式优先维护在 `template/src/styles/main.css`。
 - Markdown 能力优先在 `template/vite.config.js` 中集中处理，避免分散到多个组件。
 
@@ -21,12 +21,11 @@ page-withu/
 │   └── page-withu.js     # CLI 入口
 ├── docs/                 # 使用、部署、开发文档
 ├── template/
-│   ├── config.js         # 模板默认配置
-│   ├── content/          # 模板默认内容
-│   ├── src/              # Vue 应用源码
-│   ├── vite.config.js    # Markdown 渲染与静态路由生成
-│   └── package.json      # 生成项目后的应用依赖
-├── package.json          # page-withu CLI 自身配置
+│   ├── config.js         # 新项目默认配置
+│   ├── content/          # 新项目默认内容
+│   ├── src/              # 包内 Vue 运行时源码
+│   └── vite.config.js    # 包内 Markdown 渲染与静态路由生成
+├── package.json          # page-withu CLI 与运行时依赖配置
 └── README.md
 ```
 
@@ -46,9 +45,9 @@ bin/page-withu.js
 
 当前 CLI 主要负责：
 
-1. `new`：复制 `template/` 到目标目录，保留默认配置。
-2. `serve`：在当前主页项目中启动本地预览。
-3. `build`：在当前主页项目中构建 `dist` 产物。
+1. `new`：复制默认 `config.js` 和 `content/` 到目标目录。
+2. `serve`：用当前安装的包内运行时，在当前主页项目中启动本地预览。
+3. `build`：用当前安装的包内运行时，在当前主页项目中构建 `dist` 产物。
 
 本地调试 CLI：
 
@@ -82,11 +81,10 @@ mkdir -p /tmp/page-withu-test
 cd /tmp/page-withu-test
 node /path/to/page-withu/bin/page-withu.js new demo-site
 cd demo-site
-npm install
 node /path/to/page-withu/bin/page-withu.js build
 ```
 
-如果构建成功，说明模板可以被正常生成和构建。
+如果构建成功，说明内容型项目可以通过包内运行时正常生成。
 
 ## 开发 Template
 
@@ -100,8 +98,7 @@ template/
 
 ```bash
 cd template
-npm install
-npm run dev
+node ../bin/page-withu.js serve
 ```
 
 常见开发位置：
@@ -125,7 +122,7 @@ npm run dev
 
 ```bash
 cd template
-npm run build
+node ../bin/page-withu.js build
 ```
 
 如果改动影响脚手架生成后的项目，还需要用 CLI 重新生成一个临时项目并构建。

package/docs/setup.md

@@ -94,8 +94,8 @@ page-withu build
 ```
 
 - `page-withu new my-homepage`：新建主页项目，所有站点配置都保持模板默认值。
-- `page-withu serve`：在当前项目目录启动本地预览，对应模板项目的 `npm run dev`。
-- `page-withu build`：在当前项目目录构建 `dist` 产物，对应模板项目的 `npm run build`。
+- `page-withu serve`：使用当前安装的 Page With U 运行时启动本地预览。
+- `page-withu build`：使用当前安装的 Page With U 运行时构建 `dist` 产物。
 
 创建完成后，直接编辑 `config.js`、`content/index.md`、`content/domains.md` 和 `content/blog/` 即可定制网站。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-withu/page-withu",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A lightweight, elegant personal homepage generator.",
   "repository": {
     "type": "git",
@@ -16,7 +16,6 @@
     "template/content/",
     "template/src/",
     "template/index.html",
-    "template/package.json",
     "template/vite.config.js",
     "docs/",
     "README.md"
@@ -32,11 +31,5 @@
     "vite"
   ],
   "author": "Explorer-Dong",
-  "license": "MIT",
-  "dependencies": {
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "fs-extra": "^11.2.0",
-    "ora": "^8.0.1"
-  }
+  "license": "MIT"
 }

package/template/config.js

@@ -5,7 +5,7 @@ export default {
     author: "Your Name",
     year: new Date().getFullYear(),
     footerLinks: [
-        { label: 'GitHub', url: 'https://github.com' },
+        { label: 'GitHub', url: 'https://github.com/Explorer-Dong/page-withu' },
         { label: 'Email', url: 'mailto:youremail@example.com' }
     ],
     pagination: {

package/template/src/app.vue

@@ -54,16 +54,16 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import userConfig from '../config.js'
+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 { frontmatter as domainsFrontmatter } from '../content/domains.md'
-import { sections as aboutSections } from '../content/index.md'
+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'
 
-const blogModules = import.meta.glob('../content/blog/*.md', { eager: true })
+const blogModules = import.meta.glob('@page-withu/user-content/blog/*.md', { eager: true })
 const validPages = ['about', 'domains', 'blog']
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, '')
 const navItems = [

package/template/vite.config.js

@@ -1,15 +1,26 @@
-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 { createHash } from 'node:crypto'
+import { createRequire } from 'node:module'
+import { tmpdir } from 'node:os'
 import { mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import userConfig from './config.js'
-
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+const runtimeRoot = dirname(fileURLToPath(import.meta.url))
+const projectRoot = resolve(process.env.PAGE_WITHU_PROJECT_ROOT || process.cwd())
+const packageRuntimeRoot = process.env.PAGE_WITHU_RUNTIME_ROOT
+const dependencyRoot = packageRuntimeRoot ? resolve(packageRuntimeRoot, 'node_modules') : resolve(runtimeRoot, 'node_modules')
+const runtimeRequire = packageRuntimeRoot ? createRequire(resolve(packageRuntimeRoot, 'package.json')) : 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)
+const cacheDir = resolve(tmpdir(), `page-withu-${cacheKey}`)
 const basePath = process.env.BASE_PATH || '/'
 
 function slugify(text) {
@@ -65,7 +76,7 @@ function callouts(md) {
     })
 }
 
-function createMarkdownRenderer() {
+function createMarkdownRenderer({ MarkdownIt, mk, footnote, emoji, hljs }) {
     const toc = []
     let md
     md = new MarkdownIt({
@@ -119,8 +130,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) {
@@ -147,14 +159,14 @@ function markdown() {
     }
 }
 
-function staticHtmlRoutes() {
+function staticHtmlRoutes(userConfig) {
     return {
         name: 'static-html-routes',
         apply: 'build',
         closeBundle() {
-            const dist = join(process.cwd(), 'dist')
+            const dist = join(projectRoot, 'dist')
             const index = readFileSync(join(dist, 'index.html'), 'utf8')
-            const blogDir = join(process.cwd(), 'content', 'blog')
+            const blogDir = join(userContentDir, 'blog')
             let blogPosts = []
             try {
                 blogPosts = readdirSync(blogDir)
@@ -164,7 +176,8 @@ function staticHtmlRoutes() {
                 if (e.code !== 'ENOENT') throw e
             }
 
-            const totalPages = Math.max(1, Math.ceil(blogPosts.length / userConfig.pagination.pageSize))
+            const pageSize = userConfig.pagination?.pageSize || 5
+            const totalPages = Math.max(1, Math.ceil(blogPosts.length / pageSize))
             const routes = ['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`)
@@ -178,14 +191,49 @@ function staticHtmlRoutes() {
     }
 }
 
-export default defineConfig({
-    base: basePath,
-    plugins: [vue(), markdown(), staticHtmlRoutes()],
-    server: {
-        port: 5500,
-    },
-    build: {
-        outDir: 'dist',
-        emptyOutDir: true,
-    },
-})
+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,
+        base: basePath,
+        cacheDir,
+        resolve: {
+            alias: {
+                ...runtimeModuleAlias,
+                '@page-withu/user-config': userConfigFile,
+                '@page-withu/user-content': userContentDir,
+            },
+        },
+        plugins: [vueModule.default(), markdown(deps), staticHtmlRoutes(userConfig)],
+        server: {
+            port: 5500,
+            fs: {
+                allow: [runtimeRoot, projectRoot, dependencyRoot],
+            },
+        },
+        build: {
+            outDir: resolve(projectRoot, 'dist'),
+            emptyOutDir: true,
+        },
+    }
+})

package/template/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "your-homepage-name",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@traptitech/markdown-it-katex": "^3.6.0",
-    "highlight.js": "^11.11.1",
-    "katex": "^0.16.45",
-    "markdown-it-emoji": "^3.0.0",
-    "markdown-it-footnote": "^4.0.0",
-    "mermaid": "^11.15.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.3",
-    "gray-matter": "^4.0.3",
-    "markdown-it": "^14.1.0",
-    "vite": "^6.3.1"
-  }
-}