feat: added views to ArticlePost

.env.example

@@ -0,0 +1,4 @@
+IS_SITE_UNDER_CONSTRUCTION=false
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_PASSWORD=12345

netlify/functions/views.ts

@@ -3,8 +3,8 @@ import { Handler } from "@netlify/functions";
 import Redis from "ioredis";
 
 const redis = new Redis({
-	host: "redis-19655.c300.eu-central-1-1.ec2.cloud.redislabs.com",
-	port: 19655,
+	host: process.env.REDIS_HOST,
+	port: Number.parseInt(process.env.REDIS_PORT || "6379", 10),
 	password: process.env.REDIS_PASSWORD,
 });
 

src/components/ArticlePost/ArticlePost.astro

@@ -1,10 +1,12 @@
 ---
 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";
 import TranslatedLink from "../TranslatedLink";
 import "./ArticlePost.scss";
+import { useTranslation } from "@root/i18n/utils";
 
 export type Props = {
 	data: ArticleType;
@@ -12,11 +14,13 @@ export type Props = {
 };
 
 const { data, lang } = Astro.props as Props;
-const { title, description, coverImage, tags, author, published_at } = data;
+const { slug, title, description, coverImage, tags, author, published_at } = data;
+const t = useTranslation(Astro);
 ---
 
 <article itemscope itemtype="http://schema.org/BlogPosting" class="article">
 	<header>
+		<div>
 			<div class="tags">
 				<ul itemprop="keywords">
 					{
@@ -30,6 +34,11 @@ const { title, description, coverImage, tags, author, published_at } = data;
 					}
 				</ul>
 			</div>
+			<div class="views">
+				<Icon name="eye" width="21" height="21" />
+				<span><span id="views">---</span>&nbsp;{t("article.views")}</span>
+			</div>
+		</div>
 		<div class="heading">
 			<h1 itemprop="headline">{title}</h1>
 		</div>
@@ -65,3 +74,13 @@ const { title, description, coverImage, tags, author, published_at } = data;
 	<slot />
 	<ArticleComments />
 </article>
+
+<script define:vars={{ slug }}>
+	(async () => {
+		const response = await fetch(`/api/views?slug=${slug}`, { method: "POST" });
+		const views = await response.text();
+		const $views = document.getElementById("views");
+
+		if ($views) $views.textContent = views;
+	})();
+</script>

src/components/ArticlePost/ArticlePost.scss

@@ -1,5 +1,18 @@
 .article {
 	& header {
+		& div:nth-child(1) {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			& .views {
+				display: flex;
+				align-items: center;
+				& span {
+					margin-left: 3.5px;
+					font-size: var(--font-size-sm);
+				}
+			}
+		}
 		& .heading {
 			margin-top: 1.125rem;
 
@@ -62,8 +75,15 @@
 
 @media screen and (max-width: 560px) {
 	.article {
-		& header .heading h1 {
+		& header {
+			& div:nth-child(1) {
+				flex-direction: column-reverse;
+				row-gap: 10px;
+				align-items: flex-start;
+			}
+			& .heading h1 {
 				font-size: 2rem;
 			}
 		}
 	}
+}

src/i18n/en/ui.ts

@@ -6,6 +6,7 @@ export default {
 	"article.availableOn": "Available on",
 	"articles.empty": "No articles found...",
 	"articlePost.comments": "Comments",
+	"article.views": "views",
 	"recentArticles.empty": "There is nothing here yet...",
 	/* Page titles */
 	"pageTitle.about": "About me",

src/i18n/ru/ui.ts

@@ -6,6 +6,7 @@ export default {
 	"article.availableOn": "Доступно на",
 	"articles.empty": "Не найдено ни одной статьи...",
 	"articlePost.comments": "Комментарии",
+	"article.views": "просмотров",
 	"recentArticles.empty": "Пока что здесь ничего нет...",
 	/* Page titles */
 	"pageTitle.about": "Обо мне",

src/icons/eye.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.45443 11.6532C3.37609 11.8671 3.21746 12.042 3.01222 12.1408C2.80699 12.2395 2.57133 12.2544 2.35533 12.1821C2.13932 12.1099 1.95999 11.9563 1.85545 11.754C1.7509 11.5516 1.72937 11.3165 1.79543 11.0985C1.77793 11.151 1.79543 11.0968 1.79543 11.0968C1.82655 11.0004 1.86277 10.9058 1.90393 10.8132C1.97393 10.647 2.07718 10.4177 2.21893 10.1465C2.50768 9.604 2.95743 8.88125 3.62068 8.1585C4.95943 6.69725 7.15218 5.25 10.4999 5.25C13.8477 5.25 16.0404 6.69725 17.3792 8.1585C18.0938 8.94246 18.6733 9.83956 19.0942 10.8132L19.1747 11.011C19.1799 11.025 19.1974 11.116 19.2149 11.2035L19.2499 11.375C19.2499 11.375 19.3969 11.9577 18.6514 12.2045C18.4319 12.2778 18.1922 12.2612 17.9849 12.1582C17.7777 12.0552 17.6196 11.8743 17.5454 11.655V11.6498L17.5349 11.6217C17.447 11.3969 17.3465 11.1773 17.2339 10.9637C16.9228 10.3767 16.5382 9.83153 16.0894 9.3415C15.0219 8.17775 13.2772 7 10.4999 7C7.72268 7 5.97793 8.17775 4.91043 9.3415C4.33248 9.97512 3.86247 10.6993 3.51918 11.4853C3.50082 11.5304 3.48332 11.5759 3.46668 11.6217L3.45443 11.6532V11.6532ZM6.99993 12.25C6.99993 11.3217 7.36868 10.4315 8.02506 9.77513C8.68143 9.11875 9.57167 8.75 10.4999 8.75C11.4282 8.75 12.3184 9.11875 12.9748 9.77513C13.6312 10.4315 13.9999 11.3217 13.9999 12.25C13.9999 13.1783 13.6312 14.0685 12.9748 14.7249C12.3184 15.3813 11.4282 15.75 10.4999 15.75C9.57167 15.75 8.68143 15.3813 8.02506 14.7249C7.36868 14.0685 6.99993 13.1783 6.99993 12.25V12.25Z" fill="#21262D"/>
+</svg>