Introducing BibleUp: A Web Tool For Bible References 💡

BibleUp transforms Bible references on an online web page into accessible popovers

Playground | Demo | Github

Desk of contents

1. What is BibleUp💡
2. How it works🔌
3. Code Playground
4. Features
5. What’s next🌟
6. Conclusion

What’s BibleUp 💡

If in case you have ever learn a christian or biblical article on-line, then you definately would, most certainly, have encountered plain Bible references conventionally written in brackets (Matthew 1:21)

These references are usually not in any manner linked to their corresponding textual content besides they’re in any other case written out by the writer.

BibleUp was created as an answer to this.

See the dwell demo
here

BibleUp is a configurable Net instrument that transforms plain Bible references on a webpage to hyperlinks (<a>).

When these hyperlinks are moused on or clicked, the Bible textual content turns into accessible through a versatile and extremely customizable popover.

The way it works 🔌

BibleUp searches via all textual content nodes within the DOM, shifting from one aspect to the following and reworking all legitimate references to hyperlinks. The popover which homes the textual content is constructed based mostly on the config choices and appended to doc.physique.

Beneath the hood, BibleUp makes use of an inside API to fetch the Bible textual content and they’re cached so subsequent requests are delivered quick.

Particular due to api.bible

How references are matched

All legitimate references cross via a two-step validation course of.

The primary is a regex take a look at. That is doable since all references have a standard construction (e-book chapter:verse–verseEnd).

// 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.take a look at('John 3:16') //returns true

Nevertheless, string that are not legitimate references like John 53:112 might match and this is the reason the following stage of verification entails using an object that shops the variety of chapters and verses in every e-book of the Bible.

/* variable 'bibleData' is an array of objects containing all 66 books
* the whole variety of verses in a chapter is listed within the 'chapters:[]' array
*/

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

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

These examples solely present a part of the codes the place the match is finished. Verify the complete code on Github.

You may take a look at the regex here on regExr

BibleUp is written in vanilla JavaScript with zero dependency and LESS CSS for styling. The final two variations of all trendy browsers are supported 😉

Code Playground

Options

There are fairly a number of superior instruments like BibleUp. One in all these is FaithLife Reftagger.

These instruments are nice of their core capabilities they usually combine effectively.

BibleUp nonetheless leverages on group growth, flexibility and excessive customisation choices.

BibleUp may be styled completely to suit completely with any web site or theme.

What’s subsequent 🌟

This instrument is at the moment in last beta, so there’s rather more to come back.

Prime of what is coming subsequent is making extra variations accessible (daunting permission/copyright course of however very doable).

Different are integration with WordPress (a plugin) and different environments (browser extensions) and extra performance like ‘learn aloud’ and share buttons.

Conclusion

BibleUp is open to contributions and have requests.

Take a look at the supply code on Github and assist contribute or kindly drop a overview

Go to the website or verify the docs for extra info.

Thanks!