jekyll-theme-centos 2.52.0.beta.104 → 2.52.0.beta.106

data/_includes/base/ogp.html.liquid

@@ -1,49 +1,7 @@
 {% comment %}
-================================================================================
-Template: Open Graph & Twitter Meta Tags Component
-Purpose: Renders meta tags for Open Graph (OG) and Twitter Card protocols.
-Enables proper social media previews when sharing on social platforms.
-================================================================================
-
-Design Logic:
-- Dual-protocol support: Open Graph (OG) and Twitter Card meta tags
-- Hierarchical fallback system for meta tag values
-- Per-property customization via page front matter
-- Conditional rendering of protocol-specific attributes
-- Image metadata with security URL and dimensions for OG
-
-Required Inputs:
-- page.title: Page title for social sharing preview
-- site.url: Full site URL (for absolute URLs)
-- site.baseurl: Base URL path prefix
-
-Optional Inputs:
-- with_ogp_data.og.*, with_ogp_data.twitter.*: OG/Twitter property overrides
-- page.excerpt, page.title_lead: Fallback for description
-- site.description: Site-level description fallback
-- page.locale: BCP 47 locale code set by jekyll-l10n on localized pages
-
-Data Source Hierarchy:
-- og:title, twitter:title: with_ogp_data[property].title (real string override)
-  → page.title → schema default. `true` (this component's own previously
-  documented convention) is treated the same as omitted, for backward
-  compatibility; `false` or "" suppresses the tag entirely.
-- og:image:url, :secure_url (+ twitter): with_ogp_data[property].image.url/
-  .secure_url (real string override) → schema default
-  (/assets/img/centos-social-share.png). Same `true`-tolerance as
-  title, for the same reason.
-- og:type:             with_ogp_data.og.type → schema default → 'website'
-- og:site_name:       with_ogp_data.og.site_name → site.title
-- og:logo:            with_ogp_data.og.logo → schema default → '/assets/icons/apple-touch-icon.png'
-- og:locale:          page.locale (jekyll-l10n) → with_ogp_data.locale → schema default → 'en_US'
-- og:image:type:      with_ogp_data.og.image.type → schema default → 'image/png'
-- og:image:width:     with_ogp_data.og.image.width → schema default → 1200
-- og:image:height:    with_ogp_data.og.image.height → schema default → 630
-- og:image:alt:       with_ogp_data[property].image.alt → schema default → 'The CentOS Project'
-- twitter:card:       with_ogp_data.twitter.card → schema default → 'summary_large_image'
-- twitter:site:       with_ogp_data.twitter.site → schema default → '@CentOS'
-- twitter:creator:    with_ogp_data.twitter.creator → schema default → '@CentOS'
-================================================================================
+ogp: renders Open Graph and Twitter Card meta tags.
+Data: include.data > page.with_ogp_data > site.data.ogp > site.data.base.ogp
+Schema: src/YAML/ogp_schema.yml
 {% endcomment %}
 
 {%- assign with_ogp = include.with_ogp
@@ -59,43 +17,31 @@ Data Source Hierarchy:
 {%- assign with_ogp_schema = site.data.base.ogp_schema.properties.with_ogp_data.properties %}
 
 {%- if with_ogp %}
-
-  {%- comment %} === Presentation === {% endcomment %}
-  {%- comment %} --- Schema shorthands --- {% endcomment %}
   {%- assign with_ogp_og_image_schema   = with_ogp_schema.og.properties.image.properties %}
   {%- assign with_ogp_twitter_schema    = with_ogp_schema.twitter.properties %}
 
-  {%- comment %} --- Shared image metadata (og and twitter use the same image) --- {% endcomment %}
-  {%- assign ogp_image_type   = with_ogp_data.og.image.type   | default: with_ogp_og_image_schema.type.default   | default: 'image/png' %}
-  {%- assign ogp_image_width  = with_ogp_data.og.image.width  | default: with_ogp_og_image_schema.width.default  | default: 1200 %}
-  {%- assign ogp_image_height = with_ogp_data.og.image.height | default: with_ogp_og_image_schema.height.default | default: 630 %}
-
-  {%- comment %} --- Defaults --- {% endcomment %}
+  {%- comment %} og and twitter share one image, so its metadata resolves once. {% endcomment %}
+  {%- assign ogp_image_type   = with_ogp_data.og.image.type   | default: with_ogp_og_image_schema.type.default %}
+  {%- assign ogp_image_width  = with_ogp_data.og.image.width  | default: with_ogp_og_image_schema.width.default %}
+  {%- assign ogp_image_height = with_ogp_data.og.image.height | default: with_ogp_og_image_schema.height.default %}
   {%- assign ogp_og_type = with_ogp_data.og.type | default: with_ogp_schema.og.properties.type.default %}
-  {%- assign ogp_locale = page.locale | default: with_ogp_data.locale | default: with_ogp_schema.locale.default | default: 'en_US' %}
+  {%- assign ogp_locale = page.locale | default: with_ogp_data.locale | default: with_ogp_schema.locale.default %}
   {%- assign ogp_twitter_card = with_ogp_data.twitter.card
-    | default: with_ogp_twitter_schema.card.default
-    | default: 'summary_large_image' %}
+    | default: with_ogp_twitter_schema.card.default %}
   {%- assign ogp_twitter_site = with_ogp_data.twitter.site
-    | default: with_ogp_twitter_schema.site.default
-    | default: '@CentOS' %}
+    | default: with_ogp_twitter_schema.site.default %}
   {%- assign ogp_twitter_creator = with_ogp_data.twitter.creator
-    | default: with_ogp_twitter_schema.creator.default
-    | default: '@CentOS' %}
-
-  {%- comment %} --- Common attributes for both `og` and `twitter` properties --- {% endcomment %}
+    | default: with_ogp_twitter_schema.creator.default %}
   {%- assign properties = "og,twitter" | split: "," %}
   {%- for property in properties %}
   {%- if property == "twitter" %}{%- assign meta_attr = "name" %}{%- else %}{%- assign meta_attr = "property" %}{%- endif %}
