jekyll-theme-centos 0.0.0

data/_includes/base/bits.html.liquid

@@ -0,0 +1,152 @@
+{% comment %}
+================================================================================
+Template: Bits Component (Upstream/Downstream Relationships)
+Purpose: Renders hierarchical relationships between upstream and downstream
+components. Displays upstream with preamble, card, finale, and up to 3 preview
+cards of related downstream items.
+================================================================================
+
+Strategic Design Logic:
+- Hierarchical relationships: upstream parent, downstream children
+- Card-based presentation: reuses card component for consistency
+- Filtered display: shows max 3 downstream preview cards
+- Optional sections: preamble, finale, "View All" link
+- Relationship linking: downstream filtered by upstream name
+- Customizable styling: per-element class overrides
+
+Required Inputs (from data objects):
+- type: 'upstream' or 'downstream' (required)
+- name: Component name (required)
+- relationship: For downstream, name of upstream parent
+
+Optional Inputs (from data objects):
+- description, screenshot, icon, image, actions, color
+- preamble, finale: Text before/after card
+- class, card_class, preamble_class, finale_class: Custom styling
+- index_page_name, index_page_url: For "View All" link (shows if >3 items)
+
+Data Source Hierarchy (in priority order):
+1. include.data - Explicitly passed array
+2. page.with_bits_data - Page front matter
+3. site.data.bits - Site data
+4. site.data.base.bits - Theme defaults
+
+Component Layout:
+- Outer loop: upstream bits (type='upstream')
+- Preamble text (if present)
+- Card component for upstream
+- Finale section with optional "View All" link (if >3 downstream)
+- Downstream preview grid (max 3 items, filtered by relationship)
+================================================================================
+{% endcomment %}
+
+{%- assign with_bits = include.with_bits
+| default: page.with_bits
+%}
+
+{%- assign with_bits_data = include.data
+| default: page.with_bits_data
+| default: site.data.bits
+| default: site.data.base.bits
+%}
+
+{%- assign with_bits_schema = site.data.base.bits_schema.properties.with_bits_data.items.properties %}
+
+{%- if with_bits %}
+
+{%- comment %} === Presentation === {% endcomment %}
+{%- assign upstream_bits = with_bits_data | where: "type", "upstream" %}
+{%- for upstream_bit in upstream_bits %}
+
+  {%- comment %} --- Upstream Defaults --- {% endcomment %}
+  {%- assign upstream_bit_id                    = upstream_bit.name             | replace: " ", "" | capitalize %}
+  {%- assign upstream_bit_class                 = upstream_bit.class            | default: with_bits_schema.class.default %}
+  {%- assign upstream_bit_card_class            = upstream_bit.card_class       | default: with_bits_schema.card_class.default %}
+  {%- assign upstream_bit_preamble_class        = upstream_bit.preamble_class   | default: with_bits_schema.preamble_class.default %}
+  {%- assign upstream_bit_finale_class          = upstream_bit.finale_class     | default: with_bits_schema.finale_class.default %}
+  {%- assign upstream_bit_color                 = upstream_bit.color            | default: with_bits_schema.color.default %}
+  {%- assign upstream_bit_index_page_name       = upstream_bit.index_page_name  | default: with_bits_schema.index_page_name.default %}
+  {%- assign upstream_bit_index_page_url        = upstream_bit.index_page_url   | default: with_bits_schema.index_page_url.default %}
+  {%- assign upstream_bit_screenshot_class      = upstream_bit.screenshot_class | default: with_bits_schema.screenshot_class.default %}
+  {%- assign upstream_bit_actions_class         = upstream_bit.actions_class    | default: with_bits_schema.actions_class.default %}
+  {%- assign upstream_bit_btn_class             = "btn btn-sm m-1 btn-"         | append: upstream_bit_color %}
+
+  <div class="d-flex flex-column{% if upstream_bit_class != "" %} {{ upstream_bit_class }}{% endif %}">
+
+    {%- comment %} --- Upstream Peamble --- {% endcomment %}
+    {%- if upstream_bit.preamble %}
+      <p{% if upstream_bit_preamble_class != "" %} class="{{ upstream_bit_preamble_class }}"{% endif %}>{{ upstream_bit.preamble }}</p>
+    {%- endif %}
+
+    {%- comment %} --- Upstream Card --- {% endcomment %}
+    {%- include base/card.html.liquid
+    class             = upstream_bit_card_class
+    screenshot        = upstream_bit.screenshot
+    screenshot_class  = upstream_bit_screenshot_class
+    screenshot_style  = upstream_bit.screenshot_style
+    screenshot_alt    = upstream_bit.screenshot_alt
+    icon              = upstream_bit.icon
+    icon_class        = upstream_bit.icon_class
+    image             = upstream_bit.image
+    image_class       = upstream_bit.image_class
+    image_style       = upstream_bit.image_style
+    image_alt         = upstream_bit.image_alt
+    name              = upstream_bit.name
+    name_class        = upstream_bit.name_class
+    description       = upstream_bit.description
+    description_class = upstream_bit.description_class
+    actions           = upstream_bit.actions
+    actions_class     = upstream_bit_actions_class
+    color             = upstream_bit_color
+    %}
+
+    {%- comment %} --- Upstream Finale (Downstream Introduction) --- {% endcomment %}
+    {%- assign downstream_bits           = with_bits_data               | where: "type", "downstream" | where: "relationship", upstream_bit.name %}
+    {%- assign downstream_bit_total      = downstream_bits              | size %}
+    {%- assign downstream_bit_index_name = upstream_bit_index_page_name | append: " (" | append: downstream_bit_total | append: ")"  %}
+
+    {%- if upstream_bit.finale %}
+      <div class="d-flex flex-row w-100 justify-content-between align-items-center my-3">
+        <p class="m-1{% if upstream_bit_finale_class != "" %} {{ upstream_bit_finale_class }}{% endif %}">{{ upstream_bit.finale }}</p>
+        {%- if downstream_bit_total > 3 %}
+          <div class="m-1">
+            {% include base/link.html.liquid
+            name          = downstream_bit_index_name
+            class         = ""
+            icon          = "fa-solid fa-arrow-right"
+            icon_position = "end"
+            url           = upstream_bit_index_page_url
+            %}
+          </div>
+        {% endif %}
+      </div>
+    {%- endif %}
+
+    {%- comment %} --- Downstream Cards --- {% endcomment %}
+    <div class="d-flex flex-row flex-wrap flex-lg-nowrap justify-content-between w-100 mb-3">
+      {%- for downstream_bit in downstream_bits | limit: 3 %}
+        <div class="card border-{{ upstream_bit_color }}-subtle m-1">
+          <div class="bg-{{ upstream_bit_color }} rounded-top">
+            <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="card-img-top" alt="{{ downstream_bit.screenshot }}">
+          </div>
+          <div class="card-body">
+            <p class="h5 card-title">{{ downstream_bit.name }}</p>
+            <p class="card-text">{{ downstream_bit.description }}</p>
+            {% for action in downstream_bit.actions | limit: 1 %}
+              {% include base/link.html.liquid
+              name          = action.name
+              url           = action.link
+              class         = upstream_bit_btn_class
+              icon          = action.icon
+              icon_position = action.icon_position
+              %}
+            {% endfor %}
+          </div>
+        </div>
+      {%- endfor %}
+    </div>
+
+  </div>
+{% endfor %}
+
+{%- endif -%}

