Updated Comments/Blog

Solving bug not displaying blogs, better styling overall

Author: localhost433

.gitignore

@@ -0,0 +1,27 @@
+# Node.js dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Logs
+logs/
+*.log
+*.log.*
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.swp
+*.swo
+*.bak
+
+# Build output
+dist/
+build/
+
+# Git files
+.git/

README.md

@@ -1,2 +1,27 @@
-# ~
-Repository for a personal site.
+# Robin's Personal Site
+
+This repository contains the source code for my personal website. The site serves as a platform to share my thoughts, projects, and other content I find interesting.
+
+## Features
+
+- **Blog**: Posts about various topics, including school, life, and random ideas.
+- **Projects**: A showcase of personal projects and experiments.
+- **Comments**: Visitors can leave comments on posts, with support for author names and timestamps.
+- **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.
+
+## Tech Stack
+
+- **Frontend**: HTML, CSS, JavaScript
+- **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
+
+## Contact
+
+Feel free to reach out via:
+
+- **Email**: robinchen@nyu.edu
+- **Github**: [localhost433](https://github.com/localhost433)

about.html

@@ -37,10 +37,13 @@ <h2>What You Might Find Here</h2>
             <h2>Connect with Me</h2>
             <p>
                 You can find me here:
+            </p>
             <ul>
                 <li><a href="https://github.com/localhost433" target="_blank">GitHub</a></li>
                 <li><a href="https://www.linkedin.com/in/robin-chen-a494542b7/" target="_blank">LinkedIn</a></li>
             </ul>
+            <p>
+                Or you can email me at <a href="mailto: robinchen@nyu.edu">robinchen@nyu.edu</a>
             </p>
 
             <h2>Tech Stack</h2>

api/comments.js

@@ -2,6 +2,11 @@
 export default async function handler(req, res) {
     const fs = require('fs');
     const path = require('path');
+
+    // Ensure the request body is parsed
+    if (req.method === 'POST' && !req.body) {
+        return res.status(400).json({ error: "Invalid or missing request body" });
+    }
 
     const filePath = path.join(process.cwd(), 'comments.json');
 
@@ -28,13 +33,14 @@ export default async function handler(req, res) {
         if (!data[slug]) {
             data[slug] = [];
         }
+        const timestamp = Date.now();
         data[slug].push({
             text,
-            timestamp: Date.now(),
+            timestamp,
         });
 
         fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
-        return res.status(201).json({ text, timestamp: Date.now() });
+        return res.status(201).json({ text, timestamp });
     }
 
     res.setHeader('Allow', ['GET', 'POST']);

components/footer.html

@@ -1,3 +1,3 @@
 <footer>
-    <p style="text-align:center; font-size:0.9rem; color:#777;">&copy; 2025 Robin. All rights reserved.</p>
+    <small style="text-align:center; font-size:0.9rem; color:#777; display:block;">&copy; 2025 Robin. All rights reserved.</small>
 </footer>

components/header.html

@@ -8,4 +8,5 @@
 <div class="header-row">
     <p>Welcome! Sharing ideas, projects, school notes, and more.</p>
     <button id="theme-toggle">Dark Mode</button>
+</div>
 </div>

css/about.css

@@ -0,0 +1,58 @@
+/* about.css */
+
+/* General styles for the about page */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+    color: #333;
+}
+
+header {
+    background-color: #4CAF50;
+    color: white;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.5em;
+    margin: 20px 0;
+}
+
+p {
+    line-height: 1.6;
+    margin: 10px 20px;
+}
+
+/* Section styles */
+section {
+    margin: 20px auto;
+    max-width: 800px;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Links */
+a {
+    color: #4CAF50;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Footer styles */
+footer {
+    text-align: center;
+    padding: 10px;
+    background-color: #333;
+    color: white;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+}

css/home.css

@@ -10,28 +10,29 @@ body {
 }
 
 a {
-  color: #0044cc;
+  color: #0055aa;
   text-decoration: none;
   font-weight: 600;
 }
 
-a:hover {
+a:hover,
+a:focus {
   text-decoration: underline;
 }
 
 /* Header */
 header h1,
 .header-title {
-  font-size: 2.1rem;
+  font-size: 2rem;
   color: #000;
-  margin-bottom: 0.3rem;
+  margin-bottom: 0.5rem;
 }
 
 header p,
 .header-row p {
-  font-size: 1.3rem;
-  color: #444;
-  margin-bottom: 1.1rem;
+  font-size: 1.2rem;
+  color: #555;
+  margin-bottom: 1rem;
 }
 
 .header-row {
@@ -43,20 +44,24 @@ header p,
 
 /* Post Listing */
 #posts-list {
-  margin-top: 2.1rem;
+  margin-top: 2rem;
 }
 
 .post-entry {
-  margin-bottom: 2.1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
 }
 
 .post-entry a {
-  font-size: 1.3rem;
+  font-size: 1.2rem;
 }
 
 .post-date,
 .post-meta {
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   color: #777;
 }
 
@@ -66,28 +71,45 @@ header p,
 }
 
 .post-author {
-  color: #444;
+  color: #555;
+}
+
+.post-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: #0055aa;
+  text-decoration: none;
+}
+
+.post-title:hover {
+  text-decoration: underline;
+}
+
+.post-meta-inline {
+  font-size: 0.85rem;
+  color: #777;
+  margin-left: 1rem;
 }
 
 /* Individual Post */
 article {
-  margin-top: 3.4rem;
+  margin-top: 3rem;
 }
 
 article h1,
 article h2 {
   color: #000;
-  margin: 1.3rem 0;
+  margin: 1.5rem 0;
 }
 
 article p {
-  margin-bottom: 1.3rem;
+  margin-bottom: 1.2rem;
 }
 
 /* Back Link */
 .back-link {
   display: block;
-  margin-top: 2.1rem;
+  margin-top: 2rem;
   color: #555;
 }
 
@@ -140,32 +162,6 @@ article p {
   color: #bbbbbb;
 }
 
-.post-entry {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.3rem;
-  flex-wrap: wrap;
-  /* Allow wrapping on smaller screens */
-}
-
-.post-title {
-  font-weight: bold;
-  font-size: 1.3rem;
-  color: #0055aa;
-  text-decoration: none;
-}
-
-.post-title:hover {
-  text-decoration: underline;
-}
-
-.post-meta-inline {
-  font-size: 0.85rem;
-  color: #888;
-  margin-left: 1rem;
-}
-
 .dark-mode .post-meta-inline {
-  color: #bbb;
+  color: #bbbbbb;
 }