better styling and htmx examples
This commit is contained in:
parent
71ef8788e2
commit
d9d0b39d59
@ -1,11 +1,18 @@
|
||||
{{define "view"}}
|
||||
<main>
|
||||
<section>
|
||||
<h1 class="font-bold">Serve Static Files Like this Gopher</h1>
|
||||
|
||||
<button hx-get="/" class="p-2 text-white bg-blue-400 rounded-md">
|
||||
Click Me!
|
||||
</button>
|
||||
<img src="/static/img/gopher.png" alt="alternate text">
|
||||
</main>
|
||||
{{end}}
|
||||
<main>
|
||||
<div>You are now viewing the {{.Title}}</div>
|
||||
<h1 class="font-bold">Serve Static Files Like this Gopher</h1>
|
||||
<div class="flex justify-center mb-4">
|
||||
<img src="/static/img/gopher.png" alt="alternate text" />
|
||||
</div>
|
||||
<div>You can get back to the index view with this button</div>
|
||||
<button
|
||||
hx-get="/"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="body"
|
||||
class="p-2 text-white bg-blue-400 rounded-md"
|
||||
>
|
||||
Click Me 😀
|
||||
</button>
|
||||
</main>
|
||||
{{end}}
|
||||
|
@ -1,27 +1,46 @@
|
||||
{{define "view"}}
|
||||
<main>
|
||||
<section>
|
||||
<button
|
||||
hx-get="/api/example"
|
||||
class="p-2 text-white bg-orange-400 rounded-md"
|
||||
>
|
||||
Click Me!
|
||||
</button>
|
||||
<button
|
||||
hx-get="/example"
|
||||
class="p-2 text-white bg-blue-400 rounded-md"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
Example page button
|
||||
</button>
|
||||
<h1 class="font-bold">API Example</h1>
|
||||
<a href="/api/example" target="_blank">Access Example API</a>
|
||||
<h2>Content Section</h2>
|
||||
<p>
|
||||
This is the main content of your web app. You can add any HTML content
|
||||
here.
|
||||
<main class="flex flex-col items-center justify-center p-8">
|
||||
<div class="mb-4">You are now viewing the {{.Title}}</div>
|
||||
|
||||
<div class="mb-2">
|
||||
Clicking the blue button will replace the entire page with an additional
|
||||
example view
|
||||
</div>
|
||||
<button
|
||||
hx-get="/example"
|
||||
class="p-2 mb-4 text-white bg-blue-400 rounded-md"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="body"
|
||||
>
|
||||
Click Me 😀
|
||||
</button>
|
||||
<h1 class="mb-2 font-bold">
|
||||
Clicking the orange button will replace the content in the box below with
|
||||
the example API
|
||||
</h1>
|
||||
<button
|
||||
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>
|
||||
<a href="/example">Another Example Route can be found here</a>
|
||||
</section>
|
||||
</div>
|
||||
<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>
|
||||
{{end}}
|
||||
|
@ -1,7 +1,7 @@
|
||||
{{define "header"}}
|
||||
<header>
|
||||
<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>
|
||||
</header>
|
||||
{{end}}
|
||||
|
Loading…
Reference in New Issue
Block a user