From 92ffa444daa1ba4f6033a5f739cb10069fbd9f14 Mon Sep 17 00:00:00 2001 From: sergeyyarkov Date: Sun, 6 Nov 2022 18:07:00 +0300 Subject: [PATCH] feat: added views to ArticlePost --- .env.example | 4 ++ netlify/functions/views.ts | 4 +- src/components/ArticlePost/ArticlePost.astro | 45 ++++++++++++++------ src/components/ArticlePost/ArticlePost.scss | 24 ++++++++++- src/i18n/en/ui.ts | 1 + src/i18n/ru/ui.ts | 1 + src/icons/eye.svg | 3 ++ 7 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 .env.example create mode 100644 src/icons/eye.svg diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..e62d18f --- /dev/null +++ b/.env.example @@ -0,0 +1,4 @@ +IS_SITE_UNDER_CONSTRUCTION=false +REDIS_HOST=localhost +REDIS_PORT=6379 +REDIS_PASSWORD=12345 \ No newline at end of file diff --git a/netlify/functions/views.ts b/netlify/functions/views.ts index abc7fbe..e4e8b20 100644 --- a/netlify/functions/views.ts +++ b/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, }); diff --git a/src/components/ArticlePost/ArticlePost.astro b/src/components/ArticlePost/ArticlePost.astro index bc42a3a..2ad1992 100644 --- a/src/components/ArticlePost/ArticlePost.astro +++ b/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,23 +14,30 @@ 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); ---
-
-
    - { - tags.map((tag) => ( -
  • - -
    • - )) - } -
+
+
+
    + { + tags.map((tag) => ( +
  • + +
    • + )) + } +
+
+
+ + --- {t("article.views")} +

{title}

@@ -65,3 +74,13 @@ const { title, description, coverImage, tags, author, published_at } = data;
+ + diff --git a/src/components/ArticlePost/ArticlePost.scss b/src/components/ArticlePost/ArticlePost.scss index 56da18e..1f63f75 100644 --- a/src/components/ArticlePost/ArticlePost.scss +++ b/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 { - font-size: 2rem; + & header { + & div:nth-child(1) { + flex-direction: column-reverse; + row-gap: 10px; + align-items: flex-start; + } + & .heading h1 { + font-size: 2rem; + } } } } diff --git a/src/i18n/en/ui.ts b/src/i18n/en/ui.ts index a140144..c7ef8c1 100644 --- a/src/i18n/en/ui.ts +++ b/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", diff --git a/src/i18n/ru/ui.ts b/src/i18n/ru/ui.ts index f7ad02c..32cea20 100644 --- a/src/i18n/ru/ui.ts +++ b/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": "Обо мне", diff --git a/src/icons/eye.svg b/src/icons/eye.svg new file mode 100644 index 0000000..5ec0611 --- /dev/null +++ b/src/icons/eye.svg @@ -0,0 +1,3 @@ + + +