jekyll-theme-centos 2.52.0.beta.3 → 2.52.0.beta.5

data/_includes/base/highlight.html.liquid

@@ -0,0 +1,65 @@
+{% comment %}
+================================================================================
+Template: Highlight.js Code Syntax Highlighting Component
+Purpose: Loads Highlight.js library CSS and JavaScript from CDN with
+copy-to-clipboard functionality for code blocks.
+================================================================================
+
+Design Logic:
+- CDN-based library: Highlight.js from cdnjs
+- Copy plugin: additional plugin for code clipboard functionality
+- Format switching: separate head (CSS) and script (JS) includes
+- Automatic initialization: on document load
+- Configurable theme: different color schemes available
+- 190+ languages supported
+
+Optional Inputs:
+- type: "head" for CSS, "script" for JavaScript
+- theme: Syntax highlighting theme (default: "default")
+- version: Highlight.js version (e.g., "11.9.0")
+- data: Highlight.js configuration object
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_highlight_data
+3. site.data.highlight
+4. site.data.base.highlight
+================================================================================
+{% endcomment %}
+
+{%- assign highlight = include.data | default: page.with_highlight_data | default: site.data.highlight | default: site.data.base.highlight %}
+
+{%- assign highlight_theme     = highlight.theme   | default: site.data.base.highlight_schema.properties.with_highlight_data.properties.theme.default %}
+{%- assign highlight_version   = highlight.version | default: site.data.base.highlight_schema.properties.with_highlight_data.properties.version.default %}
+{%- assign copy_icon_svg    = highlight.copy_button_icons.copy.svg | default: site.data.base.highlight_schema.properties.with_highlight_data.properties.copy_button_icons.properties.copy.properties.svg.default %}
+{%- assign success_icon_svg = highlight.copy_button_icons.success.svg | default: site.data.base.highlight_schema.properties.with_highlight_data.properties.copy_button_icons.properties.success.properties.svg.default %}
+
+{%- capture html_highlight_head %}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/styles/{{ highlight_theme | replace_first: 'base16-', 'base16/' | default: 'default' }}.min.css" />
+  <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy@1.0.6/dist/highlightjs-copy.min.css" />
+  <!-- Highlight.js Copy Button Icon Customization (from schema) -->
+  <style>
+    .hljs-copy-button:not([data-copied="true"])::before {
+      mask: url('data:image/svg+xml;utf-8,{{ copy_icon_svg }}');
+    }
+    .hljs-copy-button[data-copied='true']::after {
+      background-image: url('data:image/svg+xml;utf-8,{{ success_icon_svg }}');
+    }
+  </style>
+{%- endcapture %}
+
+{%- capture html_highlight_script %}
+  <!-- Highlight.js Library and Copy Plugin -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/highlight.min.js"></script>
+  <script src="https://unpkg.com/highlightjs-copy@1.0.6/dist/highlightjs-copy.min.js"></script>
+  <!-- Initialize Highlight.js -->
+  <script src="{{ site.baseurl }}/assets/js/base/highlight.min.js"></script>
+{%- endcapture %}
+
+{%- assign type = include.type %}
+{%- case type %}
+{%- when "head" %}
+  {{ html_highlight_head }}
+{%- when "script" %}
+  {{ html_highlight_script }}
+{%- endcase %}

data/_includes/base/image.html.liquid

