chore: add PNPM to dockerfile

Dockerfile

@@ -6,13 +6,13 @@ COPY . .
 RUN apk add vips-dev pkgconfig gcc musl-dev
 RUN go get -d -v ./...
 RUN go build -o /shioriko
-RUN mkdir -p /web && cp -r web/static web/template /web
+RUN mkdir -p /web && cp -r web/static /web
 
-FROM node:14-alpine AS node_build
+FROM node:18-alpine AS node_build
 WORKDIR /src
 COPY . .
 WORKDIR /src/web/app
-RUN yarn install && yarn build
+RUN npm install -g pnpm && pnpm install && pnpm build
 
 FROM alpine AS runtime
 
@@ -20,6 +20,5 @@ WORKDIR /app
 RUN apk add vips
 COPY --from=build /shioriko /app/
 COPY --from=node_build /src/web/static/ /app/web/static/
-COPY --from=node_build /src/web/template/ /app/web/template/
 
 ENTRYPOINT ["/app/shioriko"]

pkg/app/app.go

@@ -49,11 +49,10 @@ func Initialize() {
 func Start() {
 	g := gin.Default()
 
-	g.Static("/static", "./web/static")
+	g.StaticFile("/", "./web/static/index.html")
+	g.Static("/_app", "./web/static/_app")
 	g.Static("/data", config.CurrentConfig.DataDirectory)
 
-	g.LoadHTMLGlob("web/template/**/*")
-
 	g.Use(cors.Default())
 
 	InitializeRoutes(g)

pkg/app/frontend_routes.go

@@ -3,7 +3,6 @@ package app
 import (
 	"net/http"
 
-	"github.com/Damillora/Shioriko/pkg/config"
 	"github.com/gin-gonic/gin"
 )
 
@@ -11,10 +10,6 @@ func InitializeFrontendRoutes(g *gin.Engine) {
 	g.NoRoute(frontendHome)
 }
 
-func frontendHome(c *gin.Context) {
-	baseURL := config.CurrentConfig.BaseURL
-	c.HTML(http.StatusOK, "index.html", gin.H{
-		"title":    "Shioriko",
-		"base_url": baseURL,
-	})
+func frontendHome(c *gin.Context) {    
+	c.Redirect(http.StatusFound, "/")
 }

web/app/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

web/app/.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

web/app/.gitignore

@@ -1,4 +1,10 @@
-/node_modules/
-/public/build/
-
 .DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

web/app/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

web/app/README.md

@@ -1,105 +1,38 @@
-*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+# create-svelte
 
----
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
-# svelte app
+## Creating a project
 
-This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
-
-To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
-npx degit sveltejs/template svelte-app
-cd svelte-app
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
 ```
 
-*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+## Developing
 
-
-## Get started
-
-Install the dependencies...
-
-```bash
-cd svelte-app
-npm install
-```
-
-...then start [Rollup](https://rollupjs.org):
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
 npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```
 
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+## Building
 
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
-
-If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
-
-## Building and running in production mode
-
-To create an optimised version of the app:
+To create a production version of your app:
 
 ```bash
 npm run build
 ```
 
-You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+You can preview the production build with `npm run preview`.
 
-
-## Single-page app mode
-
-By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
-
-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
-
-```js
-"start": "sirv public --single"
-```
-
-## Using TypeScript
-
-This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
-
-```bash
-node scripts/setupTypeScript.js
-```
-
-Or remove the script via:
-
-```bash
-rm scripts/setupTypeScript.js
-```
-
-## Deploying to the web
-
-### With [Vercel](https://vercel.com)
-
-Install `vercel` if you haven't already:
-
-```bash
-npm install -g vercel
-```
-
-Then, from within your project folder:
-
-```bash
-cd public
-vercel deploy --name my-project
-```
-
-### With [surge](https://surge.sh/)
-
-Install `surge` if you haven't already:
-
-```bash
-npm install -g surge
-```
-
-Then, from within your project folder:
-
-```bash
-npm run build
-surge public my-project.surge.sh
-```
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

web/app/package.json

@@ -1,32 +1,36 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
+  "name": "Shioriko",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "eslint ."
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0"
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "sass": "^1.63.6",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "svelte-tags-input": "^5.0.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
   },
+  "type": "module",
   "dependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "axios": "^0.21.1",
-    "bulma": "^0.9.2",
-    "node-sass": "^6.0.0",
-    "postcss": "^8.2.14",
-    "query-string": "^7.0.0",
-    "sirv-cli": "^1.0.0",
-    "svelte-preprocess": "^4.7.3",
-    "svelte-routing": "^1.6.0",
-    "svelte-tags-input": "^2.7.1"
+    "@sveltejs/adapter-static": "^2.0.3",
+    "axios": "^1.4.0",
+    "bulma": "^0.9.4",
+    "query-string": "^8.1.0",
+    "sass": "^1.64.2"
   }
 }

