jekyll-theme-zer0 0.10.0 → 0.10.4

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.
Files changed (43) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +161 -0
  3. data/README.md +495 -720
  4. data/_includes/components/cookie-consent.html +2 -2
  5. data/_includes/components/mermaid.html +98 -9
  6. data/_includes/components/post-card.html +2 -2
  7. data/_includes/content/intro.html +13 -1
  8. data/_includes/content/sitemap.html +4 -9
  9. data/_includes/core/header.html +1 -1
  10. data/_includes/stats/stats-categories.html +5 -5
  11. data/_includes/stats/stats-header.html +7 -7
  12. data/_includes/stats/stats-metrics.html +8 -8
  13. data/_includes/stats/stats-no-data.html +9 -9
  14. data/_includes/stats/stats-overview.html +4 -4
  15. data/_includes/stats/stats-tags.html +6 -6
  16. data/_layouts/blog.html +1 -1
  17. data/_layouts/category.html +16 -6
  18. data/_layouts/collection.html +8 -3
  19. data/_layouts/journals.html +8 -3
  20. data/_layouts/landing.html +1 -1
  21. data/_layouts/sitemap-collection.html +3 -26
  22. data/_sass/custom.scss +20 -12
  23. data/assets/images/previews/10-ai-tools-that-will-transform-your-productivity-.png +0 -0
  24. data/assets/images/previews/business.png +0 -0
  25. data/assets/images/previews/css-grid-mastery-build-any-layout-you-can-imagine.png +0 -0
  26. data/assets/images/previews/development.png +0 -0
  27. data/assets/images/previews/github-setup-deployment.png +0 -0
  28. data/assets/images/previews/jekyll-setup.png +0 -0
  29. data/assets/images/previews/machine-setup.png +0 -0
  30. data/assets/images/previews/published-documentation-library.png +0 -0
  31. data/assets/images/previews/quantum-computing-explained-from-qubits-to-quantum.png +0 -0
  32. data/assets/images/previews/science.png +0 -0
  33. data/assets/images/previews/technology.png +0 -0
  34. data/assets/images/previews/the-complete-guide-to-startup-funding-in-2025.png +0 -0
  35. data/assets/images/previews/the-remote-work-revolution-how-global-teams-are-re.png +0 -0
  36. data/assets/images/previews/tutorial.png +0 -0
  37. data/assets/images/previews/world-news.png +0 -0
  38. data/assets/images/previews/zer0-mistakes-news-network-building-dynamic-news-s.png +0 -0
  39. data/assets/images/previews/zer0-mistakes-quick-start-guide.png +0 -0
  40. data/assets/js/auto-hide-nav.js +79 -16
  41. data/scripts/lib/preview_generator.py +37 -22
  42. data/scripts/test-mermaid.sh +51 -11
  43. metadata +18 -1
@@ -151,8 +151,8 @@ Configuration: Uses site.posthog settings from _config.yml
151
151
  </p>
152
152
  </div>
153
153
 
154
- <div class="bg-light p-3 rounded">
155
- <h6 class="text-dark mb-2">
154
+ <div class="bg-body p-3 rounded">
155
+ <h6 class="text-body mb-2">
156
156
  <i class="bi bi-info-circle me-2"></i>
157
157
  Your Privacy Rights
158
158
  </h6>
@@ -1,21 +1,39 @@
1
1
  <!--
2
2
  ===================================================================
3
- MERMAID DIAGRAM INTEGRATION
3
+ MERMAID DIAGRAM INTEGRATION (v2.1 - GitHub Pages Compatible)
4
4
  ===================================================================
5
5
 
6
6
  File: mermaid.html
7
7
  Path: _includes/components/mermaid.html
8
8
  Purpose: Load and initialize Mermaid.js for diagram rendering
9
9
 
10
- Usage:
10
+ Usage (Two syntaxes supported):
11
+
12
+ 1. Native Markdown Code Blocks (Recommended):
13
+ ```mermaid
14
+ graph TD
15
+ A[Start] -> B[End]
16
+ ```
17
+
18
+ 2. HTML Div Syntax:
19
+ <div class="mermaid">
20
+ graph TD
21
+ A[Start] -- > B[End]
22
+ </div>
23
+
24
+ Requirements:
11
25
  - Set 'mermaid: true' in page front matter
