Skip to content

Commit

Permalink
Merge branch 'main' into fix-events-via-url
Browse files Browse the repository at this point in the history
  • Loading branch information
vinnyjth authored Feb 16, 2024
2 parents b7199e5 + a104f6e commit dc42701
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 70 deletions.
100 changes: 55 additions & 45 deletions micro-service/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,17 @@ The JS file used to embed these widgets is hosted on GitHub and picked up by [js

That's it! Your updated version of the apollos-embeds will be available for use.

_⚠️ React needs to be imported in every file it is used, otherwise the js build file will error when you embed it in your website._
_⚠️ React needs to be imported in every file it is used, otherwise the js build file will error when you embed it in your website._

***
---

# Using Embeds in Webflow

## 1. Adding the Script Tags:

Copy the following script tags into your Webflow website. In your Dashboard, you should see the tab 'Custom Code'. Scroll to the bottom and paste the following script tags in the Footer Code block:
html

```
<link href="https://cdn.jsdelivr.net/npm/@apollosproject/[email protected]/widget/index.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@apollosproject/[email protected]/widget/index.js"></script>
Expand All @@ -45,6 +46,7 @@ Add the class `apollos-widget` to both of those divs. This is necessary for the
<img width="935" alt="image" src="https://user-images.githubusercontent.com/2528817/231847323-53430bca-f2fd-4d2c-b7ee-90948fb694b5.png">

## 4. Adding Custom Attributes:

To control which embed shows up in which div and what church content is displayed, we use 'data-attributes' or 'Custom attributes' in Webflow.

For the 'Auth' embed, add `data-type="Auth"` and `data-church=[INSERT_CHURCH_SLUG_HERE]` as custom attributes. Here's an example for Bayside:
Expand All @@ -63,51 +65,59 @@ For the 'FeatureFeed' embed, which displays the church's content, add `data-type

<img width="928" alt="image" src="https://user-images.githubusercontent.com/2528817/231847773-9698dc62-3ca8-4814-ad33-63204fb5f625.png">


_⚠️ Make sure to replace [INSERT_CHURCH_SLUG_HERE] with your church's unique identifier, or 'slug'._

### Options
### Enabling Caching for Local Frustration

For local development and testing purposes, you might want to enable caching to ensure you're not receiving the latest responses directly from the API. To do this, please refer to the Apollo client configuration file:

| data-type |
|----------------|
| Auth |
| FeatureFeed |

| data-church |
|---------------------------|
| apollos_demo |
| bayside |
| cedar_creek |
| celebration |
| chase_oaks |
| christ_fellowship |
| city_first |
| community_christian |
| crossings_community_church|
| crossroads_kids_club |
| crossroads_tv |
| default |
| eastview |
| eleven22 |
| fairhaven |
| fake |
| fake_dag_church |
| fellowship_greenville |
| fellowship_nwa |
| hope_in_real_life |
| king_of_kings |
| lcbc |
| liquid_church |
| newspring |
| oakcliff |
| real_life |
| river_valley |
| try_grace |
| willow_creek |
| woodmen |
| ymca_gc |


***
[../packages/web-shared/client/apollosApiLink.js](../packages/web-shared/client/apollosApiLink.js)

In this file, locate the header configuration within the `apollosApiLink` function and comment the following line:

```javascript
'x-cache-me-not': 1,
```

### Options

| data-type |
| ----------- |
| Auth |
| FeatureFeed |

| data-church |
| -------------------------- |
| apollos_demo |
| bayside |
| cedar_creek |
| celebration |
| chase_oaks |
| christ_fellowship |
| city_first |
| community_christian |
| crossings_community_church |
| crossroads_kids_club |
| crossroads_tv |
| default |
| eastview |
| eleven22 |
| fairhaven |
| fake |
| fake_dag_church |
| fellowship_greenville |
| fellowship_nwa |
| hope_in_real_life |
| king_of_kings |
| lcbc |
| liquid_church |
| newspring |
| oakcliff |
| real_life |
| river_valley |
| try_grace |
| willow_creek |
| woodmen |
| ymca_gc |

---
1 change: 1 addition & 0 deletions packages/web-shared/client/apollosApiLink.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const apollosApiLink = (church_slug) =>
headers: {
...headers,
'x-church': church_slug,
'x-cache-me-not': 1,
},
}));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,44 +21,48 @@ function ScriptureFeature(props = {}) {
};

