55 lines
No EOL
1.7 KiB
Svelte
55 lines
No EOL
1.7 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
import SocialHyperlink from '$src/lib/components/SocialHyperlink.svelte';
|
|
import InfoBlock from '$src/lib/components/InfoBlock.svelte';
|
|
import BlogCard from '$src/lib/components/BlogCard.svelte';
|
|
|
|
function groupPostsByMonthYear(posts: App.BlogPost[]) {
|
|
const groupedPosts = new Map<string, App.BlogPost[]>();
|
|
|
|
posts.forEach((post) => {
|
|
const key = new Date(post.date!).toLocaleString('default', {
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
if (!groupedPosts.has(key)) groupedPosts.set(key, []);
|
|
groupedPosts.get(key)?.push(post);
|
|
});
|
|
|
|
return groupedPosts;
|
|
}
|
|
|
|
const groupedPosts = groupPostsByMonthYear(page.data.posts);
|
|
</script>
|
|
|
|
<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
|
|
<div
|
|
class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
|
|
>
|
|
<div
|
|
class="font-disket text-center text-4xl font-bold text-slate-50 [text-shadow:_0_0_15px_rgba(0,0,0,0.25)] sm:text-6xl md:text-8xl"
|
|
>
|
|
<h1>БЛОГ</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<InfoBlock>
|
|
Подпишитесь на нашу <SocialHyperlink href="/blog/rss.xml">RSS ленту</SocialHyperlink>, чтобы не
|
|
пропускать новые посты!
|
|
</InfoBlock>
|
|
|
|
<section class="flex flex-col items-stretch p-2 pb-8 md:p-4">
|
|
{#each groupedPosts.entries() as [monthYear, postsInMonthYear]}
|
|
<h1
|
|
class="mt-10 mb-4 text-left text-2xl font-bold underline decoration-4 md:text-center md:text-4xl md:decoration-8"
|
|
>
|
|
{monthYear}
|
|
</h1>
|
|
<div class="flex flex-col flex-wrap items-center gap-4">
|
|
{#each postsInMonthYear as post, i}
|
|
<BlogCard {post} />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</section> |