Skip to content

Commit dcd92cf

Browse files
localhost433localhost433
committed
Changes frontend/backend logic
1 parent 41132cf commit dcd92cf

16 files changed

Lines changed: 364 additions & 182 deletions

‎about.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ <h2>Tech Stack</h2>
6161
<footer id="footer-placeholder"></footer>
6262

6363
<script type="module" src="js/header-footer.js"></script>
64-
<script src="js/theme.js"></script>
6564
</body>
6665

6766
</html>

‎api/comments.js‎

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
11
// /api/comments.js
2-
export default async function handler(req, res) {
3-
const fs = require('fs');
4-
const path = require('path');
52

6-
// Ensure the request body is parsed
3+
import fs from "fs";
4+
import path from "path";
5+
import { kv } from "@vercel/kv";
6+
import sanitizeHtml from "sanitize-html";
7+
8+
const USE_KV = process.env.USE_KV === "true";
9+
10+
function filePath() { return path.join(process.cwd(), "comments.json"); }
11+
12+
async function readComments(slug) {
13+
if (USE_KV) return (await kv.get(`comments:${slug}`)) || [];
14+
if (!fs.existsSync(filePath())) fs.writeFileSync(filePath(), "{}");
15+
const data = JSON.parse(fs.readFileSync(filePath(), "utf8"));
16+
return data[slug] || [];
17+
}
18+
19+
async function writeComments(slug, arr) {
20+
if (USE_KV) return kv.set(`comments:${slug}`, arr);
21+
const data = fs.existsSync(filePath())
22+
? JSON.parse(fs.readFileSync(filePath(), "utf8"))
23+
: {};
24+
data[slug] = arr;
25+
fs.writeFileSync(filePath(), JSON.stringify(data, null, 2));
26+
}
27+
28+
export default async function handler(req, res) {
729
if (req.method === 'POST' && !req.body) {
830
return res.status(400).json({ error: "Invalid or missing request body" });
931
}
10-
11-
const filePath = path.join(process.cwd(), 'comments.json');
12-
13-
// Ensure file exists
14-
if (!fs.existsSync(filePath)) {
15-
fs.writeFileSync(filePath, '{}');
16-
}
17-
18-
const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
1932

2033
if (req.method === 'GET') {
2134
const { slug } = req.query;
2235
if (!slug) {
2336
return res.status(400).json({ error: "Missing slug" });
2437
}
25-
return res.status(200).json(data[slug] || []);
38+
const comments = await readComments(slug);
39+
return res.status(200).json(comments);
2640
}
2741

2842
if (req.method === 'POST') {
2943
const { slug, text } = req.body;
3044
if (!slug || !text) {
3145
return res.status(400).json({ error: "Missing slug or text" });
3246
}
33-
if (!data[slug]) {
34-
data[slug] = [];
35-
}
36-
const timestamp = Date.now();
37-
data[slug].push({
38-
text,
39-
timestamp,
47+
48+
const sanitizedText = sanitizeHtml(text, {
49+
allowedTags: [],
50+
allowedAttributes: {},
4051
});
4152

42-
fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
43-
return res.status(201).json({ text, timestamp });
53+
const timestamp = Date.now();
54+
const comments = await readComments(slug);
55+
comments.push({ text: sanitizedText, timestamp });
56+
await writeComments(slug, comments);
57+
return res.status(201).json({ text: sanitizedText, timestamp });
4458
}
4559

4660
res.setHeader('Allow', ['GET', 'POST']);

‎blog.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@
2525
<strong>Filter by Tag:</strong>
2626
<div id="tag-buttons"></div>
2727
</section>
28+
<input id="search-box" placeholder="Search by title.">
2829

2930
<section id="posts-list"></section>
31+
<div id="pagination">
32+
<button id="prev-button">Previous</button>
33+
<button id="next-button">Next</button>
34+
</div>
3035

3136
<footer id="footer-placeholder"></footer>
32-
33-
<!-- necessary script order: -->
34-
<script src="js/theme.js"></script>
3537
<script type="module" src="js/header-footer.js"></script>
3638
<script src="js/blog.js"></script>
3739
</body>

‎css/blog.css‎

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
.post-meta-inline {
2424
display: block;
2525
font-size: 0.9rem;
26-
color: #777;
26+
color: #555;
2727
margin-bottom: 0.5rem;
2828
}
2929

@@ -32,12 +32,93 @@
3232
margin-top: 0.5rem;
3333
}
3434

35+
.tag-button {
36+
position: relative;
37+
z-index: 0;
38+
height: 3rem;
39+
background-color: #88bbff;
40+
padding: 0 1.5rem;
41+
color: #000;
42+
text-align: center;
43+
line-height: 3rem;
44+
overflow: hidden;
45+
transition: transform 0.2s, background-color 0.2s ease;
46+
}
47+
48+
.tag-button::after {
49+
content: '';
50+
position: absolute;
51+
left: 0;
52+
top: 0;
53+
z-index: -10;
54+
height: 100%;
55+
width: 100%;
56+
background-color: #88bbff;
57+
transform: scale(1);
58+
opacity: 1;
59+
transition: transform 0.5s, opacity 0.5s;
60+
}
61+
62+
.tag-button:active {
63+
transform: scale(0.95);
64+
}
65+
66+
.tag-button:active::after {
67+
transform: scale(1.25, 1.5);
68+
opacity: 0;
69+
}
70+
3571
.tag-button.selected {
36-
background-color: #99ccff;
37-
color: #fff;
72+
background-color: #3399ff;
3873
}
3974

4075
.dark-mode .tag-button.selected {
4176
background-color: #0055aa;
4277
color: #fff;
78+
}
79+
80+
/* Prev/Next buttons */
81+
#posts-navigation {
82+
display: flex;
83+
justify-content: space-between;
84+
margin-top: 2rem;
85+
}
86+
87+
#prev-button,
88+
#next-button {
89+
padding: 0.75rem 1.5rem;
90+
background-color: #88bbff;
91+
color: #000;
92+
border: none;
93+
text-decoration: none;
94+
text-align: center;
95+
transition: background-color 0.3s;
96+
}
97+
98+
#prev-button:hover,
99+
#next-button:hover {
100+
background-color: #3399ff;
101+
}
102+
103+
#prev-button:disabled,
104+
#next-button:disabled {
105+
background-color: #ccc;
106+
cursor: not-allowed;
107+
}
108+
109+
.dark-mode #prev-button,
110+
.dark-mode #next-button {
111+
background-color: #0055aa;
112+
color: #fff;
113+
}
114+
115+
.dark-mode #prev-button:hover,
116+
.dark-mode #next-button:hover {
117+
background-color: #003377;
118+
}
119+
120+
.dark-mode #prev-button:disabled,
121+
.dark-mode #next-button:disabled {
122+
background-color: #555;
123+
cursor: not-allowed;
43124
}

