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

data/_data/base/sponsors_schema.yml

@@ -27,6 +27,13 @@ properties:
         type: string
         default: ""
         description: Introductory text rendered above the carousel, supports Markdown.
+      closing_message:
+        type: string
+        default: ""
+        description: >-
+          Closing text rendered below the carousel, supports Markdown. Use it
+          to invite visitors to act, e.g. to link to a page about becoming a
+          sponsor.
       # NOTE: this default is hardcoded to match examples/jekyll/components/
       # sponsors.md's current page.url (/components/sponsors/), not computed
       # from it (YAML can't run Liquid). If that page is ever renamed or its
@@ -79,4 +86,17 @@ properties:
     required:
       - members
     additionalProperties: false
+  id:
+    type: string
+    default: sponsorsCarousel
+    description: >-
+      Include parameter for `sponsors-carousel.html.liquid`. The DOM id of
+      the carousel wrapper. Give each carousel a distinct `id` when a page
+      shows more than one.
+  with_title:
+    type: boolean
+    default: true
+    description: >-
+      Include parameter for `sponsors-carousel.html.liquid`. Set to `false`
+      to hide the title, icon, and message above the carousel.
 additionalProperties: false

data/_data/base/title_schema.yml

@@ -48,4 +48,18 @@ properties:
     required:
       - title
     additionalProperties: false
+  row_class:
+    type: string
+    description: >-
+      Include parameter. CSS classes for the wrapping `div.row`. When
+      omitted, the content component's `row_class` default applies. The
+      content component passes its own `row_class` here, so every row
+      inside `<main>` shares the same spacing.
+  column_class:
+    type: string
+    description: >-
+      Include parameter. CSS classes for the column `div` inside the row.
+      When omitted, the content component's `col_class` default applies.
+      The content component passes its own `col_class` here, so every row
+      inside `<main>` shares the same column width.
 additionalProperties: false

data/_data/base/toc_schema.yml

@@ -26,13 +26,13 @@ properties:
           Multiple classes can be specified separated by spaces (e.g., `my-custom-class another-class`).
       id:
         type: string
-        default: ""
+        default: "page-toc"
         description: >-
           The HTML ID attribute assigned to the TOC root list element, used for targeting
           with CSS or JavaScript (e.g., `page-toc`).
       item_class:
         type: string
-        default: ""
+        default: "my-2"
         description: >-
           CSS class(es) applied to each list item in the TOC. Supports the `%level%`
           placeholder which is replaced with the current heading level (e.g., `my-2.%level%`).
@@ -111,4 +111,18 @@ properties:
           Deprecated. Use `skip_no_ids` instead. When provided, a deprecation warning
           comment is emitted in the HTML output.
     additionalProperties: false
+  row_class:
+    type: string
+    description: >-
+      Include parameter. CSS classes for the wrapping `div.row`. When
+      omitted, the content component's `row_class` default applies. The
+      content component passes its own `row_class` here, so every row
+      inside `<main>` shares the same spacing.
+  column_class:
+    type: string
+    description: >-
+      Include parameter. CSS classes for the column `div` inside the row.
+      When omitted, the content component's `col_class` default applies.
+      The content component passes its own `col_class` here, so every row
+      inside `<main>` shares the same column width.
 additionalProperties: false

data/_includes/base/accordion-item.html.liquid

@@ -1,29 +1,6 @@
 {% comment %}
-================================================================================
-Template: Accordion Item Component
-Purpose: Renders a single Bootstrap accordion-item (header/button/collapse/
-body), the shared shell for one collapsible entry within an accordion.
-Pairs with accordion.html.liquid, which renders the surrounding wrapper —
-this component only renders one item; callers loop/capture as many as they
-need and pass the concatenated result to accordion.html.liquid as `items`.
-
-Design Logic:
-- Bootstrap's accordion-item/header/button/collapse/body markup, driven
-  entirely by include parameters — no data-source fallback chain
-- `item_id`/`accordion_id` scope this item's collapse behavior to the
-  caller-supplied parent accordion via `data-bs-parent`
-- `expanded` toggles the initial open/closed state across button, collapse
-  container, and ARIA attributes together
-
-Optional Inputs:
-- title_class: Classes for the title span, replacing the "ms-1" default
-  (e.g. "ms-1 fw-bold" for a bold title).
-- body_class: Extra classes appended to "accordion-body" (e.g. "p-0" to
-  remove body padding when the content supplies its own).
-
-Data Source:
-- Derived from include parameters only
-================================================================================
+accordion-item: renders one Bootstrap accordion item whose collapse is scoped to the parent accordion_id.
+Schema: src/YAML/accordion_schema.yml
 {% endcomment %}
 
 {%- assign with_accordion_item_schema = site.data.base.accordion_schema.properties.item.properties %}
