Init

themes/hextra/layouts/_partials/shortcodes/badge.html

@@ -0,0 +1,38 @@
+{{- $content := .content -}}
+{{- $color := .color | default .type | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
+{{- $class := .class | default "" -}}
+{{- $border := .border | default false -}}
+{{- $icon := .icon | default "" -}}
+
+{{- /* Compatibility with previous names. */ -}}
+{{- $mapping := (dict
+  "default" "gray"
+  "tip" "green"
+  "info" "blue"
+  "warning" "yellow"
+  "error" "red"
+  "important" "purple"
+  )
+-}}
+{{- $color = index $mapping $color | default $color | default "gray" -}}
+
+{{- $styleClass := newScratch -}}
+{{- $styleClass.Set "gray" "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" -}}
+{{- $styleClass.Set "purple" "hx:border-purple-200 hx:bg-purple-100 hx:text-purple-900 hx:dark:border-purple-200/30 hx:dark:bg-purple-900/30 hx:dark:text-purple-200" -}}
+{{- $styleClass.Set "indigo" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200" -}}
+{{- $styleClass.Set "blue" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
+{{- $styleClass.Set "green" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200" -}}
+{{- $styleClass.Set "yellow" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
+{{- $styleClass.Set "orange" "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
+{{- $styleClass.Set "amber" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200" -}}
+{{- $styleClass.Set "red" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
+
+{{- $borderClass := cond (eq $border true) "hx:border" "" -}}
+{{- $badgeClass := or ($styleClass.Get $color) ($styleClass.Get "gray") -}}
+<div class="hextra-badge {{ $class }}">
+  <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 -}}
+    {{- $content -}}
+  </div>
+</div>
+{{- /* Strip trailing newline. */ -}}

themes/hextra/layouts/_partials/shortcodes/callout.html

@@ -0,0 +1,28 @@
+{{- $content := .content -}}
+{{- $emoji := .emoji -}}
+{{- $icon := .icon -}}
+
+{{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
+
+{{- $class := .class | default $defaultClass -}}
+
+
+<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:rounded-lg hx:border hx:py-2 hx:ltr:pr-4 hx:rtl:pl-4 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $class }}">
+  <div class="hx:ltr:pl-3 hx:ltr:pr-2 hx:rtl:pr-3 hx:rtl:pl-2">
+    {{- with $emoji -}}
+      <div class="hx:select-none hx:text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+        {{- . -}}
+      </div>
+    {{- else -}}
+      {{- with $icon -}}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx:inline-block hx:align-middle"`) -}}
+      {{- end -}}
+    {{- end -}}
+  </div>
+
+  <div class="hx:w-full hx:min-w-0 hx:leading-7">
+    <div class="hx:mt-6 hx:leading-7 hx:first:mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>

themes/hextra/layouts/_partials/shortcodes/card.html

@@ -0,0 +1,69 @@
+{{- $link := .link -}}
+{{- $title := .title -}}
+{{- $icon := .icon -}}
+{{- $subtitle := .subtitle -}}
+{{- $image := .image -}}
+{{- $alt := .alt | default $title -}}
+{{- $width := .width -}}
+{{- $height := .height -}}
+{{- $imageStyle := .imageStyle -}}
+{{- $tag := .tag -}}
+{{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
+{{- $tagBorder := not (eq .tagBorder false) | default true }}
+{{- $tagIcon := .tagIcon -}}
+
+{{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
+{{- with $image -}}
+  {{ $linkClass = "hx:hover:border-gray-300 hx:bg-gray-100 hx:shadow-sm hx:dark:border-neutral-700 hx:dark:bg-neutral-800 hx:dark:text-gray-50 hx:hover:shadow-lg hx:dark:hover:border-neutral-500 hx:dark:hover:bg-neutral-700" }}
+{{- end -}}
+
+{{- $external := strings.HasPrefix $link "http" -}}
+{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
+
+
+<a
+  class="hextra-card hx:group hx:flex hx:flex-col hx:justify-start hx:overflow-hidden hx:rounded-lg hx:border hx:border-gray-200 hx:text-current hx:no-underline hx:dark:shadow-none hx:hover:shadow-gray-100 hx:dark:hover:shadow-none hx:shadow-gray-100 hx:active:shadow-sm hx:active:shadow-gray-200 hx:transition-all hx:duration-200 {{ $linkClass }}"
+  {{- if $link -}}
+    href="{{ $href }}"
+    {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
+  {{- end -}}
+>
+  {{- with $image -}}
+    <img
+      alt="{{ $alt }}"
+      class="hextra-card-image"
+      loading="lazy"
+      decoding="async"
+      src="{{ $image | safeURL }}"
+      {{ with $width }}width="{{ . }}"{{ end }}
+      {{ with $height }}height="{{ . }}"{{ end }}
+      {{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
+    />
+  {{- end -}}
+
+  {{- $padding := "hx:p-4" -}}
+  {{- with $subtitle -}}
+    {{- $padding = "hx:pt-4 hx:px-4" -}}
+  {{- end -}}
+
+
+  <span class="hextra-card-icon hx:flex hx:font-semibold hx:items-start hx:gap-2 {{ $padding }} hx:text-gray-700 hx:hover:text-gray-900 hx:dark:text-neutral-200 hx:dark:hover:text-neutral-50">
+    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
+    {{- $title -}}
+  </span>
+  {{- with $subtitle -}}
+    <div class="hextra-card-subtitle hx:line-clamp-3 hx:text-sm hx:font-normal hx:text-gray-500 hx:dark:text-gray-400 hx:px-4 hx:mb-4 hx:mt-2">{{- $subtitle | markdownify -}}</div>
+  {{- end -}}
+
+  {{- if $tag }}
+    {{- partial "shortcodes/badge.html" (dict
+      "content" $tag
+      "color" $tagColor
+      "class" "hextra-card-tag"
+      "border" $tagBorder
+      "icon" $tagIcon
+      )
+    -}}
+  {{- end -}}
+</a>
+{{- /* Strip trailing newline. */ -}}

themes/hextra/layouts/_partials/shortcodes/cards.html

@@ -0,0 +1,6 @@
+{{- $cols := .cols | default 3 -}}
+{{- $content := .content -}}
+
+<div class="hextra-cards hx:mt-4 hx:gap-4 hx:grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
+  {{- $content -}}
+</div>

themes/hextra/layouts/_partials/shortcodes/tabs.html

@@ -0,0 +1,69 @@
+{{- $tabsID := .id }}
+
+{{- /*
+The `tabs` parameter is a list of dict with the following keys:
+  - `id`: (int) the ID of the tab (the Ordinal of the tab shortcode).
+  - `name`: (string) the name of the tab (the title).
+  - `content`: (string) the content of the tab.
+  - `selected`: (bool) whether the tab is selected.
+*/ -}}
+{{- $tabs := .tabs }}
+
+{{- if eq (len $tabs) 0 -}}
+  {{ errorf "tabs must have at least one tab" }}
+{{- end -}}
+
+{{- $enableSync := .enableSync }}
+
+{{- /* Create group data for syncing and select the first tab if none is selected. */ -}}
+{{- $selectedIndex := 0 -}}
+{{  $dataTabGroup := slice -}}
+
+{{- range $i, $item := $tabs -}}
+  {{- $dataTabGroup = $dataTabGroup | append ($item.name) -}}
+
+  {{- if $item.selected -}}
+    {{- $selectedIndex = $i -}}
+  {{- end -}}
+{{- end -}}
+
+{{- /* Generate a unique ID for each tab group. */ -}}
+{{- $globalID := printf "tabs-%02v" $tabsID -}}
+
+<div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
+  <div
+    class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800"
+    {{ if $enableSync }} data-tab-group="{{ delimit $dataTabGroup `,` }}"{{ end }}
+  >
+    {{- range $i, $item := $tabs -}}
+      <button
+        class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"
+        role="tab"
+        type="button"
+        aria-controls="tabs-panel-{{ $globalID }}-{{ $item.id }}"
+        {{- if eq $i $selectedIndex -}}
+        aria-selected="true"
+        tabindex="0"
+        data-state="selected"
+        {{- end }}
+      >
+        {{- $item.name -}}
+      </button>
+    {{- end -}}
+  </div>
+</div>
+<div>
+    {{- range $i, $item := $tabs -}}
+      <div
+        class="hextra-tabs-panel hx:rounded-sm hx:pt-6 hx:hidden hx:data-[state=selected]:block"
+        id="tabs-panel-{{ $globalID }}-{{ $item.id }}"
+        role="tabpanel"
+        {{- if eq $i $selectedIndex -}}
+        tabindex="0"
+        data-state="selected"
+        {{ end -}}
+      >
+        {{- $item.content  | markdownify -}}
+      </div>
+    {{- end -}}
+</div>