jekyll-theme-zer0 0.1.8 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +128 -0
- data/README.md +195 -33
- data/_layouts/README.md +198 -0
- data/_layouts/blog.html +252 -143
- data/_layouts/collection.html +108 -27
- data/_layouts/default.html +74 -26
- data/_layouts/home.html +59 -9
- data/_layouts/index.html +47 -1
- data/_layouts/javascript.html +56 -1
- data/_layouts/journals.html +66 -3
- data/_layouts/landing.html +70 -11
- data/_layouts/root.html +61 -24
- metadata +57 -7
data/_layouts/default.html
CHANGED
@@ -1,37 +1,85 @@
|
|
1
1
|
---
|
2
2
|
layout: root
|
3
3
|
---
|
4
|
-
<!--
|
5
|
-
|
6
|
-
|
7
|
-
|
4
|
+
<!--
|
5
|
+
===================================================================
|
6
|
+
DEFAULT LAYOUT - Standard content layout with sidebars
|
7
|
+
===================================================================
|
8
|
+
|
9
|
+
File: default.html
|
10
|
+
Path: _layouts/default.html
|
11
|
+
Inherits: root.html
|
12
|
+
Purpose: Primary content layout with sidebar navigation and table of contents
|
13
|
+
|
14
|
+
Template Logic:
|
15
|
+
- Creates a responsive three-column layout using Bootstrap grid
|
16
|
+
- Left sidebar: Site navigation and content outline (collapsible on mobile)
|
17
|
+
- Center: Main content area with page title and body content
|
18
|
+
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
|
19
|
+
- Implements scroll spy for navigation highlighting
|
20
|
+
- Responsive design that stacks vertically on mobile devices
|
21
|
+
|
22
|
+
Layout Structure:
|
23
|
+
1. Container wrapper with Bootstrap responsive classes
|
24
|
+
2. Left sidebar (bd-sidebar) - Navigation and outline
|
25
|
+
3. Main content area (bd-main) with:
|
26
|
+
- Intro section (page title, metadata)
|
27
|
+
- Right sidebar (bd-toc) - Table of contents
|
28
|
+
- Content area (bd-content) - Main page content
|
29
|
+
|
30
|
+
Dependencies:
|
31
|
+
- sidebar-left.html: Site navigation and content outline
|
32
|
+
- intro.html: Page title, breadcrumbs, and metadata
|
33
|
+
- sidebar-right.html: Table of contents and page shortcuts
|
34
|
+
|
35
|
+
Bootstrap Classes Used:
|
36
|
+
- container-xxl: Extra large responsive container
|
37
|
+
- bd-gutter: Custom Bootstrap spacing
|
38
|
+
- bd-layout: Custom layout utility class
|
39
|
+
- bd-sidebar: Custom sidebar styling
|
40
|
+
- bd-main: Main content area
|
41
|
+
- bd-toc: Table of contents styling
|
42
|
+
- bd-content: Content area styling
|
43
|
+
===================================================================
|
8
44
|
-->
|
9
45
|
|
10
|
-
<!--
|
11
|
-
|
12
|
-
<!--
|
46
|
+
<!-- ================================================ -->
|
47
|
+
<!-- MAIN LAYOUT CONTAINER -->
|
48
|
+
<!-- Bootstrap responsive container with custom grid -->
|
49
|
+
<!-- ================================================ -->
|
13
50
|
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
14
51
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
52
|
+
<!-- ================================ -->
|
53
|
+
<!-- LEFT SIDEBAR - Navigation -->
|
54
|
+
<!-- ================================ -->
|
55
|
+
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
|
56
|
+
<aside class="bd-sidebar">
|
57
|
+
{% include sidebar-left.html %}
|
58
|
+
</aside>
|
20
59
|
|
21
|
-
<!--
|
22
|
-
|
60
|
+
<!-- ================================ -->
|
61
|
+
<!-- MAIN CONTENT AREA -->
|
62
|
+
<!-- ================================ -->
|
63
|
+
<!-- Primary content section with scroll spy for table of contents navigation -->
|
64
|
+
<main class="bd-main order-1" data-spy="scroll" data-bs-target="toc-content" data-offset="0">
|
23
65
|
|
24
|
-
|
25
|
-
|
66
|
+
<!-- Page introduction: title, breadcrumbs, metadata -->
|
67
|
+
{% include intro.html %}
|
26
68
|
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
69
|
+
<!-- =============================== -->
|
70
|
+
<!-- RIGHT SIDEBAR - Table of Contents -->
|
71
|
+
<!-- =============================== -->
|
72
|
+
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
|
73
|
+
<div class="bd-toc text-body-secondary">
|
74
|
+
{% include sidebar-right.html %}
|
75
|
+
</div>
|
76
|
+
|
77
|
+
<!-- =============================== -->
|
78
|
+
<!-- MAIN CONTENT BODY -->
|
79
|
+
<!-- =============================== -->
|
80
|
+
<!-- Where the actual page content is rendered -->
|
81
|
+
<div id="main-content" class="bd-content ps-lg-2">
|
82
|
+
{{ content }}
|
83
|
+
</div>
|
84
|
+
</main>
|
37
85
|
</div>
|
data/_layouts/home.html
CHANGED
@@ -1,16 +1,66 @@
|
|
1
1
|
---
|
2
2
|
layout: root
|
3
3
|
---
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
4
|
+
<!--
|
5
|
+
===================================================================
|
6
|
+
HOME LAYOUT - Homepage template with minimal structure
|
7
|
+
===================================================================
|
8
|
+
|
9
|
+
File: home.html
|
10
|
+
Path: _layouts/home.html
|
11
|
+
Inherits: root.html
|
12
|
+
Purpose: Clean, minimal layout for the site homepage
|
11
13
|
|
12
|
-
|
14
|
+
Template Logic:
|
15
|
+
- Provides a simple container for homepage content
|
16
|
+
- Conditionally displays page title if specified in frontmatter
|
17
|
+
- Includes RSS feed subscription link for blog functionality
|
18
|
+
- Bypasses the sidebar navigation system for a cleaner look
|
19
|
+
- Focuses on content presentation without distractions
|
20
|
+
|
21
|
+
Layout Structure:
|
22
|
+
1. Main home container wrapper
|
23
|
+
2. Optional page title (controlled by frontmatter)
|
24
|
+
3. Main content area (from Markdown or HTML)
|
25
|
+
4. RSS subscription link for blog updates
|
26
|
+
|
27
|
+
Usage:
|
28
|
+
- Set layout: home in page frontmatter
|
29
|
+
- Optionally include title: "Page Title" for display
|
30
|
+
- Content can include hero sections, feature highlights, etc.
|
31
|
+
|
32
|
+
Design Philosophy:
|
33
|
+
- Minimal structure allows for maximum content flexibility
|
34
|
+
- RSS link maintains blog connectivity
|
35
|
+
- Clean presentation suitable for landing pages
|
36
|
+
===================================================================
|
37
|
+
-->
|
13
38
|
|
14
|
-
|
39
|
+
<!-- ================================ -->
|
40
|
+
<!-- HOME PAGE CONTAINER -->
|
41
|
+
<!-- ================================ -->
|
42
|
+
<div class="home">
|
43
|
+
<!-- ========================== -->
|
44
|
+
<!-- OPTIONAL PAGE TITLE -->
|
45
|
+
<!-- ========================== -->
|
46
|
+
<!-- Display title only if specified in page frontmatter -->
|
47
|
+
<!-- Usage: Add 'title: "Homepage Title"' to page frontmatter -->
|
48
|
+
{%- if page.title -%}
|
49
|
+
<h1 class="page-heading">{{ page.title }}</h1>
|
50
|
+
{%- endif -%}
|
51
|
+
|
52
|
+
<!-- ========================== -->
|
53
|
+
<!-- MAIN CONTENT AREA -->
|
54
|
+
<!-- ========================== -->
|
55
|
+
<!-- Homepage content rendered from Markdown or HTML -->
|
56
|
+
<!-- Can include hero sections, feature cards, etc. -->
|
57
|
+
{{ content }}
|
15
58
|
|
59
|
+
<!-- ========================== -->
|
60
|
+
<!-- RSS SUBSCRIPTION LINK -->
|
61
|
+
<!-- ========================== -->
|
62
|
+
<!-- Provides easy access to RSS feed for blog updates -->
|
63
|
+
<p class="rss-subscribe">
|
64
|
+
subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a>
|
65
|
+
</p>
|
16
66
|
</div>
|
data/_layouts/index.html
CHANGED
@@ -1,8 +1,54 @@
|
|
1
1
|
---
|
2
2
|
layout: root
|
3
3
|
---
|
4
|
-
<!--
|
4
|
+
<!--
|
5
|
+
===================================================================
|
6
|
+
INDEX LAYOUT - Search indexing template
|
7
|
+
===================================================================
|
8
|
+
|
9
|
+
File: index.html
|
10
|
+
Path: _layouts/index.html
|
11
|
+
Inherits: root.html
|
12
|
+
Purpose: Specialized layout for search functionality and site indexing
|
13
|
+
|
14
|
+
Template Logic:
|
15
|
+
- Provides a clean container for search-related content
|
16
|
+
- Uses fluid container for full-width search interfaces
|
17
|
+
- Implements proper spacing with Bootstrap padding classes
|
18
|
+
- Bypasses sidebar navigation for focused search experience
|
19
|
+
|
20
|
+
Layout Features:
|
21
|
+
- Full-width fluid container for search components
|
22
|
+
- Responsive padding that adapts to screen size
|
23
|
+
- Clean, minimal structure to highlight search functionality
|
24
|
+
- Semantic HTML5 structure with proper search context
|
25
|
+
|
26
|
+
Usage:
|
27
|
+
- Typically used for search result pages
|
28
|
+
- Site indexing and content discovery pages
|
29
|
+
- Archive pages with search functionality
|
30
|
+
- Any page requiring full-width content presentation
|
31
|
+
|
32
|
+
Search Integration:
|
33
|
+
- Can be integrated with Algolia, Lunr.js, or other search engines
|
34
|
+
- Provides container for search forms, filters, and results
|
35
|
+
- Supports dynamic content loading and filtering
|
36
|
+
|
37
|
+
Accessibility:
|
38
|
+
- Uses semantic search-index ID for screen readers
|
39
|
+
- Provides proper container context for search tools
|
40
|
+
- Maintains consistent navigation patterns
|
41
|
+
===================================================================
|
42
|
+
-->
|
5
43
|
|
44
|
+
<!-- ================================ -->
|
45
|
+
<!-- SEARCH INDEX CONTAINER -->
|
46
|
+
<!-- ================================ -->
|
47
|
+
<!-- Full-width container optimized for search interfaces and content discovery -->
|
6
48
|
<div id="search-index" class="container-fluid pt-5 py-5">
|
49
|
+
<!-- ========================== -->
|
50
|
+
<!-- SEARCH CONTENT AREA -->
|
51
|
+
<!-- ========================== -->
|
52
|
+
<!-- Main content area for search forms, results, filters, and indexing -->
|
7
53
|
{{ content }}
|
8
54
|
</div>
|
data/_layouts/javascript.html
CHANGED
@@ -1,8 +1,63 @@
|
|
1
1
|
---
|
2
2
|
layout: default
|
3
3
|
---
|
4
|
+
<!--
|
5
|
+
===================================================================
|
6
|
+
JAVASCRIPT LAYOUT - Template for JavaScript demonstration pages
|
7
|
+
===================================================================
|
8
|
+
|
9
|
+
File: javascript.html
|
10
|
+
Path: _layouts/javascript.html
|
11
|
+
Inherits: default.html (which inherits root.html)
|
12
|
+
Purpose: Specialized layout for JavaScript tutorials and demos
|
13
|
+
|
14
|
+
Template Logic:
|
15
|
+
- Provides a simple template for JavaScript demonstration pages
|
16
|
+
- Includes basic HTML structure for interactive elements
|
17
|
+
- Demonstrates client-side scripting integration
|
18
|
+
- Can be extended for JavaScript tutorials and examples
|
19
|
+
|
20
|
+
Current Demo:
|
21
|
+
- Simple paragraph manipulation example
|
22
|
+
- Button click event handling
|
23
|
+
- DOM element selection and modification
|
24
|
+
|
25
|
+
Usage:
|
26
|
+
- JavaScript tutorials and learning content
|
27
|
+
- Interactive code demonstrations
|
28
|
+
- Client-side scripting examples
|
29
|
+
- Educational programming content
|
30
|
+
|
31
|
+
Extension Ideas:
|
32
|
+
- Add syntax highlighting for code examples
|
33
|
+
- Include interactive code playgrounds
|
34
|
+
- Implement live code editing features
|
35
|
+
- Add step-by-step JavaScript tutorials
|
36
|
+
|
37
|
+
Dependencies:
|
38
|
+
- Assumes myFunction() is defined in included JavaScript
|
39
|
+
- Requires proper JavaScript include in head or footer
|
40
|
+
- May need additional CSS for styling interactive elements
|
41
|
+
===================================================================
|
42
|
+
-->
|
4
43
|
|
44
|
+
<!-- ================================ -->
|
45
|
+
<!-- JAVASCRIPT DEMO SECTION -->
|
46
|
+
<!-- ================================ -->
|
5
47
|
<h2>Demo JavaScript in Head</h2>
|
6
48
|
|
49
|
+
<!-- ========================== -->
|
50
|
+
<!-- INTERACTIVE DEMO ELEMENTS -->
|
51
|
+
<!-- ========================== -->
|
52
|
+
<!-- Example paragraph that will be modified by JavaScript -->
|
7
53
|
<p id="demo">A Paragraph</p>
|
8
|
-
|
54
|
+
|
55
|
+
<!-- Interactive button to trigger JavaScript function -->
|
56
|
+
<!-- Note: Requires myFunction() to be defined in JavaScript includes -->
|
57
|
+
<button type="button" onclick="myFunction()">Try it</button>
|
58
|
+
|
59
|
+
<!-- ========================== -->
|
60
|
+
<!-- ADDITIONAL CONTENT AREA -->
|
61
|
+
<!-- ========================== -->
|
62
|
+
<!-- Space for additional JavaScript demos, tutorials, or explanations -->
|
63
|
+
{{ content }}
|
data/_layouts/journals.html
CHANGED
@@ -1,34 +1,92 @@
|
|
1
1
|
---
|
2
2
|
layout: default
|
3
3
|
---
|
4
|
+
<!--
|
5
|
+
===================================================================
|
6
|
+
JOURNALS LAYOUT - Blog post and article display template
|
7
|
+
===================================================================
|
8
|
+
|
9
|
+
File: journals.html
|
10
|
+
Path: _layouts/journals.html
|
11
|
+
Inherits: default.html (which inherits root.html)
|
12
|
+
Purpose: Specialized layout for blog posts, articles, and journal entries
|
13
|
+
|
14
|
+
Template Logic:
|
15
|
+
- Displays individual blog posts with proper article structure
|
16
|
+
- Conditionally shows page title only if no header overlay is set
|
17
|
+
- Implements pagination navigation between posts
|
18
|
+
- Includes comment system integration (Giscus)
|
19
|
+
- Provides proper semantic HTML5 structure for articles
|
20
|
+
|
21
|
+
Layout Structure:
|
22
|
+
1. Main article container with archive styling
|
23
|
+
2. Conditional page title display
|
24
|
+
3. Article content area
|
25
|
+
4. Previous/Next post navigation with Bootstrap pagination
|
26
|
+
5. Optional comment section
|
27
|
+
|
28
|
+
Navigation Logic:
|
29
|
+
- Previous/Next links automatically generated from Jekyll post order
|
30
|
+
- Disabled state for first/last posts in the sequence
|
31
|
+
- Bootstrap pagination styling for consistent appearance
|
32
|
+
|
33
|
+
Comment System:
|
34
|
+
- Conditionally loads Giscus comments if page.comments is true
|
35
|
+
- Allows for per-post comment control via frontmatter
|
36
|
+
|
37
|
+
Dependencies:
|
38
|
+
- giscus.html: Comment system integration
|
39
|
+
- Jekyll post collection for navigation
|
40
|
+
===================================================================
|
41
|
+
-->
|
4
42
|
|
5
|
-
<!--
|
6
|
-
|
43
|
+
<!-- ================================ -->
|
44
|
+
<!-- MAIN ARTICLE CONTAINER -->
|
45
|
+
<!-- ================================ -->
|
7
46
|
<div id="main" role="main">
|
8
47
|
<div class="archive">
|
48
|
+
<!-- ========================== -->
|
49
|
+
<!-- CONDITIONAL PAGE TITLE -->
|
50
|
+
<!-- ========================== -->
|
51
|
+
<!-- Only display title if no header overlay image/color is set -->
|
52
|
+
<!-- This prevents title duplication when using hero images -->
|
9
53
|
{% unless page.header.overlay_color or page.header.overlay_image %}
|
10
|
-
|
54
|
+
<h1 id="page-title" class="">{{ page.title }}</h1>
|
11
55
|
{% endunless %}
|
56
|
+
|
57
|
+
<!-- ========================== -->
|
58
|
+
<!-- ARTICLE CONTENT -->
|
59
|
+
<!-- ========================== -->
|
60
|
+
<!-- Main post content rendered from Markdown -->
|
12
61
|
{{ content }}
|
13
62
|
</div>
|
14
63
|
|
64
|
+
<!-- ================================ -->
|
65
|
+
<!-- POST NAVIGATION -->
|
66
|
+
<!-- ================================ -->
|
67
|
+
<!-- Previous and Next post navigation with Bootstrap pagination styling -->
|
15
68
|
<nav aria-label="Page navigation">
|
16
69
|
<ul class="pagination pagination-lg justify-content-center">
|
70
|
+
<!-- Previous Post Link -->
|
17
71
|
<li class="page-item">
|
18
72
|
{% if page.previous %}
|
19
73
|
<a class="page-link" href="{{ page.previous.url | prepend: site.baseurl }}">
|
20
74
|
Previous: {{ page.previous.title }}
|
21
75
|
</a>
|
22
76
|
{% else %}
|
77
|
+
<!-- Disabled state when no previous post exists -->
|
23
78
|
<a class="page-link" href="#" aria-disabled="true">Previous</a>
|
24
79
|
{% endif %}
|
25
80
|
</li>
|
81
|
+
|
82
|
+
<!-- Next Post Link -->
|
26
83
|
<li class="page-item">
|
27
84
|
{% if page.next %}
|
28
85
|
<a class="page-link" href="{{ page.next.url | prepend: site.baseurl }}">
|
29
86
|
Next: {{ page.next.title }}
|
30
87
|
</a>
|
31
88
|
{% else %}
|
89
|
+
<!-- Disabled state when no next post exists -->
|
32
90
|
<a class="page-link" href="#" aria-disabled="true">Next</a>
|
33
91
|
{% endif %}
|
34
92
|
</li>
|
@@ -36,6 +94,11 @@ layout: default
|
|
36
94
|
</nav>
|
37
95
|
</div>
|
38
96
|
|
97
|
+
<!-- ================================ -->
|
98
|
+
<!-- COMMENT SYSTEM -->
|
99
|
+
<!-- ================================ -->
|
100
|
+
<!-- Conditionally load Giscus comments if enabled in page frontmatter -->
|
101
|
+
<!-- Usage: Set 'comments: true' in post frontmatter to enable -->
|
39
102
|
{% if page.comments %}
|
40
103
|
{% include giscus.html %}
|
41
104
|
{% endif %}
|
data/_layouts/landing.html
CHANGED
@@ -1,18 +1,77 @@
|
|
1
1
|
---
|
2
2
|
layout: root
|
3
3
|
---
|
4
|
+
<!--
|
5
|
+
===================================================================
|
6
|
+
LANDING LAYOUT - Template for landing pages with visual effects
|
7
|
+
===================================================================
|
8
|
+
|
9
|
+
File: landing.html
|
10
|
+
Path: _layouts/landing.html
|
11
|
+
Inherits: root.html
|
12
|
+
Purpose: Specialized layout for landing pages with interactive backgrounds
|
13
|
+
|
14
|
+
Template Logic:
|
15
|
+
- Creates a full-width landing page experience
|
16
|
+
- Includes sidebar navigation in offcanvas (mobile-friendly)
|
17
|
+
- Implements particles.js for animated background effects
|
18
|
+
- Uses responsive container for content presentation
|
19
|
+
- Bypasses default sidebar layout for cleaner presentation
|
20
|
+
|
21
|
+
Layout Features:
|
22
|
+
- Offcanvas sidebar for navigation (hidden by default)
|
23
|
+
- Full-width responsive container with proper spacing
|
24
|
+
- Particles.js integration for visual appeal
|
25
|
+
- Clean, minimal structure for marketing content
|
26
|
+
|
27
|
+
Visual Effects:
|
28
|
+
- Particles.js animated background
|
29
|
+
- Interactive particle system
|
30
|
+
- Customizable through particles configuration
|
31
|
+
- Performance-optimized for modern browsers
|
32
|
+
|
33
|
+
Usage:
|
34
|
+
- Product landing pages
|
35
|
+
- Marketing campaign pages
|
36
|
+
- Portfolio showcases
|
37
|
+
- Event announcement pages
|
38
|
+
- Any page requiring visual impact
|
39
|
+
|
40
|
+
Dependencies:
|
41
|
+
- particles-source.js: Core particles.js library
|
42
|
+
- particles.js: Custom particle configuration
|
43
|
+
- sidebar-left.html: Navigation include for offcanvas
|
44
|
+
|
45
|
+
Performance Notes:
|
46
|
+
- Particles.js loads at page end for better performance
|
47
|
+
- Consider lazy loading for mobile devices
|
48
|
+
- Monitor performance impact on older devices
|
49
|
+
===================================================================
|
50
|
+
-->
|
4
51
|
|
5
|
-
|
6
|
-
|
7
|
-
|
52
|
+
<!-- ================================ -->
|
53
|
+
<!-- NAVIGATION SIDEBAR (OFFCANVAS) -->
|
54
|
+
<!-- ================================ -->
|
55
|
+
<!-- Hidden sidebar navigation that can be toggled -->
|
56
|
+
<div class="offcanvas">
|
8
57
|
{% include sidebar-left.html %}
|
9
|
-
</div>
|
10
|
-
<div class="container-xl pt-5">
|
11
|
-
|
12
|
-
{{ content }}
|
13
58
|
</div>
|
14
59
|
|
15
|
-
<!--
|
16
|
-
|
17
|
-
|
18
|
-
|
60
|
+
<!-- ================================ -->
|
61
|
+
<!-- MAIN LANDING CONTENT -->
|
62
|
+
<!-- ================================ -->
|
63
|
+
<!-- Responsive container for landing page content -->
|
64
|
+
<div class="container-xl pt-5">
|
65
|
+
<!-- ========================== -->
|
66
|
+
<!-- LANDING PAGE CONTENT -->
|
67
|
+
<!-- ========================== -->
|
68
|
+
<!-- Main content area for hero sections, features, calls-to-action -->
|
69
|
+
{{ content }}
|
70
|
+
</div>
|
71
|
+
|
72
|
+
<!-- ================================ -->
|
73
|
+
<!-- VISUAL EFFECTS AND SCRIPTS -->
|
74
|
+
<!-- ================================ -->
|
75
|
+
<!-- Particles.js for animated background effects -->
|
76
|
+
<script src="/assets/js/particles-source.js"></script>
|
77
|
+
<script src="/assets/js/particles.js"></script>
|
data/_layouts/root.html
CHANGED
@@ -1,54 +1,91 @@
|
|
1
1
|
---
|
2
2
|
---
|
3
3
|
<!--
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
4
|
+
===================================================================
|
5
|
+
ROOT LAYOUT - Base template for the Zer0 Mistakes Jekyll Theme
|
6
|
+
===================================================================
|
7
|
+
|
8
|
+
File: root.html
|
9
|
+
Path: _layouts/root.html
|
10
|
+
Purpose: Base HTML structure that all other layouts inherit from
|
11
|
+
|
12
|
+
Template Logic:
|
13
|
+
- Sets up the HTML document structure with Bootstrap 5 dark theme
|
14
|
+
- Includes essential meta tags and SEO optimization
|
15
|
+
- Loads external dependencies (CSS, JS, fonts)
|
16
|
+
- Provides the main content wrapper for child layouts
|
17
|
+
- Implements scroll spy for table of contents navigation
|
18
|
+
|
19
|
+
Dependencies:
|
20
|
+
- head.html: Meta tags, stylesheets, and external resources
|
21
|
+
- svg.html: Inline SVG symbols for icons
|
22
|
+
- header.html: Main navigation and site branding
|
23
|
+
- info-section.html: Site-wide announcements or notices
|
24
|
+
- footer.html: Site footer with links and copyright
|
25
|
+
- js-cdn.html: JavaScript dependencies and custom scripts
|
26
|
+
|
27
|
+
Theme: Zer0 Mistakes Jekyll Theme v0.1
|
28
|
+
Author: Amr Abdel-Motaleb
|
29
|
+
Copyright: 2024 - it-journey.com | @bamr87
|
30
|
+
===================================================================
|
12
31
|
-->
|
13
32
|
|
14
33
|
<!doctype html>
|
15
|
-
<html lang="{{ site.locale | slice: 0,2 | default: en }}" class="no-js" data-bs-theme="dark">
|
34
|
+
<html lang="{{ site.locale | slice: 0,2 | default: 'en' }}" class="no-js" data-bs-theme="dark">
|
16
35
|
<head>
|
17
|
-
<!--
|
36
|
+
<!-- =============================================== -->
|
37
|
+
<!-- HEAD SECTION: Meta tags, styles, and SEO setup -->
|
38
|
+
<!-- =============================================== -->
|
39
|
+
|
40
|
+
<!-- Core site metadata, stylesheets, and external dependencies -->
|
18
41
|
{% include head.html %}
|
19
42
|
|
20
|
-
<!-- Jekyll
|
43
|
+
<!-- Jekyll SEO plugin for enhanced search engine optimization -->
|
44
|
+
<!-- Documentation: https://github.com/jekyll/jekyll-seo-tag -->
|
21
45
|
{% seo %}
|
22
|
-
|
23
46
|
</head>
|
47
|
+
|
24
48
|
<body data-bs-spy="scroll" data-bs-target="#TableOfContents">
|
25
|
-
|
26
|
-
<!--
|
49
|
+
<!-- ============================================== -->
|
50
|
+
<!-- BODY SECTION: Site structure and content area -->
|
51
|
+
<!-- ============================================== -->
|
52
|
+
|
53
|
+
<!-- Inline SVG symbols for consistent iconography throughout the site -->
|
27
54
|
{% include svg.html %}
|
28
55
|
|
29
|
-
<!--
|
30
|
-
|
56
|
+
<!-- Google Tag Manager body code for analytics (if configured) -->
|
57
|
+
<!-- Note: Currently commented out - uncomment when GTM is needed -->
|
58
|
+
<!-- {% include google-tag-manager-body.html %} -->
|
31
59
|
|
32
|
-
<!--
|
60
|
+
<!-- Main site header with navigation, branding, and search functionality -->
|
33
61
|
{% include header.html %}
|
34
62
|
|
63
|
+
<!-- Site-wide information banner or announcement section -->
|
35
64
|
{% include info-section.html %}
|
36
65
|
|
37
|
-
<!--
|
66
|
+
<!-- ======================== -->
|
67
|
+
<!-- MAIN CONTENT AREA -->
|
68
|
+
<!-- ======================== -->
|
69
|
+
<!-- This is where child layouts inject their specific content -->
|
38
70
|
<div>
|
39
71
|
{{ content }}
|
40
72
|
</div>
|
41
73
|
|
42
|
-
<!--
|
74
|
+
<!-- ======================== -->
|
75
|
+
<!-- FOOTER AND SCRIPTS -->
|
76
|
+
<!-- ======================== -->
|
77
|
+
|
78
|
+
<!-- Site footer with links, copyright, and additional navigation -->
|
43
79
|
{%- include footer.html -%}
|
44
80
|
|
45
|
-
<!--
|
81
|
+
<!-- JavaScript dependencies and custom scripts -->
|
46
82
|
<div>
|
47
|
-
<!-- Search
|
48
|
-
<!--
|
83
|
+
<!-- Search functionality (Algolia or similar) -->
|
84
|
+
<!-- Note: Currently commented out - uncomment when search is implemented -->
|
85
|
+
<!-- {% include algolia.html %} -->
|
49
86
|
|
50
|
-
<!--
|
87
|
+
<!-- External JavaScript libraries and custom scripts -->
|
51
88
|
{% include js-cdn.html %}
|
52
89
|
</div>
|
53
90
|
</body>
|
54
|
-
|
91
|
+
</html>
|