Skip to content

Commit 348a78b

Browse files
khaykinglebkhaykingleb
committed
style: 🎨
1 parent da3305a commit 348a78b

File tree

5 files changed

+68
-22
lines changed

5 files changed

+68
-22
lines changed

‎app/components/organisms/Carousel.tsx

+23-16
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,30 @@ export const Carousel = ({ items }: { items: Post[] }) => {
1313
key={item.id}
1414
className="carousel-item block w-full cursor-pointer transition-all duration-300 hover:bg-gray-100"
1515
>
16-
<div className="w-full p-3">
17-
<h2 className="font-gill-sans-semibold mb-1 text-lg">
18-
{item.title}
19-
</h2>
20-
<p className="font-gill-sans-regular mb-2 text-sm">
21-
Created at {item.publishDate.replace(/-/g, "/")}
22-
</p>
23-
<div className="font-gill-sans-regular">
24-
{item.tags.map((tag) => (
25-
<span
26-
key={tag}
27-
className="badge badge-ghost mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
28-
>
29-
{tag}
30-
</span>
31-
))}
16+
<div className="flex w-full p-3">
17+
<div className="flex-grow">
18+
<h2 className="font-gill-sans-semibold mb-1 text-base sm:text-lg">
19+
{item.title}
20+
</h2>
21+
<p className="font-gill-sans-regular mb-2 text-sm">
22+
Created at {item.publishDate.replace(/-/g, "/")}
23+
</p>
24+
<div className="font-gill-sans-regular">
25+
{item.tags.map((tag) => (
26+
<span
27+
key={tag}
28+
className="badge badge-ghost mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
29+
>
30+
{tag}
31+
</span>
32+
))}
33+
</div>
3234
</div>
35+
<img
36+
src={item.imageUrl}
37+
alt={item.title}
38+
className="h-28 w-auto"
39+
/>
3340
</div>
3441
</Link>
3542
))}

‎app/components/organisms/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Header = ({ backgroundImage }: HeaderProps) => {
1515
}}
1616
></div>
1717
<div className="absolute inset-0 bg-gradient-to-b from-black/20 to-black/20"></div>
18-
<div className="font-gill-sans-bold relative z-10 mx-auto flex w-full max-w-[720px] items-center justify-between text-white">
18+
<div className="font-gill-sans-bold relative z-10 mx-auto flex w-full max-w-[750px] items-center justify-between text-white">
1919
<span className="text-xl sm:text-2xl">~/khaykingleb</span>
2020
<nav className="hidden sm:block">
2121
<MenuItems />

‎app/data/posts.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,40 @@ export const posts: Post[] = [
1919
slug: "introduction-to-digital-signal-processing",
2020
publishDate: "2024-09-22",
2121
},
22+
{
23+
id: 2,
24+
imageUrl: "/img/posts/introduction-to-digital-signal-processing.webp",
25+
title: "Introduction to Digital Signal Processing",
26+
tags: ["notes", "speech", "dsp"],
27+
notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
28+
slug: "introduction-to-digital-signal-processing",
29+
publishDate: "2024-09-22",
30+
},
31+
{
32+
id: 3,
33+
imageUrl: "/img/posts/introduction-to-digital-signal-processing.webp",
34+
title: "Introduction to Digital Signal Processing",
35+
tags: ["notes", "speech", "dsp"],
36+
notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
37+
slug: "introduction-to-digital-signal-processing",
38+
publishDate: "2024-09-22",
39+
},
40+
{
41+
id: 4,
42+
imageUrl: "/img/posts/introduction-to-digital-signal-processing.webp",
43+
title: "Introduction to Digital Signal Processing",
44+
tags: ["notes", "speech", "dsp"],
45+
notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
46+
slug: "introduction-to-digital-signal-processing",
47+
publishDate: "2024-09-22",
48+
},
49+
{
50+
id: 5,
51+
imageUrl: "/img/posts/introduction-to-digital-signal-processing.webp",
52+
title: "Introduction to Digital Signal Processing",
53+
tags: ["notes", "speech", "dsp"],
54+
notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
55+
slug: "introduction-to-digital-signal-processing",
56+
publishDate: "2024-09-22",
57+
},
2258
];

‎app/routes/blog.$slug.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export default function BlogPostRoute() {
153153
<div className="flex min-h-screen flex-col">
154154
<Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
155155
<main className="flex-grow px-4 sm:px-6 lg:px-8">
156-
<div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[720px] flex-col">
156+
<div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[750px] flex-col">
157157
<Suspense fallback={<LoadingSpinner />}>
158158
<Await resolve={recordMap}>
159159
{(resolvedRecordMap: ExtendedRecordMap) => {

‎app/routes/blog._index.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,11 @@ export const meta: MetaFunction = () => {
3131
];
3232
};
3333

34+
const MAX_POSTS_PER_PAGE_DESKTOP = 4;
35+
const MAX_POSTS_PER_PAGE_MOBILE = 3;
36+
3437
export default function BlogRoute() {
35-
const [postsPerPage, setPostsPerPage] = useState(5);
38+
const [postsPerPage, setPostsPerPage] = useState(MAX_POSTS_PER_PAGE_DESKTOP);
3639
const [currentPage, setCurrentPage] = useState(0);
3740
const [tagOptions, setTagOptions] = useState(
3841
Array.from(new Set(posts.flatMap((post) => post.tags)))
@@ -62,9 +65,9 @@ export default function BlogRoute() {
6265
useEffect(() => {
6366
const updatePostsPerPage = () => {
6467
if (window.matchMedia("(min-height: 800px)").matches) {
65-
setPostsPerPage(5);
68+
setPostsPerPage(MAX_POSTS_PER_PAGE_DESKTOP);
6669
} else {
67-
setPostsPerPage(3);
70+
setPostsPerPage(MAX_POSTS_PER_PAGE_MOBILE);
6871
}
6972
};
7073

@@ -89,7 +92,7 @@ export default function BlogRoute() {
8992
<div className="flex min-h-screen flex-col">
9093
<Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
9194
<main className="flex flex-grow flex-col px-4 sm:px-6 lg:px-8">
92-
<div className="mx-auto flex h-full w-full max-w-[720px] flex-grow flex-col">
95+
<div className="mx-auto flex h-full w-full max-w-[750px] flex-grow flex-col">
9396
<TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />
9497
<div className="flex-grow">
9598
<Carousel

0 commit comments

Comments
 (0)