Re-organize project files

Attempt to simplify the layout of project files.

Rules

@@ -78,10 +78,10 @@ end
 ##
 # Require rules
 require_rules "nanoc/rules/assets"
-require_rules "nanoc/rules/pages/surah/redirect"
-require_rules "nanoc/rules/pages/surah/stream", {locales:, i18n:, slugs:}
-require_rules "nanoc/rules/pages/surah/index", {locales:, i18n:}
-require_rules "nanoc/rules/pages/surah/random", {locales:, i18n:, slugs:}
+require_rules "nanoc/rules/redirect"
+require_rules "nanoc/rules/random", {locales:, i18n:, slugs:}
+require_rules "nanoc/rules/stream", {locales:, i18n:, slugs:}
+require_rules "nanoc/rules/index", {locales:, i18n:}
 
 ##
 # Defaults

nanoc/rules/index.rules

@@ -6,7 +6,7 @@
 # dependencies.
 
 locales.each do |locale|
-  compile "/html/pages/surah/index.html.erb", rep: "/#{locale}/surah/index" do
+  compile "/html/index.html.erb", rep: "/#{locale}/surah/index" do
     context = Ryo.from(locale:)
     filter(:erb, locals: {context:})
     filter(:tidy)
@@ -14,22 +14,22 @@ locales.each do |locale|
   end
 end
 
-compile "/js/pages/surah/index.tsx" do
+compile "/js/pages/SurahIndex.tsx" do
   filter :webpack, depend_on: ["/js/components",
                                "/js/lib/[!WebPackage]/",
                                "/js/hooks"]
-  write "/js/pages/surah/index.js"
+  write "/js/pages/surah-index.js"
   filter :gzip
-  write "/js/pages/surah/index.js.gz"
+  write "/js/pages/surah-index.js.gz"
 end
 
-compile "/js/pages/surah/index/loader.ts" do
+compile "/js/loaders/SurahIndexLoader.ts" do
   filter :webpack, depend_on: "/js/lib/WebPackage"
-  write "/js/pages/surah/index/loader.js"
+  write "/js/loaders/surah-index-loader.js"
 end
 
-compile "/css/pages/surah/index.scss" do
+compile "/css/pages/SurahIndex.scss" do
   filter :sass, syntax: :scss, style: :compact
   filter :rainpress
-  write("/css/pages/surah/index.css")
+  write("/css/pages/surah-index.css")
 end

nanoc/rules/random.rules

@@ -6,14 +6,14 @@
 # (eg /en/random/ -> /en/al-kahf/)
 
 locales.each do |locale|
-  compile "/html/pages/surah/random.html.erb", rep: "random/#{locale}" do
+  compile "/html/random.html.erb", rep: "random/#{locale}" do
     title = i18n[locale].TheNobleQuran
     filter(:erb, locals: {locale:, title:})
     write("/#{locale}/random/index.html")
   end
 end
 
-compile "/js/pages/surah/random.ts" do
-  filter :webpack
-  write "/js/pages/surah/random.js"
+compile "/js/pages/Random.ts" do
+  filter(:webpack)
+  write("/js/pages/random.js")
 end

nanoc/rules/redirect.rules

@@ -5,12 +5,12 @@
 # Rules for a redirect from the root path to the surah index for a given locale
 # (eg / -> /en/)
 
-compile "/html/pages/surah/redirect.html.erb" do
+compile "/html/redirect.html.erb" do
   filter(:erb)
   write("/index.html")
 end
 
-compile "/js/pages/surah/redirect.ts" do
+compile "/js/pages/Redirect.ts" do
   filter(:webpack)
-  write("/js/pages/surah/redirect.js")
+  write("/js/pages/redirect.js")
 end

nanoc/rules/stream.rules

@@ -27,31 +27,31 @@ Ryo.each(slugs) do |id, slug|
     write "/#{locale}/#{identifier}/index.html"
   end
   locales.each do |locale|
-    compile "/html/pages/surah/stream.html.erb", rep: "/#{locale}/#{slug}/index.html" do
+    compile "/html/stream.html.erb", rep: "/#{locale}/#{slug}/index.html" do
       instance_exec(locale, identifier: slug, &writer)
     end
