diff --git a/manifest.json b/manifest.json index 330847f..8606147 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "howz.dev", - "version": "0.0.5", + "version": "0.0.6", "scm": {}, - "timestamp": "2023-04-19T18:33:48.000Z" + "timestamp": "2023-04-20T20:00:00.000Z" } diff --git a/package.json b/package.json index e4ca5b2..4b1a0af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "howz.dev", - "version": "0.0.5", + "version": "0.0.6", "description": "💠 Personal website and blog made using Next.js, TypeScript, Tailwind CSS and Notion", "author": "howznguyen", "license": "ISC", diff --git a/src/components/molecules/CommentSection.tsx b/src/components/molecules/CommentSection.tsx index ca3734b..0ad042d 100644 --- a/src/components/molecules/CommentSection.tsx +++ b/src/components/molecules/CommentSection.tsx @@ -1,5 +1,6 @@ import Giscus from "@giscus/react"; import { useTheme } from "next-themes"; +import { useRouter } from "next/router"; interface CommentSectionProps { giscus : any; @@ -7,6 +8,7 @@ interface CommentSectionProps { const CommentSection = ({ giscus }: CommentSectionProps) => { + const { locale } = useRouter() let { theme } = useTheme(); return ( @@ -25,7 +27,7 @@ const CommentSection = ({ giscus }: CommentSectionProps) => { loading="lazy" theme={theme === "dark" ? "dark" : "light"} host="https://giscus.app" - lang="vi" + lang={locale} /> ); diff --git a/src/lang/en.ts b/src/lang/en.ts index fec3d19..5a16a64 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -1,3 +1,5 @@ +import moment from "moment"; + const en = { lang:[ { value: "en", label: "Eng" }, @@ -101,8 +103,13 @@ const en = { ], }, post: { - published_at_by: (datetime: any, author: any) => { - return `Published at ${datetime} by ${author}.`; + published_at_by: (datetime: any, author: any, locale: string) => { + moment.locale(locale); + const days = 5; + let raw = moment(datetime); + let duration = moment.duration(moment().diff(datetime)); + const _datetime = (duration.asHours() > 24 * days) ? raw.format('DD/MM/YYYY HH:mm') : raw.fromNow(); + return `Published at ${_datetime} by ${author}.`; }, reading_time: (min: any) => { return `${min} min read`; diff --git a/src/lang/vi.ts b/src/lang/vi.ts index ece7036..6829b60 100644 --- a/src/lang/vi.ts +++ b/src/lang/vi.ts @@ -1,3 +1,5 @@ +import moment from "moment"; + const vi = { lang:[ { value: "en", label: "Eng" }, @@ -97,8 +99,13 @@ const vi = { ], }, post: { - published_at_by: (datetime: any, author: any) => { - return `Được đăng vào ${datetime} bởi ${author}.`; + published_at_by: (datetime: any, author: any, locale: string) => { + moment.locale(locale); + const days = 5; + let raw = moment(datetime); + let duration = moment.duration(moment().diff(datetime)); + const _datetime = (duration.asHours() > 24 * days) ? raw.format('DD/MM/YYYY HH:mm') : raw.fromNow(); + return `Được đăng vào ${_datetime} bởi ${author}.`; }, reading_time: (min: any) => { return `${min} phút đọc`; diff --git a/src/lib/Notion.ts b/src/lib/Notion.ts index 4540c34..91285e4 100644 --- a/src/lib/Notion.ts +++ b/src/lib/Notion.ts @@ -1,6 +1,7 @@ import { Client } from '@notionhq/client'; import { NotionToMarkdown } from "notion-to-md"; import readingTime from 'reading-time'; + import { NOTION_API_KEY, SETTING_DATABASE_ID, @@ -85,7 +86,7 @@ const Notion = { }, - async getPostBySlug(slug : string) { + async getPostBySlug(slug : string, language: string = 'vi') { let post : any = {}; const response = await notion.databases.query({ database_id: POST_DATABASE_ID, @@ -98,6 +99,10 @@ const Notion = { { property: 'slug', rich_text: { equals: slug }, + }, + { + property: 'language', + select: { equals: language }, } ] }, @@ -138,7 +143,7 @@ const Notion = { }); }, - async updateViewsBySlug(slug : string) { + async updateViewsBySlug(slug : string, language: string = 'vi') { const response = await notion.databases.query({ database_id: POST_DATABASE_ID, filter: { @@ -150,6 +155,10 @@ const Notion = { { property: 'slug', rich_text: { equals: slug }, + }, + { + property: 'language', + select: { equals: language }, } ] }, diff --git a/src/lib/Route.ts b/src/lib/Route.ts index 032b490..cbfa842 100644 --- a/src/lib/Route.ts +++ b/src/lib/Route.ts @@ -13,7 +13,7 @@ const Route = { // API api: { post: { - updateViews : (slug: string, includeDomain = false) => `${includeDomain ? BASE_URL : ''}/api/post/views?slug=${slug}` + updateViews : (slug: string, language: string, includeDomain = false) => `${includeDomain ? BASE_URL : ''}/api/post/views?slug=${slug}&language=${language}` } }, diff --git a/src/pages/post/[slug].tsx b/src/pages/post/[slug].tsx index 65f96fd..b37f563 100644 --- a/src/pages/post/[slug].tsx +++ b/src/pages/post/[slug].tsx @@ -5,7 +5,7 @@ import { PostList, } from "@/components/molecules"; import { MainTemplate, PageNotFound } from "@/components/templates"; -import { Notion, Route, Image as ImageHelper } from "@/lib"; +import { Notion, Route, Image as ImageHelper, useTrans } from "@/lib"; import { GetStaticPaths, GetStaticProps } from "next"; import Image from "next/image"; import { useEffect, useState } from "react"; @@ -18,7 +18,7 @@ import { } from "@/lib/env"; import { useRouter } from "next/router"; import { LoadingSection } from "@/components/organisms"; -import { DateTime, Icon, Tag } from "@/components/atoms"; +import { Icon, Tag } from "@/components/atoms"; interface PostPageProps { slug: any; @@ -38,16 +38,16 @@ const PostPage = ({ options, }: PostPageProps) => { const router = useRouter(); + const trans = useTrans(); let [stateRelatedPosts, setStateRelatedPosts] = useState(relatedPosts); + let locale = router.locale ?? 'vi'; useEffect(() => { - fetch(Route.api.post.updateViews(slug), { method: "POST" }); + fetch(Route.api.post.updateViews(slug, locale), { method: "POST" }); if(stateRelatedPosts !== relatedPosts) { setStateRelatedPosts(relatedPosts); } - }, [slug, stateRelatedPosts, relatedPosts]); - - + }, [slug,locale, stateRelatedPosts, relatedPosts]); if (!post) return ; @@ -78,17 +78,16 @@ const PostPage = ({ {post.title}

- Viết vào {" "} - bởi {post.authors[0].name}. + {trans.post.published_at_by(post.published.start, post.authors[0].name, locale)}

- {post.readingTime} phút đọc + {trans.post.reading_time(post.readingTime)}
- {post.views} lượt xem + {trans.post.reading_time(post.views)}
@@ -100,7 +99,7 @@ const PostPage = ({ - Tags:{" "} + {trans.tag.tags}:{" "} {post.tags.map((tag: any, index: number) => ( ))} @@ -113,7 +112,7 @@ const PostPage = ({
- Những Bài Viết Liên Quan: + {trans.post.relate_post}
@@ -150,7 +149,7 @@ export const getStaticProps: GetStaticProps = async (context) => { let posts = await Notion.getPosts(); let relatedPosts = []; try { - post = await Notion.getPostBySlug(slug as string); + post = await Notion.getPostBySlug(slug as string, locale as string); } catch (error) {} let giscus = {