jekyll-theme-centos 2.52.0.beta.91 → 2.52.0.beta.93

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23bf21a6e35d2941d90d11a7aefac6c245c1e2811fa5945eccf8bca522c02b90
-  data.tar.gz: 3f4e5a418e6a8e949b528bc4762899a351bebb05bd835c53df0945517d825e4b
+  metadata.gz: 836151018cf8fe713204e9e09cfc1fc62aa72394ed2a38d44b2acde91fccb3bc
+  data.tar.gz: 7f5d355430ec907001fc2aeac3a05000884f9f2fa4ea965ec4cf0253103f0550
 SHA512:
-  metadata.gz: 02da80654ac1f33df8888665c3f562face66490047e0726437ad8ac56c501e16046f6b1b3d993678159483204bf3612fb2086de5fdee8ce2b608aa4fda176130
-  data.tar.gz: 8d39190e6c26dc5c274933988326cbabe1152052e9f6e60f1eeeb2faacfbf472918f572b15c84122f77120f2d4e71d0b5385b1e5cd2981412b70f02bc6a21699
+  metadata.gz: dd4ad0f0437c111e41e46162330f39b24d065c81e1af6a132acbabc98c6018b8cfd00207dc7df0cfec557a70ac2118028ffac3f88ec85a2a11cc2d2d85aa2223
+  data.tar.gz: aa1d9d40a3f7ccb1cc5de0c4f3b0e1157ef81dcce527cbadfdc4c67b9445a95d052243e22322c468ce9bb7650e47deb090dca3ab6f370df8439c1d5b51d61895

data/_data/base/bits_schema.yml

@@ -112,7 +112,7 @@ properties:
           items:
             type: object
             description: Configuration object for a single action button (link). Refer to the `link` component documentation for specific properties.
-            additionalProperties: true # Changed to true as properties are defined externally
+            additionalProperties: true
         actions_class:
           type: string
           default: ""
@@ -135,11 +135,11 @@ properties:
             Only relevant when `type` is set to `upstream`.
         finale_class:
           type: string
-          default: mb-3
+          default: "mb-3"
           description: Custom Bootstrap classes applied to the `finale` message element (default adds margin-bottom).
         class:
           type: string
-          default: "bg-primary bg-opacity-10 border border-primary-subtle mb-3 p-5 align-items-center text-center rounded"
+          default: "bg-primary bg-opacity-10 border border-primary-subtle mb-3 p-3 pb-1 align-items-center text-center rounded"
           description: >-
             Custom Bootstrap classes applied to the main container of the
             Upstream Bit layout. Use this to control padding, background, and element
@@ -175,11 +175,32 @@ properties:
             to this Upstream Bit. For example, if the Upstream is at `/my-project/`,
             this might be `/my-project/derivatives/`.
           format: uri-reference
+        downstream_style:
+          type: string
+          default: card
+          description: >-
+            Presentation style for this Upstream Bit's downstream projects.
+            `card` (default) keeps the fixed 3-item card preview grid. `accordion`
+            renders every related downstream Bit as a Bootstrap accordion item
+            instead, optionally capped via `downstream_limit`. Only relevant
+            when `type` is `upstream`.
+          enum:
+            - card
+            - accordion
+        downstream_limit:
+          type: integer
+          minimum: 1
+          description: >-
+            Only used when `downstream_style` is `accordion`. Maximum number of
+            downstream Bits shown in the accordion for this Upstream Bit. When
+            omitted, every related downstream Bit is shown and the index-page
+            link is not rendered, since there is nothing left to link to. Has
+            no effect on the `card` style, whose display count stays fixed at 3.
       required:
         - screenshot
         - description
         - type
         - color
-        - name # Added name as it is critical for relationship
+        - name
       additionalProperties: false
 additionalProperties: false

data/_data/base/download_schema.yml

@@ -205,6 +205,20 @@ properties:
                     properties:
                       title: { type: string, default: "", description: "Visible link label." }
                       link:  { type: string, default: "", description: "Target URL." }