12
- - Use <div class="mermaid">...</div> syntax in content
13
26
  - Supports all Mermaid diagram types (flowcharts, sequence, gantt, etc.)
14
27
 
15
28
  Configuration:
16
- - Latest stable version via CDN
29
+ - Mermaid v10 via CDN (latest stable)
17
30
  - Forest theme for dark mode compatibility
18
- - Initialized on document ready
31
+ - Client-side code block conversion for GitHub Pages compatibility
32
+
33
+ GitHub Pages Compatibility:
34
+ - No custom plugins required (jekyll-mermaid is optional)
35
+ - All processing done client-side via JavaScript
36
+ - Works with remote_theme on GitHub Pages
19
37
 
20
38
  Documentation:
21
39
  - https://mermaid.js.org/
@@ -29,9 +47,51 @@
29
47
  <!-- Initialize Mermaid with custom configuration -->
30
48
  <script>
31
49
  document.addEventListener('DOMContentLoaded', function() {
50
+ // ============================================================
51
+ // Step 1: Convert native markdown code blocks to mermaid divs
52
+ // This enables ```mermaid syntax to work with GitHub Pages
53
+ // ============================================================
54
+
55
+ // Find all code blocks with language-mermaid class (from ```mermaid)
56
+ var codeBlocks = document.querySelectorAll('pre > code.language-mermaid, code.language-mermaid');
57
+
58
+ codeBlocks.forEach(function(codeBlock) {
59
+ // Get the mermaid content (decode HTML entities)
60
+ var content = codeBlock.textContent || codeBlock.innerText;
61
+
62
+ // Create a new mermaid div
63
+ var mermaidDiv = document.createElement('div');
64
+ mermaidDiv.className = 'mermaid';
65
+ mermaidDiv.textContent = content;
66
+
67
+ // Replace the pre/code block with the mermaid div
68
+ var preElement = codeBlock.closest('pre');
69
+ if (preElement && preElement.parentNode) {
70
+ preElement.parentNode.replaceChild(mermaidDiv, preElement);
71
+ } else if (codeBlock.parentNode) {
72
+ codeBlock.parentNode.replaceChild(mermaidDiv, codeBlock);
73
+ }
74
+ });
75
+
76
+ // Also handle pre elements that might have data-language="mermaid"
77
+ var preBlocks = document.querySelectorAll('pre[data-language="mermaid"]');
78
+ preBlocks.forEach(function(preBlock) {
79
+ var content = preBlock.textContent || preBlock.innerText;
80
+ var mermaidDiv = document.createElement('div');
81
+ mermaidDiv.className = 'mermaid';
82
+ mermaidDiv.textContent = content;
83
+ if (preBlock.parentNode) {
84
+ preBlock.parentNode.replaceChild(mermaidDiv, preBlock);
85
+ }
86
+ });
87
+
88
+ // ============================================================
89
+ // Step 2: Initialize Mermaid with custom configuration
90
+ // ============================================================
91
+
32
92
  mermaid.initialize({
33
- startOnLoad: true,
34
- theme: 'forest', // Options: default, forest, dark, neutral, base
93
+ startOnLoad: false, // We'll manually run after conversion
94
+ theme: 'forest', // Options: default, forest, dark, neutral, base
35
95
  themeVariables: {
36
96
  primaryColor: '#007bff',
37
97
  primaryTextColor: '#fff',
@@ -69,9 +129,20 @@
69
129
  fontSize: 11,
70
130
  numberSectionStyles: 4,
71
131
  axisFormat: '%Y-%m-%d'
72
- }
132
+ },
133
+ securityLevel: 'loose' // Required for some advanced features
134
+ });
135
+
136
+ // ============================================================
137
+ // Step 3: Render all mermaid diagrams
138
+ // ============================================================
139
+
140
+ // Run mermaid to render all .mermaid divs
141
+ mermaid.run().then(function() {
142
+ console.log('Mermaid.js: All diagrams rendered successfully');
143
+ }).catch(function(error) {
144
+ console.warn('Mermaid.js: Some diagrams failed to render', error);
73
145
  });
74
- console.log('Mermaid.js initialized successfully');
75
146
  });
