jekyll-theme-zer0 0.2.0 → 0.2.1

data/_layouts/landing.html

@@ -3,75 +3,152 @@ layout: root
 ---
 <!--
   ===================================================================
-  LANDING LAYOUT - Template for landing pages with visual effects
+  LANDING LAYOUT - Welcome page for first-time visitors
   ===================================================================
   
   File: landing.html
   Path: _layouts/landing.html
   Inherits: root.html
-  Purpose: Specialized layout for landing pages with interactive backgrounds
+  Purpose: Create an engaging first impression for visitors discovering the site
   
   Template Logic:
-  - Creates a full-width landing page experience
-  - Includes sidebar navigation in offcanvas (mobile-friendly)
-  - Implements particles.js for animated background effects
-  - Uses responsive container for content presentation
-  - Bypasses default sidebar layout for cleaner presentation
+  - Hero section with clear value proposition
+  - Feature highlights with visual appeal
+  - Quick navigation to key areas
+  - Professional presentation with Bootstrap components
+  - Mobile-responsive design for all devices
   
   Layout Features:
-  - Offcanvas sidebar for navigation (hidden by default)
-  - Full-width responsive container with proper spacing
-  - Particles.js integration for visual appeal
-  - Clean, minimal structure for marketing content
+  - Hero banner with call-to-action
+  - Feature cards with icons and descriptions
+  - Quick start guide and navigation
+  - Social proof and credibility indicators
+  - Clean, professional aesthetic
   
-  Visual Effects:
-  - Particles.js animated background
-  - Interactive particle system
-  - Customizable through particles configuration
-  - Performance-optimized for modern browsers
+  Target Audience:
+  - First-time visitors exploring the repository
+  - Developers looking for Jekyll themes
+  - Users seeking Docker-optimized solutions
+  - People interested in error-free development
   
-  Usage:
-  - Product landing pages
-  - Marketing campaign pages
-  - Portfolio showcases
-  - Event announcement pages
-  - Any page requiring visual impact
+  Conversion Goals:
+  - Encourage exploration of documentation
+  - Drive adoption of the theme
+  - Build trust through professional presentation
+  - Guide users to relevant resources
   
   Dependencies:
-  - particles-source.js: Core particles.js library
-  - particles.js: Custom particle configuration
-  - sidebar-left.html: Navigation include for offcanvas
-  
-  Performance Notes:
-  - Particles.js loads at page end for better performance
-  - Consider lazy loading for mobile devices
-  - Monitor performance impact on older devices
+  - Bootstrap 5 components and utilities
+  - Custom CSS for enhanced styling
+  - Responsive images and icons
   ===================================================================
 -->
 
 <!-- ================================ -->
-<!-- NAVIGATION SIDEBAR (OFFCANVAS)  -->
+<!-- HERO SECTION                     -->
 <!-- ================================ -->
-<!-- Hidden sidebar navigation that can be toggled -->
-<div class="offcanvas">
-    {% include sidebar-left.html %}
+<div class="bg-primary text-white">
+    <div class="container-xl py-5 px-4 px-md-5">
+        <div class="row align-items-center min-vh-50 g-4 g-lg-5">
+            <div class="col-lg-6">
+                <h1 class="display-4 fw-bold mb-3">{{ page.title }}</h1>
+                <p class="lead mb-4">{{ page.description }}</p>
+                <div class="d-flex flex-column flex-md-row gap-3">
+                    <a href="#get-started" class="btn btn-light btn-lg">
+                        <i class="bi bi-rocket-takeoff me-2"></i>Get Started
+                    </a>
+                    <a href="#features" class="btn btn-outline-light btn-lg">
+                        <i class="bi bi-list-check me-2"></i>Features
+                    </a>
+                    <a href="{{ site.resources.github_repo }}" class="btn btn-outline-light btn-lg">
+                        <i class="bi bi-github me-2"></i>GitHub
+                    </a>
+                </div>
+            </div>
+            <div class="col-lg-6 text-center">
+                {% if page.hero_image %}
+                <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg">
+                {% else %}
+                <div class="bg-light rounded p-5 text-dark">
+                    <i class="bi bi-code-square display-1"></i>
+                    <p class="mt-3 mb-0">Jekyll Theme</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- ================================ -->
-<!-- MAIN LANDING CONTENT            -->
+<!-- MAIN CONTENT AREA               -->
 <!-- ================================ -->
