From 4645d3d11cc0dfe1fbc23aa7a25b30d1a719b3fe Mon Sep 17 00:00:00 2001 From: eezd Date: Tue, 27 Oct 2026 14:15:57 +0800 Subject: [PATCH] feat(demo): build a static editor preview for GitHub Pages --- .dockerignore | 1 + .gitignore | 1 + web/demo.html | 1 + web/package.json | 1 + web/src/common/i18n/en.json | 1 + web/src/common/i18n/zh-CN.json | 1 + web/src/pages/workspace/demo/demo.css | 27 ++++++++++++++++++++++++++ web/src/pages/workspace/demo/main.ts | 12 ++++++++++++ web/src/pages/workspace/demo/sample.md | 2 +- web/vite.config.ts | 15 ++++++++++---- 10 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 web/src/pages/workspace/demo/demo.css diff --git a/.dockerignore b/.dockerignore index 00ee9d5..cc82e5f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,6 +1,7 @@ .git web/node_modules web/dist +web/dist-demo CONTEXT.md docs .dev-data diff --git a/.gitignore b/.gitignore index c771088..b565df5 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ docs/* # Frontend node_modules/ web/dist/ +web/dist-demo/ # Local development data .dev-data/ diff --git a/web/demo.html b/web/demo.html index 4fea565..6d91a8d 100644 --- a/web/demo.html +++ b/web/demo.html @@ -4,6 +4,7 @@ RawMark Editor Demo +
diff --git a/web/package.json b/web/package.json index 62e2ce7..334e337 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/common/i18n/en.json b/web/src/common/i18n/en.json index 61bb478..d18db92 100644 --- a/web/src/common/i18n/en.json +++ b/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", diff --git a/web/src/common/i18n/zh-CN.json b/web/src/common/i18n/zh-CN.json index 9c678ff..6f324cc 100644 --- a/web/src/common/i18n/zh-CN.json +++ b/web/src/common/i18n/zh-CN.json @@ -1,4 +1,5 @@ { + "demo_notice": "仅供编辑器预览。修改不会保存，刷新后恢复示例。", "retry_b8784c": "重试", "fonts_could_not_be_loaded_42a574": "字体加载失败，请检查网络后刷新页面。", "refresh_page_9366e1": "刷新页面", diff --git a/web/src/pages/workspace/demo/demo.css b/web/src/pages/workspace/demo/demo.css new file mode 100644 index 0000000..0d0261a --- /dev/null +++ b/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; +} diff --git a/web/src/pages/workspace/demo/main.ts b/web/src/pages/workspace/demo/main.ts index ecbf079..cff8c76 100644 --- a/web/src/pages/workspace/demo/main.ts +++ b/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 diff --git a/web/src/pages/workspace/demo/sample.md b/web/src/pages/workspace/demo/sample.md index edf28aa..f5eed78 100644 --- a/web/src/pages/workspace/demo/sample.md +++ b/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 diff --git a/web/vite.config.ts b/web/vite.config.ts index eab6ae7..3134207 100644 --- a/web/vite.config.ts +++ b/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: 'RawMark DemoOpen RawMark Demo' }) + }, + }, { 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'] }, -}) +}))