76
147
  </script>
77
148
 
@@ -80,10 +151,12 @@
80
151
 
81
152
  <!-- Custom CSS for Mermaid diagrams -->
82
153
  <style>
154
+ /* Mermaid container styling */
83
155
  .mermaid {
84
156
  text-align: center;
85
157
  margin: 2rem auto;
86
158
  background-color: transparent;
159
+ overflow-x: auto;
87
160
  }
88
161
 
89
162
  /* Ensure diagrams are responsive */
@@ -92,10 +165,26 @@
92
165
  height: auto;
93
166
  }
94
167
 
168
+ /* Hide code blocks before conversion (prevent flash of unstyled content) */
169
+ pre > code.language-mermaid,
170
+ code.language-mermaid {
171
+ display: block;
172
+ opacity: 0;
173
+ transition: opacity 0.2s;
174
+ }
175
+
95
176
  /* Dark mode compatibility */
96
177
  @media (prefers-color-scheme: dark) {
97
178
  .mermaid {
98
179
  filter: brightness(0.9);
99
180
  }
100
181
  }
182
+
183
+ /* Print styles */
184
+ @media print {
185
+ .mermaid svg {
186
+ max-width: 100% !important;
187
+ page-break-inside: avoid;
188
+ }
189
+ }
101
190
  </style>
@@ -163,10 +163,10 @@
163
163
  {% if include.post.tags.size > 0 %}
164
164
  <div class="mt-2">
165
165
  {% for tag in include.post.tags limit: 3 %}
166
- <span class="badge bg-light text-dark border me-1">{{ tag }}</span>
166
+ <span class="badge bg-secondary text-body border me-1">{{ tag }}</span>
167
167
  {% endfor %}
168
168
  {% if include.post.tags.size > 3 %}
169
- <span class="badge bg-light text-muted border">+{{ include.post.tags.size | minus: 3 }}</span>
169
+ <span class="badge bg-secondary text-muted border">+{{ include.post.tags.size | minus: 3 }}</span>
170
170
  {% endif %}
171
171
  </div>
172
172
  {% endif %}
@@ -15,8 +15,20 @@
15
15
 
16
16
  <!-- Intro Section -->
17
17
 
18
+ {% comment %}
19
+ Determine the preview image path. If page.preview starts with '/' or 'http',
20
+ use it directly. Otherwise, prepend the public folder path.
21
+ {% endcomment %}
22
+ {% assign preview_image = page.preview | default: site.info_banner %}
23
+ {% assign preview_first_char = preview_image | slice: 0 %}
24
+ {% if preview_image contains '://' or preview_first_char == '/' %}
25
+ {% assign preview_path = preview_image %}
26
+ {% else %}
27
+ {% assign preview_path = '/' | append: site.public_folder | append: '/' | append: preview_image %}
28
+ {% endif %}
29
+
18
30
  <div class="bd-intro pt-5 ps-lg-2 position-relative" style="
19
- background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{site.baseurl}}/{{ site.public_folder }}/{{ page.preview | default: site.info_banner }}') no-repeat center center / cover;
31
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ site.baseurl }}{{ preview_path }}') no-repeat center center / cover;
20
32
  color: #fff;">
21
33
 
22
34
  <br>
@@ -251,7 +251,7 @@
251
251
  <span class="badge bg-secondary me-1">{{ category }}</span>
252
252
  {% endfor %}
253
253
  {% if page.categories.size > 2 %}
254
- <span class="badge bg-light text-dark">+{{ page.categories.size | minus: 2 }}</span>
254
+ <span class="badge">+{{ page.categories.size | minus: 2 }}</span>
255
255
  {% endif %}
256
256
  {% endif %}
257
257
  </td>
@@ -261,7 +261,7 @@
261
261
  <span class="badge bg-outline-primary me-1">#{{ tag }}</span>
262
262
  {% endfor %}
263
263
  {% if page.tags.size > 3 %}
