jekyll-theme-zer0 0.2.0 → 0.2.1

data/_data/navigation/main.yml

@@ -1,27 +1,31 @@
-- title: Quick-Start
-  url: /quickstart
+- title: Quick Start
+  url: /quickstart/
   sublinks:
     - title: zer0
       url: /zer0/
-    - title: Master Setup
-      url: /quickstart/machine-setup
+    - title: Machine Setup
+      url: /quickstart/machine-setup/
+    - title: "Jekyll Setup"
+      url: /quickstart/jekyll-setup/
+    - title: "GitHub Setup"
+      url: /quickstart/github-setup/
 - title: Blog
-  url: /posts
+  url: /blog/
   sublinks:
-    - title: Pages
-      url: /pages
+    - title: All Posts
+      url: /posts/
 - title: Docs
   url: /docs/
   sublinks:
     - title: Jekyll
-      url: /docs/jekyll
+      url: /docs/jekyll/
 
 - title: About
   url: /about/
   sublinks:
     - title: Config
-      url: /about/config
+      url: /about/config/
     - title: Theme
-      url: /about/theme
+      url: /about/theme/
     - title: Sitemap
-      url: /about/sitemap
+      url: /about/sitemap/

data/_data/navigation/quickstart.yml

@@ -0,0 +1,12 @@
+- title: "Quick Start"
+  url: /quickstart/
+  sublinks:
+    - title: "Machine Setup"
+      url: /quickstart/machine-setup/
+      description: "Platform-specific setup and Docker installation"
+    - title: "Jekyll Setup"
+      url: /quickstart/jekyll-setup/
+      description: "Jekyll theme configuration and development environment"
+    - title: "GitHub Setup"
+      url: /quickstart/github-setup/
+      description: "Version control, GitHub integration, and deployment"

data/_includes/README.md

@@ -0,0 +1,97 @@
+# _includes Directory Organization
+
+This directory has been reorganized for better maintainability and clarity. Files are now grouped by functionality into subdirectories.
+
+## Directory Structure
+
+### `core/`
+
+Essential layout components that form the foundation of the site:
+
+- `head.html` - HTML document head with meta tags, scripts, and styles
+- `header.html` - Main site header with navigation
+- `footer.html` - Site footer (if exists)
+- `branding.html` - Site branding and title display
+
+### `navigation/`
+
+All navigation-related components:
+
+- `navbar.html` - Main navigation menu
+- `sidebar-left.html` - Left sidebar with dynamic navigation
+- `sidebar-right.html` - Right sidebar content
+- `sidebar-folders.html` - Dynamic folder structure generation
+- `sidebar-categories.html` - Category-based navigation
+- `nav_list.html` - Manual navigation list rendering
+- `breadcrumbs.html` - Navigation breadcrumbs
+
+### `analytics/`
+
+Analytics and tracking integrations:
+
+- `google-analytics.html` - Google Analytics tracking
+- `google-tag-manager-head.html` - GTM head section
+- `google-tag-manager-body.html` - GTM body section
+
+### `components/`
+
+Reusable UI components and widgets:
+
+- `searchbar.html` - Search functionality
+- `powered-by.html` - "Powered by" credits display
+- `quick-index.html` - Quick page index
+- `dev-shortcuts.html` - Developer shortcuts
+- `info-section.html` - Settings/info modal
+- `halfmoon.html` - Dark mode toggle
+- `zer0-env-var.html` - Environment variable configuration
+- `svg.html` - SVG icon definitions
+- `js-cdn.html` - CDN JavaScript libraries
+
+### `content/`
+
+Content-specific features and enhancements:
+
+- `seo.html` - SEO meta tags and structured data
+- `toc.html` - Table of contents generation
+- `giscus.html` - GitHub Discussions comment system
+- `intro.html` - Page introduction section
+- `sitemap.html` - Sitemap generation
+
+### `landing/`
+
+Landing page specific components:
+
+- `landing-install-cards.html` - Installation method cards
+- `landing-quick-links.html` - Quick links bar
+
+### `docs/`
+
+Documentation and reference materials:
+
+- `bootstrap-docs.html` - Bootstrap documentation (moved from style.html)
+
+## Usage
+
+When including files in layouts or other templates, use the full path:
+
+```liquid
+{% include core/head.html %}
+{% include navigation/sidebar-left.html %}
+{% include components/searchbar.html %}
+{% include analytics/google-analytics.html %}
+```
+
+## Benefits of This Organization
+
+1. **Logical Grouping**: Related functionality is grouped together
+2. **Easier Maintenance**: Finding and editing specific components is simpler
+3. **Reduced Conflicts**: Clear separation reduces naming conflicts
+4. **Better Documentation**: Each directory has a clear purpose
+5. **Scalability**: Easy to add new components to appropriate directories
+
+## Migration Notes
+
+- All include paths in layouts have been updated to reflect the new structure
+- The duplicate `toc` file has been removed
+- Large Bootstrap documentation moved to `docs/` directory
+- No functionality has been changed, only organization

