ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add "Amiri Quran Regular" font to SurahIndex.tsx

Browse source
This commit is contained in:
0x1eef 2024-09-18 15:56:15 -03:00
parent 07ce6cdf61
commit 44e143254e
4 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
share/al-quran.reflectslight.io/CHANGELOG
View file

@ -6,6 +6,10 @@
The appearance of the ~SurahStream.tsx~ component was revisted
for RTL languages, especially Arabic
**** Add "Amiri Quran Regular" to ~SurahIndex.tsx~
The name of each surah is rendered in the Amiri Quran Regular
font in the Arabic locale / language
**** Add "Amiri Quran Regular" font
This new font is used specifically for the contents of a surah
in the Arabic locale / language

11
src/css/main/SurahIndex.scss
View file

@ -3,6 +3,17 @@
@import "themes/green";
body .root .content.theme {
@import "base/colors";
ul.body.index[lang="ar"] {
li a {
span:last-child {
font-family: "Amiri Quran Regular";
color: $black;
}
}
}
ul.body.index {
@media (max-width: $breakpoint-sm) {
li, li a {

10
src/js/components/SurahIndex/index.tsx
View file

@ -16,6 +16,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
const [theme, setTheme] = useTheme();
const [index, setIndex] = useState<Surah[]>(surahs);
const ref = useRef<HTMLDivElement>(null);
const isArabic = locale.name === "ar";
useEffect(() => {
const div = ref.current;
@ -37,7 +38,10 @@ export function SurahIndex({ locale, surahs, t }: Props) {
<Head locale={locale} theme={theme} setTheme={setTheme}>
{t(locale, "TheNobleQuran")}
</Head>
<ul className="flex flex-wrap body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6 text-lg">
<ul
lang={locale.name}
className="flex flex-wrap body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6 text-lg"
>
{index.map((surah, key) => (
<li
className={classNames("flex justify-center surah", {
@ -59,7 +63,9 @@ export function SurahIndex({ locale, surahs, t }: Props) {
{formatNumber(locale, surah.id)}
</span>
)}
<span>{surah.name}</span>
<span className={classNames({ "text-2xl": isArabic })}>
{surah.name}
</span>
{locale.direction === "ltr" && (
<div className="flex justify-end grow pr-3">
<div className="flex flex-col">

1
src/js/loaders/SurahIndexLoader.ts
View file

@ -20,6 +20,7 @@ import { formatNumber } from "~/lib/t";
postman(
item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }),
item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"),
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.progress((percent: number) => {
progressBar.value = percent;