jekyll-theme-centos 0.0.0

data/_includes/base/navindex.html.liquid

@@ -0,0 +1,200 @@
+{% comment %}
+================================================================================
+Template: Navigation Index Component
+Purpose: Renders a collection of pages or components in multiple display formats.
+Provides flexible list/card/table views for indexes and inventories.
+Automatically filters data by current page locale to avoid duplicates.
+================================================================================
+
+Design Logic:
+- Multi-format output: card, text, list, table, component_table (default: list)
+- Filters data by locale: shows canonical pages for English, localized variants for other locales
+- Filters out current page from results (prevents self-linking)
+- Reusable link component for consistent styling
+- Optional filename display using page name (with .md stripped)
+- Component table with status indicators from site.defaults
+- DataTables integration for searchable/sortable table output
+
+Required Inputs:
+- data: Array of page or component objects to display
+
+Optional Inputs:
+- format: Output format: 'card' | 'text' | 'list' | 'table' | 'component_table'
+- show_page_filename: Display page filename instead of title (true/false)
+
+Data Object Properties:
+- name, title, url, title_lead: Common properties
+- component.name: Component identifier (for component_table format)
+- locale: Locale code for localized pages (set by localization plugin)
+================================================================================
+{% endcomment %}
+
+{%- assign with_navindex = include.with_navindex
+| default: page.with_navindex
+%}
+
+{%- assign with_navindex_data = include.data
+| default: page.with_navindex_data
+| default: site.data.navindex
+| default: site.data.base.navindex
+%}
+
+{%- assign with_navindex_schema = site.data.base.navindex_schema.properties.with_navindex_data.properties %}
+
+{% assign data   = include.data   | default: with_navindex_schema.data.default %}
+{% assign format = include.format | default: with_navindex_schema.format.default %}
+
+{%- comment %} Filter data by locale to show only matching language pages {%- endcomment %}
+{%- assign current_locale = page.locale | default: 'en' %}
+{%- assign filtered_data = '' | split: '' %}
+
+{%- for item in data %}
+  {%- assign item_locale = item.locale | default: 'en' %}
+
+  {%- if current_locale == 'en' %}
+    {%- comment %} For English pages, show only canonical pages (not localized variants) {%- endcomment %}
+    {%- if item.localized != true %}
+      {%- assign filtered_data = filtered_data | push: item %}
+    {%- endif %}
+  {%- else %}
+    {%- comment %} For localized pages, show only pages matching current locale {%- endcomment %}
+    {%- if item_locale == current_locale %}
+      {%- assign filtered_data = filtered_data | push: item %}
+    {%- endif %}
+  {%- endif %}
+{%- endfor %}
+
+{%- comment %} Use filtered data for rendering {%- endcomment %}
+{%- assign data = filtered_data %}
+
+{% capture card %}
+{% assign show_page_filename = include.show_page_filename | default: "false" %}
+<div class="row g-3 mb-3 pt-1">
+  {%- for item in data %}
+    {%- if item.title != page.title %}
+      <div class="col-12 col-md-6">
+        <div class="p-3 pb-1 bg-light border rounded">
+          <div class="h5">
+            {%- if show_page_filename == "true" %}
+              {%- assign item_name = item.name | remove: '.md' %}
+              {%- include base/link.html.liquid name=item_name link=item.url %}
+            {%- else %}
+              {%- include base/link.html.liquid name=item.title link=item.url %}
+            {%- endif %}
+          </div>
+          {%- if item.title_lead %}
+            <p class="mb-3">{{ item.title_lead }}</p>
+          {%- endif %}
+        </div>
+      </div>
+    {%- endif %}
+  {%- endfor %}
+</div>
+{%- endcapture %}
+
+{%- capture text %}
+{% assign show_page_filename = include.show_page_filename | default: "false" %}
+<div class="row g-3 mb-3 pt-1">
+  {%- for item in data %}
+    {%- if item.title != page.title %}
+      <div class="col-12 col-md-6">
+        {%- if show_page_filename == "true" %}
+          {%- assign item_name = item.name | remove: '.md' %}
+          {%- include base/link.html.liquid name=item_name link=item.url %}
+        {%- else %}
+          {%- include base/link.html.liquid name=item.title link=item.url %}
+        {%- endif %}
+      </div>
+    {%- endif %}
+  {%- endfor %}
+</div>
+{%- endcapture %}
+
+{%- capture list %}
+{% assign show_page_filename = include.show_page_filename | default: "false" %}
+<ul>
+{%- for item in data %}
+  {%- if item.title != page.title %}
+    {%- if show_page_filename == "true" %}
+      {%- assign item_name = item.name | remove: '.md' %}
+      <li>{% include base/link.html.liquid name=item_name link=item.url %}{% if item.title_lead != nil %} &mdash; {{ item.title_lead }}{% endif %}</li>
+    {%- else %}
+      <li>{% include base/link.html.liquid name=item.title link=item.url %}{% if item.title_lead != nil %} &mdash; {{ item.title_lead }}{% endif %}</li>
+    {%- endif %}
+  {%- endif %}
+{%- endfor %}
+</ul>
+{%- endcapture %}
+
+{% capture table %}
+{% assign show_page_filename = include.show_page_filename | default: "false" %}
+<table class="table dataTable">
+  <thead class="table-light">
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    {%- for item in data %}
+      <tr>
+        {%- if item.title != page.title %}
+          {%- if show_page_filename == "true" %}
+            {%- assign item_name = item.name | remove: '.md' %}
+            <td>{% include base/link.html.liquid name=item_name link=item.url %}</td>
+          {%- else %}
+            <td>{% include base/link.html.liquid name=item.title link=item.url %}</td>
+          {%- endif %}
+        {%- endif %}
+        <td>{{ item.title_lead }}</td>
+      </tr>
+    {%- endfor %}
+  </tbody>
+</table>
+{%- endcapture %}
+
+{% capture component_table %}
+<table class="table dataTable">
+  <thead class="table-light">
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    {%- for item in data %}
+      {% comment %} Get component status from site configuration file {% endcomment %}
+      {%- assign status_name = "with_" | append: item.component.name %}
+      {%- assign status      = site.defaults[1].values[status_name] %}
+      {% comment %} Render component status {% endcomment %}
+      {%- if status == true %}
+        {%- assign status_icon = '<span data-bs-toggle="tooltip" data-bs-title="This component is enabled globally and can be used on all site pages. It can be disabled either globally or at a page level."><i class="fa-solid fa-toggle-on text-success"></i> Enabled</span>' %}
+      {%- elsif status == false %}
+        {%- assign status_icon = '<span data-bs-toggle="tooltip" data-bs-title="This component is disabled globally and cannot be used in site pages. It can be enabled either globally or at a page level."><i class="fa-solid fa-toggle-off text-danger"></i> Disabled</span>' %}
+      {%- else %}
+        {%- assign status_icon = '<span data-bs-toggle="tooltip" data-bs-title="This component is enabled globally and can be used on all site pages. It cannot be disabled."><i class="fa-solid fa-toggle-on text-light"></i> Internal</span>' %}
+      {%- endif %}
+      {% comment %} Render table rows {% endcomment %}
+      <tr>
+        <td>{% include base/link.html.liquid name=item.component.name link=item.url %}</td>
+        <td class="text-nowrap">{{ status_icon }}</td>
+        <td>{{ item.title_lead }}</td>
+      </tr>
+    {%- endfor %}
+  </tbody>
+</table>
+{% endcapture %}
+
+{% case format %}
+{% when "card" %}
+  {{ card }}
+{% when "text" %}
+  {{ text }}
+{% when "table" %}
+  {{ table }}
+{% when "component_table" %}
+  {{ component_table }}
+{% else %}
+  {{ list }}
+{% endcase %}