-    compile "/html/pages/surah/stream.html.erb", rep: "/#{locale}/#{id}/index.html" do
+    compile "/html/stream.html.erb", rep: "/#{locale}/#{id}/index.html" do
       instance_exec(locale, identifier: id, &writer)
     end
   end
 end
 
-compile "/js/pages/surah/stream.tsx" do
+compile "/js/pages/SurahStream.tsx" do
   filter :webpack,
          depend_on: ["/js/components", "/js/lib/", "/js/hooks"],
          reject: proc { _1.include?("WebPackage") }
-  write "/js/pages/surah/stream.js"
+  write "/js/pages/surah-stream.js"
   filter :gzip
-  write "/js/pages/surah/stream.js.gz"
+  write "/js/pages/surah-stream.js.gz"
 end
 
-compile "/js/pages/surah/stream/loader.ts" do
+compile "/js/loaders/SurahStreamLoader.ts" do
   filter :webpack, depend_on: "/js/lib/WebPackage"
-  write "/js/pages/surah/stream/loader.js"
+  write "/js/loaders/surah-stream-loader.js"
 end
 
-compile "/css/pages/surah/stream.scss" do
+compile "/css/pages/SurahStream.scss" do
   filter :sass, syntax: :scss, style: :compact
   filter :rainpress
-  write("/css/pages/surah/stream.css")
+  write("/css/pages/surah-stream.css")
 end

src/css/pages/SurahIndex.scss

@@ -1,7 +1,5 @@
 @import "layout";
 @import "components/Select";
-@import "themes/moon";
-@import "themes/leaf";
 
 ul.body.index {
   display: flex;
@@ -67,3 +65,6 @@ body .root .content.theme.ar {
     }
   }
 }
+
+@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/surah/stream";
+@import "leaf/pages/SurahIndex";
+@import "leaf/pages/SurahStream";
 
 .root .content.theme.leaf.ar {
   direction: rtl;

src/css/themes/moon.scss

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

src/html/index.html.erb

@@ -18,6 +18,6 @@
     <div class="root" data-locale="<%= context.locale %>"></div>
     <%= inline_json("/i18n.json") %>
     <%= inline_json("/surahs.json") %>
-    <script src="/js/pages/surah/index/loader.js"></script>
+    <script src="/js/loaders/surah-index-loader.js"></script>
   </body>
 </html>

src/html/random.html.erb

@@ -5,6 +5,6 @@
   </head>
   <body>
     <%= inline_json("/slugs.json") %>
-    <script src="/js/pages/surah/random.js"></script>
+    <script src="/js/pages/random.js"></script>
   </body>
 </html>

src/html/redirect.html.erb

@@ -2,7 +2,7 @@
   <head>
     <title>Al-Quran</title>
     <link rel="icon" href="/favicon.png">
-    <script src="/js/pages/surah/redirect.js"></script>
+    <script src="/js/pages/redirect.js"></script>
   </head>
   <body></body>
 </html>

src/html/stream.html.erb

@@ -35,6 +35,6 @@
     </div>
     <%= inline_json("/i18n.json") %>
     <%= inline_json("/reciters.json") %>
-    <script src="/js/pages/surah/stream/loader.js"></script>
+    <script src="/js/loaders/surah-stream-loader.js"></script>
   </body>
 </html>

src/js/loaders/SurahIndexLoader.ts

@@ -7,8 +7,8 @@ import postman, { item } from "postman";
   const inlineStyle: HTMLStyleElement = document.querySelector(".css.postman")!;
 
   postman(
-    item.script("/js/pages/surah/index.js"),
-    item.css("/css/pages/surah/index.css"),
+    item.script("/js/pages/surah-index.js"),
+    item.css("/css/pages/surah-index.css"),
     item.image("/images/moon.svg"),
     item.image("/images/leaf.svg"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),

src/js/loaders/SurahStreamLoader.ts

@@ -12,8 +12,8 @@ import * as Quran from "lib/Quran";
   );
 
   postman(
-    item.script("/js/pages/surah/stream.js"),
-    item.css("/css/pages/surah/stream.css"),
+    item.script("/js/pages/surah-stream.js"),
+    item.css("/css/pages/surah-stream.css"),
     item.image("/images/moon.svg"),
     item.image("/images/leaf.svg"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),