Feat/translate texts into japanese by using deepl (#13)

* chore/install deepl

* feat/translate title into japanese in main/index.jsx

* feat/translate title into japanese in main/[id].jsx all/index.jsx and all/[id].jsx

* docs/remove useRouter

* fix/add null checker

* refactor/change import order and add try and catch and change unique id

* refactor/change commentout

* refactor/change import order and add try and catch and change unique id ver2

* feat/create helpers/deepl.js

* refactor/import and add textResultToStory

* refactor/import textResultToComment and use textResultToStory and textResultToComment

* refactor/change num to string in deepl.js

* refactor/change return in translateToJapaneseTitle function

* feat/create get story and comment details function in helpers/hackerNews

* feat/create translate result functions in helpers/deepl

* feat/create translate functions in helpers/deepl

* feat/create language option in helpers/deepl

* refactor/import 5 functions from helpers/hackerNews and deepl and rename appropriately

* refactor/import 3 functions from helpers/hackerNews and deepl and rename appropriately

* feat/add ArticlesCategoryTitle and PageDescription components

* docs/rm DetailArticleText component and add DetailArticleUrl component

* fix/add undefined

* docs/change texts

* docs/change font and background color

* feat/add GogoleFonts

* refactor/use helpers and rename

* refactor/use helpers and rename part2

* docs/remove commentout

* docs/change texts

* style/change font and background color

* refactor/remove revalidate

* refactor/change getServerSideProps

* docs/change name to camelcase

* docs/change the place of variable in ROOT/constants/deepl.js

* fix/change props name

* style/change color theme

* docs/fixing bug

* fix/prevent empty text

components/Article/Article.module.css

@@ -1,5 +1,8 @@
 .article_primary_container {
-  background-color: rgb(219, 214, 214);
+  background-color: #ffffff;
+  box-shadow: 2px 2px 4px #8d7e6faf;
+  -webkit-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
   padding: 0.5rem;
   margin-bottom: 2rem;
   width: 100%;

components/ArticleAuthor/ArticleAuthor.module.css

@@ -1,5 +1,5 @@
 .articleAuthor {
   margin-bottom: 0;
   text-align: center;
-
+  color: #612652;
 }

components/ArticleNumber/ArticleNumber.module.css

@@ -1,3 +1,4 @@
 .articleNumber {
   font-size: 3.5em;
+  color: #612652;
 }

components/ArticlePoints/ArticlePoints.module.css

@@ -1,4 +1,5 @@
 .articlePoints {
   margin-bottom: 0;
   text-align: center;
+  color: #612652;
 }

components/ArticleTime/ArticleTime.module.css

@@ -1,4 +1,5 @@
 .articleTime {
   margin-bottom: 0;
   text-align: center;
+  color: #612652;
 }

components/ArticleTitle/ArticleTitle.jsx

@@ -1,7 +1,7 @@
 import styles from "./ArticleTitle.module.css";
 
-const ArticleTitle = ({articleTitle}) => {
-  return <h2 className={styles.articleTitle}>{articleTitle}</h2>;
+const ArticleTitle = ({ articleTitle }) => {
+  return <div className={styles.articleTitle}>{articleTitle}</div>;
 };
 
 export default ArticleTitle;

components/ArticleTitle/ArticleTitle.module.css

@@ -1,3 +1,5 @@
 .articleTitle {
+  font-size: 1.5rem;
   margin: 0;
+  color: #612652;
 }

components/ArticlesCategoryTitle/ArticlesCategoryTitle.module.css

@@ -1,4 +1,5 @@
 .articlesCategoryTitle {
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin-top: 0;
+  color: #612652;
 }

components/DayTitleAndPoints/DayTitleAndPoints.module.css

@@ -1,13 +1,22 @@
 .dayTitleAndPoints {
+  background-color: #ffffff;
+  box-shadow: 2px 2px 4px #8d7e6faf;
+  -webkit-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
   display: flex;
   justify-content: flex-start;
   width: 100%;
+  margin-bottom: 1rem;
 }
 
 .dayTitle {
-  width: 80%;
+  width: 85%;
+  padding: 0 1rem 0;
+  color: #612652;
 }
 
 .dayPoints {
-  width: 20%;
+  width: 15%;
+  padding: 0 1rem 0;
+  color: #612652;
 }

components/DetailArticleCategoryTitle/DetailArticleCategoryTitle.module.css

@@ -1,3 +1,5 @@
 .detailArticleCategoryTitle {
+  margin-top: 2.5rem;
   margin-bottom: 0.5rem;
+  color: #8d7e6f;
 }

components/DetailArticleCommentChild/DetailArticleCommentChild.module.css

@@ -1,5 +1,9 @@
 .detailArticleCommentChild {
-  background-color: antiquewhite;
+  background-color: #ffffff;
+  box-shadow: 2px 2px 1px #8d7e6faf;
+  -webkit-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
   padding: 0.5rem;
   margin-bottom: 1rem;
+  color: #612652a7;
 }

components/DetailArticleCommentParent/DetailArticleCommentParent.module.css

@@ -1,5 +1,9 @@
 .detailArticleCommentParent {
-  background-color: beige;
+  background-color: #ffffff;
+  box-shadow: 2px 2px 1px #8d7e6faf;
+  -webkit-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
   padding: 0.5rem;
   margin-bottom: 1rem;
+  color: #612652;
 }

components/DetailArticleTitle/DetailArticleTitle.jsx

@@ -2,7 +2,7 @@ import styles from "./DetailArticleTitle.module.css";
 
 const DetailArticleTitle = (props) => {
   return (
-    <h2 className={styles.detailArticleTitle}>{props.detailArticleTitle}</h2>
+    <div className={styles.detailArticleTitle}>{props.detailArticleTitle}</div>
   );
 };
 

components/DetailArticleTitle/DetailArticleTitle.module.css

@@ -1,4 +1,5 @@
 .detailArticleTitle {
   font-size: 1.5rem;
   margin: 0 0 0.5rem 0;
+  color: #612652;
 }

components/DetailArticleUrl/DetailArticleUrl.jsx

@@ -0,0 +1,14 @@
+import styles from "./DetailArticleUrl.module.css";
+import Link from "next/link.js";
+
+const DetailArticleUrl = (props) => {
+  return (
+    <div>
+      <Link href={props.detailArticleUrl} target="_blank">
+        <div className={styles.detailArticleUrl}>{props.detailArticleUrl}</div>
+      </Link>
+    </div>
+  );
+};
+
+export default DetailArticleUrl;

components/DetailArticleUrl/DetailArticleUrl.module.css

@@ -0,0 +1,8 @@
+.detailArticleUrl {
+  background-color: #ffffff;
+  box-shadow: 2px 2px 1px #8d7e6faf;
+  -webkit-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 0 8px #8d7e6faf(0, 0, 0, 0.1);
+  color: #612652;
+  padding: 0.5rem;
+}

components/PageDescription/PageDescription.jsx

@@ -3,8 +3,8 @@ import styles from "./PageDescription.module.css";
 const PageDescription = () => {
   return (
     <p className={styles.pageDescription}>
-      このサイトは直近1時間以内に投稿されたHacer Newsの記事の中から
-      人気TOP3の記事をピックアップし日本語訳に変換し表示するサイトです。
+      このサイトは<a href="https://news.ycombinator.com/">Hacer News</a>
+      から上位の記事をピックアップし、記事に対する最初のコメントを日本語訳に変換し表示するサイトです。
     </p>
   );
 };

components/PageDescription/PageDescription.module.css

@@ -1,3 +1,8 @@
 .pageDescription {
+  margin-top: 3rem;
   font-size: 1rem;
+  color: #8d7e6f;
+}
+.pageDescription a{
+  text-decoration-line: underline;
 }

components/PageTitle/PageTitle.module.css

@@ -1,6 +1,6 @@
 .pageTitle {
-  color: #fff;
-  background-color: #eb640c;
+  color: #89111b;
+  background-color: #fe763c;
   text-align: center;
   padding: 2rem;
   margin: 0;

components/TableHeader/TableHeader.module.css

@@ -5,11 +5,11 @@
 }
 
 .tableTitle {
-  width: 80%;
-  font-weight: bold;
+  width: 85%;
+  color: #8d7e6f;
 }
 
 .tablePoints {
-  width: 20%;
-  font-weight: bold;
+  width: 15%;
+  color: #8d7e6f;
 }

constants/deepl.js

@@ -0,0 +1 @@
+export const JA = "ja";

helpers/deepl/translateCommentDetail.js

@@ -0,0 +1,19 @@
+import * as deepl from "deepl-node";
+
+export const translateCommentDetail = async (commentDetail, language) => {
+  const translator = new deepl.Translator(process.env.DEEPL_AUTH_KEY);
+
+  const translatedResponse = commentDetail.text
+    ? await translator.translateText(commentDetail.text, null, language)
+    : { text: "" };
+
+  return {
+    by: commentDetail.by || "",
+    id: commentDetail.id || 0,
+    kids: commentDetail.kids || [],
+    parent: commentDetail.parent || 0,
+    text: translatedResponse.text || "",
+    time: commentDetail.id || 0,
+    type: commentDetail.type || "",
+  };
+};

helpers/deepl/translateStoryDetail.js

@@ -0,0 +1,20 @@
+import * as deepl from "deepl-node";
+
+export const translateStoryDetail = async (storyDetail, language) => {
+  const translator = new deepl.Translator(process.env.DEEPL_AUTH_KEY);
+  const translatedTitle = storyDetail.title
+    ? await translator.translateText(storyDetail.title, null, language)
+    : { text: "" };
+
+  return {
+    by: storyDetail.by || "",
+    descendants: storyDetail.descendants || 0,
+    id: storyDetail.id || 0,
+    kids: storyDetail.kids || [],
+    score: storyDetail.score || 0,
+    time: storyDetail.time || 0,
+    title: translatedTitle.text,
+    type: storyDetail.type || "",
+    url: storyDetail.url || "",
+  };
+};

helpers/hackerNews/commentDetail.js

@@ -0,0 +1,19 @@
+export const getCommentDetail = async (commentId) => {
+  let commentDetail = {};
+  try {
+    const getCommentDetailRes = await fetch(
+      `https://hacker-news.firebaseio.com/v0/item/${commentId}.json?print=pretty`
+    );
+    if (!getCommentDetailRes.ok) {
+      return {
+        notFound: true,
+      };
+    }
+    commentDetail = await getCommentDetailRes.json();
+    return commentDetail;
+  } catch (error) {
+    return {
+      notFound: true,
+    };
+  }
+};

helpers/hackerNews/storyDetail.js

@@ -0,0 +1,20 @@
+export const getStoryDetail = async (id) => {
+  let storyDetail = {};
+  try {
+    const getStoryDetailRes = await fetch(
+      `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`
+    );
+
+    if (!getStoryDetailRes.ok) {
+      return {
+        notFound: true,
+      };
+    }
+    storyDetail = await getStoryDetailRes.json();
+    return storyDetail;
+  } catch (error) {
+    return {
+      notFound: true,
+    };
+  }
+};