data/_includes/base/ogp.html.liquid

@@ -0,0 +1,144 @@
+{% 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: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'
+- Default image path: /assets/img/centos-social-share.png
+================================================================================
+{% endcomment %}
+
+{%- assign with_ogp = include.with_ogp
+| default: page.with_ogp
+%}
+
+{%- assign with_ogp_data = include.data
+| default: page.with_ogp_data
+| default: site.data.ogp
+| default: site.data.base.ogp
+%}
+
+{%- 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 %}
+  {%- 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_twitter_card = with_ogp_data.twitter.card
+    | default: with_ogp_twitter_schema.card.default
+    | default: 'summary_large_image' %}
+  {%- assign ogp_twitter_site = with_ogp_data.twitter.site
+    | default: with_ogp_twitter_schema.site.default
+    | default: '@CentOS' %}
+  {%- 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 %}
+  {%- 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 %}
+    {%- if with_ogp_data[property].title %}
+      <meta {{ meta_attr }}="{{ property }}:title" content="{{ page.title }}" />
+    {%- 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 %}
+      {%- if ogp_logo %}
+        <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 }}" />
+      {%- elsif page.title_lead %}
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.title_lead }}" />
+      {%- else %}
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ site.description }}" />
+      {%- endif %}
+    {%- endif %}
+
+    {%- comment %} --- Image --- {% endcomment %}
+    {%- if with_ogp_data[property].image %}
+      <meta {{ meta_attr }}="{{ property }}:image" content="{{ site.url }}{{ site.baseurl }}/assets/img/centos-social-share.png" />
+      {%- if property == "og" %}
+        <meta {{ meta_attr }}="{{ property }}:image:secure_url" content="{{ site.url }}{{ site.baseurl }}/assets/img/centos-social-share.png" />
+        <meta {{ meta_attr }}="{{ property }}:image:type" content="{{ ogp_image_type }}" />
+        <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' }}" />
+    {%- 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 %}
+        <meta property="og:site_name" content="{{ ogp_site_name }}" />
+      {%- endif %}
+      <meta property="og:locale" content="{{ ogp_locale }}" />
+    {%- endif %}
+
+  {%- endfor %}
+
+{% endif %}

