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

data/_includes/base/breadcrumb.html.liquid

@@ -0,0 +1,37 @@
+{% comment %}
+================================================================================
+Template: Breadcrumb Navigation Component
+Purpose: Renders hierarchical breadcrumb navigation showing page location
+in the site's URL structure.
+================================================================================
+
+Design Logic:
+- Automatic breadcrumb generation from page URL (no data config)
+- Hierarchical path visualization using URL splitting
+- Home link always appears first as root
+- Current page title as active final item (non-clickable)
+- URL reconstruction for intermediate links
+
+Required Inputs:
+- page.url: Current page URL path
+- page.title: Display text for active breadcrumb
+
+Data Sources:
+- site.baseurl: Base URL prefix
+- site.converter_link.default_link_classes: CSS classes
+================================================================================
+{% endcomment %}
+
+<nav aria-label="{{ include.arialabel | default: 'breadcrumb' }}">
+  <ol class="breadcrumb mb-0">
+    <li class="breadcrumb-item"><a class="{{ site.converter_link.default_link_classes }}" href="{{ site.baseurl }}/">Home</a></li>
+    {%- assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+    {%- for crumb in crumbs offset: 1 %}
+      {%- if forloop.last %}
+        <li class="breadcrumb-item active">{{ page.title }}</li>
+      {%- else %}
+        <li class="breadcrumb-item"><a class="{{ site.converter_link.default_link_classes }}" href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+      {%- endif %}
+    {%- endfor %}
+  </ol>
+</nav>

data/_includes/base/breakingnews.html.liquid

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

data/_includes/base/card.html.liquid

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

data/_includes/base/copyright.html.liquid

@@ -0,0 +1,56 @@
+{% comment %}
+================================================================================
+Template: Copyright Footer Component
+Purpose: Renders copyright notice with author name and optional legal links.
+Shows dynamic year, author, and links to Terms of Service, Privacy Policy, etc.
+================================================================================
+
+Design Logic:
+- Dynamic year: automatically uses current year from site.time
+- Legal links looping: flexible number of links in footer
+- Reusable link component: consistent styling
+- Capture-based rendering: builds complex link string before output
+- Border separator styling: visual dividers between links
+
+Required Inputs:
+- author: Copyright holder name (e.g., "The CentOS Project")
+
+Optional Inputs:
+- legals: Array of legal link objects
+  - name: Link text (e.g., "Terms of Service")
+  - link: URL for legal document
+  - color: Link color (defaults to light)
+  - icon: Icon class (optional)
+  - class: Custom CSS classes (optional)
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_copyright_data
+3. site.data.copyright
+4. site.data.base.copyright
+================================================================================
+{% endcomment %}
+
+{%- assign copyright = include.data | default: page.with_copyright_data | default: site.data.copyright | default: site.data.base.copyright %}
+
+{%- comment %} === Presentation === {% endcomment %}
+{%- comment %} --- Defaults --- {% endcomment %}
+{% assign copyright_author = copyright.author %}
+{% assign copyright_legals = copyright.legals %}
+{%- capture copyright_links -%}
+{%- for item in copyright_legals -%}
+{% assign copyright_link_class = item.class | default: "link link-offset-3 link-offset-3-hover link-underline-primary link-underline-opacity-0 link-underline-opacity-100-hover border-start ms-2 ps-2 link-light" %}
+{%- include base/link.html.liquid
+    class         = copyright_link_class
+    name          = item.name
+    link          = item.link
+    color         = item.color
+    role          = item.role
+    icon          = item.icon
+    icon_position = item.icon_position
+-%}
+{%- endfor -%}
+{%- endcapture -%}
+
+{%- comment %} --- HTML --- {% endcomment %}
+<div class="my-3 text-center">Copyright &copy; {{ site.time | date: "%Y" }} {{ copyright_author }} {{ copyright_links }}</div>

data/_includes/base/copyvalue.html.liquid

@@ -0,0 +1,59 @@
+{% comment %}
+================================================================================
+Template: Copy Value Component
+Purpose: Copy to clipboard with visual feedback (checkmark + tooltip).
+Auto-detects and handles both escaped and unescaped values.
+================================================================================
+
+Recommended Usage (in template):
+  <a class="copy-btn" data-copy-value="{{ command | escape }}"
+     data-bs-toggle="tooltip" data-bs-title="Copy command">
+    <span class="fa-regular fa-copy"></span>
+  </a>
+
+Strategic Design Logic:
+- Armored implementation: handles escaped and unescaped values
+- HTML entity detection: decodes &quot;, &amp;, &#39; automatically
+- Visual feedback: checkmark icon + success tooltip
+- Auto-reset: returns to original state after delay
+- Clipboard API: native browser copy functionality
+
+Required Inputs (from HTML element):
+- class="copy-btn": Element to attach handler
+- data-copy-value: Text to copy to clipboard
+
+Optional Inputs (from data objects):
+- reset_delay: Milliseconds before reset (default varies by schema)
+- checkmark_path: SVG path for success icon
+- checkmark_viewbox: SVG viewBox for success icon
+- success_message: Tooltip message on success
+
+Data Source Hierarchy (in priority order):
+1. include.data             - Explicitly passed configuration
+2. page.with_copyvalue_data - Page front matter
+3. site.data.copyvalue      - Site configuration
+4. site.data.base.copyvalue - Theme defaults
+
+Dependencies:
+Bootstrap 5, FontAwesome 6+, Clipboard API (modern browsers)
+================================================================================
+{% endcomment %}
+
+{%- assign copyvalue = include.data | default: page.with_copyvalue_data | default: site.data.copyvalue | default: site.data.base.copyvalue %}
+
+{%- comment %} === Presentation === {% endcomment %}
+
+{%- comment %} --- Defaults --- {% endcomment %}
+{%- assign copyvalue_reset_delay      = copyvalue.reset_delay      | default: site.data.base.copyvalue_schema.properties.with_copyvalue_data.properties.reset_delay.default %}
+{%- assign copyvalue_checkmark_path   = copyvalue.checkmark_path   | default: site.data.base.copyvalue_schema.properties.with_copyvalue_data.properties.checkmark_path.default %}
+{%- assign copyvalue_checkmark_viewbox = copyvalue.checkmark_viewbox | default: site.data.base.copyvalue_schema.properties.with_copyvalue_data.properties.checkmark_viewbox.default %}
+{%- assign copyvalue_success_message  = copyvalue.success_message  | default: site.data.base.copyvalue_schema.properties.with_copyvalue_data.properties.success_message.default %}
+
+{%- comment %} --- HTML --- {% endcomment %}
+<!-- Load Copy Value functionality with configuration via data attributes -->
+<script id="centos-copyvalue"
+        data-reset-delay="{{ copyvalue_reset_delay }}"
+        data-checkmark-path="{{ copyvalue_checkmark_path }}"
+        data-checkmark-viewbox="{{ copyvalue_checkmark_viewbox }}"
+        data-success-message="{{ copyvalue_success_message }}"
+        src="{{ site.baseurl }}/assets/js/base/copyvalue.min.js"></script>

data/_includes/base/datatable.html.liquid

@@ -0,0 +1,64 @@
+{% comment %}
+================================================================================
+Template: DataTables Library Initialization Component
+Purpose: Loads DataTables jQuery plugin from CDN with SRI integrity checks.
+Initializes DataTables on all .dataTable elements with responsive design,
+pagination, searching, and sorting.
+================================================================================
+
+Design Logic:
+- CDN-based library loading with SRI integrity checks
+- Responsive table design for mobile devices
+- Smart pagination: only if table has >10 rows
+- Automatic element detection: targets all .dataTable classes
+- jQuery dependency: requires jQuery loaded first
+
+Optional Inputs:
+- type: "head" for CSS include, "script" for JavaScript
+- version: DataTables version (e.g., "1.13.7")
+- css_integrity, script_integrity: SRI integrity hashes
+- page_length: Default rows per page (default: 10)
+- length_menu: Pagination options
+- data: DataTables configuration object
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_datatable_data
+3. site.data.datatable
+4. site.data.base.datatable
+================================================================================
+{% endcomment %}
+
+{%- assign datatable = include.data | default: page.with_datatable_data | default: site.data.datatable | default: site.data.base.datatable %}
+
+{%- comment %} === Presentation === {% endcomment %}
+{%- comment %} --- Defaults --- {% endcomment %}
+{%- assign datatable_version          = datatable.version | default: site.data.base.datatable_schema.properties.with_datatable_data.properties.version.default %}
+{%- assign datatable_css_integrity    = datatable.css_integrity | default: site.data.base.datatable_schema.properties.with_datatable_data.properties.css_integrity.default %}
+{%- assign datatable_script_integrity = datatable.script_integrity | default: site.data.base.datatable_schema.properties.with_datatable_data.properties.script_integrity.default %}
+{%- assign datatable_page_length      = datatable.page_length | default: site.data.base.datatable_schema.properties.with_datatable_data.properties.page_length.default %}
+{%- assign datatable_length_menu      = datatable.length_menu | default: site.data.base.datatable_schema.properties.with_datatable_data.properties.length_menu.default %}
+
+{%- capture html_datatable_head %}
+  <link href="https://cdn.datatables.net/{{ datatable_version }}/datatables.min.css" rel="stylesheet" integrity="{{ datatable_css_integrity }}" crossorigin="anonymous" />
+{%- endcapture %}
+
+{%- capture html_datatable_script %}
+  <!-- DataTables Library -->
+  <script src="https://cdn.datatables.net/{{ datatable_version }}/datatables.min.js" integrity="{{ datatable_script_integrity }}" crossorigin="anonymous"></script>
+
+  <!-- Initialize DataTables with configuration via data attributes -->
+  <script id="centos-datatable"
+          data-page-length="{{ datatable_page_length }}"
+          data-length-menu='{{ datatable_length_menu | split: "," | jsonify }}'
+          src="{{ site.baseurl }}/assets/js/base/datatable.min.js"></script>
+{%- endcapture %}
+
+{%- comment %} --- HTML --- {% endcomment %}
+{%- assign type = include.type %}
+{%- case type %}
+{%- when "head" %}
+  {{ html_datatable_head }}
+{%- when "script" %}
+  {{ html_datatable_script }}
+{%- endcase %}

data/_includes/base/event.html.liquid

@@ -0,0 +1,89 @@
+{% comment %}
+================================================================================
+Template: Event Alerts Component
+Purpose: Renders event announcements as styled alert boxes with date, location,
+description, and optional action links.
+================================================================================
+
+Design Logic:
+- Alert-based styling: consistent with Bootstrap alert components
+- Icon support: visual identification of event type
+- Color coding: color-based categorization
+- Location details: address and city information optional
+- Date/time display: with location suffix if available
+- Optional action link: "Know more" button for details page
+- Multi-event support: loops through event array
+
+Required Inputs:
+- title: Event name/title
+
+Optional Inputs:
+- description: Event description text
+- date: Event date/time string
+- location: Event location name
+- color: Alert color scheme (default: "secondary")
+- icon: Icon class (default: "fa-solid fa-calendar")
+- link: URL to event details page (optional)
+- data: Array of event objects
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_event_data
+3. site.data.event
+4. site.data.base.event
+================================================================================
+{% endcomment %}
+
+{%- assign events = include.data | default: page.with_event_data | default: site.data.event | default: site.data.base.event %}
+
+{%- comment %} === Presentation === {% endcomment %}
+<div class="mb-3">
+  {% for event in events %}
+    {%- comment %} --- Defaults --- {% endcomment %}
+    {%- assign event_address     = event.address     | default: nil %}
+    {%- assign event_city        = event.city        | default: nil %}
+    {%- assign event_color       = event.color       | default: "secondary" %}
+    {%- assign event_location    = event.location    | default: nil %}
+    {%- assign event_date        = event.date        | default: nil %}
+    {%- assign event_description = event.description | default: nil %}
+    {%- assign event_icon        = event.icon        | default: "fa-solid fa-calendar" %}
+    {%- assign event_image_url   = event.image_url   | default: nil %}
+    {%- assign event_link        = event.link        | default: nil %}
+    {%- assign event_title       = event.title       | default: nil %}
+
+    {%- assign event_btn_class = "btn btn-sm text-nowrap btn-" | append: event_color %}
+
+    {%- comment %} --- HTML --- {% endcomment %}
+    <div class="alert alert-{{ event_color }} rounded mb-1" role="alert">
+      <div class="d-flex justify-content-between align-items-start">
+        {%- if event_icon != nil %}
+          <div class="h6 my-1 me-2"><i class="{{ event_icon }}"></i></div>
+        {%- endif %}
+        <div class="flex-fill text-start">
+          {%- if event_title != nil %}
+            <div class="ms-1 fw-bold">{{ event_title }}</div>
+          {%- endif %}
+          {%- if event_date != nil %}
+            <div class="ms-1">{{ event_date }}{% if event_location != nil %} • {{ event_location }}{%- endif %}</div>
+          {%- endif %}
+          {%- if event_description != nil %}
+            <div class="ms-1">{{ event_description }}</div>
+          {%- endif %}
+        </div>
+        {%- if event_link != nil %}
+          <div class="ms-1">
+            {% include base/link.html.liquid
+            name          = "Know more"
+            icon          = "fa-solid fa-arrow-right"
+            icon_position = "end"
+            role          = "button"
+            class         = event_btn_class
+            color         = event_color
+            link          = event_link
+            %}
+          </div>
+        {%- endif %}
+      </div>
+    </div>
+  {% endfor %}
+</div>

data/_includes/base/fontawesome.html.liquid

@@ -0,0 +1,58 @@
+{% comment %}
+================================================================================
+Template: Font Awesome Icon Library Component
+Purpose: Loads Font Awesome icon library CSS and JavaScript from CDN
+with integrity checks.
+================================================================================
+
+Design Logic:
+- CDN-based library loading with SRI integrity verification
+- Format switching: separate head (CSS) and script (JS) includes
+- CSS bundle: complete icon stylesheet (solid, regular, brands)
+- Subresource Integrity (SRI): ensures file hasn't been tampered with
+- Privacy-focused: referrerpolicy="no-referrer"
+
+Optional Inputs:
+- type: "head" for CSS, "script" for JavaScript
+- version: Font Awesome version (e.g., "6.4.0")
+- cdn: CDN base URL (default: unpkg.com)
+- css_bundle_name, js_bundle_name: Bundle identifiers
+- css_bundle_integrity, js_bundle_integrity: SRI hashes
+- data: Font Awesome configuration object
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_fontawesome_data
+3. site.data.fontawesome
+4. site.data.base.fontawesome
+================================================================================
+{% endcomment %}
+
+{%- assign fontawesome = include.data | default: page.with_fontawesome_data | default: site.data.fontawesome | default: site.data.base.fontawesome %}
+
+{%- comment %} === Presentation === {% endcomment %}
+
+{%- comment %} --- Defaults --- {% endcomment %}
+{%- assign fontawesome_version              = fontawesome.version              | default: site.data.base.fontawesome_schema.properties.with_fontawesome_data.properties.version.default %}
+{%- assign fontawesome_cdn                  = fontawesome.cdn                  | default: site.data.base.fontawesome_schema.properties.with_fontawesome_data.properties.cdn.default %}
+{%- assign fontawesome_css_bundle_name      = fontawesome.css_bundle_name      | default: site.data.base.fontawesome_schema.properties.with_fontawesome_data.properties.css_bundle_name.default %}
+{%- assign fontawesome_css_bundle_integrity = fontawesome.css_bundle_integrity | default: site.data.base.fontawesome_schema.properties.with_fontawesome_data.properties.css_bundle_integrity.default %}
+{%- assign fontawesome_js_bundle_name       = fontawesome.js_bundle_name       | default: site.data.base.fontawesome_schema.properties.with_fontawesome_data.properties.js_bundle_name.default %}
+{%- assign fontawesome_js_bundle_integrity  = fontawesome.js_bundle_integrity  | default: site.data.base.fontawesome_schema.properties.with_fontawesome_data.properties.js_bundle_integrity.default %}
+
+{%- capture html_fontawesome_head %}
+<link rel="stylesheet" href="{{ fontawesome_cdn }}/{{ fontawesome_version }}/css/{{ fontawesome_css_bundle_name }}.min.css" integrity="{{ fontawesome_css_bundle_integrity }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
+{%- endcapture %}
+
+{%- capture html_fontawesome_script %}
+<script src="{{ fontawesome_cdn }}/{{ fontawesome_version }}/js/{{ fontawesome_js_bundle_name }}.min.js" integrity="{{ fontawesome_js_bundle_integrity }}" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+{%- endcapture %}
+
+{%- comment %} --- HTML --- {% endcomment %}
+{%- assign type = include.type %}
+{%- case type %}
+{%- when "head" %}
+{{ html_fontawesome_head }}
+{%- when "script" %}
+{{ html_fontawesome_script }}
+{%- endcase %}

data/_includes/base/head.html.liquid

@@ -0,0 +1,101 @@
+{% comment %}
+================================================================================
+Template: Page Head Section Component
+Purpose: Generates complete HTML <head> section with meta tags, stylesheets,
+icons, fonts, and conditional library includes.
+================================================================================
+
+Design Logic:
+- Comprehensive meta tags: charset, viewport, responsive design
+- Dynamic title generation: page title + site title
+- Favicon support: multiple formats (16x16, 32x32, SVG, Apple Touch)
+- Google Fonts: Montserrat and Source Code Pro preloaded
+- Breakingnews scroll offset: dynamic CSS calculation
+- Conditional includes: OGP, Font Awesome, Highlight.js, DataTables
+- CSS prioritization: custom stylesheet last for override
+
+Required Inputs:
+- page.title: Current page title
+- site.title: Site name/title
+- site.baseurl: Base URL for asset paths
+
+Optional Inputs:
+- page.with_ogp, page.with_fontawesome: Include OGP/Font Awesome (boolean)
+- page.with_breakingnews, page.with_highlight: Include breaking news/highlight
+- page.with_datatable: Include DataTables (boolean)
+- page.with_breakingnews_data: Array of breaking news items
+================================================================================
+{% endcomment %}
+
+<head>
+  {% if page.title == site.title -%}
+    <title>{{ page.title }}</title>
+  {% else -%}
+    <title>{{ page.title }} - {{ site.title }}</title>
+  {% endif -%}
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+  {%- if page.with_ogp == true -%}
+    {% include base/ogp.html.liquid %}
+  {%- endif %}
+  <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" />
+  <link rel="icon" href="{{ site.baseurl }}/assets/icons/favicon.svg" sizes="any" />
+  <link rel="apple-touch-icon" href="{{ site.baseurl }}/assets/icons/apple-touch-icon.png" sizes="180x180" />
+  <link rel="manifest" href="{{ site.baseurl }}/site.webmanifest" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" />
+  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/base/stylesheet.min.css" />
+  {%- comment %}
+  Dynamic Breaking News Offset CSS
+  Adjust scroll-margin-top values based on the number of breaking news items.
+  Uses CSS custom properties for cleaner, more maintainable dynamic styling.
+  {%- endcomment %}
+  {%- assign breakingnews = page.with_breakingnews_data | default: site.data.breakingnews | default: site.data.base.breakingnews %}
+  {%- if page.with_breakingnews == true and breakingnews.size > 0 %}
+    {%- assign breakingnews_alert_height = 31 %}
+    {%- assign navbar_height = 42 %}
+    {%- assign breakingnews_offset = 0 %}
+    {%- for item in breakingnews %}
+      {%- if forloop.first %}
+        {%- assign breakingnews_offset = breakingnews_alert_height | plus: navbar_height %}
+      {%- else %}
+        {%- assign breakingnews_offset = breakingnews_offset | plus: breakingnews_alert_height %}
+      {%- endif %}
+    {%- endfor %}
+    {%- assign heading_margin_px = 48 %}
+    {%- assign heading_scroll_margin_height = breakingnews_offset | plus: heading_margin_px %}
+    {%- assign accordion_scroll_margin_height = breakingnews_offset %}
+    <style>
+    :root {
+      --calculated-heading-offset: {{ heading_scroll_margin_height }}px;
+      --calculated-accordion-offset: {{ accordion_scroll_margin_height }}px;
+    }
+    main {
+      .content > h1,
+      .content > h2,
+      .content > h3,
+      .content > h4,
+      .content > h5,
+      .content > h6 {
+        scroll-margin-top: calc(var(--calculated-heading-offset) * 1.3) !important;
+      }
+      .content .accordion,
+      .content .accordion-item {
+        scroll-margin-top: calc(var(--calculated-accordion-offset) * 1.5) !important;
+      }
+    }
+    </style>
+  {%- endif %}
+  {% if page.with_fontawesome %}
+    {% include base/fontawesome.html.liquid type="head" %}
+  {% endif %}
+  {% if page.with_highlight %}
+    {% include base/highlight.html.liquid type="head" %}
+  {% endif -%}
+  {% if page.with_datatable %}
+    {% include base/datatable.html.liquid type="head" %}
+  {% endif -%}
+</head>