@@ -31,19 +8,21 @@ Data Source:
 {%- assign accordion_item_icon         = include.icon         | default: with_accordion_item_schema.icon.default %}
 {%- assign accordion_item_title        = include.title        | default: with_accordion_item_schema.title.default %}
 {%- assign accordion_item_title_class  = include.title_class  | default: with_accordion_item_schema.title_class.default %}
+{%- comment %} == nil tells an omitted header_class apart from an explicit "", which removes the heading style. {% endcomment %}
+{%- assign accordion_item_header_class = include.header_class %}
+{%- if include.header_class == nil %}
+  {%- assign accordion_item_header_class = with_accordion_item_schema.header_class.default %}
+{%- endif %}
 {%- assign accordion_item_item_id      = include.item_id      | default: with_accordion_item_schema.item_id.default %}
 {%- assign accordion_item_accordion_id = include.accordion_id | default: with_accordion_item_schema.accordion_id.default %}
 {%- assign accordion_item_expanded     = include.expanded     | default: with_accordion_item_schema.expanded.default %}
 {%- assign accordion_item_body         = include.body          | default: with_accordion_item_schema.body.default %}
-{%- assign accordion_item_body_class   = include.body_class    | default: with_accordion_item_schema.body_class.default %}
-
-{%- comment %} === Presentation === {% endcomment %}
-{%- comment %} --- HTML --- {% endcomment -%}
+{%- assign accordion_item_body_class   = include.body_class    | default: with_accordion_item_schema.body_class.default -%}
 <div class="accordion-item">
-  <div class="accordion-header h2">
+  <div class="accordion-header{% if accordion_item_header_class != "" %} {{ accordion_item_header_class }}{% endif %}">
     <button class="accordion-button{% unless accordion_item_expanded %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ accordion_item_item_id }}" aria-expanded="{{ accordion_item_expanded }}" aria-controls="{{ accordion_item_item_id }}">
-      <i class="{{ accordion_item_icon }} me-2"></i>
-      <span{% unless accordion_item_title_class == blank %} class="{{ accordion_item_title_class }}"{% endunless %}>{{ accordion_item_title }}</span>
+      <i class="{{ accordion_item_icon }} me-2" aria-hidden="true"></i>
+      <span{% if accordion_item_title_class != "" %} class="{{ accordion_item_title_class }}"{% endif %}>{{ accordion_item_title }}</span>
     </button>
   </div>
   <div id="{{ accordion_item_item_id }}" class="accordion-collapse collapse{% if accordion_item_expanded %} show{% endif %}" data-bs-parent="#{{ accordion_item_accordion_id }}">

data/_includes/base/accordion.html.liquid

@@ -1,39 +1,13 @@
 {% comment %}
