move to sveltekit

frontend/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "TODO",
-  "description": "TODO",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "sapper dev",
-    "build": "sapper build --legacy",
-    "export": "sapper export --legacy",
-    "start": "node __sapper__/build",
-    "build-storybook": "build-storybook -s static",
-    "storybook": "start-storybook -p 9009 -s static"
-  },
-  "dependencies": {
-    "compression": "^1.7.1",
-    "polka": "next",
-    "sirv": "^1.0.0"
-  },
-  "devDependencies": {
-    "sapper": "^0.28.0",
-    "svelte": "^3.17.3",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "@rollup/plugin-babel": "^5.0.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.4.0",
-    "@rollup/plugin-url": "^5.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/svelte": "^6.3.7",
-    "@storybook/theming": "^6.3.7"
-  }
-}

frontend/rollup.config.js

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

frontend/src/components/Header.svelte

@@ -1,48 +0,0 @@
-<script>
-  import './header.css';
-  import Button from './Button.svelte';
-
-  import { createEventDispatcher } from 'svelte';
-
-  export let user = null;
-
-  const dispatch = createEventDispatcher();
-
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
-</script>
-
-<header>
-  <div class="wrapper">
-    <div>
-      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fillRule="evenodd">
-          <path
-            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-            fill="#FFF" />
-          <path
-            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-            fill="#555AB9" />
-          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
-        </g>
-      </svg>
-      <h1>Acme</h1>
-    </div>
-    <div>
-      {#if user}
-        <Button size="small" on:click={onLogout} label="Log out" />
-      {/if}
-      {#if !user}
-        <Button size="small" on:click={onLogin} label="Log in" />
-        <Button primary size="small" on:click={onCreateAccount} label="Sign up" />
-      {/if}
-    </div>
-  </div>
-</header>

frontend/src/routes/index.svelte

@@ -1,41 +0,0 @@
-<script>
-	// import successkid from 'images/successkid.jpg';
-</script>
-
-<style>
-	/* h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
-	h1 {
-		font-size: 2.8em;
-		text-transform: uppercase;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	} */
-</style>
-
-<svelte:head>
-	<title>Todo</title>
-</svelte:head>

frontend/src_old/components/Header.svelte

@@ -0,0 +1,49 @@
+<script>
+  import './header.css';
+  import Button from './Button.svelte';
+  import Image from './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>

frontend/src_old/components/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}
+/>

frontend/src_old/components/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;
+  }
+  

frontend/src_old/routes/index.svelte

@@ -0,0 +1,9 @@
+<script>
+</script>
+
+<svelte:head>
+  <title>Todo</title>
+</svelte:head>
+
+<style>
+</style>

frontend/src_old/utils/settings.js

@@ -0,0 +1 @@
+export const API_URL = 'https://dev.j4.pm/api';

frontend/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));
+}

frontend/static_old/clipboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>

frontend/static_old/global.css

@@ -0,0 +1,36 @@
+body {
+	margin: 0;
+	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
+	color: #333;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	margin: 0 0 0.5em 0;
+	font-weight: 400;
+	line-height: 1.2;
+}
+
+h1 {
+	font-size: 2em;
+}
+
+a {
+	color: inherit;
+}
+
+code {
+	font-family: menlo, inconsolata, monospace;
+	font-size: calc(1em - 2px);
+	color: #555;
+	background-color: #f0f0f0;
+	padding: 0.2em 0.4em;
+	border-radius: 2px;
+}
+
+@media (min-width: 400px) {
+	body {
+		font-size: 16px;
+	}
+}

frontend/static_old/manifest.json

@@ -0,0 +1,22 @@
+{
+	"background_color": "#ffffff",
+	"theme_color": "#333333",
+	"name": "TODO",
+	"short_name": "TODO",
+	"display": "minimal-ui",
+	"start_url": "/",
+	"icons": [
+		{
+			"src": "logo-192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "logo-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any maskable"
+		}
+	]
+}