feat: gitpages

Author: fcastrovilli

.github/workflows/deploy.yml

@@ -0,0 +1,56 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          pnpm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@skeletonlabs/skeleton": "2.9.0",
     "@skeletonlabs/tw-plugin": "0.3.1",
-    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "^8.56.0",

pnpm-lock.yaml

@@ -1,6 +1,14 @@
 <script lang="ts">
-	let voices = 1;
+	import * as Tone from 'tone';
+
+	import { onMount } from 'svelte';
 	import Voice from '$lib/voice.svelte';
+
+	let voices = 1;
+
+	onMount(() => {
+		Tone.start();
+	});
 </script>
 
 <div class="space-y-4">

src/lib/synth.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import * as Tone from 'tone';
-	import Volume from './volume.svelte';
-	import Frequency from './frequency.svelte';
+	import Volume from '$lib/volume.svelte';
+	import Frequency from '$lib/frequency.svelte';
 
 	export let volume = -100;
 	export let frequency = 440;
 
-	let osc: Tone.Oscillator | null = null;
+	let osc: Tone.Oscillator | undefined = undefined;
+
+	$: status = '⏹';
+	// $: status = osc?.state == 'started' ? '⏹' : '▶';
 
-	$: status = osc?.state == 'started' ? '⏹' : '▶';
 	onMount(() => {
-		Tone.start();
-		osc = new Tone.Oscillator(frequency, 'sine').toDestination();
-		osc.volume.value = volume;
+		if (osc) return;
+		import('tone').then((Tone) => {
+			osc = new Tone.Oscillator(frequency, 'sine').toDestination();
+			osc.volume.value = volume;
+		});
 	});
 
 	const toggleOsc = () => {
@@ -29,11 +33,11 @@
 			{status}
 		</button>
 
-		<!-- {#if osc.state === 'started'} -->
-		<div class="space-y-2 w-full">
-			<Volume {osc} bind:volume />
-			<Frequency {osc} bind:frequencyValue={frequency} />
-		</div>
-		<!-- {/if} -->
+		{#if osc.state === 'started'}
+			<div class="space-y-2 w-full">
+				<Volume {osc} bind:volume />
+				<Frequency {osc} bind:frequencyValue={frequency} />
+			</div>
+		{/if}
 	{/if}
 </div>

src/lib/voice.svelte

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = false;

src/routes/+layout.ts

@@ -1,7 +1,13 @@
 <script lang="ts">
+	let start = false;
 	import Synth from '$lib/synth.svelte';
 </script>
 
-<div class="p-4 w-full">
-	<Synth />
+<div class="p-4 w-full space-y-4">
+	<button class="btn variant-ghost w-full" on:click={() => (start = !start)}
+		>{start ? 'Stop' : 'Start'}</button
+	>
+	{#if start}
+		<Synth />
+	{/if}
 </div>

src/routes/+page.svelte

@@ -1,18 +1,17 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	extensions: ['.svelte'],
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: [vitePreprocess()],
-	
+	preprocess: vitePreprocess(),
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			fallback: '404.html'
+		}),
+		paths: {
+			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
+		}
 	}
 };
-export default config;
+
+export default config;