-================================================================================
-Template: Accordion Wrapper Component
-Purpose: Renders the Bootstrap accordion wrapper `<div class="accordion"
-id="...">`, given a pre-rendered HTML string of one or more accordion-item
-includes. Pairs with accordion-item.html.liquid, which renders each
-individual item — see that file for the item-level markup. Callers build
-`items` via a capture tag: loop-and-append when the item count is dynamic
-(see bits.html.liquid), or capture several sibling accordion-item includes
-together when the items are fixed (see download_sections.html.liquid).
-
-Design Logic:
-- Wrapper only: no looping over structured item data — Jekyll's Liquid
-  include mechanism has no block/yield content-passing, so per-item body
-  content must already be caller-rendered HTML by the time it reaches this
-  component
-- `id` is the scoping anchor every child accordion-item's `accordion_id`
-  parameter must match, via `data-bs-parent`
-
-Optional Inputs:
-- class: Extra classes appended to "accordion" (e.g. "accordion-flush
-  mt-3", "w-100 mb-3").
-
-Data Source:
-- Derived from include parameters only
-================================================================================
+accordion: renders a Bootstrap accordion wrapper around the caller-built accordion-item HTML passed as items.
+Schema: src/YAML/accordion_schema.yml
 {% endcomment %}
 
 {%- assign with_accordion_schema = site.data.base.accordion_schema.properties %}
 
 {%- assign accordion_id    = include.id    | default: with_accordion_schema.id.default %}
 {%- assign accordion_class = include.class | default: with_accordion_schema.class.default %}
-{%- assign accordion_items = include.items | default: with_accordion_schema.items.default %}
-
-{%- comment %} === Presentation === {% endcomment %}
-{%- comment %} --- HTML --- {% endcomment -%}
+{%- assign accordion_items = include.items | default: with_accordion_schema.items.default -%}
 <div class="accordion{% if accordion_class != "" %} {{ accordion_class }}{% endif %}" id="{{ accordion_id }}">
 {{- accordion_items -}}
 </div>

data/_includes/base/announcement.html.liquid

@@ -1,31 +1,8 @@
-{%- comment %}
-================================================================================
-Template: Announcement Component
-Purpose: Renders dismissible alert boxes with icon and content.
-================================================================================
-
-Design Logic:
-- Multi-level data source hierarchy for flexibility
-- Dismissible alerts for user visibility management
-- Icon and color support for visual categorization
-- Looping structure for multiple announcements
-- Consistent fallback chain for content
-
-Required Inputs:
-- content: The announcement message or HTML content
-
-Optional Inputs:
-- data: Array of announcement objects (overrides fallbacks)
-- color: Alert color scheme (default: 'primary')
-- icon: Icon class for Font Awesome (default: 'fa-solid fa-bullhorn')
-
-Data Source Hierarchy (priority):
-1. include.data
-2. page.with_announcement_data
-3. site.data.announcement
-4. site.data.base.announcement
-================================================================================
-{%- endcomment %}
+{% comment %}
+announcement: renders each announcement as a dismissible alert with an icon.
+Data: include.data > page.with_announcement_data > site.data.announcement > site.data.base.announcement
+Schema: src/YAML/announcement_schema.yml
+{% endcomment %}
 
 {%- assign with_announcement = include.with_announcement
 | default: page.with_announcement
@@ -40,22 +17,18 @@ Data Source Hierarchy (priority):
 {%- if with_announcement %}
 
 {%- assign with_announcement_schema = site.data.base.announcement_schema.properties.with_announcement_data.items.properties %}
-
-{%- comment %} === Presentation === {% endcomment %}
 {%- for announcement in with_announcement_data %}
-
-{%- comment %} --- Defaults --- {% endcomment %}
 {%- assign announcement_color = announcement.color | default: with_announcement_schema.color.default %}
 {%- assign announcement_icon  = announcement.icon  | default: with_announcement_schema.icon.default %}
-
-{%- comment %} --- HTML --- {% endcomment %}
+{%- comment %} The pinned Liquid has no remove_last, so split/join drops the trailing "</p>" markdownify adds. {% endcomment %}
+{%- assign announcement_content_html = announcement.content | markdownify | strip | remove_first: "<p>" | split: "</p>" | join: "</p>" | strip %}
 <div class="announcement alert alert-{{ announcement_color }} alert-dismissible fade show shadow mb-3" role="alert">
   <div class="d-flex justify-content-between align-items-center">
     <div class="me-3">
       <div class="h6 my-1"><i class="{{ announcement_icon }}"></i></div>
     </div>
     <p class="flex-fill text-start mb-0">
-      {{- announcement.content }}
+      {{- announcement_content_html }}
     </p>
   </div>
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

data/_includes/base/artwork.html.liquid

@@ -1,34 +1,7 @@
 {% comment %}
-================================================================================
-Template: Artwork Component
-Purpose: Renders the responsive centos-motif background (.bg-artwork, see
-src/SASS/_customization.scss) at breakpoint-appropriate sizes.
-================================================================================
-
-Design Logic:
-- Background image comes entirely from the .bg-artwork CSS class (breakpoint
-  URLs are hardcoded in SCSS) — this component does not accept a custom image
-- Schema-based defaults for consistent styling
-- role="img" + aria-label for accessibility, since there is no <img> element
-
-Optional Inputs:
-- alt: Text used as the element's aria-label
-- class: Container div CSS classes
-- image_class: CSS classes for the .bg-artwork element itself, including the Bootstrap
-  `ratio` + `ratio-*` modifier classes that control presentation ratio
-- data: Artwork data object (overrides fallbacks)
-- column_class: Bootstrap column class for the row wrapper (set by the layout to
-  keep this component aligned with the content column; defaults to "col")
-- row_class: Bootstrap class(es) for the row wrapper (set by the layout to
-  keep this component's row aligned with breadcrumb, title, toc, and
-  content; defaults to "row mb-3")
-
-Data Source Hierarchy (priority):
-1. include.data
-2. page.with_artwork_data
-3. site.data.artwork
-4. site.data.base.artwork
-================================================================================
+artwork: renders the .bg-artwork background box inside a row and column; content.html.liquid sets row_class and column_class.
+Data: include.data > page.with_artwork_data > site.data.artwork > site.data.base.artwork
+Schema: src/YAML/artwork_schema.yml
 {% endcomment %}
 
 {%- assign with_artwork = include.with_artwork
@@ -44,17 +17,11 @@ Data Source Hierarchy (priority):
 {%- if with_artwork %}
 
 {%- assign with_artwork_schema = site.data.base.artwork_schema.properties.with_artwork_data.properties %}
-
-{%- comment %} === Presentation === {% endcomment %}
-
-{%- comment %} --- Defaults --- {% endcomment %}
 {%- assign artwork_alt         = with_artwork_data.alt         | default: with_artwork_schema.alt.default %}
 {%- assign artwork_class       = with_artwork_data.class       | default: with_artwork_schema.class.default %}
 {%- assign artwork_image_class = with_artwork_data.image_class | default: with_artwork_schema.image_class.default %}
-{%- assign column_class        = include.column_class | default: 'col' %}
-{%- assign row_class           = include.row_class | default: 'row mb-3' %}
-
-{%- comment %} --- HTML --- {% endcomment %}
+{%- assign column_class        = include.column_class | default: site.data.base.content_schema.properties.with_content_data.properties.col_class.default %}
+{%- assign row_class           = include.row_class | default: site.data.base.content_schema.properties.with_content_data.properties.row_class.default %}
 <div class="{{ row_class }}">
   <div class="{{ column_class }}">
     <div class="{{ artwork_class }}">

data/_includes/base/backtotop.html.liquid

@@ -1,31 +1,7 @@
 {% comment %}
-================================================================================
-Template: Back-to-Top Button Component
-Purpose: Loads vanilla-back-to-top library for floating scroll-to-top button.
-Customizable size and colors with CDN-based loading.
-================================================================================
-
-Design Logic:
-- CDN-based library loading for performance
-- Configurable button size (diameter) and colors
-- Floating button widget (standard UX pattern)
-- Vanilla JavaScript (no jQuery dependency)
-- Schema-based defaults
-
-Optional Inputs:
-- cdn: CDN base URL (defaults to unpkg.com)
-- version: Library version (e.g., "7.0.4")
-- diameter: Button diameter in pixels (default: 56)
-- background_color: Button background color (CSS hex)
-- text_color: Button text/icon color (CSS hex)
-- data: Configuration object (overrides fallbacks)
-
-Data Source Hierarchy (priority):
-1. include.data
-2. page.with_backtotop_data
-3. site.data.backtotop
-4. site.data.base.backtotop
-================================================================================
+backtotop: loads vanilla-back-to-top from the CDN and the theme script that creates the button.
+Data: include.data > page.with_backtotop_data > site.data.backtotop > site.data.base.backtotop
+Schema: src/YAML/backtotop_schema.yml
 {% endcomment %}
 
 {%- assign with_backtotop = include.with_backtotop
@@ -41,32 +17,17 @@ Data Source Hierarchy (priority):
 {%- assign with_backtotop_schema = site.data.base.backtotop_schema.properties.with_backtotop_data.properties %}
 
 {%- if with_backtotop %}
-
-{%- comment %} === Presentation === {% endcomment %}
-
-{%- comment %} --- Defaults --- {% endcomment %}
 {%- assign backtotop_cdn              = with_backtotop_data.cdn              | default: with_backtotop_schema.cdn.default %}
 {%- assign backtotop_version          = with_backtotop_data.version          | default: with_backtotop_schema.version.default %}
 {%- assign backtotop_script_integrity = with_backtotop_data.script_integrity | default: with_backtotop_schema.script_integrity.default %}
 {%- assign backtotop_diameter         = with_backtotop_data.diameter         | default: with_backtotop_schema.diameter.default %}
 {%- assign backtotop_background_color = with_backtotop_data.background_color | default: with_backtotop_schema.background_color.default %}
 {%- assign backtotop_text_color       = with_backtotop_data.text_color       | default: with_backtotop_schema.text_color.default %}
-
-{%- comment %} --- HTML --- {% endcomment %}
-<!-- Load vanilla-back-to-top library from CDN -->
 <script src="{{ backtotop_cdn }}/vanilla-back-to-top@{{ backtotop_version }}/dist/vanilla-back-to-top.min.js" integrity="{{ backtotop_script_integrity }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-
-<!-- Initialize back-to-top button with configuration via data attributes -->
 <script id="centos-backtop"
-        {%- if with_backtotop_data.diameter %}
         data-diameter="{{ backtotop_diameter }}"
-        {%- endif %}
-        {%- if with_backtotop_data.background_color %}
         data-background-color="{{ backtotop_background_color }}"
-        {%- endif %}
-        {%- if with_backtotop_data.text_color %}
         data-text-color="{{ backtotop_text_color }}"
-        {%- endif %}
         src="{{ site.baseurl }}/assets/js/base/backtotop.min.js"
         defer></script>
 

data/_includes/base/bits.html.liquid

@@ -1,47 +1,7 @@
 {% comment %}
-================================================================================
-Template: Bits Component (Upstream/Downstream Relationships)
-Purpose: Renders upstream/downstream relationships — each upstream Bit as a
-preamble/card/finale block, followed by its related downstream Bits in one
-of two switchable presentation styles.
-
-Design Logic:
-- Hierarchical relationships: upstream parent, downstream children, linked
-by matching `relationship` to the upstream's `name`
-- Card-based presentation: reuses base/card.html.liquid for the upstream Bit
-- Switchable downstream presentation, picked per upstream Bit via
-`downstream_style`: `card` (default, fixed 3-item preview grid) or
-`accordion` (every related item, optionally capped via `downstream_limit`)
-- Optional sections: preamble, finale, "View All" link (shown once the
-downstream count exceeds the effective style cap)
-- Per-item downstream card width: each downstream Bit's own `col_class`
-(card style only) controls its Bootstrap grid column class, so cards in the
-same row need not be equal width
-
-Required Inputs (from data objects):
-- type: 'upstream' or 'downstream'
-- name: Component name
-- relationship: For downstream, name of its upstream parent
-
-Optional Inputs (from data objects):
-- description, screenshot, icon, image, actions, color
-- preamble, finale: Text before/after the upstream card; each falls back to
-its own schema-documented default when omitted — set explicitly to `false`
-or an empty string to render neither element instead
-- class, card_class, preamble_class, finale_class: Custom styling
-- downstream_style: 'card' (default) or 'accordion'
-- downstream_limit: accordion style only; caps items shown, omit for
-unlimited (all shown, "View All" link never rendered)
-- col_class: card style only; Bootstrap column class per downstream card
-(default: three-across)
-- index_page_name, index_page_url: For the "View All" link
-
-Data Source Hierarchy (priority order):
-1. include.data
-2. page.with_bits_data
-3. site.data.bits
-4. site.data.base.bits
-================================================================================
+bits: renders each upstream bit as a card followed by its downstream bits as a card grid or an accordion.
+Data: include.data > page.with_bits_data > site.data.bits > site.data.base.bits
+Schema: src/YAML/bits_schema.yml
 {% endcomment %}
 
 {%- assign with_bits = include.with_bits
@@ -57,12 +17,8 @@ Data Source Hierarchy (priority order):
 {%- 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 %}
@@ -73,6 +29,7 @@ Data Source Hierarchy (priority order):
   {%- 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 %}
+  {%- comment %} == nil tells an omitted preamble or finale apart from an explicit false or "", which hide it. {% endcomment %}
   {%- assign upstream_bit_preamble = upstream_bit.preamble %}
   {%- if upstream_bit.preamble == nil %}
     {%- assign upstream_bit_preamble = with_bits_schema.preamble.default %}
@@ -81,19 +38,18 @@ Data Source Hierarchy (priority order):
   {%- if upstream_bit.finale == nil %}
     {%- assign upstream_bit_finale = with_bits_schema.finale.default %}
   {%- endif %}
-  {%- assign upstream_bit_btn_class             = "btn btn-sm m-1 btn-"         | append: upstream_bit_color %}
+  {%- comment %} The pinned Liquid has no remove_last, so split/join drops the trailing "</p>" markdownify adds. {% endcomment %}
+  {%- assign upstream_bit_preamble_html = upstream_bit_preamble | markdownify | strip | remove_first: "<p>" | split: "</p>" | join: "</p>" | strip %}
+  {%- assign upstream_bit_finale_html   = upstream_bit_finale | markdownify | strip | remove_first: "<p>" | split: "</p>" | join: "</p>" | strip %}
+  {%- assign upstream_bit_btn_class             = "btn btn-sm m-1 btn-{color}"  | replace: "{color}", 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 Preamble --- {% endcomment %}
     {%- if upstream_bit_preamble and upstream_bit_preamble != empty %}
-      <p{% if upstream_bit_preamble_class != "" %} class="{{ upstream_bit_preamble_class }}"{% endif %}>{{ upstream_bit_preamble }}</p>
+      <p{% if upstream_bit_preamble_class != "" %} class="{{ upstream_bit_preamble_class }}"{% endif %}>{{ upstream_bit_preamble_html }}</p>
     {%- endif %}
-
-    {%- comment %} --- Upstream Card --- {% endcomment %}
     {%- include base/card.html.liquid
     class             = upstream_bit_card_class
     screenshot        = upstream_bit.screenshot
@@ -114,8 +70,6 @@ Data Source Hierarchy (priority order):
     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: ")"  %}
@@ -132,7 +86,7 @@ Data Source Hierarchy (priority order):
 
     {%- if upstream_bit_finale and upstream_bit_finale != empty %}
       <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>
+        <p class="m-1{% if upstream_bit_finale_class != "" %} {{ upstream_bit_finale_class }}{% endif %}">{{ upstream_bit_finale_html }}</p>
         {%- if show_index_link %}
           <div class="m-1">
             {%- include base/link.html.liquid
@@ -146,8 +100,6 @@ Data Source Hierarchy (priority order):
         {%- endif %}
       </div>
     {%- endif %}
-
-    {%- comment %} --- Downstream Items --- {% endcomment %}
     {%- if downstream_display_limit %}
       {%- assign visible_downstream_bits = downstream_bits | slice: 0, downstream_display_limit %}
     {%- else %}
@@ -163,23 +115,11 @@ Data Source Hierarchy (priority order):
 
     {%- 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 %}
-
+        {%- assign downstream_bit_description_html = downstream_bit.description | markdownify | strip | remove_first: "<p>" | split: "</p>" | join: "</p>" | strip %}
         {%- capture downstream_bit_media %}
           {% if downstream_bit.screenshot and downstream_bit.screenshot != "" %}
           <div class="bg-{{ upstream_bit_color }} rounded-top">
-            <img src="{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="{{ downstream_item_img_class }}" alt="{{ downstream_bit.screenshot }}">
+            <img src="{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="{{ downstream_item_img_class }}" alt="{{ downstream_bit.screenshot_alt | default: downstream_bit.screenshot }}">
           </div>
           {% endif %}
         {%- endcapture %}
@@ -204,7 +144,7 @@ Data Source Hierarchy (priority order):
           {%- endcapture %}
           {%- capture downstream_bit_body %}
             {{- downstream_bit_media | strip -}}
-            <p class="card-text mt-3">{{ downstream_bit.description }}</p>
+            <p class="card-text mt-3">{{ downstream_bit_description_html }}</p>
             {{ downstream_bit_actions_full }}
           {%- endcapture %}
           {%- include base/accordion-item.html.liquid
@@ -217,12 +157,24 @@ Data Source Hierarchy (priority order):
           -%}
         {%- else %}
           {%- assign downstream_bit_col_class = downstream_bit.col_class | default: with_bits_schema.col_class.default %}
+          {%- 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 %}
           <div class="{{ downstream_bit_col_class }}">
             <div class="card border-{{ upstream_bit_color }}-subtle h-100">
               {{- 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>
+                <p class="card-text">{{ downstream_bit_description_html }}</p>
                 {{ downstream_bit_action_button }}
               </div>
             </div>