Skip to content

Commit 4946dfa

Browse files
git-antonyukgit-antonyuk
committed
feat(examples): add Astro getting-started example
1 parent 49d8c9c commit 4946dfa

14 files changed

Lines changed: 1583 additions & 244 deletions

File tree

‎.github/workflows/ci-examples.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ jobs:
9494
strategy:
9595
fail-fast: true
9696
matrix:
97-
example: [react, vue, vanilla, cdn, angular, nuxt, laravel, solid]
97+
example: [react, vue, vanilla, cdn, angular, nuxt, laravel, solid, astro]
9898
steps:
9999
- uses: actions/checkout@v6
100100

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ Starter projects to get you running quickly:
118118
| [Vanilla JS](examples/getting-started/vanilla) | [CDN](examples/getting-started/cdn) |
119119
| [Comments](examples/editor/built-in-ui/comments) | [Track changes](examples/editor/built-in-ui/track-changes) |
120120
| [Toolbar](examples/editor/built-in-ui/toolbar) | [AI redlining](examples/ai/redlining) |
121-
| [AI redlining (server-side)](examples/document-engine/ai-redlining) | |
121+
| [AI redlining (server-side)](examples/document-engine/ai-redlining) | [Astro](examples/getting-started/astro) |
122122

123123
[Browse all examples](examples/)
124124

‎examples/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ Framework starters. Pick one, run `pnpm install && pnpm dev`.
3939
| [nextjs](./getting-started/nextjs) | Next.js (SSR-safe) |
4040
| [nuxt](./getting-started/nuxt) | Nuxt setup |
4141
| [laravel](./getting-started/laravel) | Laravel + Inertia |
42+
| [astro](./getting-started/astro) | Astro setup |
4243

4344
## Editor
4445

‎examples/__tests__/playwright.config.ts‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { fileURLToPath } from 'node:url';
66
const __dirname = dirname(fileURLToPath(import.meta.url));
77

88
// EXAMPLE can be:
9-
// "react", "vue", "vanilla", "cdn", "angular" (getting-started)
9+
// "react", "vue", "vanilla", "cdn", "angular", "astro" (getting-started)
1010
// "editor/collaboration/providers/superdoc-yjs", etc.
1111
const example = process.env.EXAMPLE || 'react';
1212