data/_includes/base/breadcrumb.html.liquid

@@ -0,0 +1,77 @@
+{% comment %}
+================================================================================
+Template: Breadcrumb Navigation Component
+Purpose: Renders hierarchical breadcrumb navigation showing page location
+in the site's URL structure. Excludes locale codes from the visible trail.
+================================================================================
+
+Design Logic:
+- Automatic breadcrumb generation from page URL (no data config)
+- Hierarchical path visualization using URL splitting
+- Skips locale codes (e.g., /es/, /fr/) from visible breadcrumb
+- Home link always appears first as root
+- Current page title as active final item (non-clickable)
+- URL reconstruction preserves locale prefix in links
+
+Required Inputs:
+- page.url: Current page URL path (may include locale prefix)
+- page.original_url: URL without locale prefix (used for breadcrumb structure)
+- page.title: Display text for active breadcrumb
+
+Optional Inputs:
+- with_breadcrumb_data.arialabel: aria-label for the <nav> element (default: "breadcrumb")
+
+Data Source Hierarchy:
+- with_breadcrumb: include.with_breadcrumb → page.with_breadcrumb
+- with_breadcrumb_data: include.data → page.with_breadcrumb_data → site.data.breadcrumb → site.data.base.breadcrumb
+================================================================================
+{% endcomment %}
+
+{%- assign with_breadcrumb = include.with_breadcrumb
+| default: page.with_breadcrumb
+%}
+
+{%- assign with_breadcrumb_data = include.data
+| default: page.with_breadcrumb_data
+| default: site.data.breadcrumb
+| default: site.data.base.breadcrumb
+%}
+
+{%- if with_breadcrumb %}
+
+{%- assign with_breadcrumb_schema = site.data.base.breadcrumb_schema.properties.with_breadcrumb_data.properties %}
+
+{%- comment %} Use original_url if available (without locale), otherwise use full url {%- endcomment %}
+{%- assign breadcrumb_url = page.original_url | default: page.url %}
+
+{%- comment %} Use plugin-provided locale (set for localized pages, defaults to 'en') {%- endcomment %}
+{%- assign detected_locale = page.locale | default: 'en' %}
+
+<nav aria-label="{{ with_breadcrumb_data.arialabel | default: with_breadcrumb_schema.arialabel.default | default: 'breadcrumb' }}">
+  <ol class="breadcrumb mb-0">
+    {%- comment %} Home link - adjust for locale {%- endcomment %}
+    {%- if detected_locale == 'en' or detected_locale == '' %}
+      <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}/">Home</a></li>
+    {%- else %}
+      <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}/{{ detected_locale }}/">Home</a></li>
+    {%- endif %}
+
+    {%- assign crumbs = breadcrumb_url | remove:'/index.html' | split: '/' %}
+    {%- for crumb in crumbs offset: 1 %}
+      {%- if forloop.last %}
+        <li class="breadcrumb-item active">{{ page.title }}</li>
+      {%- else %}
+        {%- comment %} Build URL with locale prefix if not English {%- endcomment %}
+        {%- assign crumb_limit = forloop.index | plus: 1 %}
+        {%- if detected_locale == 'en' or detected_locale == '' %}
+          {%- assign crumb_prefix = '' %}
+        {%- else %}
+          {%- assign crumb_prefix = detected_locale | prepend: '/' %}
+        {%- endif %}
+        <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}{{ crumb_prefix }}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+      {%- endif %}
+    {%- endfor %}
+  </ol>
+</nav>
+
+{%- endif -%}

