Replace TheSurahPage with surah/stream

Rules

@@ -31,7 +31,7 @@ end
 # Require rules
 require_rules "rules/assets"
 require_rules "rules/pages/RandomRedirect", {locales:, surah_id_to_name:}
-require_rules "rules/pages/TheSurahPage", {locales:, surah_id_to_name:}
+require_rules "rules/pages/surah/stream", {locales:, surah_id_to_name:}
 require_rules "rules/pages/surah/index", {locales:}
 require_rules "rules/pages/surah/redirect"
 

rules/pages/surah/stream.rules

@@ -14,27 +14,27 @@ end
 
 Ryo.each(surah_id_to_name) do |surah_id, slug|
   locales.each do |locale|
-    compile "/html/TheSurahPage.html.erb", rep: "/#{locale}/#{slug}/index.html" do
+    compile "/html/pages/surah/stream.html.erb", rep: "/#{locale}/#{slug}/index.html" do
       filter :erb, locals: {locale: locale, surah_id: surah_id}
       write "/#{locale}/#{slug}/index.html"
     end
   end
 end
 
-compile "/js/pages/TheSurahPage.tsx" do
+compile "/js/pages/surah/stream.tsx" do
   filter :webpack, depend_on: ["/js/components", "/js/lib/[!WebPackage]/", "/js/hooks"]
-  write "/js/pages/TheSurahPage.js"
+  write "/js/pages/surah/stream.js"
   filter :gzip_text
-  write "/js/pages/TheSurahPage.js.gz"
+  write "/js/pages/surah/stream.js.gz"
 end
 
-compile "/js/pages/TheSurahPage/package.ts" do
+compile "/js/pages/surah/stream/loader.ts" do
   filter :webpack, depend_on: "/js/lib/WebPackage"
-  write "/js/pages/TheSurahPage/package.js"
+  write "/js/pages/surah/stream/loader.js"
 end
 
-compile "/css/pages/TheSurahPage.scss" do
+compile "/css/pages/surah/stream.scss" do
   filter :sass, syntax: :scss, style: :compact
   filter :rainpress
-  write("/css/pages/TheSurahPage.css")
+  write("/css/pages/surah/stream.css")
 end

src/css/pages/surah/stream.scss

@@ -1,6 +1,6 @@
-@import "../layout";
-@import "../components/Select";
-@import "../components/TheSurahPage/Shape";
+@import "layout";
+@import "components/Select";
+@import "components/Shape";
 
 .content .row.details {
   direction: rtl;
@@ -56,5 +56,5 @@
   top: 2px;
 }
 
-@import "../themes/moon";
-@import "../themes/leaf";
+@import "themes/moon";
+@import "themes/leaf";

src/css/themes/leaf.scss

@@ -1,6 +1,6 @@
 @import "leaf/layout";
 @import "leaf/pages/surah/index";
-@import "leaf/pages/TheSurahPage";
+@import "leaf/pages/surah/stream";
 
 .root .content.theme.leaf.ar {
   direction: rtl;

src/css/themes/leaf/pages/surah/_stream.scss

@@ -1,5 +1,5 @@
 .root .content.theme.leaf {
-  @import "../colors";
+  @import "themes/leaf/colors";
 
   .row.details {
     color: $green;

src/css/themes/moon.scss

@@ -1,6 +1,6 @@
 @import "moon/layout";
 @import "moon/pages/surah/index";
-@import "moon/pages/TheSurahPage";
+@import "moon/pages/surah/stream";
 
 .root .content.theme.moon.ar {
   direction: rtl;

src/css/themes/moon/pages/surah/_stream.scss

@@ -1,5 +1,5 @@
 .root .content.theme.moon {
-  @import "../colors";
+  @import "themes/moon/colors";
 
   .row.details {
     color: $gold;

src/html/pages/surah/stream.html.erb

@@ -13,6 +13,6 @@
       </div>
     </div>
     <div class="root" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>
-    <script src="/js/pages/TheSurahPage/package.js"></script>
+    <script src="/js/pages/surah/stream/loader.js"></script>
   </body>
 </html>

src/js/pages/surah/stream.tsx

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import classNames from 'classnames';
 import { get as getCookie } from 'es-cookie';
-import { Timer } from 'components/TheSurahPage/Timer';
-import { Stream } from 'components/TheSurahPage/Stream';
+import { Timer } from 'components/Timer';
+import { Stream } from 'components/Stream';
 import { SelectOption } from 'components/Select';
 import { ThemeSelect } from 'components/ThemeSelect';
 import { LanguageSelect } from 'components/LanguageSelect';
-import { PlayShape, PauseShape } from 'components/TheSurahPage/Shape';
+import { PlayShape, PauseShape } from 'components/Shape';
 import * as Quran from 'lib/Quran';
 import { Slice } from 'lib/Quran/Slice';
 import { strings } from 'lib/i18n';
@@ -19,7 +19,7 @@ interface Props {
   paused: boolean
 }
 
-function TheSurahPage({ locale, surahId, slice, paused }: Props) {
+function SurahStream({ locale, surahId, slice, paused }: Props) {
   const path = `/${locale}/${surahId}/surah.json`;
   const node: HTMLScriptElement = document.querySelector(`script[src="${path}"]`);
   const [stream, setStream] = useState([]);
@@ -119,7 +119,7 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
   ReactDOM
     .createRoot(root)
     .render(
-      <TheSurahPage
+      <SurahStream
         locale={locale}
         surahId={surahId}
         slice={slice}

src/js/pages/surah/stream/loader.ts

@@ -8,8 +8,8 @@ import WebPackage from 'lib/WebPackage';
   const { locale, surahId } = document.querySelector<HTMLElement>('.root').dataset;
 
   WebPackage({
-    scripts: ['/js/pages/TheSurahPage.js'],
-    stylesheets: ['/css/pages/TheSurahPage.css'],
+    scripts: ['/js/pages/surah/stream.js'],
+    stylesheets: ['/css/pages/surah/stream.css'],
     images: ['/images/moon.svg', '/images/leaf.svg'],
     others: [`/${locale}/${surahId}/surah.json`],
     fonts: [