feat: Migrate Rinze to SvelteKit

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-/node_modules/
-/src/node_modules/@sapper/
-yarn-error.log
-/__sapper__/
+node_modules
+/.svelte
+/build
+/functions

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+.svelte/**
+static/**
+build/**
+node_modules/**

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

package.json

@@ -1,45 +1,34 @@
 {
-  "name": "@damillora/rinze",
-  "description": "nanao.moe website, now in Svelte",
-  "version": "0.1.0",
+  "name": "~TODO~",
+  "version": "0.0.1",
   "scripts": {
-    "dev": "sapper dev",
-    "build": "sapper build --legacy",
-    "export": "sapper export --legacy",
-    "start": "node __sapper__/build"
-  },
-  "dependencies": {
-    "@damillora/shian": "^2.0.0",
-    "compression": "^1.7.1",
-    "dayjs": "^1.10.4",
-    "howler": "^2.2.1",
-    "node-fetch": "^2.6.1",
-    "polka": "^1.0.0-next.14",
-    "sirv": "^1.0.0"
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "lint": "prettier --check . && eslint --ignore-path .gitignore .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "@rollup/plugin-alias": "^3.1.1",
-    "@rollup/plugin-babel": "^5.0.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.2.0",
-    "@rollup/plugin-url": "^5.0.0",
-    "autoprefixer": "^10.2.3",
-    "clipboard": "^2.0.6",
-    "modern-normalize": "^1.0.0",
-    "node-sass": "^5.0.0",
-    "postcss": "^8.2.4",
-    "rollup": "^2.3.4",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "sapper": "^0.28.0",
-    "svelte": "^3.17.3",
-    "svelte-preprocess": "^4.6.3"
+    "@sveltejs/kit": "next",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-svelte3": "^3.2.0",
+    "prettier": "~2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
+    "svelte": "^3.29.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0",
+    "vite": "^2.2.3"
   },
-  "license": "MIT"
+  "type": "module",
+  "dependencies": {
+    "@damillora/shian": "^2.0.1",
+    "@sveltejs/adapter-node": "^1.0.0-next.17",
+    "dayjs": "^1.10.4",
+    "howler": "^2.2.1",
+    "node-sass": "^5.0.0"
+  }
 }

rollup.config.js

@@ -1,139 +0,0 @@
-import path from 'path';
-import resolve from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import commonjs from '@rollup/plugin-commonjs';
-import url from '@rollup/plugin-url';
-import svelte from 'rollup-plugin-svelte';
-import babel from '@rollup/plugin-babel';
-import alias from '@rollup/plugin-alias';
-import { terser } from 'rollup-plugin-terser';
-import config from 'sapper/config/rollup.js';
-import pkg from './package.json';
-import sveltePreprocess from 'svelte-preprocess';
-
-const mode = process.env.NODE_ENV;
-const dev = mode === 'development';
-const legacy = !!process.env.SAPPER_LEGACY_BUILD;
-
-const onwarn = (warning, onwarn) =>
-	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
-	(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
-	onwarn(warning);
-
-const preprocess = sveltePreprocess({
-	scss: {
-		includePaths: ['src'],
-	},
-	postcss: {
-		plugins: [require('autoprefixer')],
-	},
-});
-	  
-export default {
-	client: {
-		input: config.client.input(),
-		output: config.client.output(),
-		plugins: [
-			alias({
-			  resolve: ['.jpg', '.js', '.svelte','.scss'], // optional, by default this will just look for .js files or folders
-			  entries: [
-				{ find: '@', replacement: path.resolve(__dirname, 'src') },
-			  ]
-			}),
-			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			svelte({
-				compilerOptions: {
-					dev,
-					hydratable: true,
-				},
-				preprocess,
-			}),
-			url({
-				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
-				publicPath: '/client/'
-			}),
-			resolve({
-				browser: true,
-				dedupe: ['svelte']
-			}),
-			commonjs(),
-
-			legacy && babel({
-				extensions: ['.js', '.mjs', '.html', '.svelte'],
-				babelHelpers: 'runtime',
-				exclude: ['node_modules/@babel/**'],
-				presets: [
-					['@babel/preset-env', {
-						targets: '> 0.25%, not dead'
-					}]
-				],
-				plugins: [
-					'@babel/plugin-syntax-dynamic-import',
-					['@babel/plugin-transform-runtime', {
-						useESModules: true
-					}]
-				]
-			}),
-
-			!dev && terser({
-				module: true
-			})
-		],
-
-		preserveEntrySignatures: false,
-		onwarn,
-	},
-
-	server: {
-		input: config.server.input(),
-		output: config.server.output(),
-		plugins: [
-			replace({
-				'process.browser': false,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			svelte({
-				compilerOptions: {
-					dev,
-					generate: 'ssr',
-					hydratable: true
-				},
-				emitCss: false,
-				preprocess,
-			}),
-			url({
-				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
-				publicPath: '/client/',
-				emitFiles: false // already emitted by client build
-			}),
-			resolve({
-				dedupe: ['svelte']
-			}),
-			commonjs()
-		],
-		external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
-
-		preserveEntrySignatures: 'strict',
-		onwarn,
-	},
-
-	serviceworker: {
-		input: config.serviceworker.input(),
-		output: config.serviceworker.output(),
-		plugins: [
-			resolve(),
-			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			commonjs(),
-			!dev && terser()
-		],
-
-		preserveEntrySignatures: false,
-		onwarn,
-	}
-};

scripts/setupTypeScript.js

@@ -1,306 +0,0 @@
-/**
- * Run this script to convert the project to TypeScript. This is only guaranteed to work
- * on the unmodified default template; if you have done code changes you are likely need
- * to touch up the generated project manually.
- */
-
-// @ts-check
-const fs = require('fs');
-const path = require('path');
-const { argv } = require('process');
-
-const projectRoot = argv[2] || path.join(__dirname, '..');
-
-const isRollup = fs.existsSync(path.join(projectRoot, "rollup.config.js"));
-
-function warn(message) {
-	console.warn('Warning: ' + message);
-}
-
-function replaceInFile(fileName, replacements) {
-	if (fs.existsSync(fileName)) {
-		let contents = fs.readFileSync(fileName, 'utf8');
-		let hadUpdates = false;
-
-		replacements.forEach(([from, to]) => {
-			const newContents = contents.replace(from, to);
-
-			const isAlreadyApplied = typeof to !== 'string' || contents.includes(to);
-
-			if (newContents !== contents) {
-				contents = newContents;
-				hadUpdates = true;
-			} else if (!isAlreadyApplied) {
-				warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`);
-			}
-		});
-
-		if (hadUpdates) {
-			fs.writeFileSync(fileName, contents);
-		} else {
-			console.log(`${fileName} had already been updated.`);
-		}
-	} else {
-		warn(`Wanted to update ${fileName} but the file did not exist.`);
-	}
-}
-
-function createFile(fileName, contents) {
-	if (fs.existsSync(fileName)) {
-		warn(`Wanted to create ${fileName}, but it already existed. Leaving existing file.`);
-	} else {
-		fs.writeFileSync(fileName, contents);
-	}
-}
-
-function addDepsToPackageJson() {
-	const pkgJSONPath = path.join(projectRoot, 'package.json');
-	const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8'));
-	packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
-		...(isRollup ? { '@rollup/plugin-typescript': '^6.0.0' } : { 'ts-loader': '^8.0.4' }),
-		'@tsconfig/svelte': '^1.0.10',
-		'@types/compression': '^1.7.0',
-		'@types/node': '^14.11.1',
-		'@types/polka': '^0.5.1',
-		'svelte-check': '^1.0.46',
-		'svelte-preprocess': '^4.3.0',
-		tslib: '^2.0.1',
-		typescript: '^4.0.3'
-	});
-
-	// Add script for checking
-	packageJSON.scripts = Object.assign(packageJSON.scripts, {
-		validate: 'svelte-check --ignore src/node_modules/@sapper'
-	});
-
-	// Write the package JSON
-	fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, '  '));
-}
-
-function changeJsExtensionToTs(dir) {
-	const elements = fs.readdirSync(dir, { withFileTypes: true });
-
-	for (let i = 0; i < elements.length; i++) {
-		if (elements[i].isDirectory()) {
-			changeJsExtensionToTs(path.join(dir, elements[i].name));
-		} else if (elements[i].name.match(/^[^_]((?!json).)*js$/)) {
-			fs.renameSync(path.join(dir, elements[i].name), path.join(dir, elements[i].name).replace('.js', '.ts'));
-		}
-	}
-}
-
-function updateSingleSvelteFile({ view, vars, contextModule }) {
-	replaceInFile(path.join(projectRoot, 'src', `${view}.svelte`), [
-		[/(?:<script)(( .*?)*?)>/gm, (m, attrs) => `<script${attrs}${!attrs.includes('lang="ts"') ? ' lang="ts"' : ''}>`],
-		...(vars ? vars.map(({ name, type }) => [`export let ${name};`, `export let ${name}: ${type};`]) : []),
-		...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : [])
-	]);
-}
-
-// Switch the *.svelte file to use TS
-function updateSvelteFiles() {
-	[
-		{
-			view: 'components/Nav',
-			vars: [{ name: 'segment', type: 'string' }]
-		},
-		{
-			view: 'routes/_layout',
-			vars: [{ name: 'segment', type: 'string' }]
-		},
-		{
-			view: 'routes/_error',
-			vars: [
-				{ name: 'status', type: 'number' },
-				{ name: 'error', type: 'Error' }
-			]
-		},
-		{
-			view: 'routes/blog/index',
-			vars: [{ name: 'posts', type: '{ slug: string; title: string, html: any }[]' }],
-			contextModule: [
-				{
-					js: '.then(r => r.json())',
-					ts: '.then((r: { json: () => any; }) => r.json())'
-				},
-				{
-					js: '.then(posts => {',
-					ts: '.then((posts: { slug: string; title: string, html: any }[]) => {'
-				}
-			]
-		},
-		{
-			view: 'routes/blog/[slug]',
-			vars: [{ name: 'post', type: '{ slug: string; title: string, html: any }' }]
-		}
-	].forEach(updateSingleSvelteFile);
-}
-
-function updateRollupConfig() {
-	// Edit rollup config
-	replaceInFile(path.join(projectRoot, 'rollup.config.js'), [
-		// Edit imports
-		[
-			/'rollup-plugin-terser';\n(?!import sveltePreprocess)/,
-			`'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';
-`
-		],
-		// Edit inputs
-		[
-			/(?<!THIS_IS_UNDEFINED[^\n]*\n\s*)onwarn\(warning\);/,
-			`(warning.code === 'THIS_IS_UNDEFINED') ||\n\tonwarn(warning);`
-		],
-		[/input: config.client.input\(\)(?!\.replace)/, `input: config.client.input().replace(/\\.js$/, '.ts')`],
-		[
-			/input: config.server.input\(\)(?!\.replace)/,
-			`input: { server: config.server.input().server.replace(/\\.js$/, ".ts") }`
-		],
-		[
-			/input: config.serviceworker.input\(\)(?!\.replace)/,
-			`input: config.serviceworker.input().replace(/\\.js$/, '.ts')`
-		],
-		// Add preprocess
-		[/compilerOptions/g, 'preprocess: sveltePreprocess(),\n\t\t\t\tcompilerOptions'],
-		// Add TypeScript
-		[/commonjs\(\)(?!,\n\s*typescript)/g, 'commonjs(),\n\t\t\ttypescript({ sourceMap: dev })']
-	]);
-}
-
-function updateWebpackConfig() {
-	// Edit webpack config
-	replaceInFile(path.join(projectRoot, 'webpack.config.js'), [
-		// Edit imports
-		[
-			/require\('webpack-modules'\);\n(?!const sveltePreprocess)/,
-			`require('webpack-modules');\nconst sveltePreprocess = require('svelte-preprocess');\n`
-		],
-		// Edit extensions
-		[
-			/\['\.mjs', '\.js', '\.json', '\.svelte', '\.html'\]/,
-			`['.mjs', '.js', '.ts', '.json', '.svelte', '.html']`
-		],
-		// Edit entries
-		[
-			/entry: config\.client\.entry\(\)/,
-			`entry: { main: config.client.entry().main.replace(/\\.js$/, '.ts') }`
-		],
-		[
-			/entry: config\.server\.entry\(\)/,
-			`entry: { server: config.server.entry().server.replace(/\\.js$/, '.ts') }`
-		],
-		[
-			/entry: config\.serviceworker\.entry\(\)/,
-			`entry: { 'service-worker': config.serviceworker.entry()['service-worker'].replace(/\\.js$/, '.ts') }`
-		],
-		// Add preprocess to the svelte config, this is tricky because there's no easy signifier.
-		// Instead we look for 'hydratable: true,'
-		[
-			/hydratable: true(?!,\n\s*preprocess)/g,
-			'hydratable: true,\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess()'
-		],
-		// Add TypeScript rules for client and server
-		[
-			/module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g,
-			`module: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader'\n\t\t\t\t},\n\t\t\t\t`
-		],
-		// Add TypeScript rules for serviceworker
-		[
-			/output: config\.serviceworker\.output\(\),\n\s*(?!module)/,
-			`output: config.serviceworker.output(),\n\t\tmodule: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader'\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t`
-		],
-		// Edit outputs
-		[
-			/output: config\.serviceworker\.output\(\),\n\s*(?!resolve)/,
-			`output: config.serviceworker.output(),\n\t\tresolve: { extensions: ['.mjs', '.js', '.ts', '.json'] },\n\t\t`
-		]
-	]);
-}
-
-function updateServiceWorker() {
-	replaceInFile(path.join(projectRoot, 'src', 'service-worker.ts'), [
-		[`shell.concat(files);`, `(shell as string[]).concat(files as string[]);`],
-		[`self.skipWaiting();`, `((self as any) as ServiceWorkerGlobalScope).skipWaiting();`],
-		[`self.clients.claim();`, `((self as any) as ServiceWorkerGlobalScope).clients.claim();`],
-		[`fetchAndCache(request)`, `fetchAndCache(request: Request)`],
-		[`self.addEventListener('activate', event =>`, `self.addEventListener('activate', (event: ExtendableEvent) =>`],
-		[`self.addEventListener('install', event =>`, `self.addEventListener('install', (event: ExtendableEvent) =>`],
-		[`addEventListener('fetch', event =>`, `addEventListener('fetch', (event: FetchEvent) =>`],
-	]);
-}
-
-function createTsConfig() {
-	const tsconfig = `{
-		"extends": "@tsconfig/svelte/tsconfig.json",
-		"compilerOptions": {
-			"lib": ["DOM", "ES2017", "WebWorker"]
-		},
-		"include": ["src/**/*", "src/node_modules/**/*"],
-		"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
-	}`;
-
-	createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig);
-}
-
-// Adds the extension recommendation
-function configureVsCode() {
-	const dir = path.join(projectRoot, '.vscode');
-
-	if (!fs.existsSync(dir)) {
-		fs.mkdirSync(dir);
-	}
-
-	createFile(path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}`);
-}
-
-function deleteThisScript() {
-	fs.unlinkSync(path.join(__filename));
-
-	// Check for Mac's DS_store file, and if it's the only one left remove it
-	const remainingFiles = fs.readdirSync(path.join(__dirname));
-	if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
-		fs.unlinkSync(path.join(__dirname, '.DS_store'));
-	}
-
-	// Check if the scripts folder is empty
-	if (fs.readdirSync(path.join(__dirname)).length === 0) {
-		// Remove the scripts folder
-		fs.rmdirSync(path.join(__dirname));
-	}
-}
-
-console.log(`Adding TypeScript with ${isRollup ? "Rollup" : "webpack" }...`);
-
-addDepsToPackageJson();
-
-changeJsExtensionToTs(path.join(projectRoot, 'src'));
-
-updateSvelteFiles();
-
-if (isRollup) {
-	updateRollupConfig();
-} else {
-	updateWebpackConfig();
-}
-
-updateServiceWorker();
-
-createTsConfig();
-
-configureVsCode();
-
-// Delete this script, but not during testing
-if (!argv[2]) {
-	deleteThisScript();
-}
-
-console.log('Converted to TypeScript.');
-
-if (fs.existsSync(path.join(projectRoot, 'node_modules'))) {
-	console.log(`
-Next:
-1. run 'npm install' again to install TypeScript dependencies
-2. run 'npm run build' for the @sapper imports in your project to work
-`);
-}

src/ambient.d.ts

@@ -1,39 +0,0 @@
-/**
- * These declarations tell TypeScript that we allow import of images, e.g.
- * ```
-		<script lang='ts'>
-			import successkid from 'images/successkid.jpg';
-		</script>
-
-		<img src="{successkid}">
-	 ```
- */
-declare module "*.gif" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.jpg" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.jpeg" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.png" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.svg" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.webp" {
-	const value: string;
-	export = value;
-}

src/app.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link
+			rel="prefetch"
+			href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap"
+		/>
+		<link
+			rel="prefetch"
+			href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500&display=swap"
+		/>
+		<link rel="prefetch" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500&display=swap"
+		/>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

src/client.js

@@ -1,5 +0,0 @@
-import * as sapper from '@sapper/app';
-
-sapper.start({
-	target: document.querySelector('#sapper')
-});

src/global.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

src/lib/.gitmodules

@@ -0,0 +1,4 @@
+[submodule "static/images"]
+	path = static/images
+	url = https://git.nanao.moe/Damillora/nanaomoe-images.git
+	branch = main

src/lib/components/GameListItem.svelte

@@ -1,5 +1,5 @@
 <script>
-    import CopyArea from "components/CopyArea.svelte";
+    import CopyArea from "$lib/components/CopyArea.svelte";
 
     export let name, link, gameid, playername;
 </script>

src/lib/components/Header.svelte

@@ -1,8 +1,8 @@
 <script>
     import NavItem from "./NavItem.svelte";
     import NavSeparator from "./NavSeparator.svelte";
-    import DarkModeButton from "components/DarkModeButton.svelte";
-    import { isYurikoBirthday } from "lib/yuriko-birthday.js";
+    import DarkModeButton from "$lib/components/DarkModeButton.svelte";
+    import { isYurikoBirthday } from "$lib/yuriko-birthday.js";
 
     let menu_shown = false;
     let detached = false;

src/lib/components/NavItem.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="menu__item">
-    <a class="menu_link" href={link}>
+    <a class="menu__link" href={link}>
         <i class="menu__icon material-icons md-24">{icon}</i>
         <p class="menu__text">{text}</p>
     </a>

src/lib/components/PageHeader.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { isYurikoBirthday } from "lib/yuriko-birthday.js";
+    import { isYurikoBirthday } from "$lib/yuriko-birthday.js";
 </script>
 
 <div class="page-header">

src/lib/yuriko-birthday.js

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);

src/routes/$error.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+	export function load({ error, status }) {
+		return {
+			props: {
+				status: status,
+				error: error,
+			},
+		};
+	}
+</script>
+
+<script>
+	import PageHeader from '$lib/components/PageHeader.svelte';
+
+	export let status;
+	export let error;
+</script>
+
+<style>
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<div class="page">
+	<PageHeader>
+		<h1 class="page-header__heading">{status}</h1>
+		<p class="page-header__text">{error.message}</p>
+	</PageHeader>
+	<main class="container main">
+		{#if error.stack}
+			<pre>{error.stack}</pre>
+		{/if}
+	</main>
+</div>
+
+
+

src/routes/$layout.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Header from '$lib/components/Header.svelte';
+	import FloatingYuriko from '$lib/components/FloatingYuriko.svelte';
+    import { isYurikoBirthday } from "$lib/yuriko-birthday.js";
+</script>
+
+<style lang="scss" global>
+	@import "@damillora/shian/dist/app.css";
+	@import "../sass/background";
+</style>
+
+<Header></Header>
+<main>
+	<slot></slot>
+</main>
+{#if isYurikoBirthday()}
+<FloatingYuriko></FloatingYuriko>
+{/if}

src/routes/[link].js

@@ -0,0 +1,31 @@
+var linksCache = {}
+
+const shortenerBase = process.env.SHORTENER_BASE || 'https://link.nanao.moe';
+
+export async function get({ params }) {
+        var path = params.link;
+        if (linksCache[path]) {
+                if (linksCache[path] != 'none') {
+                        return {
+                                status: 302,
+                                headers: {
+                                        "Location": linksCache[path]
+                                },
+                        }
+                }
+        }
+        var fetchres = await fetch(shortenerBase + "/" + path, { redirect: "manual" });
+
+        var unshortenedUrl = fetchres.headers.get('Location');
+        if (unshortenedUrl == shortenerBase + "/") {
+                linksCache[path] = "none";
+        } else {
+                return {
+                        status: 302,
+                        headers: {
+                                "Location": unshortenedUrl
+                        },
+                }
+
+        }
+}

src/routes/_error.svelte

@@ -1,28 +0,0 @@
-<script>
-	import PageHeader from 'components/PageHeader.svelte';
-
-	export let status;
-	export let error;
-
-	const dev = process.env.NODE_ENV === 'development';
-</script>
-
-<style>
-</style>
-
-<svelte:head>
-	<title>{status}</title>
-</svelte:head>
-
-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">{status}</h1>
-		<p class="page-header__text">{error.message}</p>
-	</PageHeader>
-	{#if dev && error.stack}
-		<pre>{error.stack}</pre>
-	{/if}
-</div>
-
-
-

src/routes/_layout.svelte

@@ -1,18 +0,0 @@
-<script>
-	import Header from 'components/Header.svelte';
-	import FloatingYuriko from 'components/FloatingYuriko.svelte';
-	import { isYurikoBirthday } from 'lib/yuriko-birthday.js';
-</script>
-
-<style lang="scss" global>
-	@import "~@damillora/shian/dist/app.css";
-	@import "../sass/background";
-</style>
-
-<Header></Header>
-<main>
-	<slot></slot>
-</main>
-{#if isYurikoBirthday()}
-<FloatingYuriko></FloatingYuriko>
-{/if}

src/routes/about.svelte

@@ -1,6 +1,6 @@
 <script>
-	import PageHeader from "components/PageHeader.svelte";
-	import GalleryImage from "components/GalleryImage.svelte";
+	import PageHeader from "$lib/components/PageHeader.svelte";
+	import GalleryImage from "$lib/components/GalleryImage.svelte";
 </script>
 
 <svelte:head>

src/routes/contact.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/aaside.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/arcaea.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/arknights.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/azurlane.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/bandori.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/bluearchive.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/cue.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/fgo.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/genshin.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/honkai.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/index.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
-    import GameListItem from "components/GameListItem.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
+    import GameListItem from "$lib/components/GameListItem.svelte";
 </script>
 
 <svelte:head>

src/routes/games/llsif.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/llsifas.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/maimai.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/mirishita.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/nogikoi.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/poplinks.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/puroseka.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/sdvx.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/shadowverse.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/shinymas.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/starira.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/t7s.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/template.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/games/unison.svelte

@@ -1,5 +1,5 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import PageHeader from "components/PageHeader.svelte";
+	import PageHeader from "$lib/components/PageHeader.svelte";
 </script>
 
 <svelte:head>

src/routes/links.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
-    import MediaItem from "components/MediaItem.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
+    import MediaItem from "$lib/components/MediaItem.svelte";
 </script>
 
 <svelte:head>

src/routes/projects/altessimo.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from 'components/PageHeader.svelte';
-    import GalleryImage from 'components/GalleryImage.svelte';
+    import PageHeader from '$lib/components/PageHeader.svelte';
+    import GalleryImage from '$lib/components/GalleryImage.svelte';
 </script>
 
 <svelte:head>

src/routes/projects/index.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
-    import ProjectItem from "components/ProjectItem.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
+    import ProjectItem from "$lib/components/ProjectItem.svelte";
 </script>
 
 <svelte:head>

src/routes/projects/miracle.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from "components/PageHeader.svelte";
-    import GalleryImage from "components/GalleryImage.svelte";
+    import PageHeader from "$lib/components/PageHeader.svelte";
+    import GalleryImage from "$lib/components/GalleryImage.svelte";
 </script>
 
 <svelte:head>

src/routes/projects/rinze.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from 'components/PageHeader.svelte';
-    import GalleryImage from 'components/GalleryImage.svelte';
+    import PageHeader from '$lib/components/PageHeader.svelte';
+    import GalleryImage from '$lib/components/GalleryImage.svelte';
 </script>
 
 <svelte:head>

src/routes/projects/yuika.svelte

@@ -1,6 +1,6 @@
 <script>
-    import PageHeader from 'components/PageHeader.svelte';
-    import GalleryImage from 'components/GalleryImage.svelte';
+    import PageHeader from '$lib/components/PageHeader.svelte';
+    import GalleryImage from '$lib/components/GalleryImage.svelte';
 </script>
 
 <svelte:head>

src/server.js

@@ -1,47 +0,0 @@
-import sirv from 'sirv';
-import polka from 'polka';
-import fetch from 'node-fetch';
-import compression from 'compression';
-import * as sapper from '@sapper/server';
-
-const { PORT, NODE_ENV } = process.env;
-const dev = NODE_ENV === 'development';
-
-const shortenerBase = process.env.SHORTENER_BASE || 'https://link.nanao.moe';
-
-var linksCache = {}
-
-const links = async function(req, res, next) {
-	if(linksCache[req.path]) {
-		if(linksCache[req.path] == 'none') {
-			next();
-		} else {
-			res.writeHead(301, { Location: linksCache[req.path] });
-			res.end();
-		}
-		return;
-	}
-
-	fetch(shortenerBase+req.path, {
-		redirect: 'manual',
-	}).then(function(fetchres){
-		var unshortenedUrl = fetchres.headers.get('Location');
-		if(unshortenedUrl == shortenerBase+"/") {
-			linksCache[req.path] = "none";
-			next()
-		} else {
-			res.writeHead(301, { Location: unshortenedUrl });
-			res.end();
-		}
-	})
-}
-polka() // You can also use Express
-	.use(
-		compression({ threshold: 0 }),
-		sirv('static', { dev }),
-		links,
-		sapper.middleware()
-	)
-	.listen(PORT, err => {
-		if (err) console.log('error', err);
-	});

src/service-worker.js

@@ -1,10 +1,10 @@
-import { timestamp, files, shell } from '@sapper/service-worker';
+import { timestamp, files, build } from '$service-worker';
 
 const ASSETS = `cache${timestamp}`;
 
-// `shell` is an array of all the files generated by the bundler,
+// `build` is an array of all the files generated by the bundler,
 // `files` is an array of everything in the `static` directory
-const to_cache = shell.concat(files);
+const to_cache = build.concat(files);
 const staticAssets = new Set(to_cache);
 
 self.addEventListener('install', event => {
@@ -70,7 +70,7 @@ self.addEventListener('fetch', event => {
 				// set this variable to true for them and they will only be fetched once.
 				const cachedAsset = isStaticAsset && await caches.match(event.request);
 
-				// for pages, you might want to serve a shell `service-worker-index.html` file,
+				// for pages, you might want to serve a build `service-worker-index.html` file,
 				// which Sapper has generated for you. It's not right for every
 				// app, but if it's right for yours then uncomment this section
 				/*

src/template.html

@@ -1,37 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<meta name="theme-color" content="#333333">
-
-	%sapper.base%
-
-	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
-	<link rel="icon" type="image/png" href="favicon.png">
-	<link rel="prefetch" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap">
-	<link rel="prefetch" href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500&display=swap">
-	<link rel="prefetch" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500&display=swap">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-	<!-- Sapper creates a <script> tag containing `src/client.js`
-	     and anything else it needs to hydrate the app and
-	     initialise the router -->
-	%sapper.scripts%
-
-	<!-- Sapper generates a <style> tag containing critical CSS
-	     for the current page. CSS for the rest of the app is
-	     lazily loaded when it precaches secondary pages -->
-	%sapper.styles%
-
-	<!-- This contains the contents of the <svelte:head> component, if
-	     the current page has one -->
-	%sapper.head%
-</head>
-<body>
-	<!-- The application will be rendered inside this element,
-	     because `src/client.js` references it -->
-	<div id="sapper">%sapper.html%</div>
-</body>
-</html>

svelte.config.cjs

@@ -0,0 +1,15 @@
+const preprocess = require('svelte-preprocess');
+const node = require('@sveltejs/adapter-node');
+
+/** @type {import('@sveltejs/kit').Config} */
+module.exports = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess(),
+
+	kit: {
+		adapter: node(),
+		// hydrate the <div id="svelte"> element in src/app.html
+		target: '#svelte'
+	}
+};

tsconfig.json

@@ -0,0 +1,30 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": ["es2020"],
+		"target": "es2019",
+		/**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+		"importsNotUsedAsValues": "error",
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		/**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+			*/
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}