Update to sveltekit 1.0

package.json

@@ -4,16 +4,19 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.39",
+    "@sveltejs/adapter-static": "^1.0.0",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "^1.0.0",
-    "svelte": "^3.46.0",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.9.2",
     "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.1",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.3",
-    "vite": "^3.0.9"
+    "vite": "^4.0.0"
   },
   "type": "module"
 }

src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}

src/app.html

@@ -5,15 +5,14 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="theme-color" content="#333333">
 		<meta name="description" content="Quartznet is a small team developing games, tools and more!">
-	
+
 		<link rel="stylesheet" href="/css/bootstrap.min.css">
 		<link rel="stylesheet" href="/css/global.css">
-		<!-- <link rel="manifest" href="manifest.json" crossorigin="use-credentials"> -->
 		<link rel="icon" type="image/png" href="/img/favicon.ico">
 
 		%sveltekit.head%
 	</head>
-	<body>
+	<body data-sveltekit-preload-data="hover">
 		<div id="svelte">%sveltekit.body%</div>
 	</body>
 </html>

src/routes/+layout.js

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

src/routes/+layout.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Nav from '../components/Nav.svelte';
+    import userManager from '../components/UserManager.svelte'
+    import Modal from '../components/Modal.svelte'
+    import Footer from '../components/Footer.svelte'
+
+    export let segment;
+</script>
+
+<style>
+    :global(html[data-theme='dark']) {
+        --background-color: #222222;
+        --headings-color: #ffffff;
+        --font-color: #ffffff;
+    }
+
+    :global(body) {
+        font-family: 'Open Sans', sans-serif;
+        font-size: 1rem;
+        background-color: var(--background-color);
+        color: var(--font-color);
+        box-sizing: border-box;
+    }
+</style>
+
+<Modal/>
+<Nav {segment} rightComponent={userManager}/>
+
+<slot></slot>
+
+<Footer/>

src/routes/+page.svelte

@@ -0,0 +1,51 @@
+<script>
+    import {onMount} from 'svelte';
+    import Thumb from '../components/Thumbnail.svelte'
+    import Banner from '../components/Banner.svelte'
+
+    let games = [
+        {
+            name: "Sirius",
+            link: "./sirius",
+            img: "img/600x300.png",
+            size: { width: 600, height: 300 },
+            description: "A 2D game about a wannabe space captain exploring the galaxy.",
+        },
+        {
+            name: "Quartz",
+            link: "./sirius",
+            img: "img/600x300.png",
+            size: { width: 600, height: 300 },
+            description: "Test"
+        }
+    ]
+
+    onMount(async () => {
+
+    });
+</script>
+
+<style>
+    section {
+        border-radius: 5px;
+        padding: 5px 20px;
+    }
+
+    main {
+        margin-top: 30px;
+    }
+</style>
+
+<svelte:head>
+    <title>Quartznet</title>
+</svelte:head>
+
+<Banner/>
+
+<main class="container">
+    <section>
+        {#each games as game}
+            <Thumb {...game}/>
+        {/each}
+    </section>
+</main>

src/routes/about/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+    import Banner from '../../components/Banner.svelte'
+</script>
+
+<svelte:head>
+    <title>Quartznet - About</title>
+</svelte:head>
+
+<Banner title="About"/>
+
+<main class="container">
+    <section>
+        <h2>Frequently Asked Questions</h2>
+        <h3>Who we are</h3>
+        <p>A small team developing games and software.</p>
+
+        <h3>Why the name Quartznet</h3>
+        <p>Naming things is hard. We ended up with the name quartz and added net making quartznet.
+
+        <h3>SPAAAAACEEEE</h3>
+        <p>Space!</p>
+    </section>
+</main>

src/routes/admin/+page.svelte

@@ -0,0 +1,69 @@
+<script>
+    import Banner from '../../components/Banner.svelte'
+
+    let services = [
+        {
+            name: "Status",
+            link: "https://quartznet.info/status",
+            description: "Server monitoring and troubleshooting",
+        },
+        {
+            name: "Gitea",
+            link: "https://quartznet.info/git",
+            description: "Software development version control"
+        }
+    ]
+</script>
+
+<style>
+    section {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+    }
+
+    ul {
+        padding: 0 !important;
+    }
+
+    li {
+        display: flex;
+        padding-bottom: 10px;
+        margin-bottom: 5px;
+    }
+
+    li a {
+        display: flex;
+        font-weight: bold;
+        font-size: 1.25rem;
+        border-bottom: 2px solid transparent;
+    }
+
+    li a:hover {
+        border-bottom: 2px solid white;
+    }
+
+    h2 {
+        line-height: 1.4;
+        margin-bottom: 20px;
+    }
+</style>
+
+<svelte:head>
+    <title>Quartznet - Admin</title>
+</svelte:head>
+
+<Banner title="Admin"/>
+
+<main class="container">
+    <section>
+        <h2>Services</h2>
+        <ul>
+            {#each services as service}
+                <li>
+                    <a href="{service.link}">{service.name}</a>
+                </li>
+            {/each}
+        </ul>
+    </section>
+</main>

src/routes/sirius/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+  import Banner from '../../components/Banner.svelte'
+</script>
+
+<svelte:head>
+  <title>Quartznet - Sirius</title>
+</svelte:head>
+
+<Banner title="Sirius"/>
+
+<main class="container">
+    <section class="content">
+        <h1>Sirius game</h1>
+        <p>Sirius game. Work in progress</p>
+        <a href="https://quartznet.info/presskit">Presskit</a>
+    </section>
+</main>

svelte.config.js

@@ -1,15 +1,21 @@
 import adapter from "@sveltejs/adapter-static";
 import preprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: preprocess(),
+	// preprocess: preprocess(),
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
 	kit: {
-		prerender: {
-			default: true
-		},
 		adapter: adapter({
-			pages: 'build'
+			pages: 'build',
+			assets: 'build',
+      		fallback: null,
+			precompress: false,
+			strict: true
 		})
 	}
 };