@behold/widget 0.1.96 → 0.1.98
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/demo/favicon.svg +11 -0
- package/dist/demo/index.html +165 -0
- package/package.json +1 -1
- package/readme.md +30 -30
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
|
|
5
|
+
<path fill="#3CA566" d="M12.5,6.8c0.8,0,1.8,0.1,2.8,0.3c1.3,0.3,2.4,1.3,2.6,2.6c0.2,1,0.3,1.9,0.3,2.8c0,0.9-0.1,1.9-0.3,2.9
|
|
6
|
+
c-0.3,1.3-1.3,2.3-2.6,2.6c-1,0.2-2,0.4-2.8,0.4c-0.9,0-1.9-0.1-3-0.4c-1.1-0.3-2-1.2-2.3-2.3c-0.3-1.1-0.4-2.1-0.4-3
|
|
7
|
+
c0-0.8,0.1-1.8,0.3-2.8c0.3-1.3,1.3-2.4,2.6-2.6C10.7,6.9,11.7,6.8,12.5,6.8 M12.5,0.5c-1.4,0-2.8,0.2-4,0.5C4.7,1.7,1.8,4.6,1,8.4
|
|
8
|
+
c-0.3,1.3-0.5,2.7-0.5,4.1c0,1.6,0.2,3.1,0.6,4.5c0.8,3.4,3.5,6.1,6.9,7c1.4,0.3,2.9,0.6,4.5,0.6c1.5,0,2.9-0.2,4.2-0.5
|
|
9
|
+
c3.7-0.8,6.5-3.7,7.3-7.4c0.3-1.3,0.5-2.7,0.5-4.2c0-1.4-0.2-2.8-0.4-4c-0.8-3.8-3.7-6.6-7.5-7.4C15.3,0.7,13.9,0.5,12.5,0.5
|
|
10
|
+
L12.5,0.5z"/>
|
|
11
|
+
</svg>
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width" />
|
|
6
|
+
<link rel="shortcut icon" href="favicon.svg" type="image/svg" />
|
|
7
|
+
<title>Widget Tester</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<div class="widgets">
|
|
12
|
+
<behold-widget
|
|
13
|
+
feed-id="Rw0EfjZRnj6IrmkY7HtP_"
|
|
14
|
+
onload="console.log('loaded!')"
|
|
15
|
+
></behold-widget>
|
|
16
|
+
<!-- <behold-widget
|
|
17
|
+
no-feed-id="rj4DtEWRJz7V6j82l6HX"
|
|
18
|
+
class="loader"
|
|
19
|
+
></behold-widget> -->
|
|
20
|
+
</div>
|
|
21
|
+
<div class="controls">
|
|
22
|
+
<textarea cols="30" rows="50">
|
|
23
|
+
{
|
|
24
|
+
"widgetSettings": {
|
|
25
|
+
"maxPosts": 12,
|
|
26
|
+
"hoverOverlayOpacity": 65,
|
|
27
|
+
"linkTarget": "_blank",
|
|
28
|
+
"hoverOverlayColor": "default",
|
|
29
|
+
"previewVideosOnHover": true,
|
|
30
|
+
"styled": true,
|
|
31
|
+
"type": "classic",
|
|
32
|
+
"loadingColorTone": "225,73,57",
|
|
33
|
+
"captions": false,
|
|
34
|
+
"onHover": "showIcon",
|
|
35
|
+
"customLinkURL": "",
|
|
36
|
+
"onPostClick": "openPopupGallery",
|
|
37
|
+
"popupColorTheme": "auto",
|
|
38
|
+
"hoverOverlayCustomColor": "0,0,0",
|
|
39
|
+
"constrainWidth": true,
|
|
40
|
+
"hoverEffect": "zoomFade",
|
|
41
|
+
"breakpoints": {
|
|
42
|
+
"default": {
|
|
43
|
+
"borderRadius": 50,
|
|
44
|
+
"gap": { "x": 20, "y": 20 },
|
|
45
|
+
"numColumns": 2
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"alignment": "center",
|
|
49
|
+
"loadingColor": "dominant",
|
|
50
|
+
"maxWidth": 650
|
|
51
|
+
},
|
|
52
|
+
"username": "behold.examples",
|
|
53
|
+
"profilePictureUrl": "https://scontent-ord5-1.xx.fbcdn.net/v/t51.2885-15/317712680_828706638419620_2580254017403297360_n.jpg?_nc_cat=101&ccb=1-7&_nc_sid=7d201b&_nc_ohc=jJMXVcewBbcAX9HkSSO&_nc_ht=scontent-ord5-1.xx&edm=AL-3X8kEAAAA&oh=00_AfDpo8R7v5IM0Nbat2Yz961c_z_6yRIZNQxluLA7jGPByw&oe=65A553FC",
|
|
54
|
+
"website": "https://behold.so/",
|
|
55
|
+
"followersCount": 16
|
|
56
|
+
}
|
|
57
|
+
</textarea
|
|
58
|
+
>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<script type="module">
|
|
63
|
+
import { widget as beholdWidget } from '../index.js'
|
|
64
|
+
|
|
65
|
+
const containerEl = document.querySelector('.container')
|
|
66
|
+
const widgetEl = document.querySelector('behold-widget')
|
|
67
|
+
beholdWidget.register()
|
|
68
|
+
// let loadedData = {}
|
|
69
|
+
|
|
70
|
+
// const settingsEl = document.querySelector('textarea')
|
|
71
|
+
|
|
72
|
+
// settingsEl.addEventListener('change', (evt) => {
|
|
73
|
+
// const data = JSON.parse(evt.target.value)
|
|
74
|
+
// widgetEl.widgetSettings = data.widgetSettings
|
|
75
|
+
// })
|
|
76
|
+
|
|
77
|
+
// const rawRes = await fetch(`https://feeds.behold.so/Her400bHZvRUUWMfwuCL`)
|
|
78
|
+
// const feedJson = await rawRes.json()
|
|
79
|
+
// const data = feedJson
|
|
80
|
+
|
|
81
|
+
// widgetEl.widgetSettings = data.widgetSettings
|
|
82
|
+
// widgetEl.feedMetadata = {
|
|
83
|
+
// username: data.username,
|
|
84
|
+
// profilePictureUrl: data.profilePictureUrl,
|
|
85
|
+
// website: data.website,
|
|
86
|
+
// followersCount: data.followersCount,
|
|
87
|
+
// hashtags: data.hashtags,
|
|
88
|
+
// }
|
|
89
|
+
|
|
90
|
+
// widgetEl.posts = data.media
|
|
91
|
+
|
|
92
|
+
// widgetEl.posts = data.media.map((p) => {
|
|
93
|
+
// return {
|
|
94
|
+
// ...p,
|
|
95
|
+
// sizes: {
|
|
96
|
+
// small: {
|
|
97
|
+
// mediaUrl:
|
|
98
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
99
|
+
// width: null,
|
|
100
|
+
// height: null,
|
|
101
|
+
// },
|
|
102
|
+
// large: {
|
|
103
|
+
// mediaUrl:
|
|
104
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
105
|
+
// width: null,
|
|
106
|
+
// height: null,
|
|
107
|
+
// },
|
|
108
|
+
// medium: {
|
|
109
|
+
// mediaUrl:
|
|
110
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
111
|
+
// width: null,
|
|
112
|
+
// height: null,
|
|
113
|
+
// },
|
|
114
|
+
// full: {
|
|
115
|
+
// mediaUrl:
|
|
116
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
117
|
+
// width: null,
|
|
118
|
+
// height: null,
|
|
119
|
+
// },
|
|
120
|
+
// },
|
|
121
|
+
// colorPalette: {
|
|
122
|
+
// vibrant: '163,176,78',
|
|
123
|
+
// dominant: '142,139,89',
|
|
124
|
+
// mutedLight: '200,204,163',
|
|
125
|
+
// vibrantLight: '221,178,140',
|
|
126
|
+
// mutedDark: '88,69,47',
|
|
127
|
+
// vibrantDark: '106,121,36',
|
|
128
|
+
// muted: '166,134,94',
|
|
129
|
+
// },
|
|
130
|
+
// }
|
|
131
|
+
// })
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<style>
|
|
135
|
+
html {
|
|
136
|
+
padding: 2em;
|
|
137
|
+
}
|
|
138
|
+
.container {
|
|
139
|
+
min-height: 101vh;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.controls {
|
|
143
|
+
flex-direction: column;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
width: 400px;
|
|
146
|
+
gap: 30px;
|
|
147
|
+
padding: 30px;
|
|
148
|
+
background-color: #fff;
|
|
149
|
+
flex-grow: 0;
|
|
150
|
+
flex-shrink: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
label {
|
|
154
|
+
display: flex;
|
|
155
|
+
gap: 10px;
|
|
156
|
+
align-items: center;
|
|
157
|
+
font-family: monospace;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.widgets {
|
|
161
|
+
flex-grow: 1;
|
|
162
|
+
}
|
|
163
|
+
</style>
|
|
164
|
+
</body>
|
|
165
|
+
</html>
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,52 +1,45 @@
|
|
|
1
|
-
# Official Behold Widget
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<picture>
|
|
6
|
-
<source media="(prefers-color-scheme: dark)" srcset="./readme-images/thumbnail-dark.png">
|
|
7
|
-
<source media="(prefers-color-scheme: light)" srcset="./readme-images/thumbnail-light.png">
|
|
8
|
-
<img src="thumbnail-dark.png" alt="Behold"
|
|
9
|
-
width="100%"
|
|
10
|
-
height="auto">
|
|
11
|
-
</picture>
|
|
12
|
-
</a>
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
## About
|
|
1
|
+
# Official Behold Widget Web Component
|
|
2
|
+
|
|
3
|
+
[](https://behold.so)
|
|
4
|
+
|
|
16
5
|
|
|
17
6
|
This is the official Behold widget JS package. It is built using [web components](https://www.webcomponents.org/introduction), which delivers a few benefits:
|
|
18
7
|
|
|
19
8
|
1. It can be used with any JS framework (React, Svelte, Vue, Angular, Solid... you name it), or just dropped into an HTML document.
|
|
20
9
|
2. It uses no framework and requires no external packages, so it's very lightweight, and won't cause dependency bloat.
|
|
21
|
-
3. It uses the Shadow DOM, which provides style encapsulation.
|
|
10
|
+
3. It uses the Shadow DOM, which provides style encapsulation.
|
|
22
11
|
|
|
23
12
|
## Documentation
|
|
24
13
|
|
|
25
|
-
[https://behold.so/](https://behold.so/)
|
|
14
|
+
[https://behold.so/docs/widget/](https://behold.so/docs/widget/)
|
|
26
15
|
|
|
27
16
|
## Installation
|
|
28
17
|
|
|
29
|
-
|
|
18
|
+
We have official wrapper components for a number of frameworks. Links below:
|
|
19
|
+
|
|
20
|
+
[](https://www.npmjs.com/package/@behold/react)
|
|
21
|
+
[](https://www.npmjs.com/package/@behold/preact)
|
|
22
|
+
[](https://www.npmjs.com/package/@behold/svelte)
|
|
23
|
+
[](https://www.npmjs.com/package/@behold/vue)
|
|
24
|
+
[](https://www.npmjs.com/package/@behold/angular)
|
|
25
|
+
|
|
26
|
+
<small>_Want us to add a framework to this list? Let us know what we should build next: support@behold.so_</small>
|
|
30
27
|
|
|
31
|
-
|
|
28
|
+
For other environments, or if you just want to use the web component directly, the recommended method is including the embed script directly in your HTML, loaded from our CDN: `<script src="https://w.behold.so/widget.js" type="module"></script>`. In a traditional single page application, for example, you would add this script tag to your `index.html` file.
|
|
29
|
+
|
|
30
|
+
The reason we suggest this method over installing the NPM package is that it means your widget will always be up to date. Whenever we publish a bugfix or improvement your users will automatically benefit without any action on your part, and you have one less dependency to worry about.
|
|
32
31
|
|
|
33
32
|
There may be some cases where you will want to import this package directly. To do this, you will begin by installing the package with your favorite package manager:
|
|
34
33
|
|
|
35
34
|
**NPM**
|
|
36
35
|
|
|
37
|
-
```
|
|
36
|
+
```js
|
|
38
37
|
npm install @behold/widget
|
|
39
|
-
```
|
|
40
38
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
```jsx
|
|
39
|
+
// or
|
|
44
40
|
pnpm add @behold/widget
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
**Yarn**
|
|
48
41
|
|
|
49
|
-
|
|
42
|
+
// or
|
|
50
43
|
yarn add @behold/widget
|
|
51
44
|
```
|
|
52
45
|
|
|
@@ -74,6 +67,13 @@ The Behold widget component only accepts a single attribute, `feed-id`, which ca
|
|
|
74
67
|
|
|
75
68
|
All configuration and customization is done on the Behold dashboard. When you make changes there, it will automatically update your widget, no code changes required.
|
|
76
69
|
|
|
77
|
-
|
|
70
|
+
## Load event
|
|
78
71
|
|
|
79
|
-
|
|
72
|
+
This component emits a load event after its initial render.
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<behold-widget
|
|
76
|
+
feed-id="YOUR_FEED_ID"
|
|
77
|
+
onload="console.log('loaded!')"
|
|
78
|
+
></behold-widget>
|
|
79
|
+
```
|