Merge pull request #9 from TomPlum/dev

Home page refactor

README.md

@@ -2,6 +2,23 @@
 
 Practice reading real Japanese from news articles published in Japan.
 
-# Data Sources
+## Local Development
+
+1. Clone the repository
+```sh
+git clone [email protected]:TomPlum/nyuusu.git
+```
+
+2. Install NPM dependencies
+```sh
+npm install
+```
+
+3. Run the local development server
+```sh
+npm run dev
+```
+
+## Data Sources
 
 - The Newscatcher API is used to fetch news article information used in this application. See https://www.newscatcherapi.com/ for more info.

src/components/Typography/Typography.module.scss

@@ -0,0 +1,5 @@
+@import "styles/mixins";
+
+.vertical {
+  @include vertical-text;
+}

src/components/Typography/Typography.tsx

@@ -0,0 +1,17 @@
+import { TypographyProps } from "./types.ts"
+import { PropsWithChildren } from "react"
+import styles from './Typography.module.scss'
+import classNames from "classnames"
+import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
+
+const Typography = ({ children, className }: PropsWithChildren<TypographyProps>) => {
+  const { language } = useSettingsContext()
+
+  return (
+    <p className={classNames(className, { [styles.vertical]: language === 'jp' })}>
+      {children}
+    </p>
+  )
+}
+
+export default Typography

src/components/Typography/index.ts

@@ -0,0 +1 @@
+export { default } from './Typography.tsx'

src/components/Typography/types.ts

@@ -0,0 +1,3 @@
+export interface TypographyProps {
+    className?: string
+}

src/hooks/useLocale/useLocale.ts

@@ -3,7 +3,7 @@ import enLocale from "date-fns/locale/en-GB"
 import jpLocale from "date-fns/locale/ja"
 import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
 
-const useLocale = () => {
+const useLocale = (): Locale => {
   const { language } = useSettingsContext()
 
   return useMemo(() => {

src/locales/en/translation.json

@@ -56,14 +56,30 @@
       }
     },
     "home": {
-      "title": "ニュース。",
+      "article": {
+        "publisher": "NYUSU.COM",
+        "rights": "The copyright of the materials belongs to nyusu.com unless stated otherwise.",
+        "feed-title": "Latest Japanese headlines",
+        "body": "Nyusu.com is a small side-project of mine that aims to test your Japanese reading ability using headlines and excerpts from real Japanese news articles written by and for native Japanese people."
+      },
+      "title": [
+        "Most newspapers use only the 2136 characters in the jōyō kanji table.",
+        "The 5 major daily newspapers are the Yomiuri, Asahi, Mainichi, Sankei and Nihon Keizai Shimbun.",
+        "Today there are said to be 121 daily newspapers that are members of the NSK."
+      ],
       "newspaper": {
         "title": "Newspaper",
         "desc": "A full-page newspaper article excerpt."
       },
       "articles": {
         "title": "Articles",
-        "desc": "A library of short article headlines."
+        "desc": "A library of short article headlines.",
+        "cards": {
+          "body": "Browse lots of headlines at a glance. Sort by difficulty and filter by source to find the best material for you."
+        },
+        "newspaper": {
+          "body": "View a single headline in detail. Read related text from an excerpt from the article. See detailed information about the difficulty rating and export the contents into an Anki card."
+        }
       }
     }
   },
@@ -125,7 +141,8 @@
       "heading": "Anki",
       "deck": {
         "label": "Deck Name",
-        "help": "Cannot be empty."
+        "help": "Folders are separated by ::",
+        "error": "Cannot be empty."
       },
       "tags": {
         "label": "Tags",

src/locales/jp/translation.json

@@ -50,14 +50,30 @@
       }
     },
     "home": {
-      "title": ["ニュースの見出し。", "記事内容。", "読書の練習", "最新情報"],
+      "article": {
+        "publisher": "ニュース・コム",
+        "rights": "特に断りのない限り、著作権はnyusu.comに帰属します。",
+        "feed-title": "最新の日本の見出しと記事",
+        "body": "Nyusu.comは私の小さなサイドプロジェクトで、ネイティブの日本人によって書かれた実際の日本のニュース記事の見出しや抜粋を使って、日本語の読解力をテストすることを目的としている。"
+      },
+      "title": [
+        "ほとんどの新聞は常用漢字表の2136文字しか使わない。",
+        "5大日刊紙とは、読売新聞、朝日新聞、毎日新聞、産経新聞、日本経済新聞である。",
+        "現在、NSKに加盟している日刊紙は121紙と言われている。"
+      ],
       "newspaper": {
         "title": "新聞",
         "desc": "新聞記事の抜粋。"
       },
       "articles": {
         "title": "記事",
-        "desc": "短い記事の見出しのライブラリ。"
+        "desc": "短い記事の見出しのライブラリ。",
+        "cards": {
+          "body": "たくさんの見出しを一目で閲覧できる。難易度でソートし、ソースでフィルタリングして、あなたに最適な記事を見つけよう。"
+        },
+        "newspaper": {
+          "body": "見出しの詳細を見る。 記事の抜粋から関連する文章を読む。難易度の詳細情報を見て、内容をAnkiカードにエクスポートする。"
+        }
       }
     }
   },