‎css/post.css‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ article#post-content h1 {
1414

1515
article#post-content .post-meta {
1616
font-size: 0.9rem;
17-
color: #777;
17+
color: #555;
1818
margin-bottom: 1.5rem;
1919
}
2020

@@ -27,53 +27,81 @@ article#post-content .post-meta {
2727
#comments-section {
2828
margin-top: 3rem;
2929
padding: 1.5rem;
30-
background-color: #bbb;
30+
background-color: #def;
3131
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
3232
}
3333

3434
#comments-list p {
35-
background-color: #bbb;
35+
background-color: #fff;
3636
padding: 0.8rem 1.2rem;
3737
margin-bottom: 1rem;
3838
}
3939

40+
.comment-author {
41+
font-weight: 600;
42+
color: #0055aa;
43+
}
44+
4045
#comment-form {
4146
margin-top: 1.5rem;
4247
}
4348

4449
#comment-form button {
4550
align-self: flex-start;
46-
background-color: #bbb;
47-
color: #000;
51+
background-color: #99ccff;
52+
color: #0055aa;
53+
border: none;
54+
padding: 0.5rem 1rem;
55+
cursor: pointer;
56+
transition: background-color 0.2s ease;
57+
}
58+
59+
#comment-form button:hover {
60+
background-color: #88bbff;
4861
}
4962

5063
#comment-form textarea {
51-
background-color: #bbb;
64+
background-color: #fff;
5265
color: #000;
66+
padding: 0.8rem;
67+
}
68+
69+
.post-location {
70+
font-size: 0.9rem;
71+
color: #555;
72+
margin: 1.5rem 0 0;
73+
text-align: right;
5374
}
5475

5576
/* ==========================================================================
5677
DARK MODE (POST-SPECIFIC)
5778
========================================================================== */
5879
.dark-mode #comments-section {
59-
background-color: #444;
80+
background-color: #0055aa;
81+
color: #fff;
6082
}
6183

6284
.dark-mode #comments-list p {
63-
background-color: #444;
85+
background-color: #0055aa;
86+
}
87+
88+
.dark-mode .comment-author {
89+
color: #def;
6490
}
6591

6692
.dark-mode #comment-form button {
67-
background-color: #444;
93+
background-color: #0055aa;
6894
color: #def;
6995
}
7096

7197
.dark-mode #comment-form button:hover {
72-
background-color: #555;
98+
background-color: #0055aa;
99+
/* Updated hover color */
73100
}
74101

75102
.dark-mode #comment-form textarea {
76-
background-color: #444;
103+
background-color: #0055aa;
104+
/* Updated to match dark mode styles */
77105
color: #eee;
78106
}
79107

‎css/projects.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
.project-card {
1515
flex: 1 1 calc(33.333% - 20px);
1616
background-color: #fff;
17-
border: 1px solid #ddd;
18-
border-radius: 0.8rem;
1917
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2018
overflow: hidden;
2119
transition: transform 0.2s ease, box-shadow 0.2s ease;

‎css/shared.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ button,
9393
font-size: 1rem;
9494
padding: 0.5rem 1rem;
9595
border: none;
96-
background-color: #def;
96+
background-color: #99ccff;
9797
color: #0055aa;
9898
cursor: pointer;
9999
transition: background-color 0.2s ease;

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828

2929
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
3030
<script type="module" src="js/header-footer.js"></script>
31-
<script src="js/theme.js"></script>
3231

3332
</body>
3433

0 commit comments

Comments
 (0)