data/_includes/base/breakingnews.html.liquid

@@ -0,0 +1,90 @@
+{% comment %}
+================================================================================
+Template: Breaking News Component
+Purpose: Renders sticky alert banners for breaking news with multiple
+stacked alerts, colors, icons, and optional action links.
+================================================================================
+
+Design Logic:
+- Sticky positioning: stays visible during page scroll
+- Stacking support: multiple alerts stack vertically
+- Dynamic scroll offset calculation: prevents header hiding
+- Icon and color support: visual categorization
+- Optional action links: "Know more" button
+
+Required Inputs:
+- content: Alert message text/HTML
+
+Optional Inputs:
+- color: Alert color scheme (default: "primary")
+- icon: Icon class for Font Awesome (default: "fa-solid fa-bullhorn")
+- link: URL for "Know more" button (optional)
+- data: Array of breaking news items
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_breakingnews_data
+3. site.data.breakingnews
+4. site.data.base.breakingnews
+================================================================================
+{% endcomment %}
+
+{%- assign with_breakingnews = include.with_breakingnews
+| default: page.with_breakingnews
+%}
+
+{%- assign with_breakingnews_data = include.data
+| default: page.with_breakingnews_data
+| default: site.data.breakingnews
+| default: site.data.base.breakingnews
+%}
+
+{%- if with_breakingnews %}
+
+{%- assign with_breakingnews_schema = site.data.base.breakingnews_schema.properties.with_breakingnews_data.items.properties %}
+
+{%- comment %} === Presentation === {% endcomment %}
+{%- assign breakingnews_alert_height = site.data.base.breakingnews_schema.properties.breakingnews_alert_height.default %}
+{%- assign navbar_height = site.data.base.navbar_schema.properties.navbar_height.default %}
+
+{%- if with_breakingnews_data.size > 0 %}
+<div class="sticky-top sticky-top-breakingnews">
+  {% for item in with_breakingnews_data %}
+
+    {%- comment %} --- Defaults --- {% endcomment %}
+    {% if forloop.first %}
+      {% assign breakingnews_alerts_height = breakingnews_alert_height | plus: navbar_height %}
+    {% else %}
+      {% assign breakingnews_alerts_height = breakingnews_alerts_height | plus: breakingnews_alert_height %}
+    {% endif %}
+    {%- assign breakingnews_color     = item.color                    | default: with_breakingnews_schema.color.default %}
+    {%- assign breakingnews_btn_class = "btn btn-sm text-nowrap btn-" | append: breakingnews_color %}
+    {%- assign breakingnews_icon      = item.icon                     | default: with_breakingnews_schema.icon.default %}
+
+    {%- comment %} --- HTML --- {% endcomment %}
+    <div class="breakingnews alert alert-{{ breakingnews_color }} p-2 rounded-0 m-0 border-start-0 border-end-0 shadow" role="alert">
+      <div class="container d-flex justify-content-between align-items-center">
+        <div class="me-3">
+          <div class="h6 mb-0"><i class="{{ breakingnews_icon }}"></i></div>
+        </div>
+        <p class="flex-fill text-start mb-0">{{ item.content }}</p>
+        {%- if item.link %}
+          <div>
+            {% include base/link.html.liquid
+            name          = "Know more"
+            icon          = "fa-solid fa-arrow-right"
+            icon_position = "end"
+            role          = "button"
+            class         = breakingnews_btn_class
+            color         = breakingnews_color
+            link          = item.link
+            %}
+          </div>
+        {%- endif %}
+      </div>
+    </div>
+  {% endfor %}
+</div>
+{%- endif %}
+
+{%- endif -%}

