Skip to content

Commit 96b44f3

Browse files
SplinesSplines
authored
Publish to GitHub Pages (#45)
1 parent 3aea895 commit 96b44f3

5 files changed

Lines changed: 178 additions & 73 deletions

File tree

‎.config/eslint.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default defineConfig([
8888
closeStyle: "newline",
8989
ifAttrsMoreThan: 5,
9090
}],
91-
"@html-eslint/element-newline": "error",
91+
"@html-eslint/element-newline": ["error", { "inline": ["$inline"] }],
9292
"@html-eslint/id-naming-convention": ["error", "camelCase"],
9393
"@html-eslint/indent": ["error", 2],
9494
"@html-eslint/sort-attrs": "error",

‎.github/workflows/deploy.yml‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
# Allow only one concurrent deployment, skipping runs queued between the
15+
# run in-progress and latest queued. However, do NOT cancel in-progress runs
16+
# as we want to allow these production deployments to complete.
17+
concurrency:
18+
group: "pages"
19+
cancel-in-progress: false
20+
21+
jobs:
22+
build:
23+
name: Build
24+
runs-on: ubuntu-latest
25+
26+
steps:
27+
- uses: actions/checkout@v6
28+
29+
- name: Setup Node
30+
uses: actions/setup-node@v6
31+
with:
32+
node-version: 24
33+
34+
- name: Install Dependencies
35+
run: npm install
36+
37+
- name: Build with Vite
38+
run: npm run build
39+
40+
- name: Upload artifact
41+
id: deployment
42+
uses: actions/upload-pages-artifact@v4
43+
with:
44+
path: ./build/
45+
46+
deploy:
47+
name: Deploy
48+
runs-on: ubuntu-latest
49+
if: github.ref == 'refs/heads/main'
50+
needs: build
51+
environment:
52+
name: github-pages
53+
url: ${{ steps.deployment.outputs.page_url }}
54+
55+
steps:
56+
- name: Deploy to GitHub Pages
57+
id: deployment
58+
uses: actions/deploy-pages@v4

‎web/index.html‎

Lines changed: 35 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,80 +4,44 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>Typst for PowerPoint</title>
7-
<link href="data:image/x-icon;," rel="icon">
8-
<link href="styles/main.css" rel="stylesheet">
9-
<link href="styles/file-dropzone.css" rel="stylesheet">
10-
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
10+
max-width: 600px;
11+
margin: 0 auto;
12+
padding: 2rem;
13+
line-height: 1.6;
14+
}
15+
16+
h1 {
17+
color: #333;
18+
}
19+
20+
a {
21+
color: #0066cc;
22+
text-decoration: none;
23+
}
24+
25+
a:hover {
26+
text-decoration: underline;
27+
}
28+
</style>
1129
</head>
1230

1331
<body>
14-
<div class="controls">
15-
<div class="control-group">
16-
<label for="fontSize" title="Font size in points (pt)">Size</label>
17-
<input id="fontSize" type="number" min="1" step="1.0" value="28">
18-
</div>
19-
<div class="control-group checkbox-group fill-color-group">
20-
<label title="Shape fill color">
21-
<input id="fillColorEnabled" type="checkbox" checked>
22-
<span>Fill</span>
23-
</label>
24-
<!-- eslint-disable-next-line @html-eslint/use-baseline -->
25-
<input id="fillColor" type="color" value="#000000">
26-
</div>
27-
<div class="control-group checkbox-group">
28-
<label title="Automatically wrap your input in display math delimiters ($)">
29-
<input id="mathModeEnabled" type="checkbox" checked>
30-
<span>Only Math</span>
31-
</label>
32-
</div>
33-
</div>
34-
<div id="inputWrapper">
35-
<div id="mathDelimiterTop" class="math-delimiter">$</div>
36-
<textarea id="typstInput" placeholder="Enter Typst code, e.g. a^2 + b^2 = c^2"></textarea>
37-
<div id="mathDelimiterBottom" class="math-delimiter">$</div>
38-
</div>
39-
40-
<div id="previewContainer">
41-
<span id="previewLabel">Preview</span>
42-
<div id="previewContent"></div>
43-
</div>
44-
45-
<div id="diagnosticsContainer" style="display: none;">
46-
<span id="diagnosticsLabel">Diagnostics</span>
47-
<div id="diagnosticsContent"></div>
48-
</div>
49-
50-
<button id="insertBtn" disabled></button>
51-
<button id="bulkUpdateBtn" style="display: none;">Update font size</button>
52-
<div id="status" class="status"></div>
53-
54-
<div id="themeToggle">
55-
<label>
56-
<input id="darkModeToggle" type="checkbox" alt="Toggle dark mode" checked>
57-
<span class="slider"></span>
58-
</label>
59-
</div>
60-
61-
<div class="file-dropzone">
62-
<div class="dropzone-container">
63-
<label id="dropzoneLabel" class="dropzone-label"
64-
alt="Select a Typst file to generate an equation from it">
65-
<div class="dropzone-icon">📁</div>
66-
<div class="dropzone-text">Drop a Typst file here</div>
67-
<div class="dropzone-subtext">or click to browse</div>
68-
<input id="fileInput" type="file" class="dropzone-input" accept=".typ,.txt">
69-
</label>
70-
71-
<div id="fileInfo" class="file-info">
72-
<div class="file-icon">📄</div>
73-
<div id="fileName"></div>
74-
</div>
75-
76-
<button id="generateFromFileBtn" style="display: none;"></button>
77-
</div>
78-
</div>
79-
80-
<script type="module" defer src="src/main.js"></script>
32+
<h1>Typst for PowerPoint</h1>
33+
<p>
34+
Use Typst to easily insert beautiful equations into your
35+
PowerPoint presentations. See the project on
36+
<a href="https://github.com/splines/typst-powerpoint">GitHub</a>.
37+
Right not it is in early preview, the Add-in is not yet available on the
38+
PowerPoint Office Add-in Marketplace.
39+
</p>
40+
<p>
41+
The PowerPoint Add-in will connect to this static page in order to display
42+
the Add-in UI. All data stays local to your machine. In fact, there is no
43+
backend at all as this static site is hosted on GitHub Pages.
44+
</p>
8145
</body>
8246