264
- <span class="badge bg-light text-dark">+{{ page.tags.size | minus: 3 }}</span>
264
+ <span class="badge">+{{ page.tags.size | minus: 3 }}</span>
265
265
  {% endif %}
266
266
  {% endif %}
267
267
  </td>
@@ -324,7 +324,7 @@
324
324
  <span class="badge bg-secondary me-1">{{ category }}</span>
325
325
  {% endfor %}
326
326
  {% if item.categories.size > 2 %}
327
- <span class="badge bg-light text-dark">+{{ item.categories.size | minus: 2 }}</span>
327
+ <span class="badge">+{{ item.categories.size | minus: 2 }}</span>
328
328
  {% endif %}
329
329
  {% endif %}
330
330
  </td>
@@ -334,7 +334,7 @@
334
334
  <span class="badge bg-outline-primary me-1">#{{ tag }}</span>
335
335
  {% endfor %}
336
336
  {% if item.tags.size > 3 %}
337
- <span class="badge bg-light text-dark">+{{ item.tags.size | minus: 3 }}</span>
337
+ <span class="badge">+{{ item.tags.size | minus: 3 }}</span>
338
338
  {% endif %}
339
339
  {% endif %}
340
340
  </td>
@@ -458,11 +458,6 @@ th:hover .sort-icon {
458
458
  .sitemap-card .card {
459
459
  border-color: var(--bs-border-color-translucent);
460
460
  }
461
-
462
- .badge.bg-light {
463
- background-color: var(--bs-gray-600) !important;
464
- color: var(--bs-gray-100) !important;
465
- }
466
461
  }
467
462
  </style>
468
463
 
@@ -28,7 +28,7 @@
28
28
  ===================================================================
29
29
  -->
30
30
 
31
- <header id="navbar" class="container-fluid text-center z-1" role="navigation">
31
+ <header id="navbar" class="container-fluid text-center fixed-top" role="navigation">
32
32
 
33
33
  <!-- ================================ -->
34
34
  <!-- TOP NAVIGATION BAR -->
@@ -25,12 +25,12 @@
25
25
  <!-- Top categories with post counts -->
26
26
  <!-- ================================================ -->
27
27
  <div id="categories" class="card shadow-sm h-100">
28
- <div class="card-header bg-primary text-white">
28
+ <div class="card-header bg-primary-subtle">
29
29
  <div class="d-flex align-items-center justify-content-between">
30
- <h3 class="mb-0 fw-bold">
30
+ <h3 class="mb-0 fw-bold text-primary-emphasis">
31
31
  <i class="bi bi-folder2-open me-2"></i> Top Categories
32
32
  </h3>
33
- <span class="badge bg-light text-primary">
33
+ <span class="badge bg-primary">
34
34
  {{ site.data.content_statistics.overview.total_categories | default: 0 }}
35
35
  </span>
36
36
  </div>
@@ -72,7 +72,7 @@
72
72
 
73
73
  <!-- Show More Button if there are more categories -->
74
74
  {% if site.data.content_statistics.categories.size > 15 %}
75
- <div class="card-footer bg-light text-center">
75
+ <div class="card-footer text-center">
76
76
  <button class="btn btn-outline-primary btn-sm"
77
77
  onclick="toggleAllCategories(this)">
78
78
  <i class="bi bi-chevron-down"></i>
@@ -95,7 +95,7 @@
95
95
 
96
96
  <!-- Categories Summary Footer -->
97
97
  {% if site.data.content_statistics.categories and site.data.content_statistics.categories.size > 0 %}
98
- <div class="card-footer bg-light">
98
+ <div class="card-footer">
99
99
  <div class="row text-center">
100
100
  <div class="col-4">
101
101
  <strong class="text-primary">{{ site.data.content_statistics.overview.total_categories | default: 0 }}</strong>
@@ -28,8 +28,8 @@
28
28
  <div class="col-12">
29
29
  <div class="text-center mb-4">
30
30
  <!-- Header Icon with Bootstrap classes -->