-<!-- Responsive container for landing page content -->
-<div class="container-xl pt-5">
-    <!-- ========================== -->
-    <!-- LANDING PAGE CONTENT       -->
-    <!-- ========================== -->
-    <!-- Main content area for hero sections, features, calls-to-action -->
+{% include landing/landing-quick-links.html %}
+
+<div class="container-xl py-5 px-4 px-md-5">
     {{ content }}
 </div>
 
 <!-- ================================ -->
-<!-- VISUAL EFFECTS AND SCRIPTS      -->
+<!-- FEATURES SECTION                 -->
+<!-- ================================ -->
+<div class="py-5 bg-body-tertiary" id="features">
+    <div class="container-xl px-4 px-md-5">
+        <div class="row text-center mb-5">
+            <div class="col-lg-8 mx-auto">
+        <h2 class="display-5 fw-bold text-body-emphasis">Why Choose zer0-mistakes?</h2>
+        <p class="lead text-body-secondary">Built for developers who value reliability, simplicity, and modern workflows</p>
+            </div>
+        </div>
+        
+        <div class="row g-4">
+            <div class="col-md-4">
+                <div class="card h-100 border-0 shadow-sm">
+                    <div class="card-body text-center p-4">
+                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                            <i class="bi bi-shield-check fs-4"></i>
+                        </div>
+            <h5 class="card-title text-body-emphasis">Error-Free Development</h5>
+            <p class="card-text text-body-secondary">Built-in error handling and self-healing installation process ensures a smooth development experience.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="col-md-4">
+                <div class="card h-100 border-0 shadow-sm">
+                    <div class="card-body text-center p-4">
+                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                            <i class="bi bi-boxes fs-4"></i>
+                        </div>
+            <h5 class="card-title text-body-emphasis">Docker-First Approach</h5>
+            <p class="card-text text-body-secondary">Cross-platform compatibility with zero local configuration. Works on Apple Silicon, Intel, and Linux.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="col-md-4">
+                <div class="card h-100 border-0 shadow-sm">
+                    <div class="card-body text-center p-4">
+                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                            <i class="bi bi-lightning-charge fs-4"></i>
+                        </div>
+            <h5 class="card-title text-body-emphasis">AI-Powered Setup</h5>
+            <p class="card-text text-body-secondary">Intelligent installation automation that detects and fixes common issues automatically.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- ================================ -->
+<!-- QUICK START SECTION             -->
 <!-- ================================ -->
-<!-- Particles.js for animated background effects -->
-<script src="/assets/js/particles-source.js"></script>
-<script src="/assets/js/particles.js"></script>
+<div class="container-xl py-5 px-4 px-md-5" id="get-started">
+    <div class="row">
+        <div class="col-12 col-xl-10 mx-auto text-center">
+            <h2 class="display-5 fw-bold mb-4">Ready to Get Started?</h2>
+            <p class="lead mb-4">Choose your preferred installation method and be up and running in minutes</p>
+            {% include landing/landing-install-cards.html %}
+        </div>
+    </div>
+</div>

data/_layouts/root.html

@@ -38,7 +38,7 @@
         <!-- =============================================== -->
         
         <!-- Core site metadata, stylesheets, and external dependencies -->
-        {% include head.html %}
+        {% include core/head.html %}
 
         <!-- Jekyll SEO plugin for enhanced search engine optimization -->
         <!-- Documentation: https://github.com/jekyll/jekyll-seo-tag -->
@@ -51,17 +51,16 @@
         <!-- ============================================== -->
         
         <!-- Inline SVG symbols for consistent iconography throughout the site -->
-        {% include svg.html %}
+        {% include components/svg.html %}
 
         <!-- Google Tag Manager body code for analytics (if configured) -->
         <!-- Note: Currently commented out - uncomment when GTM is needed -->
-        <!-- {% include google-tag-manager-body.html %} -->
 
         <!-- Main site header with navigation, branding, and search functionality -->
-        {% include header.html %}
+        {% include core/header.html %}
 
         <!-- Site-wide information banner or announcement section -->
-        {% include info-section.html %}
+        {% include components/info-section.html %}
 
         <!-- ======================== -->
         <!-- MAIN CONTENT AREA        -->
@@ -76,16 +75,15 @@
         <!-- ======================== -->
         
         <!-- Site footer with links, copyright, and additional navigation -->
-        {%- include footer.html -%}
+        {%- include core/footer.html -%}
 
         <!-- JavaScript dependencies and custom scripts -->
         <div>
             <!-- Search functionality (Algolia or similar) -->
             <!-- Note: Currently commented out - uncomment when search is implemented -->
