Skip to content

Commit 052d857

Browse files
reycnreycn
committed
feat: build Vue Pages showcase with cached reader translations
1 parent 1eca5d2 commit 052d857

15 files changed

Lines changed: 1070 additions & 202 deletions

‎.github/workflows/pages.yml‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ name: Deploy GitHub Pages
22
on:
33
push:
44
branches: [main]
5-
paths: ['pages/**', '.github/workflows/pages.yml']
5+
paths:
6+
['pages/**', 'src/**', 'public/**', 'package.json', 'bun.lock', '.github/workflows/pages.yml']
67
workflow_dispatch:
78
permissions:
89
contents: read
@@ -14,14 +15,24 @@ concurrency:
1415
jobs:
1516
deploy:
1617
runs-on: ubuntu-latest
18+
env:
19+
ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
1720
environment:
1821
name: github-pages
1922
url: ${{ steps.deployment.outputs.page_url }}
2023
steps:
2124
- uses: actions/checkout@v4
25+
- uses: actions/setup-node@v4
26+
with:
27+
node-version: 22
28+
- uses: oven-sh/setup-bun@v2
29+
with:
30+
bun-version: 1.3.14
31+
- run: bun install --frozen-lockfile
2232
- uses: actions/configure-pages@v5
33+
- run: bun run vite build --config pages/vite.config.mjs
2334
- uses: actions/upload-pages-artifact@v3
2435
with:
25-
path: pages
36+
path: dist-pages
2637
- id: deployment
2738
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,3 +247,4 @@ __marimo__/
247247
# Local editor rules and code index
248248
.cursor/
249249
.codegraph/
250+
dist-pages/

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ doc/**/*-optimized.json
1212
doc/**/*-result.json
1313
doc/**/*-results.json
1414
pages/
15+
dist-pages/

‎pages/OfficialWebsite.vue‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script setup>
2+
import { ref } from 'vue';
3+
import icon from './assets/icon-512.png';
4+
const reader = ref(null);
5+
const readerUrl = new URL('./reader.html', location.href).href;
6+
const settingsUrl = new URL('./reader.html?settingsWindow=1&section=general', location.href).href;
7+
const releaseUrl = 'https://github.com/PDFMathTranslate/PDFMathReader/releases/latest';
8+
function replay() {
9+
if (reader.value) reader.value.src = readerUrl + '?replay=' + Date.now();
10+
}
11+
</script>
12+
<template>
13+
<header class="site-header">
14+
<a class="brand" href="#"><img :src="icon" alt="" />PDFMathReader</a>
15+
<nav aria-label="官网导航">
16+
<a href="#reader">阅读体验</a><a href="#how">运行原理</a><a href="#settings">设置</a>
17+
</nav>
18+
<a class="download-link" :href="releaseUrl">下载</a>
19+
</header>
20+
<main>
21+
<section class="hero">
22+
<h1>跨越语言。<br /><span>专注阅读。</span></h1>
23+
<p class="intro">译文逐段呈现，公式与图表保持原样。</p>
24+
<div class="actions">
25+
<a class="primary" href="#reader">体验阅读器 ↓</a
26+
><a class="secondary" :href="releaseUrl">下载应用</a>
27+
</div>
28+
<p class="platforms">macOS · Windows · Linux</p>
29+
</section>
30+
<section id="reader" class="demo-section">
31+
<div class="reader-frame">
32+
<div class="window-traffic-lights" aria-hidden="true"><i></i><i></i><i></i></div>
33+
<iframe
34+
ref="reader"
35+
:src="readerUrl"
36+
title="PDFMathReader 实际 Vue 阅读器演示"
37+
allow="clipboard-write"
38+
></iframe>
39+
</div>
40+
<div class="demo-footer">
41+
<p>默认阅读模式，可在设置中切换为对照模式。</p>
42+
<button @click="replay">重播翻译 ↻</button>
43+
</div>
44+
<p class="demo-note">示例使用预置译文；个人文档与完整翻译服务请使用桌面应用。</p>
45+
</section>
46+
<section id="how" class="how-section">
47+
<div class="section-intro">
48+
<h2>翻译在进行。<br /><span>阅读不等待。</span></h2>
49+
<p>渲染、分析与翻译独立推进，当前页面优先呈现。</p>
50+
</div>
51+
<div class="pipeline">
52+
<article>
53+
<span>01</span>
54+
<h3>页面渲染</h3>
55+
<p>按需加载视野附近的页面。</p>
56+
</article>
57+
<article>
58+
<span>02</span>
59+
<h3>版面分析</h3>
60+
<p>识别段落，保留公式与图表。</p>
61+
</article>
62+
<article>
63+
<span>03</span>
64+
<h3>翻译调度</h3>
65+
<p>优先翻译正在阅读的内容。</p>
66+
</article>
67+
<article>
68+
<span>04</span>
69+
<h3>原位呈现</h3>
70+
<p>译文回到原位，保持阅读连贯。</p>
71+
</article>
72+
</div>
73+
</section>
74+
<section id="settings" class="settings-section">
75+
<div class="section-intro">
76+
<h2>你的阅读。<br /><span>你的偏好。</span></h2>
77+
<p>调整外观、翻译与阅读方式，变化即刻同步到上方阅读器。</p>
78+
</div>
79+
<div class="settings-frame">
80+
<div class="window-traffic-lights" aria-hidden="true"><i></i><i></i><i></i></div>
81+
<iframe :src="settingsUrl" title="PDFMathReader 实际设置工作区" loading="lazy"></iframe>
82+
</div>
83+
</section>
84+
</main>
85+
<footer>
86+
<p>PDFMathReader <span>macOS · Windows · Linux</span></p>
87+
<div>
88+
<a href="https://github.com/PDFMathTranslate/PDFMathReader">GitHub ↗</a
89+
><a href="https://github.com/PDFMathTranslate/PDFMathReader/blob/main/LICENSE">License</a>
90+
</div>
91+
</footer>
92+
</template>

