x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages Activity

#109 add home page again

Browse Source
This commit is contained in:
Tim Wundenberg
2024-08-23 19:16:30 +02:00
committed by Tim
parent 262f44d7cd
commit 99b249fa66
17 changed files with 96 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
package-lock.json generated
View File

@@ -9,7 +9,8 @@
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.4.10"
"daisyui": "^4.12.10",
"tailwindcss": "3.4.10"
}
},
"node_modules/@alloc/quick-lru": {
@@ -308,6 +309,17 @@
"node": ">= 8"
}
},
"node_modules/css-selector-tokenizer": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
"fastparse": "^1.1.2"
}
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -320,6 +332,36 @@
"node": ">=4"
}
},
"node_modules/culori": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
"node_modules/daisyui": {
"version": "4.12.10",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
"integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==",
"dev": true,
"license": "MIT",
"dependencies": {
"css-selector-tokenizer": "^0.8",
"culori": "^3",
"picocolors": "^1",
"postcss-js": "^4"
},
"engines": {
"node": ">=16.9.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/daisyui"
}
},
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -372,6 +414,13 @@
"node": ">= 6"
}
},
"node_modules/fastparse": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
"dev": true,
"license": "MIT"
},
"node_modules/fastq": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",

5
package.json
View File

@@ -4,13 +4,14 @@
"description": "Your (almost) independent tech stack to host on a VPC.",
"main": "index.js",
"scripts": {
"build": "tailwindcss build -o static/css/tailwind.css --minify",
"watch": "tailwindcss build -o static/css/tailwind.css --watch"
"build": "tailwindcss build -o static/css/tailwind.css --minify",
"watch": "tailwindcss build -o static/css/tailwind.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"daisyui": "^4.12.10",
"tailwindcss": "3.4.10"
}
}

2
service/static_ui.go
View File

@@ -12,7 +12,7 @@ func HandleStaticUi(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/" {
comp = templates.Layout(templates.NotFound())
} else {
comp = templates.Layout(nil)
comp = templates.Layout(templates.Index())
}
comp.Render(r.Context(), w)

15
tailwind.config.js
View File

@@ -1,9 +1,14 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/**/*.templ"],
theme: {
extend: {},
},
plugins: [],
content: ["./templates/**/*.templ"],
theme: {
extend: {},
},
plugins: [
require('daisyui'),
],
daisyui: {
themes: ["retro"],
},
}

5
templates/footer.templ
View File

@@ -1,5 +0,0 @@
package templates
templ footer() {
<div>Footer</div>
}

9
templates/header.templ
View File

@@ -2,5 +2,12 @@
package templates
templ header() {
<div>Header</div>
<div class="flex justify-end items-center gap-2 py-1 px-2 md:gap-10 md:px-10 md:py-2 shadow">
<a href="/" class="flex-1 flex gap-2">
<img src="/static/favicon.svg" alt="ME-FIT logo"/>
<span>ME-FIT</span>
</a>
<a href="/signup" class="btn btn-sm">Sign Up</a>
<a href="/signin" class="btn btn-sm">Sign In</a>
</div>
}

16
templates/index.templ Normal file
View File

@@ -0,0 +1,16 @@
package templates
templ Index() {
<div class="hero bg-base-200 h-full">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Next Level Workout Tracker</h1>
<p class="py-6">
Ever wanted to track your workouts and see your progress over time? ME-FIT is the perfect
solution for you.
</p>
<a href="/app" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
}

13
templates/layout.templ
View File

@@ -12,11 +12,14 @@ templ Layout(comp templ.Component) {
<script defer src="https://umami.me-fit.eu/script.js" data-website-id="3c8efb09-44e4-4372-8a1e-c3bc675cd89a"></script>
</head>
<body>
@header()
if comp != nil {
@comp
}
@footer()
<div class="h-screen flex flex-col">
@header()
<div class="flex-1">
if comp != nil {
@comp
}
</div>
</div>
</body>
</html>
}

