The Koinos Reader

The Koinos Reader is a joint project of the Digital Bible Society and Faith Comes by Hearing.

QuickStart

This project requires Node v10 and npm v6.
If you do not have Node follow the installation instructions here: Node.js.
Follow the instructions on Digital Bible Platform to obtain an api key for the app. You will need a valid key for the app to work!
Clone the repository:
- git clone https://github.com/digitalbiblesociety/dbp-reader.git
Once you have successfully installed Node and cloned the repository run npm install to install the required dependencies
Next follow the steps listed below to update the files to contain your organization specific styles and information
- Create a .env file in the root of your new project, following the pattern found in sample-env.txt add your own environment variables
- Note: You will need to make sure your api key has access to the project and bucket(s) used in your .env file
- Update the env-config.js file to only use the variables from your .env file
- Update the files under theme_config to include your custom colors and organization information
- Update ./static/light_theme_logo.svg and ./static/dark_theme_logo.svg to match your organization's logo
- Update ./static/manifest.json to match your url and site theme
Now run npm build followed by npm start:prod for the production version of the site
- Alternatively just run npm start for the development site
Finally navigate to localhost:3000 to see your newly created bible reader!

Description

A minimalist bible study application with a focus on flexibility, accessibility, and portability. It is in many ways the spiritual successor to the bible browser and the inScript projects.

Goals

** Accessibility **
- The reader is focused on supporting disadvantaged groups especially the blind or disabled. Following the recommendation of WAI and ensuring the site is built to be compatible with WAI-ARIA 1.1a will ensure that the app is easy to use and navigate
- The reader will be heavily icon driven but given the limitations of icon-focused communication. The reader will also need to be multi-lingual. The driving text for web app itself should be translated in the top eight most common gateway languages
- The reader will be simple and intuitive. Easy to locate settings should exist to increase font size for those with poor eyesight. It will also be possible for the users to adjust the playing speed of audio for new speakers and language learners
** Robust **
- The Reader will be fully backed by a series of tests to ensure smooth operations across multiple platforms with focus for eventual deployment as a react native app
- The reader should leverage service workers and support some offline capabilities
- The reader will use promises and load content asynchronously whenever it is wise
** Multipurpose **
- The Reader will be built with the intention of porting it over to mobile devices via the implementation of React Native
- The Reader will contain components to be re-used for a few partners like gideons
- The Reader will contain components for bible dictionaries for study and research

Ideas for changing the font family

Set the active font family based on the active version
First version to implement is Kurdish Behdini

Steps

Define the font in the theme_config/font.json file and on the font object in themes.js line 20.
When the version is changed also fetch the .ttf file from the server either before the text or just after. You can use webfontloader to load your hosted font, example is below. Alternatively you can import the fonts like the other google fonts on line 19 of variables.scss; this would be simpler than using webfontloader, but would have some slight performance implications.
```
WebFont.load({
  google: {
    families: ["font-family-for-kurdish-behdini"]
  }
});
```
Call applyFontFamily from themes.js with the key in the fonts map that will select the new font.
Change the fontFamily back to the cached version once the version changes, unless the next version also has a new font

Development Needed

Add logic for when to swap out the font family
- This should probably go in handleVersionListClick that starts on line 171 in app/components/VersionList/index.js. You need to call the applyFontFamily function with the appropriate key.
- Could also choose to use webfontloader here to fetch the new font so that it is not loaded for everyone who uses the site.

bradflood / dbp-web