dev: replace ids with data

Author: ldez

docs/content/docs/formatters/_index.md

@@ -28,9 +28,9 @@ golangci-lint formatters
 ## All formatters
 
 {{< golangci/items/filter >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="new-filter" icon="fire" content="New" type="warning" >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="deprecated-filter" icon="emoji-sad" content="Deprecated" type="info" >}}
-    {{< golangci/items/clickable-badge class="gl-filter-reset gl-hidden" id="reset-filter" icon="trash" content="Reset" type="error" border=true >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="new" icon="fire" content="New" type="warning" >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="deprecated" icon="emoji-sad" content="Deprecated" type="info" >}}
+    {{< golangci/items/filter-badge class="gl-filter-reset gl-hidden" icon="trash" content="Reset" type="error" border=true >}}
 {{< /golangci/items/filter >}}
 
 {{< cards >}}

docs/content/docs/linters/_index.md

@@ -28,13 +28,13 @@ golangci-lint linters
 ## All Linters
 
 {{< golangci/items/filter >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="default-filter" icon="inbox" content="Default" type="info" >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="new-filter" icon="fire" content="New" type="warning" >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="autofix-filter" icon="sparkles" content="Autofix" type="info" >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="fast-filter" icon="fast-forward" content="Fast" >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="slow-filter" icon="play" content="Slow" >}}
-    {{< golangci/items/clickable-badge class="gl-filter" id="deprecated-filter" icon="emoji-sad" content="Deprecated" type="info" >}}
-    {{< golangci/items/clickable-badge class="gl-filter-reset gl-hidden" icon="trash" id="reset-filter" content="Reset" type="error" border=true >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="default" icon="inbox" content="Default" type="info" >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="new" icon="fire" content="New" type="warning" >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="autofix" icon="sparkles" content="Autofix" type="info" >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="fast" icon="fast-forward" content="Fast" >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="slow" icon="play" content="Slow" >}}
+    {{< golangci/items/filter-badge class="gl-filter" data="deprecated" icon="emoji-sad" content="Deprecated" type="info" >}}
+    {{< golangci/items/filter-badge class="gl-filter-reset gl-hidden" icon="trash" content="Reset" type="error" border=true >}}
 {{< /golangci/items/filter >}}
 
 {{< cards >}}

docs/layouts/_partials/custom/head-end.html

@@ -20,7 +20,7 @@
         let clean = event.currentTarget.classList.contains(borderClass)
 
         document.querySelectorAll('.gl-item').forEach(element => element.classList.remove(hiddenClass));
-        document.querySelectorAll('.gl-filter').forEach(element => element.classList.remove(borderClass));
+        document.querySelectorAll('.gl-filter > *').forEach(element => element.classList.remove(borderClass));
 
         if (clean) {
           resetButton.classList.add(hiddenClass);
@@ -29,26 +29,26 @@
 
           document.querySelectorAll('.gl-filter').forEach(element => element.classList.remove(borderClass))
 
-          event.currentTarget.classList.add(borderClass);
+          event.currentTarget.querySelector('*').classList.add(borderClass);
 
           let selector = ''
-          switch (event.currentTarget.id) {
-            case 'default-filter':
+          switch (event.currentTarget.dataset.badge) {
+            case 'default':
               selector = '.gl-item:not(.gl-default)'
               break;
-            case 'new-filter':
+            case 'new':
               selector = '.gl-item:not(.gl-new)'
               break;
-            case 'autofix-filter':
+            case 'autofix':
               selector = '.gl-item:not(.gl-autofix)'
               break;
-            case 'fast-filter':
+            case 'fast':
               selector = '.gl-item:not(.gl-slow)'
               break;
-            case 'slow-filter':
+            case 'slow':
               selector = '.gl-item:not(.gl-fast)'
               break;
-            case 'deprecated-filter':
+            case 'deprecated':
               selector = '.gl-item:not(.gl-deprecated)'
               break;
           }
@@ -64,7 +64,7 @@
       event.currentTarget.classList.add(hiddenClass);
 
       document.querySelectorAll('.gl-item').forEach(element => element.classList.remove(hiddenClass));
-      document.querySelectorAll('.gl-filter').forEach(element => element.classList.remove(borderClass));
+      document.querySelectorAll('.gl-filter > *').forEach(element => element.classList.remove(borderClass));
     });
   });
 </script>