40
view/package.json
View File

@@ -1,40 +0,0 @@
{
"name": "template",
"version": "0.0.2",
"private": true,
"scripts": {
"dev": "PUBLIC_BASE_API_URL=http://localhost:8080 vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@iconify/json": "2.2.240",
"@sveltejs/adapter-static": "3.0.4",
"@sveltejs/kit": "2.5.24",
"@sveltejs/vite-plugin-svelte": "3.1.2",
"@types/eslint": "9.6.0",
"autoprefixer": "10.4.20",
"daisyui": "4.12.10",
"eslint": "9.9.1",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-svelte": "2.43.0",
"firebaseui": "6.1.0",
"globals": "15.9.0",
"postcss": "8.4.41",
"prettier": "3.3.3",
"prettier-plugin-svelte": "3.2.6",
"svelte": "4.2.18",
"svelte-check": "3.8.6",
"tailwindcss": "3.4.10",
"tslib": "2.6.3",
"typescript": "5.5.4",
"typescript-eslint": "8.2.0",
"unplugin-icons": "0.19.2",
"vite": "5.4.2"
},
"type": "module"
}

16
view/src/lib/firebase.ts
View File

@@ -1,16 +0,0 @@
import { getAuth } from 'firebase/auth';
import { initializeApp } from 'firebase/app';
const app = initializeApp({
apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q',
authDomain: 'me-fit-a9365.firebaseapp.com',
projectId: 'me-fit-a9365',
storageBucket: 'me-fit-a9365.appspot.com',
messagingSenderId: '631045688520',
appId: '1:631045688520:web:c7e0534927b52b0db629fd'
});
const auth = getAuth(app);
export { auth };

27
view/src/lib/toast.ts
View File

@@ -1,27 +0,0 @@
import { writable } from "svelte/store";
type Type = 'success' | 'info' | 'warning' | 'error';
type Toast = {
message: string;
type: Type;
}
const toastStore = writable<Toast[]>([]);
const addToast = (message: string, type: Type) => {
const newToast = { message, type };
toastStore.update((toasts) => {
return [...toasts, newToast];
});
setTimeout(() => {
toastStore.update((toasts) => toasts.filter((t) => t !== newToast));
}, 5000);
}
export { toastStore, addToast, };
export type { Toast }

82
view/src/routes/+layout.svelte
View File