data/_includes/base/project.html.liquid

@@ -0,0 +1,104 @@
+{% 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
+================================================================================
+{% endcomment %}
+
+{%- assign with_project = include.with_project
+| default: page.with_project
+%}
+
+{%- assign with_project_data = include.data
+| default: page.with_project_data
+| default: site.data.project
+| default: site.data.base.project
+%}
+
+{%- assign with_project_schema = site.data.base.project_schema.properties.with_project_data.properties %}
+
+{%- if with_project -%}
+
+{% assign project_class               = with_project_data.class               | default: with_project_schema.class.default %}
+{% assign project_screenshot          = with_project_data.screenshot          | default: with_project_schema.screenshot.default %}
+{% assign project_screenshot_class    = with_project_data.screenshot_class    | default: with_project_schema.screenshot_class.default %}
+{% assign project_screenshot_alt      = with_project_data.screenshot_alt      | default: with_project_schema.screenshot_alt.default %}
+{% assign project_image               = with_project_data.image               | default: with_project_schema.image.default %}
+{% assign project_image_alt           = with_project_data.image_alt           | default: with_project_schema.image_alt.default %}
+{% assign project_image_class         = with_project_data.image_class         | default: with_project_schema.image_class.default %}
+{% assign project_image_style         = with_project_data.image_style         | default: with_project_schema.image_style.default %}
+{% assign project_icon                = with_project_data.icon                | default: with_project_schema.icon.default %}
+{% assign project_icon_class          = with_project_data.icon_class          | default: with_project_schema.icon_class.default %}
+{% assign project_name                = with_project_data.name                | default: with_project_schema.name.default %}
+{% assign project_name_class          = with_project_data.name_class          | default: with_project_schema.name_class.default %}
+{% assign project_description         = with_project_data.description         | default: with_project_schema.description.default %}
+{% assign project_description_class   = with_project_data.description_class   | default: with_project_schema.description_class.default %}
+{% assign project_actions             = with_project_data.actions             | default: with_project_schema.actions.default %}
+{% assign project_actions_class       = with_project_data.actions_class       | default: with_project_schema.actions_class.default %}
+{% assign project_actions_btn_class   = with_project_data.actions_btn_class   | default: with_project_schema.actions_btn_class.default %}
+{% assign project_resources           = with_project_data.resources           | default: with_project_schema.resources.default %}
+{% assign project_resources_class     = with_project_data.resources_class     | default: with_project_schema.resources_class.default  %}
+{% assign project_resources_btn_class = with_project_data.resources_btn_class | default: with_project_schema.resources_btn_class.default %}
+
+<div class="d-flex{% if project_class != "" %} {{ project_class }}{% endif %}">
+  <div class="container pt-5">
+    {% include base/card.html.liquid
+          class             = "flex-column align-items-center pb-3"
+          color             = "primary"
+          screenshot        = project_screenshot
+          screenshot_class  = project_screenshot_class
+          screenshot_alt    = project_screenshot_alt
+          image             = project_image
+          image_class       = project_image_class
+          image_style       = project_image_style
+          image_alt         = project_image_alt
+          icon              = project_icon
+          icon_class        = project_icon_class
+          name              = project_name
+          name_class        = project_name_class
+          description       = project_description
+          description_class = project_description_class
+          actions           = project_actions
+          actions_btn_class = project_actions_btn_class
+          actions_class     = project_actions_class
+    %}
+    {%- if project_resources.size > 0 %}
+    <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
+            icon_position = resource.icon_position
+        %}
+      {%- endfor %}
+    </div>
+    {%- endif %}
+  </div>
+</div>
+
+{%- endif -%}

