split todo backend and frontend

2021-09-22 19:08:53 -04:00 · 2021-09-22 19:08:53 -04:00 · c8291e66ac
commit c8291e66ac
111 changed files with 27132 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,138 @@
+# ---> Node
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+/public/build/
+
+.DS_Store
+
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+.vscode/
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+static/
+
+.idea
+
+elm-stuff/
+
+yarn.lock
+pnpm-lock.yaml
+backend/config.json
+
+*.pem
+.env
+test_coverage/
+target/
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+ANTI-CAPITALIST SOFTWARE LICENSE (v 1.4)
+
+Copyright © 2021 Jane Petrovna (jane@j4.pm)
+
+This is anti-capitalist software, released for free use by individuals and organizations that do not operate by capitalist principles.
+
+Permission is hereby granted, free of charge, to any person or organization (the "User") obtaining a copy of this software and associated documentation files (the "Software"), to use, copy, modify, merge, distribute, and/or sell copies of the Software, subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in all copies or modified versions of the Software.
+
+2. The User is one of the following:
+a. An individual person, laboring for themselves
+b. A non-profit organization
+c. An educational institution
+d. An organization that seeks shared profit for all of its members, and allows non-members to set the cost of their labor
+
+3. If the User is an organization with owners, then all owners are workers and all workers are owners with equal equity and/or equal vote.
+
+4. If the User is an organization, then the User is not law enforcement or military, or working for or under either.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT EXPRESS OR IMPLIED WARRANTY OF ANY KIND, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- 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/sapper/build/build.json
+++ b/sapper/build/build.json
@ -0,0 +1,36 @@
+{
+  "bundler": "rollup",
+  "shimport": "2.0.4",
+  "assets": {
+    "main": "client.5cc55ff9.js"
+  },
+  "css": {
+    "main": [
+      "client-e118e612.css"
+    ]
+  },
+  "dependencies": {
+    "index.svelte": [
+      "index.8bfcf5b6.js",
+      "inject_styles.5607aec6.js",
+      "index-39716d32.css"
+    ],
+    "about.svelte": [
+      "about.73514586.js",
+      "inject_styles.5607aec6.js"
+    ],
+    "blog/index.svelte": [
+      "index.4fac54ba.js",
+      "inject_styles.5607aec6.js",
+      "index-7ed37c94.css"
+    ],
+    "blog/[slug].svelte": [
+      "[slug].efe166d1.js",
+      "inject_styles.5607aec6.js",
+      "[slug]-5bc8f95f.css"
+    ]
+  },
+  "legacy_assets": {
+    "main": "client.0725e74f.js"
+  }
+}
--- a/sapper/build/client/465898c830bb9d2c.jpg
+++ b/sapper/build/client/465898c830bb9d2c.jpg
--- a/sapper/build/client/[slug]-5bc8f95f.css
+++ b/sapper/build/client/[slug]-5bc8f95f.css
@ -0,0 +1 @@
+.content.svelte-emm3f3 h2{font-size:1.4em;font-weight:500}.content.svelte-emm3f3 pre{background-color:#f9f9f9;box-shadow:inset 1px 1px 5px rgba(0, 0, 0, 0.05);padding:0.5em;border-radius:2px;overflow-x:auto}.content.svelte-emm3f3 pre code{background-color:transparent;padding:0}.content.svelte-emm3f3 ul{line-height:1.5}.content.svelte-emm3f3 li{margin:0 0 0.5em 0}
--- a/sapper/build/client/[slug].efe166d1.js
+++ b/sapper/build/client/[slug].efe166d1.js
@ -0,0 +1 @@
+import{S as t,i as s,s as a,a as e,e as n,t as o,q as i,d as c,c as l,b as r,f as h,g as u,h as f,k as m,l as d,m as p,n as v}from"./client.5cc55ff9.js";function g(t){let s,a,g,j,E,H,$=t[0].title+"",b=t[0].html+"";return document.title=s=t[0].title,{c(){a=e(),g=n("h1"),j=o($),E=e(),H=n("div"),this.h()},l(t){i('[data-svelte="svelte-1uty71u"]',document.head).forEach(c),a=l(t),g=r(t,"H1",{});var s=h(g);j=u(s,$),s.forEach(c),E=l(t),H=r(t,"DIV",{class:!0}),h(H).forEach(c),this.h()},h(){f(H,"class","content svelte-emm3f3")},m(t,s){m(t,a,s),m(t,g,s),d(g,j),m(t,E,s),m(t,H,s),H.innerHTML=b},p(t,[a]){1&a&&s!==(s=t[0].title)&&(document.title=s),1&a&&$!==($=t[0].title+"")&&p(j,$),1&a&&b!==(b=t[0].html+"")&&(H.innerHTML=b)},i:v,o:v,d(t){t&&c(a),t&&c(g),t&&c(E),t&&c(H)}}}async function j({params:t}){const s=await this.fetch(`blog/${t.slug}.json`),a=await s.json();if(200===s.status)return{post:a};this.error(s.status,a.message)}function E(t,s,a){let{post:e}=s;return t.$$set=t=>{"post"in t&&a(0,e=t.post)},[e]}class H extends t{constructor(t){super(),s(this,t,E,g,a,{post:0})}}export{H as default,j as preload};
--- a/sapper/build/client/about.73514586.js
+++ b/sapper/build/client/about.73514586.js
@ -0,0 +1 @@
+import{S as s,i as t,s as e,a,e as h,t as o,q as i,d as r,c,b as u,f as n,g as l,k as f,l as d,n as m}from"./client.5cc55ff9.js";function p(s){let t,e,p,b,v,T;return{c(){t=a(),e=h("h1"),p=o("About this site"),b=a(),v=h("p"),T=o("This is the 'about' page. There's not much here."),this.h()},l(s){i('[data-svelte="svelte-1ine71f"]',document.head).forEach(r),t=c(s),e=u(s,"H1",{});var a=n(e);p=l(a,"About this site"),a.forEach(r),b=c(s),v=u(s,"P",{});var h=n(v);T=l(h,"This is the 'about' page. There's not much here."),h.forEach(r),this.h()},h(){document.title="About"},m(s,a){f(s,t,a),f(s,e,a),d(e,p),f(s,b,a),f(s,v,a),d(v,T)},p:m,i:m,o:m,d(s){s&&r(t),s&&r(e),s&&r(b),s&&r(v)}}}class b extends s{constructor(s){super(),t(this,s,null,p,e,{})}}export{b as default};
--- a/sapper/build/client/client-e118e612.css
+++ b/sapper/build/client/client-e118e612.css
@ -0,0 +1,3 @@
+nav.svelte-1dbd5up{border-bottom:1px solid rgba(255,62,0,0.1);font-weight:300;padding:0 1em}ul.svelte-1dbd5up{margin:0;padding:0}ul.svelte-1dbd5up::after{content:'';display:block;clear:both}li.svelte-1dbd5up{display:block;float:left}[aria-current].svelte-1dbd5up{position:relative;display:inline-block}[aria-current].svelte-1dbd5up::after{position:absolute;content:'';width:calc(100% - 1em);height:2px;background-color:rgb(255,62,0);display:block;bottom:-1px}a.svelte-1dbd5up{text-decoration:none;padding:1em 0.5em;display:block}
+main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:white;padding:2em;margin:0 auto;box-sizing:border-box}
+h1.svelte-8od9u6,p.svelte-8od9u6{margin:0 auto}h1.svelte-8od9u6{font-size:2.8em;font-weight:700;margin:0 0 0.5em 0}p.svelte-8od9u6{margin:1em auto}@media(min-width: 480px){h1.svelte-8od9u6{font-size:4em}}
--- a/sapper/build/client/client.5cc55ff9.js
+++ b/sapper/build/client/client.5cc55ff9.js
--- a/sapper/build/client/index-39716d32.css
+++ b/sapper/build/client/index-39716d32.css
@ -0,0 +1 @@
+h1.svelte-1kk9opm,figure.svelte-1kk9opm,p.svelte-1kk9opm{text-align:center;margin:0 auto}h1.svelte-1kk9opm{font-size:2.8em;text-transform:uppercase;font-weight:700;margin:0 0 0.5em 0}figure.svelte-1kk9opm{margin:0 0 1em 0}img.svelte-1kk9opm{width:100%;max-width:400px;margin:0 0 1em 0}p.svelte-1kk9opm{margin:1em auto}@media(min-width: 480px){h1.svelte-1kk9opm{font-size:4em}}
--- a/sapper/build/client/index-7ed37c94.css
+++ b/sapper/build/client/index-7ed37c94.css
@ -0,0 +1 @@
+ul.svelte-1frg2tf{margin:0 0 1em 0;line-height:1.5}
--- a/sapper/build/client/index.4fac54ba.js
+++ b/sapper/build/client/index.4fac54ba.js
@ -0,0 +1 @@
+import{S as t,i as s,s as e,e as l,t as n,b as o,f as r,g as a,d as h,h as c,k as f,l as i,m as u,a as g,q as p,c as d,n as m,o as v}from"./client.5cc55ff9.js";function E(t,s,e){const l=t.slice();return l[1]=s[e],l}function b(t){let s,e,g,p,d=t[1].title+"";return{c(){s=l("li"),e=l("a"),g=n(d),this.h()},l(t){s=o(t,"LI",{});var l=r(s);e=o(l,"A",{rel:!0,href:!0});var n=r(e);g=a(n,d),n.forEach(h),l.forEach(h),this.h()},h(){c(e,"rel","prefetch"),c(e,"href",p="blog/"+t[1].slug)},m(t,l){f(t,s,l),i(s,e),i(e,g)},p(t,s){1&s&&d!==(d=t[1].title+"")&&u(g,d),1&s&&p!==(p="blog/"+t[1].slug)&&c(e,"href",p)},d(t){t&&h(s)}}}function j(t){let s,e,u,j,x,L=t[0],R=[];for(let s=0;s<L.length;s+=1)R[s]=b(E(t,L,s));return{c(){s=g(),e=l("h1"),u=n("Recent posts"),j=g(),x=l("ul");for(let t=0;t<R.length;t+=1)R[t].c();this.h()},l(t){p('[data-svelte="svelte-hfp9t8"]',document.head).forEach(h),s=d(t),e=o(t,"H1",{});var l=r(e);u=a(l,"Recent posts"),l.forEach(h),j=d(t),x=o(t,"UL",{class:!0});var n=r(x);for(let t=0;t<R.length;t+=1)R[t].l(n);n.forEach(h),this.h()},h(){document.title="Blog",c(x,"class","svelte-1frg2tf")},m(t,l){f(t,s,l),f(t,e,l),i(e,u),f(t,j,l),f(t,x,l);for(let t=0;t<R.length;t+=1)R[t].m(x,null)},p(t,[s]){if(1&s){let e;for(L=t[0],e=0;e<L.length;e+=1){const l=E(t,L,e);R[e]?R[e].p(l,s):(R[e]=b(l),R[e].c(),R[e].m(x,null))}for(;e<R.length;e+=1)R[e].d(1);R.length=L.length}},i:m,o:m,d(t){t&&h(s),t&&h(e),t&&h(j),t&&h(x),v(R,t)}}}function x(){return this.fetch("blog.json").then((t=>t.json())).then((t=>({posts:t})))}function L(t,s,e){let{posts:l}=s;return t.$$set=t=>{"posts"in t&&e(0,l=t.posts)},[l]}class R extends t{constructor(t){super(),s(this,t,L,j,e,{posts:0})}}export{R as default,x as preload};
--- a/sapper/build/client/index.8bfcf5b6.js
+++ b/sapper/build/client/index.8bfcf5b6.js
@ -0,0 +1 @@
+import{S as s,i as e,s as a,a as t,e as c,t as r,q as l,d as i,c as o,b as n,f as h,g as p,h as f,j as d,k as v,l as u,n as g}from"./client.5cc55ff9.js";function m(s){let e,a,m,k,E,G,S,b,j,x,I,T,y,H;return{c(){e=t(),a=c("h1"),m=r("Great success!"),k=t(),E=c("figure"),G=c("img"),b=t(),j=c("figcaption"),x=r("Have fun with Sapper!"),I=t(),T=c("p"),y=c("strong"),H=r("Try editing this file (src/routes/index.svelte) to test live reloading."),this.h()},l(s){l('[data-svelte="svelte-oh6yg0"]',document.head).forEach(i),e=o(s),a=n(s,"H1",{class:!0});var t=h(a);m=p(t,"Great success!"),t.forEach(i),k=o(s),E=n(s,"FIGURE",{class:!0});var c=h(E);G=n(c,"IMG",{alt:!0,src:!0,class:!0}),b=o(c),j=n(c,"FIGCAPTION",{});var r=h(j);x=p(r,"Have fun with Sapper!"),r.forEach(i),c.forEach(i),I=o(s),T=n(s,"P",{class:!0});var f=h(T);y=n(f,"STRONG",{});var d=h(y);H=p(d,"Try editing this file (src/routes/index.svelte) to test live reloading."),d.forEach(i),f.forEach(i),this.h()},h(){document.title="Sapper project template",f(a,"class","svelte-1kk9opm"),f(G,"alt","Success Kid"),d(G.src,S="/client/465898c830bb9d2c.jpg")||f(G,"src","/client/465898c830bb9d2c.jpg"),f(G,"class","svelte-1kk9opm"),f(E,"class","svelte-1kk9opm"),f(T,"class","svelte-1kk9opm")},m(s,t){v(s,e,t),v(s,a,t),u(a,m),v(s,k,t),v(s,E,t),u(E,G),u(E,b),u(E,j),u(j,x),v(s,I,t),v(s,T,t),u(T,y),u(y,H)},p:g,i:g,o:g,d(s){s&&i(e),s&&i(a),s&&i(k),s&&i(E),s&&i(I),s&&i(T)}}}class k extends s{constructor(s){super(),e(this,s,null,m,a,{})}}export{k as default};
--- a/sapper/build/client/inject_styles.5607aec6.js
+++ b/sapper/build/client/inject_styles.5607aec6.js
@ -0,0 +1 @@
+function e(e){return Promise.all(e.map((function(e){return new Promise((function(t,n){var r=new URL(e,import.meta.url),l=document.baseURI;if(!l){var o=document.getElementsByTagName("base");l=o.length?o[0].href:document.URL}var u=(""+r).substring(l.length),a=document.querySelector('link[rel=stylesheet][href="'+u+'"]')||document.querySelector('link[rel=stylesheet][href="'+r+'"]');a||((a=document.createElement("link")).rel="stylesheet",a.href=r,document.head.appendChild(a)),a.sheet?t():(a.onload=function(){return t()},a.onerror=n)}))})))}export{e as default};
--- a/sapper/build/client/legacy/465898c830bb9d2c.jpg
+++ b/sapper/build/client/legacy/465898c830bb9d2c.jpg
--- a/sapper/build/client/legacy/[slug]-5bc8f95f.css
+++ b/sapper/build/client/legacy/[slug]-5bc8f95f.css
@ -0,0 +1 @@
+.content.svelte-emm3f3 h2{font-size:1.4em;font-weight:500}.content.svelte-emm3f3 pre{background-color:#f9f9f9;box-shadow:inset 1px 1px 5px rgba(0, 0, 0, 0.05);padding:0.5em;border-radius:2px;overflow-x:auto}.content.svelte-emm3f3 pre code{background-color:transparent;padding:0}.content.svelte-emm3f3 ul{line-height:1.5}.content.svelte-emm3f3 li{margin:0 0 0.5em 0}
--- a/sapper/build/client/legacy/[slug].4dd0451b.js
+++ b/sapper/build/client/legacy/[slug].4dd0451b.js
@ -0,0 +1 @@
+import{x as t,_ as n,a as e,b as r,c as s,i as a,d as o,S as c,s as u,e as i,f,t as l,q as h,g as p,h as v,j as m,k as d,l as y,m as x,o as R,p as b,v as g,u as j,r as w}from"./client.0725e74f.js";function k(t,n,e,r,s,a,o){try{var c=t[a](o),u=c.value}catch(t){return void e(t)}c.done?n(u):Promise.resolve(u).then(r,s)}function E(t){return function(){var n=this,e=arguments;return new Promise((function(r,s){var a=t.apply(n,e);function o(t){k(a,r,s,o,c,"next",t)}function c(t){k(a,r,s,o,c,"throw",t)}o(void 0)}))}}function H(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var s,a=e(t);if(n){var o=e(this).constructor;s=Reflect.construct(a,arguments,o)}else s=a.apply(this,arguments);return r(this,s)}}function P(t){var n,e,r,s,a,o,c=t[0].title+"",u=t[0].html+"";return document.title=n=t[0].title,{c:function(){e=i(),r=f("h1"),s=l(c),a=i(),o=f("div"),this.h()},l:function(t){h('[data-svelte="svelte-1uty71u"]',document.head).forEach(p),e=v(t),r=m(t,"H1",{});var n=d(r);s=y(n,c),n.forEach(p),a=v(t),o=m(t,"DIV",{class:!0}),d(o).forEach(p),this.h()},h:function(){x(o,"class","content svelte-emm3f3")},m:function(t,n){R(t,e,n),R(t,r,n),b(r,s),R(t,a,n),R(t,o,n),o.innerHTML=u},p:function(t,e){var r=g(e,1)[0];1&r&&n!==(n=t[0].title)&&(document.title=n),1&r&&c!==(c=t[0].title+"")&&j(s,c),1&r&&u!==(u=t[0].html+"")&&(o.innerHTML=u)},i:w,o:w,d:function(t){t&&p(e),t&&p(r),t&&p(a),t&&p(o)}}}function B(t){return L.apply(this,arguments)}function L(){return(L=E(t.mark((function n(e){var r,s,a;return t.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=e.params,t.next=3,this.fetch("blog/".concat(r.slug,".json"));case 3:return s=t.sent,t.next=6,s.json();case 6:if(a=t.sent,200!==s.status){t.next=11;break}return t.abrupt("return",{post:a});case 11:this.error(s.status,a.message);case 12:case"end":return t.stop()}}),n,this)})))).apply(this,arguments)}function M(t,n,e){var r=n.post;return t.$$set=function(t){"post"in t&&e(0,r=t.post)},[r]}var T=function(t){n(r,c);var e=H(r);function r(t){var n;return s(this,r),n=e.call(this),a(o(n),t,M,P,u,{post:0}),n}return r}();export{T as default,B as preload};
--- a/sapper/build/client/legacy/about.7de0907c.js
+++ b/sapper/build/client/legacy/about.7de0907c.js
@ -0,0 +1 @@
+import{_ as t,a as e,b as n,c as a,i as r,d as s,S as o,s as c,e as u,f as i,t as f,q as h,g as l,h as p,j as v,k as d,l as m,o as b,p as y,r as R}from"./client.0725e74f.js";function T(t){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,s=e(t);if(a){var o=e(this).constructor;r=Reflect.construct(s,arguments,o)}else r=s.apply(this,arguments);return n(this,r)}}function g(t){var e,n,a,r,s,o;return{c:function(){e=u(),n=i("h1"),a=f("About this site"),r=u(),s=i("p"),o=f("This is the 'about' page. There's not much here."),this.h()},l:function(t){h('[data-svelte="svelte-1ine71f"]',document.head).forEach(l),e=p(t),n=v(t,"H1",{});var c=d(n);a=m(c,"About this site"),c.forEach(l),r=p(t),s=v(t,"P",{});var u=d(s);o=m(u,"This is the 'about' page. There's not much here."),u.forEach(l),this.h()},h:function(){document.title="About"},m:function(t,c){b(t,e,c),b(t,n,c),y(n,a),b(t,r,c),b(t,s,c),y(s,o)},p:R,i:R,o:R,d:function(t){t&&l(e),t&&l(n),t&&l(r),t&&l(s)}}}var A=function(e){t(u,o);var n=T(u);function u(t){var e;return a(this,u),e=n.call(this),r(s(e),t,null,g,c,{}),e}return u}();export{A as default};
--- a/sapper/build/client/legacy/client-e118e612.css
+++ b/sapper/build/client/legacy/client-e118e612.css
@ -0,0 +1,3 @@
+nav.svelte-1dbd5up{border-bottom:1px solid rgba(255,62,0,0.1);font-weight:300;padding:0 1em}ul.svelte-1dbd5up{margin:0;padding:0}ul.svelte-1dbd5up::after{content:'';display:block;clear:both}li.svelte-1dbd5up{display:block;float:left}[aria-current].svelte-1dbd5up{position:relative;display:inline-block}[aria-current].svelte-1dbd5up::after{position:absolute;content:'';width:calc(100% - 1em);height:2px;background-color:rgb(255,62,0);display:block;bottom:-1px}a.svelte-1dbd5up{text-decoration:none;padding:1em 0.5em;display:block}
+main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:white;padding:2em;margin:0 auto;box-sizing:border-box}
+h1.svelte-8od9u6,p.svelte-8od9u6{margin:0 auto}h1.svelte-8od9u6{font-size:2.8em;font-weight:700;margin:0 0 0.5em 0}p.svelte-8od9u6{margin:1em auto}@media(min-width: 480px){h1.svelte-8od9u6{font-size:4em}}
--- a/sapper/build/client/legacy/client.0725e74f.js
+++ b/sapper/build/client/legacy/client.0725e74f.js
--- a/sapper/build/client/legacy/index-39716d32.css
+++ b/sapper/build/client/legacy/index-39716d32.css
@ -0,0 +1 @@
+h1.svelte-1kk9opm,figure.svelte-1kk9opm,p.svelte-1kk9opm{text-align:center;margin:0 auto}h1.svelte-1kk9opm{font-size:2.8em;text-transform:uppercase;font-weight:700;margin:0 0 0.5em 0}figure.svelte-1kk9opm{margin:0 0 1em 0}img.svelte-1kk9opm{width:100%;max-width:400px;margin:0 0 1em 0}p.svelte-1kk9opm{margin:1em auto}@media(min-width: 480px){h1.svelte-1kk9opm{font-size:4em}}
--- a/sapper/build/client/legacy/index-7ed37c94.css
+++ b/sapper/build/client/legacy/index-7ed37c94.css
@ -0,0 +1 @@
+ul.svelte-1frg2tf{margin:0 0 1em 0;line-height:1.5}
--- a/sapper/build/client/legacy/index.7b6a19b7.js
+++ b/sapper/build/client/legacy/index.7b6a19b7.js
@ -0,0 +1 @@
+import{_ as t,a as n,b as r,c as e,i as o,d as s,S as c,s as a,f,t as u,j as i,k as l,l as h,g as v,m as p,o as g,p as d,u as m,e as R,q as y,h as E,v as b,r as j,w as B}from"./client.0725e74f.js";function x(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var o,s=n(t);if(e){var c=n(this).constructor;o=Reflect.construct(s,arguments,c)}else o=s.apply(this,arguments);return r(this,o)}}function L(t,n,r){var e=t.slice();return e[1]=n[r],e}function $(t){var n,r,e,o,s=t[1].title+"";return{c:function(){n=f("li"),r=f("a"),e=u(s),this.h()},l:function(t){n=i(t,"LI",{});var o=l(n);r=i(o,"A",{rel:!0,href:!0});var c=l(r);e=h(c,s),c.forEach(v),o.forEach(v),this.h()},h:function(){p(r,"rel","prefetch"),p(r,"href",o="blog/"+t[1].slug)},m:function(t,o){g(t,n,o),d(n,r),d(r,e)},p:function(t,n){1&n&&s!==(s=t[1].title+"")&&m(e,s),1&n&&o!==(o="blog/"+t[1].slug)&&p(r,"href",o)},d:function(t){t&&v(n)}}}function k(t){for(var n,r,e,o,s,c=t[0],a=[],m=0;m<c.length;m+=1)a[m]=$(L(t,c,m));return{c:function(){n=R(),r=f("h1"),e=u("Recent posts"),o=R(),s=f("ul");for(var t=0;t<a.length;t+=1)a[t].c();this.h()},l:function(t){y('[data-svelte="svelte-hfp9t8"]',document.head).forEach(v),n=E(t),r=i(t,"H1",{});var c=l(r);e=h(c,"Recent posts"),c.forEach(v),o=E(t),s=i(t,"UL",{class:!0});for(var f=l(s),u=0;u<a.length;u+=1)a[u].l(f);f.forEach(v),this.h()},h:function(){document.title="Blog",p(s,"class","svelte-1frg2tf")},m:function(t,c){g(t,n,c),g(t,r,c),d(r,e),g(t,o,c),g(t,s,c);for(var f=0;f<a.length;f+=1)a[f].m(s,null)},p:function(t,n){var r=b(n,1)[0];if(1&r){var e;for(c=t[0],e=0;e<c.length;e+=1){var o=L(t,c,e);a[e]?a[e].p(o,r):(a[e]=$(o),a[e].c(),a[e].m(s,null))}for(;e<a.length;e+=1)a[e].d(1);a.length=c.length}},i:j,o:j,d:function(t){t&&v(n),t&&v(r),t&&v(o),t&&v(s),B(a,t)}}}function q(){return this.fetch("blog.json").then((function(t){return t.json()})).then((function(t){return{posts:t}}))}function w(t,n,r){var e=n.posts;return t.$$set=function(t){"posts"in t&&r(0,e=t.posts)},[e]}var A=function(n){t(f,c);var r=x(f);function f(t){var n;return e(this,f),n=r.call(this),o(s(n),t,w,k,a,{posts:0}),n}return f}();export{A as default,q as preload};
--- a/sapper/build/client/legacy/index.c3799208.js
+++ b/sapper/build/client/legacy/index.c3799208.js
@ -0,0 +1 @@
+import{_ as t,a as e,b as s,c as a,i as c,d as r,S as n,s as o,e as i,f as l,t as f,q as u,g as h,h as p,j as v,k as d,l as m,m as g,n as k,o as y,p as E,r as R}from"./client.0725e74f.js";function G(t){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var c,r=e(t);if(a){var n=e(this).constructor;c=Reflect.construct(r,arguments,n)}else c=r.apply(this,arguments);return s(this,c)}}function S(t){var e,s,a,c,r,n,o,G,S,b,j,x,I;return{c:function(){e=i(),s=l("h1"),a=f("Great success!"),c=i(),r=l("figure"),n=l("img"),o=i(),G=l("figcaption"),S=f("Have fun with Sapper!"),b=i(),j=l("p"),x=l("strong"),I=f("Try editing this file (src/routes/index.svelte) to test live reloading."),this.h()},l:function(t){u('[data-svelte="svelte-oh6yg0"]',document.head).forEach(h),e=p(t),s=v(t,"H1",{class:!0});var i=d(s);a=m(i,"Great success!"),i.forEach(h),c=p(t),r=v(t,"FIGURE",{class:!0});var l=d(r);n=v(l,"IMG",{alt:!0,src:!0,class:!0}),o=p(l),G=v(l,"FIGCAPTION",{});var f=d(G);S=m(f,"Have fun with Sapper!"),f.forEach(h),l.forEach(h),b=p(t),j=v(t,"P",{class:!0});var g=d(j);x=v(g,"STRONG",{});var k=d(x);I=m(k,"Try editing this file (src/routes/index.svelte) to test live reloading."),k.forEach(h),g.forEach(h),this.h()},h:function(){document.title="Sapper project template",g(s,"class","svelte-1kk9opm"),g(n,"alt","Success Kid"),k(n.src,"/client/465898c830bb9d2c.jpg")||g(n,"src","/client/465898c830bb9d2c.jpg"),g(n,"class","svelte-1kk9opm"),g(r,"class","svelte-1kk9opm"),g(j,"class","svelte-1kk9opm")},m:function(t,i){y(t,e,i),y(t,s,i),E(s,a),y(t,c,i),y(t,r,i),E(r,n),E(r,o),E(r,G),E(G,S),y(t,b,i),y(t,j,i),E(j,x),E(x,I)},p:R,i:R,o:R,d:function(t){t&&h(e),t&&h(s),t&&h(c),t&&h(r),t&&h(b),t&&h(j)}}}var b=function(e){t(i,n);var s=G(i);function i(t){var e;return a(this,i),e=s.call(this),c(r(e),t,null,S,o,{}),e}return i}();export{b as default};
--- a/sapper/build/client/legacy/inject_styles.fe622066.js
+++ b/sapper/build/client/legacy/inject_styles.fe622066.js
@ -0,0 +1 @@
+function e(e){return Promise.all(e.map((function(e){return new Promise((function(t,n){var r=new URL(e,import.meta.url),l=document.baseURI;if(!l){var o=document.getElementsByTagName("base");l=o.length?o[0].href:document.URL}var u=(""+r).substring(l.length),a=document.querySelector('link[rel=stylesheet][href="'+u+'"]')||document.querySelector('link[rel=stylesheet][href="'+r+'"]');a||((a=document.createElement("link")).rel="stylesheet",a.href=r,document.head.appendChild(a)),a.sheet?t():(a.onload=function(){return t()},a.onerror=n)}))})))}export{e as default};
--- a/sapper/build/client/shimport@2.0.4.js
+++ b/sapper/build/client/shimport@2.0.4.js
--- a/sapper/build/index.js
+++ b/sapper/build/index.js
@ -0,0 +1,6 @@
+// generated by sapper build at 2021-08-19T01:36:35.004Z
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+process.env.PORT = process.env.PORT || 3000;
+
+console.log('Starting server on port ' + process.env.PORT);
+require('./server/server.js');
--- a/sapper/build/server/server.js
+++ b/sapper/build/server/server.js
--- a/sapper/build/service-worker.js
+++ b/sapper/build/service-worker.js
@ -0,0 +1 @@
+!function(){"use strict";const e=1629336994811,t=`cache${e}`,n=["/client/client.5cc55ff9.js","/client/inject_styles.5607aec6.js","/client/index.8bfcf5b6.js","/client/about.73514586.js","/client/index.4fac54ba.js","/client/[slug].efe166d1.js"].concat(["/service-worker-index.html","/favicon.png","/global.css","/logo-192.png","/logo-512.png","/manifest.json"]),s=new Set(n);self.addEventListener("install",(e=>{e.waitUntil(caches.open(t).then((e=>e.addAll(n))).then((()=>{self.skipWaiting()})))})),self.addEventListener("activate",(e=>{e.waitUntil(caches.keys().then((async e=>{for(const n of e)n!==t&&await caches.delete(n);self.clients.claim()})))})),self.addEventListener("fetch",(t=>{if("GET"!==t.request.method||t.request.headers.has("range"))return;const n=new URL(t.request.url),c=n.protocol.startsWith("http"),a=n.hostname===self.location.hostname&&n.port!==self.location.port,i=n.host===self.location.host&&s.has(n.pathname),o="only-if-cached"===t.request.cache&&!i;!c||a||o||t.respondWith((async()=>i&&await caches.match(t.request)||async function(t){const n=await caches.open(`offline${e}`);try{const e=await fetch(t);return n.put(t,e.clone()),e}catch(e){const s=await n.match(t);if(s)return s;throw e}}(t.request))())}))}();
--- a/sapper/build/template.html
+++ b/sapper/build/template.html
@ -0,0 +1 @@
+<!doctype html> <html lang=en> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> %sapper.base% <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest crossorigin=use-credentials> <link href=favicon.png rel=icon type=image/png> <link href=logo-192.png rel=apple-touch-icon> %sapper.scripts% %sapper.styles% %sapper.head% </head> <body> <div id=sapper>%sapper.html%</div> 
--- a/sapper/dev/build.json
+++ b/sapper/dev/build.json
@ -0,0 +1,26 @@
+{
+  "bundler": "rollup",
+  "shimport": "2.0.4",
+  "assets": {
+    "main": "client.c97202b9.js"
+  },
+  "css": {
+    "main": [
+      "client-7bc0b3e2.css"
+    ]
+  },
+  "dependencies": {
+    "index.svelte": [
+      "index.8acd0411.js",
+      "inject_styles.5607aec6.js"
+    ],
+    "settings.svelte": [
+      "settings.bc34a1df.js",
+      "inject_styles.5607aec6.js"
+    ],
+    "about.svelte": [
+      "about.d6b80a2c.js",
+      "inject_styles.5607aec6.js"
+    ]
+  }
+}
--- a/sapper/dev/client/about.1b796c84.js
+++ b/sapper/dev/client/about.1b796c84.js
@ -0,0 +1,102 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, b as space, e as element, t as text, q as query_selector_all, a as detach_dev, c as claim_space, f as claim_element, g as children, h as claim_text, j as add_location, k as insert_hydration_dev, l as append_hydration_dev, n as noop } from './client.409e022c.js';
+
+/* src/routes/about.svelte generated by Svelte v3.42.1 */
+
+const file = "src/routes/about.svelte";
+
+function create_fragment(ctx) {
+	let t0;
+	let h1;
+	let t1;
+	let t2;
+	let p;
+	let t3;
+
+	const block = {
+		c: function create() {
+			t0 = space();
+			h1 = element("h1");
+			t1 = text("About this site");
+			t2 = space();
+			p = element("p");
+			t3 = text("This is the 'about' page. There's not much here.");
+			this.h();
+		},
+		l: function claim(nodes) {
+			const head_nodes = query_selector_all('[data-svelte=\"svelte-1ine71f\"]', document.head);
+			head_nodes.forEach(detach_dev);
+			t0 = claim_space(nodes);
+			h1 = claim_element(nodes, "H1", {});
+			var h1_nodes = children(h1);
+			t1 = claim_text(h1_nodes, "About this site");
+			h1_nodes.forEach(detach_dev);
+			t2 = claim_space(nodes);
+			p = claim_element(nodes, "P", {});
+			var p_nodes = children(p);
+			t3 = claim_text(p_nodes, "This is the 'about' page. There's not much here.");
+			p_nodes.forEach(detach_dev);
+			this.h();
+		},
+		h: function hydrate() {
+			document.title = "About";
+			add_location(h1, file, 4, 0, 52);
+			add_location(p, file, 6, 0, 78);
+		},
+		m: function mount(target, anchor) {
+			insert_hydration_dev(target, t0, anchor);
+			insert_hydration_dev(target, h1, anchor);
+			append_hydration_dev(h1, t1);
+			insert_hydration_dev(target, t2, anchor);
+			insert_hydration_dev(target, p, anchor);
+			append_hydration_dev(p, t3);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(t0);
+			if (detaching) detach_dev(h1);
+			if (detaching) detach_dev(t2);
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('About', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<About> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class About extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "About",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { About as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJvdXQuMWI3OTZjODQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9yb3V0ZXMvYWJvdXQuc3ZlbHRlIl0sInNvdXJjZXNDb250ZW50IjpbIjxzdmVsdGU6aGVhZD5cblx0PHRpdGxlPkFib3V0PC90aXRsZT5cbjwvc3ZlbHRlOmhlYWQ+XG5cbjxoMT5BYm91dCB0aGlzIHNpdGU8L2gxPlxuXG48cD5UaGlzIGlzIHRoZSAnYWJvdXQnIHBhZ2UuIFRoZXJlJ3Mgbm90IG11Y2ggaGVyZS48L3A+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7OzthQUlJLGlCQUFlOzs7YUFFaEIsa0RBQWdEOzs7Ozs7Ozs7NkJBRi9DLGlCQUFlOzs7Ozs0QkFFaEIsa0RBQWdEOzs7Ozs7Ozs7OztHQUZuRCxvQkFBd0I7OztHQUV4QixvQkFBdUQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
--- a/sapper/dev/client/about.4e547c22.js
+++ b/sapper/dev/client/about.4e547c22.js
@ -0,0 +1,102 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, b as space, e as element, t as text, q as query_selector_all, a as detach_dev, c as claim_space, f as claim_element, g as children, h as claim_text, j as add_location, k as insert_hydration_dev, l as append_hydration_dev, n as noop } from './client.0086ccf1.js';
+
+/* src/routes/about.svelte generated by Svelte v3.42.1 */
+
+const file = "src/routes/about.svelte";
+
+function create_fragment(ctx) {
+	let t0;
+	let h1;
+	let t1;
+	let t2;
+	let p;
+	let t3;
+
+	const block = {
+		c: function create() {
+			t0 = space();
+			h1 = element("h1");
+			t1 = text("About this site");
+			t2 = space();
+			p = element("p");
+			t3 = text("This is the 'about' page. There's not much here.");
+			this.h();
+		},
+		l: function claim(nodes) {
+			const head_nodes = query_selector_all('[data-svelte=\"svelte-1ine71f\"]', document.head);
+			head_nodes.forEach(detach_dev);
+			t0 = claim_space(nodes);
+			h1 = claim_element(nodes, "H1", {});
+			var h1_nodes = children(h1);
+			t1 = claim_text(h1_nodes, "About this site");
+			h1_nodes.forEach(detach_dev);
+			t2 = claim_space(nodes);
+			p = claim_element(nodes, "P", {});
+			var p_nodes = children(p);
+			t3 = claim_text(p_nodes, "This is the 'about' page. There's not much here.");
+			p_nodes.forEach(detach_dev);
+			this.h();
+		},
+		h: function hydrate() {
+			document.title = "About";
+			add_location(h1, file, 4, 0, 52);
+			add_location(p, file, 6, 0, 78);
+		},
+		m: function mount(target, anchor) {
+			insert_hydration_dev(target, t0, anchor);
+			insert_hydration_dev(target, h1, anchor);
+			append_hydration_dev(h1, t1);
+			insert_hydration_dev(target, t2, anchor);
+			insert_hydration_dev(target, p, anchor);
+			append_hydration_dev(p, t3);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(t0);
+			if (detaching) detach_dev(h1);
+			if (detaching) detach_dev(t2);
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('About', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<About> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class About extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "About",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { About as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJvdXQuNGU1NDdjMjIuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9yb3V0ZXMvYWJvdXQuc3ZlbHRlIl0sInNvdXJjZXNDb250ZW50IjpbIjxzdmVsdGU6aGVhZD5cblx0PHRpdGxlPkFib3V0PC90aXRsZT5cbjwvc3ZlbHRlOmhlYWQ+XG5cbjxoMT5BYm91dCB0aGlzIHNpdGU8L2gxPlxuXG48cD5UaGlzIGlzIHRoZSAnYWJvdXQnIHBhZ2UuIFRoZXJlJ3Mgbm90IG11Y2ggaGVyZS48L3A+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7OzthQUlJLGlCQUFlOzs7YUFFaEIsa0RBQWdEOzs7Ozs7Ozs7NkJBRi9DLGlCQUFlOzs7Ozs0QkFFaEIsa0RBQWdEOzs7Ozs7Ozs7OztHQUZuRCxvQkFBd0I7OztHQUV4QixvQkFBdUQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
--- a/sapper/dev/client/about.d6b80a2c.js
+++ b/sapper/dev/client/about.d6b80a2c.js
@ -0,0 +1,102 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, b as space, e as element, t as text, q as query_selector_all, a as detach_dev, c as claim_space, f as claim_element, g as children, h as claim_text, j as add_location, k as insert_hydration_dev, l as append_hydration_dev, n as noop } from './client.c97202b9.js';
+
+/* src/routes/about.svelte generated by Svelte v3.42.1 */
+
+const file = "src/routes/about.svelte";
+
+function create_fragment(ctx) {
+	let t0;
+	let h1;
+	let t1;
+	let t2;
+	let p;
+	let t3;
+
+	const block = {
+		c: function create() {
+			t0 = space();
+			h1 = element("h1");
+			t1 = text("About this site");
+			t2 = space();
+			p = element("p");
+			t3 = text("This is the 'about' page. There's not much here.");
+			this.h();
+		},
+		l: function claim(nodes) {
+			const head_nodes = query_selector_all('[data-svelte=\"svelte-1ine71f\"]', document.head);
+			head_nodes.forEach(detach_dev);
+			t0 = claim_space(nodes);
+			h1 = claim_element(nodes, "H1", {});
+			var h1_nodes = children(h1);
+			t1 = claim_text(h1_nodes, "About this site");
+			h1_nodes.forEach(detach_dev);
+			t2 = claim_space(nodes);
+			p = claim_element(nodes, "P", {});
+			var p_nodes = children(p);
+			t3 = claim_text(p_nodes, "This is the 'about' page. There's not much here.");
+			p_nodes.forEach(detach_dev);
+			this.h();
+		},
+		h: function hydrate() {
+			document.title = "About";
+			add_location(h1, file, 4, 0, 52);
+			add_location(p, file, 6, 0, 78);
+		},
+		m: function mount(target, anchor) {
+			insert_hydration_dev(target, t0, anchor);
+			insert_hydration_dev(target, h1, anchor);
+			append_hydration_dev(h1, t1);
+			insert_hydration_dev(target, t2, anchor);
+			insert_hydration_dev(target, p, anchor);
+			append_hydration_dev(p, t3);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(t0);
+			if (detaching) detach_dev(h1);
+			if (detaching) detach_dev(t2);
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('About', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<About> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class About extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "About",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { About as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJvdXQuZDZiODBhMmMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9yb3V0ZXMvYWJvdXQuc3ZlbHRlIl0sInNvdXJjZXNDb250ZW50IjpbIjxzdmVsdGU6aGVhZD5cblx0PHRpdGxlPkFib3V0PC90aXRsZT5cbjwvc3ZlbHRlOmhlYWQ+XG5cbjxoMT5BYm91dCB0aGlzIHNpdGU8L2gxPlxuXG48cD5UaGlzIGlzIHRoZSAnYWJvdXQnIHBhZ2UuIFRoZXJlJ3Mgbm90IG11Y2ggaGVyZS48L3A+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7OzthQUlJLGlCQUFlOzs7YUFFaEIsa0RBQWdEOzs7Ozs7Ozs7NkJBRi9DLGlCQUFlOzs7Ozs0QkFFaEIsa0RBQWdEOzs7Ozs7Ozs7OztHQUZuRCxvQkFBd0I7OztHQUV4QixvQkFBdUQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
--- a/sapper/dev/client/client-7bc0b3e2.css
+++ b/sapper/dev/client/client-7bc0b3e2.css
@ -0,0 +1,83 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
+
+.storybook-icon {
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    border: 0;
+    border-radius: 3em;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+  }
+
+  .storybook-icon--small {
+      height: 32px;
+      width: auto;
+  }
+  .storybook-icon--medium {
+      height: 64px;
+      width: auto;
+  }
+  .storybook-icon--large {
+      height: 128px;
+      width: auto;
+  }
+  
+main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:white;padding:2em;margin:0 auto;box-sizing:border-box}
+h1.svelte-8od9u6,p.svelte-8od9u6{margin:0 auto}h1.svelte-8od9u6{font-size:2.8em;font-weight:700;margin:0 0 0.5em 0}p.svelte-8od9u6{margin:1em auto}@media(min-width: 480px){h1.svelte-8od9u6{font-size:4em}}
--- a/sapper/dev/client/client.0086ccf1.js
+++ b/sapper/dev/client/client.0086ccf1.js
--- a/sapper/dev/client/client.409e022c.js
+++ b/sapper/dev/client/client.409e022c.js
--- a/sapper/dev/client/client.c97202b9.js
+++ b/sapper/dev/client/client.c97202b9.js
--- a/sapper/dev/client/index.139dcfe0.js
+++ b/sapper/dev/client/index.139dcfe0.js
@ -0,0 +1,63 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, q as query_selector_all, a as detach_dev, n as noop } from './client.0086ccf1.js';
+
+/* src/routes/index.svelte generated by Svelte v3.42.1 */
+
+function create_fragment(ctx) {
+	const block = {
+		c: function create() {
+			this.h();
+		},
+		l: function claim(nodes) {
+			const head_nodes = query_selector_all('[data-svelte=\"svelte-2t8tr1\"]', document.head);
+			head_nodes.forEach(detach_dev);
+			this.h();
+		},
+		h: function hydrate() {
+			document.title = "Todo";
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Routes', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Routes> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Routes extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Routes",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Routes as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguMTM5ZGNmZTAuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
--- a/sapper/dev/client/index.8acd0411.js
+++ b/sapper/dev/client/index.8acd0411.js
@ -0,0 +1,63 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, q as query_selector_all, a as detach_dev, n as noop } from './client.c97202b9.js';
+
+/* src/routes/index.svelte generated by Svelte v3.42.1 */
+
+function create_fragment(ctx) {
+	const block = {
+		c: function create() {
+			this.h();
+		},
+		l: function claim(nodes) {
+			const head_nodes = query_selector_all('[data-svelte=\"svelte-2t8tr1\"]', document.head);
+			head_nodes.forEach(detach_dev);
+			this.h();
+		},
+		h: function hydrate() {
+			document.title = "Todo";
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Routes', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Routes> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Routes extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Routes",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Routes as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguOGFjZDA0MTEuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
--- a/sapper/dev/client/index.e032c4f2.js
+++ b/sapper/dev/client/index.e032c4f2.js
@ -0,0 +1,63 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, q as query_selector_all, a as detach_dev, n as noop } from './client.409e022c.js';
+
+/* src/routes/index.svelte generated by Svelte v3.42.1 */
+
+function create_fragment(ctx) {
+	const block = {
+		c: function create() {
+			this.h();
+		},
+		l: function claim(nodes) {
+			const head_nodes = query_selector_all('[data-svelte=\"svelte-2t8tr1\"]', document.head);
+			head_nodes.forEach(detach_dev);
+			this.h();
+		},
+		h: function hydrate() {
+			document.title = "Todo";
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Routes', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Routes> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Routes extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Routes",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Routes as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguZTAzMmM0ZjIuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
--- a/sapper/dev/client/inject_styles.5607aec6.js
+++ b/sapper/dev/client/inject_styles.5607aec6.js
@ -0,0 +1,30 @@
+function inject_styles(files) {
+	return Promise.all(files.map(function(file) { return new Promise(function(fulfil, reject) {
+		var href = new URL(file, import.meta.url);
+		var baseURI = document.baseURI;
+
+		if (!baseURI) {
+			var baseTags = document.getElementsByTagName('base');
+			baseURI = baseTags.length ? baseTags[0].href : document.URL;
+		}
+
+		var relative = ('' + href).substring(baseURI.length);
+		var link = document.querySelector('link[rel=stylesheet][href="' + relative + '"]')
+			|| document.querySelector('link[rel=stylesheet][href="' + href + '"]');
+		if (!link) {
+			link = document.createElement('link');
+			link.rel = 'stylesheet';
+			link.href = href;
+			document.head.appendChild(link);
+		}
+		if (link.sheet) {
+			fulfil();
+		} else {
+			link.onload = function() { return fulfil() };
+			link.onerror = reject;
+		}
+	})}));
+}
+
+export { inject_styles as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5qZWN0X3N0eWxlcy41NjA3YWVjNi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vaW5qZWN0X3N0eWxlcy5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbihmaWxlcykge1xuXHRyZXR1cm4gUHJvbWlzZS5hbGwoZmlsZXMubWFwKGZ1bmN0aW9uKGZpbGUpIHsgcmV0dXJuIG5ldyBQcm9taXNlKGZ1bmN0aW9uKGZ1bGZpbCwgcmVqZWN0KSB7XG5cdFx0dmFyIGhyZWYgPSBuZXcgVVJMKGZpbGUsIGltcG9ydC5tZXRhLnVybCk7XG5cdFx0dmFyIGJhc2VVUkkgPSBkb2N1bWVudC5iYXNlVVJJO1xuXG5cdFx0aWYgKCFiYXNlVVJJKSB7XG5cdFx0XHR2YXIgYmFzZVRhZ3MgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnYmFzZScpO1xuXHRcdFx0YmFzZVVSSSA9IGJhc2VUYWdzLmxlbmd0aCA/IGJhc2VUYWdzWzBdLmhyZWYgOiBkb2N1bWVudC5VUkw7XG5cdFx0fVxuXG5cdFx0dmFyIHJlbGF0aXZlID0gKCcnICsgaHJlZikuc3Vic3RyaW5nKGJhc2VVUkkubGVuZ3RoKTtcblx0XHR2YXIgbGluayA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2xpbmtbcmVsPXN0eWxlc2hlZXRdW2hyZWY9XCInICsgcmVsYXRpdmUgKyAnXCJdJylcblx0XHRcdHx8IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2xpbmtbcmVsPXN0eWxlc2hlZXRdW2hyZWY9XCInICsgaHJlZiArICdcIl0nKTtcblx0XHRpZiAoIWxpbmspIHtcblx0XHRcdGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJyk7XG5cdFx0XHRsaW5rLnJlbCA9ICdzdHlsZXNoZWV0Jztcblx0XHRcdGxpbmsuaHJlZiA9IGhyZWY7XG5cdFx0XHRkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKGxpbmspO1xuXHRcdH1cblx0XHRpZiAobGluay5zaGVldCkge1xuXHRcdFx0ZnVsZmlsKCk7XG5cdFx0fSBlbHNlIHtcblx0XHRcdGxpbmsub25sb2FkID0gZnVuY3Rpb24oKSB7IHJldHVybiBmdWxmaWwoKSB9O1xuXHRcdFx0bGluay5vbmVycm9yID0gcmVqZWN0O1xuXHRcdH1cblx0fSl9KSk7XG59OyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBZSxzQkFBUSxDQUFDLEtBQUssRUFBRTtBQUMvQixDQUFDLE9BQU8sT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLFNBQVMsSUFBSSxFQUFFLEVBQUUsT0FBTyxJQUFJLE9BQU8sQ0FBQyxTQUFTLE1BQU0sRUFBRSxNQUFNLEVBQUU7QUFDM0YsRUFBRSxJQUFJLElBQUksR0FBRyxJQUFJLEdBQUcsQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztBQUM1QyxFQUFFLElBQUksT0FBTyxHQUFHLFFBQVEsQ0FBQyxPQUFPLENBQUM7QUFDakM7QUFDQSxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUU7QUFDaEIsR0FBRyxJQUFJLFFBQVEsR0FBRyxRQUFRLENBQUMsb0JBQW9CLENBQUMsTUFBTSxDQUFDLENBQUM7QUFDeEQsR0FBRyxPQUFPLEdBQUcsUUFBUSxDQUFDLE1BQU0sR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxHQUFHLFFBQVEsQ0FBQyxHQUFHLENBQUM7QUFDL0QsR0FBRztBQUNIO0FBQ0EsRUFBRSxJQUFJLFFBQVEsR0FBRyxDQUFDLEVBQUUsR0FBRyxJQUFJLEVBQUUsU0FBUyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztBQUN2RCxFQUFFLElBQUksSUFBSSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsNkJBQTZCLEdBQUcsUUFBUSxHQUFHLElBQUksQ0FBQztBQUNwRixNQUFNLFFBQVEsQ0FBQyxhQUFhLENBQUMsNkJBQTZCLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQyxDQUFDO0FBQzFFLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRTtBQUNiLEdBQUcsSUFBSSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLENBQUM7QUFDekMsR0FBRyxJQUFJLENBQUMsR0FBRyxHQUFHLFlBQVksQ0FBQztBQUMzQixHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0FBQ3BCLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7QUFDbkMsR0FBRztBQUNILEVBQUUsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO0FBQ2xCLEdBQUcsTUFBTSxFQUFFLENBQUM7QUFDWixHQUFHLE1BQU07QUFDVCxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsV0FBVyxFQUFFLE9BQU8sTUFBTSxFQUFFLEVBQUUsQ0FBQztBQUNoRCxHQUFHLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO0FBQ3pCLEdBQUc7QUFDSCxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUNQOzs7OyJ9
--- a/sapper/dev/client/sapper-dev-client.146c9185.js
+++ b/sapper/dev/client/sapper-dev-client.146c9185.js
@ -0,0 +1,50 @@
+let source;
+
+function check() {
+	if (typeof module === 'undefined') return;
+
+	if (module.hot.status() === 'idle') {
+		module.hot.check(true).then(modules => {
+			console.log(`[SAPPER] applied HMR update`);
+		});
+	}
+}
+
+function connect(port) {
+	if (source || !window.EventSource) return;
+
+	source = new EventSource(`http://${window.location.hostname}:${port}/__sapper__`);
+
+	window.source = source;
+
+	source.onopen = function(event) {
+		console.log(`[SAPPER] dev client connected`);
+	};
+
+	source.onerror = function(error) {
+		console.error(error);
+	};
+
+	source.onmessage = function(event) {
+		const data = JSON.parse(event.data);
+		if (!data) return; // just a heartbeat
+
+		if (data.action === 'reload') {
+			window.location.reload();
+		}
+
+		if (data.status === 'completed') {
+			check();
+		}
+	};
+
+	// Close the event source before the window is unloaded to prevent an error
+	// ("The connection was interrupted while the page was loading.") in Firefox
+	// when the page is reloaded.
+	window.addEventListener('beforeunload', function() {
+		source.close();
+	});
+}
+
+export { connect };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2FwcGVyLWRldi1jbGllbnQuMTQ2YzkxODUuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL25vZGVfbW9kdWxlcy8ucG5wbS9zYXBwZXJAMC4yOC4xMF9zdmVsdGVAMy40Mi4xL25vZGVfbW9kdWxlcy9zYXBwZXIvc2FwcGVyLWRldi1jbGllbnQuanMiXSwic291cmNlc0NvbnRlbnQiOlsibGV0IHNvdXJjZTtcblxuZnVuY3Rpb24gY2hlY2soKSB7XG5cdGlmICh0eXBlb2YgbW9kdWxlID09PSAndW5kZWZpbmVkJykgcmV0dXJuO1xuXG5cdGlmIChtb2R1bGUuaG90LnN0YXR1cygpID09PSAnaWRsZScpIHtcblx0XHRtb2R1bGUuaG90LmNoZWNrKHRydWUpLnRoZW4obW9kdWxlcyA9PiB7XG5cdFx0XHRjb25zb2xlLmxvZyhgW1NBUFBFUl0gYXBwbGllZCBITVIgdXBkYXRlYCk7XG5cdFx0fSk7XG5cdH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGNvbm5lY3QocG9ydCkge1xuXHRpZiAoc291cmNlIHx8ICF3aW5kb3cuRXZlbnRTb3VyY2UpIHJldHVybjtcblxuXHRzb3VyY2UgPSBuZXcgRXZlbnRTb3VyY2UoYGh0dHA6Ly8ke3dpbmRvdy5sb2NhdGlvbi5ob3N0bmFtZX06JHtwb3J0fS9fX3NhcHBlcl9fYCk7XG5cblx0d2luZG93LnNvdXJjZSA9IHNvdXJjZTtcblxuXHRzb3VyY2Uub25vcGVuID0gZnVuY3Rpb24oZXZlbnQpIHtcblx0XHRjb25zb2xlLmxvZyhgW1NBUFBFUl0gZGV2IGNsaWVudCBjb25uZWN0ZWRgKTtcblx0fTtcblxuXHRzb3VyY2Uub25lcnJvciA9IGZ1bmN0aW9uKGVycm9yKSB7XG5cdFx0Y29uc29sZS5lcnJvcihlcnJvcik7XG5cdH07XG5cblx0c291cmNlLm9ubWVzc2FnZSA9IGZ1bmN0aW9uKGV2ZW50KSB7XG5cdFx0Y29uc3QgZGF0YSA9IEpTT04ucGFyc2UoZXZlbnQuZGF0YSk7XG5cdFx0aWYgKCFkYXRhKSByZXR1cm47IC8vIGp1c3QgYSBoZWFydGJlYXRcblxuXHRcdGlmIChkYXRhLmFjdGlvbiA9PT0gJ3JlbG9hZCcpIHtcblx0XHRcdHdpbmRvdy5sb2NhdGlvbi5yZWxvYWQoKTtcblx0XHR9XG5cblx0XHRpZiAoZGF0YS5zdGF0dXMgPT09ICdjb21wbGV0ZWQnKSB7XG5cdFx0XHRjaGVjaygpO1xuXHRcdH1cblx0fTtcblxuXHQvLyBDbG9zZSB0aGUgZXZlbnQgc291cmNlIGJlZm9yZSB0aGUgd2luZG93IGlzIHVubG9hZGVkIHRvIHByZXZlbnQgYW4gZXJyb3Jcblx0Ly8gKFwiVGhlIGNvbm5lY3Rpb24gd2FzIGludGVycnVwdGVkIHdoaWxlIHRoZSBwYWdlIHdhcyBsb2FkaW5nLlwiKSBpbiBGaXJlZm94XG5cdC8vIHdoZW4gdGhlIHBhZ2UgaXMgcmVsb2FkZWQuXG5cdHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdiZWZvcmV1bmxvYWQnLCBmdW5jdGlvbigpIHtcblx0XHRzb3VyY2UuY2xvc2UoKTtcblx0fSk7XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsSUFBSSxNQUFNLENBQUM7QUFDWDtBQUNBLFNBQVMsS0FBSyxHQUFHO0FBQ2pCLENBQUMsSUFBSSxPQUFPLE1BQU0sS0FBSyxXQUFXLEVBQUUsT0FBTztBQUMzQztBQUNBLENBQUMsSUFBSSxNQUFNLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxLQUFLLE1BQU0sRUFBRTtBQUNyQyxFQUFFLE1BQU0sQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUk7QUFDekMsR0FBRyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsMkJBQTJCLENBQUMsQ0FBQyxDQUFDO0FBQzlDLEdBQUcsQ0FBQyxDQUFDO0FBQ0wsRUFBRTtBQUNGLENBQUM7QUFDRDtBQUNPLFNBQVMsT0FBTyxDQUFDLElBQUksRUFBRTtBQUM5QixDQUFDLElBQUksTUFBTSxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRSxPQUFPO0FBQzNDO0FBQ0EsQ0FBQyxNQUFNLEdBQUcsSUFBSSxXQUFXLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO0FBQ25GO0FBQ0EsQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztBQUN4QjtBQUNBLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxTQUFTLEtBQUssRUFBRTtBQUNqQyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyw2QkFBNkIsQ0FBQyxDQUFDLENBQUM7QUFDL0MsRUFBRSxDQUFDO0FBQ0g7QUFDQSxDQUFDLE1BQU0sQ0FBQyxPQUFPLEdBQUcsU0FBUyxLQUFLLEVBQUU7QUFDbEMsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQ3ZCLEVBQUUsQ0FBQztBQUNIO0FBQ0EsQ0FBQyxNQUFNLENBQUMsU0FBUyxHQUFHLFNBQVMsS0FBSyxFQUFFO0FBQ3BDLEVBQUUsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7QUFDdEMsRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLE9BQU87QUFDcEI7QUFDQSxFQUFFLElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxRQUFRLEVBQUU7QUFDaEMsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRSxDQUFDO0FBQzVCLEdBQUc7QUFDSDtBQUNBLEVBQUUsSUFBSSxJQUFJLENBQUMsTUFBTSxLQUFLLFdBQVcsRUFBRTtBQUNuQyxHQUFHLEtBQUssRUFBRSxDQUFDO0FBQ1gsR0FBRztBQUNILEVBQUUsQ0FBQztBQUNIO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsY0FBYyxFQUFFLFdBQVc7QUFDcEQsRUFBRSxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUM7QUFDakIsRUFBRSxDQUFDLENBQUM7QUFDSjs7OzsifQ==
--- a/sapper/dev/client/settings.1d567bce.js
+++ b/sapper/dev/client/settings.1d567bce.js
@ -0,0 +1,54 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, n as noop } from './client.0086ccf1.js';
+
+/* src/routes/settings.svelte generated by Svelte v3.42.1 */
+
+function create_fragment(ctx) {
+	const block = {
+		c: noop,
+		l: noop,
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Settings', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Settings> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Settings extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Settings",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Settings as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dGluZ3MuMWQ1NjdiY2UuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
--- a/sapper/dev/client/settings.bc34a1df.js
+++ b/sapper/dev/client/settings.bc34a1df.js
@ -0,0 +1,54 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, n as noop } from './client.c97202b9.js';
+
+/* src/routes/settings.svelte generated by Svelte v3.42.1 */
+
+function create_fragment(ctx) {
+	const block = {
+		c: noop,
+		l: noop,
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Settings', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Settings> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Settings extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Settings",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Settings as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dGluZ3MuYmMzNGExZGYuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
--- a/sapper/dev/client/settings.df845f1b.js
+++ b/sapper/dev/client/settings.df845f1b.js
@ -0,0 +1,54 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_slots, n as noop } from './client.409e022c.js';
+
+/* src/routes/settings.svelte generated by Svelte v3.42.1 */
+
+function create_fragment(ctx) {
+	const block = {
+		c: noop,
+		l: noop,
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Settings', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Settings> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Settings extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Settings",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Settings as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dGluZ3MuZGY4NDVmMWIuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
--- a/sapper/dev/client/shimport@2.0.4.js
+++ b/sapper/dev/client/shimport@2.0.4.js
--- a/sapper/dev/server/server-c5430664.css
+++ b/sapper/dev/server/server-c5430664.css
@ -0,0 +1,81 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
+
+.storybook-icon {
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    border: 0;
+    border-radius: 3em;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+  }
+
+  .storybook-icon--small {
+      height: 32px;
+      width: auto;
+  }
+  .storybook-icon--medium {
+      height: 64px;
+      width: auto;
+  }
+  .storybook-icon--large {
+      height: 128px;
+      width: auto;
+  }
+  
--- a/sapper/dev/server/server.js
+++ b/sapper/dev/server/server.js
--- a/sapper/dev/service-worker.js
+++ b/sapper/dev/service-worker.js
--- 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.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "frontend",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "svelte-kit dev --host",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "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",
+    "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"
+  },
+  "type": "module",
+  "dependencies": {
+    "@fontsource/fira-mono": "^4.5.0",
+    "@lukeed/uuid": "^2.0.0",
+    "cookie": "^0.4.1"
+  }
+}
--- 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.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>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />
--- a/src/hooks.js
+++ b/src/hooks.js
@ -0,0 +1,25 @@
+import cookie from 'cookie';
+import { v4 as uuid } from '@lukeed/uuid';
+
+export const 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/Counter.svelte
+++ b/src/lib/Counter.svelte
@ -0,0 +1,97 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	let count = 0;
+
+	const displayed_count = spring();
+	$: displayed_count.set(count);
+	$: offset = modulo($displayed_count, 1);
+
+	function modulo(n, m) {
+		// 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/button/Button.svelte
+++ b/src/lib/button/Button.svelte
@ -0,0 +1,42 @@
+<script>
+  import './button.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 = 'medium';
+  /**
+   * Button contents
+   */
+  export let label = '';
+
+  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Optional click handler
+   */
+  function onClick(event) {
+    dispatch('click', event);
+  }
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click={onClick}>
+  {label}
+</button>
--- a/src/lib/button/button.css
+++ b/src/lib/button/button.css
@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
--- a/src/lib/form.js
+++ b/src/lib/form.js
@ -0,0 +1,49 @@
+// this action (https://svelte.dev/tutorial/actions) allows us to
+// progressively enhance a <form> that already works without JS
+export function enhance(form, { pending, error, result }) {
+	let current_token;
+
+	async function handle_submit(e) {
+		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/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@ -0,0 +1,26 @@
+<script>
+	import './header.css';
+	import Nav from '$lib/nav/Nav.svelte';
+</script>
+
+<header>
+	<div class="corner">
+		<a href="/">
+			<img src="clipboard.svg" alt="Todo" />
+		</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>
+		<Nav />
+		<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>
--- a/src/lib/header/header.css
+++ b/src/lib/header/header.css
@ -0,0 +1,43 @@
+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);
+}
+
+a:hover {
+	color: var(--accent-color);
+}
--- 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/lib/image/Image.svelte
+++ b/src/lib/image/Image.svelte
@ -0,0 +1,33 @@
+<script>
+  import './image.css';
+  import { createEventDispatcher } from 'svelte';
+  /**
+   * What background color to use
+   */
+  export let backgroundColor;
+
+  export let size = 'small';
+
+  export let src = '';
+  export let alt = '';
+
+  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Optional click handler
+   */
+  function onClick(event) {
+    dispatch('click', event);
+  }
+</script>
+
+<img
+  type="button"
+  class={['storybook-icon', `storybook-icon--${size}`].join(' ')}
+  {style}
+  on:click={onClick}
+  {src}
+  {alt}
+/>
--- a/src/lib/image/image.css
+++ b/src/lib/image/image.css
@ -0,0 +1,23 @@
+.storybook-icon {
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    border: 0;
+    border-radius: 3em;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+  }
+
+  .storybook-icon--small {
+      height: 32px;
+      width: auto;
+  }
+  .storybook-icon--medium {
+      height: 64px;
+      width: auto;
+  }
+  .storybook-icon--large {
+      height: 128px;
+      width: auto;
+  }
+  
--- a/src/lib/nav/Nav.svelte
+++ b/src/lib/nav/Nav.svelte
@ -0,0 +1,14 @@
+<script>
+	import './nav.css';
+	import { page } from '$app/stores';
+</script>
+
+<nav>
+	<ul>
+		<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
+		<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
+		<li class:active={$page.path === '/settings'}>
+			<a sveltekit:prefetch href="/settings">Settings</a>
+		</li>
+	</ul>
+</nav>
--- a/src/lib/nav/nav.css
+++ b/src/lib/nav/nav.css
@ -0,0 +1,72 @@
+nav {
+	border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+	font-weight: 300;
+	padding: 0;
+}
+
+ul {
+	margin: 0;
+	padding: 0;
+}
+
+/* clearfix */
+ul::after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+li {
+	display: block;
+	float: left;
+}
+
+a {
+	text-decoration: none;
+	padding: 1em 0.5em;
+	display: block;
+}
+
+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/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -0,0 +1,45 @@
+<script>
+	import Header from '$lib/header/Header.svelte';
+	import '../app.css';
+</script>
+
+<Header />
+
+<main>
+	<slot />
+</main>
+
+<footer>
+	<p><a href="https://j4.pm">made by jane petrovna</a></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/_error.svelte
+++ b/src/routes/_error.svelte
@ -0,0 +1,40 @@
+<script>
+	export let status;
+	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}
--- 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>
+</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>
+
+	<!-- TODO lose the @next! -->
+	<pre>npm init svelte@next</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,25 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+	import Counter from '$lib/Counter.svelte';
+</script>
+
+<svelte:head>
+	<title>Todo</title>
+</svelte:head>
+
+<section>
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+	}
+</style>
--- a/src/routes/settings/[uid].json.js
+++ b/src/routes/settings/[uid].json.js
@ -0,0 +1,14 @@
+import { api } from './_api';
+
+// PATCH /todos/:uid.json
+export const patch = async (request) => {
+	return api(request, `todos/${request.locals.userid}/${request.params.uid}`, {
+		text: request.body.get('text'),
+		done: request.body.has('done') ? !!request.body.get('done') : undefined
+	});
+};
+
+// DELETE /todos/:uid.json
+export const del = async (request) => {
+	return api(request, `todos/${request.locals.userid}/${request.params.uid}`);
+};
--- a/src/routes/settings/_api.js
+++ b/src/routes/settings/_api.js
@ -0,0 +1,45 @@
+/*
+	This module is used by the /todos.json and /todos/[uid].json
+	endpoints 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 async function api(request, resource, data) {
+	// user must have a cookie set
+	if (!request.locals.userid) {
+		return { status: 401 };
+	}
+
+	const res = await fetch(`${base}/${resource}`, {
+		method: request.method,
+		headers: {
+			'content-type': 'application/json'
+		},
+		body: data && JSON.stringify(data)
+	});
+
+	// if the request came from a <form> submission, the browser's default
+	// behaviour is to show the URL corresponding to the form's "action"
+	// attribute. in those cases, we want to redirect them back to the
+	// /todos page, rather than showing the response
+	if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {
+		return {
+			status: 303,
+			headers: {
+				location: '/todos'
+			}
+		};
+	}
+
+	return {
+		status: res.status,
+		body: await res.json()
+	};
+}
--- a/src/routes/settings/index.json.js
+++ b/src/routes/settings/index.json.js
@ -0,0 +1,28 @@
+import { api } from './_api';
+
+// GET /todos.json
+export const get = async (request) => {
+	// request.locals.userid comes from src/hooks.js
+	const response = await api(request, `todos/${request.locals.userid}`);
+
+	if (response.status === 404) {
+		// user hasn't created a todo list.
+		// start with an empty array
+		return { body: [] };
+	}
+
+	return response;
+};
+
+// POST /todos.json
+export const post = async (request) => {
+	const response = await api(request, `todos/${request.locals.userid}`, {
+		// because index.svelte posts a FormData object,
+		// request.body is _also_ a (readonly) FormData
+		// object, which allows us to get form data
+		// with the `body.get(key)` method
+		text: request.body.get('text')
+	});
+
+	return response;
+};
--- a/src/routes/settings/index.svelte
+++ b/src/routes/settings/index.svelte
@ -0,0 +1,220 @@
+<script context="module">
+	import { enhance } from '$lib/form';
+
+	// see https://kit.svelte.dev/docs#loading
+	export const load = async ({ fetch }) => {
+		const res = await fetch('/todos.json');
+
+		if (res.ok) {
+			const todos = await res.json();
+
+			return {
+				props: { todos }
+			};
+		}
+
+		const { message } = await res.json();
+
+		return {
+			error: new Error(message)
+		};
+	};
+</script>
+
+<script>
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	export let todos;
+
+	async function patch(res) {
+		const todo = await res.json();
+
+		todos = todos.map((t) => {
+			if (t.uid === todo.uid) return todo;
+			return t;
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>Todos</title>
+</svelte:head>
+
+<div class="todos">
+	<h1>Todos</h1>
+
+	<form
+		class="new"
+		action="/todos.json"
+		method="post"
+		use:enhance={{
+			result: async (res, form) => {
+				const created = await res.json();
+				todos = [...todos, created];
+
+				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/{todo.uid}.json?_method=patch"
+				method="post"
+				use:enhance={{
+					pending: (data) => {
+						todo.done = !!data.get('done');
+					},
+					result: patch
+				}}
+			>
+				<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/{todo.uid}.json?_method=patch"
+				method="post"
+				use:enhance={{
+					result: patch
+				}}
+			>
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
+				<button class="save" aria-label="Save todo" />
+			</form>
+
+			<form
+				action="/todos/{todo.uid}.json?_method=delete"
+				method="post"
+				use:enhance={{
+					pending: () => (todo.pending_delete = true),
+					result: () => {
+						todos = todos.filter((t) => t.uid !== 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(0px 0px 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_old/ambient.d.ts
+++ b/src_old/ambient.d.ts
@ -0,0 +1,39 @@
+/**
+ * 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 default value;
+}
+
+declare module "*.jpg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.jpeg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.png" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.svg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.webp" {
+	const value: string;
+	export default value;
+}
--- a/src_old/client.js
+++ b/src_old/client.js
@ -0,0 +1,5 @@
+import * as sapper from '@sapper/app';
+
+sapper.start({
+	target: document.querySelector('#sapper')
+});
--- a/src_old/components/Header.svelte
+++ b/src_old/components/Header.svelte
@ -0,0 +1,49 @@
+<script>
+	import './header.css';
+	import Button from './Button.svelte';
+	import Image from '../../src/lib/image/Image.svelte';
+	import { hasSession } from '../utils/stores.js';
+	import { onMount } from 'svelte';
+
+	import { createEventDispatcher } from 'svelte';
+
+	let user = null;
+	onMount(async () => {
+		user = hasSession();
+	});
+
+	const dispatch = createEventDispatcher();
+
+	let avatarUrl = '';
+
+	function onLogin(event) {
+		dispatch('login', event);
+	}
+	function onLogout(event) {
+		dispatch('logout', event);
+	}
+
+	function redirect(url) {
+		return () => {
+			window.location.pathname = url;
+		};
+	}
+</script>
+
+<header>
+	<div class="wrapper">
+		<div>
+			<Image src="./clipboard.svg" on:click={redirect('/')} />
+			<h1>Todo</h1>
+		</div>
+		<div>
+			{#if user}
+				<Image src={avatarUrl} alt="user profile picture" on:click={redirect('/settings')} />
+				<Button size="small" on:click={onLogout} label="Log out" />
+			{/if}
+			{#if !user}
+				<Button size="small" on:click={onLogin} label="Log in" />
+			{/if}
+		</div>
+	</div>
+</header>
--- a/src_old/components/header.css
+++ b/src_old/components/header.css
@ -0,0 +1,26 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
--- a/src_old/deprecated/[slug].json.js
+++ b/src_old/deprecated/[slug].json.js
@ -0,0 +1,28 @@
+import posts from './_posts.js';
+
+const lookup = new Map();
+posts.forEach(post => {
+	lookup.set(post.slug, JSON.stringify(post));
+});
+
+export function get(req, res, next) {
+	// the `slug` parameter is available because
+	// this file is called [slug].json.js
+	const { slug } = req.params;
+
+	if (lookup.has(slug)) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(lookup.get(slug));
+	} else {
+		res.writeHead(404, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: `Not found`
+		}));
+	}
+}
--- a/src_old/deprecated/[slug].svelte
+++ b/src_old/deprecated/[slug].svelte
@ -0,0 +1,64 @@
+<script context="module">
+	export async function preload({ params }) {
+		// the `slug` parameter is available because
+		// this file is called [slug].svelte
+		const res = await this.fetch(`blog/${params.slug}.json`);
+		const data = await res.json();
+
+		if (res.status === 200) {
+			return { post: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
+
+<script>
+	export let post;
+</script>
+
+<style>
+	/*
+		By default, CSS is locally scoped to the component,
+		and any unused styles are dead-code-eliminated.
+		In this page, Svelte can't know which elements are
+		going to appear inside the {{{post.html}}} block,
+		so we have to use the :global(...) modifier to target
+		all elements inside .content
+	*/
+	.content :global(h2) {
+		font-size: 1.4em;
+		font-weight: 500;
+	}
+
+	.content :global(pre) {
+		background-color: #f9f9f9;
+		box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
+		padding: 0.5em;
+		border-radius: 2px;
+		overflow-x: auto;
+	}
+
+	.content :global(pre) :global(code) {
+		background-color: transparent;
+		padding: 0;
+	}
+
+	.content :global(ul) {
+		line-height: 1.5;
+	}
+
+	.content :global(li) {
+		margin: 0 0 0.5em 0;
+	}
+</style>
+
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
+
+<h1>{post.title}</h1>
+
+<div class="content">
+	{@html post.html}
+</div>
--- a/src_old/deprecated/_posts.js
+++ b/src_old/deprecated/_posts.js
@ -0,0 +1,92 @@
+// Ordinarily, you'd generate this data from markdown files in your
+// repo, or fetch them from a database of some kind. But in order to
+// avoid unnecessary dependencies in the starter template, and in the
+// service of obviousness, we're just going to leave it here.
+
+// This file is called `_posts.js` rather than `posts.js`, because
+// we don't want to create an `/blog/posts` route — the leading
+// underscore tells Sapper not to do that.
+
+const posts = [
+	{
+		title: 'What is Sapper?',
+		slug: 'what-is-sapper',
+		html: `
+			<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
+
+			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
+
+			<ul>
+				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
+				<li>Server-side rendering (SSR) with client-side hydration</li>
+				<li>Service worker for offline support, and all the PWA bells and whistles</li>
+				<li>The nicest development experience you've ever had, or your money back</li>
+			</ul>
+
+			<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
+		`
+	},
+
+	{
+		title: 'How to use Sapper',
+		slug: 'how-to-use-sapper',
+		html: `
+			<h2>Step one</h2>
+			<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
+
+			<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
+			cd my-app
+			npm install # or yarn!
+			npm run dev
+			</code></pre>
+
+			<h2>Step two</h2>
+			<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
+
+			<h2>Step three</h2>
+			<p>...</p>
+
+			<h2>Step four</h2>
+			<p>Resist overdone joke formats.</p>
+		`
+	},
+
+	{
+		title: 'Why the name?',
+		slug: 'why-the-name',
+		html: `
+			<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
+
+			<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
+		`
+	},
+
+	{
+		title: 'How is Sapper different from Next.js?',
+		slug: 'how-is-sapper-different-from-next',
+		html: `
+			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
+
+			<ul>
+				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
+				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
+				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
+			</ul>
+		`
+	},
+
+	{
+		title: 'How can I get involved?',
+		slug: 'how-can-i-get-involved',
+		html: `
+			<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
+		`
+	}
+];
+
+posts.forEach(post => {
+	post.html = post.html.replace(/^\t{3}/gm, '');
+});
+
+export default posts;
--- a/src_old/deprecated/index.json.js
+++ b/src_old/deprecated/index.json.js
@ -0,0 +1,16 @@
+import posts from './_posts.js';
+
+const contents = JSON.stringify(posts.map(post => {
+	return {
+		title: post.title,
+		slug: post.slug
+	};
+}));
+
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+
+	res.end(contents);
+}
--- a/src_old/deprecated/index.svelte
+++ b/src_old/deprecated/index.svelte
@ -0,0 +1,34 @@
+<script context="module">
+	export function preload() {
+		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<style>
+	ul {
+		margin: 0 0 1em 0;
+		line-height: 1.5;
+	}
+</style>
+
+<svelte:head>
+	<title>Blog</title>
+</svelte:head>
+
+<h1>Recent posts</h1>
+
+<ul>
+	{#each posts as post}
+		<!-- we're using the non-standard `rel=prefetch` attribute to
+				tell Sapper to load the data for the page as soon as
+				the user hovers over the link or taps it, instead of
+				waiting for the 'click' event -->
+		<li><a rel="prefetch" href="blog/{post.slug}">{post.title}</a></li>
+	{/each}
+</ul>
--- a/src_old/routes/_layout.svelte
+++ b/src_old/routes/_layout.svelte
@ -0,0 +1,24 @@
+<script>
+	// import Nav from '../components/Nav.svelte';
+
+	// export let segment;
+	import Header from '../components/Header.svelte';
+</script>
+
+<style>
+	main {
+		position: relative;
+		max-width: 56em;
+		background-color: white;
+		padding: 2em;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>
+
+<!-- <Nav {segment}/> -->
+<Header />
+
+<main>
+	<slot></slot>
+</main>
--- a/src_old/routes/about.svelte
+++ b/src_old/routes/about.svelte
@ -0,0 +1,7 @@
+<svelte:head>
+	<title>About</title>
+</svelte:head>
+
+<h1>About this site</h1>
+
+<p>This is the 'about' page. There's not much here.</p>
--- a/src_old/routes/index.svelte
+++ b/src_old/routes/index.svelte
@ -0,0 +1,9 @@
+<script>
+</script>
+
+<svelte:head>
+  <title>Todo</title>
+</svelte:head>
+
+<style>
+</style>
--- a/src_old/routes/settings.svelte
+++ b/src_old/routes/settings.svelte
--- a/src_old/server.js
+++ b/src_old/server.js
@ -0,0 +1,17 @@
+import sirv from 'sirv';
+import polka from 'polka';
+import compression from 'compression';
+import * as sapper from '@sapper/server';
+
+const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === 'development';
+
+polka() // You can also use Express
+	.use(
+		compression({ threshold: 0 }),
+		sirv('static', { dev }),
+		sapper.middleware()
+	)
+	.listen(PORT, err => {
+		if (err) console.log('error', err);
+	});
--- a/src_old/service-worker.js
+++ b/src_old/service-worker.js
@ -0,0 +1,86 @@
+import { timestamp, files, shell } from '@sapper/service-worker';
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` 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 staticAssets = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+
+/**
+ * Fetch the asset from the network and store it in the cache. 
+ * Fall back to the cache if the user is offline.
+ */
+async function fetchAndCache(request) {
+	const cache = await caches.open(`offline${timestamp}`)
+
+	try {
+		const response = await fetch(request);
+		cache.put(request, response.clone());
+		return response;
+	} catch (err) {
+		const response = await cache.match(request);
+		if (response) return response;
+
+		throw err;
+	}
+}
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	const isHttp = url.protocol.startsWith('http');
+	const isDevServerRequest = url.hostname === self.location.hostname && url.port !== self.location.port;
+	const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
+	const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
+
+	if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
+		event.respondWith(
+			(async () => {
+				// always serve static files and bundler-generated assets from cache.
+				// if your application has other URLs with data that will never change,
+				// 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,
+				// which Sapper has generated for you. It's not right for every
+				// app, but if it's right for yours then uncomment this section
+				/*
+				if (!cachedAsset && url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+					return caches.match('/service-worker-index.html');
+				}
+				*/
+
+				return cachedAsset || fetchAndCache(event.request);
+			})()
+		);
+	}
+});
--- a/src_old/template.html
+++ b/src_old/template.html
@ -0,0 +1,34 @@
+<!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="stylesheet" href="global.css">
+	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
+	<link rel="icon" type="image/png" href="favicon.png">
+	<link rel="apple-touch-icon" href="logo-192.png">
+
+	<!-- 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>
--- a/src_old/utils/events.js
+++ b/src_old/utils/events.js
--- a/src_old/utils/requests.js
+++ b/src_old/utils/requests.js
--- a/src_old/utils/settings.js
+++ b/src_old/utils/settings.js
@ -0,0 +1 @@
+export const API_URL = 'https://dev.j4.pm/api';
--- a/src_old/utils/stores.js
+++ b/src_old/utils/stores.js
@ -0,0 +1,31 @@
+import { writable } from 'svelte/store';
+import axios from 'axios';
+import { API_URL } from './settings';
+
+export const discordUser = writable({});
+
+export const hasSession = () => {
+  return getCookie('SESSION') != null;
+};
+
+function getCookie(name) {
+  if (!window.document) {
+    return null;
+  }
+  var dc = window.document.cookie;
+  var prefix = name + '=';
+  var begin = dc.indexOf('; ' + prefix);
+  if (begin == -1) {
+    begin = dc.indexOf(prefix);
+    if (begin != 0) return null;
+  } else {
+    begin += 2;
+    var end = window.document.cookie.indexOf(';', begin);
+    if (end == -1) {
+      end = dc.length;
+    }
+  }
+  // because unescape has been deprecated, replaced with decodeURI
+  //return unescape(dc.substring(begin + prefix.length, end));
+  return decodeURI(dc.substring(begin + prefix.length, end));
+}
--- a/src_old/utils/user.js
+++ b/src_old/utils/user.js
--- a/static_old/code-brackets.svg
+++ b/static_old/code-brackets.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
--- a/static_old/colors.svg
+++ b/static_old/colors.svg
--- a/static_old/comments.svg
+++ b/static_old/comments.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`.content.svelte-emm3f3 h2{font-size:1.4em;font-weight:500}.content.svelte-emm3f3 pre{background-color:#f9f9f9;box-shadow:inset 1px 1px 5px rgba(0, 0, 0, 0.05);padding:0.5em;border-radius:2px;overflow-x:auto}.content.svelte-emm3f3 pre code{background-color:transparent;padding:0}.content.svelte-emm3f3 ul{line-height:1.5}.content.svelte-emm3f3 li{margin:0 0 0.5em 0}`
				`@ -0,0 +1 @@`
				import{S as t,i as s,s as a,a as e,e as n,t as o,q as i,d as c,c as l,b as r,f as h,g as u,h as f,k as m,l as d,m as p,n as v}from"./client.5cc55ff9.js";function g(t){let s,a,g,j,E,H,$=t[0].title+"",b=t[0].html+"";return document.title=s=t[0].title,{c(){a=e(),g=n("h1"),j=o($),E=e(),H=n("div"),this.h()},l(t){i('[data-svelte="svelte-1uty71u"]',document.head).forEach(c),a=l(t),g=r(t,"H1",{});var s=h(g);j=u(s,$),s.forEach(c),E=l(t),H=r(t,"DIV",{class:!0}),h(H).forEach(c),this.h()},h(){f(H,"class","content svelte-emm3f3")},m(t,s){m(t,a,s),m(t,g,s),d(g,j),m(t,E,s),m(t,H,s),H.innerHTML=b},p(t,[a]){1&a&&s!==(s=t[0].title)&&(document.title=s),1&a&&$!==($=t[0].title+"")&&p(j,$),1&a&&b!==(b=t[0].html+"")&&(H.innerHTML=b)},i:v,o:v,d(t){t&&c(a),t&&c(g),t&&c(E),t&&c(H)}}}async function j({params:t}){const s=await this.fetch(`blog/${t.slug}.json`),a=await s.json();if(200===s.status)return{post:a};this.error(s.status,a.message)}function E(t,s,a){let{post:e}=s;return t.$$set=t=>{"post"in t&&a(0,e=t.post)},[e]}class H extends t{constructor(t){super(),s(this,t,E,g,a,{post:0})}}export{H as default,j as preload};
				`@ -0,0 +1 @@`
				import{S as s,i as t,s as e,a,e as h,t as o,q as i,d as r,c,b as u,f as n,g as l,k as f,l as d,n as m}from"./client.5cc55ff9.js";function p(s){let t,e,p,b,v,T;return{c(){t=a(),e=h("h1"),p=o("About this site"),b=a(),v=h("p"),T=o("This is the 'about' page. There's not much here."),this.h()},l(s){i('[data-svelte="svelte-1ine71f"]',document.head).forEach(r),t=c(s),e=u(s,"H1",{});var a=n(e);p=l(a,"About this site"),a.forEach(r),b=c(s),v=u(s,"P",{});var h=n(v);T=l(h,"This is the 'about' page. There's not much here."),h.forEach(r),this.h()},h(){document.title="About"},m(s,a){f(s,t,a),f(s,e,a),d(e,p),f(s,b,a),f(s,v,a),d(v,T)},p:m,i:m,o:m,d(s){s&&r(t),s&&r(e),s&&r(b),s&&r(v)}}}class b extends s{constructor(s){super(),t(this,s,null,p,e,{})}}export{b as default};
				`@ -0,0 +1 @@`
				`h1.svelte-1kk9opm,figure.svelte-1kk9opm,p.svelte-1kk9opm{text-align:center;margin:0 auto}h1.svelte-1kk9opm{font-size:2.8em;text-transform:uppercase;font-weight:700;margin:0 0 0.5em 0}figure.svelte-1kk9opm{margin:0 0 1em 0}img.svelte-1kk9opm{width:100%;max-width:400px;margin:0 0 1em 0}p.svelte-1kk9opm{margin:1em auto}@media(min-width: 480px){h1.svelte-1kk9opm{font-size:4em}}`
				`@ -0,0 +1 @@`
				`ul.svelte-1frg2tf{margin:0 0 1em 0;line-height:1.5}`
				`@ -0,0 +1 @@`
				import{S as t,i as s,s as e,e as l,t as n,b as o,f as r,g as a,d as h,h as c,k as f,l as i,m as u,a as g,q as p,c as d,n as m,o as v}from"./client.5cc55ff9.js";function E(t,s,e){const l=t.slice();return l[1]=s[e],l}function b(t){let s,e,g,p,d=t[1].title+"";return{c(){s=l("li"),e=l("a"),g=n(d),this.h()},l(t){s=o(t,"LI",{});var l=r(s);e=o(l,"A",{rel:!0,href:!0});var n=r(e);g=a(n,d),n.forEach(h),l.forEach(h),this.h()},h(){c(e,"rel","prefetch"),c(e,"href",p="blog/"+t[1].slug)},m(t,l){f(t,s,l),i(s,e),i(e,g)},p(t,s){1&s&&d!==(d=t[1].title+"")&&u(g,d),1&s&&p!==(p="blog/"+t[1].slug)&&c(e,"href",p)},d(t){t&&h(s)}}}function j(t){let s,e,u,j,x,L=t[0],R=[];for(let s=0;s<L.length;s+=1)R[s]=b(E(t,L,s));return{c(){s=g(),e=l("h1"),u=n("Recent posts"),j=g(),x=l("ul");for(let t=0;t<R.length;t+=1)R[t].c();this.h()},l(t){p('[data-svelte="svelte-hfp9t8"]',document.head).forEach(h),s=d(t),e=o(t,"H1",{});var l=r(e);u=a(l,"Recent posts"),l.forEach(h),j=d(t),x=o(t,"UL",{class:!0});var n=r(x);for(let t=0;t<R.length;t+=1)R[t].l(n);n.forEach(h),this.h()},h(){document.title="Blog",c(x,"class","svelte-1frg2tf")},m(t,l){f(t,s,l),f(t,e,l),i(e,u),f(t,j,l),f(t,x,l);for(let t=0;t<R.length;t+=1)R[t].m(x,null)},p(t,[s]){if(1&s){let e;for(L=t[0],e=0;e<L.length;e+=1){const l=E(t,L,e);R[e]?R[e].p(l,s):(R[e]=b(l),R[e].c(),R[e].m(x,null))}for(;e<R.length;e+=1)R[e].d(1);R.length=L.length}},i:m,o:m,d(t){t&&h(s),t&&h(e),t&&h(j),t&&h(x),v(R,t)}}}function x(){return this.fetch("blog.json").then((t=>t.json())).then((t=>({posts:t})))}function L(t,s,e){let{posts:l}=s;return t.$$set=t=>{"posts"in t&&e(0,l=t.posts)},[l]}class R extends t{constructor(t){super(),s(this,t,L,j,e,{posts:0})}}export{R as default,x as preload};
				`@ -0,0 +1 @@`
				import{S as s,i as e,s as a,a as t,e as c,t as r,q as l,d as i,c as o,b as n,f as h,g as p,h as f,j as d,k as v,l as u,n as g}from"./client.5cc55ff9.js";function m(s){let e,a,m,k,E,G,S,b,j,x,I,T,y,H;return{c(){e=t(),a=c("h1"),m=r("Great success!"),k=t(),E=c("figure"),G=c("img"),b=t(),j=c("figcaption"),x=r("Have fun with Sapper!"),I=t(),T=c("p"),y=c("strong"),H=r("Try editing this file (src/routes/index.svelte) to test live reloading."),this.h()},l(s){l('[data-svelte="svelte-oh6yg0"]',document.head).forEach(i),e=o(s),a=n(s,"H1",{class:!0});var t=h(a);m=p(t,"Great success!"),t.forEach(i),k=o(s),E=n(s,"FIGURE",{class:!0});var c=h(E);G=n(c,"IMG",{alt:!0,src:!0,class:!0}),b=o(c),j=n(c,"FIGCAPTION",{});var r=h(j);x=p(r,"Have fun with Sapper!"),r.forEach(i),c.forEach(i),I=o(s),T=n(s,"P",{class:!0});var f=h(T);y=n(f,"STRONG",{});var d=h(y);H=p(d,"Try editing this file (src/routes/index.svelte) to test live reloading."),d.forEach(i),f.forEach(i),this.h()},h(){document.title="Sapper project template",f(a,"class","svelte-1kk9opm"),f(G,"alt","Success Kid"),d(G.src,S="/client/465898c830bb9d2c.jpg")\|\|f(G,"src","/client/465898c830bb9d2c.jpg"),f(G,"class","svelte-1kk9opm"),f(E,"class","svelte-1kk9opm"),f(T,"class","svelte-1kk9opm")},m(s,t){v(s,e,t),v(s,a,t),u(a,m),v(s,k,t),v(s,E,t),u(E,G),u(E,b),u(E,j),u(j,x),v(s,I,t),v(s,T,t),u(T,y),u(y,H)},p:g,i:g,o:g,d(s){s&&i(e),s&&i(a),s&&i(k),s&&i(E),s&&i(I),s&&i(T)}}}class k extends s{constructor(s){super(),e(this,s,null,m,a,{})}}export{k as default};
				`@ -0,0 +1 @@`
				function e(e){return Promise.all(e.map((function(e){return new Promise((function(t,n){var r=new URL(e,import.meta.url),l=document.baseURI;if(!l){var o=document.getElementsByTagName("base");l=o.length?o[0].href:document.URL}var u=(""+r).substring(l.length),a=document.querySelector('link[rel=stylesheet][href="'+u+'"]')\|\|document.querySelector('link[rel=stylesheet][href="'+r+'"]');a\|\|((a=document.createElement("link")).rel="stylesheet",a.href=r,document.head.appendChild(a)),a.sheet?t():(a.onload=function(){return t()},a.onerror=n)}))})))}export{e as default};
				`@ -0,0 +1 @@`
				import{x as t,_ as n,a as e,b as r,c as s,i as a,d as o,S as c,s as u,e as i,f,t as l,q as h,g as p,h as v,j as m,k as d,l as y,m as x,o as R,p as b,v as g,u as j,r as w}from"./client.0725e74f.js";function k(t,n,e,r,s,a,o){try{var c=t[a](o),u=c.value}catch(t){return void e(t)}c.done?n(u):Promise.resolve(u).then(r,s)}function E(t){return function(){var n=this,e=arguments;return new Promise((function(r,s){var a=t.apply(n,e);function o(t){k(a,r,s,o,c,"next",t)}function c(t){k(a,r,s,o,c,"throw",t)}o(void 0)}))}}function H(t){var n=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var s,a=e(t);if(n){var o=e(this).constructor;s=Reflect.construct(a,arguments,o)}else s=a.apply(this,arguments);return r(this,s)}}function P(t){var n,e,r,s,a,o,c=t[0].title+"",u=t[0].html+"";return document.title=n=t[0].title,{c:function(){e=i(),r=f("h1"),s=l(c),a=i(),o=f("div"),this.h()},l:function(t){h('[data-svelte="svelte-1uty71u"]',document.head).forEach(p),e=v(t),r=m(t,"H1",{});var n=d(r);s=y(n,c),n.forEach(p),a=v(t),o=m(t,"DIV",{class:!0}),d(o).forEach(p),this.h()},h:function(){x(o,"class","content svelte-emm3f3")},m:function(t,n){R(t,e,n),R(t,r,n),b(r,s),R(t,a,n),R(t,o,n),o.innerHTML=u},p:function(t,e){var r=g(e,1)[0];1&r&&n!==(n=t[0].title)&&(document.title=n),1&r&&c!==(c=t[0].title+"")&&j(s,c),1&r&&u!==(u=t[0].html+"")&&(o.innerHTML=u)},i:w,o:w,d:function(t){t&&p(e),t&&p(r),t&&p(a),t&&p(o)}}}function B(t){return L.apply(this,arguments)}function L(){return(L=E(t.mark((function n(e){var r,s,a;return t.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=e.params,t.next=3,this.fetch("blog/".concat(r.slug,".json"));case 3:return s=t.sent,t.next=6,s.json();case 6:if(a=t.sent,200!==s.status){t.next=11;break}return t.abrupt("return",{post:a});case 11:this.error(s.status,a.message);case 12:case"end":return t.stop()}}),n,this)})))).apply(this,arguments)}function M(t,n,e){var r=n.post;return t.$$set=function(t){"post"in t&&e(0,r=t.post)},[r]}var T=function(t){n(r,c);var e=H(r);function r(t){var n;return s(this,r),n=e.call(this),a(o(n),t,M,P,u,{post:0}),n}return r}();export{T as default,B as preload};
				`@ -0,0 +1 @@`
				import{_ as t,a as e,b as n,c as a,i as r,d as s,S as o,s as c,e as u,f as i,t as f,q as h,g as l,h as p,j as v,k as d,l as m,o as b,p as y,r as R}from"./client.0725e74f.js";function T(t){var a=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,s=e(t);if(a){var o=e(this).constructor;r=Reflect.construct(s,arguments,o)}else r=s.apply(this,arguments);return n(this,r)}}function g(t){var e,n,a,r,s,o;return{c:function(){e=u(),n=i("h1"),a=f("About this site"),r=u(),s=i("p"),o=f("This is the 'about' page. There's not much here."),this.h()},l:function(t){h('[data-svelte="svelte-1ine71f"]',document.head).forEach(l),e=p(t),n=v(t,"H1",{});var c=d(n);a=m(c,"About this site"),c.forEach(l),r=p(t),s=v(t,"P",{});var u=d(s);o=m(u,"This is the 'about' page. There's not much here."),u.forEach(l),this.h()},h:function(){document.title="About"},m:function(t,c){b(t,e,c),b(t,n,c),y(n,a),b(t,r,c),b(t,s,c),y(s,o)},p:R,i:R,o:R,d:function(t){t&&l(e),t&&l(n),t&&l(r),t&&l(s)}}}var A=function(e){t(u,o);var n=T(u);function u(t){var e;return a(this,u),e=n.call(this),r(s(e),t,null,g,c,{}),e}return u}();export{A as default};