feat: Update details shortcode (#14)

* feat: Update details shortcode

* fix: lint

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;
+      }
+    }
+  }
+}

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
+  }
+})();

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