data/_includes/base/card.html.liquid

@@ -0,0 +1,110 @@
+{% comment %}
+================================================================================
+Template: Flexible Card Component
+Purpose: Renders highly configurable card layouts with optional image,
+icon, title, description, and action buttons.
+================================================================================
+
+Design Logic:
+- Modular design: each section is optional
+- Capture-block approach: builds HTML fragments for reusability
+- Conditional rendering: only renders sections with content
+- Bootstrap flexbox-based layout for responsive design
+- Reuses link component for action buttons
+
+Optional Inputs:
+- class: Card container CSS classes
+- color: Color scheme for styling (default: "primary")
+- image, icon, screenshot: Visual elements
+- name, description: Text content
+- actions: Array of action buttons [{name, url, icon}]
+- All image/icon/name/description have customizable CSS classes
+
+Data Source:
+- Derived from include parameters only
+================================================================================
+{% endcomment %}
+
+{%- assign with_card_schema = site.data.base.card_schema.properties %}
+
+{%- assign card_class              = include.class             | default: with_card_schema.class.default %}
+{%- assign card_color              = include.color             | default: with_card_schema.color.default %}
+{%- assign card_image              = include.image             | default: with_card_schema.image.default %}
+{%- assign card_image_class        = include.image_class       | default: with_card_schema.image_class.default %}
+{%- assign card_image_style        = include.image_style       | default: with_card_schema.image_style.default %}
+{%- assign card_image_alt          = include.image_alt         | default: card_image %}
+{%- assign card_icon               = include.icon              | default: with_card_schema.icon.default %}
+{%- assign card_icon_class         = include.icon_class        | default: with_card_schema.icon_class.default %}
+{%- assign card_name               = include.name              | default: with_card_schema.name.default %}
+{%- assign card_name_class         = include.name_class        | default: with_card_schema.name_class.default %}
+{%- assign card_screenshot         = include.screenshot        | default: with_card_schema.screenshot.default %}
+{%- assign card_screenshot_class   = include.screenshot_class  | default: with_card_schema.screenshot_class.default %}
+{%- assign card_screenshot_style   = include.screenshot_style  | default: with_card_schema.screenshot_style.default %}
+{%- assign card_screenshot_alt     = include.screenshot_alt    | default: card_screenshot %}
+{%- assign card_description        = include.description       | default: with_card_schema.description.default %}
+{%- assign card_description_class  = include.description_class | default: with_card_schema.description_class.default %}
+{%- assign card_actions            = include.actions           | default: with_card_schema.actions.default %}
+{%- assign card_actions_class      = include.actions_class     | default: with_card_schema.actions_class.default %}
+{%- assign card_actions_btn_class  = include.actions_btn_class | default: "btn m-1 btn-" | append: card_color %}
+
+{%- comment %} === Presentation === {% endcomment %}
+
+{%- comment %} --- Defaults --- {% endcomment %}
+{%- capture html_card_screenshot -%}
+  {% if card_screenshot != "" %}
+    <div class="bg-{{ card_color }} rounded mb-3">
+      <img class="{{ card_screenshot_class }}"{% if card_screenshot_style != "" %} style="{{ card_screenshot_style }}"{% endif %} src="{{ site.baseurl }}/assets/img/{{ card_screenshot }}" alt="{{ card_screenshot_alt }}">
+    </div>
+  {% endif %}
+{%- endcapture %}
+
+{%- capture html_card_image -%}
+  {% if card_image != "" %}
+    <img class="{{ card_image_class }}"{% if card_image_style %} style="{{ card_image_style }}"{% endif %} src="{{ site.baseurl }}/assets/img/{{ card_image }}" alt="{{ card_image_alt }}">
+  {% endif %}
+{%- endcapture %}
+
+{%- capture html_card_icon -%}
+  {% if card_icon != "" %}
+    <div class="{{ card_icon_class }}"><i class="{{ card_icon }}"></i></div>
+  {% endif %}
+{%- endcapture %}
+
+{%- capture html_card_name -%}
+  {% if card_name != "" %}
+    <p class="{{ card_name_class }}">{{ card_name }}</p>
+  {% endif %}
+{%- endcapture %}
+
+{%- capture html_card_description -%}
+  {% if card_description != "" %}
+    <p class="{{ card_description_class }}">{{ card_description }}</p>
+  {% endif %}
+{%- endcapture %}
+
+{%- capture html_card_actions -%}
+  {%- if card_actions.size > 0 %}
+  <div class="{{ card_actions_class }}">
+    {%- for action in card_actions %}
+      {% include base/link.html.liquid
+      class         = card_actions_btn_class
+      role          = "button"
+      name          = action.name
+      url           = action.url
+      icon          = action.icon
+      icon_position = action.icon_position
+      %}
+    {% endfor %}
+  </div>
+  {% endif %}
+{%- endcapture %}
+
+{%- comment %} --- HTML --- {% endcomment %}
+<div class="d-flex{% if card_class != "" %} {{ card_class }}{% endif %}">
+  {{ html_card_image }}
+  {{ html_card_icon }}
+  {{ html_card_name }}
+  {{ html_card_description }}
+  {{ html_card_screenshot }}
+  {{ html_card_actions }}
+</div>