function parseBibleReference(reference) {
// This regex handles cases like 'Genesis 1-3' and 'Genesis 1:1-3:24'
const regex = /^([\w\s]+)\s(\d+)(?::(\d+))?(?:-(\d+)(?::(\d+))?)?$/;
const regex = /^([\w\s]+)\s(\d+)(?::(\d+))?(?:-(\d+)?(?::(\d+))?)?$/;
const match = reference.match(regex);

if (!match) {
return null; // Invalid format
}

const [_, book, startChapter, startVerse, endChapter, endVerse] = match;
const [_, book, startChapter, startVerse = '', endChapterOrVerse, endVerse = ''] = match;

let title, verses;
let isRangeWithinSingleChapter = false;
let actualEndVerse = endVerse;

// Determine if it's a range within the same chapter
if (startChapter === endChapterOrVerse || (startVerse && endChapterOrVerse && !endVerse)) {
isRangeWithinSingleChapter = true;
// If endChapterOrVerse is not empty and endVerse is empty, it means endChapterOrVerse is actually the endVerse
actualEndVerse = endChapterOrVerse && !endVerse ? endChapterOrVerse : endVerse;
}

if (endChapter || endVerse) {
// Case for a range
if (endChapter && !endVerse) {
// Range of chapters, e.g., 'Genesis 1-3'
title = `${book} ${startChapter}-${endChapter}`;
verses = `Chapters ${startChapter}-${endChapter}`;
} else if (startChapter !== endChapter) {
// Range of chapters and verses, e.g., 'Genesis 1:1-3:24'
title = `${book} ${startChapter}:${startVerse}-${endChapter}:${endVerse}`;
verses = `Verses ${startChapter}:${startVerse}-${endChapter}:${endVerse}`;
} else {
// Range within a single chapter, e.g., 'Genesis 1:1-24'
title = `${book} ${startChapter}:${startVerse}-${endVerse}`;
verses = `Verses ${startChapter}:${startVerse}-${endVerse}`;
}
if (isRangeWithinSingleChapter) {
// Range within the same chapter
title = `${book} ${startChapter}:${startVerse}-${actualEndVerse}`;
verses = `Verses ${startChapter}:${startVerse}-${actualEndVerse}`;
} else if (startVerse && endVerse) {
// Range spans chapters and verses
title = `${book} ${startChapter}:${startVerse}-${endChapterOrVerse}:${endVerse}`;
verses = `Verses ${startChapter}:${startVerse}-${endChapterOrVerse}:${endVerse}`;
} else if (!startVerse && endChapterOrVerse) {
// Range spans entire chapters
title = `${book} ${startChapter}-${endChapterOrVerse}`;
verses = `Chapters ${startChapter}-${endChapterOrVerse}`;
} else {
// Single chapter and verse, e.g., 'Genesis 1:1'
title = `${book} ${startChapter}${startVerse ? `:${startVerse}` : ''}`;
// Single chapter or verse
title = `${book} ${startChapter}${startVerse ? ':' + startVerse : ''}`;
verses = startVerse ? `Verse ${startChapter}:${startVerse}` : `Chapter ${startChapter}`;
}

const result = {
return {
title,
verses,
};

return result;
}

const ScriptureItem = ({ scripture }) => {
Expand Down
12 changes: 12 additions & 0 deletions web-embeds/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,18 @@ For the 'FeatureFeed' embed, which displays the church's content, add `data-type

_⚠️ Make sure to replace [INSERT_CHURCH_SLUG_HERE] with your church's unique identifier, or 'slug'._

### Enabling Caching for Local Frustration

For local development and testing purposes, you might want to enable caching to ensure you're not receiving the latest responses directly from the API. To do this, please refer to the Apollo client configuration file:

[../packages/web-shared/client/apollosApiLink.js](../packages/web-shared/client/apollosApiLink.js)

In this file, locate the header configuration within the `apollosApiLink` function and comment the following line:

```javascript
'x-cache-me-not': 1,
```

### Options

| data-type |
Expand Down
2 changes: 1 addition & 1 deletion web-embeds/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@apollosproject/apollos-embeds",
"description": "Apollos React embed widgets",
"version": "0.1.36",
"version": "0.1.38",
"license": "MIT",
"eslintIgnore": [
"/node_modules",
Expand Down
2 changes: 1 addition & 1 deletion web-embeds/widget/index.js

Large diffs are not rendered by default.

0 comments on commit dc42701

Please sign in to comment.