Initial commit

2025-08-02 06:36:04 +00:00 · 2021-11-16 00:44:04 +00:00 · 2021-11-16 00:44:04 +00:00 · 3acb5b4936
commit 3acb5b4936
36 changed files with 3747 additions and 0 deletions
--- a/.cache/replit/nix/env.json
+++ b/.cache/replit/nix/env.json
--- a/.config/configstore/update-notifier-npm.json
+++ b/.config/configstore/update-notifier-npm.json
@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1637023433567
+}
--- a/.eslintrc.cjs
+++ b/.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: 2020,
+	},
+	env: {
+		browser: true,
+		es2020: true,
+		node: true,
+	},
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,7 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"semi": false
+}
--- a/.replit
+++ b/.replit
@ -0,0 +1,29 @@
+run = "yarn; npm run dev:host"
+
+[packager]
+language = "nodejs"
+
+[packager.features]
+packageSearch = true
+guessImports = false
+
+[languages.svelte]
+pattern = "**/*.svelte"
+syntax = "svelte"
+
+[languages.svelte.languageServer]
+command = ["svelteserver", "--stdio"]
+
+[languages.javascript]
+pattern = "**/*.js"
+syntax = "javascript"
+
+[languages.javascript.languageServer]
+start = [ "typescript-language-server", "--stdio" ]
+
+[languages.typescript]
+pattern = "**/*.ts"
+syntax = "typescript"
+
+[languages.typescript.languageServer]
+start = [ "typescript-language-server", "--stdio" ]
--- a/.upm/store.json
+++ b/.upm/store.json
@ -0,0 +1,11 @@
+{
+	"version": 2,
+	"languages": {
+		"nodejs-npm": {
+			"specfileHash": "4abe4fa3c73705f36c46e68b5c07d0e8",
+			"lockfileHash": "be641bc37e9ab0eea21487bbda690fb7",
+			"guessedImports": ["svelte-preprocess", "svelte", "cookie", "@lukeed/uuid"],
+			"guessedImportsHash": "be34b7d9421f66a13a9027f8be8ddeb8"
+		}
+	}
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+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
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
--- a/package.json
+++ b/package.json
@ -0,0 +1,37 @@
+{
+	"name": "matdoesdev",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"dev:host": "svelte-kit dev --host",
+		"build": "svelte-kit build",
+		"preview": "svelte-kit preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "next",
+		"@types/cookie": "^0.4.1",
+		"@typescript-eslint/eslint-plugin": "^4.31.1",
+		"@typescript-eslint/parser": "^4.31.1",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^3.2.1",
+		"prettier": "^2.4.1",
+		"prettier-plugin-svelte": "^2.4.0",
+		"svelte": "^3.34.0",
+		"svelte-check": "^2.2.6",
+		"svelte-preprocess": "^4.9.4",
+		"tslib": "^2.3.1",
+		"typescript": "^4.4.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0",
+		"@lukeed/uuid": "^2.0.0",
+		"@sveltejs/adapter-static": "^1.0.0-next.21",
+		"cookie": "^0.4.1"
+	}
+}
--- a/replit.nix
+++ b/replit.nix
@ -0,0 +1,8 @@
+{ pkgs }: {
+	deps = with pkgs; [
+		nodejs-16_x
+		nodePackages.typescript-language-server
+		nodePackages.svelte-language-server
+		yarn
+	];
+}
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,34 @@
+@import '$lib/atkinson-hyperlegible.css';
+
+:root {
+	--background-color: #000;
+	--background-color-alt: #111;
+	--background-color-alt-2: #222;
+	--background-color-alt-3: #333;
+	--text-color: #f0f0f0;
+
+	--text-font: 'Atkinson Hyperlegible';
+}
+
+html {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+	background-color: var(--background-color);
+	color: var(--text-color);
+	font-family: var(--text-font);
+	width: 100%;
+	height: 100%;
+	margin: 0;
+}
+
+button {
+	background-color: var(--background-color-alt);
+	border: 1px solid var(--background-color-alt-3);
+	color: var(--text-color);
+	font-size: inherit;
+	border-radius: 0.25em;
+	padding: 0.1em 0.5em;
+}
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		%svelte.head%
+	</head>
+	<body>
+		%svelte.body%
+	</body>
+</html>
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />
--- a/src/hooks.ts
+++ b/src/hooks.ts
@ -0,0 +1,26 @@
+import cookie from 'cookie'
+import { v4 as uuid } from '@lukeed/uuid'
+import type { Handle } from '@sveltejs/kit'
+
+export const handle: Handle = async ({ request, resolve }) => {
+	const cookies = cookie.parse(request.headers.cookie || '')
+	request.locals.userid = cookies.userid || uuid()
+
+	// TODO https://github.com/sveltejs/kit/issues/1046
+	if (request.query.has('_method')) {
+		request.method = request.query.get('_method').toUpperCase()
+	}
+
+	const response = await resolve(request)
+
+	if (!cookies.userid) {
+		// if this is the first time the user has visited this app,
+		// set a cookie so that we recognise them when they return
+		response.headers['set-cookie'] = cookie.serialize('userid', request.locals.userid, {
+			path: '/',
+			httpOnly: true,
+		})
+	}
+
+	return response
+}
--- a/src/lib/BlogPost.svelte
+++ b/src/lib/BlogPost.svelte
@ -0,0 +1,6 @@
+<script lang="ts">
+	
+</script>
+
+
+
--- a/src/lib/Counter.svelte
+++ b/src/lib/Counter.svelte
@ -0,0 +1,97 @@
+<script lang="ts">
+	import { spring } from 'svelte/motion'
+
+	let count = 0
+
+	const displayed_count = spring()
+	$: displayed_count.set(count)
+	$: offset = modulo($displayed_count, 1)
+
+	function modulo(n: number, m: number) {
+		// handle negative numbers
+		return ((n % m) + m) % m
+	}
+</script>
+
+<div class="counter">
+	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5" />
+		</svg>
+	</button>
+
+	<div class="counter-viewport">
+		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+			<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+			<strong>{Math.floor($displayed_count)}</strong>
+		</div>
+	</div>
+
+	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
+		</svg>
+	</button>
+</div>
+
+<style>
+	.counter {
+		display: flex;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		margin: 1rem 0;
+	}
+
+	.counter button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		color: var(--text-color);
+		font-size: 2rem;
+	}
+
+	.counter button:hover {
+		background-color: var(--secondary-color);
+	}
+
+	svg {
+		width: 25%;
+		height: 25%;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: var(--text-color);
+	}
+
+	.counter-viewport {
+		width: 8em;
+		height: 4em;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
+
+	.counter-viewport strong {
+		position: absolute;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		font-weight: 400;
+		color: var(--accent-color);
+		font-size: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+</style>
--- a/src/lib/Head.svelte
+++ b/src/lib/Head.svelte
@ -0,0 +1,9 @@
+<script lang="ts">
+	export let title: string = 'matdoesdev'
+	export let description: string = ''
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+</svelte:head>
--- a/src/lib/atkinson-hyperlegible.css
+++ b/src/lib/atkinson-hyperlegible.css
@ -0,0 +1,84 @@
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/src/lib/form.ts
+++ b/src/lib/form.ts
@ -0,0 +1,60 @@
+// this action (https://svelte.dev/tutorial/actions) allows us to
+// progressively enhance a <form> that already works without JS
+export function enhance(
+	form: HTMLFormElement,
+	{
+		pending,
+		error,
+		result,
+	}: {
+		pending?: (data: FormData, form: HTMLFormElement) => void
+		error?: (res: Response, error: Error, form: HTMLFormElement) => void
+		result: (res: Response, form: HTMLFormElement) => void
+	}
+): { destroy: () => void } {
+	let current_token: unknown
+
+	async function handle_submit(e: Event) {
+		const token = (current_token = {})
+
+		e.preventDefault()
+
+		const body = new FormData(form)
+
+		if (pending) pending(body, form)
+
+		try {
+			const res = await fetch(form.action, {
+				method: form.method,
+				headers: {
+					accept: 'application/json',
+				},
+				body,
+			})
+
+			if (token !== current_token) return
+
+			if (res.ok) {
+				result(res, form)
+			} else if (error) {
+				error(res, null, form)
+			} else {
+				console.error(await res.text())
+			}
+		} catch (e) {
+			if (error) {
+				error(null, e, form)
+			} else {
+				throw e
+			}
+		}
+	}
+
+	form.addEventListener('submit', handle_submit)
+
+	return {
+		destroy() {
+			form.removeEventListener('submit', handle_submit)
+		},
+	}
+}
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@ -0,0 +1,7 @@
+/**
+ * Can be made globally available by placing this
+ * inside `global.d.ts` and removing `export` keyword
+ */
+export interface Locals {
+	userid: string
+}
--- a/src/posts/test.svelte
+++ b/src/posts/test.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+
+</script>
+
+<BlogPost>
+here's the content. this post has a lot of words so i can make sure it actually works.
+
+Lorem ea consectetur eu aute amet eu dolor magna nisi sunt. Reprehenderit culpa cupidatat enim sit nostrud cupidatat sunt eu enim cupidatat non qui nostrud do culpa. Commodo velit anim ex enim fugiat voluptate. Exercitation nostrud cillum laborum duis enim commodo irure pariatur irure aute non culpa. Elit veniam aute laborum non magna.
+
+Aute labore cupidatat nostrud dolore nulla incididunt culpa adipisicing occaecat exercitation. Est laborum quis aliqua consequat non mollit pariatur tempor culpa mollit do veniam officia voluptate cillum labore. Labore reprehenderit enim excepteur ad anim voluptate.
+
+Aute mollit pariatur lorem ea dolore fugiat anim excepteur lorem aliquip aliqua quis commodo voluptate dolor nulla. Dolor duis tempor nisi aute qui qui. Eiusmod anim aliqua cupidatat excepteur eu id aliqua lorem eu amet officia consequat proident. Sit aliquip pariatur cillum tempor quis ex lorem exercitation occaecat. Mollit quis ex eiusmod id ad labore velit et lorem lorem ex et excepteur esse ex aliquip laborum amet.
+
+Excepteur adipisicing do ipsum aliqua. Do mollit minim ut lorem aliquip minim amet enim adipisicing ipsum quis. Proident excepteur labore labore nulla exercitation amet est est consequat excepteur sit enim irure pariatur dolore labore minim irure.
+</BlogPost>
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -0,0 +1,36 @@
+<script lang="ts">
+	import '../app.css'
+
+	export const copyrightYear = new Date().getFullYear()
+</script>
+
+<div id="page">
+	<main>
+		<slot />
+	</main>
+
+	<footer>
+		<p>&copy; {copyrightYear} matdoesdev</p>
+	</footer>
+</div>
+
+<style>
+	#page {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: stretch;
+		overflow-x: hidden;
+		overflow-wrap: break-word;
+	}
+
+	main {
+		margin: 1em;
+		flex: 1 0;
+	}
+	footer {
+		text-align: center;
+		flex: 0 0;
+	}
+</style>
--- a/src/routes/blog.svelte
+++ b/src/routes/blog.svelte
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -0,0 +1,72 @@
+<script context="module" lang="ts">
+	export const prerender = true
+</script>
+
+<script lang="ts">
+	import Head from '$lib/Head.svelte'
+</script>
+
+<Head />
+
+<div class="section-container">
+	<section>
+		<h1>matdoesdev</h1>
+
+		<div class="button-row social-media-row">
+			<a href="//github.com/mat-1"><img src="/github.svg" class="icon" /></a>
+			<a href="//twitter.com/mat1"><img src="/twitter.svg" class="icon" /></a>
+		</div>
+		
+		<p>I'm mat, I do full-stack software development.</p>
+		<p>This portfolio contains my blog posts and links to some of the projects I've made.</p>
+		<div class="button-row">
+			<a href="/blog"><button>Blog</button></a>
+			<a href="/projects"><button>Projects</button></a>
+		</div>
+	</section>
+</div>
+
+<style>
+	.section-container {
+		margin: 0 auto;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		height: 100%;
+		width: fit-content;
+	}
+	section {
+		width: fit-content;
+		margin: 0 auto;
+		max-width: 25em;
+	}
+	h1 {
+		text-align: center;
+		margin: 0;
+		font-size: 2rem;
+		font-weight: normal;
+	}
+	h1:first-letter {
+		text-shadow: 0 0 .15em var(--text-color);
+	}
+	p {
+		margin: 0.25em;
+	}
+	.button-row {
+		width: fit-content;
+		margin: .5em auto;
+		display: flex;
+		gap: .5em
+	}
+	.icon {
+		height: 1em;
+		opacity: .5;
+	}
+	.icon:hover {
+		opacity: .9;
+		transition: opacity 500ms
+	}
+	.social-media-row {
+		font-size: 1.25em
+	}
+</style>
--- a/src/routes/projects.svelte
+++ b/src/routes/projects.svelte
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/github.svg
+++ b/static/github.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" fill="#fff" />
+</svg>
--- a/static/robots.txt
+++ b/static/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/static/svelte-welcome.png
+++ b/static/svelte-welcome.png
--- a/static/svelte-welcome.webp
+++ b/static/svelte-welcome.webp
--- a/static/twitter.svg
+++ b/static/twitter.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248 204">
+<g>
+	<path d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z" fill="#fff"/>
+</g>
+</svg>
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,30 @@
+import preprocess from 'svelte-preprocess'
+import staticAdapter from '@sveltejs/adapter-static'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess(),
+
+	kit: {
+		adapter: staticAdapter(),
+		target: 'body',
+
+		vite: {
+			build: {
+				target: 'es2020',
+			},
+			server: process.env.REPL_ID
+				? {
+						hmr: {
+							protocol: 'wss',
+							port: 443,
+						},
+				  }
+				: undefined,
+		},
+	},
+}
+
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,32 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": ["es2020", "DOM", "WebWorker"],
+		"target": "es2020",
+		/**
+			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,
+		"strict": true,
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}
--- a/vercel.json
+++ b/vercel.json
@ -0,0 +1,5 @@
+{
+	"github": {
+		"silent": true
+	}
+}
--- a/yarn-error.log
+++ b/yarn-error.log
--- a/yarn.lock
+++ b/yarn.lock