z0xca/blog.z0x.ca
Code Activity Actions

feat(index): remove animations

Browse source
This commit is contained in:
z0x 2025-01-17 19:25:11 -05:00
parent 7c73c45ce2
commit 0105437b6a
8 changed files with 170 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/pages/404.astro
View file

@ -7,7 +7,9 @@ import Layout from "@layouts/Layout.astro";
<Layout title="404" description={SITE.DESCRIPTION}>
<Container>
<div class="text-center">
<h4 class="animate text-2xl font-semibold text-black dark:text-white">404: Page not found</h4>
<h4 class="text-2xl font-semibold text-black dark:text-white">
404: Page not found
</h4>
</div>
</Container>
</Layout>

42
src/pages/[...id].astro
View file

@ -50,23 +50,27 @@ const { Content, headings } = await render(post);
---
<Layout title={post.data.title} description={post.data.description}>
<Container>
<div class="my-10 space-y-1">
<div class="animate flex items-center gap-1.5">
<div class="font-base text-sm">
<FormattedDate date={post.data.date} />
</div>
&bull;
{post.body && <div class="font-base text-sm">{readingTime(post.body)}</div>}
</div>
<h1 class="animate text-3xl font-semibold text-black dark:text-white">
{post.data.title}
</h1>
</div>
{headings.length > 0 && <TableOfContents headings={headings} />}
<article class="animate">
<Content />
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
</article>
</Container>
<Container>
<div class="my-10 space-y-1">
<div class="flex items-center gap-1.5">
<div class="font-base text-sm">
<FormattedDate date={post.data.date} />
</div>
&bull;
{
post.body && (
<div class="font-base text-sm">{readingTime(post.body)}</div>
)
}
</div>
<h1 class="text-3xl font-semibold text-black dark:text-white">
{post.data.title}
</h1>
</div>
{headings.length > 0 && <TableOfContents headings={headings} />}
<article>
<Content />
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
</article>
</Container>
</Layout>

26
src/pages/index.astro
View file

@ -7,24 +7,24 @@ import { HOME } from "@consts";
import Layout from "@layouts/Layout.astro";
const data = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
type Acc = {
[year: string]: CollectionEntry<"blog">[];
[year: string]: CollectionEntry<"blog">[];
};
const posts = data.reduce((acc: Acc, post) => {
const year = post.data.date.getFullYear().toString();
if (!acc[year]) {
acc[year] = [];
}
acc[year].push(post);
return acc;
const year = post.data.date.getFullYear().toString();
if (!acc[year]) {
acc[year] = [];
}
acc[year].push(post);
return acc;
}, {});
const years = Object.keys(posts).sort(
(a, b) => Number.parseInt(b) - Number.parseInt(a),
(a, b) => Number.parseInt(b) - Number.parseInt(a),
);
---
@ -35,8 +35,10 @@ const years = Object.keys(posts).sort(
<div class="space-y-4">
{
years.map((year) => (
<section class="animate space-y-4">
<div class="font-semibold text-black dark:text-white">{year}</div>
<section class="space-y-4">
<div class="font-semibold text-black dark:text-white">
{year}
</div>
<div>
<ul class="not-prose flex flex-col gap-4">
{posts[year].map((post) => (