feat: details shortcode (#28)

* feat: details shortcode * docs: add details shortcode page * chore: update shortcodes page * docs: update * Revert "chore: update shortcodes page" This reverts commit c005ad4.
imfing · Sep 2, 2023 · 3bcdf84 · 3bcdf84
1 parent 8e8f7f2
commit 3bcdf84
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 2 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -2601,6 +2601,11 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
 .bg-orange-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
@@ -2854,6 +2859,10 @@ video {
   font-size: 1rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+}
+
 .text-sm {
   font-size: .875rem;
 }
@@ -3200,6 +3209,16 @@ body {
   bottom: 0.25rem;
 }
 
+.before\:mr-1::before {
+  content: var(--tw-content);
+  margin-right: 0.25rem;
+}
+
+.before\:inline-block::before {
+  content: var(--tw-content);
+  display: inline-block;
+}
+
 .before\:w-px::before {
   content: var(--tw-content);
   width: 1px;
@@ -3216,11 +3235,23 @@ body {
   opacity: 0.25;
 }
 
+.before\:transition-transform::before {
+  content: var(--tw-content);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .before\:content-\[\'\#\'\]::before {
   --tw-content: '#';
   content: var(--tw-content);
 }
 
+.before\:content-\[\'\'\]::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
 .before\:content-\[\\\"\\\"\]::before {
   --tw-content: \"\";
   content: var(--tw-content);
@@ -3230,6 +3261,10 @@ body {
   margin-top: 0px;
 }
 
+.last-of-type\:mb-0:last-of-type {
+  margin-bottom: 0px;
+}
+
 .hover\:border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -3354,6 +3389,12 @@ body {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.group[open] .group-open\:before\:rotate-90::before {
+  content: var(--tw-content);
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group\/code:hover .group-hover\/code\:opacity-100 {
   opacity: 1;
 }
@@ -3548,6 +3589,12 @@ body {
   right: 0px;
 }
 
+:is([dir="rtl"] .rtl\:before\:rotate-180)::before {
+  content: var(--tw-content);
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @media (prefers-contrast: more) {
   .contrast-more\:border {
     border-width: 1px;
@@ -3821,6 +3868,12 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+:is(html[class~="dark"] .dark\:before\:invert)::before {
+  content: var(--tw-content);
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 :is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -3850,6 +3903,11 @@ body {
   background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
 
+:is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));

diff --git a/exampleSite/content/docs/guide/shortcodes/_index.md b/exampleSite/content/docs/guide/shortcodes/_index.md
@@ -13,6 +13,7 @@ Hextra provides a collection of beautiful shortcodes to enhance your content.
 {{< cards >}}
   {{< card link="callout" title="Callout" icon="warning" >}}
   {{< card link="cards" title="Cards" icon="card" >}}
+  {{< card link="details" title="Details" icon="chevron-right" >}}
   {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
   {{< card link="icon" title="Icon" icon="badge-check" >}}
   {{< card link="steps" title="Steps" icon="one" >}}

diff --git a/exampleSite/content/docs/guide/shortcodes/details.md b/exampleSite/content/docs/guide/shortcodes/details.md
@@ -0,0 +1,43 @@
+---
+title: Details
+---
+
+A built-in component to display a collapsible content.
+
+<!--more-->
+
+## Example
+
+{{% details title="Details" %}}
+
+This is the content of the details.
+
+Markdown is **supported**.
+
+{{% /details %}}
+
+{{% details title="Click me to reveal" closed="true" %}}
+
+This will be hidden by default.
+
+{{% /details %}}
+
+## Usage
+
+````
+{{%/* details title="Details" */%}}
+
+This is the content of the details.
+
+Markdown is **supported**.
+
+{{%/* /details */%}}
+````
+
+````
+{{%/* details title="Click me to reveal" closed="true" */%}}
+
+This will be hidden by default.
+
+{{%/* /details */%}}
+````
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
@@ -11,6 +11,7 @@
       "cite",
       "code",
       "del",
+      "details",
       "div",
       "em",
       "figcaption",
@@ -44,6 +45,7 @@
       "strong",
       "style",
       "sub",
+      "summary",
       "sup",
       "svg",
       "table",
@@ -80,17 +82,22 @@
       "before:bg-gray-200",
       "before:content-[\"\"]",
       "before:content-['#']",
+      "before:content-['']",
+      "before:inline-block",
       "before:inset-0",
       "before:inset-y-1",
+      "before:mr-1",
       "before:opacity-25",
       "before:pointer-events-none",
+      "before:transition-transform",
       "before:w-px",
       "bg-black/[.05]",
       "bg-blue-100",
       "bg-clip-text",
       "bg-gradient-to-b",
       "bg-gradient-to-r",
       "bg-gray-100",
+      "bg-neutral-50",
       "bg-orange-50",
       "bg-primary-100",
       "bg-primary-400",
@@ -150,6 +157,7 @@
       "cursor-default",
       "cursor-pointer",
       "dark:before:bg-neutral-800",
+      "dark:before:invert",
       "dark:bg-blue-900/30",
       "dark:bg-dark",
       "dark:bg-dark/50",
@@ -178,6 +186,7 @@
       "dark:hidden",
       "dark:hover:bg-gray-100/5",
       "dark:hover:bg-neutral-700",
+      "dark:hover:bg-neutral-800",
       "dark:hover:bg-neutral-900",
       "dark:hover:bg-primary-100/5",
       "dark:hover:bg-primary-700",
@@ -250,6 +259,7 @@
       "group-data-[theme=dark]:hidden",
       "group-data-[theme=light]:hidden",
       "group-hover/code:opacity-100",
+      "group-open:before:rotate-90",
       "group/code",
       "group/copybtn",
       "grow",
@@ -305,6 +315,7 @@
       "justify-start",
       "language-options",
       "language-switcher",
+      "last-of-type:mb-0",
       "leading-5",
       "leading-6",
       "leading-7",
@@ -412,6 +423,7 @@
       "overflow-y-auto",
       "overscroll-contain",
       "p-0.5",
+      "p-1",
       "p-1.5",
       "p-2",
       "p-4",
@@ -461,6 +473,7 @@
       "rtl:-ml-4",
       "rtl:-rotate-180",
       "rtl:before:right-0",
+      "rtl:before:rotate-180",
       "rtl:left-1.5",
       "rtl:left-3",
       "rtl:md:right-auto",
@@ -523,6 +536,7 @@
       "text-gray-800",
       "text-gray-900",
       "text-left",
+      "text-lg",
       "text-orange-800",
       "text-primary-800",
       "text-red-900",

diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
@@ -1,8 +1,8 @@
 {{- $title := .Get "title" | default "" -}}
 {{- $closed := eq (.Get "closed") "true" | default false -}}
 
-<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4" data-expanded="true" {{ if not $closed }}open{{ end }}>
-  <summary class="flex items-center cursor-pointer select-none list-none p-1 transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 [[data-expanded]>&]:before:rotate-90">
+<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4 group" {{ if not $closed }}open{{ end }}>
+  <summary class="flex items-center cursor-pointer select-none list-none p-1 rounded transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 group-open:before:rotate-90">
     <strong class="text-lg">{{ $title | markdownify }}</strong>
   </summary>
   <div class="p-2 overflow-hidden">