31
- <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-circle p-4 mb-4 shadow-lg stats-header-icon">
32
- <i class="bi bi-graph-up fs-1 text-white stats-icon-rotate"></i>
31
+ <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle rounded-circle p-4 mb-4 shadow-lg stats-header-icon">
32
+ <i class="bi bi-graph-up fs-1 text-primary stats-icon-rotate"></i>
33
33
  </div>
34
34
 
35
35
  <!-- Title with Bootstrap typography -->
@@ -38,14 +38,14 @@
38
38
  </h1>
39
39
 
40
40
  <!-- Description with Bootstrap lead class -->
41
- <p class="lead text-muted mb-4 fs-4">
41
+ <p class="lead mb-4 fs-4">
42
42
  {{ page.description | default: "Comprehensive analytics and insights from the knowledge base" }}
43
43
  </p>
44
44
  </div>
45
45
 
46
46
  <!-- Last Updated Information using Bootstrap alerts -->
47
47
  {% if site.data.content_statistics and site.data.content_statistics.generated_at %}
48
- <div class="alert alert-info border-0 bg-gradient shadow-sm d-flex align-items-center justify-content-between" role="alert">
48
+ <div class="alert alert-info shadow-sm d-flex align-items-center justify-content-between" role="alert">
49
49
  <div class="d-flex align-items-center">
50
50
  <i class="bi bi-clock me-3 fs-4"></i>
51
51
  <span class="fw-medium">
@@ -59,12 +59,12 @@
59
59
  </button>
60
60
  </div>
61
61
  {% else %}
62
- <div class="alert alert-warning border-0 bg-gradient shadow-sm d-flex align-items-center justify-content-between" role="alert">
62
+ <div class="alert alert-warning shadow-sm d-flex align-items-center justify-content-between" role="alert">
63
63
  <div class="d-flex align-items-center">
64
64
  <i class="bi bi-exclamation-triangle me-3 fs-4"></i>
65
65
  <span class="fw-medium">
66
66
  <strong>Statistics not yet generated.</strong>
67
- Run <code class="bg-light text-dark px-2 py-1 rounded">ruby _data/generate_statistics.rb</code> to create statistics.
67
+ Run <code class="bg-body-secondary px-2 py-1 rounded">ruby _data/generate_statistics.rb</code> to create statistics.
68
68
  </span>
69
69
  </div>
70
70
  <button class="btn btn-outline-warning btn-sm" onclick="window.location.reload()">
@@ -84,7 +84,7 @@
84
84
  <div class="col-12">
85
85
  <!-- Bootstrap breadcrumb -->
86
86
  <nav aria-label="Statistics navigation">
87
- <ol class="breadcrumb bg-light p-3 rounded shadow-sm">
87
+ <ol class="breadcrumb p-3 rounded shadow-sm">
88
88
  <li class="breadcrumb-item">
89
89
  <a href="{{ '/' | relative_url }}" class="text-decoration-none">
90
90
  <i class="bi bi-house me-1"></i> Home
@@ -27,8 +27,8 @@
27
27
  <div id="metrics" class="row mb-5">
28
28
  <div class="col-12">
29
29
  <div class="card shadow-sm">
30
- <div class="card-header bg-info text-white">
31
- <h3 class="mb-0 fw-bold">
30
+ <div class="card-header bg-info-subtle">
31
+ <h3 class="mb-0 fw-bold text-info-emphasis">
32
32
  <i class="bi bi-info-circle me-2"></i> Quick Facts & Insights
33
33
  </h3>
34
34
  </div>
@@ -38,7 +38,7 @@
38
38
 
39
39
  <!-- Content Overview Column -->
40
40
  <div class="col-md-4">
41
- <div class="h-100 p-3 bg-light rounded">
41
+ <div class="h-100 p-3 bg-body-secondary rounded">
42
42
  <h5 class="text-primary mb-3">
43
43
  <i class="bi bi-file-text me-2"></i> Content Overview
44
44
  </h5>
@@ -69,7 +69,7 @@
69
69
 
70
70
  <!-- Top Performers Column -->
71
71
  <div class="col-md-4">
72
- <div class="h-100 p-3 bg-light rounded">
72
+ <div class="h-100 p-3 bg-body-secondary rounded">
73
73
  <h5 class="text-success mb-3">
