move to sveltekit

This commit is contained in:
jane 2021-09-18 13:32:52 -04:00
parent ed727faec9
commit 9c68f9748e
46 changed files with 205 additions and 39148 deletions

38893
frontend/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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"
}
}

View file

@ -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,
}
};

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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}
/>

View file

@ -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;
}

View file

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

View file

View file

View file

View file

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

View file

@ -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));
}

View file

View file

@ -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>

After

Width:  |  Height:  |  Size: 379 B

View file

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

View file

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -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"
}
]
}

View file

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB