From 0ee08029472cace3fa3191378ab2ee55f175bc81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20D=C3=ADaz?= <git@subsme.slmail.me>
Date: Wed, 1 May 2024 14:00:38 -0300
Subject: [PATCH] feat: Update details shortcode (#14)

* feat: Update details shortcode

* fix: lint
---
 assets/_custom.scss             | 21 +++++++++++++++++++++
 assets/details.js               |  7 +++++++
 layouts/shortcodes/details.html | 18 +++++++++++++++---
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 assets/details.js

diff --git a/assets/_custom.scss b/assets/_custom.scss
index 0de9ae1..cfc2d60 100644
--- a/assets/_custom.scss
+++ b/assets/_custom.scss
@@ -1,3 +1,24 @@
 /* You can add custom styles here. */
 
 // @import "plugins/numbered";
+details.faq-details {
+  border: unset;
+
+  summary {
+    font-weight: 500;
+    font-size: 21px;
+    line-height: 30px;
+    font-family: var(--font-family);
+    color: var(--text);
+
+    a.anchor {
+      opacity: 0;
+    }
+
+    &:hover {
+      a.anchor {
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/assets/details.js b/assets/details.js
new file mode 100644
index 0000000..fc39ce5
--- /dev/null
+++ b/assets/details.js
@@ -0,0 +1,7 @@
+;(function () {
+  var urlAnchor = window.location.hash.substring(1); // Get the anchor from the URL
+  var detailsElement = document.getElementById(urlAnchor); // Get the details element with the id that matches the anchor
+  if (detailsElement) {
+    detailsElement.toggleAttribute('open', true); // Add the 'open' attribute
+  }
+})();
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
index cc867aa..93181b0 100644
--- a/layouts/shortcodes/details.html
+++ b/layouts/shortcodes/details.html
@@ -1,7 +1,19 @@
-<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
-  {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
-  <summary>{{ $summary | .Page.RenderString }}</summary>
+{{- $class := cond .IsNamedParams (.Get "class") (.Get 0) -}}
+{{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
+{{- $slug := $summary | urlize | lower -}}
+<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }} {{ if $class }}class="{{ $class }}"{{ end }} {{ if $slug }}id="{{ $slug }}"{{ end }}>
+  <summary>
+    {{ $summary | .Page.RenderString }}
+    {{ if or (.Get "anchor") (in .Params "anchor") }}
+      <a class="anchor" href="#{{ $slug }}">#</a>
+    {{ end }}
+  </summary>
   <div class="markdown-inner">
     {{ .Inner | .Page.RenderString }}
   </div>
 </details>
+{{ $script := resources.Get "details.js" | resources.Minify }} {{ with $script.Content }}
+<script>
+  {{ . | safeJS }}
+</script>
+{{ end }}