quran / quran.com-frontend-v2 Goto Github PK

Suggested by: @elvirmuslic

quran/quran.com-frontend#1117

Al Salam Alaikom,

The white triangle is not aligned properly inside the circle. This issue was checked on both Edge and firefox, and it appears on both browsers.

As-salamu Alaykum

I got this once i open the page https://quran.com/1 using Firefox 75.0.
Is this related to #109 ?

Screen shot:

Error log:
Audioplayer mounted but no file available raven.js:51:37
b raven.js:51
value unknown:1
notifyAll main-415d4fa2919ce5d6e18b.js:18
close main-415d4fa2919ce5d6e18b.js:18
closeAll main-415d4fa2919ce5d6e18b.js:5
perform main-415d4fa2919ce5d6e18b.js:5
perform main-415d4fa2919ce5d6e18b.js:5
perform main-415d4fa2919ce5d6e18b.js:5
kt main-415d4fa2919ce5d6e18b.js:5
closeAll main-415d4fa2919ce5d6e18b.js:5
perform main-415d4fa2919ce5d6e18b.js:5
batchedUpdates main-415d4fa2919ce5d6e18b.js:18
pt main-415d4fa2919ce5d6e18b.js:5
rt main-415d4fa2919ce5d6e18b.js:5
enqueueSetState main-415d4fa2919ce5d6e18b.js:5
setState main-415d4fa2919ce5d6e18b.js:18
value main-415d4fa2919ce5d6e18b.js:18

We need to add custom search on surah dropdown.

Include English audio recitation provided here:
https://blog.clearquran.com/download/

