Styling consistency

Author: localhost433

README.md

@@ -10,14 +10,19 @@ This repository contains the source code for my personal website. The site serve
 - **Dark Mode**: Toggle between light and dark themes.
 - **Math Support**: Render mathematical expressions using MathJax.
 - **Markdown Parsing**: Blog posts are written in Markdown and rendered dynamically.
+- **Pagination & Filtering**: Browse posts by tag or search with pagination.
 
 ## Tech Stack
 
-- **Frontend**: HTML, CSS, JavaScript
+- **Frontend**: HTML, CSS, JavaScript (Vanilla)
 - **Libraries**:
-  - [Marked.js](https://github.com/markedjs/marked) for Markdown parsing
-  - [MathJax](https://www.mathjax.org/) for rendering math
-- **Backend**: Node.js API (serverless) to handle posting and fetching comments
+  - [Marked.js](https://github.com/markedjs/marked) — Markdown parsing
+  - [MathJax](https://www.mathjax.org/) — Math rendering in posts
+  - [DOMPurify](https://github.com/cure53/DOMPurify) — HTML sanitization for user-generated content
+- **Backend**: Node.js (serverless functions via Vercel)
+  - Dynamic comment storage using either:
+    - JSON file (local/dev)
+    - [Vercel KV](https://vercel.com/docs/storage/vercel-kv) (prod)
 
 ## Contact
 

about.html

@@ -49,9 +49,18 @@ <h2>Connect with Me</h2>
 
             <h2>Tech Stack</h2>
             <p>
-                This site is built with vanilla HTML, CSS, and JavaScript.
-                It uses minimal libraries to stay lightweight, with <code>marked.js</code> for Markdown parsing and
-                <code>MathJax</code> for rendering math.
+                This site is built with vanilla HTML, CSS, and JavaScript. It uses minimal dependencies to stay
+                lightweight, including:
+            </p>
+            <ul>
+                <li><code>marked.js</code> – for client-side Markdown rendering</li>
+                <li><code>MathJax</code> – for TeX/LaTeX rendering in posts</li>
+                <li><code>DOMPurify</code> – for safe rendering of user-submitted content</li>
+                <li><code>Vercel KV</code> (optional) – for serverless comment storage</li>
+            </ul>
+            <p>
+                The comment system gracefully falls back to local JSON storage in development mode. Blog entries now use
+                a JSON-based front-matter metadata system.
             </p>
 
             <a href="index.html" class="back-link">Back to Home</a>

blog.html

@@ -33,6 +33,7 @@
         <button id="next-button">Next</button>
     </div>
 
+    <a href="index.html" class="back-link">Back to Home</a>
     <footer id="footer-placeholder"></footer>
     <script type="module" src="js/header-footer.js"></script>
     <script src="js/blog.js"></script>

css/blog.css

@@ -72,6 +72,76 @@
   background-color: #666;
 }
 
+#tag-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.post-entry {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  /* space between entries */
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #ddd;
+}
+
+.dark-mode .post-entry {
+  border-color: #444;
+}
+
+.post-title {
+  flex: 1;
+  font-size: 1.8rem;
+  /* larger title */
+  margin-right: 1rem;
+  color: var(--link-color, #0055aa);
+  text-decoration: none;
+}
+
+.post-title:hover {
+  text-decoration: underline;
+}
+
+.post-meta-inline {
+  text-align: right;
+  font-size: 0.9rem;
+  color: #555;
+  margin-bottom: 0.5rem;
+}
+
+.dark-mode .post-meta-inline {
+  color: #aaa;
+}
+
+.post-entry .post-tag {
+  display: inline-block;
+  background-color: #eee;
+  color: #555;
+  font-size: 0.85rem;
+  border: none;
+  padding: 0.5rem 1rem;
+  margin: 0.2rem 0.3rem 0.2rem 0;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease;
+}
+
+.post-entry .post-tag:hover {
+  background-color: #ddd;
+}
+
+.dark-mode .post-entry .post-tag {
+  background-color: #555;
+  color: #eee;
+}
+
+.dark-mode .post-entry .post-tag:hover {
+  background-color: #666;
+}
+
 /* Search bar */
 #search-box {
   width: 100%;

css/post.css

@@ -83,12 +83,12 @@ article#post-content .post-meta {
 
 /* Dark Mode (Post-specific) */
 .dark-mode #comments-section {
-  background-color: #0055aa;
+  background-color: #001133;
   color: #fff;
 }
 
 .dark-mode #comments-list p {
-  background-color: #0055aa;
+  background-color: #001133;
 }
 
 .dark-mode .comment-author {
@@ -97,7 +97,6 @@ article#post-content .post-meta {
 
 .dark-mode #comment-form button {
   background-color: #333;
-  /* Matches dark-mode theme-toggle */
   color: #eee;
 }
 
@@ -108,7 +107,6 @@ article#post-content .post-meta {
 .dark-mode #comment-form textarea,
 .dark-mode #comment-form input[type="text"] {
   background-color: #555;
-  /* Matches dark-mode input in shared.css */
   color: #eee;
 }
 

js/blog.js

@@ -45,7 +45,7 @@ function renderPosts(posts, filterTag = null) {
 
     const meta = document.createElement("div");
     meta.className = "post-meta-inline";
-    meta.textContent = `${post.date}${post.author ? ` • by ${post.author}` : ""}`;
+    meta.textContent = `${post.date}${post.author ? ` - by ${post.author}` : ""}`;
 
     const tagsDiv = document.createElement("div");
     (post.tags || []).forEach(tag => {

js/post.js

@@ -25,15 +25,16 @@ fetch(`/posts/entries/${slug}.md`)
 
     const h1 = document.createElement("h1"); h1.textContent = meta.title || "Untitled";
     const footerDiv = document.createElement("div");
+
+    const bodyDiv = document.createElement("div"); bodyDiv.innerHTML = html;
+    content.appendChild(bodyDiv);
+
     footerDiv.className = "post-location";
     const author = meta.author || "Anonymous";
     const date = meta.date || "In a fragment of time";
     const loc = meta.location ? ` in ${meta.location}` : "Somewhere on Earth";
     footerDiv.textContent = `${author}, ${date}${loc}`;
-
     content.append(h1, footerDiv);
-    const bodyDiv = document.createElement("div"); bodyDiv.innerHTML = html;
-    content.appendChild(bodyDiv);
 
     /* MathJax render if present */
     if (window.MathJax) { window.MathJax.typesetPromise?.([content]); }

projects.html

@@ -35,7 +35,6 @@ <h1>Projects</h1>
 
     <footer id="footer-placeholder"></footer>
 
-    <script src="js/theme.js"></script>
     <script type="module" src="js/header-footer.js"></script>
     <script src="js/projects.js"></script>
 </body>