add templates

This commit is contained in:
Profile Profile
2025-12-15 17:01:51 +03:00
parent 11e2a99646
commit a72d47f6d9
13 changed files with 749 additions and 353 deletions

View File

@@ -13,6 +13,7 @@ export default defineConfig({
'@lib': '/src/lib',
'@utils': '/src/lib/utils',
'@layouts': '/src/layouts',
'@templates': '/src/templates',
'@components': '/src/components',
'@api': '/src/lib/api'
}

View File

@@ -0,0 +1,385 @@
---
export interface Props {
/** Текущая страница */
currentPage: number;
/** Всего страниц */
totalPages: number;
/** URL для навигации */
baseUrl: string;
/** Показывать кнопки "Назад/Вперед" */
showPrevNext?: boolean;
/** Показывать кнопки "Первая/Последняя" */
showFirstLast?: boolean;
/** Максимум видимых номеров страниц */
maxVisible?: number;
/** Текст для кнопки "Назад" */
prevText?: string;
/** Текст для кнопки "Вперед" */
nextText?: string;
/** Текст для кнопки "Первая" */
firstText?: string;
/** Текст для кнопки "Последняя" */
lastText?: string;
/** CSS класс для контейнера */
className?: string;
}
const {
currentPage = 1,
totalPages = 1,
baseUrl = '/',
showPrevNext = true,
showFirstLast = true,
maxVisible = 7,
prevText = ' Назад',
nextText = 'Вперед ',
firstText = '««',
lastText = '»»',
className = ''
} = Astro.props;
// Проверка валидности данных
if (currentPage < 1 || totalPages < 1 || currentPage > totalPages) {
console.warn('Invalid pagination data:', { currentPage, totalPages });
}
// Функция для генерации массива видимых страниц
function getVisiblePages(current, total, max) {
if (total <= max) {
return Array.from({ length: total }, (_, i) => i + 1);
}
const half = Math.floor(max / 2);
let start = current - half;
let end = current + half;
if (start < 1) {
start = 1;
end = max;
}
if (end > total) {
end = total;
start = total - max + 1;
}
const pages = [];
// Добавляем первую страницу и многоточие если нужно
if (start > 1) {
pages.push(1);
if (start > 2) pages.push('...');
}
// Основные страницы
for (let i = start; i <= end; i++) {
pages.push(i);
}
// Добавляем многоточие и последнюю страницу если нужно
if (end < total) {
if (end < total - 1) pages.push('...');
pages.push(total);
}
return pages;
}
// Функция для построения URL страницы
function getPageUrl(page) {
if (page === 1) {
return baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
}
// Если baseUrl уже содержит /page/, заменяем номер
if (baseUrl.includes('/page/')) {
return baseUrl.replace(/\/page\/\d+\/?$/, `/page/${page}/`);
}
// Добавляем /page/ перед номером
return `${baseUrl.replace(/\/$/, '')}/page/${page}/`;
}
const visiblePages = getVisiblePages(currentPage, totalPages, maxVisible);
const hasPrev = currentPage > 1;
const hasNext = currentPage < totalPages;
---
<nav class={`simple-pagination ${className}`} aria-label="Навигация по страницам">
{totalPages > 1 ? (
<div class="pagination-container">
<div class="pagination-info">
Страница <strong>{currentPage}</strong> из <strong>{totalPages}</strong>
</div>
<ul class="pagination-list">
<!-- Первая страница -->
{showFirstLast && hasPrev && currentPage > 2 && (
<li class="pagination-item">
<a
href={getPageUrl(1)}
class="pagination-link pagination-first"
aria-label="Первая страница"
title="Первая страница"
>
{firstText}
</a>
</li>
)}
<!-- Предыдущая страница -->
{showPrevNext && hasPrev && (
<li class="pagination-item">
<a
href={getPageUrl(currentPage - 1)}
class="pagination-link pagination-prev"
aria-label="Предыдущая страница"
title="Предыдущая страница"
>
{prevText}
</a>
</li>
)}
<!-- Номера страниц -->
{visiblePages.map((page, index) => (
<li class="pagination-item" key={index}>
{page === '...' ? (
<span class="pagination-ellipsis" aria-hidden="true">…</span>
) : page === currentPage ? (
<span
class="pagination-link pagination-current"
aria-current="page"
aria-label={`Страница ${page}`}
>
{page}
</span>
) : (
<a
href={getPageUrl(page)}
class="pagination-link"
aria-label={`Страница ${page}`}
>
{page}
</a>
)}
</li>
))}
<!-- Следующая страница -->
{showPrevNext && hasNext && (
<li class="pagination-item">
<a
href={getPageUrl(currentPage + 1)}
class="pagination-link pagination-next"
aria-label="Следующая страница"
title="Следующая страница"
>
{nextText}
</a>
</li>
)}
<!-- Последняя страница -->
{showFirstLast && hasNext && currentPage < totalPages - 1 && (
<li class="pagination-item">
<a
href={getPageUrl(totalPages)}
class="pagination-link pagination-last"
aria-label="Последняя страница"
title="Последняя страница"
>
{lastText}
</a>
</li>
)}
</ul>
</div>
) : (
<div class="pagination-single">
<span class="single-page-info">Всего 1 страница</span>
</div>
)}
</nav>
<style>
.simple-pagination {
margin: 2rem 0;
}
.pagination-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.pagination-info {
color: #666;
font-size: 0.9rem;
text-align: center;
}
.pagination-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.pagination-item {
margin: 0;
}
.pagination-link,
.pagination-current,
.pagination-ellipsis {
display: block;
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
min-width: 2.5rem;
text-align: center;
transition: all 0.2s ease;
}
.pagination-link {
background: #f5f5f5;
color: #333;
border: 1px solid #e0e0e0;
}
.pagination-link:hover {
background: #0066cc;
color: white;
border-color: #0066cc;
transform: translateY(-1px);
}
.pagination-current {
background: #0066cc;
color: white;
border: 1px solid #0066cc;
cursor: default;
font-weight: 600;
}
.pagination-ellipsis {
background: transparent;
border: none;
color: #888;
cursor: default;
min-width: auto;
padding: 0.5rem 0.25rem;
}
.pagination-first,
.pagination-last,
.pagination-prev,
.pagination-next {
font-weight: 600;
}
.pagination-prev {
margin-right: 0.5rem;
}
.pagination-next {
margin-left: 0.5rem;
}
.pagination-single {
text-align: center;
color: #888;
font-size: 0.9rem;
padding: 1rem;
}
/* Темная тема */
.simple-pagination.dark {
color-scheme: dark;
}
.simple-pagination.dark .pagination-link {
background: #2d2d2d;
color: #e0e0e0;
border-color: #444;
}
.simple-pagination.dark .pagination-link:hover {
background: #0066cc;
color: white;
}
.simple-pagination.dark .pagination-current {
background: #0066cc;
}
.simple-pagination.dark .pagination-info {
color: #aaa;
}
/* Компактный вариант */
.simple-pagination.compact .pagination-link,
.simple-pagination.compact .pagination-current,
.simple-pagination.compact .pagination-ellipsis {
padding: 0.25rem 0.75rem;
min-width: 2rem;
font-size: 0.9rem;
}
/* Мобильная адаптация */
@media (max-width: 768px) {
.pagination-list {
gap: 0.25rem;
}
.pagination-link,
.pagination-current,
.pagination-ellipsis {
padding: 0.4rem 0.8rem;
min-width: 2rem;
font-size: 0.85rem;
}
.pagination-first,
.pagination-last {
display: none;
}
.pagination-info {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.pagination-link,
.pagination-current {
padding: 0.3rem 0.6rem;
min-width: 1.75rem;
}
.pagination-prev,
.pagination-next {
font-size: 0;
position: relative;
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.pagination-prev::before {
content: '';
font-size: 1rem;
}
.pagination-next::before {
content: '';
font-size: 1rem;
}
}
</style>

View File

@@ -0,0 +1,28 @@
---
const {
title,
page,
hasNextPage,
baseUrl,
} = Astro.props;
---
<h1>{title}</h1>
<slot />
<nav class="pagination">
{page > 1 && (
<a href={page === 2 ? baseUrl : `${baseUrl}/page/${page - 1}`}>
← Назад
</a>
)}
<span>Страница {page}</span>
{hasNextPage && (
<a href={`${baseUrl}/page/${page + 1}`}>
Вперёд →
</a>
)}
</nav>

View File

@@ -4,133 +4,179 @@ import { fetchGraphQL } from '@lib/graphql-client.js';
import { cache } from '@lib/cache/manager.js';
import { CACHE_TTL } from '@lib/cache/cache-ttl';
type ArchiveType = 'tag' | 'category' | 'author' | 'postType';
/**
* Типы архивов
*/
export type ArchiveType = 'tag' | 'category' | 'author' | 'postType';
interface ArchiveParams {
export interface ArchiveParams {
type: ArchiveType;
id?: number; // для tag/category/author
postType?: string; // для CPT
page?: number;
perPage?: number;
id?: string; // ID ВСЕГДА строка
postType?: string; // для CPT
page: number;
perPage: number;
}
/**
* Универсальный helper архивов с cursor-based пагинацией по ID
* WHERE builder
* ⚠️ Все ID — строки
*/
export async function getArchivePostsById(params: ArchiveParams) {
const page = params.page ?? 1;
const perPage = params.perPage ?? 12;
const after = await getCursorForPage(params, page, perPage);
function buildWhere(params: ArchiveParams): string {
const { type, id } = params;
const cacheKey = `archive:${params.type}:${params.id || params.postType || 'all'}:${page}:${perPage}`;
switch (type) {
case 'tag':
return `tagId: "${id}"`;
case 'category':
return `categoryId: "${id}"`;
case 'author':
return `authorId: "${id}"`;
case 'postType':
// profileArticles — твой CPT
return '';
default:
return '';
}
}
/**
* Получаем курсор для страницы N
* page 1 → cursor = null
*/
async function getCursorForPage(
params: ArchiveParams,
page: number,
perPage: number
): Promise<string | null> {
if (page <= 1) return null;
const cacheKey = `archive-cursor:${params.type}:${params.id || 'all'}:${page}:${perPage}`;
return await cache.wrap(
cacheKey,
async () => {
// Формируем where через переменные
const whereVars: Record<string, string> = {};
let whereClause = '';
if (params.type === 'tag') {
whereClause = 'tagId: $id';
whereVars.id = String(params.id);
} else if (params.type === 'category') {
whereClause = 'categoryId: $id';
whereVars.id = String(params.id);
} else if (params.type === 'author') {
whereClause = 'authorId: $id';
whereVars.id = String(params.id);
} else if (params.type === 'postType' && params.postType) {
whereClause = '__typename: $postType';
whereVars.postType = params.postType;
}
const first = perPage * (page - 1);
const where = buildWhere(params);
const query = `
query GetArchivePosts($first: Int!, $after: String${whereVars.id ? ', $id: ID!' : ''}${whereVars.postType ? ', $postType: String!' : ''}) {
profileArticles(first: $first, after: $after, where: { ${whereClause}, orderby: { field: DATE, order: DESC } }) {
pageInfo {
hasNextPage
endCursor
query GetCursor($first: Int!) {
profileArticles(
first: $first,
where: {
${where}
orderby: { field: DATE, order: DESC }
}
) {
edges {
cursor
node {
id
databaseId
title
uri
date
featuredImage { node { sourceUrl(size: LARGE) altText } }
author { node { id name firstName lastName avatar { url } uri } }
categories { nodes { id name slug uri databaseId } }
tags { nodes { id name slug uri } }
}
}
}
}
`;
const variables = {
first: perPage,
after,
...whereVars
};
const data = await fetchGraphQL(query, { first });
const data = await fetchGraphQL(query, variables);
const posts = data.profileArticles?.edges?.map((edge: any) => edge.node) || [];
return {
posts,
pageInfo: data.profileArticles?.pageInfo || { hasNextPage: false, endCursor: null },
currentPage: page,
perPage,
};
const edges = data.profileArticles?.edges || [];
return edges.length ? edges.at(-1).cursor : null;
},
{ ttl: CACHE_TTL.POSTS }
);
}
/**
* Получение курсора для страницы N
* Основной helper для архивов
*/
async function getCursorForPage(params: ArchiveParams, page: number, perPage: number): Promise<string | null> {
if (page <= 1) return null;
export async function getArchivePostsById(params: ArchiveParams) {
const { page, perPage } = params;
const cacheKey = `archive-cursor:${params.type}:${params.id || params.postType || 'all'}:${page}:${perPage}`;
const cursor = await getCursorForPage(params, page, perPage);
return await cache.wrap(cacheKey, async () => {
const first = perPage * (page - 1);
const cacheKey = `archive:${params.type}:${params.id || 'all'}:${page}:${perPage}`;
const whereVars: Record<string, string> = {};
let whereClause = '';
return await cache.wrap(
cacheKey,
async () => {
const where = buildWhere(params);
if (params.type === 'tag') {
whereClause = 'tagId: $id';
whereVars.id = String(params.id);
} else if (params.type === 'category') {
whereClause = 'categoryId: $id';
whereVars.id = String(params.id);
} else if (params.type === 'author') {
whereClause = 'authorId: $id';
whereVars.id = String(params.id);
} else if (params.type === 'postType' && params.postType) {
whereClause = '__typename: $postType';
whereVars.postType = params.postType;
}
const query = `
query GetCursor($first: Int!${whereVars.id ? ', $id: ID!' : ''}${whereVars.postType ? ', $postType: String!' : ''}) {
profileArticles(first: $first, where: { ${whereClause}, orderby: { field: DATE, order: DESC } }) {
edges { cursor }
const query = `
query GetArchive(
$first: Int!
$after: String
) {
profileArticles(
first: $first
after: $after
where: {
${where}
orderby: { field: DATE, order: DESC }
}
) {
pageInfo {
hasNextPage
endCursor
}
edges {
node {
id
databaseId
title
uri
date
featuredImage {
node {
sourceUrl(size: LARGE)
altText
}
}
author {
node {
id
name
uri
avatar {
url
}
}
}
categories {
nodes {
id
name
uri
}
}
tags {
nodes {
id
name
uri
}
}
}
}
}
}
}
`;
`;
const variables = { first, ...whereVars };
const result = await fetchGraphQL(query, variables);
const data = await fetchGraphQL(query, {
first: perPage,
after: cursor,
});
// используем profileArticles, а не posts
const edges = result.profileArticles?.edges || [];
return edges.at(-1)?.cursor ?? null;
}, { ttl: CACHE_TTL.POSTS });
const edges = data.profileArticles?.edges || [];
return {
posts: edges.map((e: any) => e.node),
pageInfo: data.profileArticles?.pageInfo ?? {
hasNextPage: false,
endCursor: null,
},
};
},
{ ttl: CACHE_TTL.POSTS }
);
}

44
src/lib/api/categories.ts Normal file
View File

@@ -0,0 +1,44 @@
import { fetchGraphQL } from '@lib/graphql-client.js';
//кэширование
import { cache } from '@lib/cache/manager.js';
import { CACHE_TTL } from '@lib/cache/cache-ttl';
export interface Category {
id: string;
databaseId: number;
name: string;
slug: string;
description: string;
count: number;
parentId?: number | null;
}
export async function getCategory(slug: string): Promise<Category | null> {
const cacheKey = `category:${slug}`;
return await cache.wrap(
cacheKey,
async () => {
const query = `
query GetCategory($slug: ID!) {
category(id: $slug, idType: SLUG) {
id
databaseId
name
slug
description
count
parentId
}
}
`;
const data = await fetchGraphQL(query, { slug });
return data?.category || null;
},
{ ttl: CACHE_TTL.TAXONOMY }
);
}

26
src/pages/[...slug].astro Normal file
View File

@@ -0,0 +1,26 @@
---
import { fetchCategory } from '@api/categories';
import MainLayout from '@layouts/MainLayout.astro';
import CategoryArchive from '@templates/CategoryArchive.astro';
import { getCategory } from '@api/categories';
import { getArchivePostsById } from '@api/archiveById';
export const prerender = false; // ISR
//export const revalidate = 60;
const { slug } = Astro.params;
const pathArray = Array.isArray(slug) ? slug : [slug];
// Получаем категорию по цепочке slug
const category = await getCategory(pathArray);
if (!category) return Astro.redirect('/404');
const perPage = 20;
---
<MainLayout title={category.name}>
<h1>{category.name}</h1>
</MainLayout>

View File

View File

@@ -1,109 +0,0 @@
---
import { getProfileArticleById } from '@api/posts.js';
import MainLayout from '@layouts/MainLayout.astro';
export const prerender = false; // динамический роутинг
const { category, slug } = Astro.params;
// ищем ID поста
function findPostId(slug) {
const lastItem = Array.isArray(slug) ? slug[slug.length - 1] : slug;
// Находим последний дефис
const dashIndex = lastItem.lastIndexOf('-');
if (dashIndex === -1) return null;
// Берем всё после дефиса
const idStr = lastItem.substring(dashIndex + 1);
// Преобразуем в число
const id = Number(idStr);
return Number.isInteger(id) ? id : null;
}
const postId = findPostId(slug);
let article;
try {
article = await getProfileArticleById(postId);
} catch (error) {
return Astro.redirect('/404');
}
if (!article) {
return Astro.redirect('/404');
}
// Валидация: проверяем категорию
const articleCategory = article.categories?.nodes?.[0]?.slug;
// Если категория не совпадает, делаем редирект
if (articleCategory && category !== articleCategory) {
debugLog(`Редирект: категория не совпадает (${category} != ${articleCategory})`);
// Строим правильный URL
const correctUri = article.uri
.replace(/^\//, '')
.replace(/\/$/, '');
return Astro.redirect(`/${correctUri}/`, 301);
}
// Валидация: проверяем полный путь
const currentPath = `${category}/${Array.isArray(slug) ? slug.join('/') : slug}`;
const correctPath = article.uri
.replace(/^\//, '')
.replace(/\/$/, '');
if (currentPath !== correctPath) {
debugLog(`Редирект: путь не совпадает (${currentPath} != ${correctPath})`);
return Astro.redirect(`/${correctPath}/`, 301);
}
---
<MainLayout
title={article.title}
description="Информационное агентство Деловой журнал Профиль"
>
<h1 class="article-title">{article.title}</h1>
{article.tags?.nodes?.length > 0 && (
<div class="tags-list">
<strong>Метки:</strong>
{article.tags.nodes.map(tag => (
<a href={tag.uri} class="tag" key={tag.id}>{tag.name}</a>
))}
</div>
)}
{article.featuredImage?.node?.sourceUrl && (
<figure class="featured-image">
<img
src={article.featuredImage.node.sourceUrl}
alt={article.featuredImage.node.altText || article.title}
loading="eager"
class="article-image"
/>
{article.featuredImage.node.caption && (
<figcaption class="image-caption" set:html={article.featuredImage.node.caption} />
)}
</figure>
)}
<div class="article-content" set:html={article.content} />
</MainLayout>

View File

@@ -10,9 +10,10 @@ import MainLayout from '@layouts/MainLayout.astro';
import ContentGrid from '@components/ContentGrid.astro';
import EndnewsList from '@components/EndnewsList.astro';
//export const prerender = {
// isr: { expiration: 3 } // ISR: обновлять раз в 3 секунды
//};
//ISR
export const prerender = false;
//export const revalidate = 1;
---
<MainLayout

View File

@@ -1,148 +0,0 @@
---
import { slugParse } from '@utils/slugParser';
import SimplePagination from '@components/Pagination.astro';
//api
import { getTag, getTagWithPostsById } from '@api/tags.js';
import { getArchivePostsById } from '@api/archiveById.ts';
import MainLayout from '@layouts/MainLayout.astro';
export const prerender = false; // динамический роутинг
const { slug } = Astro.params;
// Используем функцию (правильное название)
const { slug: tagSlug, page: currentPage } = slugParse(slug);
// Если slug пустой - 404
if (!tagSlug) {
return Astro.redirect('/404');
}
// Получаем данные тега
const tag = await getTag(tagSlug);
if (!tag) {
return Astro.redirect('/404');
}
const { posts, pageInfo } = await getArchivePostsById({
type: 'tag',
id: tag.databaseId, // ID тега
page: 2,
perPage: 10
});
console.log('Данные, полученные от pageInfo:', pageInfo);
---
<MainLayout
title='Тег'
description="Информационное агентство Деловой журнал Профиль"
>
<div class="container mx-auto px-4 py-8">
<!-- Заголовок тега -->
<header class="mb-8">
<h1 class="text-3xl md:text-4xl font-bold mb-2">
Тег: {tag.name}
</h1>
{tag.description && (
<div class="text-lg text-gray-600 mb-4" set:html={tag.description} />
)}
<div class="text-gray-500">
<span>Всего постов: {data.pagination?.totalPosts || 0}</span>
</div>
</header>
<!-- Список постов -->
{data.posts && data.posts.length > 0 ? (
<>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
{data.posts.map(post => (
<article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
{post.featuredImage?.node?.sourceUrl && (
<a href={post.uri} class="block">
<img
src={post.featuredImage.node.sourceUrl}
alt={post.featuredImage.node.altText || post.title}
width="400"
height="250"
loading="lazy"
class="w-full h-48 object-cover"
/>
</a>
)}
<div class="p-4">
<h2 class="text-xl font-semibold mb-2">
<a href={post.uri} class="hover:text-blue-600 transition-colors">
{post.title}
</a>
</h2>
{post.excerpt && (
<div
class="text-gray-600 mb-3 line-clamp-3"
set:html={post.excerpt}
/>
)}
<div class="flex items-center justify-between text-sm text-gray-500">
<time datetime={post.date}>
{new Date(post.date).toLocaleDateString('ru-RU')}
</time>
{post.categories?.nodes?.length > 0 && (
<div class="flex gap-1">
{post.categories.nodes.slice(0, 2).map(cat => (
<a
href={`/category/${cat.slug}`}
class="px-2 py-1 bg-gray-100 rounded hover:bg-gray-200"
>
{cat.name}
</a>
))}
</div>
)}
</div>
</div>
</article>
))}
</div>
<!-- Пагинация -->
{data.pagination && data.pagination.totalPages > 1 && (
<SimplePagination
currentPage={pageNumber}
totalPages={data.pagination.totalPages}
baseUrl={baseUrl}
showPrevNext={true}
showFirstLast={true}
maxVisible={7}
className="mt-8"
/>
)}
</>
) : (
<div class="text-center py-12">
<h3 class="text-2xl font-semibold mb-4">Постов пока нет</h3>
<p class="text-gray-600">В этом теге еще нет опубликованных статей.</p>
</div>
)}
</div>
</MainLayout>
</MainLayout>

View File

@@ -0,0 +1,68 @@
---
import { slugParse } from '@utils/slugParser';
//api
import { getTag, getTagWithPostsById } from '@api/tags.js';
import { getArchivePostsById } from '@/lib/api/archiveById';
import MainLayout from '@layouts/MainLayout.astro';
import TagArchive from '@/templates/TagArchive.astro';
//ISR
export const prerender = false;
const { slug } = Astro.params;
// Используем функцию (правильное название)
const { slug: tagSlug, page: currentPage } = slugParse(slug);
// Если slug пустой - 404
if (!tagSlug) {
return Astro.redirect('/404');
}
// Получаем данные тега
const tag = await getTag(tagSlug);
if (!tag) {
return Astro.redirect('/404');
}
// ----------------------------
// fetch archive
// ----------------------------
const perPage = 35;
const { posts, pageInfo } = await getArchivePostsById({
type: 'tag',
id: tag.databaseId,
page: currentPage,
perPage,
});
// 404 если страница невалидна
if (!posts.length && currentPage > 1) {
return Astro.redirect('/404');
}
---
<MainLayout
title='Тег'
description="Информационное агентство Деловой журнал Профиль"
>
<TagArchive
tag={tag}
posts={posts}
page={1}
hasNextPage={pageInfo.hasNextPage}
baseUrl={`/tag/${slug}`}
/>
</MainLayout>

View File

@@ -0,0 +1,27 @@
---
import ContentGrid from '@components/ContentGrid.astro';
import ArchivePagination from '@/components/ArchivePagination.astro';
const {
tag,
posts,
page,
hasNextPage,
baseUrl,
} = Astro.props;
---
<section class="tag-archive">
<header>
<h1>{tag.name}</h1>
{tag.description && <p>{tag.description}</p>}
</header>
<ContentGrid items={posts} />
<ArchivePagination
baseUrl={baseUrl}
page={page}
hasNextPage={hasNextPage}
/>
</section>

View File

@@ -0,0 +1,27 @@
---
import ContentGrid from '@components/ContentGrid.astro';
import ArchivePagination from '@/components/ArchivePagination.astro';
const {
tag,
posts,
page,
hasNextPage,
baseUrl,
} = Astro.props;
---
<section class="tag-archive">
<header>
<h1>{tag.name}</h1>
{tag.description && <p>{tag.description}</p>}
</header>
<ContentGrid items={posts} />
<ArchivePagination
baseUrl={baseUrl}
page={page}
hasNextPage={hasNextPage}
/>
</section>