The above page includes a link for a verse by verse download of the mp3 audio files (https://www.clearquran.com/downloads/quran-verse-by-verse-mp3.zip) as well as verse by verse downloads of the text itself (https://www.clearquran.com/downloads/quran-verse-by-verse-text.zip)

beta.quran.com/1

This is tricky one, we either need to override all boostrap columns, rows stuff using JSOR add another template for reading mode, render that when user click reading mode.

Or maybe we can disable this for now, have the build and implement this few weeks later.

One more suggestion to the business logic, it should be noted that I have not (yet) seen a way to donate or support the development of the website.
This should be implemented, either as a donation or add extra features that won't be necessary but could be implemented for looks or something similar.

Why?

People like @naveed-ahmad & @mmahalwy need to be developing more and add cool features, we want this site to be better each year and have more people attracted. This is NOT possible without money.
Basically if we want a good website and a more development faster and better we pay and make some of the core developers lives easier.

• Add feature that will be paid and/or donations
• Use that money to give you a salary or pay for extra hours of development i.e. make site better
• Use the money to pay for better servers and whatnot (QA engineer for instance)
• Have a public forum so that users can also suggest things and talk about Quran

The reality is that nothing can function without money and we want the incentive so that you can do the work for God. Because even for zekah, the ones that collect it, take a salary/share, this is noted in the Quran.

my email is [email protected]

For Surah #3, the quran.com and beta.quran.com both spell it as Ali'Imran -- this is problematic because Ali is a name of an individual so to some extent this is changing the meaning of the Surah name. To my knowledge, and Allah knows Best, it must be spelled as Al-Imran. I checked in a hardcopy of an English Mushaf, and in the index the surah name is spelled as Follow: Āl Imran (notice this is an A with a dash over it, Ā)

For Surah #74, on quran.com and beta.quran.com it is spelled as "Al-Muddaththir" -- I think it should be spelled as "Al-Muddathir" with only a single "th", and Allah knows best

Al Salam Alaikom,

There seems to be a misplaced "x" icon in the drop down menu for selecting the reciter name.

If I click the donation button on the page https://quran.com/donations I get a Ip network error.

Al Salam Aliakom @naveed-ahmad,

For the Surahs under the "Other Links" section in the footer of the HTML document, please use sentence casing and only use one transliteration for the Surah name:

SURAH YASIN, YASEEN (يس) ----> Surah Yaseen (يس)
AYAT AL-KURSI (آية الكرسي) ----> Ayat Al-Kursi (آية الكرسي)

@naveed-ahmad,

For the content on the following page:
http://beta.quran.com/pages/apps

Please update the paragraph to be as follow:

"By the developers of the Quran.com application, comes the Quran for iOS. A beautiful and ad-free mushaf app. It’s now easier to read the Quran on the go, memorize it, and listen to your favorite reciters. Al-hamdu Lillah!"

Best,

Al Salam Alaikom @naveed-ahmad,

When I first saw "The Prohibition" link, I thought it was a misplaced element, then I realized that it's part of the Surah name for Surah Al Tahreem. As in "surah-name-img1.jpg" using the Edge browser.

Let one Surah card be the name of the Surah, the translation for the name of the Surah, the number of the Ayahs in the Surah, and the rendering of the Surah in Arabic font. This Surah card is highlighted in "surah-name-img2.jpg" using edge.

Based on the screen size, the Surah card does not render entirely as one group. This issue is present, I think the issue is present regardless of the language, because it shows up with the Arabic and the English language selected. Please see the attached "surah-name-img1.jpg" and "surah-name-img2.jpg" for details.

The elements of the Surah card need to be grouped to render together, regardless of the screen size.

This issue is not seen when using the firefox, as in "surah-name-img3.jpg" and "surah-name-img4.jpg".

[

](url)

http://beta.quran.com/7/157

Complete ayah:
الَّذِينَ يَتَّبِعُونَ الرَّسُولَ النَّبِيَّ الْأُمِّيَّ الَّذِي يَجِدُونَهُ مَكْتُوبًا عِنْدَهُمْ فِي التَّوْرَاةِ وَالْإِنْجِيلِ يَأْمُرُهُمْ بِالْمَعْرُوفِ وَيَنْهَاهُمْ عَنِ الْمُنْكَرِ وَيُحِلُّ لَهُمُ الطَّيِّبَاتِ وَيُحَرِّمُ عَلَيْهِمُ الْخَبَائِثَ وَيَضَعُ عَنْهُمْ إِصْرَهُمْ وَالْأَغْلَالَ الَّتِي كَانَتْ عَلَيْهِمْ فَالَّذِينَ آمَنُوا بِهِ وَعَزَّرُوهُ وَنَصَرُوهُ وَاتَّبَعُوا النُّورَ الَّذِي أُنْزِلَ مَعَهُ أُولَٰئِكَ هُمُ الْمُفْلِحُونَ

But user want to repeat only part of ayah for memorization ( for ziker )
فَالَّذِينَ آمَنُوا بِهِ وَعَزَّرُوهُ وَنَصَرُوهُ وَاتَّبَعُوا النُّورَ الَّذِي أُنْزِلَ مَعَهُ أُولَٰئِكَ هُمُ الْمُفْلِحُونَ

Scrolling

• Click any surah form home page
• Then hit back to go to the index page it scrolls to the very top which is annoying because I lose my place

Repeat on player

Say the player is playing 2:255

• Open repeat popover
• User will see 1 in from select box, this should be currently playing ayah

https://github.com/hansottowirtz/sprockets-exporters_pack/wiki/How-to-enable-Brotli-with-Rails-and%C2%A0Nginx

#!/bin/bash

export LINK='https://cdn.qurancdn.com/assets/application-a026584f1318aa3c51b3002a6a42b244db3c52788a28e30c61a92c6c106bbe23.css'

echo none
echo $(curl $LINK --silent --write-out "%{size_download}\n" --output /dev/null)

echo gzip
echo $(curl $LINK --silent -H "Accept-Encoding: gzip" --write-out "%{size_download}\n" --output /dev/null)

echo br
echo $(curl $LINK --silent -H "Accept-Encoding: br" --write-out "%{size_download}\n" --output /dev/null)

echo gzip, br
echo $(curl $LINK --silent -H "Accept-Encoding: gzip, br" --write-out "%{size_download}\n" --output /dev/null)

Results:

none
143660
gzip
27040
br
24085
gzip, br
24085

Description

Regarding link to 'ayat al kursi' the page navigates to https://quran.com/ayatul-kursi , which causes an internal server error. It looks like the redirect somewhere in ruby (or in the database) has an invalid link. Selecting other links causes no issue.

Steps to Reproduce

1. Go to quran.com
2. Select 'ayat al kursi' from the quick links

Intended Use Case

Suppose a button click somewhere and redirect to a correct page.

Basic Information

Browser: Chrome
OS: Windows

I wasn't sure where to report this issue, sorry if this is wrong place.

Is the quran.com-frontend repository being used? does it have anything to do with it or is it just a historical repository?

If it is just historical I believe that Github lets you make it read-only (something like archived), it would be better to avoid doubts for those who just arrived like me. :)

@naveed-ahmad ,

1. Go to beta.quran.com
2. Scroll to the footer
3. click the "Sitemap" option
4. The "Sitemap" does not load properly, please see the attached screenshots

Al Salam Alaikom,

To reproduce the bug:

1. Go to quran.com
2. Go to a Surah, in my case, I selected Surah Al Baqarah
3. Select an Ayah from "Go to Verse" option, in my case, I selected Ayah # 218
4. The application doesn't go to that verse as expected. The first 20 Ayahs are shown, and the user has to scroll down to the 3rd page to see the Surah from Ayah # 218

