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

design here: http://beta.quran.com/pages/donations

Hello,

Thank you for the project. There is an issue in the playing sounds which was loaded dynamically(lazy loading). Here is steps to reproduce:

• Open any Surahs(chapters) which has more then 10 ayats(verses)
• Scroll down to any ayats(verses) grater then 10
• Hit "Play" button on the left
• As you can see it cannot play it as it was not loaded
  

This issue is reproducible in the chrome and the firefox.

Assalamu alaykum, me and my brother are making website same like Quran.com and Sunah.com,, with just additional language and tafseer by our Scholars graduated in Islamic Universiry madina..

after we done it inshaallah we will out direct link also to your site.

may Allah reward us All.

Salaam,

I would like to join Slack channel but couldn't find any information about it. Can I get an invitation for ben[at]abdullahceylan.com?

Thanks

Assalamu alaykum

When the user has update the settings (ex : translations, night mode, ...) and he use the search box to reach another ayah, the settings are erased on the new page.

This address will track the progress of reducing the CLS (Cumulative Layout Shift) of the Home & Surah pages.

• setup jest test integration with storybook
• setup jest for testing all components

• Use this package: https://github.com/vinissimus/next-translate
• Migrate these files over: https://github.com/quran/quran.com-frontend/tree/master/src/locale

Salam, I have been following the project for some time, I have no excuse to not to contribute sorry about that.

When i first came across this project it was a react app then the efforts were shifted to rails app, I see now there is next.js app.

Would it not be reasonable to focus on one implementation and consolidate everything.

Jazakallah for you effort

Add the option to remove the word by word highlighting when playing an Ayah. This will help all non English users and will also help me in a project I'm working on.

this repo is too large to use on vercel due to fonts. we need to upload the fonts to cdn and reference directly from there

Thanks for this great effort, it could be nice addition to have a button somewhere in the home screen that opens a random aayat.
Idea being sometimes you need some inspiration from the quran but don't know where to look for exactly.

Would love to contribute if there's an interest in making this feature

Some of the chapter names in Arabic are showing outside the border when hovering over them. I hope the image below demonstrates the minor issue. I can help and raise a PR if its not been noted before.

This is an example: https://github.com/yannvr/react-components-cli

We can always write our own too

The following dependencies are not used by codebase:

"qs": "^6.9.2",
"react-dom": "^16.13.1",
"react-use": "^13.27.0",
"storybook-styled-components": "^1.1.4",
"styled-breakpoints": "^8.1.0",

Happy to create a PR to clean them and re-add them as we need them down the line

use eslint airbnb please

design:

from: http://beta.quran.com/

Hi,

The react version has an issue where audio is not loading when navigating from home page to any internal pages in firefox and safari.

design:

from:
http://beta.quran.com/

The pages directory is auto-generated from next-translate, it currently throws a few errors and fails the husk pre-commit hook.

I'll create a PR to skip running tests and listing on the auto-generated files.

Sorry if this is the wrong place to post this.

I am making a similar site but minimalist (pure html, no react) at https://thecashewtrader.gitlab.io/simple-quran
Currently it uses King Fahad Quran Complex V1 Fonts
I would like to switch to V2, but the text for V2 doesn't seem to be available in their repo https://github.com/alquran-foundation/qpc-fonts/

Could yall tell me where u got the text for the V2 font.

design here: http://beta.quran.com/pages/developers

Hi,

When playing audio in sequence most of time it jumps into middle of end of audio in Safari/Firefox on mac.

Replication:

• open website in Safari(ipad) or Safari/Firefox(mac)
• navigate any chapter
• click/tap on play button in the first verse of a chapter
• and you can see the issue

We already have CDN. Remove fonts from repo and use CDN.
Example:
https://cdn.qurancdn.com/assets/fonts/quran_fonts/pdms/pdms-saleem-quranfont.ttf
https://cdn.qurancdn.com/assets/fonts/quran_fonts/me_quran/me_quran.ttf
https://cdn.qurancdn.com/assets/fonts/quran_fonts/v1/ttf/p1.ttf