+                      description:
+                        type: string
+                        default: ""
+                        description: >-
+                          Optional supporting text or HTML explaining why
+                          this link is worth revisiting, not just what it's
+                          called. Empty renders this entry as a plain button
+                          (most entries need only `title`/`link`); set,
+                          renders as one prose sentence instead — `title` as
+                          the inline link, this text continuing the sentence
+                          grammatically right after it (e.g. a `title` of
+                          "Release Notes" and a `description` of "are
+                          continuously updated..." reads as "Release Notes
+                          are continuously updated...").
                     additionalProperties: false
                 eol:
                   type: array

data/_includes/base/{download_accordion_item.html.liquid → accordion_item.html.liquid}

@@ -1,13 +1,14 @@
 {% comment %}
 ================================================================================
-Utility: Download Accordion Item
-Purpose: The Bootstrap accordion-item/header/button/collapse/body shell
-shared by the four sibling sections below a release's architecture grid
-(Screenshots, Documentation, Migration, End-of-life) — see
-download_sections.html.liquid for how these compose into one shared
-accordion. Body content is built by the caller via a capture tag and passed
-in as a pre-rendered HTML string, since Jekyll's Liquid include mechanism
-has no block/yield content-passing.
+Utility: Accordion Item
+Purpose: The Bootstrap accordion-item/header/button/collapse/body shell,
+shared across components. Used by the four sibling sections below a
+release's architecture grid (Screenshots, Documentation, Migration,
+End-of-life — see download_sections.html.liquid for how these compose into
+one shared accordion) and by the bits component's accordion downstream
+style (see bits.html.liquid). Body content is built by the caller via a
+capture tag and passed in as a pre-rendered HTML string, since Jekyll's
+Liquid include mechanism has no block/yield content-passing.
 
 Required Inputs:
 - icon:         Font Awesome icon class shown before the title.
@@ -28,7 +29,7 @@ Optional Inputs:
   <div class="accordion-header h2">
     <button class="accordion-button{% unless include.expanded %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ include.item_id }}" aria-expanded="{{ include.expanded }}" aria-controls="{{ include.item_id }}">
       <i class="{{ include.icon }} me-2"></i>
-      <span class="mx-3 fw-bold">{{ include.title }}</span>
+      <span class="ms-1 fw-bold">{{ include.title }}</span>
     </button>
   </div>
   <div id="{{ include.item_id }}" class="accordion-collapse collapse{% if include.expanded %} show{% endif %}" data-bs-parent="#{{ include.accordion_id }}">

data/_includes/base/bits.html.liquid

@@ -2,14 +2,16 @@
 ================================================================================
 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.
-================================================================================
+components. Displays upstream with preamble, card, finale, and its related
+downstream items in one of two switchable presentation styles.
 
 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
+- Switchable downstream presentation: `card` (fixed 3-item preview grid,
+the default) or `accordion` (every related downstream item, optionally
+capped via `downstream_limit`), picked per upstream Bit — never both at
+once for the same upstream Bit
 - Optional sections: preamble, finale, "View All" link
 - Relationship linking: downstream filtered by upstream name
 - Customizable styling: per-element class overrides
@@ -23,7 +25,13 @@ 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)
+- downstream_style: 'card' (default) or 'accordion' — which presentation
+renders this upstream Bit's downstream items
+- downstream_limit: accordion style only; max downstream items shown. Omit
+for unlimited (all shown, "View All" link never rendered)
+- index_page_name, index_page_url: For "View All" link (card style shows it
+if >3 items; accordion style shows it only when downstream_limit is set
+and exceeded)
 
 Data Source Hierarchy (in priority order):
 1. include.data - Explicitly passed array
@@ -35,8 +43,9 @@ 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)
+- Finale section with optional "View All" link
+- Downstream items: card style (max 3 preview cards) or accordion style
+(all items, or up to downstream_limit), filtered by relationship
 ================================================================================
 {% endcomment %}
 
@@ -70,10 +79,13 @@ Component Layout:
   {%- 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 %}
+  {%- assign upstream_bit_downstream_style      = upstream_bit.downstream_style  | default: with_bits_schema.downstream_style.default %}
+  {%- assign upstream_bit_downstream_limit      = upstream_bit.downstream_limit %}
+  {%- assign card_style_downstream_cap          = 3 %}
 
   <div class="d-flex flex-column{% if upstream_bit_class != "" %} {{ upstream_bit_class }}{% endif %}">
 
-    {%- comment %} --- Upstream Peamble --- {% endcomment %}
+    {%- comment %} --- Upstream Preamble --- {% endcomment %}
     {%- if upstream_bit.preamble %}
       <p{% if upstream_bit_preamble_class != "" %} class="{{ upstream_bit_preamble_class }}"{% endif %}>{{ upstream_bit.preamble }}</p>
     {%- endif %}
@@ -98,55 +110,116 @@ Component Layout:
     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: ")"  %}
 
+    {%- assign show_index_link = false %}
+    {%- if upstream_bit_downstream_style == "accordion" %}
+      {%- if upstream_bit_downstream_limit and downstream_bit_total > upstream_bit_downstream_limit %}
+        {%- assign show_index_link = true %}
+      {%- endif %}
+    {%- else %}
+      {%- if downstream_bit_total > card_style_downstream_cap %}
+        {%- assign show_index_link = true %}
+      {%- endif %}
+    {%- endif %}
+
     {%- if upstream_bit.finale %}