data/_includes/{info-section.html → components/info-section.html}

@@ -18,13 +18,13 @@
 
                 <div class="container">
                 <!-- _include/breadcrumbs.html -->
-                  {% include breadcrumbs.html %}
-                  {% include searchbar.html %}
+                  {% include navigation/breadcrumbs.html %}
+                  {% include components/searchbar.html %}
 
                   <!-- Shortcuts to source bode -->
-                  {% include dev-shortcuts.html %}
+                  {% include components/dev-shortcuts.html %}
                   <!-- Dark Mode Switch -->
-                  {% include halfmoon.html %}
+                  {% include components/halfmoon.html %}
                 </div>
             </div>
           <div class="modal-footer">

data/_includes/content/giscus.html

@@ -0,0 +1,60 @@
+<!--
+╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗
+║                                                giscus.html                                                        ║
+║                                         GitHub Discussions Comment System                                         ║
+╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════╣
+║                                                                                                                   ║
+║ Purpose:      Integrates Giscus comment system powered by GitHub Discussions                                     ║
+║ Location:     /_includes/giscus.html                                                                             ║
+║ Usage:        {% include giscus.html %} (typically at bottom of posts/pages)                                    ║
+║ Dependencies: GitHub repository with Discussions enabled, site.repository, site.giscus configuration           ║
+║                                                                                                                   ║
+║ Features:                                                                                                         ║
+║ • GitHub Discussions-based commenting system                                                                     ║
+║ • Automatic theme detection (preferred_color_scheme)                                                             ║
+║ • Pathname-based mapping for unique comment threads                                                              ║
+║ • Reaction support for enhanced user engagement                                                                  ║
+║ • Top-positioned input for better UX                                                                             ║
+║                                                                                                                   ║
+║ Configuration Options:                                                                                            ║
+║ • data-repo: GitHub repository (site.repository)                                                                 ║
+║ • data-repo-id: GitHub repository ID (site.giscus.data-repo-id)                                                 ║
+║ • data-category-id: Discussions category ID (site.giscus.data-category-id)                                      ║
+║ • data-mapping: "pathname" - maps comments to page URL                                                           ║
+║ • data-strict: "1" - enables strict mapping mode                                                                 ║
+║                                                                                                                   ║
+║ Setup Requirements:                                                                                               ║
+║ • GitHub repository with Discussions feature enabled                                                             ║
+║ • Giscus app installed on the repository                                                                         ║
+║ • Correct repo-id and category-id in _config.yml                                                                 ║
+║                                                                                                                   ║
+║ Reference: Feature Request #FR000001                                                                              ║
+║ Documentation: https://giscus.app/                                                                                ║
+║                                                                                                                   ║
+╚═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝
+-->
+
+<!-- ===================================================================================================== -->
+<!--                                      GISCUS COMMENT SYSTEM                                           -->
+<!-- ===================================================================================================== -->
+<!-- GitHub Discussions-powered comment system integration                                                -->
+<!-- Feature Request: #FR000001                                                                           -->
+<!-- Documentation: https://giscus.app/                                                                   -->
+<!-- Async loading: Non-blocking comment system initialization                                            -->
+
+<!-- giscus app - https://giscus.app/ - Feature # FR000001 -->
+
+<script src="https://giscus.app/client.js"
+        data-repo="{{ site.repository }}"
+        data-repo-id="{{ site.giscus.data-repo-id }}"
+        data-category-id="{{ site.giscus.data-category-id }}"
+        data-mapping="pathname"
+        data-strict="1"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="preferred_color_scheme"
+        data-lang="en"
+        crossorigin="anonymous"
+        async>
+</script>

data/_includes/content/intro.html

