better styling and htmx examples

web/views/example.html

@@ -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}}

web/views/index.html

@@ -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}}

web/views/templates/header.html

@@ -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}}