DOCSEARCHbyAlgolia
Submit Docs

BibleUp Documentation

website·Indexed 30 days ago

https://bibleup.netlify.app/docs

A configurable open-source web tool that transforms Bible references into interactive elements. It features a WordPress plugin, a Chromium-based browser extension, and integrates with Api.bible to fetch passages. The documentation covers installation via NPM, usage of the `create()` method, configuration options like `popup` and `darkTheme`, and custom styling for popups and links.

Tokens
9.8K
Snippets
62
Records
88
Agent score
73%

What's inside BibleUp

  1. Overview of BibleUp functionality

    BibleUp is a configurable web tool that scans the DOM of an HTML page (or specific sections) for text nodes that resemble standard Bible references using a custom regex. Once a reference is validated for correct chapter and verse ranges, BibleUp transforms the text into a hyperlink. When a user hovers over or clicks these links, BibleUp fetches the corresponding Bible text from an external API and displays it in a customizable popover, eliminating the need for users to switch tabs or apps to look up references.

  2. BibleUp browser extension compatibility and development

    The BibleUp browser extension is open-source and currently supports Chromium-based browsers (Chrome, Edge, Opera, Brave, Vivaldi). Support for Mozilla Firefox is planned for future releases. The source code is available on GitHub for contributions.
    GitHub Repository: https://github.com/bibleup/browser-extension

  3. Install BibleUp browser extension manually

    Since the extension may not always be available on the Chrome Web Store, you can install it manually in any Chromium-based browser (Chrome, Edge, Opera, Brave, etc.):

    1. Download the package ZIP from the official repository.
    2. Unzip the file into a local folder.
    3. Navigate to chrome://extensions/ in your browser.
    4. Enable 'Developer mode' (if required) and click the Load unpacked button.
    5. Select the folder where you unzipped the extension to complete the installation.
    # Download link for manual installation
https://github.com/bibleup/browser-extension/archive/refs/heads/main.zip

  4. Install BibleUp browser extension from Chrome Web Store

    To install BibleUp via the Chrome Web Store:

    1. Visit the extension page.
    2. Click Add to Chrome.
    3. Approve the requested permissions and click Add Extension.
    4. To keep the extension visible, click the puzzle icon (extensions menu) next to your profile avatar and click the pin button beside the BibleUp icon.

  5. Reference multiple verses and chapters in BibleUp

    BibleUp supports complex references involving multiple verses or chapters:

    • Multiple Verses in One Chapter: Separate verses or ranges with a comma. These are matched against the preceding chapter.
      • Single verses: book chapter:verse, verse2 (e.g., John 3:16, 19).
      • Multiple ranges: book chapter:verse-verse-end, verse2-verse-end2 (e.g., Matthew 7:7-8, 24-26).
    • Multiple Chapters: BibleUp can recognize references spanning different chapters. For example, Romans 3:5, 2:1-3, 6-8 is parsed as three distinct parts: Romans 3:5, Romans 2:1-3, and Romans 2:6-8.
    John 3:16, 19
Matthew 7:7-8, 24-26
Romans 3:5, 2:1-3, 6-8

  6. Initialize and activate BibleUp to transform Bible references

    To use BibleUp, create a new instance of the BibleUp class by providing a target HTML element and a configuration options object. After instantiation, call the create() method to scan the element for Bible references and transform them into interactive links that display text on hover or click.

    • element: The HTML element to search (e.g., document.body or a specific container).
    • options: A configuration object defining the Bible version, popup style, and theme.
    // 1. Define the target element and options
const element = document.body;
const options = {
  version: "KJV",
  popup: "classic",
  darkTheme: false
};

// 2. Create the instance
const bibleup = new BibleUp(element, options);

// 3. Activate the transformation
bibleup.create();

  7. Contribute to BibleUp as a reviewer

    Reviewers can support the project by testing BibleUp, reporting bugs or issues, and providing feature requests, suggestions, or comments through the community channels.

  8. Configure Api.bible API key for local BibleUp development

    BibleUp requires an API key from Api.bible to fetch Bible passages. Since the private key is not stored in the GitHub repository, you must manually create a configuration file in the helper directory to enable local functionality. Use the provided test API key for local development.
    # Navigate to the helper directory
cd {rootDir}/bibleup/js/helper
    // config.js
const apiKey = 'fdb2ae39e9ef1fd8da12e40281267b2e'
export default apiKey

  9. Promote BibleUp through blogging

    Bloggers can support BibleUp by mentioning their use of the tool for reference tagging in their blog posts or by creating a dedicated announcement post. Including a link to the BibleUp homepage is encouraged. To receive acknowledgement on the BibleUp website, bloggers should send a message via the contact page with their website address and the specific blog post link.

  10. Support BibleUp as an organization

    Organizations that use BibleUp and wish to support its development efforts should send a message to the BibleUp team detailing how they would like to provide support.

  11. Configure and test BibleUp styles and settings

    Developers can test BibleUp configurations and methods using the official code playground on StackBlitz. Additionally, the BibleUp Editor allows for real-time generation of popover styles and configuration, with the ability to export these styles for use in the WordPress plugin and browser extension.

  12. Configure and activate BibleUp extension

    To set up BibleUp on your current website:

    1. Click the extension icon to open the options page.
    2. Configure the appearance by selecting Set Style manually or by using Paste Config to import settings from the BibleUp Editor.
    3. Click the save button.
    4. Click the Activate BibleUp button and reload the current webpage to apply the changes. Once activated, BibleUp remains active as you navigate to different webpages.