8347
</html>

‎web/manifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</Requirements>
2828

2929
<DefaultSettings>
30-
<SourceLocation DefaultValue="https://localhost:3155/index.html" />
30+
<SourceLocation DefaultValue="https://localhost:3155/powerpoint.html" />
3131
</DefaultSettings>
3232

3333
<Permissions>ReadWriteDocument</Permissions>

‎web/powerpoint.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Typst for PowerPoint</title>
7+
<link href="data:image/x-icon;," rel="icon">
8+
<link href="styles/main.css" rel="stylesheet">
9+
<link href="styles/file-dropzone.css" rel="stylesheet">
10+
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
11+
</head>
12+
13+
<body>
14+
<div class="controls">
15+
<div class="control-group">
16+
<label for="fontSize" title="Font size in points (pt)">Size</label>
17+
<input id="fontSize" type="number" min="1" step="1.0" value="28">
18+
</div>
19+
<div class="control-group checkbox-group fill-color-group">
20+
<label title="Shape fill color">
21+
<input id="fillColorEnabled" type="checkbox" checked>
22+
<span>Fill</span>
23+
</label>
24+
<!-- eslint-disable-next-line @html-eslint/use-baseline -->
25+
<input id="fillColor" type="color" value="#000000">
26+
</div>
27+
<div class="control-group checkbox-group">
28+
<label title="Automatically wrap your input in display math delimiters ($)">
29+
<input id="mathModeEnabled" type="checkbox" checked>
30+
<span>Only Math</span>
31+
</label>
32+
</div>
33+
</div>
34+
<div id="inputWrapper">
35+
<div id="mathDelimiterTop" class="math-delimiter">$</div>
36+
<textarea id="typstInput" placeholder="Enter Typst code, e.g. a^2 + b^2 = c^2"></textarea>
37+
<div id="mathDelimiterBottom" class="math-delimiter">$</div>
38+
</div>
39+
40+
<div id="previewContainer">
41+
<span id="previewLabel">Preview</span>
42+
<div id="previewContent"></div>
43+
</div>
44+
45+
<div id="diagnosticsContainer" style="display: none;">
46+
<span id="diagnosticsLabel">Diagnostics</span>
47+
<div id="diagnosticsContent"></div>
48+
</div>
49+
50+
<button id="insertBtn" disabled></button>
51+
<button id="bulkUpdateBtn" style="display: none;">Update font size</button>
52+
<div id="status" class="status"></div>
53+
54+
<div id="themeToggle">
55+
<label>
56+
<input id="darkModeToggle" type="checkbox" alt="Toggle dark mode" checked>
57+
<span class="slider"></span>
58+
</label>
59+
</div>
60+
61+
<div class="file-dropzone">
62+
<div class="dropzone-container">
63+
<label id="dropzoneLabel" class="dropzone-label"
64+
alt="Select a Typst file to generate an equation from it">
65+
<div class="dropzone-icon">📁</div>
66+
<div class="dropzone-text">Drop a Typst file here</div>
67+
<div class="dropzone-subtext">or click to browse</div>
68+
<input id="fileInput" type="file" class="dropzone-input" accept=".typ,.txt">
69+
</label>
70+
71+
<div id="fileInfo" class="file-info">
72+
<div class="file-icon">📄</div>
73+
<div id="fileName"></div>
74+
</div>
75+
76+
<button id="generateFromFileBtn" style="display: none;"></button>
77+
</div>
78+
</div>
79+
80+
<script type="module" defer src="src/main.js"></script>
81+
</body>
82+
83+
</html>

0 commit comments

Comments
 (0)