add LanguageSelect.tsx

Rakefile.rb

@@ -9,7 +9,7 @@ include Tasks
 namespace :nanoc do
   desc "Compile the website"
   task :compile do
-    sh "nanoc co"
+    sh "ruby -S bundle exec nanoc co"
   end
 
   desc "Delete the build directory"

src/css/surah.scss

@@ -29,17 +29,27 @@ body {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-
-    span {
-      width: 30px;
-    }
+    direction: ltr;
 
     select {
-      padding: 3px;
-      border-radius: 10px;
+      padding: 3px 0 3px 0;
       outline: none;
-      text-align: center;
       direction: ltr;
+      appearance: none;
+      width: 69px;
+      text-align: right;
+
+      option:hover, option:focus-within, option:focus {
+        background: none;
+      }
+    }
+
+    select:first-child {
+      text-align: left;
+    }
+
+    select:last-child {
+      text-align: right;
     }
   }
 
@@ -72,6 +82,7 @@ body {
     flex-direction: row;
     justify-content: space-between;
     font-weight: 500;
+    font-family: "Kanit Regular";
   }
 
   ul.stream {

src/css/themes/leaf.scss

@@ -9,6 +9,16 @@
     }
   }
 
+  .flex-row select {
+    background-color: transparent;
+    color: $green;
+    border: none;
+  }
+
+  .about-surah {
+    color: $green;
+  }
+
   ul.stream {
     li.ayah {
       span.surah-id.ayah-id {
@@ -18,10 +28,6 @@
     }
   }
 
-  .about-surah {
-    color: $green;
-  }
-
   .timer {
     background-color: $green;
     color: $white;

src/css/themes/moon.scss

@@ -9,6 +9,16 @@
     }
   }
 
+  .flex-row select {
+    background-color: transparent;
+    color: $gold;
+    border: none;
+  }
+
+  .about-surah {
+    color: $gold;
+  }
+
   ul.stream {
     li.ayah {
       span.surah-id.ayah-id {
@@ -22,10 +32,6 @@
     color: $white;
     background-color: lighten($gold, 5%);
   }
-
-  .about-surah {
-    color: $gold;
-  }
 }
 
 .surah .moon.theme.ar {

src/js/components/TheQuran/LanguageSelect.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Surah } from "lib/Quran";
+
+interface Props {
+  locale: string,
+  surah: Surah
+}
+
+export function LanguageSelect(props: Props) {
+  const { locale, surah } = props;
+  const changeLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    location.replace(`/${e.target.value}/${surah.slug}/`);
+  };
+
+  return (
+    <select value={locale} onChange={changeLanguage}>
+      <option value="ar">عربي</option>
+      <option value="en">English</option>
+    </select>
+  );
+}

src/js/components/TheQuran/ThemeSelect.tsx

@@ -13,9 +13,12 @@ export function ThemeSelect ({ setTheme, theme }: Props) {
   };
 
   return (
-    <select name='theme' value={theme} onChange={onThemeChange}>
-      <option value='moon'>The Moon 🌛</option>
-      <option value='leaf'>The Leaf 🌿</option>
+    <select
+      name="theme"
+      value={theme}
+      onChange={onThemeChange}>
+      <option value='moon'>🌛</option>
+      <option value='leaf'>🌿</option>
     </select>
   );
 }

src/js/lib/WebPackage/fetchOptions.ts

@@ -0,0 +1,11 @@
+const getReloadEntry = () => PerformanceNavigationTiming | undefined {
+  return performance
+         .getEntriesByType("navigation")
+         .filter((e) => e.entryType === "navigation")
+         .find((e) e.type === "reload") as PerformanceNavigationTiming | undefined;
+}
+
+export function fetchOptions(): RequestInit {
+  const reloadEntry = getReloadEntry();
+  return reloadEntry ? {cache: "reload"} : {};
+}

src/js/pages/TheSurahPage.tsx

@@ -6,6 +6,7 @@ import { Timer } from "components/TheQuran/Timer";
 import { Stream } from "components/TheQuran/Stream";
 import { AboutSurah } from "components/TheQuran/AboutSurah";
 import { ThemeSelect } from "components/TheQuran/ThemeSelect";
+import { LanguageSelect } from "components/TheQuran/LanguageSelect";
 import { Locale, Surah } from "lib/Quran";
 
 interface PageProps {
@@ -37,9 +38,8 @@ function TheSurahPage({ locale, surahId }: PageProps) {
       </a>
       {readyToRender && (
         <div className="flex-row">
-          <span />
           <ThemeSelect theme={theme} setTheme={setTheme} />
-          <span />
+          <LanguageSelect locale={locale} surah={surah}/>
         </div>
       )}
       {readyToRender && <AboutSurah locale={locale} surah={surah}/>}