-
-    {%- comment %} --- Twitter Card: required first --- {% endcomment %}
     {%- if property == "twitter" %}
       <meta name="twitter:card" content="{{ ogp_twitter_card }}" />
       <meta name="twitter:site" content="{{ ogp_twitter_site }}" />
       <meta name="twitter:creator" content="{{ ogp_twitter_creator }}" />
     {%- endif %}
 
-    {%- comment %} --- Title --- {% endcomment %}
+    {%- comment %} A title of true counts as omitted, for backward compatibility; false or "" suppresses the tag. {% endcomment %}
     {%- assign ogp_title_raw = with_ogp_data[property].title %}
     {%- if ogp_title_raw == nil or ogp_title_raw == true %}
       {%- assign ogp_title = page.title | default: with_ogp_schema.og.properties.title.default %}
@@ -105,8 +51,6 @@ Data Source Hierarchy:
     {%- if ogp_title and ogp_title != empty %}
       <meta {{ meta_attr }}="{{ property }}:title" content="{{ ogp_title | escape }}" />
     {%- endif %}
-
-    {%- comment %} --- OG type and logo (after title, before url) --- {% endcomment %}
     {%- if property == "og" %}
       <meta property="og:type" content="{{ ogp_og_type }}" />
       {%- assign ogp_logo = with_ogp_data.og.logo | default: with_ogp_schema.og.properties.logo.default %}
@@ -114,24 +58,16 @@ Data Source Hierarchy:
         <meta property="og:logo" content="{{ site.url }}{{ site.baseurl }}{{ ogp_logo }}" />
       {%- endif %}
     {%- endif %}
-
-    {%- comment %} --- URL --- {% endcomment %}
     {%- if with_ogp_data[property].url %}
       <meta {{ meta_attr }}="{{ property }}:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
     {%- endif %}
-
-    {%- comment %} --- Description --- {% endcomment %}
     {%- if with_ogp_data[property].description %}
-      {%- if page.excerpt %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.excerpt | strip_html | escape }}" />
-      {%- elsif page.title_lead %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.title_lead | escape }}" />
-      {%- else %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ site.description | escape }}" />
-      {%- endif %}
+      {%- comment %} Same sources and filters as the description meta tag in head.html.liquid; markdownify runs first so strip_html keeps literal tags written as code. {% endcomment %}
+      {%- assign ogp_description = page.description | default: page.excerpt | default: page.title_lead | default: site.description | markdownify | strip_html | strip_newlines | strip %}
+      <meta {{ meta_attr }}="{{ property }}:description" content="{{ ogp_description | escape_once }}" />
     {%- endif %}
 