web/app/rollup.config.js

@@ -1,91 +0,0 @@
-import json from '@rollup/plugin-json';
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import css from 'rollup-plugin-css-only';
-import sveltePreprocess from 'svelte-preprocess'
-
-const production = !process.env.ROLLUP_WATCH;
-
-function serve() {
-	let server;
-
-	function toExit() {
-		if (server) server.kill(0);
-	}
-
-	return {
-		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
-
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
-}
-
-export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		dir: "../static",
-        assetFileNames: 'bundle.css',
-        entryFileNames: 'bundle.js'
-	},
-	plugins: [
-        json(),
-		svelte({
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			},
-
-			preprocess: sveltePreprocess({
-				sourceMap: !production,
-				scss: {
-					includePaths: [
-						'node_modules',
-						'src'
-					]
-				},
-			}),       
-		}),
-		// we'll extract any component CSS out into
-		// a separate file - better for performance
-		css({ name: "bundle" }),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
-
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
-
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
-};

web/app/src/App.svelte

@@ -1,68 +0,0 @@
-<script>
-	import { Router, Link, Route } from "svelte-routing";
-
-	import Navbar from "./Navbar.svelte";
-
-	
-	import Home from "./routes/Home.svelte";
-
-	import Login from "./routes/Auth/Login.svelte";
-	import Logout from "./routes/Auth/Logout.svelte";
-	import Register from "./routes/Auth/Register.svelte";
-
-	import Posts from "./routes/Post/Posts.svelte";
-	import Post from "./routes/Post/Post.svelte";
-	import Upload from "./routes/Post/Upload.svelte";
-
-	import Tags from "./routes/Tags/Tags.svelte";
-	import Tag from "./routes/Tags/Tag.svelte";
-
-	import Profile from "./routes/User/Profile.svelte";
-
-	export let url = "";
-	let baseURL = window.BASE_URL;
-</script>
-
-<Router {url}>
-	<Navbar />
-	<div>
-		<Route path="/" component={Home} />
-		<Route path="/posts" component={Posts} />
-		<Route path="/post/:id" component={Post} />
-		<Route path="/auth/login" component={Login} />
-		<Route path="/auth/logout" component={Logout} />
-		<Route path="/upload" component={Upload} />
-		<Route path="/tags" component={Tags} />
-		<Route path="/tags/:tag" component={Tag} />
-		<Route path="/auth/register" component={Register} />
-		<Route path="/user/profile" component={Profile} />
-	</div>
-</Router>
-
-<style global lang="scss">
-	@import "./main.scss";
-
-	#tags .svelte-tags-input-tag {
-		background: $primary;
-		color: $text-invert;
-	}
-
-	#tags .svelte-tags-input-layout {
-		@extend .input;
-		height: inherit;
-
-		& .svelte-tags-input {
-			margin-top: 0 !important;
-			font-size: 13.3333px;
-		}
-	}
-	#tags .svelte-tags-input-matchs {
-		z-index: 200;
-		&-parent {
-			z-index: 200;
-		}
-		& li:hover {
-			background: $primary;
-		}
-	}
-</style>

web/app/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

