gibreelabdullah / hadith-hub Goto Github PK

View Code? Open in Web Editor NEW

5.0 1.0 2.0 35.43 MB

HadithHub - A Multi Language collection of Hadith

Home Page: https://www.hadithhub.com/

License: GNU Affero General Public License v3.0

JavaScript 0.80% Svelte 50.78% Dockerfile 0.55% TypeScript 47.10% HTML 0.28% CSS 0.49%

hadith islam

hadith-hub's Introduction

HADITH HUB (حديث حب)

With the name of Allah, the All-Merciful, the Very-Merciful.

All praise and thanks are due to Allah, the Master and King of existence, the All-Merciful, Beneficent, who has power over all things. May peace and blessings be upon His final Messenger, Sayyidina Muhammad ﷺ, and his Family, and his Companions. About

HadithHub.com started in October 2022. It aims to make it easy for anyone to read, study, and learn the ahadith of Sayyidina Rasulullah ﷺ. This project is open source.

This repo is the frontend of the hadithhub.com, the data is in the hadith-api repo. We will be grateful if you contribute in this project to make it better.

It would be a grave injustice to omit the mention of Fawaz Ahmed who made the enormous effort in collecting Ahadith in multiple languages and their gradings by multiple scholars. This project wouldn't be possible without his efforts. May Allah ﷻ reward him immensely.

Credits

Fawaz Ahmed : For collecting all the Ahadith data. A complete list of sources of the data can be found here.

Contributors - UI : Contributors who helped in creating the website.

Contributors - Data : Contributors who helped in collecting hadith/gradings or correcting them.

Svelte : A front-end, open-source JavaScript framework for making interactive webpages.

Skeleton : A fully featured UI Toolkit for svelte.

html-to-image : A javascript library to convert html to image, essentially allowing us to download screenshots of Ahadith.

Prerequisites

npm should be installed in the system.

Contribution Guide

There are 3 repositories of interest.

Hadith Hub (This Repo) - It is the frontend of the application written in Svelte.
hadith-api Branch name '2' - It holds all the data. All the json files in the repo act as APIs and the raw files are are served to the website whenever requested.
hadith-search-api - For the search functionailty, this is deployed to a server. Currently rethinking this implementation to make it more robust and cost effective.

You may raise a PR, give suggestions, raise issues for any of them.

To run the project

Clone the reposiory.
run npm install to install dependencies
run npm run dev to run the application in dev mode.
Goto http://localhost:5173 in your browser.

hadith-hub's People

Contributors

Stargazers

Watchers

Forkers

thecashewtrader g00df3lla

hadith-hub's Issues

Add the sources for different translations

Multipart hadith links don't work

If I visit a multipart hadith such as Tirmidhi 2743, the .2 or .3 parts don't work such as Tirmidhi 2743.2.

Likely related, for the affected hadith it shows "Book 0, Hadith 0" and does not show any gradings.

Other services use b, c, d instead of .2, .3, .4.

Use the urdu font that quran.com uses.

"About App" page

Enhance search. Add book, language filters

Language selection in side bar doesn't get saved in collection view and chapter view.

It only gets saved when viewing hadith.

Add a license

Helpful resource: Choose A License

Show a message if hadith text is blank in the given language.

Show something like "The translation of this hadith is not available"

Add chapter headings.

Option to open hadith in a new tab specially in serach window

In search window only the language which matches the search text is shown, it would be good to give an option to either view all selected languages side by side or to open hadith in a new tab.

Move `/[book]` page to `/[book]` and `/[book]:[bookHadith]`

Currently, in the book page, we are manually checking for a : and splitting, rendering different versions of the page. If we split the route into two: /[book] and /[book]:[bookHadith], it would vastly simplify the pages, in addition to allowing for easier implementation of <title> tags, OpenGraph embeds, etc.

Button to copy/download a screenshot of the hadith.

html2canvas library can be used to do this.

Can you add a max-width for hadith for ultrawide monitors?

The page is too stretched and hard to read when viewing on monitors that are larger than the standard size. 3440x1440p is what I use and the content is too wide. It would be better if you add a container with a max-width of say 1300px. If you want I can look into this for you.

"Copied" text bug

Currently, on clicking "Copy Permalink", the text for all buttons changes to "Copied".

Reproduction:

Visit https://hadithhub.com/bukhari:1
Click on "Copy Permalink"
Both buttons' text changes

I looked into the code and SvelteKit docs, but can't seem to find the root cause.

Footer is not shown on https://www.hadithhub.com/
Footer is shown on https://www.hadithhub.com/bukhari:1