quran / quran.com-frontend-next Goto Github PK
View Code? Open in Web Editor NEWFrontend build on next.js
Home Page: https://quran.com
Frontend build on next.js
Home Page: https://quran.com
https://www.npmjs.com/package/husky
design:
from: http://beta.quran.com/
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>
)
}
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
design here: http://beta.quran.com/pages/donations
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- ?
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
Hi,
When playing audio in sequence most of time it jumps into middle of end of audio in Safari/Firefox on mac.
Replication:
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.
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.
ASA, can anybody please add me to the slack channel. My email address is: [email protected]
design here: http://beta.quran.com/pages/developers
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
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
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:
This issue is reproducible in the chrome and the firefox.
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.
use eslint airbnb please
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.
The text in Arabic is not displayed correctly in this page: https://quran.com/19
only some letters are displayed!
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
Hey, it seems the slack invite link isn't working anymore can someone send me a new invite link.
from:
http://beta.quran.com/
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
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.
Designs here: http://beta.quran.com/pages/apps
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.
This is an example: https://github.com/yannvr/react-components-cli
We can always write our own too
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, 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]
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
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 ๐
Testing discord integration.
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.
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.
We'd like to deploy storybook stories into a preview website.
This address will track the progress of reducing the CLS (Cumulative Layout Shift) of the Home & Surah pages.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.