Replace TheSurahPage with surah/stream
This commit is contained in:
parent
eac53f8da1
commit
20b7420ac9
14 changed files with 26 additions and 26 deletions
2
Rules
2
Rules
|
@ -31,7 +31,7 @@ end
|
||||||
# Require rules
|
# Require rules
|
||||||
require_rules "rules/assets"
|
require_rules "rules/assets"
|
||||||
require_rules "rules/pages/RandomRedirect", {locales:, surah_id_to_name:}
|
require_rules "rules/pages/RandomRedirect", {locales:, surah_id_to_name:}
|
||||||
require_rules "rules/pages/TheSurahPage", {locales:, surah_id_to_name:}
|
require_rules "rules/pages/surah/stream", {locales:, surah_id_to_name:}
|
||||||
require_rules "rules/pages/surah/index", {locales:}
|
require_rules "rules/pages/surah/index", {locales:}
|
||||||
require_rules "rules/pages/surah/redirect"
|
require_rules "rules/pages/surah/redirect"
|
||||||
|
|
||||||
|
|
|
@ -14,27 +14,27 @@ end
|
||||||
|
|
||||||
Ryo.each(surah_id_to_name) do |surah_id, slug|
|
Ryo.each(surah_id_to_name) do |surah_id, slug|
|
||||||
locales.each do |locale|
|
locales.each do |locale|
|
||||||
compile "/html/TheSurahPage.html.erb", rep: "/#{locale}/#{slug}/index.html" do
|
compile "/html/pages/surah/stream.html.erb", rep: "/#{locale}/#{slug}/index.html" do
|
||||||
filter :erb, locals: {locale: locale, surah_id: surah_id}
|
filter :erb, locals: {locale: locale, surah_id: surah_id}
|
||||||
write "/#{locale}/#{slug}/index.html"
|
write "/#{locale}/#{slug}/index.html"
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
compile "/js/pages/TheSurahPage.tsx" do
|
compile "/js/pages/surah/stream.tsx" do
|
||||||
filter :webpack, depend_on: ["/js/components", "/js/lib/[!WebPackage]/", "/js/hooks"]
|
filter :webpack, depend_on: ["/js/components", "/js/lib/[!WebPackage]/", "/js/hooks"]
|
||||||
write "/js/pages/TheSurahPage.js"
|
write "/js/pages/surah/stream.js"
|
||||||
filter :gzip_text
|
filter :gzip_text
|
||||||
write "/js/pages/TheSurahPage.js.gz"
|
write "/js/pages/surah/stream.js.gz"
|
||||||
end
|
end
|
||||||
|
|
||||||
compile "/js/pages/TheSurahPage/package.ts" do
|
compile "/js/pages/surah/stream/loader.ts" do
|
||||||
filter :webpack, depend_on: "/js/lib/WebPackage"
|
filter :webpack, depend_on: "/js/lib/WebPackage"
|
||||||
write "/js/pages/TheSurahPage/package.js"
|
write "/js/pages/surah/stream/loader.js"
|
||||||
end
|
end
|
||||||
|
|
||||||
compile "/css/pages/TheSurahPage.scss" do
|
compile "/css/pages/surah/stream.scss" do
|
||||||
filter :sass, syntax: :scss, style: :compact
|
filter :sass, syntax: :scss, style: :compact
|
||||||
filter :rainpress
|
filter :rainpress
|
||||||
write("/css/pages/TheSurahPage.css")
|
write("/css/pages/surah/stream.css")
|
||||||
end
|
end
|
|
@ -1,6 +1,6 @@
|
||||||
@import "../layout";
|
@import "layout";
|
||||||
@import "../components/Select";
|
@import "components/Select";
|
||||||
@import "../components/TheSurahPage/Shape";
|
@import "components/Shape";
|
||||||
|
|
||||||
.content .row.details {
|
.content .row.details {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
@ -56,5 +56,5 @@
|
||||||
top: 2px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "../themes/moon";
|
@import "themes/moon";
|
||||||
@import "../themes/leaf";
|
@import "themes/leaf";
|
|
@ -1,6 +1,6 @@
|
||||||
@import "leaf/layout";
|
@import "leaf/layout";
|
||||||
@import "leaf/pages/surah/index";
|
@import "leaf/pages/surah/index";
|
||||||
@import "leaf/pages/TheSurahPage";
|
@import "leaf/pages/surah/stream";
|
||||||
|
|
||||||
.root .content.theme.leaf.ar {
|
.root .content.theme.leaf.ar {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.root .content.theme.leaf {
|
.root .content.theme.leaf {
|
||||||
@import "../colors";
|
@import "themes/leaf/colors";
|
||||||
|
|
||||||
.row.details {
|
.row.details {
|
||||||
color: $green;
|
color: $green;
|
|
@ -1,6 +1,6 @@
|
||||||
@import "moon/layout";
|
@import "moon/layout";
|
||||||
@import "moon/pages/surah/index";
|
@import "moon/pages/surah/index";
|
||||||
@import "moon/pages/TheSurahPage";
|
@import "moon/pages/surah/stream";
|
||||||
|
|
||||||
.root .content.theme.moon.ar {
|
.root .content.theme.moon.ar {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.root .content.theme.moon {
|
.root .content.theme.moon {
|
||||||
@import "../colors";
|
@import "themes/moon/colors";
|
||||||
|
|
||||||
.row.details {
|
.row.details {
|
||||||
color: $gold;
|
color: $gold;
|
|
@ -13,6 +13,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="root" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>
|
<div class="root" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>
|
||||||
<script src="/js/pages/TheSurahPage/package.js"></script>
|
<script src="/js/pages/surah/stream/loader.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { get as getCookie } from 'es-cookie';
|
import { get as getCookie } from 'es-cookie';
|
||||||
import { Timer } from 'components/TheSurahPage/Timer';
|
import { Timer } from 'components/Timer';
|
||||||
import { Stream } from 'components/TheSurahPage/Stream';
|
import { Stream } from 'components/Stream';
|
||||||
import { SelectOption } from 'components/Select';
|
import { SelectOption } from 'components/Select';
|
||||||
import { ThemeSelect } from 'components/ThemeSelect';
|
import { ThemeSelect } from 'components/ThemeSelect';
|
||||||
import { LanguageSelect } from 'components/LanguageSelect';
|
import { LanguageSelect } from 'components/LanguageSelect';
|
||||||
import { PlayShape, PauseShape } from 'components/TheSurahPage/Shape';
|
import { PlayShape, PauseShape } from 'components/Shape';
|
||||||
import * as Quran from 'lib/Quran';
|
import * as Quran from 'lib/Quran';
|
||||||
import { Slice } from 'lib/Quran/Slice';
|
import { Slice } from 'lib/Quran/Slice';
|
||||||
import { strings } from 'lib/i18n';
|
import { strings } from 'lib/i18n';
|
||||||
|
@ -19,7 +19,7 @@ interface Props {
|
||||||
paused: boolean
|
paused: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
function SurahStream({ locale, surahId, slice, paused }: Props) {
|
||||||
const path = `/${locale}/${surahId}/surah.json`;
|
const path = `/${locale}/${surahId}/surah.json`;
|
||||||
const node: HTMLScriptElement = document.querySelector(`script[src="${path}"]`);
|
const node: HTMLScriptElement = document.querySelector(`script[src="${path}"]`);
|
||||||
const [stream, setStream] = useState([]);
|
const [stream, setStream] = useState([]);
|
||||||
|
@ -119,7 +119,7 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
||||||
ReactDOM
|
ReactDOM
|
||||||
.createRoot(root)
|
.createRoot(root)
|
||||||
.render(
|
.render(
|
||||||
<TheSurahPage
|
<SurahStream
|
||||||
locale={locale}
|
locale={locale}
|
||||||
surahId={surahId}
|
surahId={surahId}
|
||||||
slice={slice}
|
slice={slice}
|
|
@ -8,8 +8,8 @@ import WebPackage from 'lib/WebPackage';
|
||||||
const { locale, surahId } = document.querySelector<HTMLElement>('.root').dataset;
|
const { locale, surahId } = document.querySelector<HTMLElement>('.root').dataset;
|
||||||
|
|
||||||
WebPackage({
|
WebPackage({
|
||||||
scripts: ['/js/pages/TheSurahPage.js'],
|
scripts: ['/js/pages/surah/stream.js'],
|
||||||
stylesheets: ['/css/pages/TheSurahPage.css'],
|
stylesheets: ['/css/pages/surah/stream.css'],
|
||||||
images: ['/images/moon.svg', '/images/leaf.svg'],
|
images: ['/images/moon.svg', '/images/leaf.svg'],
|
||||||
others: [`/${locale}/${surahId}/surah.json`],
|
others: [`/${locale}/${surahId}/surah.json`],
|
||||||
fonts: [
|
fonts: [
|
Loading…
Reference in a new issue