jeffemmett
/
odd-app-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #10 from fission-suite/styles 

Match style guide
This commit is contained in:
Jess Martin 2022-07-21 12:36:36 -04:00 committed by GitHub
parent a7b3104a23 01a791eac4
commit 49fecacbe0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 145 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintignore
View File

@ -1,6 +1,4 @@
.eslintrc.cjs
svelte.config.js
tsnode-loader.js
src/hooks.ts
src/lib/controllers/keyboard.ts
static/webaudio-controls.js
src/hooks.ts

1
.prettierrc.cjs
View File

@ -1,6 +1,5 @@
module.exports = {
arrowParens: 'avoid',
plugins: ['prettier-plugin-svelte'],
semi: false,
singleQuote: true,
svelteBracketNewLine: true,

64
src/app.html
View File

@ -1,33 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<html class="bg-white" lang="en">
<head>
<title>WebNative Template</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="description" content="TODO" />
<meta property="og:title" content="WebNative Template" />
<meta
property="og:description"
content="A template for WebNative applications"
/>
<meta property="og:url" content="TODO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="TODO" />
<meta property="og:image:alt" content="WebNative Template" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="WebNative Template" />
<meta
name="twitter:description"
content="A template for WebNative applications"
/>
<meta name="twitter:image" content="TODO" />
<meta name="twitter:image:alt" content="WebNative Template" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
<head>
<title>WebNative Template</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="description" content="TODO">
<meta property="og:title" content="WebNative Template">
<meta property="og:description" content="A template for WebNative applications">
<meta property="og:url" content="TODO">
<meta property="og:type" content="website">
<meta property="og:image" content="TODO">
<meta property="og:image:alt" content="WebNative Template">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="WebNative Template">
<meta name="twitter:description" content="A template for WebNative applications">
<meta name="twitter:image" content="TODO">
<meta name="twitter:image:alt" content="WebNative Template">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
%sveltekit.head%
</head>
%sveltekit.head%
</head>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
</html>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
</html>

25
src/components/Header.svelte
View File

@ -1,3 +1,22 @@
<header>
<a href="/connect">Connect</a>
</header>
<header class="navbar bg-base-100 pt-0">
<div class="flex-1">
<button class="btn btn-sm btn-square btn-ghost">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="inline-block w-7 h-7 stroke-current"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/></svg
>
</button>
</div>
<div class="flex-none">
<a class="btn btn-sm btn-primary normal-case" href="/connect">Connect</a>
</div>
</header>

20
src/components/auth/Connect.svelte
View File

@ -1,4 +1,18 @@
<input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
<div class="modal">
<div class="modal-box w-80 relative text-center">
<a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
<div>Connect</div>
<a href="/register">Register</a>
<div>
<h3 class="mb-7 text-xl font-serif">Connect to AppName</h3>
<div>
<a class="btn btn-primary mb-5 w-full" href="/register"
>Create a new account</a
>
<a class="btn btn-primary btn-outline w-full" href="/"
>I have an existing account</a
>
</div>
</div>
</div>
</div>

28
src/components/auth/Register.svelte
View File

@ -7,7 +7,6 @@
const { value: username } = event.target as HTMLInputElement
console.log(username)
}
// Register the user
@ -17,18 +16,33 @@
<input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
<div class="modal">
<div class="modal-box w-11/12 max-w-5xl">
<div class="modal-box w-80 relative text-center">
<a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
<div>
<h3>Choose a username</h3>
<h3 class="mb-7 text-xl font-serif">Choose a username</h3>
<input
type="text"
placeholder="Type here"
class="input input-bordered w-full max-w-xs"
class="input input-bordered w-full mb-3 block"
on:input={checkUsername}
/>
<div>
<a class="btn btn-secondary" href="/connect">Back</a>
<button class="btn btn-primary">Register</button>
<div class="text-left">
<input
type="checkbox"
id="shared-computer"
class="cursor-pointer appearance-none w-5 h-5 border border-primary checked:bg-primary rounded-md align-bottom inline-grid place-content-center"
/>
<label
for="shared-computer"
class="cursor-pointer ml-1 text-sm text-slate-700 inline-grid"
>This is a shared computer</label
>
</div>
<div class="mt-5">
<a class="btn btn-primary btn-outline" href="/connect">Back</a>
<button class="btn btn-primary" disabled>Register</button>
</div>
</div>
</div>

