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

fix(deps): remove daisyui classes
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 2m45s
Details

Browse Source
This commit is contained in:
Tim Wundenberg
2025-02-03 22:14:56 +01:00
parent 4a7551a7f7
commit 2f94cdda0f
9 changed files with 167 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
input.css
View File

@@ -1,6 +1,7 @@
@import 'tailwindcss'; @import 'tailwindcss';
@source './static/**/*.js'; @source './static/**/*.js';
@source './template/**/*.templ';
@theme { @theme {
--animate-fade: fadeOut 0.25s ease-in; --animate-fade: fadeOut 0.25s ease-in;
@@ -15,20 +16,3 @@
} }
} }
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

4
template/auth/delete_account.templ
View File

@@ -12,7 +12,7 @@ templ DeleteAccountComp() {
<p class="text-xl text-red-500 mb-4"> <p class="text-xl text-red-500 mb-4">
Are you sure you want to delete your account? This action is irreversible. Are you sure you want to delete your account? This action is irreversible.
</p> </p>
<label class="input input-bordered flex items-center gap-2"> <label class="flex items-center gap-2">
<input <input
type="password" type="password"
class="grow" class="grow"
@@ -24,7 +24,7 @@ templ DeleteAccountComp() {
autocapitalize="off" autocapitalize="off"
/> />
</label> </label>
<button class="btn btn-error self-end"> <button class="self-end">
Delete Account Delete Account
</button> </button>
</form> </form>

14
template/auth/user.templ
View File

@@ -1,9 +1,9 @@
package auth package auth
templ UserComp(user string) { templ UserComp(user string) {
<div id="user-info" class="flex gap-5 items-center"> <div id="user-info" class="flex gap-5 items-center">
if user != "" { if user != "" {
<div class="group inline-block relative"> <div class="inline-block relative">
<button class="font-semibold py-2 px-4 inline-flex items-center"> <button class="font-semibold py-2 px-4 inline-flex items-center">
<span class="mr-1">{ user }</span> <span class="mr-1">{ user }</span>
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -11,20 +11,20 @@ templ UserComp(user string) {
</svg> </svg>
</button> </button>
<div class="absolute hidden group-hover:block w-full"> <div class="absolute hidden group-hover:block w-full">
<ul class="menu bg-base-300 rounded-box w-fit float-right mr-4 p-3"> <ul class="w-fit float-right mr-4 p-3">
<li class="mb-1"> <li class="mb-1">
<a hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a> <a hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
</li> </li>
<li class="mb-1"> <li class="mb-1">
<a href="/auth/change-password">Change Password</a> <a href="/auth/change-password">Change Password</a>
</li> </li>
<li><a href="/auth/delete-account" class="text-error">Delete Account</a></li> <li><a href="/auth/delete-account" class="">Delete Account</a></li>
</ul> </ul>
</div> </div>
</div> </div>
} else { } else {
<a href="/auth/signup" class="btn btn-sm">Sign Up</a> <a href="/auth/signup" class="">Sign Up</a>
<a href="/auth/signin" class="btn btn-sm">Sign In</a> <a href="/auth/signin" class="">Sign In</a>
} }
</div> </div>
} }

2
template/auth/verify.templ
View File

@@ -12,7 +12,7 @@ templ VerifyComp() {
<p class="text-lg text-center"> <p class="text-lg text-center">
Please check your inbox/spam and click on the link to verify your account. Please check your inbox/spam and click on the link to verify your account.
</p> </p>
<button class="btn mt-8" hx-get="/api/auth/verify-resend" hx-sync="this:drop" hx-swap="outerHTML"> <button class="mt-8" hx-get="/api/auth/verify-resend" hx-sync="this:drop" hx-swap="outerHTML">
resend verification email resend verification email
</button> </button>
</div> </div>

8
template/auth/verify_response.templ
View File

@@ -1,7 +1,7 @@
package auth package auth
templ VerifyResponseComp(isVerified bool) { templ VerifyResponseComp(isVerified bool) {
<main> <main>
<div class="flex flex-col items-center justify-center h-screen"> <div class="flex flex-col items-center justify-center h-screen">
if isVerified { if isVerified {
<h2 class="text-6xl mb-10"> <h2 class="text-6xl mb-10">
@@ -10,7 +10,7 @@ templ VerifyResponseComp(isVerified bool) {
<p class="text-lg text-center"> <p class="text-lg text-center">
You have completed the verification process. Thank you! You have completed the verification process. Thank you!
</p> </p>
<a class="btn btn-primary mt-8" href="/"> <a class="mt-8" href="/">
Go Home Go Home
</a> </a>
} else { } else {
@@ -20,10 +20,10 @@ templ VerifyResponseComp(isVerified bool) {
<p class="text-lg text-center"> <p class="text-lg text-center">
Please try again by sign up process Please try again by sign up process
</p> </p>
<a class="btn btn-primary mt-8" href="/auth/signup"> <a class="mt-8" href="/auth/signup">
Sign Up Sign Up
</a> </a>
} }
</div> </div>
</main> </main>
} }

8
template/index.templ
View File

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

38
template/layout.templ
View File

@@ -1,29 +1,30 @@
package template package template
templ Layout(slot templ.Component, user templ.Component) { templ Layout(slot templ.Component, user templ.Component) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8"/>
<meta charset="utf-8" />
<title>web-app-template</title> <title>web-app-template</title>
<link rel="icon" href="/static/favicon.svg" /> <link rel="icon" href="/static/favicon.svg"/>
<link rel="stylesheet" href="/static/css/tailwind.css" /> <link rel="stylesheet" href="/static/css/tailwind.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="htmx-config" content='{ <meta
name="htmx-config"
content='{
"includeIndicatorStyles": false, "includeIndicatorStyles": false,
"selfRequestsOnly": true, "selfRequestsOnly": true,
"allowScriptTags": false "allowScriptTags": false
}' /> }'
/>
<script src="/static/js/htmx.min.js"></script> <script src="/static/js/htmx.min.js"></script>
<script src="/static/js/toast.js"></script> <script src="/static/js/toast.js"></script>
</head> </head>
<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
<div class="h-screen flex flex-col"> <div class="h-screen flex flex-col">
<div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow-sm"> <div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow-sm">
<a href="/" class="flex-1 flex gap-2"> <a href="/" class="flex-1 flex gap-2">
<img src="/static/favicon.svg" alt="web-app-template logo" /> <img src="/static/favicon.svg" alt="web-app-template logo"/>
<span>web-app-template</span> <span>web-app-template</span>
</a> </a>
@user @user
@@ -34,12 +35,11 @@ templ Layout(slot templ.Component, user templ.Component) {
} }
</div> </div>
</div> </div>
<div class="toast" id="toasts"> <div class="" id="toasts">
<div class="hidden alert" id="toast"> <div class="hidden" id="toast">
New message arrived. New message arrived.
</div> </div>
</div> </div>
</body> </body>
</html>
</html>
} }

10
template/not_found.templ
View File

@@ -1,11 +1,11 @@
package template package template
templ NotFound() { templ NotFound() {
<main class="flex h-full justify-center items-center "> <main class="flex h-full justify-center items-center">
<div class="bg-error p-16 rounded-lg"> <div class="p-16 rounded-lg">
<h1 class="text-4xl text-error-content mb-5">Not Found</h1> <h1 class="text-4xl mb-5">Not Found</h1>
<p class="text-lg text-error-content mb-5">The page you are looking for does not exist.</p> <p class="text-lg mb-5">The page you are looking for does not exist.</p>
<a href="/" class="btn btn-lg btn-primary">Go back to home</a> <a href="/" class="">Go back to home</a>
</div> </div>
</main> </main>
} }

46
template/workout/workout.templ
View File

@@ -1,33 +1,37 @@
package workout package workout
templ WorkoutComp(currentDate string) { templ WorkoutComp(currentDate string) {
<main class="mx-2"> <main class="mx-2">
<form class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10" hx-post="/api/workout" <form
hx-target="#workout-placeholder" hx-swap="outerHTML"> class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10"
hx-post="/api/workout"
hx-target="#workout-placeholder"
hx-swap="outerHTML"
>
<h2 class="text-4xl mb-8">Track your workout</h2> <h2 class="text-4xl mb-8">Track your workout</h2>
<input id="date" type="date" class="input input-bordered" value={ currentDate } name="date" /> <input id="date" type="date" class="" value={ currentDate } name="date"/>
<select class="select select-bordered w-full" name="type"> <select class="w-full" name="type">
<option>Push Ups</option> <option>Push Ups</option>
<option>Pull Ups</option> <option>Pull Ups</option>
</select> </select>
<input type="number" class="input input-bordered" placeholder="Sets" name="sets" /> <input type="number" class="" placeholder="Sets" name="sets"/>
<input type="number" class="input input-bordered" placeholder="Reps" name="reps" /> <input type="number" class="" placeholder="Reps" name="reps"/>
<button class="btn btn-primary self-end">Save</button> <button class="self-end">Save</button>
</form> </form>
<div hx-get="/api/workout" hx-trigger="load"></div> <div hx-get="/api/workout" hx-trigger="load"></div>
</main> </main>
} }
type Workout struct { type Workout struct {
Id string Id string
Date string Date string
Type string Type string
Sets string Sets string
Reps string Reps string
} }
templ WorkoutListComp(workouts []Workout) { templ WorkoutListComp(workouts []Workout) {
<div class="overflow-x-auto mx-auto max-w-(--breakpoint-lg)"> <div class="overflow-x-auto mx-auto max-w-lg">
<h2 class="text-4xl mt-14 mb-8">Workout history</h2> <h2 class="text-4xl mt-14 mb-8">Workout history</h2>
<table class="table table-auto max-w-full"> <table class="table table-auto max-w-full">
<thead> <thead>
@@ -46,14 +50,14 @@ templ WorkoutListComp(workouts []Workout) {
} }
</tbody> </tbody>
</table> </table>
</div> </div>
} }
templ WorkoutItemComp(w Workout, includePlaceholder bool) { templ WorkoutItemComp(w Workout, includePlaceholder bool) {
if includePlaceholder { if includePlaceholder {
<tr class="hidden" id="workout-placeholder"></tr> <tr class="hidden" id="workout-placeholder"></tr>
} }
<tr> <tr>
<th>{ w.Date }</th> <th>{ w.Date }</th>
<th>{ w.Type }</th> <th>{ w.Type }</th>
<th>{ w.Sets }</th> <th>{ w.Sets }</th>
@@ -65,5 +69,5 @@ if includePlaceholder {
</button> </button>
</div> </div>
</th> </th>
</tr> </tr>
} }