Add static JSON to .js files rather than .html files

Rules

@@ -13,8 +13,8 @@ require_relative "nanoc/lib/require_rules"
 locales    = %w[ar en]
 json_dir   = File.join(Dir.getwd, "src", "json")
 name_by_id = Ryo.from_json_file("#{json_dir}/nameById.json")
-i18n       = Ryo.from_json_file("#{json_dir}/i18n.json")
-buildenv   = ENV["buildenv"] || "development"
+tdata    = Ryo.from_json_file("#{json_dir}/t.json")
+buildenv = ENV["buildenv"] || "development"
 
 ##
 # Plugins
@@ -52,8 +52,8 @@ end
 require_rules "nanoc/rules/assets"
 require_rules "nanoc/rules/redirect"
 require_rules "nanoc/rules/random", {locales:}
-require_rules "nanoc/rules/stream", {locales:, i18n:, name_by_id:}
-require_rules "nanoc/rules/index", {locales:, i18n:}
+require_rules "nanoc/rules/stream", {locales:, tdata:, name_by_id:}
+require_rules "nanoc/rules/index", {locales:, tdata:}
 
 ##
 # Defaults

nanoc/lib/mixin/t.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
 module Mixin::T
-  extend Memoize
-
   def t(locale, key, local_assigns = {})
-    str = [locale, *key.split(".")].inject(i18n) { _1[_2] }
+    str = [locale, *key.split(".")].inject(tdata) { _1[_2] }
     format(str, local_assigns)
   end
 
-  def i18n
-    path = File.join(Dir.getwd, "src", "json", "i18n.json")
-    json = File.binread(path)
-    Ryo.from JSON.parse(json)
+  def tdata
+    @tdata ||= Ryo.from_json_file File.join(
+                                    Dir.getwd,
+                                    "src",
+                                    "json",
+                                    "t.json"
+                                  )
   end
-  memoize :i18n
 end

nanoc/rules/stream.rules

@@ -14,7 +14,7 @@ end
 
 Ryo.each(name_by_id) do |id, transliterated_name|
   writer = ->(locale, identifier:) do
-    name = i18n[locale].surahs.names[id.to_i - 1]
+    name = tdata[locale].surahs.names[id.to_i - 1]
     context = Ryo.from(
       filename: "stream.html.erb",
       locale:,

src/html/index.html.erb

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

src/html/stream.html.erb

@@ -33,7 +33,6 @@
          data-locale="<%= context.locale %>"
          data-surah-id="<%= context.surah.id %>">
     </div>
-    <%= inline_json("/json/i18n.json") %>
     <%= inline_json("/json/durations/alafasy/#{context.surah.id}.json", class_name: 'durations') %>
     <script src="/js/loaders/surah-stream-loader.js"></script>
   </body>

src/js/components/Stream.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import { Surah, Ayah, TAyah, TAyat, TSurah, TLocale } from "Quran";
 import { AudioControl } from "~/components/AudioControl";
-import { formatNumber, TFunction } from "~/lib/i18n";
+import { formatNumber, TFunction } from "~/lib/t";
 import classNames from "classnames";
 
 type Props = {

src/js/components/SurahIndex/Filter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TFunction } from "~/lib/i18n";
+import { TFunction } from "~/lib/t";
 import type { TLocale, TSurah, Surah } from "Quran";
 
 type Props = {

src/js/components/SurahIndex/index.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import { TLocale, TSurah, Surah } from "Quran";
 import { useTheme } from "~/hooks/useTheme";
-import { formatNumber, TFunction } from "~/lib/i18n";
+import { formatNumber, TFunction } from "~/lib/t";
 import { RightArrow } from "~/components/Icon";
 import { Head } from "~/components/Head";
 import { Filter } from "./Filter";

src/js/components/SurahStream.tsx

@@ -12,7 +12,7 @@ import {
   RefreshIcon,
   StalledIcon,
 } from "~/components/Icon";
-import { TFunction } from "~/lib/i18n";
+import { TFunction } from "~/lib/t";
 
 type Props = {
   surah: Surah<TSurah>;

src/js/components/Timer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { Surah, TSurah, TLocale, TAyat } from "Quran";
-import { formatNumber } from "~/lib/i18n";
+import { formatNumber } from "~/lib/t";
 
 type Props = {
   surah: Surah<TSurah>;

src/js/lib/t.ts

@@ -6,8 +6,7 @@ type PhraseMap<T> = {
 
 export type TFunction = (locale: TLocale, key: string) => string;
 
-export function i18n(json: string): TFunction {
-  const phrases: PhraseMap<string> = JSON.parse(json);
+export function T(phrases: PhraseMap<string>): TFunction {
   return function (locale: TLocale, key: string) {
     const path = key.split(".");
     const phrase = path.reduce(

src/js/main/surah-index.tsx

@@ -1,16 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Surah, TSurah, TLocale } from "Quran";
-import { i18n } from "~/lib/i18n";
+import { T } from "~/lib/t";
 import { SurahIndex } from "~/components/SurahIndex";
 
 (function () {
   const root: HTMLElement = document.querySelector(".root")!;
   const locale = root.getAttribute("data-locale") as TLocale;
-  const script: HTMLScriptElement = document.querySelector(".json.surahs")!;
-  const blob = JSON.parse(script.innerText);
-  const surahs: Surah<TSurah>[] = blob.map((el: TSurah) => new Surah(el));
-  const t = i18n(document.querySelector<HTMLElement>(".json.i18n")!.innerText);
+  const surahs: Surah<TSurah>[] = require("@json/surahs").map((e: TSurah) => new Surah(e));
+  const t = T(require("@json/t.json"));
   ReactDOM.createRoot(root).render(
     <SurahIndex locale={locale} surahs={surahs} t={t} />,
   );

src/js/main/surah-stream.tsx

@@ -1,13 +1,13 @@
 import { Surah, Ayah, TSurah, TLocale } from "Quran";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { i18n } from "~/lib/i18n";
+import { T } from "~/lib/t";
 import { SurahStream } from "~/components/SurahStream";
 
 (function () {
   const root: HTMLElement = document.querySelector(".root")!;
   const locale = root.getAttribute("data-locale") as TLocale;
-  const t = i18n(document.querySelector<HTMLElement>(".json.i18n")!.innerText);
+  const t = T(require("@json/t.json"));
 
   /*
    * Configure an instance of Surah