jekyll-theme-zer0 0.1.7 → 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 +198 -31
- data/_includes/info-section.html +22 -20
- data/_includes/intro.html +24 -4
- data/_layouts/README.md +198 -0
- data/_layouts/blog.html +251 -124
- 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
- data/assets/images/zer0-mistakes-wizard.png +0 -0
- metadata +58 -7
data/_layouts/README.md
ADDED
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
# Layout Files Documentation
|
|
2
|
+
|
|
3
|
+
This directory contains the Jekyll layout templates for the Zer0-Pages theme.
|
|
4
|
+
Each layout has been organized with comprehensive comments explaining the template logic,
|
|
5
|
+
structure, and usage patterns.
|
|
6
|
+
|
|
7
|
+
## Layout Hierarchy
|
|
8
|
+
|
|
9
|
+
```text
|
|
10
|
+
root.html (base template)
|
|
11
|
+
├── default.html (sidebar layout)
|
|
12
|
+
│ ├── journals.html (blog posts)
|
|
13
|
+
│ ├── collection.html (collection pages)
|
|
14
|
+
│ └── javascript.html (JavaScript demos)
|
|
15
|
+
├── home.html (homepage)
|
|
16
|
+
├── blog.html (blog homepage)
|
|
17
|
+
├── landing.html (landing pages)
|
|
18
|
+
└── index.html (search pages)
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Layout Files Overview
|
|
22
|
+
|
|
23
|
+
### 🏗️ Core Layouts
|
|
24
|
+
|
|
25
|
+
#### `root.html`
|
|
26
|
+
|
|
27
|
+
- **Purpose**: Base HTML structure for all pages
|
|
28
|
+
- **Features**: Bootstrap 5 dark theme, SEO optimization, scroll spy
|
|
29
|
+
- **Dependencies**: head.html, header.html, footer.html, js-cdn.html
|
|
30
|
+
- **Usage**: Inherited by all other layouts
|
|
31
|
+
|
|
32
|
+
#### `default.html`
|
|
33
|
+
|
|
34
|
+
- **Purpose**: Standard content layout with sidebars
|
|
35
|
+
- **Features**: Three-column responsive layout, navigation, table of contents
|
|
36
|
+
- **Dependencies**: sidebar-left.html, intro.html, sidebar-right.html
|
|
37
|
+
- **Usage**: Documentation pages, standard content
|
|
38
|
+
|
|
39
|
+
### 📝 Content Layouts
|
|
40
|
+
|
|
41
|
+
#### `journals.html`
|
|
42
|
+
|
|
43
|
+
- **Purpose**: Blog post and article display
|
|
44
|
+
- **Features**: Article structure, post navigation, comment system
|
|
45
|
+
- **Dependencies**: giscus.html for comments
|
|
46
|
+
- **Usage**: Individual blog posts and articles
|
|
47
|
+
|
|
48
|
+
#### `collection.html`
|
|
49
|
+
|
|
50
|
+
- **Purpose**: Collection listing with card grid
|
|
51
|
+
- **Features**: Responsive cards, sorting, preview images
|
|
52
|
+
- **Dependencies**: Bootstrap card components
|
|
53
|
+
- **Usage**: Portfolio, projects, grouped content
|
|
54
|
+
|
|
55
|
+
#### `blog.html`
|
|
56
|
+
|
|
57
|
+
- **Purpose**: Magazine-style blog homepage
|
|
58
|
+
- **Features**: Featured posts, sidebar, responsive design
|
|
59
|
+
- **Dependencies**: sidebar-categories.html, navigation data
|
|
60
|
+
- **Usage**: Blog index and homepage
|
|
61
|
+
|
|
62
|
+
### 🎯 Specialized Layouts
|
|
63
|
+
|
|
64
|
+
#### `home.html`
|
|
65
|
+
|
|
66
|
+
- **Purpose**: Clean homepage template
|
|
67
|
+
- **Features**: Minimal structure, RSS feed link
|
|
68
|
+
- **Dependencies**: None
|
|
69
|
+
- **Usage**: Site homepage, landing content
|
|
70
|
+
|
|
71
|
+
#### `landing.html`
|
|
72
|
+
|
|
73
|
+
- **Purpose**: Marketing pages with visual effects
|
|
74
|
+
- **Features**: Particles.js background, offcanvas navigation
|
|
75
|
+
- **Dependencies**: particles.js, sidebar-left.html
|
|
76
|
+
- **Usage**: Product pages, campaigns, portfolios
|
|
77
|
+
|
|
78
|
+
#### `index.html`
|
|
79
|
+
|
|
80
|
+
- **Purpose**: Search and indexing pages
|
|
81
|
+
- **Features**: Full-width container, search optimization
|
|
82
|
+
- **Dependencies**: Search engine integration
|
|
83
|
+
- **Usage**: Search results, site indexes
|
|
84
|
+
|
|
85
|
+
#### `javascript.html`
|
|
86
|
+
|
|
87
|
+
- **Purpose**: JavaScript demonstration pages
|
|
88
|
+
- **Features**: Interactive elements, code examples
|
|
89
|
+
- **Dependencies**: Custom JavaScript functions
|
|
90
|
+
- **Usage**: Tutorials, interactive demos
|
|
91
|
+
|
|
92
|
+
## Comment Organization Standards
|
|
93
|
+
|
|
94
|
+
Each layout file now includes:
|
|
95
|
+
|
|
96
|
+
### 1. Header Documentation Block
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<!--
|
|
100
|
+
===================================================================
|
|
101
|
+
LAYOUT NAME - Brief description
|
|
102
|
+
===================================================================
|
|
103
|
+
|
|
104
|
+
File: filename.html
|
|
105
|
+
Path: _layouts/filename.html
|
|
106
|
+
Inherits: parent-layout.html
|
|
107
|
+
Purpose: Detailed purpose explanation
|
|
108
|
+
|
|
109
|
+
Template Logic:
|
|
110
|
+
- Key functionality points
|
|
111
|
+
- Responsive behavior
|
|
112
|
+
- Content organization
|
|
113
|
+
|
|
114
|
+
Dependencies:
|
|
115
|
+
- Include files used
|
|
116
|
+
- External libraries
|
|
117
|
+
- Required data/configuration
|
|
118
|
+
===================================================================
|
|
119
|
+
-->
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### 2. Section Comments
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<!-- ================================ -->
|
|
126
|
+
<!-- SECTION NAME -->
|
|
127
|
+
<!-- ================================ -->
|
|
128
|
+
<!-- Description of what this section does -->
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### 3. Subsection Comments
|
|
132
|
+
|
|
133
|
+
```html
|
|
134
|
+
<!-- ========================== -->
|
|
135
|
+
<!-- SUBSECTION NAME -->
|
|
136
|
+
<!-- ========================== -->
|
|
137
|
+
<!-- Specific functionality notes -->
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### 4. Inline Comments
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<!-- Explain complex logic or conditional statements -->
|
|
144
|
+
{% if condition %}
|
|
145
|
+
<!-- Why this condition exists and what it affects -->
|
|
146
|
+
{% endif %}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Template Logic Patterns
|
|
150
|
+
|
|
151
|
+
### Conditional Content Display
|
|
152
|
+
|
|
153
|
+
- Use descriptive comments for complex conditionals
|
|
154
|
+
- Explain the business logic behind template decisions
|
|
155
|
+
- Document fallback behaviors
|
|
156
|
+
|
|
157
|
+
### Loop Processing
|
|
158
|
+
|
|
159
|
+
- Explain data source and filtering logic
|
|
160
|
+
- Document sorting and limiting operations
|
|
161
|
+
- Note performance considerations
|
|
162
|
+
|
|
163
|
+
### Include Integration
|
|
164
|
+
|
|
165
|
+
- Document which includes are used and why
|
|
166
|
+
- Explain parameter passing to includes
|
|
167
|
+
- Note dependencies between includes
|
|
168
|
+
|
|
169
|
+
### Bootstrap Integration
|
|
170
|
+
|
|
171
|
+
- Document responsive behavior
|
|
172
|
+
- Explain grid system usage
|
|
173
|
+
- Note accessibility considerations
|
|
174
|
+
|
|
175
|
+
## Best Practices
|
|
176
|
+
|
|
177
|
+
1. **Documentation First**: Every layout should be self-documenting
|
|
178
|
+
2. **Consistent Structure**: Follow the established comment hierarchy
|
|
179
|
+
3. **Explain Intent**: Don't just describe what code does, explain why
|
|
180
|
+
4. **Update Comments**: Keep documentation current with code changes
|
|
181
|
+
5. **Template Logic**: Explain complex Liquid template operations
|
|
182
|
+
6. **Dependencies**: Document all external dependencies and includes
|
|
183
|
+
7. **Responsive Design**: Note mobile/desktop behavior differences
|
|
184
|
+
8. **Performance**: Comment on loading order and optimization
|
|
185
|
+
|
|
186
|
+
## Maintenance Guidelines
|
|
187
|
+
|
|
188
|
+
- Update comments when modifying layouts
|
|
189
|
+
- Test responsive behavior across devices
|
|
190
|
+
- Validate HTML5 semantic structure
|
|
191
|
+
- Check accessibility compliance
|
|
192
|
+
- Monitor Bootstrap version compatibility
|
|
193
|
+
- Update documentation for new features
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
*These layouts follow the Zer0-Mistakes theme standards for maintainable,
|
|
198
|
+
documented, and responsive Jekyll templates.*
|
data/_layouts/blog.html
CHANGED
|
@@ -2,149 +2,276 @@
|
|
|
2
2
|
layout: root
|
|
3
3
|
source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
|
|
4
4
|
---
|
|
5
|
+
<!--
|
|
6
|
+
===================================================================
|
|
7
|
+
BLOG LAYOUT - Modern blog homepage with featured content
|
|
8
|
+
===================================================================
|
|
9
|
+
|
|
10
|
+
File: blog.html
|
|
11
|
+
Path: _layouts/blog.html
|
|
12
|
+
Inherits: root.html
|
|
13
|
+
Purpose: Full-featured blog homepage with content organization
|
|
14
|
+
Source: Adapted from Bootstrap 5.3 blog example
|
|
15
|
+
|
|
16
|
+
Template Logic:
|
|
17
|
+
- Creates a magazine-style blog layout with multiple content sections
|
|
18
|
+
- Features breaking news/highlighted posts prominently
|
|
19
|
+
- Displays featured posts in a card grid layout
|
|
20
|
+
- Includes sidebar with recent posts, archives, and categories
|
|
21
|
+
- Implements responsive design for mobile and desktop
|
|
22
|
+
- Provides navigation between posts with pagination
|
|
23
|
+
|
|
24
|
+
Layout Structure:
|
|
25
|
+
1. Blog Header: Subscribe, logo/title, search, and sign-up
|
|
26
|
+
2. Navigation Bar: Dynamic navigation from site data
|
|
27
|
+
3. Hero Section: Most recent breaking news post
|
|
28
|
+
4. Featured Posts: Grid of featured content
|
|
29
|
+
5. Main Content: Blog content with pagination
|
|
30
|
+
6. Sidebar: Recent posts, archives, categories, external links
|
|
31
|
+
|
|
32
|
+
Content Logic:
|
|
33
|
+
- Breaking news: Posts with "breaking" category
|
|
34
|
+
- Featured posts: Posts with "featured: true" in frontmatter
|
|
35
|
+
- Recent posts: Latest 3 posts for sidebar
|
|
36
|
+
- Navigation: Dynamic from site.data.navigation.posts
|
|
37
|
+
|
|
38
|
+
Responsive Features:
|
|
39
|
+
- Mobile-first responsive grid system
|
|
40
|
+
- Image optimization with responsive classes
|
|
41
|
+
- Collapsible navigation and mobile-friendly layout
|
|
42
|
+
===================================================================
|
|
43
|
+
-->
|
|
5
44
|
|
|
45
|
+
<!-- ================================ -->
|
|
46
|
+
<!-- BLOG HEADER SECTION -->
|
|
47
|
+
<!-- ================================ -->
|
|
6
48
|
<div class="container">
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
49
|
+
<header class="border-bottom lh-1 py-3">
|
|
50
|
+
<div class="row flex-nowrap justify-content-between align-items-center">
|
|
51
|
+
<!-- Subscription Link -->
|
|
52
|
+
<div class="col-4 pt-1">
|
|
53
|
+
<a class="link-secondary" href="#">Subscribe</a>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<!-- Blog Title/Logo -->
|
|
57
|
+
<div class="col-4 text-center">
|
|
58
|
+
<a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">
|
|
59
|
+
{{ page.title }}
|
|
60
|
+
</a>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<!-- Search and Sign-up -->
|
|
64
|
+
<div class="col-4 d-flex justify-content-end align-items-center">
|
|
65
|
+
<!-- Search Icon -->
|
|
66
|
+
<a class="link-secondary" href="#" aria-label="Search">
|
|
67
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24">
|
|
68
|
+
<title>Search</title>
|
|
69
|
+
<circle cx="10.5" cy="10.5" r="7.5"/>
|
|
70
|
+
<path d="M21 21l-5.2-5.2"/>
|
|
71
|
+
</svg>
|
|
72
|
+
</a>
|
|
73
|
+
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</header>
|
|
23
77
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
78
|
+
<!-- ================================ -->
|
|
79
|
+
<!-- NAVIGATION BAR -->
|
|
80
|
+
<!-- ================================ -->
|
|
81
|
+
<!-- Dynamic navigation from site data configuration -->
|
|
82
|
+
<div class="nav-scroller py-1 mb-3 border-bottom">
|
|
83
|
+
<nav class="nav nav-underline justify-content-between">
|
|
84
|
+
{% for item in site.data.navigation.posts %}
|
|
85
|
+
<a class="nav-item nav-link link-body-emphasis" href="{{ item.url }}">
|
|
86
|
+
{{ item.title }}
|
|
87
|
+
</a>
|
|
88
|
+
{% endfor %}
|
|
89
|
+
</nav>
|
|
90
|
+
</div>
|
|
31
91
|
</div>
|
|
32
92
|
|
|
93
|
+
<!-- ================================ -->
|
|
94
|
+
<!-- MAIN CONTENT CONTAINER -->
|
|
95
|
+
<!-- ================================ -->
|
|
33
96
|
<main class="container">
|
|
97
|
+
|
|
98
|
+
<!-- ================================ -->
|
|
99
|
+
<!-- HERO SECTION - Breaking News -->
|
|
100
|
+
<!-- ================================ -->
|
|
101
|
+
<!-- Featured highlight of most recent breaking news post -->
|
|
102
|
+
{% assign breaking_news_posts = site.posts | where: "categories", "breaking" %}
|
|
103
|
+
{% assign most_recent_post = breaking_news_posts | first %}
|
|
34
104
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
{% for post in featured_posts %}
|
|
54
|
-
<div class="col-md-6">
|
|
55
|
-
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
56
|
-
<div class="col p-4 d-flex flex-column position-static">
|
|
57
|
-
<strong class="d-inline-block mb-2 text-primary-emphasis">{{ post.categories[0] }}</strong>
|
|
58
|
-
<h3 class="mb-0">{{ post.title }}</h3>
|
|
59
|
-
<div class="mb-1 text-body-secondary">{{ post.date | date: "%b %d" }}</div>
|
|
60
|
-
<p class="card-text mb-auto">{{ post.excerpt | strip_html | truncate: 200 }}</p>
|
|
61
|
-
<a href="{{ site.baseurl }}{{ post.url }}" class="icon-link gap-1 icon-link-hover stretched-link">
|
|
62
|
-
Continue reading
|
|
63
|
-
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
|
64
|
-
</a>
|
|
65
|
-
</div>
|
|
66
|
-
<div class="col-md-6 d-none d-lg-block">
|
|
67
|
-
<img src="{{ site.baseurl }}{{ post.preview }}" alt="Post preview image" class="img-fluid">
|
|
68
|
-
</div>
|
|
105
|
+
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
|
|
106
|
+
<div class="row">
|
|
107
|
+
<!-- Breaking News Content -->
|
|
108
|
+
<div class="col-lg-6">
|
|
109
|
+
<h1 class="display-4 fst-italic">{{ most_recent_post.title }}</h1>
|
|
110
|
+
<p class="lead my-3">{{ most_recent_post.excerpt }}</p>
|
|
111
|
+
<p class="lead mb-0">
|
|
112
|
+
<a href="{{ site.baseurl }}{{ most_recent_post.url }}" class="text-body-emphasis fw-bold">
|
|
113
|
+
Continue reading...
|
|
114
|
+
</a>
|
|
115
|
+
</p>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<!-- Breaking News Image -->
|
|
119
|
+
<div class="col-lg-6">
|
|
120
|
+
<img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ most_recent_post.preview }}"
|
|
121
|
+
alt="Preview image" class="img-fluid">
|
|
122
|
+
</div>
|
|
69
123
|
</div>
|
|
70
|
-
|
|
71
|
-
{% endfor %}
|
|
72
|
-
</div>
|
|
73
|
-
|
|
74
|
-
<div class="row g-5">
|
|
75
|
-
<div class="col-md-8">
|
|
76
|
-
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
|
77
|
-
From the Firehose
|
|
78
|
-
</h3>
|
|
124
|
+
</div>
|
|
79
125
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
126
|
+
<!-- ================================ -->
|
|
127
|
+
<!-- FEATURED POSTS GRID -->
|
|
128
|
+
<!-- ================================ -->
|
|
129
|
+
<!-- Two-column grid of featured posts marked with 'featured: true' -->
|
|
130
|
+
<div class="row mb-2">
|
|
131
|
+
{% assign featured_posts = site.posts | where: "featured", true %}
|
|
132
|
+
{% for post in featured_posts %}
|
|
133
|
+
<div class="col-md-6">
|
|
134
|
+
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
|
135
|
+
<!-- Post Content -->
|
|
136
|
+
<div class="col p-4 d-flex flex-column position-static">
|
|
137
|
+
<strong class="d-inline-block mb-2 text-primary-emphasis">
|
|
138
|
+
{{ post.categories[0] }}
|
|
139
|
+
</strong>
|
|
140
|
+
<h3 class="mb-0">{{ post.title }}</h3>
|
|
141
|
+
<div class="mb-1 text-body-secondary">{{ post.date | date: "%b %d" }}</div>
|
|
142
|
+
<p class="card-text mb-auto">{{ post.excerpt | strip_html | truncate: 200 }}</p>
|
|
143
|
+
<a href="{{ site.baseurl }}{{ post.url }}" class="icon-link gap-1 icon-link-hover stretched-link">
|
|
144
|
+
Continue reading
|
|
145
|
+
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
|
146
|
+
</a>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<!-- Post Preview Image -->
|
|
150
|
+
<div class="col-md-6 d-none d-lg-block">
|
|
151
|
+
<img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ post.preview }}"
|
|
152
|
+
alt="Post preview image" class="img-fluid">
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
{% endfor %}
|
|
157
|
+
</div>
|
|
83
158
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
159
|
+
<!-- ================================ -->
|
|
160
|
+
<!-- MAIN CONTENT AND SIDEBAR -->
|
|
161
|
+
<!-- ================================ -->
|
|
162
|
+
<div class="row g-5">
|
|
163
|
+
<!-- ========================== -->
|
|
164
|
+
<!-- MAIN CONTENT COLUMN -->
|
|
165
|
+
<!-- ========================== -->
|
|
166
|
+
<div class="col-md-8">
|
|
167
|
+
<h3 class="pb-4 mb-4 fst-italic border-bottom">From the Firehose</h3>
|
|
88
168
|
|
|
89
|
-
|
|
169
|
+
<!-- Blog Post Content -->
|
|
170
|
+
<article class="blog-post">
|
|
171
|
+
{{ content }}
|
|
172
|
+
</article>
|
|
90
173
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
174
|
+
<!-- ========================== -->
|
|
175
|
+
<!-- POST PAGINATION -->
|
|
176
|
+
<!-- ========================== -->
|
|
177
|
+
<!-- Previous and Next page navigation -->
|
|
178
|
+
<nav aria-label="Page navigation">
|
|
179
|
+
<ul class="pagination pagination-lg justify-content-center">
|
|
180
|
+
<li class="page-item">
|
|
181
|
+
{% if page.previous %}
|
|
182
|
+
<a class="page-link" href="{{ page.previous.url | prepend: site.baseurl }}">
|
|
183
|
+
Previous: {{ page.previous.title }}
|
|
184
|
+
</a>
|
|
185
|
+
{% else %}
|
|
186
|
+
<a class="page-link" href="#" aria-disabled="true">Previous</a>
|
|
187
|
+
{% endif %}
|
|
188
|
+
</li>
|
|
189
|
+
<li class="page-item">
|
|
190
|
+
{% if page.next %}
|
|
191
|
+
<a class="page-link" href="{{ page.next.url | prepend: site.baseurl }}">
|
|
192
|
+
Next: {{ page.next.title }}
|
|
193
|
+
</a>
|
|
194
|
+
{% else %}
|
|
195
|
+
<a class="page-link" href="#" aria-disabled="true">Next</a>
|
|
196
|
+
{% endif %}
|
|
197
|
+
</li>
|
|
198
|
+
</ul>
|
|
199
|
+
</nav>
|
|
96
200
|
</div>
|
|
97
201
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
</ul>
|
|
113
|
-
</div>
|
|
202
|
+
<!-- ========================== -->
|
|
203
|
+
<!-- SIDEBAR COLUMN -->
|
|
204
|
+
<!-- ========================== -->
|
|
205
|
+
<div class="col-md-4">
|
|
206
|
+
<div class="position-sticky" style="top: 2rem;">
|
|
207
|
+
|
|
208
|
+
<!-- About Section -->
|
|
209
|
+
<div class="p-4 mb-3 bg-body-tertiary rounded">
|
|
210
|
+
<h4 class="fst-italic">About</h4>
|
|
211
|
+
<p class="mb-0">
|
|
212
|
+
Customize this section to tell your visitors a little bit about your publication,
|
|
213
|
+
writers, content, or something else entirely. Totally up to you.
|
|
214
|
+
</p>
|
|
215
|
+
</div>
|
|
114
216
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
217
|
+
<!-- Recent Posts Section -->
|
|
218
|
+
<div>
|
|
219
|
+
<h4 class="fst-italic">Recent posts</h4>
|
|
220
|
+
<ul class="list-unstyled">
|
|
221
|
+
{% for post in site.posts limit:3 %}
|
|
222
|
+
<li>
|
|
223
|
+
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
|
224
|
+
href="{{site.baseurl}}/{{ post.url }}">
|
|
225
|
+
<img class="bd-placeholder-img"
|
|
226
|
+
src="{{ site.baseurl }}/{{ site.public_folder }}/{{ page.preview | default: site.og_image }}"
|
|
227
|
+
width="50%" alt="Preview image">
|
|
228
|
+
<div class="col-lg-8">
|
|
229
|
+
<h6 class="mb-0">{{ post.title }}</h6>
|
|
230
|
+
<small class="text-body-secondary">{{ post.date | date: "%B %d, %Y" }}</small>
|
|
231
|
+
</div>
|
|
232
|
+
</a>
|
|
233
|
+
</li>
|
|
234
|
+
{% endfor %}
|
|
235
|
+
</ul>
|
|
236
|
+
</div>
|
|
132
237
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
238
|
+
<!-- Archives Section -->
|
|
239
|
+
<!-- Note: This section uses static links - consider making dynamic -->
|
|
240
|
+
<div class="p-4">
|
|
241
|
+
<h4 class="fst-italic">Archives</h4>
|
|
242
|
+
<ol class="list-unstyled mb-0">
|
|
243
|
+
<li><a href="#">March 2021</a></li>
|
|
244
|
+
<li><a href="#">February 2021</a></li>
|
|
245
|
+
<li><a href="#">January 2021</a></li>
|
|
246
|
+
<li><a href="#">December 2020</a></li>
|
|
247
|
+
<li><a href="#">November 2020</a></li>
|
|
248
|
+
<li><a href="#">October 2020</a></li>
|
|
249
|
+
<li><a href="#">September 2020</a></li>
|
|
250
|
+
<li><a href="#">August 2020</a></li>
|
|
251
|
+
<li><a href="#">July 2020</a></li>
|
|
252
|
+
<li><a href="#">June 2020</a></li>
|
|
253
|
+
<li><a href="#">May 2020</a></li>
|
|
254
|
+
<li><a href="#">April 2020</a></li>
|
|
255
|
+
</ol>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<!-- Categories Section -->
|
|
259
|
+
<div class="p-4">
|
|
260
|
+
{% include sidebar-categories.html %}
|
|
261
|
+
</div>
|
|
136
262
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
263
|
+
<!-- External Links Section -->
|
|
264
|
+
<div class="p-4">
|
|
265
|
+
<h4 class="fst-italic">Elsewhere</h4>
|
|
266
|
+
<ol class="list-unstyled">
|
|
267
|
+
<li><a href="#">GitHub</a></li>
|
|
268
|
+
<li><a href="#">Twitter</a></li>
|
|
269
|
+
<li><a href="#">Facebook</a></li>
|
|
270
|
+
</ol>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
144
273
|
</div>
|
|
145
|
-
</div>
|
|
146
274
|
</div>
|
|
147
|
-
</div>
|
|
148
275
|
|
|
149
276
|
</main>
|
|
150
277
|
|