74
74
  <i class="bi bi-trophy me-2"></i> Top Performers
75
75
  </h5>
@@ -119,8 +119,8 @@
119
119
 
120
120
  <!-- Data Health Column -->
121
121
  <div class="col-md-4">
122
- <div class="h-100 p-3 bg-light rounded">
123
- <h5 class="text-warning mb-3">
122
+ <div class="h-100 p-3 bg-body-secondary rounded">
123
+ <h5 class="text-warning-emphasis mb-3">
124
124
  <i class="bi bi-heart-pulse me-2"></i> Data Health
125
125
  </h5>
126
126
 
@@ -187,7 +187,7 @@
187
187
  </div>
188
188
 
189
189
  <!-- Action Buttons Footer -->
190
- <div class="card-footer bg-light text-center">
190
+ <div class="card-footer text-center">
191
191
  <div class="btn-group" role="group">
192
192
  <button type="button" class="btn btn-outline-primary" onclick="window.print()">
193
193
  <i class="bi bi-printer"></i> Print Report
@@ -211,7 +211,7 @@
211
211
  <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
212
212
  <div class="modal-dialog">
213
213
  <div class="modal-content">
214
- <div class="modal-header">
214
+ <div class="modal-header bg-body border-bottom">
215
215
  <h5 class="modal-title" id="helpModalLabel">
216
216
  <i class="bi bi-question-circle"></i> Statistics Help
217
217
  </h5>
@@ -27,9 +27,9 @@
27
27
  <div class="col-lg-8">
28
28
 
29
29
  <!-- Main Alert -->
30
- <div class="alert alert-warning border-0 shadow-sm" role="alert">
30
+ <div class="alert alert-warning shadow-sm" role="alert">
31
31
  <div class="text-center py-4">
32
- <i class="bi bi-exclamation-triangle display-1 text-warning mb-4"></i>
32
+ <i class="bi bi-exclamation-triangle display-1 text-warning-emphasis mb-4"></i>
33
33
  <h2 class="alert-heading mb-3">No Statistics Available</h2>
34
34
  <p class="lead mb-4">
35
35
  Statistics haven't been generated yet. Follow the steps below to create comprehensive analytics for your site.
@@ -39,8 +39,8 @@
39
39
 
40
40
  <!-- Instructions Card -->
41
41
  <div class="card shadow-sm mb-4">
42
- <div class="card-header bg-primary text-white">
43
- <h4 class="mb-0">
42
+ <div class="card-header bg-primary-subtle">
43
+ <h4 class="mb-0 text-primary-emphasis">
44
44
  <i class="bi bi-gear me-2"></i> How to Generate Statistics
45
45
  </h4>
46
46
  </div>
@@ -51,7 +51,7 @@
51
51
  <i class="bi bi-1-circle me-2"></i> Run Generator Script
52
52
  </h5>
53
53
  <p class="mb-3">Execute the statistics generation script from your site's root directory:</p>
54
- <div class="bg-dark text-light p-3 rounded mb-3">
54
+ <div class="bg-body-secondary border p-3 rounded mb-3">
55
55
  <code>ruby _data/generate_statistics.rb</code>
56
56
  </div>
57
57
  <p class="text-muted small">
@@ -79,8 +79,8 @@
79
79
 
80
80
  <!-- Alternative Setup Information -->
81
81
  <div class="card shadow-sm mb-4">
82
- <div class="card-header bg-info text-white">
83
- <h4 class="mb-0">
82
+ <div class="card-header bg-info-subtle">
83
+ <h4 class="mb-0 text-info-emphasis">
84
84
  <i class="bi bi-info-circle me-2"></i> What You'll See
85
85
  </h4>
86
86
  </div>
@@ -113,8 +113,8 @@
113
113
 
114
114
  <!-- Troubleshooting -->
115
115
  <div class="card shadow-sm">
116
- <div class="card-header bg-secondary text-white">
117
- <h4 class="mb-0">
116
+ <div class="card-header bg-secondary-subtle">
117
+ <h4 class="mb-0 text-secondary-emphasis">
118
118
  <i class="bi bi-tools me-2"></i> Troubleshooting
