jekyll-theme-zer0 0.2.0 → 0.4.0

data/_data/navigation/about.yml

@@ -8,5 +8,7 @@
       url: /terms
     - title: Sitemap
       url: /about/sitemap
+    - title: Stats
+      url: /stats
   url: /about/
 

data/_data/navigation/main.yml

@@ -1,27 +1,33 @@
-- 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: Stats
+  url: /stats/
 - 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/components/mermaid.html

@@ -0,0 +1,101 @@
+<!--
+  ===================================================================
+  MERMAID DIAGRAM INTEGRATION
+  ===================================================================
+  
+  File: mermaid.html
+  Path: _includes/components/mermaid.html
+  Purpose: Load and initialize Mermaid.js for diagram rendering
+  
+  Usage:
+  - Set 'mermaid: true' in page front matter
+  - Use <div class="mermaid">...</div> syntax in content
+  - Supports all Mermaid diagram types (flowcharts, sequence, gantt, etc.)
+  
+  Configuration:
+  - Latest stable version via CDN
+  - Forest theme for dark mode compatibility
+  - Initialized on document ready
+  
+  Documentation:
+  - https://mermaid.js.org/
+  - https://github.com/mermaid-js/mermaid
+  ===================================================================
+-->
+
+<!-- Load Mermaid.js from CDN (latest stable version) -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+
+<!-- Initialize Mermaid with custom configuration -->
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: 'forest',  // Options: default, forest, dark, neutral, base
+      themeVariables: {
+        primaryColor: '#007bff',
+        primaryTextColor: '#fff',
+        primaryBorderColor: '#0056b3',
+        lineColor: '#6c757d',
+        secondaryColor: '#6c757d',
+        tertiaryColor: '#f8f9fa'
+      },
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis'
+      },
+      sequence: {
+        diagramMarginX: 50,
+        diagramMarginY: 10,
+        actorMargin: 50,
+        width: 150,
+        height: 65,
+        boxMargin: 10,
+        boxTextMargin: 5,
+        noteMargin: 10,
+        messageMargin: 35,
+        mirrorActors: true,
+        bottomMarginAdj: 1,
+        useMaxWidth: true
+      },
+      gantt: {
+        titleTopMargin: 25,
+        barHeight: 20,
+        barGap: 4,
+        topPadding: 50,
+        leftPadding: 75,
+        gridLineStartPadding: 35,
+        fontSize: 11,
+        numberSectionStyles: 4,
+        axisFormat: '%Y-%m-%d'
+      }
+    });
+    console.log('Mermaid.js initialized successfully');
+  });
+</script>
+
+<!-- FontAwesome for Mermaid icon support (optional) -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
+
+<!-- Custom CSS for Mermaid diagrams -->
+<style>
+  .mermaid {
+    text-align: center;
+    margin: 2rem auto;
+    background-color: transparent;
+  }
+  
+  /* Ensure diagrams are responsive */
+  .mermaid svg {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  /* Dark mode compatibility */
+  @media (prefers-color-scheme: dark) {
+    .mermaid {
+      filter: brightness(0.9);
+    }
+  }
+</style>

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>
+