@@ -0,0 +1,42 @@
+{% comment %}
+================================================================================
+Template: Figure Image Component
+Purpose: Renders responsive images in semantic HTML figure elements
+with optional links and captions.
+================================================================================
+
+Required Inputs:
+- file: Image filename (relative to /assets/img/)
+- alt: Alt text for accessibility
+
+Optional Inputs:
+- link: URL to wrap image in a link
+- caption: Caption text for <figcaption>
+- extraclasses: Additional CSS classes for image element
+
+Features:
+- Semantic HTML with <figure> and <figcaption> elements
+- Responsive images with img-fluid Bootstrap class
+- Figure ID generated from alt text (slugified)
+- Lazy loading enabled by default
+================================================================================
+{% endcomment %}
+
+{% if include.alt %}
+  {% assign figid = include.alt %}
+{% else %}
+  {% assign figid = include.file %}
+{% endif %}
+
+<figure id="fig-{{ figid | slugify }}" class="figure">
+  {% if include.link %}
+    <a href="{{ include.link }}">
+      <img loading="lazy" src="{{ site.baseurl }}/assets/img/{{ include.file }}" class="figure-img img-fluid rounded{% if include.extraclasses %} {{ include.extraclasses }}{% endif %}" alt="{{ include.alt }}"/>
+    </a>
+  {% else %}
+    <img loading="lazy" src="{{ site.baseurl }}/assets/img/{{ include.file }}" class="figure-img img-fluid rounded{% if include.extraclasses %} {{ include.extraclasses }}{% endif %}" alt="{{ include.alt }}"/>
+  {% endif %}
+  {% if include.caption %}
+    <figcaption class="figure-caption text-center">{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>

data/_includes/base/link.html.liquid

@@ -0,0 +1,139 @@
+{% comment %}
+================================================================================
+Template: Link Component
+Purpose: Renders HTML anchor tags with icons, styling, and accessibility.
+Handles internal/external links and anchor navigation.
+================================================================================
+
+Design Logic:
+- Flexible link resolution for internal and external URLs
+- Optional icon integration with positioning control
+- Customizable styling through color schemes or CSS classes
+- Built-in accessibility support via ARIA attributes
+- Anchor generation from link name when no URL provided
+
+Required Inputs:
+- name: Display text for the link
+
+Optional Inputs:
+- link: URL (internal/external). Omit to generate anchor from name.
+- target: Link target (default: unset). Use '_blank' for new window.
+- color: Color scheme (default: 'primary')
+- icon: Icon class (Font Awesome or similar)
+- icon_position: Icon placement: 'start' (default) or 'end'
+- class: Custom CSS classes to override default styling
+- aria_label: Accessible label for screen readers
+- role: ARIA role attribute
+
+Security & External Links:
+- target="_blank" automatically adds rel="noopener noreferrer"
+- External cross-domain links with target="_blank" auto-display
+  fa-solid fa-external-link icon (unless manually overridden)
+- See: examples/jekyll/layouts/default/components/link.md
+================================================================================
+{% endcomment %}
+
+{%- capture html_link -%}
+  {%- comment %} === Data source selection === {% endcomment %}
+  {%- assign link          = include.link          | default: nil %}
+  {%- assign name          = include.name          | default: nil %}
+  {%- assign target        = include.target        | default: nil %}
+  {%- assign color         = include.color         | default: "primary" %}
+  {%- assign role          = include.role          | default: nil %}
+  {%- assign icon          = include.icon          | default: nil %}
+  {%- assign icon_position = include.icon_position | default: "start" %}
+  {%- assign class         = include.class         | default: nil %}
+  {%- assign aria_label      = include.aria_label      | default: nil %}
+  {%- assign data_bs_toggle   = include.data_bs_toggle   | default: nil %}
+  {%- assign data_bs_title    = include.data_bs_title    | default: nil %}
+  {%- assign data_bs_placement = include.data_bs_placement | default: nil %}
+  {%- assign anchor        = nil %}
+  {%- assign rel_attr      = nil %}
+  {%- assign is_external_link = false %}
+  {%- assign auto_icon     = nil %}
+
+  {%- comment %} === Data processing === {% endcomment %}
+  {%- if link != nil -%}
+    {%- if link contains "https://" or link contains "http://" -%}
+      {%- assign href_value = link %}
+      {%- assign is_external_link = true %}
+    {%- else -%}
+      {%- assign href_value = site.baseurl | append: link %}
+    {%- endif -%}
+  {%- else -%}
+    {%- assign href_value = site.baseurl %}
+    {%- assign anchor = name | strip | replace: ' ', '-' | downcase %}
+  {%- endif -%}
+
+  {%- comment %} === External link icon handling === {% endcomment %}
+  {%- if is_external_link and target == "_blank" and icon == nil -%}
+    {%- comment %} Extract domain from link URL (remove protocol) {% endcomment %}
+    {%- assign link_domain = link | replace: "https://", "" | replace: "http://", "" %}
+    {%- assign link_domain = link_domain | split: "/" | first %}
+    {%- assign link_domain = link_domain | split: "?" | first %}
+    {%- assign link_domain = link_domain | split: "#" | first %}
+    {%- assign link_domain = link_domain | downcase %}
+
+    {%- comment %} Extract domain from site.url (remove protocol) {% endcomment %}
+    {%- assign site_domain = site.url | default: site.baseurl | replace: "https://", "" | replace: "http://", "" %}
+    {%- assign site_domain = site_domain | split: "/" | first %}
+    {%- assign site_domain = site_domain | split: "?" | first %}
+    {%- assign site_domain = site_domain | split: "#" | first %}
+    {%- assign site_domain = site_domain | downcase %}
+
+    {%- comment %} If domains don't match, add external link icon {% endcomment %}
+    {%- if link_domain != site_domain -%}
+      {%- assign auto_icon = "fa-solid fa-external-link" %}
+      {%- assign icon_position = "end" %}
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- if class != nil -%}
+    {%- assign link_class = class %}
+  {%- else -%}
+    {%- assign link_class = "link-" | append: color %}
+    {%- assign link_class = link_class | append: " link-offset-3 link-offset-3-hover link-underline-" %}
+    {%- assign link_class = link_class | append: color %}
+    {%- assign link_class = link_class | append: " link-underline-opacity-0 link-underline-opacity-100-hover" %}
+  {%- endif -%}
+
+  {%- comment %} --- Security attributes for external links --- {% endcomment %}
+  {%- if target == "_blank" -%}
+    {%- assign rel_attr = "noopener noreferrer" %}
+  {%- endif -%}
+
+  {%- comment %} --- Link name with optional icon --- {% endcomment %}
+  {%- comment %} Use manual icon if provided, otherwise use auto_icon if set {% endcomment %}
+  {%- assign final_icon = icon | default: auto_icon %}
+  {%- capture link_name -%}
+    {%- if final_icon != nil -%}
+      {%- if name != nil and icon_position == "end" -%}
+        {{ name }}<i class="{{ final_icon }} ms-1"></i>
+      {%- elsif name != nil and icon_position == "start" -%}
+        <i class="{{ final_icon }} me-1"></i>{{ name }}
+      {%- else -%}
+        <i class="{{ final_icon }}"></i>
+      {%- endif -%}
+    {%- else -%}
+      {{ name }}
+    {%- endif -%}
+  {%- endcapture -%}
+
+  {%- comment %} --- HTML: Anchor tag with attributes --- {% endcomment %}
+  <a
+    href="{{ href_value }}{% if anchor != nil %}#{{ anchor }}{% endif %}"
+    class="{{ link_class }}"
+    {%- if target != nil %} target="{{ target }}"{% endif %}
+    {%- if rel_attr != nil %} rel="{{ rel_attr }}"{% endif %}
+    {%- if role != nil %} role="{{ role }}"{% endif %}
+    {%- if aria_label != nil %} aria-label="{{ aria_label }}"{% endif %}
+    {%- if data_bs_toggle != nil %} data-bs-toggle="{{ data_bs_toggle }}"{% endif %}
+    {%- if data_bs_title != nil %} data-bs-title="{{ data_bs_title }}"{% endif %}
+    {%- if data_bs_placement != nil %} data-bs-placement="{{ data_bs_placement }}"{% endif %}>
+    {{- link_name | strip_newlines | strip -}}
+  </a>
+{%- endcapture -%}
+
+{%- if page.with_link -%}
+  {{- html_link }}
+{%- endif -%}

