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

This commit is contained in:
0x1eef 2024-04-30 22:41:01 -03:00
parent 1ff0d945dc
commit 6bec11a547
14 changed files with 24 additions and 30 deletions

8
Rules
View file

@ -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

View file

@ -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

View file

@ -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:,

View file

@ -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>

View file

@ -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>

View file

@ -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 = {

View file

@ -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 = {

View file

@ -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";

View file

@ -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>;

View file

@ -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>;

View file

@ -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(

View file

@ -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} />,
);

View file

@ -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