@@ -1,82 +0,0 @@
<script lang="ts">
import '../app.css';
import { onDestroy, onMount } from 'svelte';
import type { Auth, User } from 'firebase/auth';
import { addToast, toastStore } from '$lib/toast';
import type { Toast } from '$lib/toast';
var auth: Auth | null = null;
var user: User | null = null;
var unsubAuth: (() => void) | null = null;
let toasts: Toast[] = [];
let unsubToast = toastStore.subscribe((value) => {
toasts = value;
});
onMount(async () => {
const { auth: _auth } = await import('../lib/firebase');
auth = _auth;
user = auth.currentUser;
unsubAuth = auth.onAuthStateChanged((newUser) => {
user = newUser;
});
});
onDestroy(() => {
unsubToast();
if (unsubAuth) {
unsubAuth();
}
});
const signOut = async () => {
try {
await (auth as Auth).signOut();
addToast('Signed out successfully', 'success');
} catch (error) {
console.error(error);
}
};
</script>
<svelte:head>
<title>ME-FIT</title>
</svelte:head>
<div class="h-screen flex flex-col">
<div class="flex justify-end items-center gap-2 py-1 px-2 md:gap-10 md:px-10 md:py-2 shadow">
<a href="/" class="flex-1 flex gap-2">
<img src="/favicon.svg" alt="ME-FIT logo" />
<span>ME-FIT</span>
</a>
{#if user}
<p class="hidden md:block">{user?.email}</p>
<button class="btn btn-sm" on:click={async () => signOut()}>Sign Out</button>
{:else}
<a href="/signup" class="btn btn-sm">Sign Up</a>
<a href="/signin" class="btn btn-sm">Sign In</a>
{/if}
</div>
<div class="flex-1">
<slot></slot>
</div>
<!-- This is needed so all class names are inside the bundle The class names are used dynamically, so -->
<!-- tailwind can't know -->
<div class="hidden">
<div class="alert-info text-info-content"></div>
<div class="alert-success text-success-content"></div>
<div class="alert-warning text-warning-content"></div>
<div class="alert-error text-error-content"></div>
</div>
<div class="toast toast-end">
{#each toasts as toast}
<div class="alert alert-{toast.type}">
<span class="text-{toast.type}-content">{toast.message}</span>
</div>
{/each}
</div>
</div>

4
view/src/routes/+layout.ts
View File

@@ -1,4 +0,0 @@
// This is needed for adapter-static
export const prerender = true;
// This is needed for nginx to work
export const trailingSlash = 'always';

12
view/src/routes/+page.svelte
View File

@@ -1,12 +0,0 @@
<div class="hero bg-base-200 h-full">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Next Level Workout Tracker</h1>
<p class="py-6">
Ever wanted to track your workouts and see your progress over time? ME-FIT is the perfect
solution for you.
</p>
<a href="/app" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>

66
view/src/routes/signin/+page.svelte
View File

@@ -1,66 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { addToast } from '$lib/toast';
import { signInWithEmailAndPassword } from 'firebase/auth';
const signIn = async (event: SubmitEvent) => {
const { auth } = await import('$lib/firebase');
try {
const data = new FormData(event.target as HTMLFormElement);
await signInWithEmailAndPassword(
auth,
data.get('email') as string,
data.get('password') as string
);
goto('/');
} catch (error: any) {
const errorStr = error.code ? error.code : error.message;
addToast('Failed to sign in: ' + errorStr, 'error');
}
};
</script>
<form
class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
on:submit|preventDefault={signIn}
>
<h2 class="text-6xl mb-10">Sign In</h2>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
/>
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
/>
</svg>
<input type="text" class="grow" placeholder="Email" name="email" />
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clip-rule="evenodd"
/>
</svg>
<input type="password" class="grow" placeholder="Password" name="password" />
</label>
<div class="flex justify-end items-center gap-2">
<a href="/signup" class="link text-gray-500 text-sm">Don't have an account? Sign Up</a>
<button class="btn btn-primary self-end">Sign In</button>
</div>
</form>

67
view/src/routes/signup/+page.svelte
View File

@@ -1,67 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { addToast } from '$lib/toast';
import { createUserWithEmailAndPassword } from 'firebase/auth';
const signUp = async (event: SubmitEvent) => {
const { auth } = await import('$lib/firebase');
try {
const data = new FormData(event.target as HTMLFormElement);
await createUserWithEmailAndPassword(
auth,
data.get('email') as string,
data.get('password') as string
);
addToast('Signed up successfully', 'success');
goto('/');
} catch (error: any) {
const errorStr = error.code ? error.code : error.message;
addToast('Failed to sign up: ' + errorStr, 'error');
}
};
</script>
<form
class="px-2 max-w-xl mx-auto flex flex-col gap-4 h-full justify-center"
on:submit|preventDefault={signUp}
>
<h2 class="text-6xl mb-10">Sign Up</h2>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
/>
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
/>
</svg>
<input type="text" class="grow" placeholder="Email" name="email" />
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clip-rule="evenodd"
/>
</svg>
<input type="password" class="grow" placeholder="Password" name="password" />
</label>
<div class="flex justify-end items-center gap-2">
<a href="/signin" class="link text-gray-500 text-sm">Already have an account? Sign In</a>
<button class="btn btn-primary self-end">Sign Up</button>
</div>
</form>

14
view/tailwind.config.js
View File

@@ -1,14 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {},
},
plugins: [
require("daisyui"),
],
daisyui: {
themes: ["retro"],
},
}