feat: Create the Scripture Feature and render it on Content Items

[linb1]

🐛 Issue

Create the Scripture Feature and render it on Content Items

✏️ Solution

Pull scriptures into content item and render

NOTE: Currently animation for expanding and collasping is not great. This is because it needs a defined max-height to work best. I set it to 3000px, but this makes it looks clunky. Can look into better ways of doing this in the future, or we can decide to define a max height and let the user scroll.

🔬 To Test

1. Navigate to content item with scripture
2. Make sure it looks right, and works as expected

📸 Screenshots

https://github.com/ApollosProject/apollos-embeds/assets/68402088/195ace92-6aee-4f64-9e50-48fe1f73fff7

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
apollos-micro-service	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2024 7:45pm
apollos-web-embeds	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2024 7:45pm

[nlewis84]

@linb1 I'm not positive you will see this comment, but thanks for your work on this! I've made several tweaks along the lines that you suggested in your PR description, as well as a couple of small changes to the Scripture Feature itself. Here's what it looks like now:

https://github.com/ApollosProject/apollos-embeds/assets/72768221/75b9b7e2-d955-41f1-a437-eefd1a888092

[vinnyjth]

This is looking great!

@nlewis84 quick design feedback, can we double or triple the speed of the open/close?

[nlewis84]

This is looking great!

@nlewis84 quick design feedback, can we double or triple the speed of the open/close?

Yeah, definitely. What do you think about there not being scripture numbers on each scripture? We do a subscript scripture number on Mobile currently.

[vinnyjth]

Oh interesting @nlewis84 - I didn't even notice that. Maybe start without and let's see what client asks for it first?

[nlewis84]

Oh interesting @nlewis84 - I didn't even notice that. Maybe start without and let's see what client asks for it first?

I'm gonna do a little experiment here. We are using scripture.text for the actual Bible text, but there is also scripture.html that has all the necessary info for verses. I might be able to target accurately and get it working quick.

[nlewis84]

This gets us closer to parity with the mobile app.

[vinnyjth]

This gets us closer to parity with the mobile app.

that looks great to me