@@ -118,7 +134,8 @@
       "heading": "アンキ",
       "deck": {
         "label": "デッキ名",
-        "help": "空は不可"
+        "help": "フォルダは「::」で区切られる。",
+        "error": "空は不可"
       },
       "tags": {
         "label": "タグ",

src/modules/Newspaper/components/Banner/Banner.module.scss

@@ -13,7 +13,8 @@
   .border {
     border-top: 1px solid $black-ink;
     border-bottom: 1px solid $black-ink;
-    padding: 0 30px;
+    padding: 8px 30px;
+    margin-bottom: 5px;
   }
 
   .title {

src/modules/Newspaper/components/Headline/Headline.tsx

@@ -10,18 +10,20 @@ const Headline = ({ headline }: HeadlineProps) => {
   const { t } = useTranslation('translation', { keyPrefix: 'newspaper.headline' })
 
   const copy = useCallback(() => {
-    navigator.clipboard.writeText(headline).then(() => {
-      fireToast({
-        type: 'success',
-        timeout: 2000,
-        message: t('copy.success')
+    if (typeof headline === 'string') {
+      navigator.clipboard.writeText(headline).then(() => {
+        fireToast({
+          type: 'success',
+          timeout: 2000,
+          message: t('copy.success')
+        })
+      }).catch(() => {
+        fireToast({
+          type: 'error',
+          message: t('copy.error')
+        })
       })
-    }).catch(() => {
-      fireToast({
-        type: 'error',
-        message: t('copy.error')
-      })
-    })
+    }
   }, [fireToast, headline, t])
 
   return (

src/modules/Newspaper/components/Headline/types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from "react"
+
 export interface HeadlineProps {
-    headline: string
+    headline: string | ReactElement
 }

src/modules/Settings/components/AnkiDeckSelector/AnkiDeckSelector.tsx

@@ -37,8 +37,8 @@ const AnkiDeckSelector = () => {
         label={t('label')}
         onChange={handleChange}
         id='anki-deck-name-selector'
-        helperText={error ? t('help') : ''}
         data-testid='anki-deck-name-selector'
+        helperText={error ? t('error') : t('help')}
       />
     </div>
   )

src/modules/Settings/components/SettingsSection/SettingsSection.module.scss

@@ -1,7 +1,7 @@
 @import "styles/colours";
 
 .section {
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   display: flex;
   flex-direction: column;
 

src/styles/_colours.scss

@@ -1,6 +1,7 @@
 // TODO: Move colours here and establish themes
 
 $newspaper: #f9f7f1;
+$newspaper-secondary: #fffff8;
 $white: #ffffff;
 $black-ink: #2e2e2e;
 $muted: #686767;

src/views/HomeView/HomeView.module.scss

@@ -1,15 +1,20 @@
 @import "styles/colours";
 
 .view {
-  height: 100%;
   width: 100%;
+  height: 100%;
   background-color: $newspaper;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
 }
 
-.wrapper {
-  color: $black-ink;
-  height: 100%;
+.content {
   width: 100%;
+  max-width: 1000px;
+  align-items: flex-start;
+  padding-top: 20px;
 }
 
 .left {
@@ -38,19 +43,25 @@
   margin-bottom: 0;
 }
 
-.typewriter {
-  font-size: 5em;
-}
-
-.cursor {
-  font-size: 5em;
-}
-
 .dateContainer {
   width: 100%;
   max-width: 1500px;
 }
 
 .date {
   color: $black-ink;
+}
+
+.typeArticle {
+  &:hover {
+    border-radius: 5px;
+    cursor: pointer;
+    background-clip: content-box;
+    background-color: $newspaper-secondary;
+    transition: all ease-in-out 0.2s;
+  }
+}
+
+.article {
+  color: $black-ink;
 }