elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 05:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic pwa setup

Browse Source
This commit is contained in:
Felix Roos 2023-02-06 20:57:34 +01:00
parent 10580a0bec
commit fd09dff381
16 changed files with 1678 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -37,4 +37,6 @@ talk/public/EmuSP12
talk/public/samples
server/samples/old
repl/stats.html
coverage
coverage
public/icons/apple-splash-*
dev-dist

1653
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

7
website/README.md
View File

@ -19,6 +19,13 @@ npm run build # <- builds repl + tutorial to ../docs
npm run preview # <- test static build
```
## Generate PWA icons
```sh
cd website/public
npx pwa-asset-generator icon.png icons
```
# Standard Readme of Astro Starter Kit: Docs Site
```bash

40
website/astro.config.mjs
View File

@ -9,6 +9,7 @@ import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import tailwind from '@astrojs/tailwind';
import AstroPWA from '@vite-pwa/astro';
// import { visualizer } from 'rollup-plugin-visualizer';
const options = {
@ -29,6 +30,45 @@ export default defineConfig({
react(),
mdx(options),
tailwind(),
AstroPWA({
devOptions: {
enabled: true,
},
manifest: {
includeAssets: ['favicon.ico', 'icons/apple-icon-180.png', 'favicon.svg'],
name: 'Strudel REPL',
short_name: 'Strudel',
description:
'Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript.',
theme_color: '#222222',
icons: [
{
src: 'icons/manifest-icon-192.maskable.png',
sizes: '192x192',
type: 'image/png',
purpose: 'any',
},
{
src: 'icons/manifest-icon-192.maskable.png',
sizes: '192x192',
type: 'image/png',
purpose: 'maskable',
},
{
src: 'icons/manifest-icon-512.maskable.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any',
},
{
src: 'icons/manifest-icon-512.maskable.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
},
],
},
}),
],
site: `https://strudel.tidalcycles.org`,
base: '/',

9
website/package.json
View File

@ -39,6 +39,7 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"astro": "^1.7.2",
"canvas": "^2.11.0",
"fraction.js": "^4.2.0",
"nanoid": "^4.0.0",
"preact": "^10.7.3",
@ -47,10 +48,12 @@
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.0.1",
"remark-toc": "^8.0.1",
"tailwindcss": "^3.2.4",
"canvas": "^2.11.0"
"tailwindcss": "^3.2.4"
},
"devDependencies": {
"html-escaper": "^3.0.3"
"@vite-pwa/astro": "^0.0.1",
"html-escaper": "^3.0.3",
"vite-plugin-pwa": "^0.14.1",
"workbox-window": "^6.5.4"
}
}

BIN
website/public/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
website/public/icons/apple-icon-180.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
website/public/icons/manifest-icon-192.maskable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
website/public/icons/manifest-icon-512.maskable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

12
website/src/components/HeadCommon.astro
View File

@ -1,4 +1,5 @@
---
import { pwaInfo } from 'virtual:pwa-info';
import '../styles/index.css';
const { BASE_URL } = import.meta.env;
@ -12,7 +13,18 @@ const base = BASE_URL;
<link rel="icon" type="image/svg+xml" href="favicon.ico" />
<meta
name="description"
content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
/>
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" />
<meta name="theme-color" content="#222222" />
<base href={base} />
<!-- Scrollable a11y code helper -->
<script src="./make-scrollable-code-focusable.js" is:inline></script>
<script src="/src/pwa.ts"></script>
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}

2
website/src/env.d.ts vendored
View File

@ -1 +1,3 @@
/// <reference types="astro/client" />
/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/client" />

2
website/src/layouts/MainLayout.astro
View File

@ -22,7 +22,7 @@ const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
---
<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial">
<head>
<HeadCommon />
<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />

2
website/src/pages/index.astro
View File

@ -3,7 +3,7 @@ import HeadCommon from '../components/HeadCommon.astro';
import { Repl } from '../repl/Repl.jsx';
---
<html>
<html lang="en">
<head>
<HeadCommon />
<title>Strudel REPL</title>

11
website/src/pwa.ts Normal file
View File

@ -0,0 +1,11 @@
import { registerSW } from 'virtual:pwa-register'
registerSW({
immediate: true,
onRegisteredSW(swScriptUrl) {
// console.log('SW registered: ', swScriptUrl)
},
onOfflineReady() {
// console.log('PWA application ready to work offline')
},
})

2
website/src/repl/Footer.jsx
View File

@ -76,7 +76,7 @@ export function Footer({ context }) {
<FooterTab name="reference" />
</div>
{activeFooter !== '' && (
<button onClick={() => setActiveFooter('')} className="text-white">
<button onClick={() => setActiveFooter('')} className="text-white" aria-label="Close Panel">
<XMarkIcon className="w-5 h-5" />
</button>
)}

6
website/tsconfig.json
View File

@ -3,6 +3,10 @@
"compilerOptions": {
"jsx": "react-jsx",
"skipLibCheck": true,
"jsxImportSource": "react"
"jsxImportSource": "react",
"noImplicitAny": false,
"types": [
"vite-plugin-pwa/client"
]
}
}