feat(demo): build a static editor preview for GitHub Pages

.dockerignore

@@ -1,6 +1,7 @@
 .git
 web/node_modules
 web/dist
+web/dist-demo
 CONTEXT.md
 docs
 .dev-data

.gitignore

@@ -14,6 +14,7 @@ docs/*
 # Frontend
 node_modules/
 web/dist/
+web/dist-demo/
 
 # Local development data
 .dev-data/

web/demo.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>RawMark Editor Demo</title>
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
   </head>
   <body>
     <div id="app"></div>

web/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
+    "build:demo": "vue-tsc --noEmit && vite build --mode demo --base /RawMark/ --outDir dist-demo",
     "preview": "vite preview",
     "lint": "eslint --fix",
     "test": "vitest run",

web/src/common/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "demo_notice": "Editor preview only. Changes are not saved; refreshing restores the sample.",
   "retry_b8784c": "Retry",
   "fonts_could_not_be_loaded_42a574": "Fonts could not be loaded. Check your connection and refresh the page.",
   "refresh_page_9366e1": "Refresh page",

web/src/common/i18n/zh-CN.json

@@ -1,4 +1,5 @@
 {
+  "demo_notice": "仅供编辑器预览。修改不会保存，刷新后恢复示例。",
   "retry_b8784c": "重试",
   "fonts_could_not_be_loaded_42a574": "字体加载失败，请检查网络后刷新页面。",
   "refresh_page_9366e1": "刷新页面",

web/src/pages/workspace/demo/demo.css

@@ -0,0 +1,27 @@
+body {
+  margin: 0;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--rm-divider);
+  font-size: var(--rm-ui-font-size);
+}
+
+header span {
+  flex: 1;
+  color: var(--rm-text-muted);
+}
+
+header a {
+  color: var(--rm-accent);
+}
+
+#app {
+  max-width: 960px;
+  margin-inline: auto;
+}

web/src/pages/workspace/demo/main.ts

@@ -1,14 +1,26 @@
 import { watchFontLoading } from '@@/appearance/font-loading'
+import { t } from '@@/i18n/runtime'
 // Unauthenticated editor demo for automated performance and interaction tests.
 import { createEditorState, createEditorView } from '../editor'
 import sample from './sample.md?raw'
 import '@/i18n'
 import '@@/appearance/base.css'
+import './demo.css'
 
 // ?repeat=N repeats the sample N times for large-document performance testing.
 const repeat = Number(new URLSearchParams(location.search).get('repeat') ?? 1)
 const doc = Array.from({ length: Math.max(1, repeat) }).fill(sample).join('\n')
 
 watchFontLoading()
+const header = document.createElement('header')
+const title = document.createElement('strong')
+title.textContent = `RawMark ${__RAWMARK_RELEASE__}`
+const notice = document.createElement('span')
+notice.textContent = t('common.demo_notice')
+const github = document.createElement('a')
+github.href = 'https://github.com/eezd/RawMark'
+github.textContent = 'GitHub'
+header.append(title, notice, github)
+document.body.prepend(header)
 const view = createEditorView(document.getElementById('app')!, createEditorState({ doc }))
 ;(window as unknown as { rawmarkView: typeof view }).rawmarkView = view

web/src/pages/workspace/demo/sample.md

@@ -52,7 +52,7 @@ func main() {
 
 ## Images
 
-![Sample image](https://vuejs.org/images/logo.png)
+![RawMark icon](./icon.svg)
 
 ## Tables
 

web/vite.config.ts

@@ -10,7 +10,7 @@ import { defineConfig } from 'vitest/config'
 
 const releaseVersion = readFileSync(new URL('../VERSION', import.meta.url), 'utf8').trim()
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   define: { __RAWMARK_RELEASE__: JSON.stringify(releaseVersion) },
   resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@@': fileURLToPath(new URL('./src/common', import.meta.url)) } },
   plugins: [
@@ -18,9 +18,16 @@ export default defineConfig({
     UnoCSS(),
     AutoImport({ imports: ['vue', 'vue-router', 'pinia'], dts: 'types/auto/auto-imports.d.ts' }),
     Components({ dts: 'types/auto/components.d.ts', resolvers: [ElementPlusResolver({ importStyle: false })] }),
+    {
+      name: 'rawmark-demo-entry',
+      apply: (_config, env) => env.command === 'build' && env.mode === 'demo',
+      generateBundle() {
+        this.emitFile({ type: 'asset', fileName: 'index.html', source: '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="refresh" content="0;url=./demo.html"><title>RawMark Demo</title></head><body><a href="./demo.html">Open RawMark Demo</a></body></html>' })
+      },
+    },
     {
       name: 'rawmark-pwa',
-      apply: 'build',
+      apply: (_config, env) => env.command === 'build' && env.mode !== 'demo',
       enforce: 'post',
       generateBundle(_options, bundle) {
         // Count only optional application fonts; fonts.css excludes Maple and KaTeX.
@@ -58,7 +65,7 @@ export default defineConfig({
   build: {
     rolldownOptions: {
       // demo.html is an unauthenticated editor demo for automated performance/interaction tests.
-      input: { index: 'index.html', demo: 'demo.html' },
+      input: mode === 'demo' ? 'demo.html' : { index: 'index.html', demo: 'demo.html' },
     },
   },
   worker: { format: 'es' },
@@ -67,4 +74,4 @@ export default defineConfig({
     proxy: { '/api': { target: `http://127.0.0.1:${process.env.API_PORT ?? 8080}`, ws: true } },
   },
   test: { environment: 'node', setupFiles: ['./src/i18n.ts'] },
-})
+}))