From 276d62af3d2c533abc0d40e84e8c584147e1a46e Mon Sep 17 00:00:00 2001
From: Bagas Aulia Rezki <bagas@fossy.my.id>
Date: Thu, 13 Jun 2024 17:20:57 +0700
Subject: [PATCH] Add htmx to the project

---
 view/auth/auth.templ     | 2 +-
 view/error/error.templ   | 4 ++--
 view/index/index.templ   | 4 ++--
 view/layout/base.templ   | 9 ++++++---
 view/signin/signin.templ | 4 ++--
 view/signup/signup.templ | 2 +-
 view/user/user.templ     | 4 ++--
 7 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/view/auth/auth.templ b/view/auth/auth.templ
index 804944b..413d7fc 100644
--- a/view/auth/auth.templ
+++ b/view/auth/auth.templ
@@ -75,7 +75,7 @@ templ form(err types.Message, title string) {
             </form>
             <div class="text-center text-sm text-white">
               Already have an account?
-              <a class="underline" href="/signin" rel="ugc">
+              <a class="underline" href="/signin" rel="ugc" hx-get="/signin" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                 Sign in
               </a>
             </div>
diff --git a/view/error/error.templ b/view/error/error.templ
index 6bf5868..df48245 100644
--- a/view/error/error.templ
+++ b/view/error/error.templ
@@ -13,7 +13,7 @@ templ NotFound(title string){
            </div>
            <a
               class="inline-flex h-10 items-center rounded-md border border-gray-200 border-gray-200 bg-white px-8 text-sm font-medium shadow-sm gap-2 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950"
-              href="/"
+              href="/" hx-get="/" hx-swap="outerHTML" hx-push-url="true" hx-target="#content"
               >
               <svg
                  xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +47,7 @@ templ InternalServerError(title string){
             <div class="grid gap-2">
               <a
                 class="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-6 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50"
-                href="/"
+                href="/" hx-get="/" hx-swap="outerHTML" hx-push-url="true" hx-target="#content"
               >
                 Go back to homepage
               </a>
diff --git a/view/index/index.templ b/view/index/index.templ
index 5de6c4b..ba6b13f 100644
--- a/view/index/index.templ
+++ b/view/index/index.templ
@@ -20,12 +20,12 @@ templ content(title string, user types.User) {
                     <div class="rounded-md shadow">
                         if user.Authenticated {
                         <a class="w-full flex items-center justify-center px-8 py-3 text-base leading-6 font-medium rounded-md text-white bg-pink-400 hover:bg-pink-500 hover:text-white focus:ring ring-offset-2 ring-pink-400 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10"
-                            href="/user">
+                            href="/user" hx-get="/user" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                             Open Dashboard
                         </a>
                         } else {
                         <a class="w-full flex items-center justify-center px-8 py-3 text-base leading-6 font-medium rounded-md text-white bg-pink-400 hover:bg-pink-500 hover:text-white focus:ring ring-offset-2 ring-pink-400 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10"
-                            href="/signup">
+                            href="/signup" hx-get="/signup" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                             Get started
                         </a>
                         }
diff --git a/view/layout/base.templ b/view/layout/base.templ
index 6dabc6e..435614f 100644
--- a/view/layout/base.templ
+++ b/view/layout/base.templ
@@ -13,9 +13,12 @@ templ Base(title string){
         <meta name="author" content="Filekeeper" />
         <link href="/public/output.css" rel="stylesheet"/>
         <title>{ title }</title>
+        <script src="https://unpkg.com/htmx.org@1.9.12"></script>
     </head>
     <body>
-        { children... }
+        <div id="content">
+            { children... }
+        </div>
     </body>
     </html>
 }
@@ -70,10 +73,10 @@ templ Navbar(user types.User) {
                 </div>
             </div>
             } else {
-            <a href="/signup" class="text-gray-600 hover:text-gray-800">
+            <a href="/signup" class="text-gray-600 hover:text-gray-800" hx-get="/signup" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                 Sign up
             </a>
-            <a href="/signin" class="text-gray-600 hover:text-gray-800">
+            <a href="/signin" class="text-gray-600 hover:text-gray-800" hx-get="/signin" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                 Sign in
             </a>
             }
diff --git a/view/signin/signin.templ b/view/signin/signin.templ
index 6f6115b..53d0253 100644
--- a/view/signin/signin.templ
+++ b/view/signin/signin.templ
@@ -29,7 +29,7 @@ templ content(err types.Message, title string) {
               <div class="space-y-2">
                 <div class="flex items-center">
                   <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" for="password">Password</label>
-                  <a class="ml-auto inline-block text-sm underline text-gray-300 dark:text-gray-400" href="/forgot-password" rel="ugc">
+                  <a class="ml-auto inline-block text-sm underline text-gray-300 dark:text-gray-400" href="/forgot-password" rel="ugc" hx-get="/forgot-password" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                     Forgot your password?
                   </a>
                 </div>
@@ -52,7 +52,7 @@ templ content(err types.Message, title string) {
             </a>
             <div class="text-center text-sm text-white">
               Don't have an account?
-              <a class="underline" href="/signup" rel="ugc">
+              <a class="underline" href="/signup" rel="ugc" hx-get="/signup" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                 Sign up
               </a>
             </div>
diff --git a/view/signup/signup.templ b/view/signup/signup.templ
index 229ee84..c3d36a4 100644
--- a/view/signup/signup.templ
+++ b/view/signup/signup.templ
@@ -81,7 +81,7 @@ templ form(err types.Message, title string) {
             </form>
             <div class="text-center text-sm text-white">
               Already have an account?
-              <a class="underline" href="/signin" rel="ugc">
+              <a class="underline" href="/signin" rel="ugc" hx-get="/signin" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                 Sign in
               </a>
             </div>
diff --git a/view/user/user.templ b/view/user/user.templ
index c84b957..0825dda 100644
--- a/view/user/user.templ
+++ b/view/user/user.templ
@@ -221,12 +221,12 @@ templ content(title string, user types.User, ListSession []*session.SessionInfo)
                             </div>
                             <a
                                 class="hover:bg-gray-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-                                type="button" href="/upload">
+                                type="button" href="/upload" hx-get="/upload" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                                 Upload
                             </a>
                             <a
                                 class="hover:bg-gray-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-                                type="button" href="/download">
+                                type="button" href="/download" hx-get="/download" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                                 Download
                             </a>
                         </div>