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 "rules/assets"
|
||||
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/redirect"
|
||||
|
||||
|
|
|
@ -14,27 +14,27 @@ end
|
|||
|
||||
Ryo.each(surah_id_to_name) do |surah_id, slug|
|
||||
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}
|
||||
write "/#{locale}/#{slug}/index.html"
|
||||
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"]
|
||||
write "/js/pages/TheSurahPage.js"
|
||||
write "/js/pages/surah/stream.js"
|
||||
filter :gzip_text
|
||||
write "/js/pages/TheSurahPage.js.gz"
|
||||
write "/js/pages/surah/stream.js.gz"
|
||||
end
|
||||
|
||||
compile "/js/pages/TheSurahPage/package.ts" do
|
||||
compile "/js/pages/surah/stream/loader.ts" do
|
||||
filter :webpack, depend_on: "/js/lib/WebPackage"
|
||||
write "/js/pages/TheSurahPage/package.js"
|
||||
write "/js/pages/surah/stream/loader.js"
|
||||
end
|
||||
|
||||
compile "/css/pages/TheSurahPage.scss" do
|
||||
compile "/css/pages/surah/stream.scss" do
|
||||
filter :sass, syntax: :scss, style: :compact
|
||||
filter :rainpress
|
||||
write("/css/pages/TheSurahPage.css")
|
||||
write("/css/pages/surah/stream.css")
|
||||
end
|
|
@ -1,6 +1,6 @@
|
|||
@import "../layout";
|
||||
@import "../components/Select";
|
||||
@import "../components/TheSurahPage/Shape";
|
||||
@import "layout";
|
||||
@import "components/Select";
|
||||
@import "components/Shape";
|
||||
|
||||
.content .row.details {
|
||||
direction: rtl;
|
||||
|
@ -56,5 +56,5 @@
|
|||
top: 2px;
|
||||
}
|
||||
|
||||
@import "../themes/moon";
|
||||
@import "../themes/leaf";
|
||||
@import "themes/moon";
|
||||
@import "themes/leaf";
|
|
@ -1,6 +1,6 @@
|
|||
@import "leaf/layout";
|
||||
@import "leaf/pages/surah/index";
|
||||
@import "leaf/pages/TheSurahPage";
|
||||
@import "leaf/pages/surah/stream";
|
||||
|
||||
.root .content.theme.leaf.ar {
|
||||
direction: rtl;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.root .content.theme.leaf {
|
||||
@import "../colors";
|
||||
@import "themes/leaf/colors";
|
||||
|
||||
.row.details {
|
||||
color: $green;
|
|
@ -1,6 +1,6 @@
|
|||
@import "moon/layout";
|
||||
@import "moon/pages/surah/index";
|
||||
@import "moon/pages/TheSurahPage";
|
||||
@import "moon/pages/surah/stream";
|
||||
|
||||
.root .content.theme.moon.ar {
|
||||
direction: rtl;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.root .content.theme.moon {
|
||||
@import "../colors";
|
||||
@import "themes/moon/colors";
|
||||
|
||||
.row.details {
|
||||
color: $gold;
|
|
@ -13,6 +13,6 @@
|
|||
</div>
|
||||
</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>
|
||||
</html>
|
|
@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
|
|||
import ReactDOM from 'react-dom/client';
|
||||
import classNames from 'classnames';
|
||||
import { get as getCookie } from 'es-cookie';
|
||||
import { Timer } from 'components/TheSurahPage/Timer';
|
||||
import { Stream } from 'components/TheSurahPage/Stream';
|
||||
import { Timer } from 'components/Timer';
|
||||
import { Stream } from 'components/Stream';
|
||||
import { SelectOption } from 'components/Select';
|
||||
import { ThemeSelect } from 'components/ThemeSelect';
|
||||
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 { Slice } from 'lib/Quran/Slice';
|
||||
import { strings } from 'lib/i18n';
|
||||
|
@ -19,7 +19,7 @@ interface Props {
|
|||
paused: boolean
|
||||
}
|
||||
|
||||
function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
||||
function SurahStream({ locale, surahId, slice, paused }: Props) {
|
||||
const path = `/${locale}/${surahId}/surah.json`;
|
||||
const node: HTMLScriptElement = document.querySelector(`script[src="${path}"]`);
|
||||
const [stream, setStream] = useState([]);
|
||||
|
@ -119,7 +119,7 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
|||
ReactDOM
|
||||
.createRoot(root)
|
||||
.render(
|
||||
<TheSurahPage
|
||||
<SurahStream
|
||||
locale={locale}
|
||||
surahId={surahId}
|
||||
slice={slice}
|
|
@ -8,8 +8,8 @@ import WebPackage from 'lib/WebPackage';
|
|||
const { locale, surahId } = document.querySelector<HTMLElement>('.root').dataset;
|
||||
|
||||
WebPackage({
|
||||
scripts: ['/js/pages/TheSurahPage.js'],
|
||||
stylesheets: ['/css/pages/TheSurahPage.css'],
|
||||
scripts: ['/js/pages/surah/stream.js'],
|
||||
stylesheets: ['/css/pages/surah/stream.css'],
|
||||
images: ['/images/moon.svg', '/images/leaf.svg'],
|
||||
others: [`/${locale}/${surahId}/surah.json`],
|
||||
fonts: [
|
Loading…
Reference in a new issue