‎pages/README.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# PDFMathReader website
2+
3+
The website is a Vite multi-page build. `pages/index.html` is the website entry
4+
and `pages/reader.html` mounts the real Vue reader application from `src/`.
5+
The reader uses prepared local demonstration data, so the Pages site does not
6+
require an API key or a running backend.
7+
8+
## Local preview
9+
10+
Install the repository dependencies once, then start the Pages development
11+
server from the repository root:
12+
13+
```sh
14+
bun install --frozen-lockfile
15+
node node_modules/vite/bin/vite.js --config pages/vite.config.mjs --host 127.0.0.1 --port 4173
16+
```
17+
18+
Open <http://127.0.0.1:4173/> for the website or
19+
<http://127.0.0.1:4173/reader.html> for the reader. The settings-window view
20+
uses the same reader entry with `?settingsWindow=1`.
21+
22+
## Production build
23+
24+
From the repository root:
25+
26+
```sh
27+
bun run vite build --config pages/vite.config.mjs
28+
```
29+
30+
The build writes `dist-pages/`. The Vite config uses relative asset paths and
31+
copies `public/`, including the reader's sample PDF and symbol assets, into the
32+
same output so project-site URLs work without a custom domain.
33+
34+
## Playground
35+
36+
The sample document and Chinese/Japanese translations are authored demonstration
37+
content, not live machine translation. During the Vite build, layout paragraphs
38+
and `data/translations.json` are validated and compiled into a bundled translation
39+
cache (including English originals). Missing translations fail the build.
40+
41+
The real reader consumes these entries as cache hits, without translation latency
42+
or network requests to a translation backend. Unsupported languages and paragraphs
43+
never fall back to a live provider. Clearing the demonstration cache keeps the
44+
bundled entries available. Settings synchronize preferences across both frames.
45+
Download buttons lead to the latest published GitHub release.
46+
47+
## Deployment
48+
49+
`.github/workflows/pages.yml` installs the root Bun lockfile, builds with the
50+
Pages Vite config, uploads `dist-pages/` as a GitHub Pages artifact, and deploys
51+
changes to `pages/**` after they reach `main`. In the repository's
52+
**Settings → Pages**, select **GitHub Actions** as the publishing source.

‎pages/assets/icon-512.png‎

184 KB
Loading

