Add static JSON to .js files rather than .html files
This commit is contained in:
parent
1ff0d945dc
commit
6bec11a547
14 changed files with 24 additions and 30 deletions
6
Rules
6
Rules
|
@ -13,7 +13,7 @@ require_relative "nanoc/lib/require_rules"
|
||||||
locales = %w[ar en]
|
locales = %w[ar en]
|
||||||
json_dir = File.join(Dir.getwd, "src", "json")
|
json_dir = File.join(Dir.getwd, "src", "json")
|
||||||
name_by_id = Ryo.from_json_file("#{json_dir}/nameById.json")
|
name_by_id = Ryo.from_json_file("#{json_dir}/nameById.json")
|
||||||
i18n = Ryo.from_json_file("#{json_dir}/i18n.json")
|
tdata = Ryo.from_json_file("#{json_dir}/t.json")
|
||||||
buildenv = ENV["buildenv"] || "development"
|
buildenv = ENV["buildenv"] || "development"
|
||||||
|
|
||||||
##
|
##
|
||||||
|
@ -52,8 +52,8 @@ end
|
||||||
require_rules "nanoc/rules/assets"
|
require_rules "nanoc/rules/assets"
|
||||||
require_rules "nanoc/rules/redirect"
|
require_rules "nanoc/rules/redirect"
|
||||||
require_rules "nanoc/rules/random", {locales:}
|
require_rules "nanoc/rules/random", {locales:}
|
||||||
require_rules "nanoc/rules/stream", {locales:, i18n:, name_by_id:}
|
require_rules "nanoc/rules/stream", {locales:, tdata:, name_by_id:}
|
||||||
require_rules "nanoc/rules/index", {locales:, i18n:}
|
require_rules "nanoc/rules/index", {locales:, tdata:}
|
||||||
|
|
||||||
##
|
##
|
||||||
# Defaults
|
# Defaults
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
module Mixin::T
|
module Mixin::T
|
||||||
extend Memoize
|
|
||||||
|
|
||||||
def t(locale, key, local_assigns = {})
|
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)
|
format(str, local_assigns)
|
||||||
end
|
end
|
||||||
|
|
||||||
def i18n
|
def tdata
|
||||||
path = File.join(Dir.getwd, "src", "json", "i18n.json")
|
@tdata ||= Ryo.from_json_file File.join(
|
||||||
json = File.binread(path)
|
Dir.getwd,
|
||||||
Ryo.from JSON.parse(json)
|
"src",
|
||||||
|
"json",
|
||||||
|
"t.json"
|
||||||
|
)
|
||||||
end
|
end
|
||||||
memoize :i18n
|
|
||||||
end
|
end
|
||||||
|
|
|
@ -14,7 +14,7 @@ end
|
||||||
|
|
||||||
Ryo.each(name_by_id) do |id, transliterated_name|
|
Ryo.each(name_by_id) do |id, transliterated_name|
|
||||||
writer = ->(locale, identifier:) do
|
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(
|
context = Ryo.from(
|
||||||
filename: "stream.html.erb",
|
filename: "stream.html.erb",
|
||||||
locale:,
|
locale:,
|
||||||
|
|
|
@ -30,8 +30,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="root h-full" data-locale="<%= context.locale %>"></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>
|
<script src="/js/loaders/surah-index-loader.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -33,7 +33,6 @@
|
||||||
data-locale="<%= context.locale %>"
|
data-locale="<%= context.locale %>"
|
||||||
data-surah-id="<%= context.surah.id %>">
|
data-surah-id="<%= context.surah.id %>">
|
||||||
</div>
|
</div>
|
||||||
<%= inline_json("/json/i18n.json") %>
|
|
||||||
<%= inline_json("/json/durations/alafasy/#{context.surah.id}.json", class_name: 'durations') %>
|
<%= inline_json("/json/durations/alafasy/#{context.surah.id}.json", class_name: 'durations') %>
|
||||||
<script src="/js/loaders/surah-stream-loader.js"></script>
|
<script src="/js/loaders/surah-stream-loader.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useEffect, useMemo, useRef } from "react";
|
import React, { useEffect, useMemo, useRef } from "react";
|
||||||
import { Surah, Ayah, TAyah, TAyat, TSurah, TLocale } from "Quran";
|
import { Surah, Ayah, TAyah, TAyat, TSurah, TLocale } from "Quran";
|
||||||
import { AudioControl } from "~/components/AudioControl";
|
import { AudioControl } from "~/components/AudioControl";
|
||||||
import { formatNumber, TFunction } from "~/lib/i18n";
|
import { formatNumber, TFunction } from "~/lib/t";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { TFunction } from "~/lib/i18n";
|
import { TFunction } from "~/lib/t";
|
||||||
import type { TLocale, TSurah, Surah } from "Quran";
|
import type { TLocale, TSurah, Surah } from "Quran";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useRef, useState, useEffect } from "react";
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
import { TLocale, TSurah, Surah } from "Quran";
|
import { TLocale, TSurah, Surah } from "Quran";
|
||||||
import { useTheme } from "~/hooks/useTheme";
|
import { useTheme } from "~/hooks/useTheme";
|
||||||
import { formatNumber, TFunction } from "~/lib/i18n";
|
import { formatNumber, TFunction } from "~/lib/t";
|
||||||
import { RightArrow } from "~/components/Icon";
|
import { RightArrow } from "~/components/Icon";
|
||||||
import { Head } from "~/components/Head";
|
import { Head } from "~/components/Head";
|
||||||
import { Filter } from "./Filter";
|
import { Filter } from "./Filter";
|
||||||
|
|
|
@ -12,7 +12,7 @@ import {
|
||||||
RefreshIcon,
|
RefreshIcon,
|
||||||
StalledIcon,
|
StalledIcon,
|
||||||
} from "~/components/Icon";
|
} from "~/components/Icon";
|
||||||
import { TFunction } from "~/lib/i18n";
|
import { TFunction } from "~/lib/t";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
surah: Surah<TSurah>;
|
surah: Surah<TSurah>;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { Surah, TSurah, TLocale, TAyat } from "Quran";
|
import { Surah, TSurah, TLocale, TAyat } from "Quran";
|
||||||
import { formatNumber } from "~/lib/i18n";
|
import { formatNumber } from "~/lib/t";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
surah: Surah<TSurah>;
|
surah: Surah<TSurah>;
|
||||||
|
|
|
@ -6,8 +6,7 @@ type PhraseMap<T> = {
|
||||||
|
|
||||||
export type TFunction = (locale: TLocale, key: string) => string;
|
export type TFunction = (locale: TLocale, key: string) => string;
|
||||||
|
|
||||||
export function i18n(json: string): TFunction {
|
export function T(phrases: PhraseMap<string>): TFunction {
|
||||||
const phrases: PhraseMap<string> = JSON.parse(json);
|
|
||||||
return function (locale: TLocale, key: string) {
|
return function (locale: TLocale, key: string) {
|
||||||
const path = key.split(".");
|
const path = key.split(".");
|
||||||
const phrase = path.reduce(
|
const phrase = path.reduce(
|
|
@ -1,16 +1,14 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
import { Surah, TSurah, TLocale } from "Quran";
|
import { Surah, TSurah, TLocale } from "Quran";
|
||||||
import { i18n } from "~/lib/i18n";
|
import { T } from "~/lib/t";
|
||||||
import { SurahIndex } from "~/components/SurahIndex";
|
import { SurahIndex } from "~/components/SurahIndex";
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
const root: HTMLElement = document.querySelector(".root")!;
|
const root: HTMLElement = document.querySelector(".root")!;
|
||||||
const locale = root.getAttribute("data-locale") as TLocale;
|
const locale = root.getAttribute("data-locale") as TLocale;
|
||||||
const script: HTMLScriptElement = document.querySelector(".json.surahs")!;
|
const surahs: Surah<TSurah>[] = require("@json/surahs").map((e: TSurah) => new Surah(e));
|
||||||
const blob = JSON.parse(script.innerText);
|
const t = T(require("@json/t.json"));
|
||||||
const surahs: Surah<TSurah>[] = blob.map((el: TSurah) => new Surah(el));
|
|
||||||
const t = i18n(document.querySelector<HTMLElement>(".json.i18n")!.innerText);
|
|
||||||
ReactDOM.createRoot(root).render(
|
ReactDOM.createRoot(root).render(
|
||||||
<SurahIndex locale={locale} surahs={surahs} t={t} />,
|
<SurahIndex locale={locale} surahs={surahs} t={t} />,
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import { Surah, Ayah, TSurah, TLocale } from "Quran";
|
import { Surah, Ayah, TSurah, TLocale } from "Quran";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
import { i18n } from "~/lib/i18n";
|
import { T } from "~/lib/t";
|
||||||
import { SurahStream } from "~/components/SurahStream";
|
import { SurahStream } from "~/components/SurahStream";
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
const root: HTMLElement = document.querySelector(".root")!;
|
const root: HTMLElement = document.querySelector(".root")!;
|
||||||
const locale = root.getAttribute("data-locale") as TLocale;
|
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
|
* Configure an instance of Surah
|
||||||
|
|
Loading…
Reference in a new issue