data/_includes/base/color-table.html.liquid

@@ -0,0 +1,33 @@
+<table class="table dataTable">
+  <thead class="table-light">
+    <tr>
+      <th>{{ include.name_label | default: "Color" }}</th>
+      <th class="text-nowrap">Hex</th>
+      <th class="text-nowrap">RGB</th>
+      <th class="text-nowrap">HSV</th>
+      <th>Text Color</th>
+      <th class="text-nowrap">Contrast Ratio</th>
+      <th class="text-nowrap">WCAG 2.2 AA</th>
+      <th class="text-nowrap">WCAG 2.2 AAA</th>
+    </tr>
+  </thead>
+  <tbody>
+{%- for item in include.collection %}
+{%- if include.name_field == "full_name" %}
+{%- assign _item_name = item.full_name | remove: '$' %}
+{%- else %}
+{%- assign _item_name = item.name %}
+{%- endif %}
+    <tr>
+      <td class="text-nowrap">{{ _item_name }}</td>
+      <td class="text-nowrap"><span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy hex value" data-copy-value="{{ item.hex }}" aria-label="Copy hex value {{ item.hex }}"><span class="fa-regular fa-copy"></span> <i class="fas fa-circle fa-xl" style="color: {{ item.hex }}"></i> <code>{{ item.hex }}</code></span></td>
+      <td class="text-nowrap"><span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy RGB value" data-copy-value="{{ item.rgb }}" aria-label="Copy RGB value {{ item.rgb }}"><span class="fa-regular fa-copy"></span> <code>{{ item.rgb }}</code></span></td>
+      <td class="text-nowrap"><span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy HSV value" data-copy-value="{{ item.hsv }}" aria-label="Copy HSV value {{ item.hsv }}"><span class="fa-regular fa-copy"></span> <code>{{ item.hsv }}</code></span></td>
+      <td><span class="badge {{ item.text_badge }}">{{ item.text_color }}</span></td>
+      <td class="text-nowrap"><code>{{ item.contrast_ratio | remove: '`' }}</code> <a href="https://webaim.org/resources/contrastchecker/?fcolor={{ item.text_color_hex | remove: '#' | upcase }}&bcolor={{ item.hex | remove: '#' | upcase }}" target="_blank" class="text-decoration-none" data-bs-toggle="tooltip" title="Verify with WebAIM" aria-label="Verify contrast ratio with WebAIM"><i class="fas fa-external-link-alt"></i></a></td>
+      <td class="text-nowrap">{% if item.wcag_2_2_aa %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Exceeds WCAG 2.2 AA standard (4.5:1 minimum)"><i class="fas fa-circle-check text-success"></i></span>{% else %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Underperforms WCAG 2.2 AA standard (4.5:1 minimum)"><i class="fas fa-circle-xmark text-danger"></i></span>{% endif %} <code>{{ item.wcag_2_2_aa_margin | remove: '`' }}</code></td>
+      <td class="text-nowrap">{% if item.wcag_2_2_aaa %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Exceeds WCAG 2.2 AAA standard (7.0:1 minimum)"><i class="fas fa-circle-check text-success"></i></span>{% else %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Underperforms WCAG 2.2 AAA standard (7.0:1 minimum)"><i class="fas fa-circle-xmark text-danger"></i></span>{% endif %} <code>{{ item.wcag_2_2_aaa_margin | remove: '`' }}</code></td>
+    </tr>
+{%- endfor %}
+  </tbody>
+</table>

data/_includes/base/configuration_variables-nested.html.liquid

@@ -0,0 +1,98 @@
+{% comment %}
+Generates one separate table and then triggers subsequent recursion to produce
+others. Requires two distinct loops for valid HTML structure.
+{% endcomment %}
+
+{% assign current_properties = include.properties %}
+{% assign parent_name        = include.parent_name %}
+{% assign current_level      = include.level | plus: 0 %}
+{% assign type_desc          = include.type_desc %}
+
+{% assign col_name        = include.col_name        | default: "Name" %}
+{% assign col_type        = include.col_type        | default: "Type" %}
+{% assign col_default     = include.col_default     | default: "Default" %}
+{% assign col_description = include.col_description | default: "Description" %}
+
+{% assign columns = include.columns %}
+
+{% if current_properties %}
+
+  {% comment %} 1. Calculate the property count for THIS specific set of data using | size. {% endcomment %}
+  {% assign current_property_count = current_properties | size %}
+
+  {% comment %} 2. Determine CSS classes and ID for THIS table {% endcomment %}
+  {% assign table_classes = "table dataTable" %}
+  {% assign table_id = parent_name | slugify | append: '-nested-' | append: current_level %}
+
+  {% comment %} 3. Render the current nested table (Loop 1: Rendering) {% endcomment %}
+  <p class="my-3">The <code>{{ parent_name }}</code> variable is a {{ type_desc }} with the following properties:</p>
+
+  <table id="{{ table_id }}" class="{{ table_classes }}">
+    <thead class="table-light">
+      <tr>
+        <th scope="col">{{ col_name }}</th>
+        {% if columns %}
+          {% for col in columns %}<th scope="col">{{ col.label }}</th>{% endfor %}
+        {% else %}
+          <th scope="col">{{ col_type }}</th>
+          <th scope="col">{{ col_default }}</th>
+          <th scope="col">{{ col_description }}</th>
+        {% endif %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for property in current_properties -%}
+        {% assign prop_key = property[0] %}
+        {% assign prop_details = property[1] %}
+        {% assign default_value = prop_details.default | default: "—" %}
+
+        <tr>
+          <td><code>{{ prop_key }}</code></td>
+          {% if columns %}
+            {% for col in columns %}<td>{{ prop_details[col.key] | strip_newlines | markdownify | default: "—" }}</td>{% endfor %}
+          {% else %}
+            <td>{{ prop_details.type        | strip_newlines | markdownify | default: "—" }}</td>
+            <td>{{ default_value            | strip_newlines | markdownify | default: "—" }}</td>
+            <td>{{ prop_details.description | strip_newlines | markdownify | default: "—" }}</td>
+          {% endif %}
+        </tr>
+      {% endfor -%}
+    </tbody>
+  </table>
+
+  {% comment %} 4. Run recursion check (Loop 2: Initiation, must run AFTER </table>) {% endcomment %}
+  {% for property in current_properties %}
+    {% assign prop_key = property[0] %}
+    {% assign prop_details = property[1] %}
+
+    {% assign nested_properties = nil %}
+
+    {% comment %} Check if the current property requires further recursion {% endcomment %}
+    {% if prop_details.type == "object" and prop_details.properties %}
+      {% assign nested_properties = prop_details.properties %}
+      {% assign next_type_desc = "dictionary (map)" %}
+    {% elsif prop_details.type == "array" and prop_details.items.properties %}
+      {% assign nested_properties = prop_details.items.properties %}
+      {% assign next_type_desc = "list of dictionaries" %}
+    {% endif %}
+
+    {% if nested_properties %}
+      {% comment %} Found deeper nesting: Call the next level {% endcomment %}
+      {% assign next_parent_name = include.parent_name | append: "." | append: prop_key %}
+      {% assign next_level_val = current_level | plus: 1 %}
+
+      {% include base/configuration_variables-nested.html.liquid
+      properties=nested_properties
+      parent_name=next_parent_name
+      type_desc=next_type_desc
+      level=next_level_val
+      col_name=col_name
+      col_type=col_type
+      col_default=col_default
+      col_description=col_description
+      columns=columns
+      %}
+    {% endif %}
+  {% endfor %}
+
+{% endif %}

data/_includes/base/configuration_variables.html.liquid

@@ -0,0 +1,98 @@
+{% comment %}
+Generates the top-level property table and initiates the recursive generation
+of separate, nested DataTables for complex properties.
+{% endcomment %}
+
+{% assign component             = page.component.name %}
+{% assign property_name         = "with_" | append: component %}
+{% assign property_name_schema  = component | append: "_schema" %}
+{% assign property_schema       = include.schema | default: site.data[property_name_schema] | default: site.data.base[property_name_schema] %}
+
+{% assign col_name        = include.col_name        | default: "Name" %}
+{% assign col_type        = include.col_type        | default: "Type" %}
+{% assign col_default     = include.col_default     | default: "Default" %}
+{% assign col_description = include.col_description | default: "Description" %}
+
+{% assign columns = include.columns | default: property_schema.columns %}
+
+{% if property_schema.properties %}
+
+  {% comment %} 1. Calculate the property count for the top table using | size. {% endcomment %}
+  {% assign property_count = property_schema.properties | size %}
+
+  {% comment %} 2. Determine the CSS classes for the top-level table. {% endcomment %}
+  {% assign table_classes = "table dataTable" %}
+
+  <p>The <code>{{ page.component.name }}</code> {{ page.component.type }} understands the following configuration variables:</p>
+
+  {% comment %} 3. Render the top-level table completely {% endcomment %}
+  <table class="{{ table_classes }}">
+    <thead class="table-light">
+      <tr>
+        <th scope="col">{{ col_name }}</th>
+        {% if columns %}
+          {% for col in columns %}<th scope="col">{{ col.label }}</th>{% endfor %}
+        {% else %}
+          <th scope="col">{{ col_type }}</th>
+          <th scope="col">{{ col_default }}</th>
+          <th scope="col">{{ col_description }}</th>
+        {% endif %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for property in property_schema.properties -%}
+        {% assign prop_key = property[0] %}
+        {% assign prop_details = property[1] %}
+        <tr>
+          <td><code>{{ prop_key }}</code></td>
+          {% if columns %}
+            {% for col in columns %}<td>{{ prop_details[col.key] | strip_newlines | markdownify | default: "—" }}</td>{% endfor %}
+          {% else %}
+            <td>{{ prop_details.type        | strip_newlines | markdownify | default: "—" }}</td>
+            <td>{{ prop_details.default     | strip_newlines | markdownify | default: "—" }}</td>
+            <td>{{ prop_details.description | strip_newlines | markdownify | default: "—" }}</td>
+          {% endif %}
+        </tr>
+      {% endfor -%}
+    </tbody>
+  </table>
+
+  {% comment %} 4. Initiate recursive nested table generation (separate loop) {% endcomment %}
+  {% for property in property_schema.properties -%}
+    {% assign prop_key = property[0] %}
+    {% assign prop_details = property[1] %}
+
+    {% assign nested_properties = nil %}
+    {% assign type_desc = "" %}
+
+    {% comment %} Check for nested structures in the top-level properties {% endcomment %}
+    {% if prop_details.type == "object" and prop_details.properties %}
+      {% assign nested_properties = prop_details.properties %}
+      {% assign type_desc = "dictionary (map)" %}
+    {% elsif prop_details.type == "array" and prop_details.items.properties %}
+      {% comment %} Handle array of objects {% endcomment %}
+      {% assign nested_properties = prop_details.items.properties %}
+      {% assign type_desc = "list of dictionaries" %}
+    {% endif %}
+
+    {% if nested_properties %}
+      {% assign initial_level = 1 %}
+
+      {% comment %} Call the recursive include for the first level of nested properties. {% endcomment %}
+      {% include base/configuration_variables-nested.html.liquid
+      properties=nested_properties
+      parent_name=prop_key
+      type_desc=type_desc
+      level=initial_level
+      col_name=col_name
+      col_type=col_type
+      col_default=col_default
+      col_description=col_description
+      columns=columns
+      %}
+    {% endif %}
+  {% endfor -%}
+
+{% else %}
+  <p>The <code>{{ page.component.name }}</code> {{ page.component.type }} {{ pt }} doesn't have configuration variables.</p>
+{% endif %}