-            <!-- {% include algolia.html %} -->
 
             <!-- External JavaScript libraries and custom scripts -->
-            {% include js-cdn.html %}
+            {% include components/js-cdn.html %}
         </div>
     </body>
 </html>

data/assets/js/back-to-top.js

@@ -1,24 +1,21 @@
-document.addEventListener('DOMContentLoaded', (event) => {
-  let mybutton = document.getElementById("backToTopBtn");
+document.addEventListener('DOMContentLoaded', () => {
+  const btn = document.getElementById('backToTopBtn');
+  if (!btn) return;
 
-  function topFunction() {
-    document.body.scrollTop = 0; // For Safari
-    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-    mybutton.style.opacity = "75%";
-  }
+  // Smooth scroll to top and keep accessible
+  const scrollToTop = (e) => {
+    if (e) e.preventDefault();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
-  if (mybutton) {
-    mybutton.onclick = topFunction;
-  }
+  btn.addEventListener('click', scrollToTop);
 
-  // When the user scrolls down 20px from the top of the document, show the button
-  window.onscroll = function() {scrollFunction()};
+  const toggle = () => {
+    const y = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    btn.style.display = y > 200 ? 'block' : 'none';
+  };
 
-  function scrollFunction() {
-    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-      mybutton.style.display = "block";
-    } else {
-      mybutton.style.display = "none";
-    }
-  }
+  // Initialize state and bind listener without clobbering
+  toggle();
+  window.addEventListener('scroll', toggle, { passive: true });
 });

metadata

@@ -1,57 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-zer0
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Amr Abdel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2025-09-01 00:00:00.000000000 Z
+date: 2025-10-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.0'
-- !ruby/object:Gem::Dependency
-  name: jekyll-feed
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '0.15'
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.15'
-- !ruby/object:Gem::Dependency
-  name: jekyll-sitemap
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.4'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '1.4'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -110,43 +82,45 @@ files:
 - _data/navigation/docs.yml
 - _data/navigation/main.yml
 - _data/navigation/posts.yml
-- _includes/branding.html
-- _includes/breadcrumbs.html
-- _includes/dev-shortcuts.html
-- _includes/footer.html
-- _includes/giscus.html
-- _includes/google-analytics.html
-- _includes/google-tag-manager-body.html
-- _includes/google-tag-manager-head.html
-- _includes/halfmoon.html
-- _includes/head.html
-- _includes/header.html
-- _includes/info-section.html
-- _includes/intro.html
-- _includes/js-cdn.html
-- _includes/nav_list.html
-- _includes/navbar.html
-- _includes/powered-by.html
-- _includes/quick-index.html
-- _includes/searchbar.html
-- _includes/seo.html
-- _includes/sidebar-categories.html
-- _includes/sidebar-folders.html
-- _includes/sidebar-left.html
-- _includes/sidebar-right.html
-- _includes/sitemap.html
-- _includes/style.html
-- _includes/svg.html
-- _includes/toc
-- _includes/toc.html
-- _includes/zer0-env-var.html
+- _data/navigation/quickstart.yml
+- _includes/README.md
+- _includes/analytics/google-analytics.html
+- _includes/analytics/google-tag-manager-body.html
+- _includes/analytics/google-tag-manager-head.html
+- _includes/components/dev-shortcuts.html
+- _includes/components/halfmoon.html
+- _includes/components/info-section.html
+- _includes/components/js-cdn.html
+- _includes/components/powered-by.html
+- _includes/components/quick-index.html
+- _includes/components/searchbar.html
+- _includes/components/svg.html
+- _includes/components/zer0-env-var.html
+- _includes/content/giscus.html
+- _includes/content/intro.html
+- _includes/content/seo.html
+- _includes/content/sitemap.html
+- _includes/content/toc.html
+- _includes/core/branding.html
+- _includes/core/footer.html
+- _includes/core/head.html
+- _includes/core/header.html
+- _includes/docs/bootstrap-docs.html
+- _includes/landing/landing-install-cards.html
+- _includes/landing/landing-quick-links.html
+- _includes/navigation/breadcrumbs.html
+- _includes/navigation/nav_list.html
+- _includes/navigation/navbar.html
+- _includes/navigation/sidebar-categories.html
+- _includes/navigation/sidebar-folders.html
+- _includes/navigation/sidebar-left.html
+- _includes/navigation/sidebar-right.html
 - _layouts/README.md
 - _layouts/blog.html
 - _layouts/collection.html
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/index.html
-- _layouts/javascript.html
 - _layouts/journals.html
 - _layouts/landing.html
 - _layouts/root.html
@@ -198,7 +172,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.7.0
+      version: 2.6.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="

data/_includes/footer.html

@@ -1,57 +0,0 @@
-<!--
-  file: footer.html
-  path: _includes/footer.html
-  includes: none
-  descrition: Social Links and Branding
--->
-
-<footer class="bd-footer container-xl d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-  <div class="col-sm d-flex align-items-center">
-    
-    <!-- Frameworks/Engines and Affiliations -->
-    <ul class="nav col-sm justify-content-end list-unstyled d-flex align-items-center">
-
-      <!-- Search for Site Frameworks in config file -->
-      <span class="align-self">
-        &copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. Powered by: 
-      </span>
-      {% for power in site.powered_by %}
-      <li class="btn ">
-        <a href="{{ power.url }}" rel="nofollow">
-          <i class="{{ site.default_icon }} {{ power.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"> 
-            {{ power.name }}
-          </span>
-        </a>
-        </li>
-        {% endfor %}
-        
-      <!-- Search for Site Affiliation links in config file -->
-      {% for link in site.links %}
-      <li class="btn ">
-        <a href="{{ link.url }}" rel="nofollow">
-          <i class="{{ site.default_icon }} {{ link.icon | default: site.links.default }}" aria-hidden="true"></i>
-        <!-- display name if there's enough space, else icon only -->
-          <span class="d-none d-md-inline"> 
-            {{ link.label }}
-          </span>
-        </a>
-        </li>
-      {% endfor %}
-      
-      <!-- RSS Feed -->
-      <li class="btn">
-        <a href="{{ '/feed.xml' | relative_url }}">
-          <i class="{{ site.default_icon }} bi-rss" aria-hidden="true"></i>
-          <!-- https://icons.getbootstrap.com/icons/rss/ -->
-          <span class="d-none d-md-inline">
-            {{ site.data.ui-text[site.locale].feed_label | default: "Feed" }}
-          </span>
-        </a>
-      </li>
-    </ul>
-
-  </div>
-</footer>
-

data/_includes/giscus.html

@@ -1,16 +0,0 @@
-<!-- giscus app - https://giscus.app/ - Feature # FR000001 -->
-
-<script src="https://giscus.app/client.js"
-        data-repo="{{ site.repository }}"
-        data-repo-id="{{ site.gisgus.data-repo-id }}"
-        data-category-id="{{ site.gisgus.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/head.html

@@ -1,95 +0,0 @@
-<!-- 
-  file: head.html
-  path: includes/head.html
-  includes: seo.html, google-analytics.html
-  description: Head section of the HTML document
-
--->
-
-<!-- Google Tag Manager - Head -->
-
-{% include google-tag-manager-head.html %}
-
-<!-- Custom JS Scripts -->
-<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 scripts -->
-
-    <!--  mermaid script -->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
-    <script >mermaid.initialize({ startOnLoad: true });</script> -->
-
-    <!-- Nano Bar -->
-    <script src="{{'/assets/js/nanobar.min.js' | relative_url }}"></script>
-
-<!-- add dummy progress bar -->
-<script>
-    var options = {
-      classname: 'nanobar',
-      id: 'top-progress-bar'
-    };
-    var nanobar = new Nanobar(options);
-    nanobar.go( 30 );
-    nanobar.go( 76 );
-    nanobar.go(100);
-  </script>
-
-    <!-- MathJax for LaTex -->
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-
-<!-- Meta -->
-<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">
-
-<!-- includes/seo.html -->
-{% include seo.html %}
-
-<!-- SEO  https://analytics.google.com/ -->
-
-    <!-- Meta data attributes -->
-    {% 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 %}
-
-    <!-- Google Analytics  -->
-    {% include google-analytics.html %}
-
-
-<!-- Styles -->    
-
-    <!-- CDN Styles -->
-        <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 Install -->
-        <!-- <script src="/assets/js/bootstrap.js"></script> -->
-
-    <!-- Tailwind CDN -->
-    <!-- TODO: Add tailwind -->
-    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
-
-    <!-- Bootstrap Icons  -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
-
-    <!-- Custom Styles -->
-    <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{'/assets/css/custom.css' | relative_url }}">
-    <!-- TODO: Replace this css with a compiled sass. currently, when docs.scss is compiled to main.css, the scroll spy doesn't work -->
-    <!-- <link rel="stylesheet" href="/assets/css/docs.css"> -->