Update for Personas

config/_default/hugo.yaml

@@ -18,7 +18,6 @@ pluralizelisttitles: "false"
 buildFuture: "true"
 summaryLength: 10
 enableRobotsTXT: true
-mainSections: [ "blog" ]
 
 timeout: "180s"
 

config/_default/params.yaml

@@ -17,7 +17,7 @@ favicon:
   logo: "/img/favicon.png"
 
 home:
-  sections: [ "blog" ]
+  sections: [ "as-seen-on", "blog" ]
   style: "gradient-featured"
   feature:
     width: 6
@@ -30,6 +30,14 @@ includeToc:
   show: true
 
 sections:
+  as-seen-on:
+    title: "As Seen On"
+    layout: "nav"
+    sort: "weight"
+    reverse: false
+    style: "justify-content-center as-seen-on"
+    pane: "persona"
+    width: 100
   blog:
     reference: "More Posts"
     sort: "date"

content/assets/scss/hugo.scss

@@ -71,3 +71,11 @@ nav#NewsListOfYears ul, nav#TranscriptsListOfYears ul {
 .breadcrumb-custom a:hover {
     color: var(--bs-success)!important;
 }
+
+/* Personas */
+
+#nav-as-seen-on {
+    h2, h3 {
+        font-style: italic;
+    }
+}

content/posts/_index.md

@@ -22,13 +22,4 @@ actions:
 
 Jorja has an extensive [filmography](/library/filmography/), but most people know her from _CSI: Crime Scene Investigation_, where she played [Sara Sidle](/library/actor/csi/) for 14 seasons.
 
-She's also a producer, musician, [environmental advocate](/library/advocacy/), and all around brilliant human.
-
-## As Seen On
-
-{{< card-group padding="3" gutter="3" cols="4" >}}
-    {{< card path="/library/actor/csi/" align="center" header="none" footer="none" >}}{{< /card >}}
-    {{< card path="/library/actor/csi-vegas/" align="center" header="none" footer="none" >}}{{< /card >}}
-    {{< card path="/library/actor/er/" align="center" header="none" footer="none" >}}{{< /card >}}
-    {{< card path="/library/actor/west-wing/" align="center" header="none" footer="none" >}}{{< /card >}}
-{{< /card-group >}}
+She's also a producer, musician, [environmental advocate](/library/advocacy/), and all around brilliant and kind human.

content/posts/as-seen-on/csi-vegas.md

@@ -0,0 +1,10 @@
+---
+title: "CSI: Vegas"
+date: 2023-04-16
+weight: 10
+thumbnail:
+    url: img/front-page/csi-vegas.jpg
+href: /library/actor/csi-vegas/
+---
+
+Sara Sidle (and her husband Grissom) return to Las Vegas to help old friends.

content/posts/as-seen-on/csi.md

@@ -0,0 +1,10 @@
+---
+title: "CSI: Crime Scene Investigation"
+date: 2023-04-16
+weight: 20
+thumbnail:
+    url: img/front-page/csi-orig.jpg
+href: /library/actor/csi/
+---
+
+CSI Sara Sidle solves crimes in Las Vegas, faces her troubled past, and choses love over science.

content/posts/as-seen-on/er.md

@@ -0,0 +1,10 @@
+---
+title: "ER"
+date: 2023-04-16
+weight: 40
+href: /library/actor/er/
+thumbnail:
+    url: img/front-page/er-doyle.jpg
+---
+
+Dr. Maggie Doyle is a resident in one of Chicago's busiest hospitals.

content/posts/as-seen-on/index.md

@@ -0,0 +1,4 @@
+---
+headless: true
+title: As Seen On ...
+---

content/posts/as-seen-on/west-wing.md

@@ -0,0 +1,10 @@
+---
+title: "The West Wing"
+date: 2023-04-16
+weight: 30
+href: /library/actor/west-wing/
+thumbnail:
+    url: img/front-page/west-wing.jpg
+---
+
+Secret Service Agent Gina Toscano has the toughest job of all: protecting the president's youngest daughter.

layouts/partials/assets/nav.html

@@ -0,0 +1,99 @@
+<!--
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
+{{ $error := false }}
+
+<!-- Validate arguments -->
+{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "nav" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/nav.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{- $page := .page -}}
+{{- $id := .id | default "0" -}}
+{{ $list := .list }}
+{{ $pane := .pane | default "none" }}
+{{ $width := .width | default 100 }}
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+{{- $wrap := .wrap | default false -}}
+{{ $vertical := .vertical | default false }}
+{{ $type := .type | default "pills" }}
+{{- $loading := .loading | default "eager" -}}
+
+<!-- Main code -->
+<div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto">
+    {{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+    {{ if eq $type "callout" }}
+        <div class="d-lg-none">
+            <div id="accordion-{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }} nav-callout">
+                {{- range $index, $item := $list -}}
+                    {{ partial "assets/nav-item.html" (dict
+                        "id" $index
+                        "parentID" $id
+                        "fade" false
+                        "header" $item.Title
+                        "class" $class
+                        "body" (or $item.Description $item.Content)
+                        "show" false
+                        "disabled" false
+                        "item_type" "accordion"
+                        "illustration" (partial "utilities/GetIllustration.html" (dict "item" $item "size" "col-12"))
+                        )
+                    }}
+                {{ end -}}
+            </div>
+        </div>
+        <div class="d-none d-lg-block">
+    {{ end }}
+
+    <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+        {{- range $index, $item := $list -}}
+            {{ $show := eq $index 0}}
+            <button class="nav-link {{ if not $wrap }} text-nowrap{{ end }}{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}"
+                    type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+                {{ $item.Title }}
+            </button>
+        {{ end -}}
+
+        <div class="tab-content {{ if eq $type "tabs" }}border border-bottom-0  p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+            {{ range $index, $item := $list }}
+                {{ $header := $item.Title }}
+                {{ $body := $item.Content }}
+                {{ $show := eq $index 0}}
+                {{- $thumbnail := "" -}}
+                {{ if reflect.IsMap $item.Params.Thumbnail }}{{ $thumbnail = $item.Params.Thumbnail.url }}{{ else }}{{ $thumbnail = $item.Params.Thumbnail }}{{ end }}
+                <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
+                    {{- if eq $pane "persona" -}}
+                        {{- partial "assets/persona.html" (dict
+                            "title" $item.Title
+                            "href" $item.Params.href
+                            "class" $class
+                            "color" $color
+                            "content" (partial "utilities/GetDescription.html" (dict "page" $item))
+                            "thumbnail" $thumbnail
+                        ) -}}
+                    {{- else -}}
+                        {{ $illustration := (partial "utilities/GetIllustration.html" (dict "item" $item)) }}
+                        {{ if $illustration }}
+                            <div class="row">
+                                <div class="col-12 col-lg-10 order-1 order-lg-0">{{- (or $item.Description $item.Content) -}}</div>
+                                <div class="col-12 col-lg-2 order-0 order-lg-1">{{ $illustration | safeHTML }}</div>
+                            </div>
+                        {{ else }}
+                            {{- (or $item.Description $item.Content) -}}
+                        {{ end }}
+                    {{- end -}}
+                </div>
+            {{ end }}
+        </div>
+    </div>
+
+    {{ if eq $type "callout" }}</div>{{ end }}
+    {{ if $vertical }}</div>{{ end }}
+</div>