‎pages/data/layout.json‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
[
2+
[
3+
{
4+
"id": 0,
5+
"text": "FIELD NOTES / READING & LANGUAGE",
6+
"x": 60,
7+
"y": 59,
8+
"width": 173.54700000000008,
9+
"height": 9,
10+
"fontSize": 9,
11+
"bold": false
12+
},
13+
{
14+
"id": 1,
15+
"text": "A quieter way to read",
16+
"x": 60,
17+
"y": 92,
18+
"width": 278.28000000000003,
19+
"height": 30,
20+
"fontSize": 30,
21+
"bold": true
22+
},
23+
{
24+
"id": 2,
25+
"text": "Reading should feel effortless. A document has its own rhythm: a heading, a thought, a pause. Translation can follow that rhythm without taking you away from the page.",
26+
"x": 60,
27+
"y": 170,
28+
"width": 487.99800000000005,
29+
"height": 35,
30+
"fontSize": 14,
31+
"bold": false
32+
},
33+
{
34+
"id": 3,
35+
"text": "When you stop scrolling, this reader identifies the text on the page. Each paragraph is translated independently and returns to its original position. The surrounding figures and the shape of the document remain familiar.",
36+
"x": 60,
37+
"y": 238,
38+
"width": 479.0240000000001,
39+
"height": 56,
40+
"fontSize": 14,
41+
"bold": false
42+
},
43+
{
44+
"id": 4,
45+
"text": "Click a translated paragraph to see its original wording. You can move between languages at your own pace, keeping the context close at hand.",
46+
"x": 60,
47+
"y": 327,
48+
"width": 445.9700000000001,
49+
"height": 35,
50+
"fontSize": 14,
51+
"bold": false
52+
},
53+
{
54+
"id": 5,
55+
"text": "A document. A pause. A new perspective.",
56+
"x": 83,
57+
"y": 580,
58+
"width": 286.569,
59+
"height": 17,
60+
"fontSize": 17,
61+
"bold": false
62+
},
63+
{
64+
"id": 6,
65+
"text": "1",
66+
"x": 300,
67+
"y": 737,
68+
"width": 5.560000000000002,
69+
"height": 10,
70+
"fontSize": 10,
71+
"bold": false
72+
}
73+
],
74+
[
75+
{
76+
"id": 0,
77+
"text": "FIELD NOTES / READING & LANGUAGE",
78+
"x": 60,
79+
"y": 59,
80+
"width": 173.54700000000008,
81+
"height": 9,
82+
"fontSize": 9,
83+
"bold": false
84+
},
85+
{
86+
"id": 1,
87+
"text": "The space between words",
88+
"x": 60,
89+
"y": 92,
90+
"width": 325.8,
91+
"height": 30,
92+
"fontSize": 30,
93+
"bold": true
94+
},
95+
{
96+
"id": 2,
97+
"text": "Good tools give people room to think. A calm reading environment keeps the document at the center, with controls nearby when they are needed.",
98+
"x": 60,
99+
"y": 170,
100+
"width": 433.56600000000003,
101+
"height": 35,
102+
"fontSize": 14,
103+
"bold": false
104+
},
105+
{
106+
"id": 3,
107+
"text": "Translations are saved locally after they arrive. Returning to a paragraph uses the saved result, so the same passage does not need another API request.",
108+
"x": 60,
109+
"y": 238,
110+
"width": 489.87400000000014,
111+
"height": 35,
112+
"fontSize": 14,
113+
"bold": false
114+
},
115+
{
116+
"id": 4,
117+
"text": "Try the zoom controls, open Translation settings, or switch the target language. New results arrive one paragraph at a time while the document stays responsive.",
118+
"x": 60,
119+
"y": 306,
120+
"width": 473.98400000000015,
121+
"height": 35,
122+
"fontSize": 14,
123+
"bold": false
124+
},
125+
{
126+
"id": 5,
127+
"text": "A document. A pause. A new perspective.",
128+
"x": 83,
129+
"y": 580,
130+
"width": 286.569,
131+
"height": 17,
132+
"fontSize": 17,
133+
"bold": false
134+
},
135+
{
136+
"id": 6,
137+
"text": "2",
138+
"x": 300,
139+
"y": 737,
140+
"width": 5.560000000000002,
141+
"height": 10,
142+
"fontSize": 10,
143+
"bold": false
144+
}
145+
]
146+
]

‎pages/data/translations.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"Simplified Chinese": [
3+
[
4+
"阅读与语言 / 随笔",
5+
"更安静的阅读方式",
6+
"阅读应该轻松自然。文档有自己的节奏：一个标题、一个想法、一次停顿。翻译可以跟随这个节奏，而不必让你离开页面。",
7+
"当你停止滚动时，阅读器会识别页面上的文字。每个段落独立翻译，并回到原来的位置。周围的图表与文档的形态依然熟悉。",
8+
"点击译文段落，即可查看原文。按自己的节奏在语言之间切换，上下文始终近在眼前。",
9+
"一份文档。一次停顿。一个新的视角。",
10+
"1"
11+
],
12+
[
13+
"阅读与语言 / 随笔",
14+
"文字之间的空间",
15+
"好的工具为思考留出空间。安静的阅读环境让文档成为中心，控件在需要时就在手边。",
16+
"译文完成后保存在本地。再次回到同一段落会复用已有结果，不必为同一段内容再次发起 API 请求。",
17+
"试试缩放控件，打开翻译设置，或切换目标语言。结果逐段出现，而文档始终保持响应。",
18+
"一份文档。一次停顿。一个新的视角。",
19+
"2"
20+
]
21+
],
22+
"Japanese": [
23+
[
24+
"読書と言語 / ノート",
25+
"静かな読書体験",
26+
"読書は自然であるべきです。文書には見出し、考え、間というリズムがあります。翻訳はページを離れず、そのリズムに沿って進めます。",
27+
"スクロールが止まると、ページの文字を識別します。各段落は独立して翻訳され、元の位置に戻ります。図や文書の形は変わりません。",
28+
"翻訳された段落をクリックすると原文を表示します。自分のペースで言語を切り替え、文脈をそばに保てます。",
29+
"文書。ひと休み。新しい視点。",
30+
"1"
31+
],
32+
[
33+
"読書と言語 / ノート",
34+
"言葉の間の空間",
35+
"良い道具は思考の余地を与えます。静かな読書環境は文書を中心に置き、必要なときに操作が手元にあります。",
36+
"翻訳は到着後にローカルに保存されます。段落に戻ると保存された結果を使用し、同じ文章への API リクエストは不要です。",
37+
"拡大、翻訳設定、言語変更を試してください。文書が応答性を保ちながら、結果は段落ごとに届きます。",
38+
"文書。ひと休み。新しい視点。",
39+
"2"
40+
]
41+
]
42+
}

0 commit comments

Comments
 (0)