Abide by 80col limit

.husky/pre-commit

@@ -3,8 +3,8 @@
 pattern=".ts|.tsx|.js$"
 files=$(git --no-pager diff --cached --name-only | grep -E -e "${pattern}")
 if [ "$?" = "0" ]; then
-  npm run prettier -- "${files}" || exit 1
+  npm run prettier -- -c ${files} || exit 1
-  npm run eslint -- "${files}" || exit 1
+  npm run eslint -- ${files} || exit 1
   git add "${files}"
   exit 0
 else

.prettierrc

@@ -3,6 +3,6 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,
-  "printWidth": 90,
+  "printWidth": 80,
   "arrowParens": "avoid"
 }

src/js/components/AudioControl.tsx

@@ -44,7 +44,9 @@ export function AudioControl({
 
   useEffect(() => {
     if (soundOn) {
-      audio.src = [url.format(recitation.url), surah.id, `${ayah.id}.mp3`].join("/");
+      audio.src = [url.format(recitation.url), surah.id, `${ayah.id}.mp3`].join(
+        "/",
+      );
       audio.play();
     } else {
       audio.pause();

src/js/components/Stream.tsx

@@ -40,7 +40,8 @@ export function Stream({
           )}
           <span>
             {t(locale, "surah")} {formatNumber(surah.id, locale)}
-            {t(locale, "comma")} {t(locale, "ayah")} {formatNumber(ayah.id, locale)}
+            {t(locale, "comma")} {t(locale, "ayah")}{" "}
+            {formatNumber(ayah.id, locale)}
           </span>
         </span>
         <p>{ayah.text}</p>

src/js/components/Timer.tsx

@@ -53,7 +53,9 @@ export function Timer({
 
   return (
     <div className="timer">
-      {ms / 1000 <= 0 ? formatNumber(0, locale) : formatNumber(ms / 1000, locale)}
+      {ms / 1000 <= 0
+        ? formatNumber(0, locale)
+        : formatNumber(ms / 1000, locale)}
     </div>
   );
 }

src/js/loaders/SurahIndexLoader.ts

@@ -23,6 +23,8 @@ import postman, { item } from "postman";
       parent.remove();
       pkg.fonts.forEach(f => document.fonts.add(f));
       pkg.css.forEach(s => document.head.appendChild(s));
-      pkg.scripts.forEach(s => document.body.removeChild(document.body.appendChild(s)));
+      pkg.scripts.forEach(s =>
+        document.body.removeChild(document.body.appendChild(s)),
+      );
     });
 })();

src/js/loaders/SurahStreamLoader.ts

@@ -7,7 +7,8 @@ import * as Quran from "lib/Quran";
   const progressBar: HTMLProgressElement = parent.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = parent.querySelector(".percentage")!;
   const inlineStyle: HTMLStyleElement = document.querySelector(".css.postman")!;
-  const { locale, surahId } = document.querySelector<HTMLElement>(".root")!.dataset;
+  const { locale, surahId } =
+    document.querySelector<HTMLElement>(".root")!.dataset;
   const recitations = JSON.parse(
     document.querySelector<HTMLElement>(".json.recitations")!.innerText,
   );
@@ -19,7 +20,11 @@ import * as Quran from "lib/Quran";
     item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf"),
     item.json(`/${locale}/${surahId}/surah.json`, { className: "surah" }),
     ...recitations.map((recitation: Quran.Recitation) => {
-      const ts = [url.format(recitation.url), "time_slots", `${surahId}.json`].join("/");
+      const ts = [
+        url.format(recitation.url),
+        "time_slots",
+        `${surahId}.json`,
+      ].join("/");
       return item.json(ts, {
         className: `recitation time-slots ${recitation.id}`,
       });
@@ -36,6 +41,8 @@ import * as Quran from "lib/Quran";
       pkg.fonts.forEach(f => document.fonts.add(f));
       pkg.css.forEach(s => document.head.appendChild(s));
       pkg.json.forEach(o => document.body.appendChild(o));
-      pkg.scripts.forEach(s => document.body.removeChild(document.body.appendChild(s)));
+      pkg.scripts.forEach(s =>
+        document.body.removeChild(document.body.appendChild(s)),
+      );
     });
 })();

src/js/pages/SurahIndex.tsx

@@ -27,7 +27,10 @@ function SurahIndex({ locale, surahs, t }: Props) {
   }, [ref.current, theme]);
 
   return (
-    <div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
+    <div
+      ref={ref}
+      className={classNames("invisible", "content", "theme", theme, locale)}
+    >
       <header>
         <h1>
           <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
@@ -74,5 +77,7 @@ function SurahIndex({ locale, surahs, t }: Props) {
     },
   );
 
-  ReactDOM.createRoot(root).render(<SurahIndex locale={locale} surahs={surahs} t={t} />);
+  ReactDOM.createRoot(root).render(
+    <SurahIndex locale={locale} surahs={surahs} t={t} />,
+  );
 })();

src/js/pages/SurahStream.tsx

@@ -122,7 +122,9 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
             isStalled={isStalled}
           />
         )}
-        {readyToRender && endOfStream && <RefreshIcon onClick={() => setStream([])} />}
+        {readyToRender && endOfStream && (
+          <RefreshIcon onClick={() => setStream([])} />
+        )}
         <div className="br" />
         {readyToRender && soundOn && isStalled && <StalledIcon />}
       </footer>