119
119
  </h4>
120
120
  </div>
@@ -41,7 +41,7 @@
41
41
 
42
42
  <!-- Total Posts Card -->
43
43
  <div class="col-lg-3 col-md-6">
44
- <div class="card h-100 border-primary shadow-sm stats-card">
44
+ <div class="card h-100 shadow-sm stats-card">
45
45
  <div class="card-body text-center p-4">
46
46
  <div class="mb-3">
47
47
  <i class="bi bi-file-text display-3 text-primary"></i>
@@ -60,7 +60,7 @@
60
60
 
61
61
  <!-- Total Categories Card -->
62
62
  <div class="col-lg-3 col-md-6">
63
- <div class="card h-100 border-success shadow-sm stats-card">
63
+ <div class="card h-100 shadow-sm stats-card">
64
64
  <div class="card-body text-center p-4">
65
65
  <div class="mb-3">
66
66
  <i class="bi bi-folder display-3 text-success"></i>
@@ -79,7 +79,7 @@
79
79
 
80
80
  <!-- Total Tags Card -->
81
81
  <div class="col-lg-3 col-md-6">
82
- <div class="card h-100 border-info shadow-sm stats-card">
82
+ <div class="card h-100 shadow-sm stats-card">
83
83
  <div class="card-body text-center p-4">
84
84
  <div class="mb-3">
85
85
  <i class="bi bi-tags display-3 text-info"></i>
@@ -98,7 +98,7 @@
98
98
 
99
99
  <!-- Total Words Card -->
100
100
  <div class="col-lg-3 col-md-6">
101
- <div class="card h-100 border-info shadow-sm stats-card">
101
+ <div class="card h-100 shadow-sm stats-card">
102
102
  <div class="card-body text-center p-4">
103
103
  <div class="mb-3">
104
104
  <i class="bi bi-chat-text display-3 text-info"></i>
@@ -25,12 +25,12 @@
25
25
  <!-- Top tags with usage counts -->
26
26
  <!-- ================================================ -->
27
27
  <div id="tags" class="card shadow-sm h-100">
28
- <div class="card-header bg-success text-white">
28
+ <div class="card-header bg-success-subtle">
29
29
  <div class="d-flex align-items-center justify-content-between">
30
- <h3 class="mb-0 fw-bold">
30
+ <h3 class="mb-0 fw-bold text-success-emphasis">
31
31
  <i class="bi bi-tags me-2"></i> Top Tags
32
32
  </h3>
33
- <span class="badge bg-light text-success">
33
+ <span class="badge bg-success">
34
34
  {{ site.data.content_statistics.overview.total_tags | default: 0 }}
35
35
  </span>
36
36
  </div>
@@ -71,7 +71,7 @@
71
71
  </div>
72
72
 
73
73
  <!-- Tag Cloud Section -->
74
- <div class="card-footer bg-light">
74
+ <div class="card-footer">
75
75
  <h6 class="mb-3 fw-bold">
76
76
  <i class="bi bi-cloud"></i> Tag Cloud
77
77
  </h6>
@@ -93,7 +93,7 @@
93
93
  {% assign tag_class = "fs-sm" %}
94
94
  {% endif %}
95
95
 
96
- <span class="badge bg-outline-success {{ tag_class }}"
96
+ <span class="badge bg-success-subtle text-success-emphasis {{ tag_class }}"
97
97
  data-bs-toggle="tooltip"
98
98
  title="{{ tag[1] }} posts">
99
99
  {{ tag[0] }}
@@ -116,7 +116,7 @@
116
116
 
117
117
  <!-- Tags Summary Footer -->
118
118
  {% if site.data.content_statistics.tags and site.data.content_statistics.tags.size > 0 %}
119
- <div class="card-footer bg-light">
119
+ <div class="card-footer">
120
120
  <div class="row text-center">
121
121
  <div class="col-4">
122
122
  <strong class="text-success">{{ site.data.content_statistics.overview.total_tags | default: 0 }}</strong>
