@apollosproject/canvas-embeds 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +173 -0
- package/package.json +202 -0
- package/widget/index.css +1 -0
- package/widget/index.js +1760 -0
package/README.md
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
# Apollos Embeds
|
|
2
|
+
|
|
3
|
+
Apollos React Embeds are pre-built, reusable components designed to integrate seamlessly into third-party websites such as Webflow. These widgets provide functionality for authentication, content feeds, and search features, creating a unified and engaging user experience across platforms.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Getting Started with Apollos Embeds
|
|
8
|
+
|
|
9
|
+
### 1. Adding Script Tags to Your Website
|
|
10
|
+
|
|
11
|
+
To enable the Apollos Embeds, include the following scripts and stylesheets in your website's code. For Webflow users, add them to the **Custom Code** section under **Footer Code**:
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<link
|
|
15
|
+
rel="stylesheet"
|
|
16
|
+
href="https://cdn.jsdelivr.net/npm/apollos-web-embeds@latest/widget/index.css?v=1734651805265"
|
|
17
|
+
/>
|
|
18
|
+
<script
|
|
19
|
+
defer
|
|
20
|
+
src="https://cdn.jsdelivr.net/npm/apollos-web-embeds@latest/widget/index.js?v=1734651805265"
|
|
21
|
+
></script>
|
|
22
|
+
<script>
|
|
23
|
+
window.process = { env: { NODE_ENV: "production" } };
|
|
24
|
+
</script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 2. Adding the Embed Divs
|
|
28
|
+
|
|
29
|
+
Navigate to the design section of your Webflow site and add a `div` element for each embed you plan to use. Currently supported embeds include:
|
|
30
|
+
|
|
31
|
+
- **Auth**: Handles user authentication.
|
|
32
|
+
- **FeatureFeed**: Displays curated content feeds.
|
|
33
|
+
- **Search**: Enables search functionality with optional profile modal customization.
|
|
34
|
+
|
|
35
|
+
Each `div` should include the `apollos-widget` class to activate the embed functionality.
|
|
36
|
+
|
|
37
|
+
Example:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<div class="apollos-widget" data-type="Auth" data-church="example_church"></div>
|
|
41
|
+
<div
|
|
42
|
+
class="apollos-widget"
|
|
43
|
+
data-type="FeatureFeed"
|
|
44
|
+
data-church="example_church"
|
|
45
|
+
></div>
|
|
46
|
+
<div
|
|
47
|
+
class="apollos-widget"
|
|
48
|
+
data-type="Search"
|
|
49
|
+
data-hide-apollos-auth="true"
|
|
50
|
+
data-church="example_church"
|
|
51
|
+
data-search-profile-size="365px"
|
|
52
|
+
></div>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
### 3. Customizing Embeds with Attributes
|
|
60
|
+
|
|
61
|
+
Use `data-attributes` (or **Custom Attributes** in Webflow) to customize the behavior and appearance of each embed.
|
|
62
|
+
|
|
63
|
+
| **Attribute** | **Description** |
|
|
64
|
+
| -------------------------- | -------------------------------------------------------------- |
|
|
65
|
+
| `data-type` | Specifies the type of embed (`Auth`, `FeatureFeed`, `Search`). |
|
|
66
|
+
| `data-church` | Sets the church slug (e.g., `bayside`). |
|
|
67
|
+
| `data-search-profile-size` | (Optional) Customizes the width of the search profile modal. |
|
|
68
|
+
| `data-feature-feed` | (FeatureFeed) Displays content for a specific feed. |
|
|
69
|
+
| `data-modal` | (Optional) Enables modal presentation for embeds. |
|
|
70
|
+
| `data-hide-apollos-auth` | (Optional) Hides the Apollos Auth Profile functionality |
|
|
71
|
+
|
|
72
|
+
Example for a FeatureFeed embed:
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<div
|
|
76
|
+
class="apollos-widget"
|
|
77
|
+
data-type="FeatureFeed"
|
|
78
|
+
data-church="example_church"
|
|
79
|
+
data-feature-feed="FeatureFeed:unique-id"
|
|
80
|
+
data-modal="true"
|
|
81
|
+
></div>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
### 4. Understanding Church Slugs
|
|
91
|
+
|
|
92
|
+
Church slugs uniquely identify the organization whose content is displayed. If you’re unsure of your slug, contact a developer or administrator.
|
|
93
|
+
|
|
94
|
+
> [!NOTE]
|
|
95
|
+
> Replace `[INSERT_CHURCH_SLUG_HERE]` with your church's unique identifier (or **slug**). Contact a developer if you need assistance obtaining a church slug.
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## For Developers
|
|
100
|
+
|
|
101
|
+
### Background
|
|
102
|
+
|
|
103
|
+
This package was originally part of the [`apollos-embeds`](https://github.com/ApollosProject/apollos-embeds) repository and involved significant duplication of frontend code, components, and GraphQL queries. To unify our web frontend development, we created `canvas-ui-web` as a [component library](https://github.com/ApollosProject/apollos-admin/blob/dc2bb76699dcef8a6cdc67922f63c0b9eb08e594/packages/canvas-ui-web). The `apollos-embeds` project has been moved into this repository to coexist with our other web platforms.
|
|
104
|
+
|
|
105
|
+
The original version of `web-embeds` was heavily dependent on modal presentation. This new package retains selective use of modals while encouraging users to navigate to Apollos microsites, which run on [New Web](https://github.com/ApollosProject/apollos-admin/blob/dc2bb76699dcef8a6cdc67922f63c0b9eb08e594/apps/web).
|
|
106
|
+
|
|
107
|
+
### How It Works
|
|
108
|
+
|
|
109
|
+
Embeds are bundled as `index.js` and `index.css` in the `/widget` folder and distributed via jsDelivr. By including these on the webpage, users can access these embeds. Placing an `apollos-widget` div on the page triggers the web embed functionality.
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
### Local Development
|
|
114
|
+
|
|
115
|
+
To work on this package locally, ensure you have a valid **Feature Feed ID**. Use `index.html` for testing with examples. Keep in mind that embeds from different churches on the same page may cause conflicts, so ensure you only use one church per page. You should be running `apollos-cluster` as well as this entire repo by running `yarn dev`.
|
|
116
|
+
|
|
117
|
+
#### Testing Embeds Locally
|
|
118
|
+
|
|
119
|
+
Use the `index.html` file for testing. Open `http://localhost:5174` in your browser to view changes.
|
|
120
|
+
|
|
121
|
+
Example embed for testing:
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<div
|
|
125
|
+
data-type="FeatureFeed"
|
|
126
|
+
data-church="apollos_demo"
|
|
127
|
+
data-feature-feed="FeatureFeed:caf294f0-cd0e-4486-95e7-fa11bd5fb1c5"
|
|
128
|
+
data-modal="true"
|
|
129
|
+
class="apollos-widget"
|
|
130
|
+
></div>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
To test changes, open `http://localhost:5174` in your browser.
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
### Caching
|
|
138
|
+
|
|
139
|
+
To test caching in local development, modify the Apollo client configuration by commenting out the `x-cache-me-not` header in:
|
|
140
|
+
|
|
141
|
+
[src/client/apollosApiLink.js](src/client/apollosApiLink.js)
|
|
142
|
+
|
|
143
|
+
```javascript
|
|
144
|
+
'x-cache-me-not': 1,
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### jsDelivr Cache Busting
|
|
148
|
+
|
|
149
|
+
If you need to force jsDelivr to fetch the latest version of a file, you can manually purge the cache by accessing the purge subdomain of the file's URL. This command clears the cached version of the file from jsDelivr's CDN.
|
|
150
|
+
|
|
151
|
+
```bash
|
|
152
|
+
yarn flush
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
### Advanced Configuration
|
|
158
|
+
|
|
159
|
+
#### Supported Embeds and Attributes
|
|
160
|
+
|
|
161
|
+
| **Embed Type** | **Key Attributes** |
|
|
162
|
+
| -------------- | ----------------------------------------- |
|
|
163
|
+
| `Auth` | `data-church` |
|
|
164
|
+
| `FeatureFeed` | `data-church`, `data-feature-feed` |
|
|
165
|
+
| `Search` | `data-church`, `data-search-profile-size` |
|
|
166
|
+
| | `data-hide-apollos-auth` |
|
|
167
|
+
|
|
168
|
+
#### Path Routing
|
|
169
|
+
|
|
170
|
+
For advanced routing options, use:
|
|
171
|
+
|
|
172
|
+
- `data-use-path-router="true"` for enabling path-based routing.
|
|
173
|
+
- `data-apollos-id-param="true"` for custom ID handling.
|
package/package.json
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@apollosproject/canvas-embeds",
|
|
3
|
+
"description": "Apollos React embed widgets",
|
|
4
|
+
"version": "2.1.1",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"eslintIgnore": [
|
|
7
|
+
"/node_modules",
|
|
8
|
+
"/build"
|
|
9
|
+
],
|
|
10
|
+
"main": "./dist/index.umd.js",
|
|
11
|
+
"module": "./dist/index.es.js",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/index.es.js",
|
|
15
|
+
"require": "./dist/index.umd.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"widget/index.js",
|
|
20
|
+
"widget/index.css"
|
|
21
|
+
],
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"@algolia/autocomplete-js": "^1.9.2",
|
|
24
|
+
"@algolia/autocomplete-plugin-query-suggestions": "^1.9.2",
|
|
25
|
+
"@algolia/autocomplete-plugin-recent-searches": "^1.9.2",
|
|
26
|
+
"@algolia/autocomplete-preset-algolia": "^1.9.2",
|
|
27
|
+
"@algolia/autocomplete-theme-classic": "^1.9.2",
|
|
28
|
+
"@apollo/client": "^3.7.4",
|
|
29
|
+
"@apollosproject/canvas-ui-web": "workspace:^",
|
|
30
|
+
"@phosphor-icons/react": "2.0.15",
|
|
31
|
+
"@segment/analytics-next": "^1.62.0",
|
|
32
|
+
"@sentry/react": "^7.40.0",
|
|
33
|
+
"@styled-system/theme-get": "^5.1.2",
|
|
34
|
+
"algoliasearch": "^4.17.0",
|
|
35
|
+
"amplitude-js": "^8.21.9",
|
|
36
|
+
"apollo-upload-client": "^17.0.0",
|
|
37
|
+
"apollo3-cache-persist": "^0.14.1",
|
|
38
|
+
"base-64": "^1.0.0",
|
|
39
|
+
"camelcase": "^6.2.1",
|
|
40
|
+
"color": "^4.2.3",
|
|
41
|
+
"date-fns": "^2.29.3",
|
|
42
|
+
"dompurify": "^2.4.3",
|
|
43
|
+
"graphql": "^16.6.0",
|
|
44
|
+
"lodash": "^4.17.21",
|
|
45
|
+
"moment": "^2.29.1",
|
|
46
|
+
"prop-types": "^15.8.1",
|
|
47
|
+
"react": "^18.2.0",
|
|
48
|
+
"react-dom": "^18.2.0",
|
|
49
|
+
"react-image-crop": "^10.0.11",
|
|
50
|
+
"react-instantsearch-dom": "^6.40.0",
|
|
51
|
+
"react-instantsearch-hooks-web": "^6.44.0",
|
|
52
|
+
"react-multi-carousel": "^2.8.2",
|
|
53
|
+
"react-player": "^2.11.2",
|
|
54
|
+
"react-router-dom": "^6.7.0",
|
|
55
|
+
"react-transition-group": "4.4.5",
|
|
56
|
+
"resolve": "^1.20.0",
|
|
57
|
+
"semver": "^7.3.5",
|
|
58
|
+
"styled-components": "^5.3.6",
|
|
59
|
+
"styled-system": "^5.1.5",
|
|
60
|
+
"tailwindcss": "^3.0.2",
|
|
61
|
+
"tldts": "^6.0.20",
|
|
62
|
+
"uuid": "^9.0.0",
|
|
63
|
+
"web-vitals": "^0.2.4"
|
|
64
|
+
},
|
|
65
|
+
"scripts": {
|
|
66
|
+
"build": "vite build && node scripts/build.js",
|
|
67
|
+
"bump": "yarn build && ./scripts/bump.sh",
|
|
68
|
+
"bump:minor": "yarn build && ./scripts/bump.sh minor",
|
|
69
|
+
"bump:major": "yarn build && ./scripts/bump.sh major",
|
|
70
|
+
"dev": "vite",
|
|
71
|
+
"flush": "sh scripts/flush-cdn-cache.sh",
|
|
72
|
+
"format": "prettier --write .",
|
|
73
|
+
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
|
|
74
|
+
"test": "jest"
|
|
75
|
+
},
|
|
76
|
+
"eslintConfig": {
|
|
77
|
+
"extends": [
|
|
78
|
+
"react-app",
|
|
79
|
+
"react-app/jest"
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
"browserslist": {
|
|
83
|
+
"production": [
|
|
84
|
+
">0.2%",
|
|
85
|
+
"not dead",
|
|
86
|
+
"not op_mini all"
|
|
87
|
+
],
|
|
88
|
+
"development": [
|
|
89
|
+
"last 1 chrome version",
|
|
90
|
+
"last 1 firefox version",
|
|
91
|
+
"last 1 safari version"
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
"devDependencies": {
|
|
95
|
+
"@babel/core": "^7.26.0",
|
|
96
|
+
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
97
|
+
"@babel/preset-react": "^7.25.7",
|
|
98
|
+
"@babel/preset-typescript": "^7.25.7",
|
|
99
|
+
"@babel/runtime": "^7.22.5",
|
|
100
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
101
|
+
"@testing-library/react": "^16.0.1",
|
|
102
|
+
"@testing-library/user-event": "^14.5.2",
|
|
103
|
+
"@vitejs/plugin-react": "^4.3.3",
|
|
104
|
+
"autoprefixer": "^10.4.20",
|
|
105
|
+
"babel-jest": "^29.7.0",
|
|
106
|
+
"babel-plugin-module-resolver": "^5.0.0",
|
|
107
|
+
"babel-plugin-named-asset-import": "^0.3.8",
|
|
108
|
+
"babel-plugin-styled-components": "^2.1.4",
|
|
109
|
+
"babel-preset-react-app": "^10.0.1",
|
|
110
|
+
"bfj": "^9.1.1",
|
|
111
|
+
"browserslist": "^4.24.2",
|
|
112
|
+
"cross-env": "^7.0.3",
|
|
113
|
+
"dotenv": "^16.4.5",
|
|
114
|
+
"dotenv-expand": "^12.0.1",
|
|
115
|
+
"eslint": "^8.57.0",
|
|
116
|
+
"eslint-config-prettier": "^8.8.0",
|
|
117
|
+
"eslint-config-react-app": "^7.0.1",
|
|
118
|
+
"eslint-plugin-prettier": "^5.2.1",
|
|
119
|
+
"eslint-plugin-simple-import-sort": "^10.0.0",
|
|
120
|
+
"fs-extra": "^11.2.0",
|
|
121
|
+
"identity-obj-proxy": "^3.0.0",
|
|
122
|
+
"jest": "^29.7.0",
|
|
123
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
124
|
+
"jest-resolve": "^29.7.0",
|
|
125
|
+
"jest-transform-stub": "^2.0.0",
|
|
126
|
+
"jest-watch-typeahead": "^2.2.2",
|
|
127
|
+
"postcss": "^8.4.47",
|
|
128
|
+
"postcss-flexbugs-fixes": "^5.0.2",
|
|
129
|
+
"postcss-loader": "^8.1.1",
|
|
130
|
+
"postcss-normalize": "^13.0.1",
|
|
131
|
+
"postcss-preset-env": "^10.1.1",
|
|
132
|
+
"prettier": "^3.0.0",
|
|
133
|
+
"prompts": "^2.4.2",
|
|
134
|
+
"react-app-polyfill": "^3.0.0",
|
|
135
|
+
"react-dev-utils": "^12.0.1",
|
|
136
|
+
"react-refresh": "^0.14.2",
|
|
137
|
+
"resolve-url-loader": "^5.0.0",
|
|
138
|
+
"sass-loader": "^16.0.3",
|
|
139
|
+
"ts-loader": "^9.5.1",
|
|
140
|
+
"vite": "^5.4.11"
|
|
141
|
+
},
|
|
142
|
+
"targets": {
|
|
143
|
+
"global": {
|
|
144
|
+
"context": "browser"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"jest": {
|
|
148
|
+
"roots": [
|
|
149
|
+
"<rootDir>/src"
|
|
150
|
+
],
|
|
151
|
+
"collectCoverageFrom": [
|
|
152
|
+
"src/**/*.{js,jsx,ts,tsx}",
|
|
153
|
+
"!src/**/*.d.ts"
|
|
154
|
+
],
|
|
155
|
+
"setupFiles": [
|
|
156
|
+
"react-app-polyfill/jsdom"
|
|
157
|
+
],
|
|
158
|
+
"setupFilesAfterEnv": [
|
|
159
|
+
"<rootDir>/src/setupTests.js"
|
|
160
|
+
],
|
|
161
|
+
"testMatch": [
|
|
162
|
+
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
|
|
163
|
+
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
|
|
164
|
+
],
|
|
165
|
+
"testEnvironment": "jsdom",
|
|
166
|
+
"transform": {
|
|
167
|
+
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "babel-jest",
|
|
168
|
+
"^.+\\.css$": "jest-transform-stub",
|
|
169
|
+
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-transform-stub"
|
|
170
|
+
},
|
|
171
|
+
"transformIgnorePatterns": [
|
|
172
|
+
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
|
|
173
|
+
"^.+\\.module\\.(css|sass|scss)$"
|
|
174
|
+
],
|
|
175
|
+
"moduleNameMapper": {
|
|
176
|
+
"^react-native$": "react-native-web",
|
|
177
|
+
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
|
|
178
|
+
},
|
|
179
|
+
"moduleFileExtensions": [
|
|
180
|
+
"web.js",
|
|
181
|
+
"js",
|
|
182
|
+
"web.ts",
|
|
183
|
+
"ts",
|
|
184
|
+
"web.tsx",
|
|
185
|
+
"tsx",
|
|
186
|
+
"json",
|
|
187
|
+
"web.jsx",
|
|
188
|
+
"jsx",
|
|
189
|
+
"node"
|
|
190
|
+
],
|
|
191
|
+
"watchPlugins": [
|
|
192
|
+
"jest-watch-typeahead/filename",
|
|
193
|
+
"jest-watch-typeahead/testname"
|
|
194
|
+
],
|
|
195
|
+
"resetMocks": true
|
|
196
|
+
},
|
|
197
|
+
"babel": {
|
|
198
|
+
"presets": [
|
|
199
|
+
"react-app"
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
}
|