@behold/widget 0.1.96 → 0.1.97
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/dist/demo/favicon.svg +11 -0
- package/dist/demo/index.html +165 -0
- package/package.json +1 -1
- package/readme.md +29 -29
|
@@ -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,18 +1,7 @@
|
|
|
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
|
|
|
@@ -22,31 +11,35 @@ This is the official Behold widget JS package. It is built using [web components
|
|
|
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
|
+
```
|