data/_layouts/blog.html CHANGED
@@ -407,7 +407,7 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
407
407
  <a href="{{ '/archives/' | relative_url }}#{{ month.name | slugify }}-{{ year.name }}"
408
408
  class="text-decoration-none">
409
409
  {{ month.name }}
410
- <span class="badge bg-light text-dark">{{ month.items.size }}</span>
410
+ <span class="badge bg-secondary text-body">{{ month.items.size }}</span>
411
411
  </a>
412
412
  </li>
413
413
  {% endfor %}
@@ -112,10 +112,15 @@ layout: default
112
112
  {% endif %}
113
113
  <a href="{{ fpost.url | relative_url }}" class="text-decoration-none">
114
114
  {% if fpost.preview %}
115
- <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ fpost.preview }}"
116
- class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
115
+ {% if fpost.preview contains '/assets' %}
116
+ <img src="{{ site.baseurl }}{{ fpost.preview }}"
117
+ class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
118
+ {% else %}
119
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ fpost.preview }}"
120
+ class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
121
+ {% endif %}
117
122
  {% else %}
118
- <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}"
123
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}"
119
124
  class="card-img-top" alt="Preview" loading="lazy">
120
125
  {% endif %}
121
126
  </a>
@@ -167,10 +172,15 @@ layout: default
167
172
  {% endif %}
168
173
  <a href="{{ cpost.url | relative_url }}" class="text-decoration-none">
169
174
  {% if cpost.preview %}
170
- <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ cpost.preview }}"
171
- class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
175
+ {% if cpost.preview contains '/assets' %}
176
+ <img src="{{ site.baseurl }}{{ cpost.preview }}"
177
+ class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
178
+ {% else %}
179
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ cpost.preview }}"
180
+ class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
181
+ {% endif %}
172
182
  {% else %}
173
- <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}"
183
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}"
174
184
  class="card-img-top" alt="Preview" loading="lazy">
175
185
  {% endif %}
176
186
  </a>
@@ -84,10 +84,15 @@ layout: default
84
84
  <!-- ====================== -->
85
85
  <!-- Display preview image with fallback to site teaser -->
86
86
  {% if post.preview %}
87
- <img src="{{site.baseurl}}/{{ site.public_folder }}/{{ post.preview}}"
88
- class="card-img-top" alt="Preview image for {{ post.title }}">
87
+ {% if post.preview contains '/assets' %}
88
+ <img src="{{ site.baseurl }}{{ post.preview }}"
89
+ class="card-img-top" alt="Preview image for {{ post.title }}">
90
+ {% else %}
91
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ post.preview }}"
92
+ class="card-img-top" alt="Preview image for {{ post.title }}">
93
+ {% endif %}
89
94
  {% else %}
90
- <img src="{{site.baseurl}}/{{ site.public_folder }}/{{ site.teaser }}"
95
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}"
91
96
  class="card-img-top" alt="Default preview image">
92
97
  {% endif %}
93
98
 
@@ -189,10 +189,15 @@ layout: default
189
189
  <div class="card h-100 border-0 shadow-sm">
190
190
  <a href="{{ rpost.url | relative_url }}" class="text-decoration-none">
191
191
  {% if rpost.preview %}
192
- <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ rpost.preview }}"
193
- class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
192
+ {% if rpost.preview contains '/assets' %}
193
+ <img src="{{ site.baseurl }}{{ rpost.preview }}"
194
+ class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
195
+ {% else %}
196
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ rpost.preview }}"
197
+ class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
198
+ {% endif %}
194
199
  {% else %}
195
- <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}"
200
+ <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}"
196
201
  class="card-img-top" alt="Preview" loading="lazy">
197
202
  {% endif %}
198
203
  </a>
@@ -69,7 +69,7 @@ layout: root
69
69
  {% if page.hero_image %}
70
70
  <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg">
71
71
  {% else %}
72
- <div class="bg-light rounded p-5 text-dark">
72
+ <div class="bg-secondary rounded p-5 text-body">
73
73
  <i class="bi bi-code-square display-1"></i>
74
74
  <p class="mt-3 mb-0">Jekyll Theme</p>
75
75
  </div>