Update to sveltekit 1.0

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>