better styling and htmx examples

This commit is contained in:
0ceanSlim 2024-06-13 16:13:14 -04:00
parent 71ef8788e2
commit d9d0b39d59
3 changed files with 60 additions and 34 deletions

View File

@ -1,11 +1,18 @@
{{define "view"}} {{define "view"}}
<main> <main>
<section> <div>You are now viewing the {{.Title}}</div>
<h1 class="font-bold">Serve Static Files Like this Gopher</h1> <h1 class="font-bold">Serve Static Files Like this Gopher</h1>
<div class="flex justify-center mb-4">
<button hx-get="/" class="p-2 text-white bg-blue-400 rounded-md"> <img src="/static/img/gopher.png" alt="alternate text" />
Click Me! </div>
</button> <div>You can get back to the index view with this button</div>
<img src="/static/img/gopher.png" alt="alternate text"> <button
</main> hx-get="/"
{{end}} hx-swap="outerHTML"
hx-target="body"
class="p-2 text-white bg-blue-400 rounded-md"
>
Click Me 😀
</button>
</main>
{{end}}

View File

@ -1,27 +1,46 @@
{{define "view"}} {{define "view"}}
<main> <main class="flex flex-col items-center justify-center p-8">
<section> <div class="mb-4">You are now viewing the {{.Title}}</div>
<button
hx-get="/api/example" <div class="mb-2">
class="p-2 text-white bg-orange-400 rounded-md" Clicking the blue button will replace the entire page with an additional
> example view
Click Me! </div>
</button> <button
<button hx-get="/example"
hx-get="/example" class="p-2 mb-4 text-white bg-blue-400 rounded-md"
class="p-2 text-white bg-blue-400 rounded-md" hx-swap="outerHTML"
hx-swap="outerHTML" hx-target="body"
> >
Example page button Click Me 😀
</button> </button>
<h1 class="font-bold">API Example</h1> <h1 class="mb-2 font-bold">
<a href="/api/example" target="_blank">Access Example API</a> Clicking the orange button will replace the content in the box below with
<h2>Content Section</h2> the example API
<p> </h1>
This is the main content of your web app. You can add any HTML content <button
here. hx-get="/api/example"
hx-swap="outerHTML"
class="p-2 mb-2 text-white bg-orange-400 rounded-md"
hx-target="#dynamic-content"
>
Click Me 😀
</button>
<div
class="w-full max-w-md p-4 mb-6 text-center border-2 border-white border-solid rounded-md shadow-inner bg-bgPrimary"
>
<!-- Content loaded via HTMX will appear here -->
<p id="dynamic-content" class="text-textPrimary">
Dynamic content will be displayed here.
</p> </p>
<a href="/example">Another Example Route can be found here</a> </div>
</section> <div class="space-y-2 text-center">
<a href="/api/example" target="_blank" class="block text-blue-400"
>You can still access traditional, json style api's</a
>
<a href="/example" class="block"
>You can also create traditional route links</a
>
</div>
</main> </main>
{{end}} {{end}}

View File

@ -1,7 +1,7 @@
{{define "header"}} {{define "header"}}
<header> <header>
<h1 class="mt-8 mb-8 text-3xl font-bold text-textSecondary"> <h1 class="mt-8 mb-8 text-3xl font-bold text-textSecondary">
Welcome to My GO Web App Framework {{.Title}} Welcome to My GO Web App Framework
</h1> </h1>
</header> </header>
{{end}} {{end}}