-      <div class="d-flex flex-row w-100 justify-content-between align-items-center my-3">
+      <div class="d-flex flex-row w-100 justify-content-between align-items-center">
         <p class="m-1{% if upstream_bit_finale_class != "" %} {{ upstream_bit_finale_class }}{% endif %}">{{ upstream_bit.finale }}</p>
-        {%- if downstream_bit_total > 3 %}
+        {%- if show_index_link %}
           <div class="m-1">
-            {% include base/link.html.liquid
+            {%- include base/link.html.liquid
             name          = downstream_bit_index_name
             class         = ""
             icon          = "fa-solid fa-arrow-right"
             icon_position = "end"
             link          = upstream_bit_index_page_url
-            %}
+            -%}
           </div>
-        {% endif %}
+        {%- 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">
+    {%- comment %} --- Downstream Items --- {% endcomment %}
+    {%- assign downstream_display_limit = upstream_bit_downstream_limit %}
+    {%- if upstream_bit_downstream_style != "accordion" %}
+      {%- assign downstream_display_limit = card_style_downstream_cap %}
+    {%- endif %}
+    {%- if downstream_display_limit %}
+      {%- assign visible_downstream_bits = downstream_bits | slice: 0, downstream_display_limit %}
+    {%- else %}
+      {%- assign visible_downstream_bits = downstream_bits %}
+    {%- endif %}
+
+    {%- if upstream_bit_downstream_style == "accordion" %}
+      {%- assign downstream_accordion_id = upstream_bit_id | append: "-downstream-accordion" %}
+      {%- assign downstream_item_img_class = "img-fluid" %}
+    {%- else %}
+      {%- assign downstream_item_img_class = "card-img-top" %}
+    {%- endif %}
+
+    {%- capture downstream_items_html %}
+      {%- for downstream_bit in visible_downstream_bits %}
+        {%- assign downstream_bit_first_action = downstream_bit.actions | first %}
+        {%- capture downstream_bit_action_button %}
+          {%- if downstream_bit_first_action %}
+            {%- include base/link.html.liquid
+            name          = downstream_bit_first_action.name
+            link          = downstream_bit_first_action.link
+            class         = upstream_bit_btn_class
+            icon          = downstream_bit_first_action.icon
+            icon_position = downstream_bit_first_action.icon_position
+            -%}
+          {%- endif %}
+        {%- endcapture %}
+
+        {%- capture downstream_bit_media %}
           <div class="bg-{{ upstream_bit_color }} rounded-top">
-            <img src="{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="card-img-top" alt="{{ downstream_bit.screenshot }}">
+            <img src="{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="{{ downstream_item_img_class }}" 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
-              link          = action.link
-              class         = upstream_bit_btn_class
-              icon          = action.icon
-              icon_position = action.icon_position
-              %}
-            {% endfor %}
+        {%- endcapture %}
+
+        {%- if upstream_bit_downstream_style == "accordion" %}
+          {%- assign downstream_bit_id = downstream_bit.name | replace: " ", "" | capitalize %}
+          {%- assign downstream_item_id = downstream_accordion_id | append: "-" | append: downstream_bit_id %}
+          {%- capture downstream_bit_body %}
+            {{- downstream_bit_media | strip -}}
+            <p class="card-text mt-3">{{ downstream_bit.description }}</p>
+            {{ downstream_bit_action_button }}
+          {%- endcapture %}
+          {%- include base/accordion_item.html.liquid
+          icon          = downstream_bit.icon
+          title         = downstream_bit.name
+          item_id       = downstream_item_id
+          accordion_id  = downstream_accordion_id
+          expanded      = false
+          body          = downstream_bit_body
+          -%}
+        {%- else %}
+          <div class="card border-{{ upstream_bit_color }}-subtle m-1">
+            {{- downstream_bit_media | strip -}}
+            <div class="card-body">
+              <p class="h5 card-title">{{ downstream_bit.name }}</p>
+              <p class="card-text">{{ downstream_bit.description }}</p>
+              {{ downstream_bit_action_button }}
+            </div>
           </div>
-        </div>
+        {%- endif %}
       {%- endfor %}
-    </div>
+    {%- endcapture %}
+
+    {%- if upstream_bit_downstream_style == "accordion" %}
+      <div class="accordion w-100 mb-3" id="{{ downstream_accordion_id }}">{{- downstream_items_html -}}</div>
+    {%- else %}
+      <div class="d-flex flex-row flex-wrap flex-lg-nowrap justify-content-between w-100 mb-3">{{- downstream_items_html -}}</div>
+    {%- endif %}
 
   </div>
-{% endfor %}
+{%- endfor %}
 
 {%- endif -%}

data/_includes/base/download.html.liquid

@@ -22,8 +22,14 @@ Data Source Hierarchy (in priority order):
 4. site.data.base.download - Theme defaults
 
 Optional Inputs (from include):