See the screenshot here:

problem continued

5. Select a different Ayah number from the "Go to Verse" option, in my case I stayed in the same state from step 4 and selected Ayah # 255
6. A loading animation shows, and the user is taken to Ayah # 1, upon scrolling down, the user sees the same pages loaded after step 4 (Ayah 1-20 on the first two pages, and Ayah 218 at page 3)

Bismillah
Assalamualaikum warahmatullahi wabarakatuh
First of all, JazakAllah kharian and barakallahu fik for the quran.com team hardwork for bringing qur'an as accessible as possible to the general masses

We found a bug on the copy-pasting system.
it seems that if the ayah contains a dagger alif ( ــٰ ), the copy system misinterpret the dagger alif as a normal alif ( ﺍ )

we found this on at least two ayah :

latter part of Al-Mujadila [58]:11
أُوتُوا الْعِلْمَ دَرَجَاتٍ
this should be (درجت)

Beginning of Al-Kahf [18]:60
وَإِذْ قَالَ مُوسَىٰ لِفَتَاهُ
this should be (لفتىه) ,

Notice that there should be (we think) a ى between ت and ه, but it was overwritten by the alif

we have tried this on :
Windows 10 - Brave Browser Version 1.1.22 Chromium: 79.0.3945.79
Windows 10 - Microsoft Edge 44.19041.1.0, EdgeHTML 18.19041
Android 10/Q - Chrome 79.0.3945.79

This issue does not affect the quran for android app, on both the classic and the new appearance.

we really do hope to Allah this doesn't change the actual meaning of the ayah.
Although we've been seeing a lot of website adopt this harf on their post.

just to be sure, We have checked with other physical quran that we have just to be sure if this is an allowable mistake or not.
So far we only found two example out of, maybe 10 quran. None of them are intended as a Quran, or is a normal Quran. so we don't think this is something that is allowed

• on Indonesian translation of tadzkiratus samii' (the Arabic version didn't exhibit this problem)
• on Buya Hamka's 1982 tafseer. But other Qur'an from around that period didn't have this problem. So we assume this is a typo

May Allah bless you All and reward you the highest place in jannah for your hardwork.

We already have the text of Abdel Haleem’s English translation on Quran.com. Could we explore adding this audio recitation of Abdel Haleem's English translation:
https://books.apple.com/us/audiobook/the-quran-a-new-translation-by-m-a-s-abdel-haleem-unabridged/id1438294012

[email protected]

Al Salam Alaikom,

1. you need to add space: "beautifulreligion" --> "beautiful religion"

2. Incorrect sentence structure:
   "Making a difference for Quran.com is as simple as a Tweet, Facebook share or email us feedback."
   Here is one proposal, you can rework it if you want:
   "Making a difference to the Quran.com application is as simple as a social medial share or an email with feedback."

Missing .git in:

4. Assign the original repository to a remote called "upstream".

git remote add upstream https://github.com/quran/quran.com-frontend-v2 <.git>

It would be great if users could provide an ?isReadingMode=true query param and allow that toggle reading mode. Is this already possible?

1. lorem ipsum text right under “the noble quran”

2. in Arabic, sura names are still in English primarily (though maybe this is ok since the Arabic is next to it?)

3. minor - image says “hadit” instead of “hadith” or “hadeeth”

4. popular searches scrolls which is good, but sometimes, something appears cut off which is weird until you realize it’s just hidden behind scroll.

5. mobile apps screen uses very low resolution images - both the playstore, appstore logos and the screenshots. they also don’t reflect the actual images.

6. developers - “find me in app/views/pages/developers.html.erb”

7. search doesn’t work?

8. let’s remove “watch video commentary from bayyinah?” - it’s too big and also want to remove it when we only have it on sura Fatiha

9. tooltip display - you can check both at the same time but only one is in effect

10. bad encoding in some translations? just chose king fahd indonesian for 1:2 and i see bad text - 9>1 and a footnote thing

11. kinda a feature request - can we sort translations by most popular or have them collapsing or something? it’s hard to find English ones.

12. when i first clicked translations and chose king fahd indonesian, my English translation went away automagically - i guess this might only affect clean states?

13. playing highlighting needs some left/right padding imho

14. “chapter info” popup doesn’t look like a popup in both dark and night modes

15. switching reading also toggles dark mode

16. switching reciter doesn’t do anything - still playing mishari for me

Hello, I am little curious that previous version is with React SSR but in current you are not using react? Why?

Salam Alaikum @naveed-ahmad

Please add me to the Slack channel.

My email is [email protected]

Thank you :)

[email protected]

Thank you guys for putting up a superb effort. May Allah grant you a great reward.

