Skip to content

Commit 25853ce

Browse files
localhost433localhost433
committed
Styling
darkmode implementation, comment section
1 parent 2aa5fe2 commit 25853ce

5 files changed

Lines changed: 145 additions & 193 deletions

File tree

‎css/about.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,14 @@ footer {
5555
position: relative;
5656
bottom: 0;
5757
width: 100%;
58-
}
58+
}
59+
60+
.dark-mode,
61+
.dark-mode body {
62+
background-color: #0e0e0e;
63+
color: #f1f1f1;
64+
}
65+
66+
.dark-mode a {
67+
color: #88aaff;
68+
}

‎css/post.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -215,16 +215,18 @@ article p {
215215

216216
#comments-list p {
217217
background: #eef;
218-
padding: 0.75rem;
219-
border-radius: 0.75rem;
220-
margin-bottom: 1rem;
218+
padding: 0.8rem 1.2rem;
219+
border-radius: 1rem;
220+
margin-bottom: 1.5rem;
221221
font-size: 1rem;
222222
word-break: break-word;
223+
border-left: 4px solid #3366ff;
223224
}
224225

225226
.dark-mode #comments-list p {
226-
background: #334;
227+
background: #223;
227228
color: #ddeeff;
229+
border-left: 4px solid #88aaff;
228230
}
229231

230232
#comment-form {
@@ -262,4 +264,4 @@ article p {
262264

263265
#comment-form button:hover {
264266
background: #254eda;
265-
}
267+
}

‎css/projects.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,14 @@
5656

5757
.project-card-link:hover {
5858
color: #0056b3;
59-
}
59+
}
60+
61+
.dark-mode,
62+
.dark-mode body {
63+
background-color: #0e0e0e;
64+
color: #f1f1f1;
65+
}
66+
67+
.dark-mode a {
68+
color: #88aaff;
69+
}

‎js/posts.js‎

Lines changed: 84 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,12 @@ fetch('/posts/metadata/entries.json')
3636

3737
// Create tag buttons
3838
const tagButtonsContainer = document.getElementById('tag-buttons');
39-
if (tagButtonsContainer) {
40-
tagsSet.forEach(tag => {
41-
const button = document.createElement('button');
42-
button.className = 'tag-button';
43-
button.textContent = tag;
44-
button.addEventListener('click', () => filterPosts(tag));
45-
tagButtonsContainer.appendChild(button);
46-
});
47-
} else {
39+
if (!tagButtonsContainer) {
4840
console.warn('Tag buttons container not found.');
41+
return;
4942
}
43+
44+
createTagFilter(posts);
5045
})
5146
.catch(error => {
5247
console.error('Failed to load posts:', error);
@@ -60,203 +55,137 @@ function filterPosts(tag) {
6055
});
6156
}
6257

