delf/profile-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

work version archive

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
astro.config.mjs
View File

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

1
src/layouts/MainLayout.astro
View File

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

203
src/lib/api/posts.ts
View File

@@ -1,102 +1,122 @@
import { fetchGraphQL } from './graphql-client.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 {
title: string;
uri: string;
date: string;
}
//последние статьи
export async function getLatestPosts(first = 12, after = null) {
const query = `
query GetLatestProfileArticles($first: Int!, $after: String) {
profileArticles(
first: $first,
after: $after,
where: {orderby: { field: DATE, order: DESC }}
) {
pageInfo {
hasNextPage
endCursor
}
edges {
cursor
node {
id
databaseId
title
uri
date
featuredImage {
node {
sourceUrl(size: LARGE)
altText
}
// Создаем уникальный ключ для кэша
const cacheKey = `latest-posts:${first}:${after || 'first-page'}`;
return await cache.wrap(
cacheKey,
async () => {
const query = `
query GetLatestProfileArticles($first: Int!, $after: String) {
profileArticles(
first: $first,
after: $after,
where: {orderby: { field: DATE, order: DESC }}
) {
pageInfo {
hasNextPage
endCursor
}
author {
edges {
cursor
node {
id
name
firstName
lastName
avatar {
url
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
}
}
uri
}
}
categories {
nodes {
id
name
slug
uri
databaseId
}
}
tags {
nodes {
id
name
slug
uri
}
}
}
}
}
}
`;
`;
const data = await fetchGraphQL(query, { first, after });
// Преобразуем edges в nodes
const posts = data.profileArticles?.edges?.map(edge => edge.node) || [];
return {
posts,
pageInfo: data.profileArticles?.pageInfo || { hasNextPage: false, endCursor: null }
};
const data = await fetchGraphQL(query, { first, after });
// Преобразуем edges в nodes
const posts = data.profileArticles?.edges?.map(edge => edge.node) || [];
return {
posts,
pageInfo: data.profileArticles?.pageInfo || { hasNextPage: false, endCursor: null }
};
},
{ ttl: CACHE_TTL.POSTS } // из конфигурации
);
}
//последние новости
//последние новости (кэшированная версия)
export async function getLatestAnews(count = 12): Promise<AnewsPost[]> {
const query = `
query GetAnews($count: Int!) {
aNews(first: $count, where: {orderby: {field: DATE, order: DESC}}) {
nodes {
title
uri
date
const cacheKey = `latest-anews:${count}`;
return await cache.wrap(
cacheKey,
async () => {
const query = `
query GetAnews($count: Int!) {
aNews(first: $count, where: {orderby: {field: DATE, order: DESC}}) {
nodes {
title
uri
date
}
}
}
}
}
`;
`;
const data = await fetchGraphQL(query, { count });
return data.aNews?.nodes || []; // Исправлено: aNews вместо anews
const data = await fetchGraphQL(query, { count });
return data.aNews?.nodes || [];
},
{ ttl: CACHE_TTL.POSTS }
);
}
// Получить ProfileArticle по databaseId
@@ -182,16 +202,6 @@ export async function getTagBySlug(slug) {
slug
description
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 query = `
query GetTagPostsPaginated($slug: ID!, $first: Int!, $offset: Int!) {
query GetTagWithPostsPaginated($slug: ID!, $first: Int!, $offset: Int!) {
tag(id: $slug, idType: SLUG) {
id
databaseId
@@ -226,12 +240,20 @@ export async function getTagPostsPaginated(tagSlug, perPage = 12, page = 1) {
title
metaDesc
canonical
opengraphTitle
opengraphDescription
opengraphImage {
sourceUrl
}
}
posts(
first: $first
offset: $offset
where: {
orderby: { field: DATE, order: DESC }
orderby: {
field: DATE,
order: DESC
}
}
) {
nodes {
@@ -332,7 +354,7 @@ export async function getTagPostsPaginated(tagSlug, perPage = 12, page = 1) {
};
} catch (error) {
console.error('Error fetching tag posts:', error);
console.error('Error fetching tag with posts:', error);
return {
tag: null,
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();

8
src/lib/graphql-client.js
View File

@@ -14,6 +14,14 @@ export async function fetchGraphQL(query, variables = {}) {
const json = await res.json();
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);
throw new Error("GraphQL query failed");
}

70
src/lib/utils/slugParser.js
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 };
}

136
src/pages/tag/[...slug].astro
View File

@@ -1,15 +1,44 @@
---
import { parseSlug } from '@utils/slugParser';
import { slugParse } from '@utils/slugParser';
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';
export const prerender = false; // динамический роутинг
const { slug: rawSlug } = Astro.params;
// Используем функцию
const { slug: tagSlug, page: currentPage } = parseSlug(rawSlug);
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);
---
@@ -19,6 +48,101 @@ const { slug: tagSlug, page: currentPage } = parseSlug(rawSlug);
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>

4
tsconfig.json
View File

@@ -5,7 +5,9 @@
"paths": {
"@/*": ["src/*"],
"@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", "**/*"],