Please also add Sudais and Shuraym [Urdu Translation] ... A number of readers are Urdu speakers and love Sudais. It would be great if this translations are also made available. Jazak Allah

• synonyms words( root, lemma, stem )
• We’ve huge list of translation, needed to add support for prioritising some translation over the others. Like gave max priority to default translation
• Highlight the matched words, different color schemes if word is not exact match ( fvh )
• Ability to search from a specific surah, or whole Quran
• Ability to search from specific translation ( like search only english translation )

Issue Lam is not rendering properly, user configruation.
Mozilla, latest version that is available 26/03/2020
https://prnt.sc/rmy3dc

Everything works properly on Chrome.

Al Salam Alaikum,

There are several issues with the menu (aka tooltip) currently in use on beta.quran.com. Here's the menu that I'm referring to:

Here are the issues:

1. The value for the "Translations" is filled by default because when the page first loads, the "Translations" menu shows up and the user has to pick for the menu to go away. Here's a print screen quickly snapped right before the default value is set:

2. Menu overlaps text upon scrolling down

3. The "Tooltip display" option or text does nothing when clicked. If it's meant to be a clickable option, then it doesn't work. If it's meant to be a text, then it's placed oddly in the middle of the menu.

4. The navigation bar is not needed if the menu could be reorganized. For example, the texts right next to the menu options can be removed. The initial default value for the menu options can be used for those text fields. Here's how this one change would look like in Arabic and in English.

5. Nothing happens when switching between the "translations" and "transliterations" options. Also, having two menu options shown as "translations" in the beginning, when the page loads, is confusing.

6. Without clicking any option, the "translation/transliteration" menu option is highlighted in a blue border whereas the other menu options are highlighted in a gray border. When clicking, the "translation/transliteration" menu option is highlighted in a thick and black border whereas the other menu options are highlighted in a think and blue border. This is inconsistent, and I think it looks nicer to have all options initially displayed in a gray border and once clicked the menu option can be highlighted with a blue border.

The overall menu could be reorganized. One inspiration is the menu on equran.me Their menu has the same options that we have and it's comfortable to look at and easy to use. The overlapping issues and the default prefilled values need still to be addressed in the code. Here's a screenshot of equran.me menu in the Arabic language, they don't use an English menu on their site

• Move locale to footer. This is common. We should detect the user locale and redirect them (or set it) automatically

• search bar can be smaller or a button that toggles a search bar

• The hamburger is icon should allow for settings

• also, on scroll, hide the navbar

Asalaamu a'laikum can someone add me on Slack, please? Here is my email address: [email protected]

Thanks in advance.

Dear developers,

Please add the Tajweed color coding feature. It's very essential and beneficial. Especially along with the Al-Husary (Muallim) voice, it will be incredible teaching material! Please give this higher priority. Thank you for your efforts.

Best regards,
Aman

Asalamualakum I would love to work on either project. Ramadan Mubarak

email: [email protected]

I want to be able to follow the development until I feel comfortable enough to contribute (not familiar with rails). [email protected]

Assalaam alaykum wa rahmatullah,

I'm submitting a ...

• bug report
• feature request
• other

Anything else:
I am interested to join your discussion channel: [email protected]

Will React and Vanilla JS be used in this project?

As'salamun alaykun wa rahmatullahi wa barakatu

I need to study further the operation of this new version of the site, I would like to make it 100% functional locally, without relying on anything external, is there a step by step tutorial?

Are there any servers in Docker that can be used for source code testing?

Thankful.

I'm submitting a ...

• bug report
• [ x ] feature request
• other

Current behavior:

Currently if I am reading a verse and I come across an unfamiliar word (which happens very often), I can put my mouse over it and see the meaning. But then I forget it almost immediately. I think this is because I don't see the word frequently enough or in enough contexts to remember it.

Expected / new behavior:

I wish to implement a feature wherein if I see the meaning of a word, I can also find other ayat in which the same word (or a word with the same root is used). If these ayat are sorted with smallest first, I can maybe even memorize a small ayah in which the word appears and so the word will be more familiar to me.

This is clearly an experimental feature and I wish to play around with it and see how it works before making any changes to the repository. I would like to be added to the Slack channel in the hopes of finding some help/resources.

Jazakallahu khair.

Specs for share feature: quran/quran.com-frontend#623

This is going to be a difficult task but if we can merge glyphs that'll solve lot of issues.

37/130 last two words should be one glyph.

https://quran.com/37/130
https://beta.quran.com/37/130

Last two word are separate words in font, but looks like in database this is single word. This mismatch is root cause of lot of bugs

• We've same translations for both words
• Beta isn't showing font of last word