mirror of
https://github.com/sergeyyarkov/yarkov.tech.git
synced 2026-10-11 18:39:14 +03:00
relative article link
This commit is contained in:
parent
a9061822f0
commit
d0bfccd42f
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|||||||
@ -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>`,
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
|
|||||||
@ -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">[]) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user