63-
// DOMContentLoaded Event Handler
64-
document.addEventListener("DOMContentLoaded", () => {
65-
const postsList = document.getElementById("posts-list");
66-
const tagButtonsContainer = document.getElementById("tag-buttons");
67-
68-
if (!postsList) return; // Only run on post.html where postsList exists
69-
70-
fetch('/posts/metadata/entries.json')
71-
.then(response => response.json())
72-
.then(posts => {
73-
renderPosts(posts);
74-
createTagFilter(posts);
75-
})
76-
.catch(error => {
77-
console.error('Failed to load posts:', error);
78-
});
79-
80-
function renderPosts(posts, filterTag = null) {
81-
postsList.innerHTML = ''; // Clear old posts first
58+
function renderPosts(posts, filterTag = null) {
59+
const postsList = document.getElementById('posts-list');
60+
if (!postsList) {
61+
console.warn('Posts list container not found.');
62+
return;
63+
}
8264

83-
posts.forEach(post => {
84-
if (filterTag && (!post.tags || !post.tags.includes(filterTag))) {
85-
return; // Skip posts that don't match the filter
86-
}
65+
postsList.innerHTML = ''; // Clear old posts first
8766

88-
const entry = document.createElement("div");
89-
entry.className = "post-entry";
67+
posts.forEach(post => {
68+
if (filterTag && (!post.tags || !post.tags.includes(filterTag))) {
69+
return; // Skip posts that don't match the filter
70+
}
9071

91-
const title = document.createElement("a");
92-
title.href = `post.html?id=${post.slug}`;
93-
title.textContent = post.title;
94-
title.className = "post-title";
72+
const entry = document.createElement('div');
73+
entry.className = 'post-entry';
9574

96-
const meta = document.createElement("div");
97-
meta.className = "post-meta-inline";
98-
meta.textContent = `${post.date}${post.author ? " • by " + post.author : ""}`;
75+
const title = document.createElement('a');
76+
title.href = `post.html?id=${post.slug}`;
77+
title.textContent = post.title;
78+
title.className = 'post-title';
9979

100-
const tagsContainer = document.createElement("div");
101-
tagsContainer.className = "tags-container";
80+
const meta = document.createElement('div');
81+
meta.className = 'post-meta-inline';
82+
meta.textContent = `${post.date}${post.author ? ' • by ' + post.author : ''}`;
83+
if (!filterTag) {
84+
const tagsContainer = document.createElement('div');
85+
tagsContainer.className = 'tags-container';
10286
if (post.tags && post.tags.length > 0) {
10387
post.tags.forEach(tag => {
104-
const tagEl = document.createElement("span");
105-
tagEl.className = "post-tag";
88+
const tagEl = document.createElement('span');
89+
tagEl.className = 'post-tag';
10690
tagEl.textContent = tag;
10791
tagsContainer.appendChild(tagEl);
10892
});
10993
}
94+
}
11095

111-
entry.appendChild(title);
112-
entry.appendChild(meta);
113-
entry.appendChild(tagsContainer);
114-
115-
postsList.appendChild(entry);
116-
});
117-
}
118-
119-
function createTagFilter(posts) {
120-
const allTags = new Set();
121-
posts.forEach(post => {
122-
if (post.tags) {
123-
post.tags.forEach(tag => allTags.add(tag));
124-
}
125-
});
126-
127-
// Add "All" button
128-
const allButton = document.createElement('button');
129-
allButton.className = "tag-button";
130-
allButton.textContent = "All";
131-
allButton.addEventListener('click', () => renderPosts(posts, null));
132-
tagButtonsContainer.appendChild(allButton);
96+
entry.appendChild(title);
97+
entry.appendChild(meta);
98+
entry.appendChild(tagsContainer);
99+
postsList.appendChild(entry);
100+
});
101+
}
133102

134-
// Add buttons for each unique tag
135-
allTags.forEach(tag => {
136-
const button = document.createElement('button');
137-
button.className = "tag-button";
138-
button.textContent = tag;
139-
button.addEventListener('click', () => renderPosts(posts, tag));
140-
tagButtonsContainer.appendChild(button);
141-
});
103+
function createTagFilter(posts) {
104+
const tagButtonsContainer = document.getElementById('tag-buttons');
105+
if (!tagButtonsContainer) {
106+
console.warn('Tag buttons container not found.');
107+
return;
142108
}
143-
});
144-
145-
// Load List of Posts
146-
function loadPostList(postsList) {
147-
fetch("/posts/metadata/entries.json")
148-
.then((res) => {
149-
if (!res.ok) {
150-
throw new Error(`HTTP error ${res.status}`);
151-
}
152-
return res.json();
153-
})
154-
.then((posts) => {
155-
posts.forEach((post) => {
156-
const entry = document.createElement("div");
157-
entry.className = "post-entry";
158-
159-
const title = document.createElement("a");
160-
title.href = `post.html?id=${post.slug}`;
161-
title.textContent = post.title;
162-
title.className = "post-title";
163109

164-
const meta = document.createElement("div");
165-
meta.className = "post-meta-inline";
166-
meta.textContent = `${post.date}${post.author ? " • by " + post.author : ""}`;
167-
168-
const tagsContainer = document.createElement("div");
169-
tagsContainer.className = "tags-container";
170-
if (post.tags && post.tags.length > 0) {
171-
post.tags.forEach(tag => {
172-
const tagEl = document.createElement("span");
173-
tagEl.className = "post-tag";
174-
tagEl.textContent = tag;
175-
tagsContainer.appendChild(tagEl);
176-
});
177-
}
178-
179-
entry.appendChild(title);
180-
entry.appendChild(meta);
181-
entry.appendChild(tagsContainer);
182-
183-
postsList.appendChild(entry);
184-
});
185-
})
186-
.catch((err) => {
187-
console.error("Failed to load blog entries:", err);
188-
postsList.innerHTML = "<p>Unable to load posts at this time.</p>";
189-
});
110+
// Clear existing buttons
111+
tagButtonsContainer.innerHTML = '';
112+
113+
// Add "All" button
114+
const allButton = document.createElement('button');
115+
allButton.className = 'tag-button';
116+
allButton.textContent = 'All';
117+
allButton.addEventListener('click', () => renderPosts(posts, null));
118+
tagButtonsContainer.appendChild(allButton);
119+
120+
// Add buttons for each unique tag
121+
tagsSet.forEach(tag => {
122+
const button = document.createElement('button');
123+
button.className = 'tag-button';
124+
button.textContent = tag;
125+
button.addEventListener('click', () => renderPosts(posts, tag));
126+
tagButtonsContainer.appendChild(button);
127+
});
190128
}
191129

192130
// Load Specific Post
193-
function loadSpecificPost(slug, contentDiv, postsList) {
131+
function loadSpecificPost(slug, contentDiv) {
194132
fetch(`/posts/entries/${slug}.md`)
195-
.then((res) => res.text())
196-
.then((markdown) => {
133+
.then(res => res.text())
134+
.then(markdown => {
197135
const { metadata, body: markdownBody } = parseFrontMatter(markdown);
198136
const html = marked.parse(markdownBody);
199137

200138
// Set page title
201-
document.title = `${metadata.title || "Untitled Post"} - Robin's Blog`;
139+
document.title = `${metadata.title || 'Untitled Post'} - Robin's Blog`;
202140

203141
// Clear and build post content
204-
contentDiv.innerHTML = "";
142+
contentDiv.innerHTML = '';
205143

206-
const titleEl = document.createElement("h1");
207-
titleEl.textContent = metadata.title || "Untitled Post";
144+
const titleEl = document.createElement('h1');
145+
titleEl.textContent = metadata.title || 'Untitled Post';
208146

209-
const metaWrapper = document.createElement("div");
210-
metaWrapper.className = "post-meta";
147+
const metaWrapper = document.createElement('div');
148+
metaWrapper.className = 'post-meta';
211149

212-
const dateEl = document.createElement("span");
213-
dateEl.className = "post-date";
214-
dateEl.textContent = metadata.date || "Unknown date";
150+
const dateEl = document.createElement('span');
151+
dateEl.className = 'post-date';
152+
dateEl.textContent = metadata.date || 'Unknown date';
215153

216-
const authorEl = document.createElement("span");
217-
authorEl.className = "post-author";
218-
authorEl.textContent = ` by ${metadata.author || "Anonymous"}`;
154+
const authorEl = document.createElement('span');
155+
authorEl.className = 'post-author';
156+
authorEl.textContent = ` by ${metadata.author || 'Anonymous'}`;
219157

220158
metaWrapper.appendChild(dateEl);
221159
metaWrapper.appendChild(authorEl);
222160

223-
const bodyContainer = document.createElement("div");
161+
const bodyContainer = document.createElement('div');
224162
bodyContainer.innerHTML = html;
225163

226164
contentDiv.appendChild(titleEl);
227-
if (postsList) {
228-
postsList.style.display = "none";
229-
} else {
230-
console.warn('Posts list not found.');
231-
}
165+
contentDiv.appendChild(metaWrapper);
232166
contentDiv.appendChild(bodyContainer);
233167

234-
// Hide the posts list
235-
if (postsList) {
236-
postsList.style.display = "none";
237-
}
238-
239168
// Render MathJax if available
240169
if (window.MathJax) {
241170
requestAnimationFrame(() => {
242171
try {
243-
if (typeof MathJax.typesetPromise === "function") {
244-
MathJax.typesetPromise([contentDiv]).catch((err) =>
245-
console.error("MathJax render error:", err)
172+
if (typeof MathJax.typesetPromise === 'function') {
173+
MathJax.typesetPromise([contentDiv]).catch(err =>
174+
console.error('MathJax render error:', err)
246175
);
247-
} else if (typeof MathJax.typeset === "function") {
176+
} else if (typeof MathJax.typeset === 'function') {
248177
MathJax.typeset();
249178
} else {
250-
console.warn("MathJax is loaded, but no known typeset method is available.");
179+
console.warn('MathJax is loaded, but no known typeset method is available.');
251180
}
252181
} catch (e) {
253-
console.error("MathJax exception:", e);
182+
console.error('MathJax exception:', e);
254183
}
255184
});
256185
}
257186
})
258-
.catch((err) => {
259-
console.error("Failed to load post:", err);
187+
.catch(err => {
188+
console.error('Failed to load post:', err);
260189
contentDiv.innerHTML = `
261190
<h2>Post Not Found</h2>
262191
<a href="index.html" class="back-link">Back to Home</a>`;

0 commit comments

Comments
 (0)