data/_includes/base/locales.html.liquid

@@ -0,0 +1,41 @@
+{% comment %}
+================================================================================
+Template: Language Selector (Locales Dropdown)
+Purpose: Renders dropdown menu for language/locale selection. Generates links
+to same page in different language versions.
+================================================================================
+
+Design Logic:
+- Bootstrap dropdown: consistent UI pattern
+- Language lookup: uses site.data.base.languages mapping
+- URL construction: locale prefix + page URL
+- Current language: defaults to English
+- Icon: language globe icon from Font Awesome
+
+Required Inputs:
+- [array]: List of locale codes (e.g., ["es", "fr", "de"])
+
+Optional Inputs:
+- data: Locales array (overrides all fallbacks)
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_locales_data
+3. site.data.locales
+4. site.data.base.locales
+================================================================================
+{% endcomment %}
+
+{%- assign locales = include.data | default: page.with_locales_data | default: site.data.locales | default: site.data.base.locales %}
+
+{%- comment %} === Presentation === {% endcomment %}
+<div class="dropdown">
+  <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Languages">
+    <i class="fa-solid fa-language"></i> {{ site.data.base.languages["en"] }}
+  </button>
+  <ul class="dropdown-menu">
+    {% for locale in locales %}
+    <li><a class="dropdown-item" href="{{ site.baseurl }}/{{ locale }}{{ page.url }}">{{ site.data.base.languages[locale] }}</a></li>
+    {% endfor %}
+  </ul>
+</div>

