relative article link

This commit is contained in:
Sergey Yarkov 2025-11-16 21:55:01 +03:00
parent a9061822f0
commit d0bfccd42f
6 changed files with 34 additions and 23 deletions

View File

@ -6,16 +6,19 @@ import "./ArticleItem.scss";
export type ArticleItemProps = { export type ArticleItemProps = {
id: number; id: number;
title: string; title: string;
pubDate: Date; pubDate: string;
pageLang: string; pageLang: string;
articleLang: string;
slug: string;
}; };
const ArticleItem: Component<ArticleItemProps> = (props) => { const ArticleItem: Component<ArticleItemProps> = (props) => {
const articleLang = "ru"; const articleLang = "ru";
// const href = createRelativeArticleUrl(
// { id: props.id, title: props.title, pubDate: props.pubDate }, const href = createRelativeArticleUrl(
// URL_BLOG_PREFIX { pubDate: props.pubDate, slug: props.slug, articleLang: props.articleLang },
// ); URL_BLOG_PREFIX
);
return ( return (
<article <article
@ -24,14 +27,14 @@ const ArticleItem: Component<ArticleItemProps> = (props) => {
itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting"
class="article-item" class="article-item"
> >
<a href={""}> <a href={href}>
<div class="flex"> <div class="flex">
<h3 itemprop="headline">{props.title}</h3> <h3 itemprop="headline">{props.title}</h3>
{articleLang !== props.pageLang && <sup>{articleLang.toLocaleUpperCase()}</sup>} {articleLang !== props.pageLang && <sup>{articleLang.toLocaleUpperCase()}</sup>}
</div> </div>
<p> <p>
<time datetime={`props.pubDate.toISOString()`}> <time datetime={props.pubDate}>
{/* {createDateFormatter(props.pageLang).format(props.pubDate)} */} {createDateFormatter(props.pageLang).format(new Date(props.pubDate))}
</time> </time>
</p> </p>
</a> </a>

View File

@ -75,7 +75,7 @@ const ArticlesList: Component<ArticlesListProps> = (props) => {
{(year) => ( {(year) => (
<div class="articles-list__wrapper"> <div class="articles-list__wrapper">
<h2>{year}</h2> <h2>{year}</h2>
<For each={articles()[year]}> {/* <For each={articles()[year]}>
{({ id, title, pubDate }) => ( {({ id, title, pubDate }) => (
<ArticleItem <ArticleItem
id={id} id={id}
@ -84,7 +84,7 @@ const ArticlesList: Component<ArticlesListProps> = (props) => {
pageLang={props.pageLang} pageLang={props.pageLang}
/> />
)} )}
</For> </For> */}
</div> </div>
)} )}
</For> </For>

View File

@ -21,15 +21,13 @@ const { articles } = Astro.props;
{articles {articles
.filter((a) => !a.id.startsWith(`${pageLang}/`)) .filter((a) => !a.id.startsWith(`${pageLang}/`))
.map(({ id, data: { title, pubDate } }) => ( .map(({ id, data: { title, pubDate } }) => (
<a href={`${createRelativeArticleUrl({ id, title, pubDate }, URL_BLOG_PREFIX)}`}>{`${ <a href={`...`}>{`${languages[id.split("/")[0] as LanguageKeys]}`}</a>
languages[id.split("/")[0] as LanguageKeys]
}`}</a>
))} ))}
</div> </div>
) )
} }
<style lang="scss"> <style lang='scss'>
div { div {
margin: 25px 0; margin: 25px 0;
font-size: var(--font-size-lg); font-size: var(--font-size-lg);

View File

@ -14,7 +14,10 @@ export interface Props {
} }
type RecentArticlesQueryResult = { type RecentArticlesQueryResult = {
article_translations: Pick<ArticleTranslation, "id" | "title" | "pub_date">[]; article_translations: Pick<
ArticleTranslation,
"id" | "title" | "slug" | "pub_date" | "languages_code"
>[];
}; };
const data = await directus.query<RecentArticlesQueryResult>(` const data = await directus.query<RecentArticlesQueryResult>(`
@ -22,18 +25,23 @@ const data = await directus.query<RecentArticlesQueryResult>(`
article_translations { article_translations {
id id
title title
slug
pub_date pub_date
languages_code {
code
name
}
} }
} }
`); `);
const { article_translations: articles } = data; const { article_translations: articles } = data;
console.log(data); // console.log();
const { length = siteconfig.articles.recentLimit } = Astro.props as Props; // const { length = siteconfig.articles.recentLimit } = Astro.props as Props;
const pageLang = getLanguageFromURL(Astro.url.pathname); const pageLang = getLanguageFromURL(Astro.url.pathname);
const filtered = utils.removeDuplicates(articles.slice(0, length), pageLang); // const filtered = utils.removeDuplicates(articles.slice(0, length), pageLang);
const isEmpty = articles.length === 0; const isEmpty = articles.length === 0;
--- ---
@ -54,6 +62,8 @@ const isEmpty = articles.length === 0;
id={article.id} id={article.id}
title={article.title} title={article.title}
pubDate={article.pub_date} pubDate={article.pub_date}
slug={article.slug}
articleLang={article.languages_code.code.split("-")[0]}
pageLang={pageLang} pageLang={pageLang}
/> />
)) ))

View File

@ -16,7 +16,7 @@ export async function GET() {
title, title,
pubDate, pubDate,
description: `${description}${coverImage && `<img src="${coverImage}" alt="${title}">`}`, description: `${description}${coverImage && `<img src="${coverImage}" alt="${title}">`}`,
link: createRelativeArticleUrl({ id, title, pubDate }, URL_BLOG_PREFIX), // link: createRelativeArticleUrl({ id, title, pubDate }, URL_BLOG_PREFIX),
customData: `<language>en-us</language>`, customData: `<language>en-us</language>`,
}; };
}), }),

View File

@ -36,13 +36,13 @@ export function removeDuplicates(
* `/en/blog/2023-01-01/my-first-article` * `/en/blog/2023-01-01/my-first-article`
*/ */
export function createRelativeArticleUrl( export function createRelativeArticleUrl(
params: { id: string; title: string; pubDate: Date }, params: { slug: string; articleLang: string; pubDate: string },
prefix: string = "blog" prefix: string = "blog"
): string { ): string {
const articleLang = params.id.split("/")[0]; const { pubDate, articleLang, slug } = params;
const date = params.pubDate.toISOString().split("T")[0]; const date = pubDate.split("T")[0];
const lang = articleLang !== DEFAULT_LANGUAGE ? "/" + articleLang : ""; const lang = articleLang !== DEFAULT_LANGUAGE ? "/" + articleLang : "";
return `${lang}/${prefix}/${date}/${slugify(params.title, { lowercase: true })}`; return `${lang}/${prefix}/${date}/${slug}`;
} }
export function formatToArticleBlocks(articles: CollectionEntry<"blog">[]) { export function formatToArticleBlocks(articles: CollectionEntry<"blog">[]) {