Skip to content

Commit fcd8a52

Browse files
seeReadCodeseeReadCode
committed
hide img, set font, and remove some categories
1 parent 63d2fec commit fcd8a52

File tree

3 files changed

+55
-41
lines changed

3 files changed

+55
-41
lines changed

‎app/globals.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,13 @@
1515
body {
1616
color: var(--foreground);
1717
background: var(--background);
18-
font-family: Arial, Helvetica, sans-serif;
18+
/* font-family: Arial, Helvetica, sans-serif; */
1919
}
20+
21+
.hide-img img {
22+
display: none;
23+
}
24+
25+
.hide-br br {
26+
display: none;
27+
}

‎app/layout.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
2+
import { Inter, Fira_Mono } from "next/font/google";
33
import "./globals.css";
44

5-
const geistSans = Geist({
6-
variable: "--font-geist-sans",
5+
const inter = Inter({
6+
variable: "--font-inter",
77
subsets: ["latin"],
88
});
99

10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
10+
const firaMono = Fira_Mono({
11+
variable: "--font-fira-mono",
1212
subsets: ["latin"],
13+
weight: ["400", "500", "700"],
1314
});
1415

1516
export const metadata: Metadata = {
@@ -25,7 +26,8 @@ export default function RootLayout({
2526
return (
2627
<html lang="en">
2728
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29+
className={`${firaMono.className} antialiased`}
30+
// className={`${inter.className} antialiased`}
2931
>
3032
{children}
3133
</body>

‎app/page.tsx‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -31,45 +31,49 @@ export default async function Page() {
3131
};
3232
}
3333
return (
34-
<div className="container mx-auto px-4 py-8">
35-
<h1 className="text-3xl font-bold mb-6">bookmarks&nbsp;
36-
<a className="text-xl text-blue-600 hover:text-blue-800" href={RSS_FEED_URL}>rss</a>
37-
</h1>
38-
<p className="text-gray-600 mb-8">{myBlog.feed.description}</p>
39-
<p className="text-sm text-gray-500 mb-8">Last updated: {myBlog.lastUpdated}</p>
40-
<div className="space-y-6">
34+
<div className="max-w-2xl mx-auto px-4 py-8 bg-white dark:bg-gray-900">
35+
<header className="flex items-center justify-between mb-2">
36+
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">bookmarks</h1>
37+
<a className="text-base text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline" href={RSS_FEED_URL}>rss</a>
38+
</header>
39+
<p className="text-gray-600 dark:text-gray-300 mb-2 text-lg">{myBlog.feed.description}</p>
40+
<p className="text-xs text-gray-400 dark:text-gray-500 mb-3">as of {myBlog.lastUpdated}</p>
41+
<div className="divide-y divide-gray-200 dark:divide-gray-700">
4142
{myBlog.feed.items.map((item, index) => (
42-
<article key={item.guid || index} className="border-b pb-6">
43-
<h2 className="text-xl font-semibold mb-2">
44-
<a
45-
href={item.link}
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
className="text-blue-600 hover:text-blue-800"
49-
>
50-
{item.title}
51-
</a>
52-
</h2>
43+
<article key={item.guid || index} className="py-6 flex flex-col gap-2">
44+
<div className="flex items-center gap-2">
45+
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100">
46+
<a
47+
href={item.link}
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline"
51+
>
52+
{item.title}
53+
</a>
54+
</h2>
55+
{item.categories && item.categories.length > 0 && (
56+
<div className="flex flex-wrap gap-1 ml-2">
57+
{item.categories.map(category => (
58+
!["article", "link", "book", "document"].includes(category.toLowerCase()) &&
59+
<span
60+
key={category}
61+
className="bg-gray-200 dark:bg-gray-700 rounded-full px-2 py-0.5 text-xs font-medium text-gray-700 dark:text-gray-200"
62+
>
63+
{category}
64+
</span>
65+
))}
66+
</div>
67+
)}
68+
</div>
5369
<div
54-
className="text-gray-700 mb-2"
70+
className="text-gray-700 dark:text-gray-300 text-sm hide-br hide-img"
5571
dangerouslySetInnerHTML={{ __html: item.description }}
5672
/>
57-
<div className="text-sm text-gray-500">
58-
{item.pubDate && <span>Published: {new Date(item.pubDate).toLocaleDateString()}</span>}
59-
{item.author && <span className="ml-4">By: {item.author}</span>}
73+
<div className="flex items-center text-xs text-gray-500 dark:text-gray-400 gap-4 mt-1">
74+
{item.pubDate && <span>added {new Date(item.pubDate).toLocaleDateString()}</span>}
75+
{item.author && <span>by {item.author}</span>}
6076
</div>
61-
{item.categories && item.categories.length > 0 && (
62-
<div className="mt-2">
63-
{item.categories.map(category => (
64-
<span
65-
key={category}
66-
className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
67-
>
68-
{category}
69-
</span>
70-
))}
71-
</div>
72-
)}
7377
</article>
7478
))}
7579
</div>

0 commit comments

Comments
 (0)