Loading Bible Verses Lite (ESV)

[jonathanvoelkle]

✂️ Copy of your #42SmartBlock from Roam

• ESV Embed #42SmartBlock
  • :hiccup [span.bible-embed-esv "<%INPUT:bible verse, e.g. John 11:35-37%>"]

📋 Describe the SmartBlock

Loads bible verses directly into roam, using the esv translation (https://api.esv.org, thanks @MehsEzeerf)

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

This first of all requires an API key from https://api.esv.org.

1. Sign up using the link above (upper right corner)
2. Create an api key, looks something like: 1235************************************
3. Paste the following code in a new {{[[roam/js]]}} block, and replace the API key with your own.

window.esv_token = "1235****"

const esv_storage_prefix = "bible" const esv_base_url = 'https://api.esv.org/v3/passage/html/?q='

async function esv_get_bible_verse_async(query) { let local_query = localStorage.getItem(${esv_storage_prefix}_${query}) if(local_query) { const local_json = JSON.parse(local_query) console.log("local", local_json) return local_json } else { let heads = new Headers(); heads.append("Authorization", Token ${window.esv_token});

const requestOpts = {
  method: 'GET',
  headers: heads,
  redirect: 'follow'
};

const res = await fetch(`${esv_base_url}${query}`, requestOpts)
if(res.ok) {
  const res_json = await res.json();  
  localStorage.setItem(`${esv_storage_prefix}_${query}`, 
                       JSON.stringify(res_json));
  console.log("fetched", res_json)
  return res_json
} else {
  // TODO
  console.log(res)
}

} }

window.esv_get_bible_verse_async = esv_get_bible_verse_async

const esv_embed_class = 'bible-embed-esv'

async function esv_transform_bible_block(block) { if (!window.esv_token) { block.innerHTML = "no esv.org token" return }

const query = block.innerText; console.log(query)

// remove trigger class such that it is not queried again block.classList.toggle(esv_embed_class);

const bible_resp = await esv_get_bible_verse_async(query)

console.log(bible_resp)

if(bible_resp) { block.innerHTML = bible_resp.passages.join("...") block.classList.toggle("bible-esv"); } else { block.classList.toggle("bible-error"); } console.log("hello", bible_resp) }

function esv_transform_bible(){ let bible_embed = document.getElementsByClassName(esv_embed_class); for(let block of bible_embed) { console.log("block", block) esv_transform_bible_block(block) } }

// setup setTimeout(esv_transform_bible, 200); const esv_checker = setInterval(esv_transform_bible, 1000);

setTimeout(function() { // clearInterval(esv_checker); }, 12000)

4. Click `Yes, I know what I'm doing`
5. Now you can start embedding bible verses, using hiccup, like this `:hiccup [span.bible-embed-esv "John 11:35-37"] ` 
but the smartblock above makes it a lot easier.

## 📷 Screenshot of your #42SmartBlock workflow/template from Roam
<!-- To ensure other users setup correctly, please provide a screenshot of your #42SmartBlock in Roam -->

![Screenshot_2021-01-05 Roam Research – A note taking tool for networked thought ](https://user-images.githubusercontent.com/32798183/103670691-2c229380-4f7a-11eb-954c-cc918be031a4.png)

## 💡 Additional Info
<!-- Add any other context, info, or screenshots/GIFs to help other users with this SmartBlock -->

https://www.loom.com/share/920c775b911f40debd141eacaee5bea0

[jonathanvoelkle]

https://user-images.githubusercontent.com/32798183/103673037-5fb2ed00-4f7d-11eb-97a4-6a60038e3ec5.mp4

[jonathanvoelkle]

Some css to get you started

.bible {
  white-space: initial;
}

.bible h2.extra_text {
  font-size: initial;
}

.bible .verse-num {
  font-size: x-small;
  vertical-align: super;
  line-height: 0;
  font-weight: initial;
}

[PJJPtx]

I there a way I can get it to format with font sizes that match my Roam? The verse headings are very intrusive...

[jonathanvoelkle]

The comment above contains some css (which decreases the font-size of the heading). You can create a page called roam/css and place the code above in a css code block. This will change the styling. You can also set the font-size of the heading manually like

.bible h2.extra_text {
  font-size: 12px;
}

Everything that is added is contained in a span with the class bible. Here is a tutorial on how to use custom css: https://nesslabs.com/roam-research-themes-custom-styling-css If you need more help, you can also contact me on twitter

[daveplummermd1]

Well done! Thanks for your work on this.