@@ -0,0 +1,66 @@
+<!--
+  file: _includes/intro.html
+  description: Enhanced intro section with improved share functionality and better button alignment
+  path: _includes/intro.html
+  features:
+    - Responsive share dropdown with multiple social platforms
+    - Properly aligned action buttons at bottom right
+    - Improved accessibility with icons and labels
+    - Clean button grouping with consistent spacing
+--> 
+{% if page.collection %}
+  {% capture page_dir %}{{ site.collections_dir }}{% endcapture %}
+  {% assign testvar = "collection exists" %}
+{% endif %}
+
+<!-- Intro Section -->
+
+<div class="bd-intro pt-5 ps-lg-2 position-relative" style="
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{site.baseurl}}/{{ site.public_folder }}/{{ page.preview | default: site.info_banner }}') no-repeat center center / cover;
+  color: #fff;">
+
+  <br>
+  <h1>{{ page.title }}</h1>
+  <p>By {{ page.author | default: site.author.name }}</p>
+  <p>{{ page.description }}</p>
+  <p>Estimated reading time: {{ content | number_of_words | divided_by:200 }} minutes</p>
+  <!-- Action Buttons Group -->
+  <div class="position-absolute bottom-0 end-0 m-3 d-flex gap-2">
+    <!-- Share Button -->
+    <div class="dropdown">
+      <button class="btn btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
+        <i class="bi bi-share"></i>
+        <span class="d-none d-sm-inline ms-1">Share</span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
+        <li>
+          <a class="dropdown-item" href="https://reddit.com/submit?url={{ page.url | absolute_url | url_encode }}&amp;title={{ page.title | url_encode }}" target="_blank">
+            <i class="bi bi-reddit me-2"></i>Share on Reddit
+          </a>
+        </li>
+        <li>
+          <a class="dropdown-item" href="https://www.linkedin.com/sharing/share-offsite/?url={{ page.url | absolute_url | url_encode }}" target="_blank">
+            <i class="bi bi-linkedin me-2"></i>Share on LinkedIn
+          </a>
+        </li>
+        <li>
+          <a class="dropdown-item" href="https://twitter.com/intent/tweet?url={{ page.url | absolute_url | url_encode }}&text={{ page.title | url_encode }}" target="_blank">
+            <i class="bi bi-twitter me-2"></i>Share on Twitter
+          </a>
+        </li>
+        <li><hr class="dropdown-divider"></li>
+        <li>
+          <button class="dropdown-item" onclick='navigator.clipboard.writeText("{{ page.url | absolute_url }}"); alert("Link copied to clipboard!");'>
+            <i class="bi bi-clipboard me-2"></i>Copy Link
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Edit on Github Button -->
+    <a href="https://github.com/{{ site.repository }}/blob/master/{{ page_dir }}/{{ page.path }}" class="btn btn-dark">
+      <i class="bi bi-github"></i>
+      <span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
+    </a>
+  </div>
+</div>

data/_includes/{sitemap.html → content/sitemap.html}

@@ -1,6 +1,6 @@
 <!-- 
   file: sitemap.html
-  path: _includes/sitemap.html
+  path: _includes/content/sitemap.html
   description: This is the snippet for the sitemap page.
  -->
 

data/_includes/{toc.html → content/toc.html}

@@ -30,7 +30,7 @@
         "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
 
         Usage:
