Convert site to SvelteKit

pngwn · Oct 20, 2023 · aa346dd · aa346dd
1 parent 26591be
commit aa346dd
Show file tree

Hide file tree

Showing 15 changed files with 970 additions and 573 deletions.
diff --git a/packages/site/.gitignore b/packages/site/.gitignore
@@ -1,6 +1,4 @@
 .DS_Store
-node_modules
-yarn-error.log
+/node_modules
 /cypress/screenshots/
-/__sapper__/
-dist
+/.svelte-kit
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -4,22 +4,18 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "sapper dev --ext '.svelte .svx'",
-		"build:site": "sapper build --legacy --ext '.svelte .svx'",
-		"export": "sapper export --legacy --ext '.svelte .svx'",
-		"start": "node __sapper__/build",
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
 		"cy:run": "cypress run",
 		"cy:open": "cypress open",
 		"test": "run-p --race dev cy:run",
 		"generate-workers": "rollup -c rollup.workers.js"
 	},
 	"private": "true",
 	"dependencies": {
-		"compression": "^1.7.1",
 		"mdsvex": "^0.7.1-beta.3",
-		"polka": "^0.5.0",
 		"refractor": "^2.10.0",
-		"sirv": "^0.4.0",
 		"yootils": "^0.0.15"
 	},
 	"devDependencies": {
@@ -33,20 +29,22 @@
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.0.5",
 		"@rollup/plugin-replace": "^3.0.0",
+		"@sveltejs/kit": "next",
+		"@sveltejs/adapter-auto": "next",
 		"codemirror": "^5.49.2",
 		"npm-run-all": "^4.1.5",
-		"prism-svelte": "^0.4.4",
+		"prism-svelte": "^0.5.0",
 		"rehype-autolink-headings": "^2.0.5",
 		"rehype-slug": "^2.0.3",
 		"remark-syntax-highlight": "^0.1.3",
 		"rollup": "^2.58.0",
 		"rollup-plugin-svelte": "^7.1.0",
 		"rollup-plugin-terser": "^7.0.2",
-		"sapper": "^0.29.3",
-		"svelte": "^3.7.1",
+		"svelte": "^3.49.0",
 		"svelte-json-tree": "^0.0.7",
 		"typeface-catamaran": "^0.0.72",
 		"typeface-roboto": "^0.0.75",
-		"unist-util-visit": "^2.0.1"
+		"unist-util-visit": "^2.0.1",
+		"vite": "^3.0.4"
 	}
 }
diff --git a/packages/site/rollup.config.js b/packages/site/rollup.config.js
diff --git a/packages/site/src/template.html → packages/site/src/app.html b/packages/site/src/template.html → packages/site/src/app.html
@@ -4,8 +4,6 @@
 		<meta content="width=device-width, initial-scale=1.0" name="viewport" />
 		<meta charset="utf-8" />
 
-		%sapper.base%
-
 		<link rel="stylesheet" href="global.css" />
 		<link rel="manifest" href="manifest.json" />
 		<link rel="preload" as="image" href="/penguin.gif" />
@@ -48,14 +46,12 @@
 		/>
 		<meta property="twitter:image" content="https://mdsvex.com/og.png" />
 
-		%sapper.styles% %sapper.head%
+		%sveltekit.head%
 	</head>
 
 	<body>
-		<div id="sapper">%sapper.html%</div>
+		<div>%sveltekit.body%</div>
 
-		%sapper.scripts%
-
     <!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "590d70c530b74f41b117351532dd6809"}'></script><!-- End Cloudflare Web Analytics -->
 	</body>
 </html>
diff --git a/packages/site/src/client.js b/packages/site/src/client.js
diff --git a/packages/site/src/components/Nav.svelte b/packages/site/src/components/Nav.svelte
@@ -1,9 +1,7 @@
 <script>
-  import { stores } from "@sapper/app";
+  import { page } from "$app/stores";
   import GithubIcon from "./GithubIcon.svelte";
 
-  const { page } = stores();
-
   let w;
   const links = [
     ["/", "mdsvex"],

diff --git a/packages/site/src/components/Repl/Input/ComponentSelector.svelte b/packages/site/src/components/Repl/Input/ComponentSelector.svelte
@@ -4,7 +4,7 @@
   export let handle_select;
   export let funky;
 
-  const { components, selected, request_focus, rebundle } = getContext("REPL");
+  let { components, selected, request_focus, rebundle } = getContext("REPL");
 
   let editing = null;
 

diff --git a/packages/site/src/routes/_error.svelte → packages/site/src/routes/__error.svelte b/packages/site/src/routes/_error.svelte → packages/site/src/routes/__error.svelte
@@ -1,8 +1,8 @@
 <script>
+	import { dev } from '$app/env';
+
 	export let status;
 	export let error;
-
-	const dev = process.env.NODE_ENV === 'development';
 </script>
 
 <style>
@@ -33,7 +33,11 @@
 
 <h1>{status}</h1>
 
-<p>{error.message}</p>
+{#if error.message}
+	<p class="error">{status}: {error.message}</p>
+{:else}
+	<p class="error">Encountered a {status} error</p>
+{/if}
 
 {#if dev && error.stack}
 	<pre>{error.stack}</pre>

diff --git a/packages/site/src/routes/_layout.svelte → packages/site/src/routes/__layout.svelte b/packages/site/src/routes/_layout.svelte → packages/site/src/routes/__layout.svelte
diff --git a/packages/site/src/routes/docs.svelte b/packages/site/src/routes/docs.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { stores } from '@sapper/app';
+	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import docs from './_docs.svtext';
@@ -11,8 +11,6 @@
 	let current;
 	let position = '';
 
-	const { page } = stores();
-
 	const nav = [
 		['Install', 'docs#install-it'],
 		[

diff --git a/packages/site/src/server.js b/packages/site/src/server.js