Introducing BibleUp: A Web Tool For Bible References 💡
Tags: javascript, showdev, github, bible
Published: 2022-05-13 20:44:10


BibleUp transforms Bible references on a web page into accessible popovers

[Playground](https://stackblitz.com/edit/bibleup) | [Demo](https://bibleup.netlify.app/demo) | [Github](https://github.com/Bibleup/bibleup)

---

## Table of contents
1. [What is BibleUp](#intro)💡
2. [How it works](#how)🔌
4. [Code Playground](#playground)
5. [Features](#features)
6. [What's next](#next)🌟
7. [Conclusion](#conclusion)

---

## What is BibleUp 💡 <a id='intro'></a>
If you have ever read a christian or biblical article online, then you would, most likely, have encountered plain Bible references conventionally written in brackets (Matthew 1:21)

These references are not in any way linked to their corresponding text except they are otherwise written out by the author.

BibleUp was created as a solution to this. 

---

![BibleUp demo gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a28md4rzdxkn3lh9fncx.gif)
---
<p align='center'>See the live demo
<a href='https://bibleup.netlify.app/demo'>	here</a>
</p>


BibleUp is a configurable Web tool that transforms plain Bible references on a webpage to hyperlinks (`<a>`). 

When these links are moused on or clicked, the Bible text becomes accessible via a flexible and highly customizable popover.  

## How it works 🔌 <a id='works'></a>
BibleUp searches through all text nodes in the DOM, moving from one element to the next and transforming all valid references to links. The popover which houses the text is constructed based on the config options and appended to `document.body`.

Under the hood, BibleUp uses an internal API to fetch the Bible text and they are cached so subsequent requests are delivered fast.

Special thanks to [api.bible](https://scripture.api.bible)

### How references are matched
All valid references pass through a **two-step validation process**. 

The first is a regex test. This is possible since all references have a common structure (`book` `chapter`:`verse`-`verseEnd`).

```js
// variable 'books' are all 66 books separated by '|'

let regex = `(?:(?:(${books})\\.?\\s?(\\d{1,3}))(?:(?=\\:)\\:\\s?(\\d{1,3}(?:\\s?\\-\\s?\\d{1,3})?)|))|(?<=(?:(${books})\\.?\\s?(\\d{1,3}))\\:\\s?\\d{1,3}(?:\\s?\\-\\s?\\d{1,3})?(?:\\,|\\&)\\s?(?:\\d{1,3}(?:\\,|\\&)\\s?|\\d{1,3}\\s?\\-\\s?\\d{1,3}(?:\\,|\\&))*)(\\d{1,3}(?!\\s?\\-\\s?)|\\d{1,3}\\s?\\-\\s?\\d{1,3})`;

let bible_regex = new RegExp(regex, 'g');

bible_regex.test('John 3:16') //returns true
``` 

However, string that aren't valid references like **John 53:112** may match and this is why the next stage of verification involves the use of an object that stores the number of chapters and verses in each book of the Bible.

```js
/* variable 'bibleData' is an array of objects containing all 66 books
* the total number of verses in a chapter is listed in the 'chapters:[]' array
*/

const bible = {
 book: 'John',
 chapter: 3,
 verse: 16
}

for (const data of bibleData) {
   if (data.book == bible.book) {
      if (bible.chapter <= data.chapters.length &&
         data.chapters[bible.chapter - 1] != undefined &&
         bible.verse <= data.chapters[bible.chapter - 1]) {
         if (bible.verseEnd == undefined) {
            return JSON.stringify(bible)
         } else if (bible.verseEnd <= data.chapters[bible.chapter - 1]) {
            return JSON.stringify(bible)
         } else {
            return false
         }
      } else {
         return false
      }
   }
}
```


> These examples only show part of the codes where the match is done. Check the full code on Github.
>
> You can test the regex [here](https://regexr.com/5lba3) on regExr

---

BibleUp is written in vanilla JavaScript with zero dependency and LESS CSS for styling. The last two versions of all modern browsers are supported 😉

---

## Code Playground 
{% embed https://stackblitz.com/edit/bibleup?embed=1&file=index.js %}

## Features 
There are quite a few awesome tools like BibleUp. One of these is [FaithLife Reftagger](https://faithlife.com/products/reftagger). 

These tools are great in their core functions and they integrate well. 

BibleUp however leverages on community development, flexibility and high customisation options.

BibleUp can be styled thoroughly to fit perfectly with any website or theme.

## What's next 🌟
This tool is currently in **final beta**, so there is much more to come. 

Top of what's coming next is making more versions available (daunting permission/copyright process but very possible).

Other are integration with WordPress (a plugin) and other environments (browser extensions) and more functionality like 'read aloud' and share buttons. 

## Conclusion
BibleUp is open to contributions and feature requests. 

Check out the source code on [Github](https://github.com/Bibleup/bibleup) and help contribute or kindly drop a review

Visit the [website](https://bibleup.netlify.app) or check the [docs](https://bibleup.netlify.app/docs) for more information.

Thank you!