150600

src/pages/categories/[...slug].astro

@@ -0,0 +1,58 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import { type CollectionEntry, getCollection } from 'astro:content'
+import MainSection from '@components/blocks/MainSection.astro'
+import BlogCard from '@components/blog/BlogCard.astro'
+import { SITE } from '../../config'
+
+export async function getStaticPaths() {
+    const categories = await getCollection('categories')
+    return categories.map(category => ({
+        params: { slug: category.slug },
+        props: { category },
+    }))
+}
+
+const { category } = Astro.props
+const URL = Astro.url.href
+const categoriesURL = `${Astro.url.origin}/categories`
+
+const posts: CollectionEntry<'posts'>[] = (await getCollection('posts')).sort(
+    (a: CollectionEntry<'posts'>, b: CollectionEntry<'posts'>) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+).filter((b) => {
+    return b.data.category === category.slug
+});
+---
+
+<BaseLayout
+    title={category.data.title}
+    description={category.data.description}
+    structuredData={{
+        '@context': 'https://schema.org',
+        '@type': 'WebPage',
+        'inLanguage': 'ru-RU',
+        '@id': URL,
+        'url': URL,
+        'name': `${category.data.title} - ${SITE.title}`,
+        'description': category.data.description,
+        'isPartOf': {
+            '@type': 'WebSite',
+            'url': categoriesURL,
+            'name': `All Categories - ${SITE.title}`,
+        },
+    }}
+>
+    <MainSection
+        title={category.data.title}
+        subTitle={category.data.description}
+        btnExists={true}
+        btnTitle="Go to List"
+        btnURL="/categories"
+    />
+
+    <section class="mx-auto max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 mb-10 2xl:max-w-full">
+        <div class="grid gap-6 grid-cols-1 lg:grid-cols-3 sm:grid-cols-2">
+            {posts.map(b => <BlogCard blog={b} />)}
+        </div>
+    </section>
+</BaseLayout>