Just an idea: https://github.com/diegohaz/styled-tools#theme

The reason you should create a license is at https://choosealicense.com/no-permission/

Anyone can quickly open a PR but I think it is up to the creators of this application to choose which.

We'd like to deploy storybook stories into a preview website.

Testing discord integration.

I am trying to copy some verses but unable to. Check this video to understand.

As Salamu Alaikum,

Even "Feedback" function did not submit my message, I decided to find you on Github and write you here.

The ability to switch to different translations is no longer working (since you renewed the User Interface) that we access through "Settings" on Upper Bar section, but only the two pre-selected translators (Mustafa Khattab and Saheeh International) are shown.

I am using quran.com for a long time, this problem is continuing since you renewed the User Interface, and now I miss the usability of the old version already. I checked this on Opera and Mozilla browsers (latest versions), it doesn't work in none of them (and in old version of Edge, setting button doesn't work at all too).

InshaAllah you can fix the function of switching the translators like we were able to do it before the update in User Interface, thanks. JazakAllah for this beautiful website which I suggest to everyone possible.

design:

The text in Arabic is not displayed correctly in this page: https://quran.com/19

only some letters are displayed!

Salaam, the docs mentioned opening an issue to join the Slack channel. I'm not sure if this is still the case for this new repo but just wanted to give it a try. Email: [email protected]

I found that when the prettier rules are inside eslint they don't work on files like json and yml so they won't be auto-formatted, maybe we can find a way to make eslint also work on json and yml files.

Can be:

module.exports = {
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "printWidth": 100,
  "proseWrap": "always",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false
};

Thoughts @nabeel- ?

ASA, can anybody please add me to the slack channel. My email address is: [email protected]

design:

https://invis.io/RUPU8EFKCPJ#/275891921_Desktop-100-Surah-R01
https://invis.io/5FPOLZNABG3#/337633725_Mobile_100_Surah_-_3_More_Menu

In Surah Al Fath, Ayah 29, the Mustafa Khattab translation has a footnote which references the Bible. The reference is taken as one from the Qur'an:
Footnote:

Taken as a reference from the Qur'an when clicked:

May Allah reward you for your efforts regarding this application, it is one of my favourites.

I've noticed we are using styled-system in some components, are we considering having a <Box/> component? or even other layout Components like <Stack/> or <Grid/>?

Having layout components like these will make it easier and faster to implement layouts since they easily handle responsive styles and get their values from the theme object.

so instead of doing this

const StyledComponent= styled.div`
  color: ${({ theme }) => theme.colors.primary};
`

const Component = ({children}) => {
  return (
    <StyledComponent>
      {children}
    </StyledComponent>
  )
}

we can just use the color as a prop

const Component = ({children}) => {
  return (
    <Box color="primary">
      {children}
    </Box>
  )
}

Assalamu Alaikom, and great work !

TLDR; I know this is not a bug, I'm just curious how this is achieved.

I'm curious, how does the chapters display max 10 verses ? ( I think this is for test purposes) but I cloned the repo and browsed the code and couldn't figure out how this is accomplished.

When I request for a chapter, ex: 46 by the GET request http://api.quran.com/api/v3/chapters/46/verses I get all the verses, but when the application does it via getChapterVerses the reponse only contains 10 verses.

I'm curios how is this achieved.

Thank you, great work again. I hope I can contribute 😀

Designs here: http://beta.quran.com/pages/apps

https://www.npmjs.com/package/husky

• Run prettier before committing

This is an example: https://github.com/mmahalwy/mmahalwy/blob/master/sitemap-generator.js

Although, we will need to figure out how to handle the dynamic routes. We should have at least all the chapters (1->114) in the sitemap

Salam,

I would like to join the slack channel please.

Email: [email protected]

Thanks

Hey, it seems the slack invite link isn't working anymore can someone send me a new invite link.