@@ -29,6 +29,7 @@ const portMap: Record<string, number> = {
2929
cdn: 3000,
3030
nuxt: 3000,
3131
laravel: 8000,
32+
astro: 4321,
3233
'editor/collaboration/providers/hocuspocus': 3000,
3334
'advanced/headless-toolbar/svelte-shadcn': 5190,
3435
'ai/streaming': 5180,
@@ -41,19 +42,26 @@ const exampleAbsPath = resolve(__dirname, examplePath);
4142
const hasLocalNodeModules = existsSync(resolve(exampleAbsPath, 'node_modules', '.bin'));
4243
const run = hasLocalNodeModules ? `npm run --prefix ${examplePath}` : `pnpm --dir ${examplePath} run`;
4344

44-
// Laravel: build Vite assets first, then serve with PHP only (via `start` script).
45-
// The concurrently approach (php + vite dev) is unreliable in CI.
46-
const isLaravel = example === 'laravel';
47-
48-
// Start command
49-
const isCdn = example === 'cdn';
50-
const command = isCdn
51-
? `node ${examplePath}/setup.mjs && npx serve ${examplePath} -l ${port}`
52-
: isLaravel
53-
? `${run} start`
54-
: useConcurrently.includes(example)
55-
? `${run} dev`
56-
: `${run} dev -- --port ${port}`;
45+
// Start command — Laravel builds Vite assets first, then serves with PHP only
46+
// (the concurrently approach is unreliable in CI).
47+
let command: string;
48+
switch (example) {
49+
case 'cdn':
50+
command = `node ${examplePath}/setup.mjs && npx serve ${examplePath} -l ${port}`;
51+
break;
52+
case 'laravel':
53+
command = `${run} start`;
54+
break;
55+
case 'astro':
56+
command = `${run} dev`;
57+
break;
58+
default:
59+
if (useConcurrently.includes(example)) {
60+
command = `${run} dev`;
61+
} else {
62+
command = `${run} dev -- --port ${port}`;
63+
}
64+
}
5765

5866
export default defineConfig({
5967
testDir: '.',

‎examples/getting-started/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Minimal examples for integrating SuperDoc into your project. Each example loads
1010
| [solid](./solid) | SolidJS + TypeScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/frameworks/solid) |
1111
| [vanilla](./vanilla) | Plain JavaScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/quickstart) |
1212
| [cdn](./cdn) | Zero build tools — just an HTML file | [Guide](https://docs.superdoc.dev/getting-started/quickstart) |
13+
| [astro](./astro) | Astro setup | [Guide](https://docs.superdoc.dev/getting-started/quickstart) |
1314

1415
The bundler examples pass [`@superdoc-dev/fonts`](https://docs.superdoc.dev/getting-started/fonts), so SuperDoc's bundled fallback fonts (Carlito for Calibri, and more) render without copying any assets. The CDN example loads them from the script's path; the Laravel example copies them into `public/fonts/`.
1516

‎examples/getting-started/astro/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# build output
2+
dist/
3+
# generated types
4+
.astro/
5+
6+
# dependencies
7+
node_modules/
8+
9+
# logs
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store
22+
23+
# jetbrains setting folder
24+
.idea/

‎examples/getting-started/astro/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# SuperDoc — Astro
2+
3+
Minimal Astro example.
4+
5+
SuperDoc runs in a client-side `<script>` block only - do not initialize it during SSR.
6+
7+
## Run
8+
9+
```bash
10+
pnpm install
11+
pnpm dev
12+
```
13+
14+
## Learn more
15+
16+
- [Quickstart Guide](https://docs.superdoc.dev/getting-started/quickstart)
17+
- [Configuration Reference](https://docs.superdoc.dev/editor/superdoc/configuration)

‎examples/getting-started/astro/astro.config.mjs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @ts-check
2+
import { defineConfig } from 'astro/config';
3+
4+
// https://astro.build/config
5+
export default defineConfig({
6+
server: {
7+
port: 4321,
8+
},
9+
});

‎examples/getting-started/astro/package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "superdoc-astro-example",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "astro dev"
7+
},
8+
"dependencies": {
9+
"astro": "^7.1.3",
10+
"@superdoc-dev/fonts": "workspace:*",
11+
"superdoc": "latest"
12+
}
13+
}

‎examples/getting-started/astro/src/pages/index.astro‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
import 'superdoc/style.css';
3+
---
4+
5+
<html lang="en">
6+
<head>
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="width=device-width" />
9+
<meta name="generator" content={Astro.generator} />
10+
<title>SuperDoc — Astro</title>
11+
</head>
12+
<body>
13+
<div style="padding: 1rem; background: #f5f5f5">
14+
<input type="file" id="file-input" accept=".docx" />
15+
</div>
16+
<div id="editor" style="height: calc(100vh - 60px)"></div>
17+
18+
<script>
19+
import { SuperDoc } from 'superdoc';
20+
import { superdocFonts } from '@superdoc-dev/fonts';
21+
22+
let superdoc: SuperDoc | null = null;
23+
24+
const initEditor = (file: File) => {
25+
superdoc?.destroy();
26+
superdoc = new SuperDoc({
27+
selector: '#editor',
28+
document: file,
29+
fonts: superdocFonts,
30+
});
31+
};
32+
33+
const handleFile = (e: Event) => {
34+
const file = (e.target as HTMLInputElement).files?.[0];
35+
if (!file) return;
36+
37+
initEditor(file);
38+
};
39+
40+
const fileInput = document.querySelector<HTMLInputElement>('#file-input');
41+
fileInput?.addEventListener('change', handleFile);
42+
</script>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)