Add server.base_url, audio.base_url

With this change the website can be hosted on
any domain (up to being entirely independent of
al-quran.reflectslight.io) by configuring a
couple of variables.

README.md

@@ -46,11 +46,18 @@ If you plan to host the website on your own domain
 you will probably want to update
 [nanoc.yaml](nanoc.yaml)
 first. Largely for SEO reasons certain links will
-reference the hostname al-quran.reflectslight.io.
+reference https://al-quran.reflectslight.io.
 Those links can be updated to your own domain by
-changing the `server.hostname` field in
+changing the `server.base_url` field in
 [nanoc.yaml](nanoc.yaml).
 
+In a similar way, `audio.base_url` controls what
+web server serves audio content. The default
+(https://al-quran.reflectslight.io/audio/alafasy)
+works out of the box. The URL for an audio file is
+resolved by joining `audio.base_url` and
+`/<surahid>/<ayahid>.mp3`.
+
 ## Thanks
 
 Alhamdulillah

nanoc.yaml

@@ -20,8 +20,11 @@ data_sources:
     content_dir: src/
     layouts_dir: src/layouts
 
+audio:
+  base_url: https://al-quran.reflectslight.io/audio/alafasy
+
 server:
-  hostname: al-quran.reflectslight.io
+  base_url: https://al-quran.reflectslight.io
   unix:
     path: /tmp/al-quran.reflectslight.io
   tcp:

nanoc/lib/mixin.rb

@@ -22,12 +22,37 @@ module Mixin
     nanoc.output_dir
   end
 
-  def hostname
-    nanoc.server.hostname
+  ##
+  # The URL for an audio file is resolved
+  # by joining `nanoc.audio.base_url` and
+  # `/<surahid>/<ayahid>.mp3`.
+  #
+  # @return [String]
+  #  Returns the base url for audio requests.
+  #  The default (https://al-quran.reflectslight.io/audio/alafasy)
+  #  works out of the box.
+  def audio_base_url
+    nanoc.audio.base_url
   end
 
+  ##
+  # @return [String]
+  #  Returns the base URL for use with opengraph,
+  #  <link> tags, /sitemap.xml, etc. The default is
+  #  https://al-quran.reflectslight.io.
+  def base_url
+    nanoc.server.base_url
+  end
+
+  ##
+  # @return [Ryo::Object]
+  #  Returns the contents of nanoc.yaml as a Ryo object
   def nanoc
-    @nanoc ||= Ryo.from YAML.load_file(File.join(Dir.getwd, "nanoc.yaml"))
+    return @nanoc if defined?(@nanoc)
+    @nanoc = begin
+      path = File.join(Dir.getwd, "nanoc.yaml")
+      Ryo.from YAML.load_file(path)
+    end
   end
 
   include T

nanoc/lib/mixin/opengraph.rb

@@ -11,18 +11,18 @@ module Mixin::OpenGraph
       surah = context.surah
       {title: t(context.locale, "TheNobleQuran"),
        description: surah.name,
-       url: "https://#{hostname}/#{context.locale}/#{surah.slug}/",
-       image: "https://#{hostname}/images/og/#{surah.id}.png"}
+       url: "#{base_url}/#{context.locale}/#{surah.slug}/",
+       image: "#{base_url}/images/og/#{surah.id}.png"}
     when "redirect.html.erb", "surah-index.html.erb"
       {title: t(context.locale, "TheNobleQuran"),
        description: t(context.locale, "meta.index.description"),
-       url: "https://#{hostname}/#{context.locale}/",
-       image: "https://#{hostname}/images/og/0.png"}
+       url: "#{base_url}/#{context.locale}/",
+       image: "#{base_url}/images/og/0.png"}
     when "random.html.erb"
       {title: t(context.locale, "TheNobleQuran"),
        description: t(context.locale, "meta.random.description"),
-       url: "https://#{hostname}/#{context.locale}/random/",
-       image: "https://#{hostname}/images/og/0.png"}
+       url: "#{base_url}/#{context.locale}/random/",
+       image: "#{base_url}/images/og/0.png"}
     end
   end
 end

src/html/main/random.html.erb

@@ -7,12 +7,12 @@
     <%= opengraph(context) %>
     <link
       rel="canonical"
-      href="https://<%= hostname %>/<%= locale %>/random/"
+      href="<%= base_url %>/<%= locale %>/random/"
     />
     <% locales.each do |locale| %>
     <link
       rel="alternate"
-      href="https://<%= hostname %>/<%= locale %>/random/"
+      href="<%= base_url %>/<%= locale %>/random/"
       hreflang="<%= locale %>" />
     <% end %>
     <%= erb("_favicon.html.erb") %>

src/html/main/redirect.html.erb