data/_includes/base/shortcut.html.liquid

@@ -0,0 +1,77 @@
+{% 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'
+- 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)
+================================================================================
+{% endcomment %}
+
+{%- assign with_shortcut = include.with_shortcut
+| default: page.with_shortcut
+%}
+
+{%- assign with_shortcut_data = include.data
+| default: page.with_shortcut_data
+| default: page.with_navbar_data
+| default: site.data.shortcut
+| default: site.data.navbar
+| default: site.data.base.shortcut
+| default: site.data.base.navbar
+%}
+
+{%- assign shortcut_navitems = with_shortcut_data.navitems | where: "visible_on", "footer" %}
+
+{%- if with_shortcut -%}
+
+  {%- comment %} === Presentation === {% endcomment %}
+  {% if shortcut_navitems.size > 0 %}
+    <div class="d-flex flex-wrap justify-content-evenly mb-4">
+
+      {% for section in shortcut_navitems -%}
+        <div class="pe-4">
+          <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 -%}
+              {%- 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
+                color = "primary"
+                %}
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
+
+{%- endif -%}

data/_includes/base/social.html.liquid

@@ -0,0 +1,76 @@
+{% comment %}
+================================================================================
+Template: Social Links Component
+Purpose: Renders a collection of social media and external links as styled
+buttons with icons. Includes optional site description header.
+================================================================================
+
+Strategic Design Logic:
+- Multi-level data source hierarchy for flexible configuration
+- Site description display for context/branding purposes
+- 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)
+
+Optional Inputs (from site configuration):
+- site.description: Brief site description displayed above social links
+
+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:
+- Site description displays only if site.description is defined
+- Loops through all social links in resolved data source
+- Each link rendered with consistent button styling
+================================================================================
+{% endcomment %}
+
+{%- assign with_social = include.with_social
+| default: page.with_social
+%}
+
+{%- assign with_social_data = include.data
+| default: page.with_social_data
+| default: site.data.social
+| default: site.data.base.social
+%}
+
+{%- assign with_social_schema = site.data.base.social_schema.properties.with_social_data.properties %}
+
+{%- assign social_class          = with_social_data.class          | default: with_social_schema.class.default %}
+{%- assign social_preamble       = with_social_data.preamble       | default: with_social_schema.preamble.default %}
+{%- 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 %}
+
+{% if with_social %}
+
+  {%- comment %} === Presentation (Begin) === {% endcomment %}
+  {%- if social_preamble %}
+    <p class="{{ social_preamble_class }}">{{ social_preamble }}</p>
+  {%- endif %}
+
+  {%- for item in social_media -%}
+    {%- 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 %}
+  {%- comment %} === Presentation (End) === {% endcomment %}
+
+{% endif %}

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

@@ -0,0 +1,69 @@
+{% 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/base/)
+
+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
+================================================================================
+{% 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
+%}
+
+{%- 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>
+  {%- endif -%}
+  {%- endfor %}
+  {%- comment %} === Presentation (End) === {% endcomment %}
+</div>
+
+{%- endif -%}