docs/layouts/_partials/golangci/items/clickable-badge.html

@@ -6,6 +6,7 @@
 {{- $class := .class | default "" -}}
 {{- $border := .border | default false -}}
 {{- $icon := .icon | default "" -}}
+{{- $data := .data | default "" -}}
 
 {{- $defaultClass := "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
 
@@ -17,6 +18,7 @@
 {{- $borderClass := cond (eq $border true) "hx:border" "" -}}
 {{- $badgeClass := or ($styleClass.Get $type) $defaultClass -}}
 
+{{- /* Custom section to handle icon-only badges. */ -}}
 {{- $iconOnly := hasPrefix $type "icon-only" -}}
 {{- if $iconOnly -}}
   {{- $icon = (strings.TrimPrefix "icon-only:" $type) -}}
@@ -25,7 +27,16 @@
   {{- $badgeClass = "hx:p-2" -}}
 {{- end -}}
 
-<div class="hextra-badge {{ $class }}" {{- if $iconOnly -}}title="{{ $content }}"{{- end -}}>
+{{- /* Custom section to set attributes. */ -}}
+{{- $attributes := slice -}}
+{{- if $iconOnly -}}
+  {{- $attributes = $attributes | append (printf `title="%s"` $content) -}}
+{{- end -}}
+{{- if $data -}}
+  {{- $attributes = $attributes | append (printf `data-badge="%s"` $data) -}}
+{{- end -}}
+
+<div class="hextra-badge {{ $class }}" {{ (delimit $attributes " ") | safeHTMLAttr }}>
   <div class="hx:inline-flex hx:gap-1 hx:items-center hx:rounded-full hx:px-2.5 hx:leading-6 hx:text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
     {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
     {{- if not $iconOnly -}}{{- $content -}}{{- end -}}

docs/layouts/_partials/shortcodes/badge.html

@@ -1,27 +1,27 @@
 {{- /* Modified version of https://github.com/imfing/hextra/blob/v0.10.0/layouts/_shortcodes/badge.html */ -}}
 {{- /*
-Creates a badge with the given id and class.
+Creates a badge with the given "data-filter" value.
 
 @param {string} content The content of the badge.
 @param {string} type The type of the badge.
-@param {string} id The id of the badge.
+@param {string} data The "data-filter" value for the badge.
 @param {string} class The class of the badge.
 @param {boolean} border Whether to render a border around the badge.
 @param {string} icon The icon of the badge.
 
-@example {{< golangci/items/clickable-badge icon="inbox" id="my-id" content="Text" class="my-class" type="info" border=true >}}
+@example {{< golangci/items/filter-badge icon="inbox" data="my-data" content="Text" class="my-class" type="info" border=true >}}
 */}}
 
 {{- $content := .Get "content" -}}
 {{- $type := .Get "type" | default "" -}}
-{{- $id := .Get "id" | default "" -}}
+{{- $data := .Get "data" | default "" -}}
 {{- $class := .Get "class" | default "" -}}
 {{- $icon := .Get "icon" | default "" -}}
 {{- $border := .Get "border" | default false -}}
 
-{{- partial "golangci/items/clickable-badge" (dict
-  "id" $id
-  "class" $class
+{{- partial "shortcodes/badge" (dict
+  "data" $data
+  "class" (printf "hx:mt-2 hx:mx-1 hx:cursor-pointer %s" $class)
   "content" $content
   "type" $type
   "border" $border

docs/layouts/_shortcodes/golangci/items/clickable-badge.html renamed to docs/layouts/_shortcodes/golangci/items/filter-badge.html

@@ -1,7 +1,7 @@
 {{- /*
 This shortcode is used to create a filter bar.
 
-@example {{< golangci/items/filter >}}{{< golangci/items/clickable-badge content="Example">}}{{< golangci/items/filter >}}
+@example {{< golangci/items/filter >}}{{< golangci/items/filter-badge content="Example">}}{{< golangci/items/filter >}}
 */ -}}
 
 <div class="hx:mt-6">