-    {%- comment %} --- Image --- {% endcomment %}
+    {%- comment %} image.url and image.secure_url follow the same true-counts-as-omitted rule as the title. {% endcomment %}
     {%- assign ogp_image_url_raw = with_ogp_data[property].image.url %}
     {%- if ogp_image_url_raw == nil or ogp_image_url_raw == true %}
       {%- assign ogp_image_url = with_ogp_og_image_schema.url.default %}
@@ -154,10 +90,8 @@ Data Source Hierarchy:
         <meta {{ meta_attr }}="{{ property }}:image:width" content="{{ ogp_image_width }}" />
         <meta {{ meta_attr }}="{{ property }}:image:height" content="{{ ogp_image_height }}" />
       {%- endif %}
-      <meta {{ meta_attr }}="{{ property }}:image:alt" content="{{ with_ogp_data[property].image.alt | default: with_ogp_og_image_schema.alt.default | default: 'The CentOS Project' | escape }}" />
+      <meta {{ meta_attr }}="{{ property }}:image:alt" content="{{ with_ogp_data[property].image.alt | default: with_ogp_og_image_schema.alt.default | escape }}" />
     {%- endif %}
-
-    {%- comment %} --- OG site_name and locale (after image) --- {% endcomment %}
     {%- if property == "og" %}
       {%- assign ogp_site_name = with_ogp_data.og.site_name | default: site.title %}
       {%- if ogp_site_name %}

data/_includes/base/preview.html.liquid

@@ -1,39 +1,6 @@
 {% comment %}
-================================================================================
-Template: Preview Box Component
-Purpose: Puts a live demo, a toolbar, and a code sample in one bordered
-box, as up to three stacked rows.
-
-Behavior:
-- Pass `language` or `code`, and the template renders all three rows —
-  demo (`.preview-content`), toolbar with a language label and copy
-  button (`.preview-toolbar`), and code (`.preview-code`) — wrapped in
-  `<div class="preview ...">`. A row with nothing to show is skipped.
-- Pass neither, and the template renders a single plain
-  `<div class="{{ class }}">{{ content }}</div>`, so a caller that only
-  needs a demo wrapper gets one without a toolbar or code row.
-- Each render mode has its own default outer-box styling (padded and
-  tinted for the plain fallback, bordered and flush for the three-row
-  box). A `class` the caller passes replaces that default entirely.
-- The copy button reuses the site-wide `.copy-btn` click handler
-  (src/JS/copyvalue.js), loaded by copyvalue.html.liquid.
-- Highlight.js colors the code; this template only adds the
-  `language-{{ language }}` class the highlighter reads. The toolbar
-  label shows uppercase through `language_class`'s `text-uppercase`; the
-  value passed in stays lowercase to match that class.
-
-Optional Inputs:
-- class: CSS classes for the outer `<div>`.
-- content / content_class: The demo row's HTML (a caller-built `capture`
-  block) and its wrapper's classes.
-- language / language_class: The toolbar's language label and its
-  classes. Also becomes the `language-{{ language }}` class on the code
-  row's `<code>` tag.
-- copy_class: Extra classes on the copy button. Use `d-none` to hide it
-  without removing `code`. Only shows when `code` is set.
-- code / code_class: The code row's raw text (HTML-escaped automatically)
-  and its wrapper's classes.
-================================================================================
+preview: renders a demo, a toolbar, and an escaped code sample in one box, or only a plain demo wrapper when neither language nor code is set; the toolbar shows only when it holds a language label or a copy button, and the copy button only when page.with_copyvalue is on.
+Schema: src/YAML/preview_schema.yml
 {% endcomment %}
 
 {%- assign with_preview_schema = site.data.base.preview_schema.properties %}
@@ -46,31 +13,30 @@ Optional Inputs:
 {%- assign preview_copy_class     = include.copy_class      | default: with_preview_schema.copy_class.default %}
 {%- assign preview_code           = include.code             | default: with_preview_schema.code.default %}
 {%- assign preview_code_class     = include.code_class       | default: with_preview_schema.code_class.default %}