web/app/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

web/app/src/app.scss

@@ -1,3 +1,4 @@
+/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
 @import "../node_modules/bulma/sass/utilities/_all";
 @import "../node_modules/bulma/sass/base/_all";
 @import "../node_modules/bulma/sass/elements/_all";
@@ -6,7 +7,6 @@
 @import "../node_modules/bulma/sass/grid/_all";
 @import "../node_modules/bulma/sass/helpers/_all";
 @import "../node_modules/bulma/sass/layout/_all";
-@import "../node_modules/bytemd/dist/index.css";
 
 .tile.is-multiline {
   flex-wrap: wrap;

web/app/src/lib/api.ts

@@ -1,7 +1,8 @@
 import { token } from "./stores.js"
+import { browser } from "$app/environment";
 import axios from "axios";
 
-let url = window.BASE_URL;
+let url = browser && window.location.origin || "";
 let current_token;
 token.subscribe(value => {
     current_token = value;

web/app/src/lib/components/AuthCheck.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { token } from "./stores.js";
-    import { isTokenExpired } from "./login-check.js";
+    import { token } from "$lib/stores";
+    import { isTokenExpired } from "$lib/login-check";
 
     let loggedIn = false;
     token.subscribe((value) => {

web/app/src/lib/components/AuthRequired.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { token } from "./stores.js";
-    import { navigate } from "svelte-routing";
+    import { token } from "$lib/stores";
+    import { goto } from "$app/navigation";
     import { onMount } from "svelte";
-    import { isTokenExpired } from "./login-check.js";
+    import { isTokenExpired } from "$lib/login-check";
 
     let loggedIn = false;
     token.subscribe((value) => {
@@ -11,7 +11,7 @@
 
     onMount(() => {
         if (loggedIn === false) {
-            navigate("/auth/login");
+            goto("/auth/login");
         }
     });
 </script>

web/app/src/lib/components/EditPostPanel.svelte

@@ -1,7 +1,7 @@
 <script>
     import Tags from "svelte-tags-input";
     import { onMount } from "svelte";
-    import { getPost, postUpdate, getTagAutocomplete } from "./api.js";
+    import { getPost, postUpdate, getTagAutocomplete } from "$lib/api";
 
     export let isActive = false;
     export let post;

web/app/src/lib/components/Navbar.svelte

@@ -1,10 +1,9 @@
 <script>
-    import { Link } from "svelte-routing";
-    import { token } from "./stores.js";
-    import { isTokenExpired } from "./login-check.js";
+    import { token } from "$lib/stores";
+    import { isTokenExpired } from "$lib/login-check";
 
     let menu_shown = false;
-
+    
     let loggedIn = false;
     token.subscribe((value) => {
         loggedIn = !isTokenExpired(value);
@@ -17,7 +16,7 @@
 
 <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-        <Link class="navbar-item" to="/">Shioriko</Link>
+        <a class="navbar-item" href="/">Shioriko</a>
 
         <a
             href={"#"}
@@ -35,10 +34,10 @@
 
     <div class="navbar-menu" class:is-active={menu_shown}>
         <div class="navbar-start">
-            <Link class="navbar-item" to="/posts">Posts</Link>
-            <Link class="navbar-item" to="/tags">Tags</Link>
+            <a class="navbar-item" href="/posts">Posts</a>
+            <a class="navbar-item" href="/tags">Tags</a>
             {#if loggedIn}
-                <Link class="navbar-item" to="/upload">Upload</Link>
+                <a class="navbar-item" href="/upload">Upload</a>
             {/if}
         </div>
 
@@ -46,23 +45,23 @@
             {#if loggedIn}
                 <div class="navbar-item">
                     <div class="buttons">
-                        <Link to="/user/profile" class="button is-primary">
+                        <a href="/user/profile" class="button is-primary">
                             Profile
-                        </Link>
-                        <Link to="/auth/logout" class="button is-light">
+                        </a>
+                        <a href="/auth/logout" class="button is-light">
                             Log out
-                        </Link>
+                        </a>
                     </div>
                 </div>
             {:else}
                 <div class="navbar-item">
                     <div class="buttons">
-                        <Link to="/auth/register" class="button is-primary">
+                        <a href="/auth/register" class="button is-primary">
                             <strong>Register</strong>
-                        </Link>
-                        <Link to="/auth/login" class="button is-light">
+                        </a>
+                        <a href="/auth/login" class="button is-light">
                             Log in
-                        </Link>
+                        </a>
                     </div>
                 </div>
             {/if}

web/app/src/lib/components/Post/PostGallery.svelte

@@ -1,6 +1,5 @@
 <script>
     import { onMount } from "svelte";
-    import { Link } from "svelte-routing";
 
     export let posts = [];
 </script>
@@ -12,9 +11,9 @@
                 <div class="card">
                     <div class="card-image">
                         <figure class="image">
-                            <Link to="/post/{post.id}">
+                            <a href="/post/{post.id}">
                                 <img alt={post.id} src={post.thumbnail_path} />
-                            </Link>
+                            </a>
                         </figure>
                     </div>
                 </div>

web/app/src/lib/components/Tag/EditTagPanel.svelte

@@ -1,8 +1,7 @@
 <script>
     import { onMount } from "svelte";
 
-    import { Link, navigate } from "svelte-routing";
-    import { getTagTypes, updateTag } from "../../api";
+    import { getTagTypes, updateTag } from "$lib/api";
 
     export let tag;
     export let data;
@@ -24,8 +23,8 @@
 
     const onFormSubmit = async () => {
         await updateTag(tag, form);
-        
-        navigate("/tags/"+form.name);
+
+        goto("/tags/" + form.name);
 
         toggleRenameMenu();
         onSubmit(form.name);
@@ -81,7 +80,7 @@
                 <strong>Posts:</strong>
             </div>
             <div class="row">
-                {data.postCount} (<Link to="/posts?tags={tag}">Browse</Link>)
+                {data.postCount} (<a href="/posts?tags={tag}">Browse</a>)
             </div>
         </div>
         <div class="panel-block column">

web/app/src/lib/components/Tag/ViewTagPanel.svelte

@@ -1,10 +1,9 @@
 <script>
     import { onMount } from "svelte";
 
-    import { Link } from "svelte-routing";
-    import { getRelatedTags } from "../../api.js";
-    import AuthCheck from "../../AuthCheck.svelte";
-    import TagLinkNumbered from "../../TagLinkNumbered.svelte";
+    import { getRelatedTags } from "$lib/api";
+    import AuthCheck from "$lib/components/AuthCheck.svelte";
+    import TagLinkNumbered from "$lib/components/TagLinkNumbered.svelte";
 
     export let tag;
     export let data;
@@ -40,7 +39,7 @@
             <strong>Posts:</strong>
         </div>
         <div class="row">
-            {data.postCount} (<Link to="/posts?tags={tag}">Browse</Link>)
+            {data.postCount} (<a href="/posts?tags={tag}">Browse</a>)
         </div>
     </div>
     <div class="panel-block column">

web/app/src/lib/components/TagLinkNumbered.svelte

@@ -1,6 +1,4 @@
 <script>
-    import { Link } from "svelte-routing";
-
     export let tag;
     export let num;
 
@@ -9,6 +7,6 @@
     let tagDisplay = tagName.split("_").join(" ");
 </script>
 
-<Link to="/posts?tags={tagName}"
-    >{tagDisplay} <span class="is-pulled-right">{num}</span></Link
+<a href="/posts?tags={tagName}"
+    >{tagDisplay} <span class="is-pulled-right">{num}</span></a
 >

web/app/src/lib/components/TagNotes/EditTagNotesPanel.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from "svelte";
-    import { updateTagNotes } from "../../api";
+    import { updateTagNotes } from "$lib/api";
 
     export let tag;
     export let data;

web/app/src/lib/components/TagNotes/ViewTagNotesPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-    import AuthCheck from "../../AuthCheck.svelte";
+    import AuthCheck from "$lib/components/AuthCheck.svelte";
 
     export let data;
     export let toggleEditMenu;

web/app/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

web/app/src/lib/stores.ts

@@ -0,0 +1,10 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment"
+
+export const token = writable(browser && localStorage.getItem("apiToken") || "");
+
+token.subscribe(value => {
+    if (value != null) {
+        browser && localStorage.setItem("apiToken", value);
+    }
+});

web/app/src/main.js

@@ -1,8 +0,0 @@
-import App from './App.svelte';
-
-const app = new App({
-	target: document.body,
-	hydrate: false,
-});
-
-export default app;

web/app/src/routes/+layout.svelte

@@ -0,0 +1,14 @@
+<script>
+    import "../app.scss";
+    import Navbar from "$lib/components/Navbar.svelte";
+
+    export const ssr = false;
+</script>
+
+<svelte:head>
+    <title>Shioriko</title>
+</svelte:head>
+
+<Navbar />
+
+<slot />

web/app/src/routes/+layout.ts

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

web/app/src/routes/+page.svelte

@@ -1,9 +1,10 @@
-<script>
+<script lang="ts">
   import Tags from "svelte-tags-input";
-  import { getTagAutocomplete } from "../api.js";
-  import { navigate } from "svelte-routing";
+  import { getTagAutocomplete } from "$lib/api";
 
-  let searchTerms = [];
+	import { goto } from '$app/navigation';
+
+  let searchTerms: string[] = [];
 
   const onTagChange = (value) => {
     searchTerms = value.detail.tags;
@@ -16,9 +17,9 @@
 
   const onSearch = (i) => {
     if (searchTerms.length > 0) {
-      navigate(`/posts?tags=${searchTerms.join("+")}`);
+      goto(`/posts?tags=${searchTerms.join("+")}`);
     } else {
-      navigate(`/posts`);
+      goto(`/posts`);
     }
   };
 </script>

web/app/src/routes/Auth/Logout.svelte

@@ -1,10 +0,0 @@
-<script>
-    import { token } from "../../stores.js";
-    import { navigate } from "svelte-routing";
-    import { onMount } from "svelte";
-
-    onMount(() => {
-        token.set("");
-        navigate("/");
-    });
-</script>

web/app/src/routes/auth/login/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { login } from "../../api.js";
-    import { navigate } from "svelte-routing";
+    import { login } from "$lib/api";
+    import { goto } from "$app/navigation";
 
     let username = "";
     let password = "";
@@ -10,7 +10,7 @@
         error = "";
         try {
             const tokenData = await login({ username, password });
-            navigate("/");
+            goto("/");
         } catch (e) {
             error = "We had trouble logging you in";
             return;

web/app/src/routes/auth/logout/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+    import { token } from "$lib/stores";
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        token.set("");
+        goto("/");
+    });
+</script>

web/app/src/routes/auth/register/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { register } from "../../api.js";
-    import { navigate } from "svelte-routing";
+    import { register } from "$lib/api";
+    import { goto } from "$app/navigation";
 
     let username = "";
     let password = "";
@@ -10,7 +10,7 @@
     const doRegister = async () => {
         try {
             const tokenData = await register({ email, username, password });
-            navigate("/");
+            goto("/");
         } catch (error) {
             error = "We had trouble registering you";
         }

web/app/src/routes/post/[id]/+page.svelte

@@ -1,11 +1,14 @@
-<script>
+<script lang="ts">
     import { onMount } from "svelte";
-    import { getPost, postDelete } from "../../api.js";
-    import { navigate } from "svelte-routing";
-    import EditPostPanel from "../../EditPostPanel.svelte";
-    import ViewPostPanel from "../../ViewPostPanel.svelte";
-    export let id;
-    let post;
+    import { getPost, postDelete } from "$lib/api";
+    import { goto } from "$app/navigation";
+    import EditPostPanel from "$lib/components/EditPostPanel.svelte";
+    import ViewPostPanel from "$lib/components/ViewPostPanel.svelte";
+    
+    import { page } from "$app/stores";
+    const { id } = $page.params;
+
+    let post: any;
     const getData = async () => {
         const data = await getPost({ id });
         post = data;
@@ -28,7 +31,7 @@
         toggleDeleteMenu();
         const success = await postDelete({ id });
         if (success) {
-            navigate("/posts");
+            goto("/posts");
         }
     };
     const toggleDeleteMenu = () => {

web/app/src/routes/posts/+page.svelte

@@ -1,13 +1,14 @@
-<script>
-    import { getPostSearchTag, getTag, getTagAutocomplete } from "../../api.js";
-    import { Link, navigate } from "svelte-routing";
-    import TagLinkNumbered from "../../TagLinkNumbered.svelte";
-    import PostGallery from "../../components/Post/PostGallery.svelte";
+<script lang="ts">
+    import { getPostSearchTag, getTag, getTagAutocomplete } from "$lib/api";
+    import TagLinkNumbered from "$lib/components/TagLinkNumbered.svelte";
+    import PostGallery from "$lib/components/Post/PostGallery.svelte";
     import queryString from "query-string";
     import Tags from "svelte-tags-input";
-    import { paginate } from "../../simple-pagination.js";
+    import { paginate } from "$lib/simple-pagination";
+    import { goto } from "$app/navigation";
+    import { page as currentPage } from '$app/stores';
 
-    export let location;
+    const url = $currentPage.url;
 
     let searchTerms = [];
 
@@ -46,7 +47,7 @@
             tagInfo = await getTag({ tag: searchTerms[0] });
         }
     };
-    let queryParams;
+    let tagQuery;
 
     const onTagChange = (value) => {
         searchTerms = value.detail.tags;
@@ -58,9 +59,9 @@
     };
 
     $: {
-        queryParams = queryString.parse(location.search);
-        if (queryParams.tags) {
-            searchTerms = queryParams.tags.split(" ");
+        tagQuery = url.searchParams.get('tags');
+        if (tagQuery) {
+            searchTerms = tagQuery.split(" ");
         } else {
             searchTerms = [];
             tagInfo = null;
@@ -71,9 +72,9 @@
     }
     const onSearch = (i) => {
         if (searchTerms.length > 0) {
-            navigate(`/posts?tags=${searchTerms.join("+")}`);
+            goto(`/posts?tags=${searchTerms.join("+")}`);
         } else {
-            navigate(`/posts`);
+            goto(`/posts`);
         }
     };
 
@@ -124,16 +125,16 @@
                                 {tagInfo.tagName.split("_").join(" ")}
                             </p>
                             {#if tagInfo.tagNote}
-                                <div class="panel-block column ">
+                                <div class="panel-block column">
                                     <div class="content pre-line">
                                         {tagInfo.tagNote}
                                     </div>
                                 </div>
                             {/if}
                             <div class="panel-block column">
-                                <Link
+                                <a
                                     class="button is-primary"
-                                    to="/tags/{tagInfo.tagName}">View Tag</Link
+                                    href="/tags/{tagInfo.tagName}">View Tag</a
                                 >
                             </div>
                         </div>

web/app/src/routes/tags/+page.svelte

@@ -1,6 +1,5 @@
 <script>
-    import { getTags } from "../../api";
-    import { Link } from "svelte-routing";
+    import { getTags } from "$lib/api";
 
     let tags = [];
 
@@ -29,7 +28,7 @@
                 {#each tags as tag}
                     <tr>
                         <td>
-                          <Link to="/tags/{tag.tagName}">{tag.tagName}</Link>
+                          <a href="/tags/{tag.tagName}">{tag.tagName}</a>
                         </td>
                         <td>{tag.tagType}</td>
                         <td>{tag.postCount}</td>

web/app/src/routes/tags/[tag]/+page.svelte

@@ -1,16 +1,17 @@
 <script>
     import { onMount } from "svelte";
 
-    import { getTag, getPostSearchTag } from "../../api";
-    import EditTagNotesPanel from "../../components/TagNotes/EditTagNotesPanel.svelte";
-    import ViewTagNotesPanel from "../../components/TagNotes/ViewTagNotesPanel.svelte";
-    import ViewTagPanel from "../../components/Tag/ViewTagPanel.svelte";
-    import EditTagPanel from "../../components/Tag/EditTagPanel.svelte";
-    import PostGallery from "../../components/Post/PostGallery.svelte";
+    import { getTag, getPostSearchTag } from "$lib/api";
+    import EditTagNotesPanel from "$lib/components/TagNotes/EditTagNotesPanel.svelte";
+    import ViewTagNotesPanel from "$lib/components/TagNotes/ViewTagNotesPanel.svelte";
+    import ViewTagPanel from "$lib/components/Tag/ViewTagPanel.svelte";
+    import EditTagPanel from "$lib/components/Tag/EditTagPanel.svelte";
+    import PostGallery from "$lib/components/Post/PostGallery.svelte";
 
-    import { Link } from "svelte-routing";
 
-    export let tag;
+    import { page } from "$app/stores";
+    let { tag } = $page.params;
+
     let data;
     let posts = [];
 

web/app/src/routes/upload/+page.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { uploadBlob, postCreate, getTagAutocomplete } from "../../api.js";
-    import { navigate, Link } from "svelte-routing";
+    import { uploadBlob, postCreate, getTagAutocomplete } from "$lib/api";
+    import { goto } from "$app/navigation";
     import Tags from "svelte-tags-input";
-    import AuthRequired from "../../AuthRequired.svelte";
+    import AuthRequired from "$lib/components/AuthRequired.svelte";
 
     let currentProgress = 0;
 
@@ -45,7 +45,7 @@
 
     const onSubmit = async () => {
         const response = await postCreate(form);
-        navigate(`/post/${response.id}`);
+        goto(`/post/${response.id}`);
     };
 </script>
 
@@ -84,7 +84,7 @@
                     <p class="help">
                         Similar posts:
                         {#each similar as post, i}
-                            <Link to="/post/{post.id}">{post.id}</Link>
+                            <a href="/post/{post.id}">{post.id}</a>
                             {#if i < similar.length - 1}
                                 ,
                             {/if}
@@ -107,7 +107,12 @@
             <div class="field">
                 <label for="tags" class="label">Tags</label>
                 <div class="control" id="tags">
-                    <Tags addKeys={[9, 32]} on:tags={onTagChange} autoComplete={onAutocomplete} autoCompleteFilter={false}/>
+                    <Tags
+                        addKeys={[9, 32]}
+                        on:tags={onTagChange}
+                        autoComplete={onAutocomplete}
+                        autoCompleteFilter={false}
+                    />
                 </div>
             </div>
             <div class="control">

web/app/src/routes/user/profile/+page.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount } from "svelte";
-    import { getUserProfile } from "../../api.js";
-    import AuthRequired from "../../AuthRequired.svelte";
+    import { getUserProfile } from "$lib/api";
+    import AuthRequired from "$lib/components/AuthRequired.svelte";
 
     let user;
 

web/app/src/stores.js

@@ -1,10 +0,0 @@
-import { writable } from "svelte/store";
-
-const storedToken = localStorage.getItem("apiToken") ?? "";
-
-export const token = writable(storedToken);
-token.subscribe(value => {
-    if (value != null) {
-        localStorage.setItem("apiToken", value);
-    }
-});

web/app/src/variables.scss

@@ -0,0 +1 @@
+/* Variables and mixins declared here will be available in all other SCSS files */

web/app/static/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

web/app/svelte.config.js

@@ -0,0 +1,21 @@
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/kit/vite";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  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({
+      fallback: 'index.html', // may differ from host to host,
+      pages: '../static',
+    })
+  },
+};
+
+export default config;

web/app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

web/app/vite.config.ts

@@ -0,0 +1,14 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [sveltekit()],
+
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@use "src/variables.scss" as *;',
+      },
+    },
+  },
+});