-            {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
+            {% include content/toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
 
         Parameters:
             * html         (string) - the HTML of compiled markdown generated by kramdown in Jekyll

data/_includes/{branding.html → core/branding.html}

@@ -22,8 +22,8 @@
 <!-- Title Section  -->
 
 <div class="navbar-brand">
-    <a class="nav-link" href="{{ site.logo_link}}{{ page.url }}">
-        <i class="d-sm-inline d-md-none {{ site.default_icon }} {{ site.default_icon }}-{{ site.title_icon | default: site.powered_by.default }}" aria-hidden="true"></i>
+    <a class="nav-link" href="{{ site.domain_url}}{{ page.url }}">
+        <i class="d-sm-inline d-md-none {{ site.default_icon }} {{ site .default_icon }}-{{ site.title_icon | default: site.powered_by.default }}" aria-hidden="true"></i>
         <!-- display name if there's enough space, else icon only -->
         <span class="d-none d-md-inline"> 
             {{ site.title | default: site.title }}

data/_includes/core/footer.html

@@ -0,0 +1,167 @@
+<!--
+  ===================================================================
+  FOOTER - Comprehensive Site Footer with Branding & Navigation
+  ===================================================================
+  
+  File: footer.html
+  Path: _includes/footer.html
+  Purpose: Rich footer inspired by bashconsultants with Powered-by row,
+           branding/contact, quick links, social/RSS, subscribe form, and
+           policy links. Fully responsive with Bootstrap 5 utilities.
+  
+  Template Logic:
+  - Top row: "Powered by" credits from site.powered_by
+  - Branding block: Site title, optional address/phone/email
+  - Quick links: Common pages (adjust as needed)
+  - Social links: site.links with icons + RSS feed
+  - Subscribe form: Non-functional placeholder endpoint (/subscribe)
+  - Bottom bar: Dynamic copyright year
+  
+  Dependencies:
+  - site.powered_by: Framework and service credits
+  - site.links: Social media and affiliate links
+  - site.default_icon: Icon framework (Bootstrap Icons)
+  - site.data.ui-text: Internationalization support for RSS label
+  - Bootstrap 5 classes provided by the theme
+  
+  Notes:
+  - Guard optional fields (address/phone/email) to avoid empty output
+  - Use relative_url for internal links to respect baseurl
+  ===================================================================
+-->
+
+<footer class="bd-footer container-xl border-top" role="contentinfo">
+  <!-- Powered by Row -->
+  <div class="container row my-3">
+    <ul class="nav col-sm justify-content-end list-unstyled d-flex align-items-center" aria-label="Powered by technologies">
+      <span class="align-start">
+        &copy; {{ site.time | date: "%Y" }} {{ site.name | default: site.title }} — Powered by:
+      </span>
+      {% for power in site.powered_by %}
+        <li class="btn align-items-end">
+          {% if power.url %}
+            <a href="{{ power.url }}" rel="nofollow">
+              <i class="{{ site.default_icon }} {{ power.icon | default: site.powered_by.default }}" aria-hidden="true"></i>
+              <span class="d-none d-md-inline">{{ power.name }}</span>
+            </a>
+          {% else %}
+            <span class="text-muted">
+              <i class="{{ site.default_icon }} {{ power.icon | default: site.powered_by.default }}" aria-hidden="true"></i>
+              <span class="d-none d-md-inline">{{ power.name }}</span>
+            </span>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+
+  <!-- Branding and Navigation Block -->
+  <div class="container row">
+    <div class="container bg-dark text-light py-5 rounded-3">
+      <div class="container">
+        <!-- Top: Site info + Quick Links + Social -->
+        <div class="row mb-4">
+          <!-- Site Info -->
+          <div class="col-12 col-md-6 col-lg-3 mb-3">
+            <h5 class="text-uppercase mb-3">{{ site.title }}</h5>
+            {% if site.address %}<p class="mb-1">{{ site.address }}</p>{% endif %}
+            {% if site.phone %}<p class="mb-1"><a href="tel:{{ site.phone }}" class="text-light text-decoration-none">{{ site.phone }}</a></p>{% endif %}
+            {% if site.email %}<p class="mb-0"><a href="mailto:{{ site.email }}" class="text-light text-decoration-none">{{ site.email }}</a></p>{% endif %}
+          </div>
+
+          <!-- Quick Links -->
+          <div class="col-12 col-md-6 col-lg-3 mb-3">
+            <h5 class="text-uppercase mb-3">Quick Links</h5>
+            <ul class="list-unstyled" aria-label="Footer quick links">
+              <li><a href="{{ '/' | relative_url }}" class="text-light text-decoration-none">Home</a></li>
+              <li><a href="{{ '/about' | relative_url }}" class="text-light text-decoration-none">About</a></li>
+              <li><a href="{{ '/services' | relative_url }}" class="text-light text-decoration-none">Services</a></li>
+              <li><a href="{{ '/blog' | relative_url }}" class="text-light text-decoration-none">Blog</a></li>
+              <li><a href="{{ '/contact' | relative_url }}" class="text-light text-decoration-none">Contact</a></li>
+              <li><a href="{{ '/sitemap.xml' | relative_url }}" class="text-light text-decoration-none">Sitemap (XML)</a></li>
+            </ul>
+          </div>
+
+          <!-- Latest Posts (dynamic) -->
+          {% assign posts_count = site.posts | size %}
+          {% if posts_count and posts_count > 0 %}
+          <div class="col-12 col-md-6 col-lg-3 mb-3">
+            <h5 class="text-uppercase mb-3">Latest Posts</h5>
+            <ul class="list-unstyled" aria-label="Latest posts">
+              {% for post in site.posts limit:3 %}
+                <li class="mb-1">
+                  <a href="{{ post.url | relative_url }}" class="text-light text-decoration-none">{{ post.title }}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+          {% endif %}
+
+          <!-- Social & RSS -->
+          <div class="col-12 col-md-6 col-lg-3 mb-3">
+            <h5 class="text-uppercase mb-3">Follow Us</h5>
+            <ul class="list-inline mb-0" aria-label="Social links">
+              {% for link in site.links %}
+                {% if link.url %}
+                  <li class="list-inline-item">
+                    <a href="{{ link.url }}" rel="nofollow" class="text-light text-decoration-none">
+                      <i class="{{ site.default_icon }} {{ link.icon | default: site.links.default }}" aria-hidden="true"></i>
+                      <span class="d-none d-md-inline">{{ link.label }}</span>
+                    </a>
+                  </li>
+                {% endif %}
+              {% endfor %}
+              <li class="list-inline-item">
+                <a class="text-light text-decoration-none" href="{{ '/feed.xml' | relative_url }}">
+                  <i class="{{ site.default_icon }} bi-rss" aria-hidden="true"></i>
+                  <span class="d-none d-md-inline">{{ site.data.ui-text[site.locale].feed_label | default: "Feed" }}</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Middle: Subscribe + Policies -->
+        <div class="row mb-4 align-items-center g-2">
+          <div class="col-md-8">
+            <form action="/subscribe" method="post" class="row g-2" aria-label="Subscribe form">
+              <div class="col-md-8">
+                <label for="footer-email" class="visually-hidden">Email</label>
+                <input type="email" name="email" id="footer-email" class="form-control" placeholder="Enter your email" required>
+              </div>
+              <div class="col-md-4">
+                <button type="submit" class="btn btn-primary w-100">Subscribe</button>
+              </div>
+            </form>
+          </div>
+          <div class="col-md-4 text-md-end">
+            <ul class="list-inline mb-0">
+              <li class="list-inline-item"><a href="{{ '/privacy-policy' | relative_url }}" class="text-light text-decoration-none">Privacy Policy</a></li>
+              <li class="list-inline-item"><a href="{{ '/terms-of-service' | relative_url }}" class="text-light text-decoration-none">Terms of Service</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Bottom: Copyright -->
+        <div class="text-center">
+          <p class="mb-0">&copy; {{ site.time | date: "%Y" }} {{ site.title | default: site.name }}. All Rights Reserved.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Back to Top Button (controlled by assets/js/back-to-top.js) -->
+  <a
+    id="backToTopBtn"
+    href="#"
+    class="btn btn-primary position-fixed bottom-0 end-0 m-3"
+    aria-label="Back to top"
+    title="Back to top"
+    role="button"
+    style="display: none;"
+  >
+    <i class="{{ site.default_icon }} bi-arrow-up" aria-hidden="true"></i>
+    <span class="visually-hidden">Back to top</span>
+  </a>
+</footer>
+

data/_includes/core/head.html

@@ -0,0 +1,158 @@
+<!--
+  ===================================================================
+  HEAD - HTML Document Head Section
+  ===================================================================
+  
+  File: head.html
+  Path: _includes/head.html
+  Purpose: Complete HTML document head section with meta tags, styles, 
+           and essential JavaScript libraries
+  
+  Template Logic:
+  - Loads critical JavaScript libraries before page render
+  - Includes SEO optimization and social media meta tags
+  - Configures third-party integrations (Analytics, MathJax)
+  - Sets up progress bar and UI enhancement scripts
+  
+  Dependencies:
+  - seo.html: SEO meta tags and Open Graph data
+  - google-analytics.html: Google Analytics tracking
+  - google-tag-manager-head.html: GTM head section
+  
+  Performance Notes:
+  - Scripts loaded in head for immediate availability
+  - MathJax loaded asynchronously to prevent render blocking
+  - Nanobar provides visual loading feedback
+  ===================================================================
+-->
+
+<!-- ================================ -->
+<!-- ANALYTICS AND TRACKING          -->
+<!-- ================================ -->
+<!-- Google Tag Manager - Must be in head section for proper tracking -->
+{% include analytics/google-tag-manager-head.html %}
+
+<!-- ================================ -->
+<!-- JAVASCRIPT LIBRARIES            -->
+<!-- ================================ -->
+<!-- Custom theme JavaScript - Loaded early for UI functionality -->
+<script src="{{ '/assets/js/myScript.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/auto-hide-nav.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/back-to-top.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/halfmoon.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/side-bar-folders.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/code-copy.js' | relative_url }}"></script>
+
+<!-- ================================ -->
+<!-- THIRD PARTY INTEGRATIONS        -->
+<!-- ================================ -->
+
+<!-- Mermaid Diagrams - Currently disabled for performance -->
+<!-- Enable for pages requiring diagram generation -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
+     <script>mermaid.initialize({ startOnLoad: true });</script> -->
+
+<!-- Nano Progress Bar - Visual loading indicator -->
+<script src="{{'/assets/js/nanobar.min.js' | relative_url }}"></script>
+
+<!-- Progress Bar Initialization - Creates visual loading feedback -->
+<script>
+    // Wait for DOM to be ready before initializing Nanobar
+    document.addEventListener('DOMContentLoaded', function() {
+        // Check if the progress bar element exists before initializing
+        var progressElement = document.getElementById('top-progress-bar');
+        if (progressElement) {
+            var options = {
+              classname: 'nanobar',
+              id: 'top-progress-bar'
+            };
+            var nanobar = new Nanobar(options);
+            nanobar.go( 30 );  // Initial loading state
+            nanobar.go( 76 );  // Partial completion
+            nanobar.go(100);   // Complete loading
+        } else {
+            console.warn('Progress bar element #top-progress-bar not found. Skipping Nanobar initialization.');
+        }
+    });
+</script>
+
+<!-- MathJax - Mathematical notation rendering (async for performance) -->
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+<!-- ================================ -->
+<!-- HTML DOCUMENT META DATA         -->
+<!-- ================================ -->
+<!-- Essential meta tags for proper document rendering and mobile support -->
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<!-- ================================ -->
+<!-- SEO AND SOCIAL MEDIA META TAGS  -->
+<!-- ================================ -->
+<!-- Comprehensive SEO optimization including Open Graph and Twitter Cards -->
+{% include content/seo.html %}
+
+<!-- ========================== -->
+<!-- STRUCTURED DATA MARKUP    -->
+<!-- ========================== -->
+<!-- Enhanced meta data for rich snippets and social media -->
+{% if page.title %}
+    <meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">
+{% endif %}
+{% if page.description %}
+    <meta itemprop="description" content="{{ page.description | markdownify | strip_html | strip_newlines | escape_once }}">
+{% elsif page.excerpt %}
+    <meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once}} ">
+{% endif %}
+{% if page.date %}
+    <meta itemprop="datePublished" content="{{ page.date | date_to_xmlschema }}">
+{% endif %}
+{% if page.last_modified_at %}
+    <meta itemprop="dateModified" content="{{ page.lastmod | date_to_xmlschema }}">
+{% endif %}
+
+<!-- ========================== -->
+<!-- ANALYTICS INTEGRATION     -->
+<!-- ========================== -->
+<!-- Google Analytics tracking - Configured in _config.yml -->
+{% include analytics/google-analytics.html %}
+
+
+<!-- ================================ -->
+<!-- CSS FRAMEWORKS AND LIBRARIES   -->
+<!-- ================================ -->
+
+<!-- ========================== -->
+<!-- BOOTSTRAP 5 FRAMEWORK     -->
+<!-- ========================== -->
+<!-- Bootstrap 5.3.3 - Primary CSS framework via CDN for performance -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<!-- Local Bootstrap Installation - Alternative for offline development -->
+<!-- <script src="/assets/js/bootstrap.js"></script> -->
+
+<!-- ========================== -->
+<!-- ICON LIBRARIES             -->
+<!-- ========================== -->
+<!-- Bootstrap Icons 1.10.3 - Complete icon set for UI elements -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+
+<!-- ========================== -->
+<!-- CUSTOM THEME STYLES       -->
+<!-- ========================== -->
+<!-- Primary theme stylesheet - Core styling and layout -->
+<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+
+<!-- Custom CSS overrides - Theme customizations and tweaks -->
+<link rel="stylesheet" href="{{'/assets/css/custom.css' | relative_url }}">
+
+<!-- ========================== -->
+<!-- EXPERIMENTAL FRAMEWORKS   -->
+<!-- ========================== -->
+<!-- Tailwind CSS - Currently disabled, enable for utility-first styling -->
+<!-- <script src="https://cdn.tailwindcss.com"></script> -->
+
+<!-- Docs CSS - Alternative stylesheet, currently disabled due to scroll spy issues -->
+<!-- TODO: Replace with compiled Sass when scroll spy functionality is fixed -->
+<!-- <link rel="stylesheet" href="/assets/css/docs.css"> -->