-
-{%- comment %} === Presentation === {% endcomment %}
-
-{%- comment %} --- Row visibility --- {% endcomment %}
 {%- assign preview_show_code = false %}
 {%- if preview_code != "" %}
   {%- assign preview_show_code = true %}
 {%- endif %}
-{%- assign preview_show_toolbar = false %}
+{%- assign preview_show_frame = false %}
 {%- if preview_language != "" or preview_show_code %}
-  {%- assign preview_show_toolbar = true %}
+  {%- assign preview_show_frame = true %}
 {%- endif %}
-{%- assign preview_multirow = false %}
-{%- if preview_show_toolbar %}
-  {%- assign preview_multirow = true %}
+{%- comment %} Same gate as base/copyvalue.html.liquid, which head.html.liquid includes without parameters: no copy script means no copy button. {% endcomment %}
+{%- assign preview_show_copy = false %}
+{%- if preview_show_code and page.with_copyvalue %}
+  {%- assign preview_show_copy = true %}
+{%- endif %}
+{%- assign preview_show_toolbar = false %}
+{%- if preview_language != "" or preview_show_copy %}
+  {%- assign preview_show_toolbar = true %}
 {%- endif %}
 
-{%- comment %} --- Outer container: use the default multirow look, unless the caller set their own `class` --- {% endcomment %}
-{%- if preview_multirow %}
+{%- comment %} A caller's class replaces the framed layout's default; include.class, not preview_class, tells whether one was passed. {% endcomment %}
+{%- if preview_show_frame %}
   {%- unless include.class %}
     {%- assign preview_class = "mb-3 border rounded overflow-hidden" %}
   {%- endunless %}
 {%- endif %}
-
-{%- comment %} --- Row 1: Live demo --- {% endcomment %}
 {%- capture html_preview_content %}
   {%- if preview_content != "" %}
   <div class="preview-content{% if preview_content_class != "" %} {{ preview_content_class }}{% endif %}">
@@ -78,14 +44,12 @@ Optional Inputs:
   </div>
   {%- endif %}
 {%- endcapture %}
-
-{%- comment %} --- Row 2: Toolbar (language label + copy button) --- {% endcomment %}
 {%- capture html_preview_toolbar %}
   {%- if preview_show_toolbar %}
   <div class="preview-toolbar m-0 p-2{% if preview_content != "" %} border-top{% endif %}{% if preview_show_code %} border-bottom{% endif %} border-centos-purple-100">
     {%- if preview_language != "" %}<span class="preview-language{% if preview_language_class != "" %} {{ preview_language_class }}{% endif %}">{{ preview_language }}</span>{%- endif %}
     <div class="preview-actions">
-      {%- if preview_show_code %}
+      {%- if preview_show_copy %}
       <button type="button" class="copy-btn focus-ring preview-copy{% if preview_copy_class != "" %} {{ preview_copy_class }}{% endif %}" data-bs-toggle="tooltip" data-bs-title="Copy code" data-copy-value="{{ preview_code | escape }}" aria-label="Copy code">
         <i class="fa-regular fa-copy"></i>
       </button>
@@ -94,18 +58,15 @@ Optional Inputs:
   </div>
   {%- endif %}
 {%- endcapture %}
-
-{%- comment %} --- Row 3: Code sample --- {% endcomment %}
 {%- capture html_preview_code %}
   {%- if preview_show_code %}
-  <div class="preview-code{% if preview_code_class != "" %} {{ preview_code_class }}{% endif %}">
+  {%- comment %} Without a toolbar, the code row takes over the divider line against the demo row above it. {% endcomment %}
+  <div class="preview-code{% if preview_code_class != "" %} {{ preview_code_class }}{% endif %}{% if preview_content != "" %}{% unless preview_show_toolbar %} border-top border-centos-purple-100{% endunless %}{% endif %}">
     <pre class="p-2"><code{% if preview_language != "" %} class="language-{{ preview_language }}"{% endif %}>{{ preview_code | escape }}</code></pre>
   </div>
   {%- endif %}
 {%- endcapture %}
-
-{%- comment %} --- HTML --- {% endcomment -%}
-{%- if preview_multirow %}
+{%- if preview_show_frame %}
 <div class="preview {{ preview_class }}">
 {{- html_preview_content | strip -}}
 {{- html_preview_toolbar | strip -}}

