Merge pull request #52 from howznguyen/main

release
howznguyen · Apr 19, 2023 · 0f58496 · 0f58496
2 parents 36299f9 + ebedefe
commit 0f58496
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 24 deletions.
diff --git 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
@@ -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
@@ -1,12 +1,14 @@
 import Giscus from "@giscus/react";
 import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
 
 interface CommentSectionProps {
   giscus : any;
 }
 
 
 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}
       />
     </div>
   );

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 <PageNotFound />;
 
@@ -78,17 +78,16 @@ const PostPage = ({
               {post.title}
             </h1>
             <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
-              Viết vào <DateTime value={post.published.start} />{" "}
-              bởi {post.authors[0].name}.
+              {trans.post.published_at_by(post.published.start, post.authors[0].name, locale)}
             </p>
             <div className="mt-6 flex items-center justify-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-300">
               <div className="flex items-center gap-1">
                 <Icon icon="HiOutlineClock"/>
-                <span>{post.readingTime} phút đọc</span>
+                <span>{trans.post.reading_time(post.readingTime)}</span>
               </div>
               <div className="flex items-center gap-1">
                 <Icon icon="HiEye"/>
-                <span>{post.views} lượt xem</span>
+                <span>{trans.post.reading_time(post.views)}</span>
               </div>
             </div>
           </div>
@@ -100,7 +99,7 @@ const PostPage = ({
               <NotionRender contents={post.contents} />
 
               <span>
-                Tags:{" "}
+                {trans.tag.tags}:{" "}
                 {post.tags.map((tag: any, index: number) => (
                   <Tag key={index} name={tag} />
                 ))}
@@ -113,7 +112,7 @@ const PostPage = ({
 
             <div className="md:col-span-2 mb-2">
               <span className="mb-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
-                Những Bài Viết Liên Quan:
+                {trans.post.relate_post}
               </span>
               <PostList posts={stateRelatedPosts} limit={3} />
             </div>
@@ -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 = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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}`
             }
         },
@@ Expand Down @@