data/_includes/base/navbar.html.liquid

@@ -0,0 +1,106 @@
+{% comment %}
+================================================================================
+Template: Navigation Bar Component
+Purpose: Renders fixed-top navigation bar with branding, responsive toggle,
+and hierarchical menu items with dropdown support.
+================================================================================
+
+Design Logic:
+- Fixed top positioning: always visible during scroll
+- Responsive hamburger menu: collapses on mobile
+- Dropdown menus: multi-level navigation
+- Brand image and manifestation text support
+- Filtered navitems by visible_on='navbar'
+
+Required Inputs:
+- brand_image: Logo image filename
+- navitems: Array of navigation items
+
+Optional Inputs:
+- brand_image_class, brand_image_height: Logo styling
+- brand_manifestation: Tagline/subtitle text
+- class: Container CSS classes
+- navitems[].menu: Submenu array for dropdowns
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_navbar_data
+3. site.data.navbar
+4. site.data.base.navbar
+================================================================================
+{% endcomment %}
+
+{%- assign navbar = include.data | default: page.with_navbar_data | default: site.data.navbar | default: site.data.base.navbar %}
+{%- assign schema = site.data.base.navbar_schema.properties["with_navbar_data"].properties %}
+
+{%- assign navbar_class                     = navbar.class                                    | default: schema.class.default %}
+{%- assign navbar_brand_image               = navbar.brand_image                              | default: schema.brand_image.default %}
+{%- assign navbar_brand_image_class         = navbar.brand_image_class                        | default: schema.brand_image_class.default %}
+{%- assign navbar_brand_image_height        = navbar.brand_image_height                       | default: schema.brand_image_height.default %}
+{%- assign navbar_brand_manifestation       = navbar.brand_manifestation                      | default: schema.brand_manifestation.default %}
+{%- assign navbar_brand_manifestation_class = navbar.brand_manifestation_class                | default: schema.brand_manifestation_class.default %}
+{%- assign navbar_navitems                  = navbar.navitems | where: "visible_on", "navbar" | default: schema.navitems.default %}
+
+<nav class="navbar bg-dark fixed-top navbar-expand-lg shadow{% if navbar_class != "" %} {{ navbar_class }}{% endif %}" aria-label="{{ include.arialable | default: 'navbar'}}" data-bs-theme="dark">
+  <div class="container">
+
+    {%- if navbar_brand_image != "" %}
+      <a class="navbar-brand" href="{{ site.baseurl }}/">
+
+        <img
+            class="d-inline-block align-text-middle me-2{% if navbar_brand_image_class != "" %} {{ navbar_brand_image_class }}{% endif %}"
+            src="{{ site.baseurl }}/assets/img/{{ navbar_brand_image }}"
+            height="{{ navbar_brand_image_height }}"
+            alt="{{ site.title }}" />
+
+        {%- if navbar_brand_manifestation != "" %}
+          <span class="d-inline-block align-text-middle fs-6 border-start border-1 border-light opacity-75 ps-3{% if navbar_brand_manifestation_class != "" %} {{ navbar_brand_manifestation_class }}{% endif %}">{{ navbar_brand_manifestation }}</span>
+        {%- endif %}
+
+      </a>
+    {%- endif %}
+
+    {% if navbar_navitems.size > 0 %}
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarContent">
+        <ul class="navbar-nav ms-auto">
+          {%- for navitem in navbar_navitems %}
+            {%- if navitem.menu.size == 0 %}
+              <li class="nav-item">
+                {%- include base/link.html.liquid
+                class = "nav-link"
+                name  = navitem.name
+                link  = navitem.link
+                role  = "presentation"
+                icon  = navitem.icon
+                %}
+              </li>
+            {%- else %}
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <i class="{{ navitem.icon }} me-1"></i>{{ navitem.name }}
+                </a>
+                <ul class="dropdown-menu dropdown-menu-dark shadow">
+                  {%- for dropdownitem in navitem.menu %}
+                    <li>
+                      {%- include base/link.html.liquid
+                      class = "dropdown-item"
+                      name  = dropdownitem.name
+                      link  = dropdownitem.link
+                      role  = "presentation"
+                      %}
+                    </li>
+                  {%- endfor %}
+                </ul>
+              </li>
+            {%- endif %}
+          {%- endfor %}
+        </ul>
+      </div>
+    {% endif %}
+
+  </div>
+</nav>

