spectrum-er 1.0.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 +7 -0
- data/.htaccess +34 -0
- data/LICENSE.txt +21 -0
- data/README.md +330 -0
- data/_config.yml +340 -0
- data/_data/navigation.yml +38 -0
- data/_includes/content-card.html +30 -0
- data/_includes/gallery-track.html +97 -0
- data/_includes/photo-card.html +23 -0
- data/_includes/section-header.html +12 -0
- data/_includes/site-navigation.html +33 -0
- data/_includes/structured-data.html +22 -0
- data/_includes/tech-bite-card.html +52 -0
- data/_layouts/about.html +63 -0
- data/_layouts/default.html +210 -0
- data/_layouts/films-list.html +27 -0
- data/_layouts/tech-bite-list.html +105 -0
- data/_layouts/tech-bite.html +60 -0
- data/_sass/_base.scss +298 -0
- data/_sass/_color-variables.scss +262 -0
- data/_sass/_components.scss +519 -0
- data/_sass/_layouts.scss +820 -0
- data/_sass/_sections.scss +163 -0
- data/_sass/_utilities.scss +301 -0
- data/assets/css/main.scss +21 -0
- data/assets/images/films/IMG_2112.JPG +0 -0
- data/assets/images/films/IMG_8987.jpg +0 -0
- data/assets/images/films/IMG_8998.jpg +0 -0
- data/assets/images/films/IMG_9270.jpg +0 -0
- data/assets/images/films/IMG_9504.jpg +0 -0
- data/assets/images/films/IMG_9570.jpg +0 -0
- data/assets/js/theme-manager.js +271 -0
- metadata +150 -0
data/_layouts/about.html
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="about-page">
|
|
6
|
+
<div class="container">
|
|
7
|
+
<header class="page-header">
|
|
8
|
+
<h1 class="page-title">{{ site.personal.name | default: site.site.author }}</h1>
|
|
9
|
+
{% if site.personal.tagline %}
|
|
10
|
+
<p class="page-subtitle">{{ site.personal.tagline }}</p>
|
|
11
|
+
{% endif %}
|
|
12
|
+
</header>
|
|
13
|
+
|
|
14
|
+
<div class="about-content">
|
|
15
|
+
<div class="about-text">
|
|
16
|
+
{% if page.content %}
|
|
17
|
+
{{ content }}
|
|
18
|
+
{% elsif site.personal.bio %}
|
|
19
|
+
<p>{{ site.personal.bio }}</p>
|
|
20
|
+
{% else %}
|
|
21
|
+
<p>{{ site.personal.bio | default: "Welcome to my personal website. I'm passionate about technology, design, and sharing knowledge through my daily tech insights and photography." }}</p>
|
|
22
|
+
{% endif %}
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
{% if site.personal.location %}
|
|
26
|
+
<div class="about-details">
|
|
27
|
+
<div class="detail-item">
|
|
28
|
+
<span class="detail-label">Location</span>
|
|
29
|
+
<span class="detail-value">{{ site.personal.location }}</span>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
{% endif %}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<!-- Tech Bites Preview -->
|
|
36
|
+
{% if site.sections.tech_bite.enabled %}
|
|
37
|
+
<section class="tech-bites-preview">
|
|
38
|
+
<div class="section-header">
|
|
39
|
+
<h2 class="section-title">{{ site.content.pages.tech_bites.title | default: "Recent Tech Bites" }}</h2>
|
|
40
|
+
<p class="section-description">{{ site.content.pages.tech_bites.description | default: "Daily tech insights and discoveries" }}</p>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<div class="tech-bites-grid">
|
|
44
|
+
{% assign recent_tech_bites = site.tech-bites | sort: 'date' | reverse | limit: site.sections.tech_bite.main_page_count | default: 5 %}
|
|
45
|
+
{% for tech_bite in recent_tech_bites %}
|
|
46
|
+
{% include tech-bite-card.html tech_bite=tech_bite %}
|
|
47
|
+
{% endfor %}
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="section-footer">
|
|
51
|
+
<a href="{{ '/tech-bites/' | relative_url }}" class="section-button">
|
|
52
|
+
{{ site.content.ui.buttons.view_all_tech_bites | default: "View All Tech Bites" }}
|
|
53
|
+
<span class="btn-icon">→</span>
|
|
54
|
+
</a>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
{% endif %}
|
|
58
|
+
|
|
59
|
+
<!-- Gallery Track Preview -->
|
|
60
|
+
{% include gallery-track.html %}
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>
|
|
7
|
+
{% if page.title %}
|
|
8
|
+
{{ page.title }} - {{ site.site.title }}
|
|
9
|
+
{% else %}
|
|
10
|
+
{{ site.site.title }}
|
|
11
|
+
{% endif %}
|
|
12
|
+
</title>
|
|
13
|
+
|
|
14
|
+
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.site.description }}{% endif %}">
|
|
15
|
+
<meta name="author" content="{{ site.site.author }}">
|
|
16
|
+
<meta name="robots" content="index, follow">
|
|
17
|
+
<meta name="language" content="en">
|
|
18
|
+
<meta name="revisit-after" content="7 days">
|
|
19
|
+
|
|
20
|
+
<!-- Open Graph / Facebook -->
|
|
21
|
+
<meta property="og:type" content="website">
|
|
22
|
+
<meta property="og:url" content="{{ page.url | absolute_url }}">
|
|
23
|
+
<meta property="og:title" content="{% if page.title %}{{ page.title }} - {{ site.site.title }}{% else %}{{ site.site.title }}{% endif %}">
|
|
24
|
+
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.site.description }}{% endif %}">
|
|
25
|
+
<meta property="og:image" content="{{ '/assets/images/og-image.jpg' | absolute_url }}">
|
|
26
|
+
|
|
27
|
+
<!-- Twitter -->
|
|
28
|
+
<meta property="twitter:card" content="summary_large_image">
|
|
29
|
+
<meta property="twitter:url" content="{{ page.url | absolute_url }}">
|
|
30
|
+
<meta property="twitter:title" content="{% if page.title %}{{ page.title }} - {{ site.site.title }}{% else %}{{ site.site.title }}{% endif %}">
|
|
31
|
+
<meta property="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.site.description }}{% endif %}">
|
|
32
|
+
<meta property="twitter:image" content="{{ '/assets/images/og-image.jpg' | absolute_url }}">
|
|
33
|
+
|
|
34
|
+
<!-- SEO Tags -->
|
|
35
|
+
{% seo %}
|
|
36
|
+
|
|
37
|
+
<!-- Structured Data -->
|
|
38
|
+
{% include structured-data.html %}
|
|
39
|
+
|
|
40
|
+
<!-- Theme Color -->
|
|
41
|
+
<meta name="theme-color" content="{{ site.site_theme.colors.primary | default: '#3498db' }}">
|
|
42
|
+
|
|
43
|
+
<!-- Favicon -->
|
|
44
|
+
<link rel="icon" type="image/x-icon" href="{{ '/assets/images/favicon.ico' | relative_url }}">
|
|
45
|
+
|
|
46
|
+
<!-- Critical CSS - Prevents FOUC -->
|
|
47
|
+
<style>
|
|
48
|
+
/* Immediate theme detection and critical styles */
|
|
49
|
+
:root {
|
|
50
|
+
--primary-color: {{ site.site_theme.colors.primary | default: '#3498db' }};
|
|
51
|
+
--font-family: {{ site.site_theme.typography.font_family | default: 'Lato' }}, Verdana, Helvetica, sans-serif;
|
|
52
|
+
--max-width: {{ site.site_theme.layout.max_width | default: '1125px' }};
|
|
53
|
+
--animation-speed: {{ site.site_theme.animations.duration | default: '0.3s' }};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Prevent transitions during initial load */
|
|
57
|
+
* {
|
|
58
|
+
transition: none !important;
|
|
59
|
+
animation: none !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Immediate background color to prevent black flash */
|
|
63
|
+
html, body {
|
|
64
|
+
background-color: #ffffff;
|
|
65
|
+
color: #2c3e50;
|
|
66
|
+
margin: 0;
|
|
67
|
+
padding: 0;
|
|
68
|
+
font-family: var(--font-family);
|
|
69
|
+
line-height: 1.6;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Dark mode detection */
|
|
73
|
+
{% if site.site_theme.dark_mode.enabled %}
|
|
74
|
+
html, body {
|
|
75
|
+
background-color: #2c3e50;
|
|
76
|
+
color: #ecf0f1;
|
|
77
|
+
}
|
|
78
|
+
{% endif %}
|
|
79
|
+
|
|
80
|
+
/* Hide content until CSS loads */
|
|
81
|
+
.page-wrapper {
|
|
82
|
+
opacity: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Show content after CSS loads */
|
|
86
|
+
.css-loaded .page-wrapper {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
transition: opacity 0.2s ease;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Re-enable transitions after load */
|
|
92
|
+
.transitions-enabled * {
|
|
93
|
+
transition: unset !important;
|
|
94
|
+
animation: unset !important;
|
|
95
|
+
}
|
|
96
|
+
</style>
|
|
97
|
+
|
|
98
|
+
<!-- Font Loading with preload and font-display swap -->
|
|
99
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
100
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
101
|
+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
|
102
|
+
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"></noscript>
|
|
103
|
+
|
|
104
|
+
<!-- Font Awesome Icons -->
|
|
105
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
106
|
+
|
|
107
|
+
<!-- Stylesheets -->
|
|
108
|
+
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
|
|
109
|
+
|
|
110
|
+
{% if page.custom_css %}
|
|
111
|
+
<style>{{ page.custom_css }}</style>
|
|
112
|
+
{% endif %}
|
|
113
|
+
</head>
|
|
114
|
+
<body class="{% if site.site_theme.dark_mode.enabled %}dark-mode{% endif %} {% if page.layout %}{{ page.layout }}{% endif %}">
|
|
115
|
+
<!-- Fixed Site Navigation -->
|
|
116
|
+
{% include site-navigation.html %}
|
|
117
|
+
|
|
118
|
+
<div class="page-wrapper">
|
|
119
|
+
<!-- Main Content -->
|
|
120
|
+
<main class="main-content">
|
|
121
|
+
{{ content }}
|
|
122
|
+
</main>
|
|
123
|
+
|
|
124
|
+
<!-- Footer -->
|
|
125
|
+
<footer class="site-footer">
|
|
126
|
+
<div class="footer-content">
|
|
127
|
+
<div class="footer-copyright">
|
|
128
|
+
<p>© {{ 'now' | date: "%Y" }} {{ site.personal.name | default: site.site.author }}. {{ site.footer.copyright_text | default: "All rights reserved." }}</p>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
{% if site.footer.show_theme_credit %}
|
|
132
|
+
<div class="footer-theme">
|
|
133
|
+
<p>Built with <a href="{{ site.footer.theme_url | default: '#' }}" target="_blank" rel="noopener noreferrer">{{ site.footer.theme_name | default: 'Spectrum' }}</a></p>
|
|
134
|
+
</div>
|
|
135
|
+
{% endif %}
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
</footer>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
<!-- Critical JavaScript - Theme Detection and Transition Management -->
|
|
143
|
+
<script>
|
|
144
|
+
// Immediate theme detection and transition management
|
|
145
|
+
(function() {
|
|
146
|
+
// Check for saved theme preference
|
|
147
|
+
const savedTheme = localStorage.getItem('custom-theme');
|
|
148
|
+
const savedDarkMode = localStorage.getItem('dark-mode');
|
|
149
|
+
|
|
150
|
+
// Apply saved theme immediately if available
|
|
151
|
+
if (savedTheme) {
|
|
152
|
+
try {
|
|
153
|
+
const theme = JSON.parse(savedTheme);
|
|
154
|
+
const root = document.documentElement;
|
|
155
|
+
root.style.setProperty('--primary-color', theme.primary);
|
|
156
|
+
root.style.setProperty('--secondary-color', theme.secondary);
|
|
157
|
+
root.style.setProperty('--accent-color', theme.accent);
|
|
158
|
+
root.style.setProperty('--bg-color', theme.background);
|
|
159
|
+
root.style.setProperty('--text-color', theme.text);
|
|
160
|
+
root.style.setProperty('--light-text-color', theme.lightText);
|
|
161
|
+
} catch (e) {
|
|
162
|
+
console.warn('Invalid saved theme data');
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// Apply dark mode immediately if saved
|
|
167
|
+
if (savedDarkMode === 'true') {
|
|
168
|
+
document.body.classList.add('dark-mode');
|
|
169
|
+
document.documentElement.style.setProperty('--bg-color', '#2c3e50');
|
|
170
|
+
document.documentElement.style.setProperty('--text-color', '#ecf0f1');
|
|
171
|
+
document.documentElement.style.setProperty('--light-text-color', '#bdc3c7');
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
// Mark CSS as loaded and enable transitions
|
|
175
|
+
function enableTransitions() {
|
|
176
|
+
document.documentElement.classList.add('css-loaded', 'transitions-enabled');
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Enable transitions after a short delay to ensure smooth loading
|
|
180
|
+
if (document.readyState === 'loading') {
|
|
181
|
+
document.addEventListener('DOMContentLoaded', enableTransitions);
|
|
182
|
+
} else {
|
|
183
|
+
enableTransitions();
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// Fallback: enable transitions after 100ms
|
|
187
|
+
setTimeout(enableTransitions, 100);
|
|
188
|
+
})();
|
|
189
|
+
</script>
|
|
190
|
+
|
|
191
|
+
<!-- JavaScript -->
|
|
192
|
+
<script src="{{ '/assets/js/theme-manager.js' | relative_url }}"></script>
|
|
193
|
+
|
|
194
|
+
{% if page.custom_js %}
|
|
195
|
+
<script>{{ page.custom_js }}</script>
|
|
196
|
+
{% endif %}
|
|
197
|
+
|
|
198
|
+
<!-- Analytics (if configured) -->
|
|
199
|
+
{% if site.google_analytics %}
|
|
200
|
+
<!-- Google Analytics -->
|
|
201
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
|
202
|
+
<script>
|
|
203
|
+
window.dataLayer = window.dataLayer || [];
|
|
204
|
+
function gtag(){dataLayer.push(arguments);}
|
|
205
|
+
gtag('js', new Date());
|
|
206
|
+
gtag('config', '{{ site.google_analytics }}');
|
|
207
|
+
</script>
|
|
208
|
+
{% endif %}
|
|
209
|
+
</body>
|
|
210
|
+
</html>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="films-page">
|
|
6
|
+
<div class="container">
|
|
7
|
+
<header class="page-header">
|
|
8
|
+
<h1 class="page-title">{{ site.content.pages.films.title | default: "Films" }}</h1>
|
|
9
|
+
<p class="page-description">{{ site.content.pages.films.description | default: "Photography collection showcasing moments captured through the lens" }}</p>
|
|
10
|
+
</header>
|
|
11
|
+
|
|
12
|
+
<!-- Films Grid -->
|
|
13
|
+
<div class="films-grid">
|
|
14
|
+
{% assign films_dir = site.static_files | where: "path", "/assets/images/films/" %}
|
|
15
|
+
{% assign image_extensions = "jpg,jpeg,png,webp,JPG,JPEG,PNG,WEBP" | split: "," %}
|
|
16
|
+
|
|
17
|
+
{% for file in site.static_files %}
|
|
18
|
+
{% if file.path contains '/assets/images/films/' %}
|
|
19
|
+
{% assign file_ext = file.extname | remove: '.' %}
|
|
20
|
+
{% if image_extensions contains file_ext %}
|
|
21
|
+
{% include photo-card.html image=file %}
|
|
22
|
+
{% endif %}
|
|
23
|
+
{% endif %}
|
|
24
|
+
{% endfor %}
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="tech-bite-list-page">
|
|
6
|
+
<div class="container">
|
|
7
|
+
<header class="page-header">
|
|
8
|
+
<h1 class="page-title">{{ site.content.pages.tech_bites.title | default: "Tech Bites" }}</h1>
|
|
9
|
+
<p class="page-description">{{ site.content.pages.tech_bites.description | default: "Daily tech insights and discoveries" }}</p>
|
|
10
|
+
</header>
|
|
11
|
+
|
|
12
|
+
<!-- Tech Bites Grid -->
|
|
13
|
+
<div class="tech-bites-grid">
|
|
14
|
+
{% assign sorted_tech_bites = site.tech-bites | sort: 'date' | reverse %}
|
|
15
|
+
{% for tech_bite in sorted_tech_bites %}
|
|
16
|
+
{% include tech-bite-card.html tech_bite=tech_bite %}
|
|
17
|
+
{% endfor %}
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<!-- Pagination -->
|
|
21
|
+
{% if site.sections.tech_bite.pagination %}
|
|
22
|
+
{% assign pagination_size = site.sections.tech_bite.pagination | default: 10 %}
|
|
23
|
+
{% assign total_pages = sorted_tech_bites.size | divided_by: pagination_size | plus: 1 %}
|
|
24
|
+
|
|
25
|
+
{% if total_pages > 1 %}
|
|
26
|
+
<nav class="pagination">
|
|
27
|
+
<div class="pagination-info">
|
|
28
|
+
{{ site.content.ui.pagination.showing_text | default: "Showing" }} {{ pagination_size }} {{ site.content.ui.pagination.of_text | default: "of" }} {{ sorted_tech_bites.size }} {{ site.content.ui.pagination.tech_bites_text | default: "tech bites" }}
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="pagination-links">
|
|
32
|
+
<button class="pagination-btn" id="prev-page" disabled>{{ site.content.ui.pagination.previous_text | default: "Previous" }}</button>
|
|
33
|
+
<span class="pagination-current">
|
|
34
|
+
{{ site.content.ui.pagination.page_text | default: "Page" }} <span id="current-page">1</span> {{ site.content.ui.pagination.of_text | default: "of" }} {{ total_pages }}
|
|
35
|
+
</span>
|
|
36
|
+
<button class="pagination-btn" id="next-page">{{ site.content.ui.pagination.next_text | default: "Next" }}</button>
|
|
37
|
+
</div>
|
|
38
|
+
</nav>
|
|
39
|
+
{% endif %}
|
|
40
|
+
{% endif %}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
// Simple pagination functionality (no filtering)
|
|
46
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
47
|
+
const techBites = document.querySelectorAll('.tech-bite-card');
|
|
48
|
+
const itemsPerPage = {{ site.sections.tech_bite.pagination | default: 10 }};
|
|
49
|
+
let currentPage = 1;
|
|
50
|
+
|
|
51
|
+
// Pagination functionality
|
|
52
|
+
const prevBtn = document.getElementById('prev-page');
|
|
53
|
+
const nextBtn = document.getElementById('next-page');
|
|
54
|
+
const currentPageSpan = document.getElementById('current-page');
|
|
55
|
+
|
|
56
|
+
if (prevBtn) {
|
|
57
|
+
prevBtn.addEventListener('click', function() {
|
|
58
|
+
if (currentPage > 1) {
|
|
59
|
+
currentPage--;
|
|
60
|
+
updateDisplay();
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (nextBtn) {
|
|
66
|
+
nextBtn.addEventListener('click', function() {
|
|
67
|
+
const totalPages = Math.ceil(techBites.length / itemsPerPage);
|
|
68
|
+
if (currentPage < totalPages) {
|
|
69
|
+
currentPage++;
|
|
70
|
+
updateDisplay();
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function updateDisplay() {
|
|
76
|
+
const totalPages = Math.ceil(techBites.length / itemsPerPage);
|
|
77
|
+
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
78
|
+
const endIndex = startIndex + itemsPerPage;
|
|
79
|
+
|
|
80
|
+
// Hide all items
|
|
81
|
+
techBites.forEach(card => {
|
|
82
|
+
card.style.display = 'none';
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
// Show items for current page
|
|
86
|
+
Array.from(techBites).slice(startIndex, endIndex).forEach(card => {
|
|
87
|
+
card.style.display = 'block';
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
// Update pagination controls
|
|
91
|
+
if (prevBtn) {
|
|
92
|
+
prevBtn.disabled = currentPage === 1;
|
|
93
|
+
}
|
|
94
|
+
if (nextBtn) {
|
|
95
|
+
nextBtn.disabled = currentPage >= totalPages;
|
|
96
|
+
}
|
|
97
|
+
if (currentPageSpan) {
|
|
98
|
+
currentPageSpan.textContent = currentPage;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Initial display
|
|
103
|
+
updateDisplay();
|
|
104
|
+
});
|
|
105
|
+
</script>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="tech-bite-page">
|
|
6
|
+
<div class="container">
|
|
7
|
+
<header class="page-header">
|
|
8
|
+
<h1 class="page-title">{{ page.title }}</h1>
|
|
9
|
+
|
|
10
|
+
<div class="page-meta">
|
|
11
|
+
{% if page.date %}
|
|
12
|
+
<time class="post-date" datetime="{{ page.date | date_to_xmlschema }}">
|
|
13
|
+
{{ page.date | date: "%B %d, %Y" }}
|
|
14
|
+
</time>
|
|
15
|
+
{% endif %}
|
|
16
|
+
|
|
17
|
+
{% if page.categories %}
|
|
18
|
+
<div class="post-categories">
|
|
19
|
+
{% for category in page.categories %}
|
|
20
|
+
<span class="category-tag">{{ category }}</span>
|
|
21
|
+
{% endfor %}
|
|
22
|
+
</div>
|
|
23
|
+
{% endif %}
|
|
24
|
+
</div>
|
|
25
|
+
</header>
|
|
26
|
+
|
|
27
|
+
<article class="tech-bite-content">
|
|
28
|
+
{{ content }}
|
|
29
|
+
</article>
|
|
30
|
+
|
|
31
|
+
<!-- Navigation to other tech bites -->
|
|
32
|
+
<nav class="post-navigation">
|
|
33
|
+
{% assign tech_bites = site.tech-bites | sort: 'date' %}
|
|
34
|
+
{% for tech_bite in tech_bites %}
|
|
35
|
+
{% if tech_bite.url == page.url %}
|
|
36
|
+
{% assign current_index = forloop.index0 %}
|
|
37
|
+
{% break %}
|
|
38
|
+
{% endif %}
|
|
39
|
+
{% endfor %}
|
|
40
|
+
|
|
41
|
+
{% if current_index > 0 %}
|
|
42
|
+
{% assign prev_index = current_index | minus: 1 %}
|
|
43
|
+
{% assign prev_post = tech_bites[prev_index] %}
|
|
44
|
+
<a href="{{ prev_post.url | relative_url }}" class="nav-link nav-prev">
|
|
45
|
+
<span class="nav-direction">{{ site.data.content.tech_bites.navigation.previous_text | default: "← Previous" }}</span>
|
|
46
|
+
<span class="nav-title">{{ prev_post.title }}</span>
|
|
47
|
+
</a>
|
|
48
|
+
{% endif %}
|
|
49
|
+
|
|
50
|
+
{% assign next_index = current_index | plus: 1 %}
|
|
51
|
+
{% if next_index < tech_bites.size %}
|
|
52
|
+
{% assign next_post = tech_bites[next_index] %}
|
|
53
|
+
<a href="{{ next_post.url | relative_url }}" class="nav-link nav-next">
|
|
54
|
+
<span class="nav-direction">{{ site.data.content.tech_bites.navigation.next_text | default: "Next →" }}</span>
|
|
55
|
+
<span class="nav-title">{{ next_post.title }}</span>
|
|
56
|
+
</a>
|
|
57
|
+
{% endif %}
|
|
58
|
+
</nav>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|