data/_includes/base/project.html.liquid

@@ -1,30 +1,7 @@
 {% comment %}
-================================================================================
-Template: Project Showcase Component
-Purpose: Renders a full-width project/product hero section with featured
-content and supplementary resource links.
-================================================================================
-
-Design Logic:
-- Hero-style layout: full-width container with dark background
-- Wraps card component for flexible content presentation
-- Dark theme (text-bg-dark) for high contrast and visual prominence
-- Resource section for downloadable/related content links
-- Data source hierarchy enables both page-level and site-level config
-- Container-based layout for max-width constraint on large screens
-- Reuses link component for action and resource buttons
-
-Optional Inputs:
-- data: Project data object (overrides all fallbacks)
-- project.name, description, icon, image, screenshot: Content
-- project.actions, resources: Arrays of buttons [{name, url, icon}]
-
-Data Source Hierarchy (priority):
-1. include.data
-2. page.with_project_data
-3. site.data.project
-4. site.data.base.project
-================================================================================
+project: renders a full-width hero with a card and a row of resource buttons.
+Data: include.data > page.with_project_data > site.data.project > site.data.base.project
+Schema: src/YAML/project_schema.yml
 {% endcomment %}
 
 {%- assign with_project = include.with_project
@@ -71,7 +48,6 @@ Data Source Hierarchy (priority):
   <div class="container{% if with_navbar %} pt-2{% endif %}">
     {% include base/card.html.liquid
           class             = project_content_class
-          color             = "primary"
           screenshot        = project_screenshot
           screenshot_class  = project_screenshot_class
           screenshot_alt    = project_screenshot_alt
@@ -90,11 +66,10 @@ Data Source Hierarchy (priority):
           actions_class     = project_actions_class
     %}
     {%- if project_resources.size > 0 %}
-    <div class="d-grid{% if project_resources_class %} {{ project_resources_class }}{% endif %}">
+    <div class="d-grid{% if project_resources_class != "" %} {{ project_resources_class }}{% endif %}">
       {%- for resource in project_resources %}
         {% include base/link.html.liquid
             class         = project_resources_btn_class
-            role          = "button"
             name          = resource.name
             link          = resource.link
             icon          = resource.icon

data/_includes/base/shortcut.html.liquid

@@ -1,38 +1,7 @@
 {% comment %}
-================================================================================
-Template: Shortcuts Navigation Component
-Purpose: Renders footer navigation shortcuts grouped by category. Displays
-sections of related links in multi-column layout suitable for footer placement.
-================================================================================
-
-Strategic Design Logic:
-- Grouped navigation: categories of related links
-- Column layout: multi-column footer display
-- Filtered items: only shows items with visible_on='footer', required
-explicitly — an item that omits visible_on is not shown here (it defaults
-to navbar-visible instead, per navbar.html.liquid)
-- Reusable link component: consistent styling
-- Empty state handling: no output if no items
-- Category headings: uppercase section titles
-
-Required Inputs (from data objects):
-- navitems[]: Array with visible_on='footer'
-
-Optional Inputs (from include):
-- data: Shortcuts configuration object
-
-Data Source Hierarchy (in priority order):
-1. include.data               - Explicitly passed configuration
-2. page.with_shortcut_data    - Page front matter
-3. site.data.shortcut         - Site configuration
-4. site.data.base.shortcut    - Theme defaults
-
-Conditional Logic:
-- shortcut_navitems.size > 0: Only render if items exist
-- Loop through sections and their menus
-- Each item rendered as link via link component
-- Color: "light" (suitable for dark footers)
-================================================================================
+shortcut: renders footer-visible navitems as grouped link lists.
+Data: include.data > page.with_shortcut_data > page.with_navbar_data > site.data.shortcut > site.data.navbar > site.data.base.shortcut > site.data.base.navbar
+Schema: src/YAML/shortcut_schema.yml
 {% endcomment %}
 
 {%- assign with_shortcut = include.with_shortcut
@@ -48,11 +17,10 @@ Conditional Logic:
 | default: site.data.base.navbar
 %}
 
+{%- comment %} Unlike navbar, an item without visible_on is not shown here; footer visibility must be explicit. {% endcomment %}
 {%- assign shortcut_navitems = with_shortcut_data.navitems | where_exp: "item", "item.visible_on contains 'footer'" %}
 
-{%- if with_shortcut -%}
-
-  {%- comment %} === Presentation === {% endcomment %}
+{%- if with_shortcut %}
   {% if shortcut_navitems.size > 0 %}
     <div class="d-flex flex-wrap justify-content-evenly mb-4">
 
@@ -61,11 +29,13 @@ Conditional Logic:
           <p class="h6">{% if section.icon %}<i class="{{ section.icon }} me-1"></i>{% endif %}{{ section.name }}</p>
           <ul class="px-0 mb-4">
             {% for item in section.menu -%}
+              {%- comment %} The class has no link color, so the footer's dark color mode picks it; link-underline makes the underline match the text. {% endcomment %}
               {%- assign item_link = item.link | locale_url: page.locale %}
               <li class="list-unstyled my-1">
                 {% include base/link.html.liquid
                 name  = item.name
                 link  = item_link
+                class = "link link-offset-2 link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-100-hover focus-ring"
                 %}
               </li>
             {% endfor %}

data/_includes/base/social.html.liquid

@@ -1,41 +1,7 @@
 {% comment %}
-================================================================================
-Template: Social Links Component
-Purpose: Renders a collection of social media and external links as styled
-buttons with icons, with an optional preamble line introducing them.
-================================================================================
-
-Design Logic:
-- Multi-level data source hierarchy for flexible configuration
-- Optional preamble text and CSS class, and an optional CSS class on the
-  container wrapping the icon row, for full presentational customization
-- Link rendering via reusable link component with icon support
-- Icon-based visual identification for different platforms
-- Accessibility-first approach with proper ARIA labels
-- Centered layout for prominent footer or banner placement
-
-Required Fields (per item in the media array):
-- link: URL for the social media or external platform
-- icon: Icon class for Font Awesome (e.g., 'fa-brands fa-github')
-- name: Platform name for accessibility label (e.g., 'GitHub')
-
-Optional Inputs (from include):
-- data: Array of social link objects (overrides all fallbacks)
-
-Data Source Hierarchy (in priority order):
-1. include.data           - Explicitly passed social link array
-2. page.with_social_data  - Page front matter configuration
-3. site.data.social       - Site-specific social configuration
-4. site.data.base.social  - Theme default social links
-
-Conditional Logic:
-- Preamble <p> falls back to the schema-documented default when omitted
-  from the resolved data source; set it explicitly to `false` or an empty
-  string to hide it entirely — no element is emitted in its place, so the
-  icon row's own margin reclaims the vertical space
-- Loops through all social links in resolved data source
-- Each link rendered with consistent button styling
-================================================================================
+social: renders an optional preamble and one icon button per social link.
+Data: include.data > page.with_social_data > site.data.social > site.data.base.social
+Schema: src/YAML/social_schema.yml
 {% endcomment %}
 
 {%- assign with_social = include.with_social
@@ -54,14 +20,13 @@ Conditional Logic:
 {%- assign social_preamble_class = with_social_data.preamble_class | default: with_social_schema.preamble_class.default %}
 {%- assign social_media          = with_social_data.media          | default: with_social_schema.media.default %}
 
+{%- comment %} == nil tells an omitted preamble apart from an explicit false or "", which hides it. {% endcomment %}
 {%- assign social_preamble = with_social_data.preamble %}
 {%- if with_social_data.preamble == nil %}
   {%- assign social_preamble = with_social_schema.preamble.default %}
 {%- endif %}
 
 {% if with_social %}
-
-  {%- comment %} === Presentation (Begin) === {% endcomment %}
   {%- if social_preamble and social_preamble != empty %}
     <p class="{{ social_preamble_class }}">{{ social_preamble }}</p>
   {%- endif %}
@@ -71,13 +36,10 @@ Conditional Logic:
       {%- include base/link.html.liquid
       class                = "btn btn-outline-primary m-1"
       link                 = item.link
-      role                 = "button"
       icon                 = item.icon
       aria_label           = item.name
-      data_bs_title        = item.name
       %}
     {%- endfor %}
   </div>
-  {%- comment %} === Presentation (End) === {% endcomment %}
 
 {% endif %}

data/_includes/base/sponsors-cards.html.liquid

@@ -1,69 +1,18 @@
 {% comment %}
-================================================================================
-Template: Sponsors Cards Component
-Purpose: Renders sponsor logos as a horizontal row of linked cards with
-border styling. Suitable for inline or content-area placement.
-================================================================================
-
-Strategic Design Logic:
-- Multi-level data source hierarchy for flexible configuration
-- Card-based layout for content-area or inline sponsor display
-- Active-flag filtering to soft-delete without data removal
-
-Required Fields (per item in the members array):
-- name:  Sponsor display name (used as alt text)
-- image: Logo source — bare filename (resolved via image_base_path) or absolute URL
-- url:   Sponsor website URL
-
-Optional Data Fields:
-- image_base_path: Base path for bare filenames (default: /assets/img/components/sponsors/)
-
-Optional Inputs (from include):
-- data: Sponsors data object (overrides all fallbacks)
-
-Data Source Hierarchy (in priority order):
-1. include.data               - Explicitly passed sponsors data object
-2. page.with_sponsors_data    - Page front matter configuration
-3. site.data.sponsors         - Site-specific sponsors configuration
-4. site.data.base.sponsors    - Theme default sponsors data
-
-Conditional Logic:
-- Component renders only when page.with_sponsors is true
-- Members filtered by is_active != false
-================================================================================
+sponsors-cards: renders active sponsor logos as a row of linked cards.
+Schema: src/YAML/sponsors_schema.yml
 {% endcomment %}
 
-{%- assign with_sponsors = include.with_sponsors
-| default: page.with_sponsors
-%}
-
-{%- assign with_sponsors_data = include.data
-| default: page.with_sponsors_data
-| default: site.data.sponsors
-| default: site.data.base.sponsors
-%}
+{%- include base/sponsors-data.html.liquid with_sponsors=include.with_sponsors data=include.data -%}
 
 {%- if with_sponsors -%}
 
-{%- assign with_sponsors_schema = site.data.base.sponsors_schema.properties.with_sponsors_data.properties %}
-
-{%- assign sponsors_members    = with_sponsors_data.members         | default: with_sponsors_schema.members.default -%}
-{%- assign sponsors_image_base = with_sponsors_data.image_base_path | default: with_sponsors_schema.image_base_path.default -%}
-
 <div class="d-flex flex-wrap justify-content-between py-4 my-4 border-top border-bottom border-top-1 border-bottom-1">
-  {%- comment %} === Presentation (Begin) === {% endcomment %}
   {%- for member in sponsors_members -%}
   {%- if member.is_active != false %}
-  <div class="card border-light m-4" style="max-height: 60px; max-width: 242px">
-    {%- if member.image contains "://" -%}
-    <a href="{{ member.url }}"><img src="{{ member.image }}" class="card-img-top rounded" style="max-height: 60px; max-width: 242px" alt="{{ member.name }}"></a>
-    {%- else -%}
-    <a href="{{ member.url }}"><img src="{{ site.baseurl }}{{ sponsors_image_base }}{{ member.image }}" class="card-img-top rounded" style="max-height: 60px; max-width: 242px" alt="{{ member.name }}"></a>
-    {%- endif -%}
-  </div>
+  <div class="card border-light m-4 sponsors-logo"><a href="{{ member.url }}"><img src="{{ sponsors_member_srcs[forloop.index0] }}" class="card-img-top rounded sponsors-logo" alt="{{ member.name }}"></a></div>
   {%- endif -%}
   {%- endfor %}
-  {%- comment %} === Presentation (End) === {% endcomment %}
 </div>
 
 {%- endif -%}

data/_includes/base/sponsors-carousel.html.liquid

@@ -1,67 +1,20 @@
 {% comment %}
-================================================================================
-Template: Sponsors Carousel Component
-Purpose: Renders sponsor logos as a Bootstrap carousel with optional title and
-message. Automatically cycles through active sponsors.
-================================================================================
-
-Strategic Design Logic:
-- Multi-level data source hierarchy for flexible configuration
-- Carousel display with fade transition for visual polish
-- Markdown-enabled message for rich introductory text
-- Active-flag filtering to soft-delete without data removal
-
-Required Fields (per item in the members array):
-- name:  Sponsor display name (used as alt text)
-- image: Logo source — bare filename (resolved via image_base_path) or absolute URL
-- url:   Sponsor website URL
-
-Optional Data Fields:
-- image_base_path: Base path for bare filenames (default: /assets/img/components/sponsors/)
-
-Optional Inputs (from include):
-- data:       Sponsors data object (overrides all fallbacks)
-- id:         Carousel element ID (default: "sponsorsCarousel")
-- with_title: Set false to suppress title/message block
-
-Data Source Hierarchy (in priority order):
-1. include.data               - Explicitly passed sponsors data object
-2. page.with_sponsors_data    - Page front matter configuration
-3. site.data.sponsors         - Site-specific sponsors configuration
-4. site.data.base.sponsors    - Theme default sponsors data
-
-Conditional Logic:
-- Component renders only when page.with_sponsors is true
-- Title/message block suppressed when include.with_title is false
-- Members filtered by is_active != false
-================================================================================
+sponsors-carousel: renders an optional title and message, active sponsor logos as a fading carousel, then an optional closing message.
+Schema: src/YAML/sponsors_schema.yml
 {% endcomment %}
 
-{%- assign with_sponsors = include.with_sponsors
-| default: page.with_sponsors
-%}
-
-{%- assign with_sponsors_data = include.data
-| default: page.with_sponsors_data
-| default: site.data.sponsors
-| default: site.data.base.sponsors
-%}
+{%- include base/sponsors-data.html.liquid with_sponsors=include.with_sponsors data=include.data -%}
 
 {%- if with_sponsors -%}
 
-{%- assign with_sponsors_schema = site.data.base.sponsors_schema.properties.with_sponsors_data.properties %}
-
 {%- assign sponsors_title      = with_sponsors_data.title           | default: with_sponsors_schema.title.default -%}
 {%- assign sponsors_icon       = with_sponsors_data.icon            | default: with_sponsors_schema.icon.default -%}
 {%- assign sponsors_message    = with_sponsors_data.message         | default: with_sponsors_schema.message.default -%}
-{%- assign sponsors_members    = with_sponsors_data.members         | default: with_sponsors_schema.members.default -%}
-{%- assign sponsors_image_base = with_sponsors_data.image_base_path | default: with_sponsors_schema.image_base_path.default -%}
+{%- assign sponsors_closing_message = with_sponsors_data.closing_message | default: with_sponsors_schema.closing_message.default -%}
 
 {%- assign carousel_id = include.id | default: "sponsorsCarousel" -%}
 
 <div id="{{ carousel_id }}" class="d-flex flex-wrap mb-5">
-
-  {%- comment %} === Presentation (Begin) === {% endcomment %}
   {%- if include.with_title != false %}
   <p class="h6"><i class="{{ sponsors_icon }}"></i> {{ sponsors_title }}</p>
   {{ sponsors_message | markdownify | decorate_links }}
@@ -72,19 +25,18 @@ Conditional Logic:
       {%- for member in sponsors_members -%}
       {%- if member.is_active != false %}
       <div class="carousel-item{% if forloop.first %} active{% endif %}">
-        <div class="w-100 align-middle" style="height: 80px; width: 262px">
-          {%- if member.image contains "://" -%}
-          <a href="{{ member.url }}"><img src="{{ member.image }}" class="rounded" style="max-height: 60px; max-width: 242px" alt="{{ member.name }}"></a>
-          {%- else -%}
-          <a href="{{ member.url }}"><img src="{{ site.baseurl }}{{ sponsors_image_base }}{{ member.image }}" class="rounded" style="max-height: 60px; max-width: 242px" alt="{{ member.name }}"></a>
-          {%- endif -%}
-        </div>
+        <div class="sponsors-carousel-slide"><a href="{{ member.url }}"><img src="{{ sponsors_member_srcs[forloop.index0] }}" class="rounded sponsors-logo" alt="{{ member.name }}"></a></div>
       </div>
       {%- endif -%}
       {%- endfor %}
     </div>
   </div>
-  {%- comment %} === Presentation (End) === {% endcomment %}
+
+  {%- if sponsors_closing_message != "" %}
+  <div class="w-100">
+    {{ sponsors_closing_message | markdownify | decorate_links }}
+  </div>
+  {%- endif %}
 
 </div>