work version archive

This commit is contained in:
Andrey Kuvshinov
2025-12-14 23:03:30 +03:00
parent 80fb06e420
commit abe55943fc
11 changed files with 611 additions and 167 deletions

View File

@@ -10,6 +10,7 @@ export default defineConfig({
resolve: { resolve: {
alias: { alias: {
'@': '/src', '@': '/src',
'@lib': '/src/lib',
'@utils': '/src/lib/utils', '@utils': '/src/lib/utils',
'@layouts': '/src/layouts', '@layouts': '/src/layouts',
'@components': '/src/components', '@components': '/src/components',

View File

@@ -29,7 +29,6 @@ import '../styles/global.css';
<div class="container"> <div class="container">
<Header /> <Header />
<main> <main>
<hr>
<slot></slot> <slot></slot>
</main> </main>
</div> </div>

136
src/lib/api/archiveById.ts Normal file
View File

@@ -0,0 +1,136 @@
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';
interface ArchiveParams {
type: ArchiveType;
id?: number; // для tag/category/author
postType?: string; // для CPT
page?: number;
perPage?: number;
}
/**
* Универсальный helper архивов с cursor-based пагинацией по ID
*/
export async function getArchivePostsById(params: ArchiveParams) {
const page = params.page ?? 1;
const perPage = params.perPage ?? 12;
const after = await getCursorForPage(params, page, perPage);
const cacheKey = `archive:${params.type}:${params.id || params.postType || '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 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
}
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, variables);
const posts = data.profileArticles?.edges?.map((edge: any) => edge.node) || [];
return {
posts,
pageInfo: data.profileArticles?.pageInfo || { hasNextPage: false, endCursor: null },
currentPage: page,
perPage,
};
},
{ ttl: CACHE_TTL.POSTS }
);
}
/**
* Получение курсора для страницы N
*/
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 || params.postType || 'all'}:${page}:${perPage}`;
return await cache.wrap(cacheKey, async () => {
const first = perPage * (page - 1);
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 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 variables = { first, ...whereVars };
const result = await fetchGraphQL(query, variables);
// используем profileArticles, а не posts
const edges = result.profileArticles?.edges || [];
return edges.at(-1)?.cursor ?? null;
}, { ttl: CACHE_TTL.POSTS });
}

View File

@@ -1,14 +1,23 @@
import { fetchGraphQL } from './graphql-client.js'; import { fetchGraphQL } from './graphql-client.js';
import type { ProfileArticle } from '../types/graphql.js'; import type { ProfileArticle } from '../types/graphql.js';
//кэширование
import { cache } from '@lib/cache/manager.js';
import { CACHE_TTL } from '@lib/cache/cache-ttl';
export interface AnewsPost { export interface AnewsPost {
title: string; title: string;
uri: string; uri: string;
date: string; date: string;
} }
//последние статьи
export async function getLatestPosts(first = 12, after = null) { export async function getLatestPosts(first = 12, after = null) {
// Создаем уникальный ключ для кэша
const cacheKey = `latest-posts:${first}:${after || 'first-page'}`;
return await cache.wrap(
cacheKey,
async () => {
const query = ` const query = `
query GetLatestProfileArticles($first: Int!, $after: String) { query GetLatestProfileArticles($first: Int!, $after: String) {
profileArticles( profileArticles(
@@ -78,11 +87,19 @@ export async function getLatestPosts(first = 12, after = null) {
posts, posts,
pageInfo: data.profileArticles?.pageInfo || { hasNextPage: false, endCursor: null } pageInfo: data.profileArticles?.pageInfo || { hasNextPage: false, endCursor: null }
}; };
},
{ ttl: CACHE_TTL.POSTS } // из конфигурации
);
} }
//последние новости //последние новости (кэшированная версия)
export async function getLatestAnews(count = 12): Promise<AnewsPost[]> { export async function getLatestAnews(count = 12): Promise<AnewsPost[]> {
const cacheKey = `latest-anews:${count}`;
return await cache.wrap(
cacheKey,
async () => {
const query = ` const query = `
query GetAnews($count: Int!) { query GetAnews($count: Int!) {
aNews(first: $count, where: {orderby: {field: DATE, order: DESC}}) { aNews(first: $count, where: {orderby: {field: DATE, order: DESC}}) {
@@ -96,7 +113,10 @@ export async function getLatestAnews(count = 12): Promise<AnewsPost[]> {
`; `;
const data = await fetchGraphQL(query, { count }); const data = await fetchGraphQL(query, { count });
return data.aNews?.nodes || []; // Исправлено: aNews вместо anews return data.aNews?.nodes || [];
},
{ ttl: CACHE_TTL.POSTS }
);
} }
// Получить ProfileArticle по databaseId // Получить ProfileArticle по databaseId
@@ -182,16 +202,6 @@ export async function getTagBySlug(slug) {
slug slug
description description
count count
seo {
title
metaDesc
canonical
opengraphTitle
opengraphDescription
opengraphImage {
sourceUrl
}
}
} }
} }
`; `;
@@ -208,13 +218,17 @@ export async function getTagBySlug(slug) {
/** /**
* Получить посты тега с пагинацией (offset-based) * Получить тег с постами по slug с пагинацией
*/ */
export async function getTagPostsPaginated(tagSlug, perPage = 12, page = 1) { export async function getTagWithPostsPaginated(
tagSlug: string,
perPage: number = 12,
page: number = 1
) {
const offset = (page - 1) * perPage; const offset = (page - 1) * perPage;
const query = ` const query = `
query GetTagPostsPaginated($slug: ID!, $first: Int!, $offset: Int!) { query GetTagWithPostsPaginated($slug: ID!, $first: Int!, $offset: Int!) {
tag(id: $slug, idType: SLUG) { tag(id: $slug, idType: SLUG) {
id id
databaseId databaseId
@@ -226,12 +240,20 @@ export async function getTagPostsPaginated(tagSlug, perPage = 12, page = 1) {
title title
metaDesc metaDesc
canonical canonical
opengraphTitle
opengraphDescription
opengraphImage {
sourceUrl
}
} }
posts( posts(
first: $first first: $first
offset: $offset offset: $offset
where: { where: {
orderby: { field: DATE, order: DESC } orderby: {
field: DATE,
order: DESC
}
} }
) { ) {
nodes { nodes {
@@ -332,7 +354,7 @@ export async function getTagPostsPaginated(tagSlug, perPage = 12, page = 1) {
}; };
} catch (error) { } catch (error) {
console.error('Error fetching tag posts:', error); console.error('Error fetching tag with posts:', error);
return { return {
tag: null, tag: null,
posts: [], posts: [],
@@ -345,6 +367,9 @@ export async function getTagPostsPaginated(tagSlug, perPage = 12, page = 1) {
} }
} }
/** /**
* Получить общее количество постов для всех тегов * Получить общее количество постов для всех тегов
*/ */

132
src/lib/api/tags.ts Normal file
View File

@@ -0,0 +1,132 @@
import { fetchGraphQL } from '@lib/graphql-client.js';
//кэширование
import { cache } from '@lib/cache/manager.js';
import { CACHE_TTL } from '@lib/cache/cache-ttl';
interface Tag {
id: string;
databaseId: number;
name: string;
slug: string;
description: string;
count: number;
}
//информация о теге
export async function getTag(slug: string): Promise<Tag | null> {
const cacheKey = `tag:${slug}`;
return await cache.wrap(
cacheKey,
async () => {
const query = `
query GetTag($slug: ID!) {
tag(id: $slug, idType: SLUG) {
id
databaseId
name
slug
description
count
}
}
`;
const data = await fetchGraphQL(query, { slug });
return data?.tag || null;
},
{ ttl: CACHE_TTL.TAXONOMY }
);
}
export async function getTagWithPostsById(tagId, page = 1, perPage = 10) {
const offset = (page - 1) * perPage;
const query = `
query GetTagWithPostsById($id: ID!, $size: Int!, $offset: Int!) {
tag(id: $id, idType: DATABASE_ID) {
id
databaseId
name
slug
description
posts(
where: {
offsetPagination: {
size: $size
offset: $offset
}
}
sort: { field: DATE, order: DESC }
) {
nodes {
id
databaseId
title
excerpt
uri
date
featuredImage {
node {
sourceUrl(size: MEDIUM)
altText
}
}
categories {
nodes {
name
slug
}
}
}
pageInfo {
offsetPagination {
total
hasMore
hasPrevious
}
}
}
}
}
`;
const data = await fetchGraphQL(query, {
id: tagId,
size: perPage,
offset: offset
});
if (!data?.tag) {
console.warn(`Tag with ID ${tagId} not found`);
return null;
}
const tag = data.tag;
const posts = tag.posts?.nodes || [];
const pagination = tag.posts?.pageInfo?.offsetPagination || {};
return {
tag: {
id: tag.id,
databaseId: tag.databaseId,
name: tag.name,
slug: tag.slug,
description: tag.description
},
posts,
pagination: {
currentPage: page,
totalPages: Math.ceil((pagination.total || 0) / perPage),
totalPosts: pagination.total || 0,
hasNextPage: pagination.hasMore || false,
hasPrevPage: pagination.hasPrevious || false,
postsPerPage: perPage
}
};
}

10
src/lib/cache/cache-ttl.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/**
* Конфигурация TTL из .env с fallback значениями
*/
export const CACHE_TTL = {
TAXONOMY: parseInt(import.meta.env.CACHE_TAXONOMY_TTL || '3600'),
POSTS: parseInt(import.meta.env.CACHE_POST_TTL || '1800')
} as const;
// Для отключения кэша
//export const CACHE_DISABLED = 0;

77
src/lib/cache/manager.ts vendored Normal file
View File

@@ -0,0 +1,77 @@
export interface CacheOptions {
ttl: number; // время жизни в секундах, 0 = не кешировать
}
export interface CacheEntry<T> {
data: T;
expires: number; // timestamp в миллисекундах
}
export class CacheManager {
private store = new Map<string, CacheEntry<any>>();
async wrap<T>(
key: string,
fetchFn: () => Promise<T>,
options: { ttl: number } = { ttl: 300 }
): Promise<T> {
// Если ttl = 0, пропускаем кеширование
if (options.ttl <= 0) {
//console.log('Cache SKIP (ttl=0):', key);
return await fetchFn();
}
const cached = this.store.get(key);
// Проверяем TTL
if (cached && cached.expires > Date.now()) {
console.log('Cache HIT:', key);
return cached.data;
}
//console.log('Cache MISS:', key);
const data = await fetchFn();
// Сохраняем с TTL
this.store.set(key, {
data,
expires: Date.now() + (options.ttl * 1000)
});
return data;
}
// Дополнительные методы для управления кешем
get<T>(key: string): T | null {
const entry = this.store.get(key);
if (!entry || entry.expires <= Date.now()) {
return null;
}
return entry.data;
}
set<T>(key: string, value: T, ttl: number): void {
if (ttl <= 0) return;
this.store.set(key, {
data: value,
expires: Date.now() + (ttl * 1000)
});
}
delete(key: string): boolean {
return this.store.delete(key);
}
clear(): void {
this.store.clear();
}
has(key: string): boolean {
const entry = this.store.get(key);
return !!entry && entry.expires > Date.now();
}
}
// Экспортируем синглтон для использования
export const cache = new CacheManager();

View File

@@ -14,6 +14,14 @@ export async function fetchGraphQL(query, variables = {}) {
const json = await res.json(); const json = await res.json();
if (json.errors) { if (json.errors) {
// Выводим полный запрос и переменные для IDE
console.error("GraphQL query failed. Copy this to WPGraphQL IDE:");
console.log("Query:\n", query);
console.log("Variables:\n", JSON.stringify(variables, null, 2));
console.error("GraphQL errors:", json.errors);
console.error("GraphQL error:", json.errors); console.error("GraphQL error:", json.errors);
throw new Error("GraphQL query failed"); throw new Error("GraphQL query failed");
} }

View File

@@ -1,70 +0,0 @@
/**
* Функция для разбора slug тегов и авторов
*/
export interface SlugParseResult {
slug: string;
page: number;
}
export function slugParse(slug: string | string[]): SlugParseResult {
// Если ничего нет
if (!slug) return { slug: '', page: 1 };
// Если массив
if (Array.isArray(slug)) {
if (slug.length === 0) return { slug: '', page: 1 };
// Берем последний элемент
const last = slug[slug.length - 1];
const num = Number(last);
// Если последний - положительное целое число
if (Number.isInteger(num) && num > 0) {
// Убираем номер страницы
const slugWithoutPage = slug.slice(0, -1);
return {
slug: slugWithoutPage.join('/'),
page: num
};
}
// Весь массив - это slug
return {
slug: slug.join('/'),
page: 1
};
}
// Если строка
if (typeof slug === 'string') {
if (slug === '') return { slug: '', page: 1 };
// Делим строку
const parts = slug.split('/').filter(p => p !== '');
if (parts.length === 0) return { slug: '', page: 1 };
// Смотрим на последнюю часть
const last = parts[parts.length - 1];
const num = Number(last);
if (Number.isInteger(num) && num > 0) {
// Убираем номер страницы
const slugWithoutPage = parts.slice(0, -1).join('/');
return {
slug: slugWithoutPage,
page: num
};
}
// Вся строка - это slug
return {
slug: slug,
page: 1
};
}
// Если другой тип
return { slug: '', page: 1 };
}

View File

@@ -1,15 +1,44 @@
--- ---
import { parseSlug } from '@utils/slugParser';
import { slugParse } from '@utils/slugParser';
import SimplePagination from '@components/Pagination.astro'; import SimplePagination from '@components/Pagination.astro';
import { getTagBySlug, getPostsByTagPaginated } from '@api/posts.js';
//api
import { getTag, getTagWithPostsById } from '@api/tags.js';
import { getArchivePostsById } from '@api/archiveById.ts';
import MainLayout from '@layouts/MainLayout.astro'; import MainLayout from '@layouts/MainLayout.astro';
export const prerender = false; // динамический роутинг export const prerender = false; // динамический роутинг
const { slug: rawSlug } = Astro.params;
// Используем функцию const { slug } = Astro.params;
const { slug: tagSlug, page: currentPage } = parseSlug(rawSlug);
// Используем функцию (правильное название)
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);
--- ---
@@ -19,6 +48,101 @@ const { slug: tagSlug, page: currentPage } = parseSlug(rawSlug);
description="Информационное агентство Деловой журнал Профиль" description="Информационное агентство Деловой журнал Профиль"
> >
<p>Current page:{currentPage}</p> <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> </MainLayout>

View File

@@ -5,7 +5,9 @@
"paths": { "paths": {
"@/*": ["src/*"], "@/*": ["src/*"],
"@api/*": ["src/lib/api/*"], "@api/*": ["src/lib/api/*"],
"@types/*": ["src/lib/types/*"] "@types/*": ["src/lib/types/*"],
"@utils/*": ["src/lib/utils/*"],
"@cache/*": ["src/lib/utils/*"]
} }
}, },
"include": [".astro/types.d.ts", "**/*"], "include": [".astro/types.d.ts", "**/*"],