Add aHtmx function to avoid typing the htmx attributes manually on links

PerfectDreams · Sep 1, 2023 · 0b746b7 · 0b746b7
1 parent a4f5250
commit 0b746b7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/components/FanArtArtist.kt b/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/components/FanArtArtist.kt
@@ -4,6 +4,7 @@ import kotlinx.html.*
 import kotlinx.serialization.json.buildJsonObject
 import kotlinx.serialization.json.put
 import net.perfectdreams.galleryofdreams.backend.utils.FanArtUtils
+import net.perfectdreams.galleryofdreams.backend.utils.aHtmx
 import net.perfectdreams.galleryofdreams.backend.utils.websiteLocaleIdPath
 import net.perfectdreams.galleryofdreams.common.data.FanArtArtistX
 import net.perfectdreams.i18nhelper.core.I18nContext
@@ -16,8 +17,7 @@ fun FlowContent.fanArtArtist(
     fanArtCount: Long
 ) {
     div {
-        a(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/artists/${artist.slug}") {
-            attributes["hx-target"] = "#content"
+        aHtmx(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/artists/${artist.slug}", hxTarget = "#content") {
             attributes["power-close-sidebar"] = "true"
 
             val url = FanArtUtils.getArtistAvatarUrl(dssBaseUrl, namespace, artist, 32)

diff --git a/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/components/FanArtCard.kt b/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/components/FanArtCard.kt
@@ -4,6 +4,7 @@ import kotlinx.datetime.toLocalDateTime
 import kotlinx.html.*
 import net.perfectdreams.galleryofdreams.backend.GalleryOfDreamsBackend
 import net.perfectdreams.galleryofdreams.backend.utils.FanArtUtils
+import net.perfectdreams.galleryofdreams.backend.utils.aHtmx
 import net.perfectdreams.galleryofdreams.backend.utils.icon
 import net.perfectdreams.galleryofdreams.backend.utils.websiteLocaleIdPath
 import net.perfectdreams.galleryofdreams.common.MediaTypeUtils
@@ -13,9 +14,7 @@ import net.perfectdreams.galleryofdreams.common.i18n.I18nKeysData
 import net.perfectdreams.i18nhelper.core.I18nContext
 
 fun FlowContent.fanArtCard(m: GalleryOfDreamsBackend, i18nContext: I18nContext, dssBaseUrl: String, namespace: String, fanArtArtist: FanArtArtistX, fanArt: FanArt) {
-    a(classes = "fan-art-card", href = "/${i18nContext.websiteLocaleIdPath}/artists/${fanArtArtist.slug}/${fanArt.slug}") {
-        attributes["hx-target"] = "#content"
-
+    aHtmx(classes = "fan-art-card", href = "/${i18nContext.websiteLocaleIdPath}/artists/${fanArtArtist.slug}/${fanArt.slug}", hxTarget = "#content") {
         div(classes = "fan-art-info-card") {
             div(classes = "fan-art-tags") {
                 for (tag in fanArt.tags) {

diff --git a/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/utils/HtmxUtils.kt b/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/utils/HtmxUtils.kt
@@ -2,6 +2,18 @@ package net.perfectdreams.galleryofdreams.backend.utils
 
 import io.ktor.server.application.*
 import io.ktor.server.request.*
+import kotlinx.html.*
 
 val ApplicationCall.htmxElementTarget: String?
-    get() = this.request.header("HX-Target")
+    get() = this.request.header("HX-Target")
+
+/**
+ * Anchor
+ */
+@HtmlTagMarker
+inline fun FlowOrInteractiveOrPhrasingContent.aHtmx(href : String, hxTarget : String, classes : String? = null, crossinline block : A.() -> Unit = {}) = a(href = href, classes = classes) {
+    attributes["hx-get"] = href
+    attributes["hx-push-url"] = "true"
+    attributes["hx-target"] = hxTarget
+    block()
+}
diff --git a/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/views/DashboardView.kt b/backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/views/DashboardView.kt
@@ -8,6 +8,7 @@ import net.perfectdreams.galleryofdreams.backend.components.fanArtArtist
 import net.perfectdreams.galleryofdreams.backend.tables.FanArtArtists
 import net.perfectdreams.galleryofdreams.backend.utils.FanArtArtistSortOrder
 import net.perfectdreams.galleryofdreams.backend.utils.FanArtArtistWithFanArtCount
+import net.perfectdreams.galleryofdreams.backend.utils.aHtmx
 import net.perfectdreams.galleryofdreams.backend.utils.websiteLocaleIdPath
 import net.perfectdreams.galleryofdreams.common.i18n.I18nKeysData
 import net.perfectdreams.i18nhelper.core.I18nContext
@@ -103,8 +104,7 @@ abstract class DashboardView(
                         attributes["hx-preserve"] = "true"
 
                         div(classes = "entries") {
-                            a(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/") {
-                                attributes["hx-target"] = "#content"
+                            aHtmx(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/", hxTarget = "#content") {
                                 attributes["power-close-sidebar"] = "true"
 
                                 text(i18nContext.get(I18nKeysData.AboutTheFanArts))
@@ -168,8 +168,7 @@ abstract class DashboardView(
 
                             hr(classes = "divider")
 
-                            a(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/fan-arts") {
-                                attributes["hx-target"] = "#content"
+                            aHtmx(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/fan-arts", hxTarget = "#content") {
                                 attributes["power-close-sidebar"] = "true"
 
                                 text(i18nContext.get(I18nKeysData.ViewAllFanArts(totalFanArtCount)))