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 .eslintrc.cjs
svelte.config.js svelte.config.js
tsnode-loader.js tsnode-loader.js
src/hooks.ts src/hooks.ts
src/lib/controllers/keyboard.ts
static/webaudio-controls.js

1
.prettierrc.cjs
View File

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

64
src/app.html
View File

@ -1,33 +1,37 @@
<!DOCTYPE html> <!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> %sveltekit.head%
<title>WebNative Template</title> </head>
<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% <body>
</head> <div id="svelte">%sveltekit.body%</div>
</body>
<body> </html>
<div id="svelte">%sveltekit.body%</div>
</body>
</html>

25
src/components/Header.svelte
View File

@ -1,3 +1,22 @@
<header> <header class="navbar bg-base-100 pt-0">
<a href="/connect">Connect</a> <div class="flex-1">
</header> <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> <div>
<h3 class="mb-7 text-xl font-serif">Connect to AppName</h3>
<a href="/register">Register</a> <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 const { value: username } = event.target as HTMLInputElement
console.log(username) console.log(username)
} }
// Register the user // Register the user
@ -17,18 +16,33 @@
<input type="checkbox" id="my-modal-5" checked class="modal-toggle" /> <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
<div class="modal"> <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> <div>
<h3>Choose a username</h3> <h3 class="mb-7 text-xl font-serif">Choose a username</h3>
<input <input
type="text" type="text"
placeholder="Type here" placeholder="Type here"
class="input input-bordered w-full max-w-xs" class="input input-bordered w-full mb-3 block"
on:input={checkUsername} on:input={checkUsername}
/> />
<div> <div class="text-left">
<a class="btn btn-secondary" href="/connect">Back</a> <input
<button class="btn btn-primary">Register</button> 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> </div>
</div> </div>

22
src/global.css
View File

@ -1,3 +1,23 @@
@tailwind base; @tailwind base;
@tailwind components; @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 }) { export async function handle({ event, resolve }) {
const response = await resolve(event, { const response = await resolve(event, {
ssr: false ssr: false
}); })
return response; return response
} }

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

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

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

@ -14,13 +14,13 @@ const fissionInit = {
permissions: { permissions: {
app: { app: {
name: 'app-name', name: 'app-name',
creator: 'creator-name', creator: 'creator-name'
}, },
// Ask the user permission to additional filesystem paths // Ask the user permission to additional filesystem paths
fs: { fs: {
// private: [webnative.path.directory('Documents', 'Contacts')], // private: [webnative.path.directory('Documents', 'Contacts')],
}, }
}, }
} }
// TODO: Add a flag or script to turn debugging on/off // 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 => { export const loadTheme = (): Theme => {
if (browser) { 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) localStorage.setItem('theme', theme)
} }
} }

4
src/routes/__layout.svelte
View File

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

3
src/routes/connect.svelte
View File

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

2
src/routes/index.svelte
View File

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

4
src/routes/register.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import Register from '$components/auth/Register.svelte' import Register from '$components/auth/Register.svelte'
</script> </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 { loadTheme } from '$lib/theme'
import type { Theme } 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", neutral: "#282828",
"base-content": "#ffffff", "base-content": "#ffffff",
"base-100": "#111111", "base-100": "#111111",
"--rounded-box": "2px", "--rounded-box": "16px",
"--rounded-btn": "2px", "--rounded-btn": "8px",
"--rounded-badge": "2px", "--rounded-badge": "2px",
"--tab-radius": "2px" "--tab-radius": "2px",
"--btn-text-case": "normal-case"
}, },
light : { light: {
primary: "#43919b", primary: "#407FF3",
secondary: "#30aadd", secondary: "#30aadd",
accent: "#00ffc6", accent: "#00ffc6",
neutral: "#e5e5e5", neutral: "#e5e5e5",
"base-content": "#000000", "base-content": "#000000",
"base-100": "#ffffff", "base-100": "#ffffff",
"--rounded-box": "2px", "--rounded-box": "16px",
"--rounded-btn": "2px", "--rounded-btn": "8px",
"--rounded-badge": "2px", "--rounded-badge": "2px",
"--tab-radius": "2px" "--tab-radius": "2px",
"--btn-text-case": "normal-case"
}, },
}, },
], ],

2
tsconfig.json
View File

@ -25,7 +25,7 @@
"paths": { "paths": {
"$components/*": ["src/components/*"], "$components/*": ["src/components/*"],
"$lib/*": ["src/lib/*"], "$lib/*": ["src/lib/*"],
"$static/*": ["static/*"], "$static/*": ["static/*"]
} }
}, },
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] "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} */ /** @type {import('vite').UserConfig} */
const config = { const config = {
plugins: [sveltekit()], plugins: [sveltekit()],
resolve: { resolve: {
alias: { alias: {
$components: resolve('./src/components'), $components: resolve('./src/components'),
$static: resolve('./static') $static: resolve('./static')
} }
}, }
} }
export default config export default config