Skip to content

Commit 2acec7a

Browse files
lukadev-0lukadev-0
committed
feat: updated blog index page
1 parent 4a9bd33 commit 2acec7a

File tree

1 file changed

+69
-54
lines changed

1 file changed

+69
-54
lines changed

‎src/pages/blog/index.astro

+69-54
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getCollection } from "astro:content";
44
import RootLayout from "../../layouts/RootLayout.astro";
55
66
const allBlogPosts = (await getCollection("blog")).sort(
7-
(a, b) => b.data.date.getTime() - a.data.date.getTime()
7+
(a, b) => b.data.date.getTime() - a.data.date.getTime(),
88
);
99
---
1010

@@ -18,70 +18,85 @@ const allBlogPosts = (await getCollection("blog")).sort(
1818
}}
1919
>
2020
<Layout>
21-
<div class="flex items-center mt-24 mb-10">
22-
<h1 class="text-5xl font-bold">blog</h1>
23-
<a
24-
href="/rss.xml"
25-
aria-label="RSS feed"
26-
class="ml-auto p-2 rounded-md bg-neutral-950/50 hover:bg-neutral-950 border border-neutral-800 transition"
27-
>
28-
<svg
29-
xmlns="http://www.w3.org/2000/svg"
30-
viewBox="0 0 20 20"
31-
fill="currentColor"
32-
class="w-5 h-5"
21+
<div class="text-center mt-24 mb-16">
22+
<h1 class="text-5xl font-bold mb-4">blog</h1>
23+
<p class="text-neutral-400 sm:text-lg mb-6">
24+
my thoughts on software development.
25+
</p>
26+
<div>
27+
<a
28+
href="/rss.xml"
29+
class="inline-flex items-center text-sm font-semibold px-3 py-2.5 border border-neutral-800 hover:bg-neutral-950 transition rounded-md"
3330
>
34-
<path
35-
d="M3.75 3a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75H4c6.075 0 11 4.925 11 11v.25c0 .414.336.75.75.75h.5a.75.75 0 00.75-.75V16C17 8.82 11.18 3 4 3h-.25z"
36-
></path>
37-
<path
38-
d="M3 8.75A.75.75 0 013.75 8H4a8 8 0 018 8v.25a.75.75 0 01-.75.75h-.5a.75.75 0 01-.75-.75V16a6 6 0 00-6-6h-.25A.75.75 0 013 9.25v-.5zM7 15a2 2 0 11-4 0 2 2 0 014 0z"
39-
></path>
40-
</svg>
41-
</a>
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
viewBox="0 0 24 24"
34+
fill="none"
35+
stroke="currentColor"
36+
stroke-width="2"
37+
stroke-linecap="round"
38+
stroke-linejoin="round"
39+
class="w-4 h-4 mr-2"
40+
><path d="M4 11a9 9 0 0 1 9 9"></path><path
41+
d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"
42+
></circle></svg
43+
>
44+
RSS
45+
</a>
46+
</div>
4247
</div>
4348

44-
<div class="blog-cards group">
49+
<div class="mb-24">
4550
{
4651
allBlogPosts.map((post) => (
47-
<article class="blog-card relative my-5 group group/card block h-full p-px rounded-md hover:bg-[#101012] overflow-hidden transition duration-500 outline-none focus-within:bg-neutral-700 before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(circle_200px_at_var(--cursor-x)_var(--cursor-y),white_0,transparent_50%)] before:opacity-0 group-hover:before:opacity-10 hover:before:!opacity-50 before:transition-opacity before:duration-1000">
48-
<div class="p-5 bg-black overflow-hidden relative rounded-[0.3125rem] group-focus-within/card:bg-[#040404] transition duration-500">
49-
<h2 class="text-lg font-semibold text-neutral-200">
50-
<a
51-
href={`/blog/${post.slug}`}
52-
class="outline-none after:content-[''] after:absolute after:inset-0"
53-
>
54-
{post.data.title}
55-
</a>
56-
</h2>
57-
<p class="text-neutral-400 mb-1">{post.data.description}</p>
52+
<article class="group pl-4 sm:pl-12 lg:pl-64 py-8 pr-4 relative">
53+
<div
54+
aria-hidden="true"
55+
class="hidden sm:block absolute left-2 lg:left-[12rem] top-[2.5rem] w-[0.5625rem] h-[0.5625rem] rounded-full ring-2 ring-neutral-700"
56+
/>
57+
<div
58+
aria-hidden="true"
59+
class="hidden sm:block absolute left-[0.75rem] lg:left-[12.25rem] top-[3.125rem] -bottom-[2.5rem] w-px bg-neutral-700 group-last:bg-transparent group-last:bg-gradient-to-b group-last:from-neutral-700 group-last:to-transparent group-last:-bottom-2"
60+
/>
5861

59-
<div>
60-
<time
61-
class="text-sm text-neutral-400 font-medium"
62-
datetime={post.data.date.toISOString()}
63-
>
64-
{post.data.date.toDateString()}
62+
<header>
63+
<div class="text-sm lg:absolute lg:left-0 mb-2 mt-px lg:w-[10rem] lg:text-right text-neutral-400">
64+
<time>
65+
{post.data.date.toLocaleDateString("en-us", {
66+
month: "long",
67+
day: "numeric",
68+
year: "numeric",
69+
})}
6570
</time>
6671
</div>
72+
<h2 class="font-semibold mb-1">{post.data.title}</h2>
73+
</header>
74+
75+
<p class="text-neutral-400 mb-3">{post.data.description}</p>
76+
77+
<div>
78+
<a href={`/blog/${post.slug}`}>
79+
<span class="absolute left-0 sm:left-8 lg:left-[14.5rem] right-0 inset-y-3 after:content-[''] after:absolute after:inset-0 after:bg-neutral-950 after:-z-10 after:rounded-md after:opacity-0 after:transition-opacity hover:after:opacity-100" />
80+
<span class="text-sm font-medium inline-flex items-center">
81+
Read more
82+
<svg
83+
xmlns="http://www.w3.org/2000/svg"
84+
viewBox="0 0 24 24"
85+
fill="none"
86+
stroke="currentColor"
87+
stroke-width="2"
88+
stroke-linecap="round"
89+
stroke-linejoin="round"
90+
class="ml-1 -mb-0.5 w-4 h-4"
91+
>
92+
<path d="m9 18 6-6-6-6" />
93+
</svg>
94+
</span>
95+
</a>
6796
</div>
6897
</article>
6998
))
7099
}
71100
</div>
72-
73-
<script>
74-
document.addEventListener('astro:page-load', () => {
75-
const cards: NodeListOf<HTMLDivElement> = document.querySelectorAll(".blog-card");
76-
77-
(document.querySelector(".blog-cards") as HTMLDivElement)?.addEventListener("mousemove", (event: MouseEvent) => {
78-
for (const card of cards) {
79-
const { left, top } = card.getBoundingClientRect();
80-
card.style.setProperty("--cursor-x", `${event.clientX - left}px`)
81-
card.style.setProperty("--cursor-y", `${event.clientY - top}px`)
82-
}
83-
})
84-
});
85-
</script>
86101
</Layout>
87-
</RootLayoutLayout>
102+
</RootLayout>

0 commit comments

Comments
 (0)