data/_includes/base/navindex.html.liquid

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

data/_includes/base/ogp.html.liquid

@@ -0,0 +1,118 @@
+{% comment %}
+================================================================================
+Template: Open Graph & Twitter Meta Tags Component
+Purpose: Renders meta tags for Open Graph (OG) and Twitter Card protocols.
+Enables proper social media previews when sharing on social platforms.
+================================================================================
+
+Design Logic:
+- Dual-protocol support: Open Graph (OG) and Twitter Card meta tags
+- Hierarchical fallback system for meta tag values
+- Per-property customization via page front matter
+- Conditional rendering of protocol-specific attributes
+- Image metadata with security URL and dimensions for OG
+
+Required Inputs:
+- page.title: Page title for social sharing preview
+- site.url: Full site URL (for absolute URLs)
+- site.baseurl: Base URL path prefix
+
+Optional Inputs:
+- page.ogp.og.*, page.ogp.twitter.*: OG/Twitter property overrides
+- page.excerpt, page.title_lead: Fallback for description
+- site.description: Site-level description fallback
+
+Data Source Hierarchy:
+- page.ogp values always take precedence
+- Default image: /assets/img/centos-social-share.png
+- Default image alt: "The CentOS Project"
+================================================================================
+{% endcomment %}
+
+{%- assign ogp = include.data | default: page.with_ogp_data | default: site.data.ogp | default: site.data.base.ogp %}
+
+{%- comment %} === Presentation === {% endcomment %}
+{%- comment %} --- Defaults --- {% endcomment %}
+{%- assign ogp_og_type = ogp.og.type %}
+
+{%- comment %} --- Common attributes for both `og` and `twitter` properties --- {% endcomment %}
+{%- assign properties = "og,twitter" | split: "," %}
+{%- for property in properties %}
+
+  {%- comment %} --- Title --- {% endcomment %}
+  {%- if page.ogp[property].title == nil %}
+<meta property="{{ property }}:title" content="{{ page.title }}" />
+  {%- else %}
+  {%- endif %}
+
+  {%- comment %} --- URL --- {% endcomment %}
+  {%- if page.ogp[property].url == nil %}
+<meta property="{{ property }}:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
+  {%- endif %}
+
+  {%- comment %} --- Description --- {% endcomment %}
+  {%- if page.ogp[property].description == nil %}
+    {%- if page.excrept %}
+<meta property="{{ property }}:description" content="{{ site.excrept }}" />
+    {%- elsif page.title_lead %}
+<meta property="{{ property }}:description" content="{{ page.title_lead }}" />
+    {%- else %}
+<meta property="{{ property }}:description" content="{{ site.description }}" />
+    {%- endif %}
+  {%- endif %}
+
+  {%- comment %} --- Image --- {% endcomment %}
+  {%- if page.ogp[property].image == nil %}
+<meta property="{{ property }}:image" content="{{ site.url }}{{ site.baseurl }}/assets/img/centos-social-share.png" />
+    {%- if property == "og" %}
+<meta property="{{ property }}:image:secure_url" content="{{ site.url }}{{ site.baseurl }}/assets/img/centos-social-share.png" />
+<meta property="{{ property }}:image:type" content="image/png" />
+<meta property="{{ property }}:image:width" content="1200" />
+<meta property="{{ property }}:image:height" content="630" />
+    {%- endif %}
+  {%- endif %}
+
+  {%- comment %} --- Image alternative text --- {% endcomment %}
+  {%- if page.ogp[property].image.alt == nil %}
+<meta property="{{ property }}:image:alt" content="The CentOS Project" />
+  {%- endif %}
+
+  {%- comment %} --- Override common attributes in both `og` and `twitter` properties --- {% endcomment %}
+  {%- if property[0] == "og" %}
+    {%- for attribute in property[1] %}
+      {%- if attribute[0] == "image" or attribute[0] == "audio" or attribute[0] == "video" %}
+        {%- for item in attribute[1] %}
+<meta property="{{ property[0] }}:{{ attribute[0] }}:{{ item[0] }}" content="{{ item[1] }}" />
+        {%- endfor %}
+      {%- else %}
+<meta property="{{ property[0] }}:{{ attribute[0] }}" content="{{ attribute[1] }}" />
+      {%- endif %}
+    {%- endfor %}
+  {%- elsif property[0] == "twitter" %}
+    {%- for attribute in property[1] %}
+      {%- if attribute[0] == "image" or attribute[0] == "site" or attribute[0] == "creator" %}
+        {%- for item in attribute[1] %}
+<meta property="{{ property[0] }}:{{ attribute[0] }}:{{ item[0] }}" content="{{ item[1] }}" />
+        {%- endfor %}
+      {%- else %}
+        <meta property="{{ property[0] }}:{{ attribute[0] }}" content="{{ attribute[1] }}" />
+      {%- endif %}
+    {%- endfor %}
+  {%- endif %}
+{%- endfor %}
+
+{%- comment %} --- Specific attributes for `og` property --- {% endcomment %}
+{%- if ogp_og_type == nil %}
+<meta property="og:type" content="website" />
+{%- endif %}
+
+{%- comment %} --- Specific attributes for `twitter` property --- {% endcomment %}
+{%- if page.ogp.twitter.card == nil %}
+<meta property="twitter:card" content="summary_large_image" />
+{%- endif %}
+{%- if page.ogp.twitter.site.id == nil %}
+<meta property="twitter:site:id" content="@CentOS" />
+{%- endif %}
+{%- if page.ogp.twitter.creator.id == nil %}
+<meta property="twitter:creator:id" content="@CentOS" />
+{%- endif %}