-- title: Render only the entry whose title matches exactly.
-- id:    HTML id prefix for the nav-pills tab selector (default: DownloadsCard-1).
+- title:            Render only the entry whose title matches exactly.
+- id:                HTML id prefix for the nav-pills tab selector (default: DownloadsCard-1).
+- with_title:        Set to false to skip the entry's own title heading, e.g. when
+                     the calling page already presents it as a real markdown
+                     heading immediately above the include (for TOC/anchor
+                     navigation). Default: true.
+- with_description:  Set to false to skip the entry's own description text for the
+                     same reason. Default: true.
 ================================================================================
 {% endcomment %}
 
@@ -76,13 +82,13 @@ Optional Inputs (from include):
       {%- assign single_release = entry.releases | first %}
     {%- endif %}
 
-    {%- if entry.title and entry.title != "" %}
+    {%- if entry.title and entry.title != "" and include.with_title != false %}
     <div class="h2">
       {{ entry.title | escape }}{% if single_release %} {{ single_release[0] | escape }}{% endif %}
     </div>
     {%- endif %}
 
-    {%- if entry.description and entry.description != "" %}
+    {%- if entry.description and entry.description != "" and include.with_description != false %}
     {{ entry.description | strip_newlines | markdownify }}
     {%- endif %}
 
@@ -102,7 +108,7 @@ Optional Inputs (from include):
       </div>
       {%- endfor %}
     {%- elsif entry.releases.size > 1 %}
-    <ul class="nav nav-pills my-3 justify-content-start" id="{{ card_id }}-pills-tab" role="tablist">
+    <ul class="nav nav-pills mb-3 justify-content-start" id="{{ card_id }}-pills-tab" role="tablist">
       {%- for release in entry.releases %}
       <li class="nav-item" role="presentation">
         <button class="nav-link{% if forloop.first %} active{% endif %} fw-bold"

data/_includes/base/download_architecture.html.liquid

@@ -154,10 +154,10 @@ content — see examples/components/download-alternative-images.md.
   {%- assign arch_name_id_safe = arch_name | remove: '"' | remove: "'" | remove: '<' | remove: '>' | remove: '&' | remove: '#' | remove: '?' | remove: '/' %}
   {%- assign arch_id_prefix = include.release_id | default: "download" | append: "-" | append: arch_name_id_safe | downcase | replace: " ", "-" %}
   <div class="{{ arch_col_class }}"{% if arch_orphan_style != "" %} style="{{ arch_orphan_style }}"{% endif %}>
-    <div class="d-flex flex-column align-items-start p-3">
-      <div class="mb-2">
-        <div class="fs-2"><i class="fa-solid fa-microchip"></i></div>
-        <div class="h3">{{ arch_name | escape }}</div>
+    <div class="d-flex flex-column align-items-start p-3 pt-1">
+      <div class="mb-2 d-flex align-items-center gap-2">
+        <i class="fa-solid fa-microchip fs-2"></i>
+        <span class="h3 mb-0">{{ arch_name | escape }}</span>
       </div>
 
       {%- assign has_download_button = false %}
@@ -213,24 +213,31 @@ content — see examples/components/download-alternative-images.md.
       {%- endif %}
 
       {%- if has_mirrors %}
+      {%- comment %} These are outbound links to a mirror/registry, not
+      in-page navigation, so each opens in a new tab (target="_blank") with
+      the same trailing external-link icon as the Documentation section's
+      buttons (base/download_documentation.html.liquid), rather than the
+      Download button's leading icon above — the leading icon there signals
+      the primary action; the trailing external icon here signals "leaves
+      the site". {% endcomment %}
       <div class="d-flex flex-wrap gap-2">
         {%- if arch_data.mirrors.iso and arch_data.mirrors.iso != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="ISO Mirrors" link=arch_data.mirrors.iso icon="fa-solid fa-compact-disc" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="ISO Mirrors" link=arch_data.mirrors.iso target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.rpm and arch_data.mirrors.rpm != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="RPM Mirrors" link=arch_data.mirrors.rpm icon="fa-solid fa-box" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="RPM Mirrors" link=arch_data.mirrors.rpm target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.cloud and arch_data.mirrors.cloud != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Cloud Images" link=arch_data.mirrors.cloud icon="fa-solid fa-cloud" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Cloud Images" link=arch_data.mirrors.cloud target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.containers and arch_data.mirrors.containers != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Container Images" link=arch_data.mirrors.containers icon="fa-solid fa-cubes" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Container Images" link=arch_data.mirrors.containers target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.vagrant and arch_data.mirrors.vagrant != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Vagrant Boxes" link=arch_data.mirrors.vagrant icon="fa-solid fa-box-archive" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Vagrant Boxes" link=arch_data.mirrors.vagrant target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.torrent and arch_data.mirrors.torrent != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Torrent" link=arch_data.mirrors.torrent icon="fa-solid fa-magnet" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Torrent" link=arch_data.mirrors.torrent target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
       </div>
       {%- endif %}

data/_includes/base/download_commands.html.liquid

@@ -24,4 +24,4 @@ Required Inputs:
     {%- endif %}
   {%- endfor %}
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-terminal" title="Migration" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_commands_body -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-terminal" title="Migration" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_commands_body -%}

