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
- Viết vào