yarkov.tech/src/components/ArticlePost/ArticlePost.astro

---
import { Picture } from "@astrojs/image/components";
import { createDateFormatter } from "@root/utils";
import { isURL } from "@utils/string";
import ArticleComments from "@components/ArticleComments";
import TranslatedLink from "../TranslatedLink";
import "./ArticlePost.scss";

export type Props = {
	data: ArticleType;
	lang: string;
};

const { data, lang } = Astro.props as Props;
const { title, description, coverImage, tags, author, published_at } = data;
---

<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
	<header>
		<div class="tags">
			<ul itemprop="keywords">
				{
					tags.map((tag) => (
						<li>
							<TranslatedLink rel="tag" to={`/articles/?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${
								tags.at(-1) === tag ? "" : ","
							}`}</TranslatedLink>
						</li>
					))
				}
			</ul>
		</div>
		<div class="heading">
			<h1 itemprop="headline">{title}</h1>
		</div>
		<div class="published">
			<time itemprop="datePublished" datetime={published_at}
				>{createDateFormatter(lang).format(new Date(published_at))}
			</time>
			<span itemprop="author">{author}</span>
		</div>
		{
			coverImage && (
				<div class="cover">
					<figure>
						<Picture
							itemprop="image"
							src={isURL(coverImage) ? coverImage : `../../../content/assets/images/${coverImage}`}
							sizes="(max-width: 450px) 450px, 700px"
							widths={[450, 700]}
							formats={["webp"]}
							aspectRatio={"16:9"}
							alt={title}
						/>
					</figure>
				</div>
			)
		}
		<div class="description">
			<p>
				{description}
			</p>
		</div>
	</header>
	<slot />
	<ArticleComments />
</article>