docs: add documentation on all shortcodes (#753)

layouts/_shortcodes/hextra/feature-card.html

@@ -1,3 +1,18 @@
+{{- /*
+A shortcode for displaying a feature card.
+
+@param {string} title The title of the card.
+@param {string} subtitle The subtitle of the card.
+@param {string} class The class of the card.
+@param {string} image The image of the card.
+@param {string} imageClass The class of the image.
+@param {string} style The style of the card.
+@param {string} icon The icon of the card.
+@param {string} link The link of the card.
+
+@example {{< hextra/feature-card title="Feature Card" subtitle="This is a feature card." >}}
+*/ -}}
+
 {{- $title := .Get "title" -}}
 {{- $subtitle := .Get "subtitle" -}}
 {{- $class := .Get "class" -}}

layouts/_shortcodes/hextra/feature-grid.html

@@ -1,3 +1,12 @@
+{{- /*
+A shortcode for displaying a feature grid.
+
+@param {string} cols The number of columns.
+@param {string} style The style of the grid.
+
+@example {{< hextra/feature-grid cols="3" >}}{{< /hextra/feature-grid >}}
+*/ -}}
+
 {{- $cols := .Get "cols" | default 3 -}}
 {{- $style := .Get "style" | default "" -}}
 

layouts/_shortcodes/hextra/hero-badge.html

@@ -1,10 +1,19 @@
+{{- /*
+A shortcode for rendering a badge with a link.
+
+@param {string} link The link of the badge.
+@param {string} class The class of the badge.
+@param {string} style The style of the badge.
+
+@example {{< hextra/hero-badge >}}{{< /hextra/hero-badge >}}
+*/ -}}
+
 {{- $link := .Get "link" -}}
 {{- $external := hasPrefix $link "http" -}}
 {{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}}
 {{- $class := .Get "class" }}
 {{- $style := .Get "style" -}}
 
-
 <a
   {{ if $link }}href="{{ $href }}"{{ end }}
   class="{{ $class }} not-prose hx:inline-flex hx:items-center hx:rounded-full hx:gap-2 hx:px-3 hx:py-1 hx:text-xs hx:text-gray-600 hx:dark:text-gray-400 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:border-gray-200 hx:dark:border-neutral-800 hx:border hx:hover:border-gray-400 hx:dark:hover:text-gray-50 hx:dark:hover:border-gray-600 hx:transition-all hx:ease-in hx:duration-200"

layouts/_shortcodes/hextra/hero-button.html

@@ -1,3 +1,13 @@
+{{- /*
+A shortcode for rendering a button with a link.
+
+@param {string} link The link of the button.
+@param {string} text The text of the button.
+@param {string} style The style of the button.
+
+@example {{< hextra/hero-button text="Get Started" link="docs" >}}
+*/ -}}
+
 {{- $link := .Get "link" -}}
 {{- $text := .Get "text" -}}
 {{- $style := .Get "style" -}}

layouts/_shortcodes/hextra/hero-container.html

@@ -1,3 +1,21 @@
+{{- /*
+A simple hero container with an image on the left side.
+
+@param {string} class The class of the container.
+@param {string} cols The number of columns (default: 2).
+@param {string} image The image of the container.
+@param {bool} imageCard Whether to display the image as a card (default: false).
+@param {string} imageClass The class of the image.
+@param {string} imageLink The link of the image.
+@param {string} imageStyle The style of the image.
+@param {string} imageTitle The title of the image.
+@param {int} imageWidth The width of the image (default: 350).
+@param {int} imageHeight The height of the image (default: 350).
+@param {string} style The style of the container.
+
+@example {{< hextra/hero-container image="image.png" imageLink="https://example.com" imageTitle="Example Image" >}}
+*/ -}}
+
 {{- $class := .Get "class" -}}
 {{- $cols := .Get "cols" | default 2 -}}
 {{- $image := .Get "image" -}}

layouts/_shortcodes/hextra/hero-headline.html

@@ -1,5 +1,12 @@
-{{- $style := .Get "style" -}}
+{{- /*
+A shortcode for displaying a hero headline.
 
+@param {string} style The style of the headline.
+
+@example {{< hextra/hero-headline >}}{{< /hextra/hero-headline >}}
+*/ -}}
+
+{{- $style := .Get "style" -}}
 
 <h1
   class="not-prose hx:text-4xl hx:font-bold hx:leading-none hx:tracking-tighter hx:md:text-5xl hx:py-2 hx:bg-clip-text hx:text-transparent hx:bg-gradient-to-r hx:from-gray-900 hx:to-gray-600 hx:dark:from-gray-100 hx:dark:to-gray-400"

layouts/_shortcodes/hextra/hero-section.html

@@ -1,3 +1,13 @@
+{{- /*
+A simple hero section with a heading and optional style.
+
+@param {string} heading The heading level (default: h2).
+@param {string} style The style of the heading.
+@param {string} content The content of the heading.
+
+@example {{< hextra/hero-section heading="h3" >}}{{< /hextra/hero-section >}}>
+*/ -}}
+
 {{- $style := .Get "style" -}}
 {{- $heading := int (strings.TrimPrefix "h" (.Get "heading" | default "h2")) -}}
 {{- $size := cond (ge $heading 4) "xl" (cond (eq $heading 3) "2xl" "4xl") -}}

layouts/_shortcodes/hextra/hero-subtitle.html

@@ -1,5 +1,12 @@
-{{- $style := .Get "style" -}}
+{{- /*
+A shortcode for displaying a hero subtitle.
 
+@param {string} style The style of the subtitle.
+
+@example {{< hextra/hero-subtitle >}}{{< /hextra/hero-subtitle >}}
+*/ -}}
+
+{{- $style := .Get "style" -}}
 
 <p
   class="not-prose hx:text-xl hx:text-gray-600 hx:dark:text-gray-400 hx:sm:text-xl"