Inline surahs.json, slugs.json, and i18n.json

This commit is contained in:
0x1eef 2023-03-11 09:27:31 -03:00
parent ce2a5d68bf
commit 3bbe8cf165
9 changed files with 30 additions and 19 deletions

14
Rules
View file

@ -36,9 +36,21 @@ require_rules "rules/pages/surah/index", {locales:}
require_rules "rules/pages/surah/redirect"
require_rules "rules/pages/surah/id_redirect", {locales:}
##
# Inline JSON rules
compile "/i18n.json" do
filter(:minify_json)
write("/i18n.json")
write(nil)
end
compile "/surahs.json" do
filter(:minify_json)
write(nil)
end
compile "/slugs.json" do
filter(:minify_json)
write(nil)
end
##

9
lib/helper.rb Normal file
View file

@ -0,0 +1,9 @@
module Helper
def inline_json(path)
className = File.basename(path, File.extname(path))
"<script class='json #{className}' type='application/json'>" \
"#{items[path].compiled_content}" \
"</script>"
end
end
use_helper Helper

View file

@ -30,8 +30,3 @@ compile "/css/pages/surah/index.scss" do
filter :rainpress
write("/css/pages/surah/index.css")
end
compile "/surahs.json" do
filter(:minify_json)
write "/surahs.json"
end

View file

@ -4,9 +4,7 @@
<title></title>
</head>
<body>
<script class="surah-id-to-slug" type="application/json">
<%= File.read(File.join(Dir.getwd, "src", "slugs.json")) %>
</script>
<%= inline_json('/slugs.json') %>
<script src="/js/pages/surah/id_redirect.js"></script>
</body>
</html>

View file

@ -13,9 +13,8 @@
</div>
</div>
<div class="root" data-locale="<%= locale %>"></div>
<%= inline_json("/i18n.json") %>
<%= inline_json("/surahs.json") %>
<script src="/js/pages/surah/index/loader.js"></script>
<script class="i18n" type="application/json">
<%= items["/i18n.json"].compiled_content %>
</script>
</body>
</html>

View file

@ -13,9 +13,7 @@
</div>
</div>
<div class="root" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>
<%= inline_json("/i18n.json") %>
<script src="/js/pages/surah/stream/loader.js"></script>
<script class="i18n" type="application/json">
<%= items["/i18n.json"].compiled_content %>
</script>
</body>
</html>

View file

@ -3,7 +3,7 @@
.split('/')
.filter(function (s) { return s.length; })
.slice(-2);
const el: HTMLElement = document.querySelector('.surah-id-to-slug')!;
const el: HTMLElement = document.querySelector('.json.slugs')!;
const slugs = JSON.parse(el.innerText);
const path = ['', locale, slugs[surahId]].join('/');
location.replace([path, location.search].join(''));

View file

@ -62,8 +62,8 @@ function SurahIndex({ locale, surahs, t }: Props) {
(function() {
const root: HTMLElement = document.querySelector('.root')!;
const locale = root.getAttribute('data-locale') as Quran.Locale;
const script: HTMLScriptElement = document.querySelector('script[src="/surahs.json"]')!;
const t = i18n(document.querySelector<HTMLElement>('.i18n')!.innerText);
const script: HTMLScriptElement = document.querySelector('.json.surahs')!;
const t = i18n(document.querySelector<HTMLElement>('.json.i18n')!.innerText);
const surahs: Quran.Surah[] = JSON.parse(script.innerText)
.map((el: Quran.JSON.Surah) => {
return Quran.Surah.fromJSON(locale, el);

View file

@ -118,7 +118,7 @@ function SurahStream({ node, locale, slice, paused, t }: Props) {
const params = new URLSearchParams(location.search);
const slice = Slice.fromParam(params.get('ayah'));
const paused = toBoolean(params.get('paused'));
const t = i18n(document.querySelector<HTMLElement>('.i18n')!.innerText);
const t = i18n(document.querySelector<HTMLElement>('.json.i18n')!.innerText);
ReactDOM
.createRoot(root)