Add Japanese particles page and toka tari shi page.

And update other pages.

src/Pages/Japan/Japanese/en/contrast-particle.md

@@ -16,7 +16,7 @@ The <Jps colour="c1" text="first は particle"/> is the <Jps colour="c1" text="t
 
 "I like squid, <Jps colour="c2" text="but"/> I don't like octopus."
 
-### 関係する動画
+#### 関係する動画
 
 * [Episode21 「は」は時々（ときどき）「を」と「が」にとって代（か）わるけど、いつ？ "Wa" sometimes replaces "o" and "ga". When?](https://www.youtube.com/watch?v=8_h0H-V9C4A) by: [Private Japanese Lessons](https://www.youtube.com/@PrivateJapaneseLessons)
 

src/Pages/Japan/Japanese/en/dake-vs-shika.md

@@ -49,6 +49,6 @@ But you can use しか at the end by adding a negative form.
 
 ---
 
-### 関係する動画
+#### 関係する動画
 
 * [ONLY in Japanese だけ vs しか Differences(Common Mistake) - JLPT N4&5](https://www.youtube.com/watch?v=KmBVQM_l2wY&t=9s) by: [Japanese Ammo with Misa](https://www.youtube.com/@JapaneseAmmowithMisa)

src/Pages/Japan/Japanese/en/particles.md

@@ -0,0 +1,208 @@
+## Particles 助詞, じょし
+
+---
+
+#### は、が
+
+それ<Jps colour="c1" text="は"/>僕の<Furigana kanji="絵筆" kana="えふで"/>です。 That is <Jps colour="c2" text="my paint brush"/>. (<Jps colour="c1" text="Topic marker"/>)
+* The <Jps colour="c1" text="は"/> particle puts more emphasis on the <Jps colour="c2" text="following word"/>.
+
+これ<Jps colour="c1" text="が"/>田中さんの<Furigana kanji="絵筆" kana="えふで"/>です。<Jps colour="c2" text="This one"/> is your paintbrush.
+* The <Jps colour="c1" text="が"/> particle puts more emphasis on the <Jps colour="c2" text="preceding word"/>.
+  * <Jps colour="c2" text="誰"/><Jps colour="c1" text="が"/><Furigana kanji="壊" kana="こわ"/>したの。Who broke it?
+---
+
+頭<Jps colour="c1" text="が"/>痛い。My head hurts.
+
+頭<Jps colour="c1" text="は"/>痛い。My head hurts. (<Jps colour="c1" text="but nothing else, but not that"/>)
+
+犬<Jps colour="c1" text="は"/>好き。I like dogs. (<Jps colour="c1" text="but nothing else, but other animals"/>)
+
+今日<Jps colour="c1" text="は"/>かわいいね。You look cute today. (<Jps colour="c1" text="but usually you do not"/>)
+
+手<Jps colour="c1" text="が"/>痛いですか。Do your hands hurt?
+* 右手<Jps colour="c1" text="は"/>痛いです。My right hand hurts. (<Jps colour="c1" text="but not my left hand"/>)
+* 左手<Jps colour="c1" text="は"/>痛くないですけど、右手<Jps colour="c1" text="は"/>痛いです。 My left hand does not hurt, but my right hand does.
+
+* <Furigana kanji="髪" kana="かみ"/><Jps colour="c1" text="が"/>きれいですね。Your hair is beautiful.
+* <Furigana kanji="髪" kana="かみ"/><Jps colour="c1" text="は"/>きれいですね。Your hair is beautiful, <Jps colour="c1" text="but not the rest of you"/>.
+
+<Jps colour="c2" text="どの本"/><Jps colour="c1" text="が"/>一番面白いですか。<Jps colour="c2" text="Which book"/> is the most interesting? (<Jps colour="c2" text="main point"/>)
+
+ここからあの<Furigana kanji="看板" kana="かんばん"/><Jps colour="c1" text="が"/>見えますか。Can you see that billboard from here?
+
+Note that: ここからあの<Furigana kanji="看板" kana="かんばん"/><Jps colour="c1" text="を"/>見えますか。is not correct here.
+
+* <Jps colour="c1" text="を"/>見ますか。Do you watch something?
+* <Jps colour="c1" text="が"/>見えますか。Can you see something?
+
+今時間<Jps colour="c1" text="が"/>ありますか。
+
+* Object <Jps colour="c1" text="は"/> place <Jps colour="c1" text="に"/> あります。
+* Place <Jps colour="c1" text="に"/> object <Jps colour="c1" text="が"/> あります。
+
+* モンスター<Jps colour="c1" text="は"/>こわい。Monsters are scary. (statement)
+* モンスター<Jps colour="c1" text="が"/>こわい。I am scared of monsters. (subjective)
+
+車<Jps colour="c1" text="が"/>運転できますか。Can you drive a car?
+* <Jps colour="c1" text="が"/> できる、to be able to do.
+* So for potential forms, the を particle is changed to the <Jps colour="c1" text="が"/> particle.
+  * おにぎる<Jps colour="c1" text="を"/>作る。To make rice balls.
+  * おにぎる<Jps colour="c1" text="が"/>作れますか。Can you make rice balls?
+
+---
+
+#### を
+
+公園<Jps colour="c1" text="を"/>走る。To run in the park.
+
+公園<Jps colour="c1" text="を"/>歩く。To walk in the park.
+
+---
+
+#### に、へ
+
+に indicates:
+* Destination or direction, "to"
+  * Destination <Jps colour="c1" text="に"/>　行く
+  * Destination <Jps colour="c1" text="に"/>　<Furigana kanji="来" kana="く"/>る
+
+公園<Jps colour="c1" text="に"/>行きませんか。Would you like to go to the park?
+
+先生<Jps colour="c1" text="に"/>聞いたほうがいいですよ。
+* Somebody <Jps colour="c1" text="に"/> 聞く
+* Somebody <Jps colour="c1" text="に"/> 頼む
+
+車は駐車場<Jps colour="c1" text="に"/>あります。My car is in the parking lot. (see で section)
+* Location <Jps colour="c1" text="に"/> something があります。
+* Location <Jps colour="c1" text="で"/> event　がある。
+
+日本文化<Jps colour="c1" text="に"/><Furigana kanji="興味" kana="きょうみ"/>があります。I am interested in Japanese culture.
+
+へ indicates:
+* General direction, more emphasis on <Jps colour="c2" text="direction"/>
+
+こっち<Jps colour="c1" text="へ"/><Furigana kanji="来" kana="き"/>てください。Come over here, this way (in this direction).
+
+こっち<Jps colour="c1" text="に"/><Furigana kanji="来" kana="き"/>てください。Come over here, this exact spot.
+
+北<Jps colour="c1" text="へ"/>行ってください。Head north.
+
+Somewhere <Jps colour="c1" text="へ"/>の行き方。The way to get to somewhere.
+
+~<Furigana kanji="4時半" kana="よじはん"/><Jps colour="c1" text="に"/><Furigana kanji="迎" kana="むか"/>えに<Furigana kanji="来" kana="き"/>てくれる？ Will you pick me up at 4:30?
+* Time:
+  * 一時<Jps colour="c1" text="に"/>、at 1:00.
+* Days of the week:
+  * 日曜日<Jps colour="c1" text="に"/>、on sunday.
+* Months:
+  * <Furigana kanji="一月" kana="いちがつ"/><Jps colour="c1" text="に"/>、in January.
+* Note, this is not used always, like:
+  * 今日: <Jps strikethrough="true" text="今日に"/>
+  * 明日: <Jps strikethrough="true" text="明日に"/>
+
+一週間<Jps colour="c1" text="に"/>二回ジムに行く。Twice a week, I go to the gym.
+
+##### まで
+
+空港<Jps colour="c1" text="まで"/>お願いします。To the airport please.
+* You cannot use に here.
+
+Full would be: <Jps colour="c2" text="ここから"/>空港<Jps colour="c1" text="まで"/>お願いします。But since its obvious, the begin is not needed.
+
+まで is also used with:
+* ~<Jps colour="c1" text="まで"/>送る。To send someone home.
+* ~<Jps colour="c1" text="まで"/>見送る。To see someone off.
+* ~<Jps colour="c1" text="まで"/>送って行く。To send someone home.
+
+家<Jps colour="c1" text="まで"/>送って行ってあげるよ。I will take you all the way (<Jps colour="c1" text="until"/>) home.
+
+家<Jps colour="c1" text="に"/>送る。I will send it to your house.
+
+---
+
+#### で
+
+で indicates:
+* Location, "at", "in"
+* By means of, "with", "using"
+* Because of
+
+クレジットカード<Jps colour="c1" text="で"/>払えますか。Can I pay <Jps colour="c1" text="with"/> creditcard?
+
+息子は外<Jps colour="c1" text="で"/>遊んでいる。My son is playing outside.
+
+ジム<Jps colour="c1" text="で"/>運動する。To exercise at the gym.
+
+外<Jps colour="c1" text="に"/> (location verb)
+* いる、to be outside (living)
+* ある、to be outside (object)
+
+外<Jps colour="c1" text="で"/> (action verb)
+* 遊ぶ
+* 飲む
+* 食べる
+* 見る
+* 待つ
+
+~<Furigana kanji="改札口" kana="かいさつぐち"/>の前<Jps colour="c1" text="で"/>待ってるね。I am waiting in front of the ticket gate.
+
+5歳ぐらいの男の子が一人<Jps colour="c1" text="で"/>電車に乗っている。A boy about 5 years old is riding the train by himself.
+
+公園<Jps colour="c1" text="で"/><Furigana kanji="事故" kana="じこ"/>がありました。　There was an accident at the park.
+* Location <Jps colour="c1" text="で"/> event　がある。
+* Location <Jps colour="c1" text="に"/> something があります。
+
+台風<Jps colour="c1" text="で"/>飛行機が<Furigana kanji="欠航" kana="けっこう"/>になりました。The flight got cancelled because of a typhoon.
+* Note that you cannot use <Jps colour="c1" text="から"/> here. Even if that means "because".
+  * 忙しい<Jps colour="c1" text="から"/>、いけません。Because I am busy, I cannot go.
+* 台風 is a noun, so you would have to use <Jps colour="c1" text="だから"/>. But its still unnatural in this case, because you blame here.
+  * 人間<Jps colour="c1" text="だから"/>、飛べない。Because I am human, I cannot fly.
+* When blaming, you can use: <Jps colour="c1" text="のせいで"/>. (By fault of)
+  * 台風<Jps colour="c1" text="のせいで"/>飛行機が<Furigana kanji="欠航" kana="けっこう"/>になりました。The flight got cancelled because of a typhoon.
+  * コロナ<Jps colour="c1" text="のせいで"/>にほん<Furigana kanji="能力試験" kana="のうりょくしけん"/>が受けられません。I cannot take the JLPT because of COVID.
+* To blame due to natural disasters, you can also just use <Jps colour="c1" text="で"/>:
+  * 台風<Jps colour="c1" text="で"/>。Because of typhoon.
+  * <Furigana kanji="地震" kana="じしん"/><Jps colour="c1" text="で"/>。Because of　earthquake.
+  * <Furigana kanji="津波" kana="つなみ"/><Jps colour="c1" text="で"/>。Because of　tsunami.
+  * <Furigana kanji="大雪" kana="おおゆき"/><Jps colour="c1" text="で"/>。Because of　heavy snowfall.
+* Or, something you cannot control:
+  * 病気<Jps colour="c1" text="で"/>。Because of sickness.
+
+この本は面白くて、二日<Jps colour="c1" text="で"/>読み終えた。Because this book is interesting, I finished reading it in two days.
+* If you had used the <Jps colour="c1" text="に"/> particle, it would have meant: "I finished reading it on the 2nd".
+  * <Furigana kanji="一日" kana="ついたち"/><Jps colour="c1" text="に"/>、on the 1st.
+  * <Furigana kanji="一日" kana="いちにち"/><Jps colour="c1" text="で"/>、in one day.
+  * <Furigana kanji="二日" kana="ふつか"/><Jps colour="c1" text="に"/>、on the 2nd.
+  * <Furigana kanji="二日" kana="ふつか"/><Jps colour="c1" text="で"/>、in two days.
+
+
+---
+
+#### も
+
+航空券は１５万円<Jps colour="c1" text="も"/>する。
+My plane ticket costs <Jps colour="c1" text="as much as"/> 15000 yen.
+
+
+友達が５人います。I have 5 friends
+
+友達が５人<Jps colour="c1" text="も"/>います。I have <Jps colour="c1" text="as many as"/> 5 friends
+
+contrast:
+友達が５人<Jps colour="c2" text="しか"/>いません。I have <Jps colour="c2" text="only"/> 5 friends
+
+
+電波がわるくて、何<Jps colour="c1" text="も"/>きこえません。The signal is bad, I can hear <Jps colour="c1" text="nothing"/>.
+ 
+---
+
+#### の
+
+はしる<Jps colour="c1" text="の"/>が<Furigana kanji="嫌い" kana="きらい"/>です。I hate running.
+
+---
+
+#### 関係する動画
+
+* [The Ultimate Test/Guide to the Japanese Particles](https://www.youtube.com/watch?v=o_EuKawOZAw) by: [Japanese Ammo with Misa](https://www.youtube.com/@JapaneseAmmowithMisa)

src/Pages/Japan/Japanese/en/toka-tari-shi.md

@@ -0,0 +1,59 @@
+## とか vs たり vs し
+
+### とか
+
+Noun+とか || Verb (dictionary form)+とか
+
+---
+
+1. **List items.**
+
+毎日、昼はラーメン<Jps colour="c1" text="とか"/>そば<Jps colour="c1" text="とか"/>を食べます。
+
+"Every day I eat ramen or soba for lunch for lunch."
+
+しほちゃんは、ピアノ<Jps colour="c1" text="とか"/>絵<Jps colour="c1" text="とか"/>お習字<Jps colour="c1" text="とか"/>たくさんおけいこにいっているのよ。
+
+"Shiho-chan is taking many lessons such as piano, drawing and calligraphy."
+
+夏休みは釣り<Jps colour="c1" text="とか"/>、旅行に行ったり<Jps colour="c1" text="とか"/>します。
+
+"In summer vacation, I would like to go fishing and travel."
+
+---
+
+2. **Convey uncertainty.**
+
+あの家は、１億円<Jps colour="c1" text="とか"/>でうれたそうですよ。
+
+"That house was sold for <Jps colour="c1" text="something like"/> one hundred million yen."
+
+---
+
+### たり
+
+1. **Simultaneous or consecutive actions.**
+
+トラはおりの中で、行っ<Jps colour="c1" text="たり"/>来<Jps colour="c1" text="たり"/>しています。
+
+"The tiger walked back and forth in the cage."
+
+休みの日は映画を見<Jps colour="c1" text="たり"/>本を読ん<Jps colour="c1" text="だり"/>しています。
+
+"On my day off, I do things like watching movies and reading books."
+
+2. **Cite one action or condition as example for others.**
+
+そんな所にゴミを捨て<Jps colour="c1" text="たり"/>してはいけません。
+
+"Don't throw your trash in that place."
+
+### し
+
+
+
+
+#### 関係する本
+
+* **A Dictionary of Japanese Particles**, ISBN978-4-7700-2352-0
+* **Nihongo So-Matome N4　ぶんぽう**, ISBN978-4-86639-075-8

src/Pages/Japan/JapanesePage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Breadcrumbs from '../../UI/Breadcrumbs';
+import MarkdownPage from '../markdownPage';
+
+const JapanesePage = ({ mdPath }) => {
+    return (
+        <article className='main-page'>
+            <Breadcrumbs separator=' > ' path="japan">
+                {['japan']}
+            </Breadcrumbs>
+            <MarkdownPage md={mdPath} />
+        </article>
+    )
+}
+
+export default JapanesePage;

src/Pages/Japan/en/main.md

@@ -5,12 +5,20 @@ The country of Japan and the Japanese language has facinated me for many years n
 
 ---
 
-### Japanese language notes
+## Japanese language notes
 
 These pages contain my notes on learning the language.
 
+### Particles (助詞、じょし)
+
+* [Particles](./japanese/particles)
+
+#### Binding particles (係助詞、かかりじょし)
+
+* [は contrast particle](./japanese/contrast-particle)
+
+#### Adverbial particles (副助詞、ふくじょし)
+
 * [だけ vs しか](./japanese/dake-vs-shika)
 
-#### Particles
+* [とか vs たり vs し｀](./japanese/toka-tari-shi)
-
-* [は contrast particle](./japanese/contrast-particle)

src/Pages/markdownPage.js

@@ -40,6 +40,10 @@ const Jps = ({ text, colour, underline, strikethrough }) => {
     return (<span className={classBuilder}>{text}</span>);
 }
 
+const Furigana = ({ kanji, kana }) => {
+    return (<span>{kanji}<span className="furigana">{kana}</span></span>)
+}
+
 const MyCodeBlock = ({ children, className }) => {
     const { theme } = useTheme();
 
@@ -107,6 +111,9 @@ const MarkdownPage = ({ md }) => {
                     },
                     Jps: {
                         component: Jps
+                    },
+                    Furigana: {
+                        component: Furigana
                     }
                 },
             }}>

src/Routers.js

@@ -7,7 +7,7 @@ import ElmPage from './Pages/Software/elm/ElmPage';
 
 // Japan
 export const japaneseRoutes = languages.map(lang => {
-    const pages = ['contrast-particle', 'dake-vs-shika'];
+    const pages = ['contrast-particle', 'dake-vs-shika', 'particles', 'toka-tari-shi'];
     return pages.map(page => {
       const path = `/${lang}/japan/japanese/${page}`;
       const mdPath = `Japan/Japanese/${lang}/${page}.md`;

src/overrides.scss

@@ -207,6 +207,11 @@ body.light {
   }
 }
 
+.furigana {
+  // Do not display furigana yet until feature is complete.
+  display: none;
+}
+
 
 // Core variables and mixins
 // @import "variables";