-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
181 lines (159 loc) · 7.48 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Blog posts about software development and cybersecurity">
<meta name="theme-color" content="#302e49">
<link rel="icon" type="image/x-icon" href="../src/favicon/favicon.ico">
<link rel="stylesheet" href="../src/css/reset.css">
<link rel="stylesheet" href="../src/css/base.css">
<link rel="stylesheet" href="../src/css/layout.css">
<link rel="stylesheet" href="../src/css/components.css">
<link rel="stylesheet" href="../src/css/sections.css">
<link rel="stylesheet" href="../src/css/responsive.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<title>Blogging the Bits</title>
</head>
<body>
<!-- Navigation Bar -->
<nav class="nav-bar">
<div class="nav-container">
<select class="nav-language-select" id="language-select" aria-label="Select language">
<option value="en">English</option>
<option value="pt-br">Português</option>
</select>
<a href="/" class="nav-blog-link">HOME</a>
</div>
</nav>
<main class="main-content">
<h1 class="header__title" data-translate="blogTitle"></h1>
<div id="blog-grid" class="blog-grid">
<!-- Posts will be dynamically inserted here -->
</div>
</main>
<footer class="footer">
<div class="footer__content">
<p class="footer__text" data-translate="footer"></p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const languageSelect = document.getElementById('language-select');
const blogGrid = document.getElementById('blog-grid');
// Basic translations (only for static UI elements)
const translations = {
en: {
blogTitle: "Blog Posts",
readMore: "Read More →",
footer: "© 2025 Brawling the Bits",
noPosts: "No posts available at the moment.",
loadError: "Unable to load blog posts. Please try again later."
},
'pt-br': {
blogTitle: "Posts do Blog",
readMore: "Leia Mais →",
footer: "© 2025 Brawling the Bits",
noPosts: "Nenhum post disponível no momento.",
loadError: "Não foi possível carregar os posts. Por favor, tente novamente mais tarde."
}
};
// Development mode posts (fallback content)
const devPosts = {
posts: [
{
id: "dev-1",
url: "#",
date: "2025-01-30",
title: {
en: "Development Post 1",
"pt-br": "Post de Desenvolvimento 1"
},
excerpt: {
en: "This is a development mode post...",
"pt-br": "Este é um post do modo de desenvolvimento..."
},
tags: ["dev"]
}
]
};
// Function to load blog posts
// Function to load blog posts
async function loadBlogPosts() {
try {
// Try to fetch the local index.json from the posts directory
const response = await fetch('./posts/index.json');
console.log('Attempting to fetch posts...');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Loaded posts:', data); // Debug log
displayPosts(data.posts);
} catch (error) {
console.error('Error loading blog posts:', error);
// Show error message in current language
const currentLang = languageSelect.value;
blogGrid.innerHTML = `<p class="blog-grid__message">${translations[currentLang].loadError}</p>`;
}
}
// Function to display posts
function displayPosts(posts) {
if (!posts || posts.length === 0) {
const currentLang = languageSelect.value;
blogGrid.innerHTML = `<p class="blog-grid__message">${translations[currentLang].noPosts}</p>`;
return;
}
// Clear existing posts
blogGrid.innerHTML = '';
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Create post elements
posts.forEach(post => {
const currentLang = languageSelect.value;
const postElement = createPostElement(post, currentLang);
blogGrid.appendChild(postElement);
});
}
// Function to create a post element
function createPostElement(post, lang) {
const article = document.createElement('article');
article.className = 'blog-post';
const title = post.title[lang] || post.title.en; // Fallback to English
const excerpt = post.excerpt[lang] || post.excerpt.en;
const date = new Date(post.date).toLocaleDateString(
lang === 'pt-br' ? 'pt-BR' : 'en-US',
{ year: 'numeric', month: 'long', day: 'numeric' }
);
article.innerHTML = `
<h2 class="blog-post__title">${title}</h2>
<div class="blog-post__date">${date}</div>
<p class="blog-post__excerpt">${excerpt}</p>
<a href="${post.url}" class="blog-post__link">${translations[lang].readMore}</a>
`;
return article;
}
function updateLanguage(lang) {
document.documentElement.lang = lang;
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[lang] && translations[lang][key]) {
element.innerHTML = translations[lang][key];
}
});
localStorage.setItem('language', lang);
loadBlogPosts(); // Reload posts with new language
}
languageSelect.addEventListener('change', (e) => {
updateLanguage(e.target.value);
});
// Load preferences and posts on page load
const savedLang = localStorage.getItem('language') || 'en';
languageSelect.value = savedLang;
updateLanguage(savedLang);
});
</script>
</body>
</html>