Initial commit

2022-06-02 14:39:39 +00:00 · 2022-06-02 14:39:39 +00:00 · d663de7ea1
commit d663de7ea1
40 changed files with 38387 additions and 0 deletions
--- a/.eslintignore
+++ b/.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
--- 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,
+		es2017: true,
+		node: true
+	}
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
@ -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
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}
--- a/.storybook/main.cjs
+++ b/.storybook/main.cjs
@ -0,0 +1,23 @@
+module.exports = {
+    // NOTE! added support for Vite builder
+    core: {
+      builder: "storybook-builder-vite"
+    },
+    stories: [
+      "../src/**/*.stories.mdx",
+      "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
+    ],
+    addons: [
+      "@storybook/addon-links",
+      "@storybook/addon-essentials",
+      "@storybook/addon-svelte-csf"
+    ],
+    svelteOptions: {
+      preprocess: require('svelte-preprocess')({
+          typescript: true,
+        postcss: true,
+        sourceMap: true
+      })
+    }
+  }
+  
--- a/.storybook/preview.cjs
+++ b/.storybook/preview.cjs
@ -0,0 +1,9 @@
+export const parameters = {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  }
--- 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
+
+# create a new project in my-app
+npm init svelte my-app
+```
+
+## 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
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,61 @@
+{
+	"name": "sveltekit-tailwind-storybook",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"package": "svelte-kit package",
+		"preview": "svelte-kit preview",
+		"prepare": "svelte-kit sync",
+		"test": "playwright test",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
+		"format": "prettier --write --plugin-search-dir=. .",
+		"tailwind:watch": "cross-env TAILWIND_MODE=watch cross-env NODE_ENV=development  postcss src/styles/tailwind.css -o static/app.css -w",
+		"tailwind:build": "cross-env TAILWIND_MODE=build cross-env NODE_ENV=production  postcss src/styles/tailwind.css -o static/app.css",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook"
+	},
+	"devDependencies": {
+		"@mdx-js/react": "^2.1.1",
+		"@playwright/test": "^1.21.0",
+		"@storybook/addon-actions": "^6.5.6",
+		"@storybook/addon-docs": "^6.5.6",
+		"@storybook/addon-essentials": "^6.5.6",
+		"@storybook/addon-links": "^6.5.6",
+		"@storybook/addon-svelte-csf": "^2.0.4",
+		"@storybook/svelte": "^6.5.6",
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@tailwindcss/typography": "^0.5.2",
+		"@types/cookie": "^0.4.1",
+		"@typescript-eslint/eslint-plugin": "^5.10.1",
+		"@typescript-eslint/parser": "^5.10.1",
+		"autoprefixer": "^10.4.7",
+		"concurrently": "^7.2.1",
+		"cross-env": "^7.0.3",
+		"daisyui": "^2.15.2",
+		"eslint": "^8.12.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.14",
+		"postcss-cli": "^9.1.0",
+		"postcss-import": "^14.1.0",
+		"postcss-nesting": "^10.1.7",
+		"prettier": "^2.5.1",
+		"prettier-plugin-svelte": "^2.5.0",
+		"storybook-builder-vite": "^0.1.23",
+		"svelte": "^3.46.0",
+		"svelte-check": "^2.2.6",
+		"svelte-preprocess": "^4.10.1",
+		"tailwindcss": "^3.0.24",
+		"tslib": "^2.3.1",
+		"typescript": "~4.6.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0",
+		"cookie": "^0.4.1"
+	}
+}
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -0,0 +1,10 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 3000
+	}
+};
+
+export default config;
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,9 @@
+module.exports = {
+    plugins: {
+      'postcss-import': {},
+      'postcss-nesting': {},
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,107 @@
+@import '@fontsource/fira-mono';
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,15 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare namespace App {
+	interface Locals {
+		userid: string;
+	}
+
+	// interface Platform {}
+
+	// interface Session {}
+
+	// interface Stuff {}
+}
--- a/src/app.html
+++ b/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, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/hooks.ts
+++ b/src/hooks.ts
@ -0,0 +1,23 @@
+import type { Handle } from '@sveltejs/kit';
+import * as cookie from 'cookie';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
+	event.locals.userid = cookies['userid'] || crypto.randomUUID();
+
+	const response = await resolve(event);
+
+	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(
+			'set-cookie',
+			cookie.serialize('userid', event.locals.userid, {
+				path: '/',
+				httpOnly: true
+			})
+		);
+	}
+
+	return response;
+};
--- a/src/lib/Counter.svelte
+++ b/src/lib/Counter.svelte
@ -0,0 +1,103 @@
+<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" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+		<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 class="hidden" 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" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+		<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;
+		touch-action: manipulation;
+		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%;
+	}
+
+	.hidden {
+		top: -100%;
+		user-select: none;
+	}
+</style>
--- a/src/lib/button/Button.svelte
+++ b/src/lib/button/Button.svelte
@ -0,0 +1,43 @@
+<script lang="ts">
+    import '../../styles/tailwind.css';
+    import { createEventDispatcher } from 'svelte';
+    /**
+     * Is this the principal call to action on the page?
+     */
+    export let primary = false;
+  
+    /**
+     * What background color to use
+     */
+    export let backgroundColor;
+    /**
+     * How large should the button be?
+     */
+    export let size = 'md';
+    /**
+     * Button contents
+     */
+    export let label = '';
+  
+    let mode = primary ? 'btn-primary' : 'btn-secondary';
+  
+    let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  
+    const dispatch = createEventDispatcher();
+  
+    /**
+     * Optional click handler
+     */
+    function onClick(event: any) {
+      dispatch('click', event);
+    }
+  </script>
+  
+  <button
+    type="button"
+    class={['btn', `btn-${size}`, mode].join(' ')}
+    {style}
+    on:click={onClick}>
+    {label}
+  </button>
+  
--- a/src/lib/form.ts
+++ b/src/lib/form.ts
@ -0,0 +1,84 @@
+import { invalidate } from '$app/navigation';
+
+// 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, form }: { data: FormData; form: HTMLFormElement }) => void;
+		error?: ({
+			data,
+			form,
+			response,
+			error
+		}: {
+			data: FormData;
+			form: HTMLFormElement;
+			response: Response | null;
+			error: Error | null;
+		}) => void;
+		result?: ({
+			data,
+			form,
+			response
+		}: {
+			data: FormData;
+			response: Response;
+			form: HTMLFormElement;
+		}) => void;
+	} = {}
+) {
+	let current_token: unknown;
+
+	async function handle_submit(e: SubmitEvent) {
+		const token = (current_token = {});
+
+		e.preventDefault();
+
+		const data = new FormData(form);
+
+		if (pending) pending({ data, form });
+
+		try {
+			const response = await fetch(form.action, {
+				method: form.method,
+				headers: {
+					accept: 'application/json'
+				},
+				body: data
+			});
+
+			if (token !== current_token) return;
+
+			if (response.ok) {
+				if (result) result({ data, form, response });
+
+				const url = new URL(form.action);
+				url.search = url.hash = '';
+				invalidate(url.href);
+			} else if (error) {
+				error({ data, form, error: null, response });
+			} else {
+				console.error(await response.text());
+			}
+		} catch (e: unknown) {
+			if (error && e instanceof Error) {
+				error({ data, form, error: e, response: null });
+			} else {
+				throw e;
+			}
+		}
+	}
+
+	form.addEventListener('submit', handle_submit);
+
+	return {
+		destroy() {
+			form.removeEventListener('submit', handle_submit);
+		}
+	};
+}
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@ -0,0 +1,124 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import logo from './svelte-logo.svg';
+</script>
+
+<header>
+	<div class="corner">
+		<a href="https://kit.svelte.dev">
+			<img src={logo} alt="SvelteKit" />
+		</a>
+	</div>
+
+	<nav>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
+		</svg>
+		<ul>
+			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
+			<li class:active={$page.url.pathname === '/about'}>
+				<a sveltekit:prefetch href="/about">About</a>
+			</li>
+			<li class:active={$page.url.pathname === '/todos'}>
+				<a sveltekit:prefetch href="/todos">Todos</a>
+			</li>
+		</ul>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
+		</svg>
+	</nav>
+
+	<div class="corner">
+		<!-- TODO put something else here? github link? -->
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
+
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
+
+	path {
+		fill: var(--background);
+	}
+
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li.active::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--accent-color);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 1em;
+		color: var(--heading-color);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--accent-color);
+	}
+</style>
--- a/src/lib/header/svelte-logo.svg
+++ b/src/lib/header/svelte-logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -0,0 +1,45 @@
+<script lang="ts">
+	import Header from '$lib/header/Header.svelte';
+	import '../app.css';
+</script>
+
+<Header />
+
+<main>
+	<slot />
+</main>
+
+<footer>
+	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+</footer>
+
+<style>
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		width: 100%;
+		max-width: 1024px;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 40px;
+	}
+
+	footer a {
+		font-weight: bold;
+	}
+
+	@media (min-width: 480px) {
+		footer {
+			padding: 40px 0;
+		}
+	}
+</style>
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@ -0,0 +1,50 @@
+<script context="module">
+	import { browser, dev } from '$app/env';
+
+	// we don't need any JS on this page, though we'll load
+	// it in dev so that we get hot module replacement...
+	export const hydrate = dev;
+
+	// ...but if the client-side router is already loaded
+	// (i.e. we came here from elsewhere in the app), use it
+	export const router = browser;
+
+	// since there's no dynamic data here, we can prerender
+	// it so that it gets served as a static asset in prod
+	export const prerender = true;
+</script>
+
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="content">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<pre>npm init svelte</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+	<p>
+		The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
+		it with JavaScript disabled!
+	</p>
+</div>
+
+<style>
+	.content {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+	}
+</style>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -0,0 +1,60 @@
+<script context="module" lang="ts">
+	export const prerender = true;
+</script>
+
+<script lang="ts">
+	import Counter from '$lib/Counter.svelte';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+	<h1>
+		<div class="welcome">
+			<picture>
+				<source srcset="svelte-welcome.webp" type="image/webp" />
+				<img src="svelte-welcome.png" alt="Welcome" />
+			</picture>
+		</div>
+
+		to your new<br />SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/index.svelte</strong>
+	</h2>
+
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>
--- a/src/routes/todos/_api.ts
+++ b/src/routes/todos/_api.ts
@ -0,0 +1,22 @@
+/*
+	This module is used by the /todos endpoint to
+	make calls to api.svelte.dev, which stores todos
+	for each user. The leading underscore indicates that this is
+	a private module, _not_ an endpoint — visiting /todos/_api
+	will net you a 404 response.
+
+	(The data on the todo app will expire periodically; no
+	guarantees are made. Don't use it to organise your life.)
+*/
+
+const base = 'https://api.svelte.dev';
+
+export function api(method: string, resource: string, data?: Record<string, unknown>) {
+	return fetch(`${base}/${resource}`, {
+		method,
+		headers: {
+			'content-type': 'application/json'
+		},
+		body: data && JSON.stringify(data)
+	});
+}
--- a/src/routes/todos/index.svelte
+++ b/src/routes/todos/index.svelte
@ -0,0 +1,187 @@
+<script lang="ts">
+	import { enhance } from '$lib/form';
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	type Todo = {
+		uid: string;
+		created_at: Date;
+		text: string;
+		done: boolean;
+		pending_delete: boolean;
+	};
+
+	export let todos: Todo[];
+</script>
+
+<svelte:head>
+	<title>Todos</title>
+	<meta name="description" content="A todo list app" />
+</svelte:head>
+
+<div class="todos">
+	<h1>Todos</h1>
+
+	<form
+		class="new"
+		action="/todos"
+		method="post"
+		use:enhance={{
+			result: async ({ form }) => {
+				form.reset();
+			}
+		}}
+	>
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
+	</form>
+
+	{#each todos as todo (todo.uid)}
+		<div
+			class="todo"
+			class:done={todo.done}
+			transition:scale|local={{ start: 0.7 }}
+			animate:flip={{ duration: 200 }}
+		>
+			<form
+				action="/todos?_method=PATCH"
+				method="post"
+				use:enhance={{
+					pending: ({ data }) => {
+						todo.done = !!data.get('done');
+					}
+				}}
+			>
+				<input type="hidden" name="uid" value={todo.uid} />
+				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
+				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
+			</form>
+
+			<form class="text" action="/todos?_method=PATCH" method="post" use:enhance>
+				<input type="hidden" name="uid" value={todo.uid} />
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
+				<button class="save" aria-label="Save todo" />
+			</form>
+
+			<form
+				action="/todos?_method=DELETE"
+				method="post"
+				use:enhance={{
+					pending: () => (todo.pending_delete = true)
+				}}
+			>
+				<input type="hidden" name="uid" value={todo.uid} />
+				<button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
+			</form>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.todos {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+		line-height: 1;
+	}
+
+	.new {
+		margin: 0 0 0.5rem 0;
+	}
+
+	input {
+		border: 1px solid transparent;
+	}
+
+	input:focus-visible {
+		box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
+		border: 1px solid #ff3e00 !important;
+		outline: none;
+	}
+
+	.new input {
+		font-size: 28px;
+		width: 100%;
+		padding: 0.5em 1em 0.3em 1em;
+		box-sizing: border-box;
+		background: rgba(255, 255, 255, 0.05);
+		border-radius: 8px;
+		text-align: center;
+	}
+
+	.todo {
+		display: grid;
+		grid-template-columns: 2rem 1fr 2rem;
+		grid-gap: 0.5rem;
+		align-items: center;
+		margin: 0 0 0.5rem 0;
+		padding: 0.5rem;
+		background-color: white;
+		border-radius: 8px;
+		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
+		transform: translate(-1px, -1px);
+		transition: filter 0.2s, transform 0.2s;
+	}
+
+	.done {
+		transform: none;
+		opacity: 0.4;
+		filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
+	}
+
+	form.text {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.todo input {
+		flex: 1;
+		padding: 0.5em 2em 0.5em 0.8em;
+		border-radius: 3px;
+	}
+
+	.todo button {
+		width: 2em;
+		height: 2em;
+		border: none;
+		background-color: transparent;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+	}
+
+	button.toggle {
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		box-sizing: border-box;
+		background-size: 1em auto;
+	}
+
+	.done .toggle {
+		background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+	}
+
+	.delete {
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+		opacity: 0.2;
+	}
+
+	.delete:hover,
+	.delete:focus {
+		transition: opacity 0.2s;
+		opacity: 1;
+	}
+
+	.save {
+		position: absolute;
+		right: 0;
+		opacity: 0;
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+	}
+
+	.todo input:focus + .save,
+	.save:focus {
+		transition: opacity 0.2s;
+		opacity: 1;
+	}
+</style>
--- a/src/routes/todos/index.ts
+++ b/src/routes/todos/index.ts
@ -0,0 +1,67 @@
+import { api } from './_api';
+import type { RequestHandler } from './__types';
+
+export const get: RequestHandler = async ({ locals }) => {
+	// locals.userid comes from src/hooks.js
+	const response = await api('get', `todos/${locals.userid}`);
+
+	if (response.status === 404) {
+		// user hasn't created a todo list.
+		// start with an empty array
+		return {
+			body: {
+				todos: []
+			}
+		};
+	}
+
+	if (response.status === 200) {
+		return {
+			body: {
+				todos: await response.json()
+			}
+		};
+	}
+
+	return {
+		status: response.status
+	};
+};
+
+export const post: RequestHandler = async ({ request, locals }) => {
+	const form = await request.formData();
+
+	await api('post', `todos/${locals.userid}`, {
+		text: form.get('text')
+	});
+
+	return {};
+};
+
+// If the user has JavaScript disabled, the URL will change to
+// include the method override unless we redirect back to /todos
+const redirect = {
+	status: 303,
+	headers: {
+		location: '/todos'
+	}
+};
+
+export const patch: RequestHandler = async ({ request, locals }) => {
+	const form = await request.formData();
+
+	await api('patch', `todos/${locals.userid}/${form.get('uid')}`, {
+		text: form.has('text') ? form.get('text') : undefined,
+		done: form.has('done') ? !!form.get('done') : undefined
+	});
+
+	return redirect;
+};
+
+export const del: RequestHandler = async ({ request, locals }) => {
+	const form = await request.formData();
+
+	await api('delete', `todos/${locals.userid}/${form.get('uid')}`);
+
+	return redirect;
+};
--- a/src/stories/Button.stories.svelte
+++ b/src/stories/Button.stories.svelte
@ -0,0 +1,53 @@
+<script>
+    import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+    import Button from "../lib/button/Button.svelte";
+  </script>
+  
+  <Meta
+    title="Example/Button"
+    component={Button}
+    argTypes={{
+      label: { control: "text" },
+      primary: { control: "boolean" },
+      backgroundColor: { control: "color" },
+      size: {
+        control: { type: "select", options: ['xs', "sm", "md", "lg"] },
+      },
+      onClick: { action: "onClick" },
+    }}
+  />
+  
+  <Template let:args>
+    <Button {...args} on:click={args.onClick} />
+  </Template>
+  
+  <Story
+    name="Primary"
+    args={{
+      primary: true,
+      label: "Button",
+    }}
+  />
+  
+  <Story
+    name="Secondary"
+    args={{
+      label: "Button",
+    }}
+  />
+  <Story
+    name="Large"
+    args={{
+      size: "lg",
+      label: "Button",
+    }}
+  />
+  
+  <Story
+    name="Small"
+    args={{
+      size: "sm",
+      label: "Button",
+    }}
+  />
+  
--- a/src/stories/counter.stories.svelte
+++ b/src/stories/counter.stories.svelte
@ -0,0 +1,21 @@
+<script>
+    import '../styles/tailwind.css';
+    import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+    import Counter from '../lib/Counter.svelte'
+</script>
+
+<Meta
+  title="Example/Counter"
+  component={Counter}
+  argTypes={{
+    //onClick: { action: "onClick" },
+  }}
+/>
+
+<Template>
+    <Counter />
+</Template>
+
+<Story
+  name="Primary"
+/>
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@ -0,0 +1,18 @@
+/* Injects Tailwind's base styles & any base styles registered by plugins. */
+@tailwind base;
+
+@layer base { /* custom CSS goes here */ }
+
+/* Injects Tailwind's component classes & any component classes registered by plugins. */
+@tailwind components;
+
+@layer components { /* custom CSS goes here */ }
+
+/* Injects Tailwind's utility classes & any utility classes registered by plugins. */
+@tailwind utilities;
+
+@layer utilities { /* custom CSS goes here */ }
+
+/* Directive controlling where Tailwind injects responsive variations of utilities.
+   By default Tailwind normally append these at the end of your stylesheet. */
+@tailwind screens;
--- a/static/favicon.png
+++ b/static/favicon.png
--- 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/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,20 @@
+import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess({ typescript: true }),
+
+	kit: {
+		adapter: adapter(),
+
+		// Override http methods in the Todo forms
+		methodOverride: {
+			allowed: ['PATCH', 'DELETE']
+		}
+	}
+};
+
+export default config;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -0,0 +1,30 @@
+module.exports = {
+    content: ['./src/**/*.{html,js,svelte,ts}'],
+    theme: {
+      colors: {
+        'blue': '#1fb6ff',
+        'purple': '#7e5bef',
+        'pink': '#ff49db',
+        'orange': '#ff7849',
+        'green': '#13ce66',
+        'yellow': '#ffc82c',
+        'gray-dark': '#273444',
+        'gray': '#8492a6',
+        'gray-light': '#d3dce6',
+      },
+      fontFamily: {
+        sans: ['Graphik', 'sans-serif'],
+        serif: ['Merriweather', 'serif'],
+      },
+      extend: {
+        spacing: {
+          '8xl': '96rem',
+          '9xl': '128rem',
+        },
+        borderRadius: {
+          '4xl': '2rem',
+        }
+      }
+    },
+    plugins: [require("daisyui")],
+  }
--- a/tests/test.ts
+++ b/tests/test.ts
@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('about page has expected h1', async ({ page }) => {
+	await page.goto('/about');
+	expect(await page.textContent('h1')).toBe('About this app');
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>