data/_includes/base/download_documentation.html.liquid

@@ -7,18 +7,52 @@ eol/screenshots accordion — release-wide metadata that applies in common to
 every architecture above. Called from download_sections.html.liquid.
 
 Required Inputs:
-- documentation: Array of {title, link}
+- documentation: Array of {title, link, description}
 - accordion_id: Parent accordion's id, for data-bs-parent scoping
 - item_id: This item's unique collapse id
 - expanded: true starts this item open; false starts it closed. Passed
   through from the caller (see download_sections.html.liquid).
+
+An entry's optional `description` switches its own presentation rather than
+attaching a caption to a button: a bare button reads as a call to action
+("do this now"), a mismatched signifier for a full explanatory sentence
+sitting next to it — so once there's a sentence to say, the entry renders as
+one prose paragraph with `title` as the inline link and `description`
+continuing the sentence grammatically (e.g. "Release Notes are continuously
+updated..."), the standard, immediately-recognizable convention for
+referencing a resource from explanatory text. Entries without a description
+still render as a bare button, identical to before this field existed —
+prose and buttons render as two separate groups (prose first, since it's the
+richer content) rather than interleaved, so a documentation list mixing both
+kinds doesn't end up with paragraphs breaking up a button row.
 ================================================================================
 {% endcomment %}
-{%- capture download_documentation_body -%}
+{%- capture download_documentation_prose -%}
   {%- for row in include.documentation %}
-  {%- if row.title and row.title != "" %}
-  {%- include base/link.html.liquid class="btn btn-outline-primary" role="button" name=row.title link=row.link icon="fa-solid fa-up-right-from-square" icon_position="start" -%}
-  {%- endif %}
+    {%- assign has_description = false %}
+    {%- if row.description and row.description != "" %}
+      {%- assign has_description = true %}
+    {%- endif %}
+    {%- if row.title and row.title != "" and has_description %}
+    <p class="mb-2">{%- include base/link.html.liquid name=row.title link=row.link target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" %} {{ row.description }}</p>
+    {%- endif %}
   {%- endfor %}
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-book" title="Documentation" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body_class="d-flex flex-wrap gap-2" body=download_documentation_body -%}
+{%- capture download_documentation_buttons -%}
+  {%- for row in include.documentation %}
+    {%- assign has_description = false %}
+    {%- if row.description and row.description != "" %}
+      {%- assign has_description = true %}
+    {%- endif %}
+    {%- if row.title and row.title != "" and has_description == false %}
+    {%- include base/link.html.liquid class="btn btn-outline-primary text-start" role="button" name=row.title link=row.link target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+    {%- endif %}
+  {%- endfor %}
+{%- endcapture -%}
+{%- assign download_documentation_prose_stripped = download_documentation_prose | strip %}
+{%- assign download_documentation_buttons_stripped = download_documentation_buttons | strip %}
+{%- capture download_documentation_body -%}
+  {%- if download_documentation_prose_stripped != "" %}{{ download_documentation_prose }}{%- endif %}
+  {%- if download_documentation_buttons_stripped != "" %}<div class="d-flex flex-wrap gap-2">{{ download_documentation_buttons }}</div>{%- endif %}
+{%- endcapture -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-book" title="Documentation" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_documentation_body -%}

data/_includes/base/download_eol.html.liquid

@@ -26,4 +26,4 @@ Required Inputs:
     {%- endfor %}
   </ul>
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-hourglass-end" title="End-of-life" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_eol_body -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-hourglass-end" title="End-of-life" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_eol_body -%}

data/_includes/base/download_screenshots.html.liquid

@@ -24,19 +24,78 @@ Required Inputs:
 - expanded: true starts this item open; false starts it closed. Passed
   through from the caller (see download_sections.html.liquid).
 
-Each slide is wrapped in Bootstrap's `ratio ratio-16x9` utility, the same
-ratio artwork.html.liquid uses for its own image presentation
+Each slide is wrapped in Bootstrap's `.ratio` utility, set to a fixed 16:10
+box (`--bs-aspect-ratio: 62.5%` — 800 / 1280) so screenshots of any native
+size crop to a consistent box instead of each slide having its own height.
+16:10 matches actual OS screenshot captures (e.g. 1280x800, a common
+display resolution) — deliberately not the 16:9 `ratio-16x9` modifier class
+artwork.html.liquid uses for its own image presentation
 (artwork_schema.yml's image_class default: `ratio ratio-16x9 rounded
-bg-dark bg-artwork`), so screenshots of any native size crop to a
-consistent 16:9 box instead of each slide having its own height.
+bg-dark bg-artwork`); real screen captures are rarely 16:9 natively, so
+matching artwork's ratio here would crop more than necessary. Bootstrap
+ships no `ratio-16x10` modifier class, hence the inline `--bs-aspect-ratio`
+override on the base `.ratio` class instead of a second modifier class.
 `object-fit-cover` on the `<img>` itself does the actual cropping — `.ratio`
 alone only stretches its child to fill the box.
+
+The carousel skips Bootstrap's `.carousel-dark` modifier: its indicator/
+caption colors are meant to react to whether the underlying image is
+generally light or dark, which fits calm banner photography but not real OS
+screenshots — a single release's slides span stark-white installer screens
+to busy desktop/app-grid content, no single color choice reads clearly
+against all of them. `.download-screenshots-carousel` (see
+src/SASS/_download.scss) instead gives the prev/next icons their own fixed
+dark scrim and the caption its own dark backdrop, so both stay legible over
+any screenshot regardless of image content.
+
+`.carousel-inner` and the two control buttons are wrapped in their own
+`.position-relative` div, separate from `.carousel-indicators` — Bootstrap's
+default markup puts indicators inside that same positioned box, overlaid on
+the image (`.carousel-indicators` is `position: absolute; bottom: 0`), which
+is illegible over screenshot content no scrim reliably fixes since a slide's
+content near the bottom edge varies per screenshot. Moving indicators
+outside the wrapper and resetting them to `position: static` in
+_download.scss instead renders them in normal flow below the image — plain
+dots on the page's own background, not an overlay — where they don't need a
+scrim at all. `.position-relative` also keeps the prev/next buttons
+(`top: 0; bottom: 0`, relative to the nearest positioned ancestor) scoped to
+the image's own height instead of stretching down to cover the indicator
+row too.
 ================================================================================
 {% endcomment %}
 {%- capture download_screenshots_body -%}
   <div class="p-3">
-    <div id="carouselScreenshotsIndicators-{{ include.release_id }}" class="carousel carousel-dark slide" data-bs-ride="true">
-      <div class="carousel-indicators">
+    <div id="carouselScreenshotsIndicators-{{ include.release_id }}" class="carousel slide download-screenshots-carousel" data-bs-ride="true">
+      <div class="position-relative">
+        <div class="carousel-inner">
+          {%- for row in include.screenshots %}
+          <div class="carousel-item{% if forloop.first %} active{% endif %}">
+            <div class="ratio" style="--bs-aspect-ratio: 62.5%;">
+              <img class="object-fit-cover" src="{{ site.baseurl }}{{ include.image_base_path }}{{ row.src | escape }}" alt="{{ row.alt | escape }}" />
+            </div>
+            {%- if row.title and row.title != "" or row.description and row.description != "" %}
+            <div class="carousel-caption d-none d-md-block">
+              {%- if row.title and row.title != "" %}
+              <div class="h5">{{ row.title }}</div>
+              {%- endif %}
+              {%- if row.description and row.description != "" %}
+              <p>{{ row.description }}</p>
+              {%- endif %}
+            </div>
+            {%- endif %}
+          </div>
+          {%- endfor %}
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+      <div class="carousel-indicators mt-3">
         {%- for row in include.screenshots %}
         <button
           {%- if forloop.first %} class="active" aria-current="true"{% endif %}
@@ -46,34 +105,7 @@ alone only stretches its child to fill the box.
           aria-label="Screenshot {{ forloop.index }}"></button>
         {%- endfor %}
       </div>
-      <div class="carousel-inner">
-        {%- for row in include.screenshots %}
-        <div class="carousel-item{% if forloop.first %} active{% endif %}">
-          <div class="ratio ratio-16x9">
-            <img class="object-fit-cover" src="{{ site.baseurl }}{{ include.image_base_path }}{{ row.src | escape }}" alt="{{ row.alt | escape }}" />
-          </div>
-          {%- if row.title and row.title != "" or row.description and row.description != "" %}
-          <div class="carousel-caption d-none d-md-block">
-            {%- if row.title and row.title != "" %}
-            <div class="h5">{{ row.title }}</div>
-            {%- endif %}
-            {%- if row.description and row.description != "" %}
-            <p>{{ row.description }}</p>
-            {%- endif %}
-          </div>
-          {%- endif %}
-        </div>
-        {%- endfor %}
-      </div>
-      <button class="carousel-control-prev" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Previous</span>
-      </button>
-      <button class="carousel-control-next" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Next</span>
-      </button>
     </div>
   </div>
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-desktop" title="Screenshots" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body_class="p-0" body=download_screenshots_body -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-desktop" title="Screenshots" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body_class="p-0" body=download_screenshots_body -%}

data/_includes/base/head.html.liquid

@@ -39,11 +39,11 @@ Optional Inputs:
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="referrer" content="strict-origin-when-cross-origin" />
 {% if page.title == site.title -%}
-  <title>{{ page.title }}</title>
+  <title>{{ page.title | escape }}</title>
 {% else -%}
-  <title>{{ page.title }} - {{ site.title }}</title>
+  <title>{{ page.title | escape }} - {{ site.title | escape }}</title>
 {% endif -%}
-<meta name="description" content="{{ page.description | default: page.excerpt | default: page.title_lead | default: site.description | strip_html | truncate: 160 }}" />
+<meta name="description" content="{{ page.description | default: page.excerpt | default: page.title_lead | default: site.description | strip_html | truncate: 160 | escape }}" />
 {% include base/ogp.html.liquid %}
 <link rel="icon" href="{{ site.baseurl }}/assets/icons/favicon-16.png" sizes="16x16" />
 <link rel="icon" href="{{ site.baseurl }}/assets/icons/favicon-32.png" sizes="32x32" />

data/_includes/base/navindex.html.liquid

@@ -71,7 +71,7 @@ Data Object Properties:
 {% 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 %}
+    {%- if item.url != page.url %}
       <div class="col-12 col-md-6">
         <div class="p-3 pb-1 bg-light border rounded">
           <div class="h5">
@@ -98,7 +98,7 @@ Data Object Properties:
 {% 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 %}
+    {%- if item.url != page.url %}
       <div class="col-12 col-md-6">
         {%- if show_page_filename == "true" %}
           {%- assign item_name = item.name | remove: '.md' %}
@@ -116,7 +116,7 @@ Data Object Properties:
 {% assign show_page_filename = include.show_page_filename | default: "false" %}
 <ul>
 {%- for item in data %}
-  {%- if item.title != page.title %}
+  {%- if item.url != page.url %}
     {%- 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 | strip_newlines | markdownify | remove: "<p>" | remove: "</p>" | strip }}{% endif %}</li>
@@ -140,7 +140,7 @@ Data Object Properties:
   <tbody>
     {%- for item in data %}
       <tr>
-        {%- if item.title != page.title %}
+        {%- if item.url != page.url %}
           {%- 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>

data/_includes/base/ogp.html.liquid

@@ -90,7 +90,7 @@ Data Source Hierarchy:
 
     {%- comment %} --- Title --- {% endcomment %}
     {%- if with_ogp_data[property].title %}
-      <meta {{ meta_attr }}="{{ property }}:title" content="{{ page.title }}" />
+      <meta {{ meta_attr }}="{{ property }}:title" content="{{ page.title | escape }}" />
     {%- endif %}
 
     {%- comment %} --- OG type and logo (after title, before url) --- {% endcomment %}
@@ -110,11 +110,11 @@ Data Source Hierarchy:
     {%- comment %} --- Description --- {% endcomment %}
     {%- if with_ogp_data[property].description %}
       {%- if page.excerpt %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ 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 }}" />
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.title_lead | escape }}" />
       {%- else %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ site.description }}" />
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ site.description | escape }}" />
       {%- endif %}
     {%- endif %}
 