22
src/global.css
View File

@ -1,3 +1,23 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
input[type='checkbox']::before {
content: '';
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 60ms transform ease-in-out;
box-shadow: inset 1em 1em #fff;
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
cursor: pointer;
}
input[type='checkbox']:checked::before {
transform: scale(1);
}
.modal-box {
@apply p-8;
}

6
src/hooks.ts
View File

@ -2,7 +2,7 @@
export async function handle({ event, resolve }) {
const response = await resolve(event, {
ssr: false
});
})
return response;
}
return response
}

4
src/lib/common/example.test.ts
View File

@ -1,5 +1,5 @@
import test from 'ava'
test('my passing test', t => {
t.pass()
})
t.pass()
})

6
src/lib/common/webnative.ts
View File

@ -14,13 +14,13 @@ const fissionInit = {
permissions: {
app: {
name: 'app-name',
creator: 'creator-name',
creator: 'creator-name'
},
// Ask the user permission to additional filesystem paths
fs: {
// private: [webnative.path.directory('Documents', 'Contacts')],
},
},
}
}
}
// TODO: Add a flag or script to turn debugging on/off

3
src/lib/theme/index.ts
View File

@ -4,7 +4,7 @@ export type Theme = 'light' | 'dark'
export const loadTheme = (): Theme => {
if (browser) {
return localStorage.getItem('theme') as Theme ?? 'dark'
return (localStorage.getItem('theme') as Theme) ?? 'light'
}
}
@ -13,4 +13,3 @@ export const storeTheme = (theme: Theme): void => {
localStorage.setItem('theme', theme)
}
}

4
src/routes/__layout.svelte
View File

@ -9,10 +9,8 @@
})
</script>
<div data-theme={$theme}>
<Header></Header>
<Header />
<slot />
</div>

3
src/routes/connect.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts">
import Connect from '$components/auth/Connect.svelte'
</script>
<Connect></Connect>
<Connect />

2
src/routes/index.svelte
View File

@ -8,7 +8,7 @@
init()
</script>
<h1>Hello world!</h1>
<h1 class="text-center">Application Interface</h1>
<style>
</style>

4
src/routes/register.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import Register from '$components/auth/Register.svelte'
</script>
<Register></Register>
<Register />

2
src/stores.ts
View File

@ -3,4 +3,4 @@ import type { Writable } from 'svelte/store'
import { loadTheme } from '$lib/theme'
import type { Theme } from '$lib/theme'
export const theme: Writable<Theme> = writable(loadTheme())
export const theme: Writable<Theme> = writable(loadTheme())

18
tailwind.config.cjs
View File

@ -13,22 +13,24 @@ module.exports = {
neutral: "#282828",
"base-content": "#ffffff",
"base-100": "#111111",
"--rounded-box": "2px",
"--rounded-btn": "2px",
"--rounded-box": "16px",
"--rounded-btn": "8px",
"--rounded-badge": "2px",
"--tab-radius": "2px"
"--tab-radius": "2px",
"--btn-text-case": "normal-case"
},
light : {
primary: "#43919b",
light: {
primary: "#407FF3",
secondary: "#30aadd",
accent: "#00ffc6",
neutral: "#e5e5e5",
"base-content": "#000000",
"base-100": "#ffffff",
"--rounded-box": "2px",
"--rounded-btn": "2px",
"--rounded-box": "16px",
"--rounded-btn": "8px",
"--rounded-badge": "2px",
"--tab-radius": "2px"
"--tab-radius": "2px",
"--btn-text-case": "normal-case"
},
},
],

2
tsconfig.json
View File

@ -25,7 +25,7 @@
"paths": {
"$components/*": ["src/components/*"],
"$lib/*": ["src/lib/*"],
"$static/*": ["static/*"],
"$static/*": ["static/*"]
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]

4
vite.config.ts
View File

@ -3,13 +3,13 @@ import { resolve } from 'path'
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
plugins: [sveltekit()],
resolve: {
alias: {
$components: resolve('./src/components'),
$static: resolve('./static')
}
},
}
}
export default config