Skip to content

Commit 0faec05

Browse files
kaustubhharapanahallikaustubhharapanahalli
committed
feat: add bookmarks page with styling and functionality
1 parent 8e04b7f commit 0faec05

3 files changed

Lines changed: 146 additions & 0 deletions

File tree

‎src/components/react/Bookmarks.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.bookmarks-page {
2+
min-height: 100vh;
3+
margin: 0;
4+
padding: 3rem 1.5rem;
5+
background: #0f172a;
6+
color: #e2e8f0;
7+
font-family:
8+
-apple-system,
9+
BlinkMacSystemFont,
10+
"Segoe UI",
11+
Roboto,
12+
sans-serif;
13+
}
14+
15+
.bookmarks-header {
16+
max-width: 640px;
17+
margin: 0 auto 2.5rem;
18+
}
19+
20+
.bookmarks-header h1 {
21+
font-size: 1.75rem;
22+
font-weight: 700;
23+
margin: 0 0 0.5rem;
24+
}
25+
26+
.bookmarks-header p {
27+
margin: 0;
28+
color: #94a3b8;
29+
}
30+
31+
.bookmarks-group {
32+
max-width: 640px;
33+
margin: 0 auto 2rem;
34+
}
35+
36+
.bookmarks-group h2 {
37+
font-size: 1rem;
38+
font-weight: 600;
39+
text-transform: uppercase;
40+
letter-spacing: 0.04em;
41+
color: #64748b;
42+
margin: 0 0 0.75rem;
43+
}
44+
45+
.bookmarks-group ul {
46+
list-style: none;
47+
margin: 0;
48+
padding: 0;
49+
}
50+
51+
.bookmarks-group li {
52+
padding: 0.6rem 0;
53+
border-bottom: 1px solid #1e293b;
54+
}
55+
56+
.bookmarks-group a {
57+
color: #60a5fa;
58+
text-decoration: none;
59+
font-weight: 500;
60+
}
61+
62+
.bookmarks-group a:hover {
63+
text-decoration: underline;
64+
}
65+
66+
.bookmarks-desc {
67+
color: #94a3b8;
68+
font-size: 0.9rem;
69+
}

‎src/components/react/Bookmarks.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import "./Bookmarks.css";
2+
3+
interface BookmarkLink {
4+
label: string;
5+
url: string;
6+
description?: string;
7+
}
8+
9+
interface BookmarkGroup {
10+
category: string;
11+
links: BookmarkLink[];
12+
}
13+
14+
// Add/edit your links here — grouped by category.
15+
const BOOKMARK_GROUPS: BookmarkGroup[] = [
16+
{
17+
category: "General",
18+
links: [
19+
{
20+
label: "Example Link",
21+
url: "https://example.com",
22+
description: "Replace this with a real bookmark",
23+
},
24+
],
25+
},
26+
];
27+
28+
export default function Bookmarks() {
29+
return (
30+
<div className="bookmarks-page">
31+
<header className="bookmarks-header">
32+
<h1>Bookmarks</h1>
33+
<p>Personal links &amp; resources.</p>
34+
</header>
35+
36+
<main>
37+
{BOOKMARK_GROUPS.map((group) => (
38+
<section className="bookmarks-group" key={group.category}>
39+
<h2>{group.category}</h2>
40+
<ul>
41+
{group.links.map((link) => (
42+
<li key={link.url}>
43+
<a href={link.url} target="_blank" rel="noopener noreferrer">
44+
{link.label}
45+
</a>
46+
{link.description && (
47+
<span className="bookmarks-desc">
48+
{" "}
49+
— {link.description}
50+
</span>
51+
)}
52+
</li>
53+
))}
54+
</ul>
55+
</section>
56+
))}
57+
</main>
58+
</div>
59+
);
60+
}

‎src/pages/bookmarks.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import BookmarksApp from "../components/react/Bookmarks";
3+
---
4+
5+
<!doctype html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<!-- Intentionally unlisted: not linked from any nav, excluded from search engines and site search. -->
11+
<meta name="robots" content="noindex, nofollow" />
12+
<title>Bookmarks</title>
13+
</head>
14+
<body data-pagefind-ignore>
15+
<BookmarksApp client:load />
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)