@@ -127,14 +127,14 @@ 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' }}" />
+      <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 }}" />
     {%- 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 }}" />
+        <meta property="og:site_name" content="{{ ogp_site_name | escape }}" />
       {%- endif %}
       <meta property="og:locale" content="{{ ogp_locale }}" />
     {%- endif %}

data/_sass/base/_download.scss

@@ -68,3 +68,119 @@
     width: var(--download-arch-orphan-lg-width);
   }
 }
+
+// ================================================================================
+// Download component: screenshot carousel control legibility
+// ================================================================================
+// Purpose: Bootstrap's carousel controls are built for calm banner
+// photography — prev/next icons get only a faint 25%-opacity edge gradient,
+// and captions get no backdrop at all, just white text on the bare image
+// (download_screenshots.html.liquid drops `.carousel-dark` for this same
+// reason — see that file's own comment). Against real OS screenshots
+// (stark-white installer screens through busy desktop/app-grid content),
+// that's not enough separation: the arrows and caption text read as part of
+// the screenshot rather than as clickable/readable UI chrome, so each gets
+// its own fixed dark scrim here instead — legibility no longer depends on
+// what happens to be under it.
+//
+// Indicators get a different fix, not a scrim: a solid backdrop dark/light
+// enough for every screenshot doesn't exist (slides range from near-white
+// to near-black), so download_screenshots.html.liquid moves
+// `.carousel-indicators` outside the image's positioned wrapper entirely —
+// this resets it from Bootstrap's default absolute overlay to normal
+// in-flow content below the image, on the page's own background, where a
+// single theme-adaptive dot color (not a scrim) is all that's needed.
+// Dots are also reshaped from Bootstrap's default 30x3px bars into circles,
+// and recolored with the theme's own primary shades (var(--bs-border-color)
+// is centos-purple-100, var(--bs-primary) is centos-purple — see
+// _variables.scss) instead of Bootstrap's opacity-based active/inactive
+// distinction. The active dot also widens into a pill (GNOME workspace-
+// switcher style), so both color and size signal "current slide", not just a
+// subtle 50%-vs-100%-opacity difference easy to miss.
+// ================================================================================
+
+.download-screenshots-carousel {
+  .carousel-control-prev,
+  .carousel-control-next {
+    opacity: .9;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    // $body-color is centos-purple-900 (see _variables.scss) — used via the Sass
+    // variable, not a CSS custom property: Bootstrap computes its `-rgb`
+    // companion variables from $theme-colors before base/maps.scss merges in
+    // the extended centos-purple-XXX shades, so no --bs-centos-purple-900-rgb
+    // ever gets generated for rgba() to reference.
+    background-color: rgba($body-color, .55); // dark scrim tinted with the theme's own purple, not neutral black
+    background-image: none; // drop Bootstrap's built-in chevron SVG — replaced with a FontAwesome icon
+    border-radius: 50%;
+    transition: background-color .2s ease;
+
+    i {
+      font-size: 1.1rem;
+      color: #fff;
+    }
+  }
+
+  .carousel-control-prev:hover .carousel-control-prev-icon,
+  .carousel-control-prev:focus-visible .carousel-control-prev-icon,
+  .carousel-control-next:hover .carousel-control-next-icon,
+  .carousel-control-next:focus-visible .carousel-control-next-icon {
+    // :focus-visible, not :focus — a mouse click also sets :focus on a
+    // <button>, which would leave the highlight stuck after the pointer
+    // moves away; :focus-visible only fires for keyboard navigation, so the
+    // mouse-driven highlight is hover-only while Tab users still get a cue.
+    background-color: var(--bs-primary); // full-opacity primary on hover/focus, same interactive cue as the active indicator dot
+  }
+
+  .carousel-indicators {
+    position: static;
+    margin: .75rem 0 0;
+    padding: 0;
+
+    [data-bs-target] {
+      width: .625rem;
+      height: .625rem;
+      margin-right: .375rem;
+      margin-left: .375rem;
+      background-color: var(--bs-border-color); // primary-100, see _variables.scss
+      // Reset Bootstrap's default 10px transparent top/bottom border (its
+      // thin-bar click-hit-area trick): left in place, its background-clip:
+      // padding-box carries over too, and clips our visible color to a
+      // padding-box radius of border-radius minus that 10px border — well
+      // below 0, so the dot renders square no matter what radius we set.
+      border: 0;
+      // Fixed radius (half the dot's own height), not 50%: a percentage is
+      // computed per-axis, so on the wider active dot it would stretch into
+      // an ellipse instead of keeping the same round end-caps as the circle.
+      border-radius: .3125rem;
+      opacity: 1;
+      transition: width .2s ease, background-color .2s ease;
+    }
+
+    .active {
+      width: 1.375rem;
+      background-color: var(--bs-primary);
+    }
+  }
+
+  .carousel-caption {
+    right: .75rem;
+    bottom: .75rem;
+    left: .75rem;
+    padding: .5rem .75rem;
+    background-color: rgba(0, 0, 0, .55);
+    border-radius: var(--bs-border-radius);
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 2.52.0.beta.91
+  version: 2.52.0.beta.93
 platform: ruby
 authors:
 - Alain Reguera Delgado
@@ -326,6 +326,7 @@ files:
 - _data/base/sponsors_schema.yml
 - _data/base/title_schema.yml
 - _data/base/toc_schema.yml
+- _includes/base/accordion_item.html.liquid
 - _includes/base/announcement.html.liquid
 - _includes/base/artwork.html.liquid
 - _includes/base/backtotop.html.liquid
@@ -344,7 +345,6 @@ files:
 - _includes/base/copyvalue.html.liquid
 - _includes/base/datatable.html.liquid
 - _includes/base/download.html.liquid
-- _includes/base/download_accordion_item.html.liquid
 - _includes/base/download_architecture.html.liquid
 - _includes/base/download_commands.html.liquid
 - _includes/base/download_documentation.html.liquid