jekyll-theme-zer0 0.2.0 → 0.4.0

data/_layouts/journals.html

@@ -2,103 +2,32 @@
 layout: default
 ---
 <!--
-  ===================================================================
-  JOURNALS LAYOUT - Blog post and article display template
-  ===================================================================
-  
-  File: journals.html
-  Path: _layouts/journals.html
-  Inherits: default.html (which inherits root.html)
-  Purpose: Specialized layout for blog posts, articles, and journal entries
-  
-  Template Logic:
-  - Displays individual blog posts with proper article structure
-  - Conditionally shows page title only if no header overlay is set
-  - Implements pagination navigation between posts
-  - Includes comment system integration (Giscus)
-  - Provides proper semantic HTML5 structure for articles
-  
-  Layout Structure:
-  1. Main article container with archive styling
-  2. Conditional page title display
-  3. Article content area
-  4. Previous/Next post navigation with Bootstrap pagination
-  5. Optional comment section
-  
-  Navigation Logic:
-  - Previous/Next links automatically generated from Jekyll post order
-  - Disabled state for first/last posts in the sequence
-  - Bootstrap pagination styling for consistent appearance
-  
-  Comment System:
-  - Conditionally loads Giscus comments if page.comments is true
-  - Allows for per-post comment control via frontmatter
-  
-  Dependencies:
-  - giscus.html: Comment system integration
-  - Jekyll post collection for navigation
-  ===================================================================
+  Simple journals layout for debugging stack overflow issue
 -->
 
-<!-- ================================ -->
-<!-- MAIN ARTICLE CONTAINER          -->
-<!-- ================================ -->
 <div id="main" role="main">
     <div class="archive">
-        <!-- ========================== -->
-        <!-- CONDITIONAL PAGE TITLE     -->
-        <!-- ========================== -->
-        <!-- Only display title if no header overlay image/color is set -->
-        <!-- This prevents title duplication when using hero images -->
-        {% unless page.header.overlay_color or page.header.overlay_image %}
-            <h1 id="page-title" class="">{{ page.title }}</h1>
-        {% endunless %}
-        
-        <!-- ========================== -->
-        <!-- ARTICLE CONTENT            -->
-        <!-- ========================== -->
-        <!-- Main post content rendered from Markdown -->
+        <h1 id="page-title">{{ page.title }}</h1>
         {{ content }}
     </div>
-
-    <!-- ================================ -->
-    <!-- POST NAVIGATION                  -->
-    <!-- ================================ -->
-    <!-- Previous and Next post navigation with Bootstrap pagination styling -->
+    
+    <!-- Simple navigation without complex logic -->
     <nav aria-label="Page navigation">
         <ul class="pagination pagination-lg justify-content-center">
-            <!-- Previous Post Link -->
             <li class="page-item">
                 {% if page.previous %}
-                    <a class="page-link" href="{{ page.previous.url | prepend: site.baseurl }}">
-                        Previous: {{ page.previous.title }}
-                    </a>
+                    <a class="page-link" href="{{ page.previous.url }}">Previous</a>
                 {% else %}
-                    <!-- Disabled state when no previous post exists -->
-                    <a class="page-link" href="#" aria-disabled="true">Previous</a>
+                    <span class="page-link disabled">Previous</span>
                 {% endif %}
             </li>
-            
-            <!-- Next Post Link -->
             <li class="page-item">
                 {% if page.next %}
-                    <a class="page-link" href="{{ page.next.url | prepend: site.baseurl }}">
-                        Next: {{ page.next.title }}
-                    </a>
+                    <a class="page-link" href="{{ page.next.url }}">Next</a>
                 {% else %}
-                    <!-- Disabled state when no next post exists -->
-                    <a class="page-link" href="#" aria-disabled="true">Next</a>
+                    <span class="page-link disabled">Next</span>
                 {% endif %}
             </li>
         </ul>
     </nav>
-</div>
-
-<!-- ================================ -->
-<!-- COMMENT SYSTEM                   -->
-<!-- ================================ -->
-<!-- Conditionally load Giscus comments if enabled in page frontmatter -->
-<!-- Usage: Set 'comments: true' in post frontmatter to enable -->
-{% if page.comments %}
-    {% include giscus.html %}
-{% endif %}
+</div>

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.4.0
 platform: ruby
 authors:
 - Amr Abdel
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-01 00:00:00.000000000 Z
+date: 2025-10-10 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,46 @@ 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/mermaid.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
@@ -190,7 +165,7 @@ metadata:
   changelog_uri: https://github.com/bamr87/zer0-mistakes/blob/main/CHANGELOG.md
   documentation_uri: https://github.com/bamr87/zer0-mistakes#readme
   allowed_push_host: https://rubygems.org
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -205,8 +180,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3.1
-signing_key: 
+rubygems_version: 3.3.25
+signing_key:
 specification_version: 4
 summary: Jekyll theme based on bootstrap and compatible with github pages
 test_files: []

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>