@@ -6,12 +6,12 @@
     <%= opengraph(Ryo(filename: "redirect.html.erb", locale: "en")) %>
     <link
       rel="canonical"
-      href="https://<%= hostname %>/en/"
+      href="<%= base_url %>/en/"
     />
     <% locales.each do |locale| %>
     <link
       rel="alternate"
-      href="https://<%= hostname %>/<%= locale %>/"
+      href="<%= base_url %>/<%= locale %>/"
       hreflang="<%= locale %>" />
     <% end %>
     <%= erb("_favicon.html.erb") %>

src/html/main/surah-index.html.erb

@@ -10,11 +10,11 @@
     <%= opengraph(context) %>
     <link
       rel="canonical"
-      href="https://<%= hostname %>/<%= locale %>/"
+      href="<%= base_url %>/<%= locale %>/"
     />
     <% locales.each do |locale| %>
     <link rel="alternate"
-          href="https://<%= hostname %>/<%= locale %>/"
+          href="<%= base_url %>/<%= locale %>/"
           hreflang="<%= locale %>" />
     <% end %>
     <%= erb("_favicon.html.erb") %>

src/html/main/surah-stream.html.erb

@@ -10,18 +10,21 @@
     <%= opengraph(context) %>
     <link
       rel="canonical"
-      href="https://<%= hostname %>/<%= locale %>/<%= surah.slug %>/"
+      href="<%= base_url %>/<%= locale %>/<%= surah.slug %>/"
     />
     <% locales.each do |locale| %>
     <link rel="alternate"
-          href="https://<%= hostname %>/<%= locale %>/<%= surah.slug %>/"
+          href="<%= base_url %>/<%= locale %>/<%= surah.slug %>/"
           hreflang="<%= locale %>" />
     <% end %>
     <%= erb("_favicon.html.erb") %>
   </head>
   <body>
     <%= erb("_postman.html.erb", {locale:}) %>
-    <div class="root" data-surah-id="<%= surah.id %>"></div>
+    <div class="root"
+         data-surah-id="<%= surah.id %>"
+         data-audio-base-url="<%= audio_base_url %>">
+    </div>
     <script src="/js/loaders/surah-stream-loader.js"></script>
   </body>
 </html>

src/js/components/AudioControl.tsx

@@ -23,24 +23,29 @@ export function AudioControl({
 }: Props) {
   const [enabled, setEnabled] = useState<boolean>(false);
   const [audioStatus, setAudioStatus] = useState<Maybe<TAudioStatus>>(null);
+  const [audioBaseUrl, setAudioBaseUrl] = useState<Maybe<string>>(null);
   const play = (audio: HTMLAudioElement) => audio.play().catch(() => null);
   const pause = (audio: HTMLAudioElement) => audio.pause();
 
   useEffect(() => {
-    if (hidden || !ayah || !audio) {
+    if (hidden || !ayah || !audio || !audioBaseUrl) {
       return;
     }
     if (enabled) {
-      audio.src = [
-        "https://al-quran.reflectslight.io",
-        "audio",
-        "alafasy",
-        surah.id,
-        `${ayah.id}.mp3`,
-      ].join("/");
+      audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3`].join("/");
       play(audio);
     }
-  }, [hidden, enabled, ayah?.id]);
+  }, [hidden, enabled, ayah?.id, audioBaseUrl]);
+
+  useEffect(() => {
+    const el: HTMLDivElement | null = document.querySelector("[data-audio-base-url]");
+    const url = el?.dataset?.audioBaseUrl;
+    if (url?.length) {
+      setAudioBaseUrl(url);
+    } else {
+      console.warn("audio.base_url is not set");
+    }
+  }, []);
 
   useEffect(() => {
     if (!audio || !ayah) {

src/sitemap.xml.erb

@@ -3,19 +3,19 @@
         xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <% locales.each do |locale| %>
   <url>
-    <loc>https://<%= hostname %>/<%= locale %>/</loc>
+    <loc><%= base_url %>/<%= locale %>/</loc>
     <priority>1.0</priority>
     <changefreq>weekly</changefreq>
   </url>
   <% Ryo.each(name_by_id) do |_, transliterated_name| %>
   <url>
-    <loc>https://<%= hostname %>/<%= locale %>/<%= transliterated_name %>/</loc>
+    <loc><%= base_url %>/<%= locale %>/<%= transliterated_name %>/</loc>
     <priority>0.8</priority>
     <changefreq>weekly</changefreq>
   </url>
   <% end %>
   <url>
-    <loc>https://<%= hostname %>/<%= locale %>/random/</loc>
+    <loc><%= base_url %>/<%= locale %>/random/</loc>
     <priority>0.7</priority>
     <changefreq>weekly</changefreq>
   </url>