Add Hextra shortcodes (Bootstrap 5 port)

assets/scss/_hextra_shortcodes.scss

@@ -0,0 +1,144 @@
+// ============================================================================
+// Hextra shortcodes – custom styles for Bootstrap 5 port
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Callout
+// ---------------------------------------------------------------------------
+.hextra-callout {
+  border-left-width: 4px !important;
+
+  .hextra-callout-content {
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+.hextra-cards {
+  .hextra-card {
+    color: inherit;
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      border-color: $primary;
+      box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+      color: inherit;
+    }
+
+    .hextra-card-icon svg {
+      width: 1.5rem;
+      color: rgba(0, 0, 0, 0.2);
+      transition: color 0.3s ease;
+    }
+
+    &:hover .hextra-card-icon svg {
+      color: currentColor;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Details
+// ---------------------------------------------------------------------------
+.hextra-details {
+  > summary {
+    // Remove default marker / triangle in all browsers.
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .hextra-details-chevron {
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  &[open] > summary .hextra-details-chevron {
+    transform: rotate(90deg);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Steps
+// ---------------------------------------------------------------------------
+.hextra-steps {
+  counter-reset: step;
+  border-color: $border-color;
+
+  :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
+    counter-increment: step;
+    position: relative;
+
+    &::before {
+      content: counter(step);
+      position: absolute;
+      width: 33px;
+      height: 33px;
+      border-radius: 50%;
+      background-color: $light;
+      border: 4px solid $body-bg;
+      color: $secondary;
+      font-size: 1rem;
+      font-weight: normal;
+      text-align: center;
+      line-height: 25px;
+      left: -41px;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Tabs – extend Bootstrap nav-tabs styling
+// ---------------------------------------------------------------------------
+.hextra-tabs-wrapper {
+  margin-bottom: 1rem;
+}
+
+// ---------------------------------------------------------------------------
+// FileTree
+// ---------------------------------------------------------------------------
+.hextra-filetree {
+  .hextra-filetree-folder {
+    border: none;
+    background: none;
+    font-size: inherit;
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Jupyter
+// ---------------------------------------------------------------------------
+.hextra-jupyter-code-cell {
+  .hextra-jupyter-outputs {
+    scrollbar-width: thin;
+
+    pre {
+      font-size: 0.75rem;
+      overflow: auto;
+      max-width: 100%;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// PDF
+// ---------------------------------------------------------------------------
+.hextra-pdf {
+  min-height: 32rem;
+}

assets/scss/_styles_project.scss

@@ -7,6 +7,7 @@
 @import "search_project.scss";
 @import "summary.scss";
 @import "lab.scss";
+@import "hextra_shortcodes.scss";
 
 // Page Layout Sections
 .td-home {

hugo.yaml

@@ -56,6 +56,8 @@ markup:
     parser:
       attribute:
         block: true
+    renderer:
+      unsafe: true
   highlight:
     # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
     # style: tango

layouts/partials/hextra/utils/file-path.html

@@ -0,0 +1,21 @@
+{{/* Utility to resolve file paths from absolute, relative path, or URL. */}}
+
+{{- $path := .path -}}
+{{- $page := .page -}}
+
+{{- $isLocal := not (urls.Parse $path).Scheme -}}
+{{- $isPage := and (eq $page.Kind "page") (not $page.BundleType) -}}
+{{- $startsWithSlash := hasPrefix $path "/" -}}
+{{- $startsWithRelative := hasPrefix $path "../" -}}
+
+{{- if and $path $isLocal -}}
+  {{- if $startsWithSlash -}}
+    {{/* File under static directory */}}
+    {{- $path = (relURL (strings.TrimPrefix "/" $path)) -}}
+  {{- else if and $isPage (not $startsWithRelative) -}}
+    {{/* File is a sibling to the individual page file */}}
+    {{ $path = (printf "../%s" $path) }}
+  {{- end -}}
+{{- end -}}
+
+{{- return $path -}}

layouts/partials/hextra/utils/icon.html

@@ -0,0 +1,14 @@
+{{/* Render raw SVG icon from site.Data.hextra.icons */}}
+{{- $icon := index site.Data.hextra.icons .name -}}
+
+{{- if not $icon -}}
+  {{ errorf "hextra icon %q not found in data/hextra/icons.yaml" .name }}
+{{- end -}}
+
+{{- $icon = $icon | safeHTML -}}
+
+{{- if .attributes -}}
+  {{- $icon = replaceRE "<svg" (printf "<svg %s" .attributes) $icon -}}
+{{- end -}}
+
+{{- return ($icon | safeHTML) -}}

layouts/shortcodes/hextra/asciinema.html

@@ -0,0 +1,109 @@
+{{- /*
+  Hextra asciinema player shortcode (Bootstrap 5 port).
+  Embeds an asciinema-player for terminal recordings.
+
+  @param {string} file     Path or URL of the .cast file (or positional param 0).
+  @param {string} theme    Player theme (default "asciinema").
+  @param {number} speed    Playback speed (default 1).
+  @param {bool}   autoplay Auto-play on load (default false).
+  @param {bool}   loop     Loop playback (default false).
+  @param {string} poster   Poster / thumbnail specification.
+  @param {string} markers  Comma-separated time markers.
+
+  @example {{< hextra/asciinema file="demo.cast" >}}
+*/ -}}
+
+{{- $castFile := .Get "file" | default (.Get 0) -}}
+{{- $theme := .Get "theme" | default "asciinema" -}}
+{{- $speed := .Get "speed" | default 1 -}}
+{{- $autoplay := .Get "autoplay" | default false -}}
+{{- $loop := .Get "loop" | default false -}}
+{{- $poster := .Get "poster" | default "" -}}
+{{- $markers := .Get "markers" | default "" -}}
+
+{{- /* Handle file path: support local files, absolute paths, and remote URLs */ -}}
+{{- $isLocal := not (urls.Parse $castFile).Scheme -}}
+{{- $isPage := and (eq .Page.Kind "page") (not .Page.BundleType) -}}
+
+{{- if $isLocal -}}
+  {{- $found := false -}}
+
+  {{- if not $isPage -}}
+    {{- with .Page.Resources.Get $castFile -}}
+      {{- $castFile = .RelPermalink -}}
+      {{- $found = true -}}
+    {{- end -}}
+  {{- end -}}
+
+  {{- if not $found -}}
+    {{- with resources.Get $castFile -}}
+      {{- $castFile = .RelPermalink -}}
+      {{- $found = true -}}
+    {{- end -}}
+  {{- end -}}
+
+  {{- if not $found -}}
+    {{- if hasPrefix $castFile "/" -}}
+      {{- $castFile = relURL (strings.TrimPrefix "/" $castFile) -}}
+    {{- else -}}
+      {{- $castFile = relURL $castFile -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+{{- /* Build marker configuration using jsonify for proper escaping */ -}}
+{{- $markerConfig := "" -}}
+{{- if $markers -}}
+  {{- $markerParts := slice -}}
+  {{- range (split $markers ",") -}}
+    {{- $item := trim . " " -}}
+    {{- $colonIndex := findRE ":" $item -}}
+    {{- if $colonIndex -}}
+      {{- $pair := split $item ":" -}}
+      {{- if ge (len $pair) 2 -}}
+        {{- $time := float (trim (index $pair 0) " ") -}}
+        {{- $label := trim (index $pair 1) " " -}}
+        {{- $markerParts = $markerParts | append (slice $time $label) -}}
+      {{- end -}}
+    {{- else -}}
+      {{- $markerParts = $markerParts | append (float $item) -}}
+    {{- end -}}
+  {{- end -}}
+  {{- $markerConfig = $markerParts | jsonify -}}
+{{- end -}}
+
+{{- /* Mark page as using asciinema for conditional script loading */ -}}
+{{- .Page.Store.Set "hasAsciinema" true -}}
+
+<div class="hextra-asciinema-player"
+     role="region"
+     aria-label="{{ (T "terminalRecording") | default "Terminal recording" }}"
+     data-cast-file="{{ $castFile }}"
+     data-theme="{{ $theme }}"
+     data-speed="{{ $speed }}"
+     data-autoplay="{{ $autoplay }}"
+     data-loop="{{ $loop }}"
+     {{- if ne $poster "" }} data-poster="{{ $poster | safeURL }}"{{- end -}}
+     {{- if $markerConfig }} data-markers='{{ $markerConfig }}'{{- end -}}>
+</div>
+
+{{- /* Include asciinema-player assets once per page */ -}}
+{{- if not (.Page.Store.Get "hextraAsciinemaLoaded") -}}
+  {{- .Page.Store.Set "hextraAsciinemaLoaded" true -}}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asciinema-player@3/dist/bundle/asciinema-player.css">
+<script src="https://cdn.jsdelivr.net/npm/asciinema-player@3/dist/bundle/asciinema-player.min.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded',function(){
+  document.querySelectorAll('.hextra-asciinema-player').forEach(function(el){
+    var opts={};
+    if(el.dataset.theme) opts.theme=el.dataset.theme;
+    if(el.dataset.speed) opts.speed=parseFloat(el.dataset.speed);
+    if(el.dataset.autoplay==='true') opts.autoPlay=true;
+    if(el.dataset.loop==='true') opts.loop=true;
+    if(el.dataset.poster) opts.poster=el.dataset.poster;
+    if(el.dataset.markers){try{opts.markers=JSON.parse(el.dataset.markers);}catch(e){}}
+    AsciinemaPlayer.create(el.dataset.castFile,el,opts);
+  });
+});
+</script>
+{{- end -}}

layouts/shortcodes/hextra/badge.html

@@ -0,0 +1,61 @@
+{{- /*
+  Hextra badge shortcode (Bootstrap 5 port).
+
+  @param {string} content  Badge text.
+  @param {string} color    Color name: gray, green, blue, yellow, red, purple, orange, indigo, amber (default: gray).
+  @param {string} link     Optional URL to wrap badge in a link.
+  @param {string} icon     Optional icon name.
+
+  Positional form: {{< hextra/badge "Badge text" >}}
+
+  @example {{< hextra/badge content="New" color="green" >}}
+*/ -}}
+
+{{- /* Map Hextra / semantic color names to Bootstrap badge classes. */ -}}
+{{- $mapping := (dict
+  "gray"    "text-bg-secondary"
+  "green"   "text-bg-success"
+  "blue"    "text-bg-info"
+  "yellow"  "text-bg-warning"
+  "red"     "text-bg-danger"
+  "purple"  "text-bg-primary"
+  "indigo"  "text-bg-primary"
+  "orange"  "text-bg-warning"
+  "amber"   "text-bg-warning"
+  "default" "text-bg-secondary"
+  "tip"     "text-bg-success"
+  "info"    "text-bg-info"
+  "warning" "text-bg-warning"
+  "error"   "text-bg-danger"
+  "important" "text-bg-primary"
+  )
+-}}
+
+{{- if .IsNamedParams -}}
+  {{- $content := .Get "content" -}}
+  {{- $color := .Get "color" | default (.Get "type") | default "gray" -}}
+  {{- $link := .Get "link" | default "" -}}
+  {{- $icon := .Get "icon" | default "" -}}
+
+  {{- $badgeClass := index $mapping $color | default "text-bg-secondary" -}}
+
+  {{- if $link -}}
+    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
+      <span class="hextra-badge badge rounded-pill {{ $badgeClass }}">
+        {{- with $icon }}{{ partial "hextra/utils/icon.html" (dict "name" . "attributes" `height="12" aria-hidden="true"`) }} {{ end -}}
+        {{- $content -}}
+      </span>
+    </a>
+  {{- else -}}
+    <span class="hextra-badge badge rounded-pill {{ $badgeClass }}">
+      {{- with $icon }}{{ partial "hextra/utils/icon.html" (dict "name" . "attributes" `height="12" aria-hidden="true"`) }} {{ end -}}
+      {{- $content -}}
+    </span>
+  {{- end -}}
+
+{{- else -}}
+  {{- $content := .Get 0 -}}
+  <span class="hextra-badge badge rounded-pill text-bg-secondary">
+    {{- $content -}}
+  </span>
+{{- end -}}