mirror of
https://github.com/sergeyyarkov/yarkov.tech.git
synced 2026-10-11 02:19:08 +03:00
94 lines
2.4 KiB
Plaintext
94 lines
2.4 KiB
Plaintext
---
|
|
import { Picture } from "@astrojs/image/components";
|
|
import { Icon } from "astro-icon";
|
|
import { createDateFormatter } from "@root/utils";
|
|
// import { isURL } from "@utils/string";
|
|
import ArticleComments from "@components/ArticleComments.astro";
|
|
// import TranslatedLink from "../TranslatedLink";
|
|
import type { CollectionEntry } from "astro:content";
|
|
// import { useTranslation } from "@root/i18n/utils";
|
|
import "./ArticlePost.scss";
|
|
export type Props = {
|
|
article: CollectionEntry<"blog">;
|
|
lang: string;
|
|
};
|
|
const { article, lang } = Astro.props as Props;
|
|
const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
|
|
const {
|
|
data: { coverImage, title, author, description, tags, pubDate },
|
|
slug,
|
|
} = article;
|
|
// const t = useTranslation(Astro);
|
|
---
|
|
|
|
<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
|
|
<header>
|
|
<div>
|
|
{
|
|
tags && (
|
|
<div class="tags">
|
|
<ul itemprop="keywords">
|
|
{tags.map((tag) => (
|
|
<li>
|
|
<a rel="tag" href={`/articles/?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${
|
|
tags.at(-1) === tag ? "" : ","
|
|
}`}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
<div class="views">
|
|
<Icon name="eye" width="21" height="21" />
|
|
<span><span id="views">---</span> {"просмотров"}</span>
|
|
</div>
|
|
</div>
|
|
<div class="heading">
|
|
<h1 itemprop="headline">{title}</h1>
|
|
</div>
|
|
<div class="published">
|
|
<time itemprop="datePublished" datetime={pubDate.toString()}
|
|
>{createDateFormatter(lang).format(pubDate)}</time
|
|
>
|
|
<span itemprop="author">{author}</span>
|
|
</div>
|
|
{
|
|
coverImage && (
|
|
<div class="cover">
|
|
<figure>
|
|
<Picture
|
|
itemprop="image"
|
|
src={coverImage}
|
|
sizes="(max-width: 450px) 450px, 700px"
|
|
widths={[450, 700]}
|
|
formats={["webp"]}
|
|
aspectRatio={"16:9"}
|
|
alt={title}
|
|
background={"chocolate"}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
)
|
|
}
|
|
<div class="description">
|
|
<p>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</header>
|
|
<slot />
|
|
<ArticleComments url={canonicalUrl.href} id={slug} />
|
|
</article>
|
|
|
|
<script define:vars={{ slug }}>
|
|
(async () => {
|
|
const response = await fetch(`/api/views?slug=${slug}`, { method: "POST" });
|
|
if (!response.ok) return;
|
|
const views = await response.text();
|
|
const $views = document.getElementById("views");
|
|
if (isNaN(parseInt(views, 10))) return;
|
|
if ($views) $views.textContent = views;
|
|
})();
|
|
</script>
|