@bebranded/bb-contents 1.1.21 → 1.1.22-test.0
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 +178 -12
- package/bb-contents.js +2278 -2979
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,37 +1,203 @@
|
|
|
1
1
|
# BeBranded Contents
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@bebranded/bb-contents` is a lightweight vanilla JavaScript IIFE library for Webflow.
|
|
4
|
+
It enables ready-to-use front-end features with HTML attributes (`bb-*` or `data-bb-*`), without external dependencies.
|
|
4
5
|
|
|
5
|
-
## Getting
|
|
6
|
+
## Getting Started
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
Full product documentation and examples:
|
|
8
9
|
- https://www.bebranded.xyz/contents
|
|
9
10
|
|
|
10
|
-
## Installation
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
### CDN (recommended)
|
|
11
14
|
|
|
12
|
-
### CDN (recommandé)
|
|
13
15
|
```html
|
|
14
16
|
<!-- BeBranded Contents -->
|
|
15
17
|
<script async src="https://cdn.jsdelivr.net/npm/@bebranded/bb-contents@latest/bb-contents.js"></script>
|
|
16
18
|
```
|
|
17
19
|
|
|
18
20
|
### NPM
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @bebranded/bb-contents
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Attribute Syntax
|
|
27
|
+
|
|
28
|
+
Both syntaxes are supported everywhere:
|
|
29
|
+
|
|
30
|
+
- `bb-*` (short form), for example: `bb-marquee`
|
|
31
|
+
- `data-bb-*` (HTML-valid data attribute), for example: `data-bb-marquee`
|
|
32
|
+
|
|
33
|
+
## Global Behavior
|
|
34
|
+
|
|
35
|
+
- `data-bb-disable`: disables initialization inside the marked subtree
|
|
36
|
+
- `data-bb-scope`: optional root scope to limit module scanning
|
|
37
|
+
- `bb-performance-boost` on `<body>`: increases startup delay for performance-sensitive pages
|
|
38
|
+
|
|
39
|
+
## Global Configuration
|
|
40
|
+
|
|
41
|
+
You can set configuration before loading the script:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<script>
|
|
45
|
+
window._bbContentsConfig = {
|
|
46
|
+
youtubeEndpoint: "https://your-worker.workers.dev"
|
|
47
|
+
};
|
|
48
|
+
</script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Modules
|
|
52
|
+
|
|
53
|
+
## Marquee
|
|
54
|
+
|
|
55
|
+
Duplicates and scrolls content in an infinite loop, horizontally or vertically.
|
|
56
|
+
|
|
57
|
+
| Attribute | Values | Default | Description |
|
|
58
|
+
|---|---|---|---|
|
|
59
|
+
| `data-bb-marquee` | - | - | Enables marquee on the container |
|
|
60
|
+
| `data-bb-marquee-direction` | `left` \| `right` \| `top` \| `bottom` | `left` | Scroll direction |
|
|
61
|
+
| `data-bb-marquee-speed` | number | `100` | Speed in pixels/second |
|
|
62
|
+
| `data-bb-marquee-pause` | `true` \| `false` | `true` | Pause animation on hover |
|
|
63
|
+
| `data-bb-marquee-gap` | number | `50` | Gap between repeated blocks (px) |
|
|
64
|
+
| `data-bb-marquee-orientation` | `horizontal` \| `vertical` | `horizontal` | Scroll orientation |
|
|
65
|
+
| `data-bb-marquee-height` | number \| `auto` | `300` | Vertical container height (px or `auto`) |
|
|
66
|
+
| `data-bb-marquee-min-height` | CSS value | - | Minimum container height |
|
|
67
|
+
|
|
68
|
+
## Share
|
|
69
|
+
|
|
70
|
+
Adds share actions to clickable elements.
|
|
71
|
+
|
|
72
|
+
| Attribute | Values | Default | Description |
|
|
73
|
+
|---|---|---|---|
|
|
74
|
+
| `data-bb-share` | `twitter` \| `facebook` \| `linkedin` \| `whatsapp` \| `telegram` \| `email` \| `copy` \| `native` | - | Share network/action |
|
|
75
|
+
| `data-bb-url` | URL | current page URL | URL to share |
|
|
76
|
+
| `data-bb-text` | text | document title | Text/title to share |
|
|
77
|
+
|
|
78
|
+
## Current Year
|
|
79
|
+
|
|
80
|
+
Inserts the current year in an element.
|
|
81
|
+
|
|
82
|
+
| Attribute | Values | Default | Description |
|
|
83
|
+
|---|---|---|---|
|
|
84
|
+
| `data-bb-current-year` | - | - | Enables current-year module on the element |
|
|
85
|
+
| `data-bb-current-year-format` | text with `{year}` | - | Custom format, for example `Copyright {year}` |
|
|
86
|
+
| `data-bb-current-year-prefix` | text | - | Text before year |
|
|
87
|
+
| `data-bb-current-year-suffix` | text | - | Text after year |
|
|
88
|
+
|
|
89
|
+
## Reading Time
|
|
90
|
+
|
|
91
|
+
Calculates and displays estimated reading time from local or fetched content.
|
|
92
|
+
|
|
93
|
+
| Attribute | Values | Default | Description |
|
|
94
|
+
|---|---|---|---|
|
|
95
|
+
| `data-bb-reading-time` | - | - | Enables reading-time output element |
|
|
96
|
+
| `data-bb-reading-time-target` | CSS selector | - | Target element(s) to analyze |
|
|
97
|
+
| `data-bb-reading-time-speed` | number | `230` | Reading speed in words/minute |
|
|
98
|
+
| `data-bb-reading-time-image-speed` | number | `12` | Time per image in seconds |
|
|
99
|
+
| `data-bb-reading-time-format` | text with `{minutes}` | `{minutes} min` | Display format |
|
|
100
|
+
| `data-bb-reading-time-url` | URL (same origin only) | - | URL to fetch and analyze |
|
|
101
|
+
|
|
102
|
+
## Country Select
|
|
103
|
+
|
|
104
|
+
Replaces a native `<select>` with a searchable country picker including flags.
|
|
105
|
+
|
|
106
|
+
| Attribute | Values | Default | Description |
|
|
107
|
+
|---|---|---|---|
|
|
108
|
+
| `data-bb-country-select` | - | - | Enables module on a `<select>` element |
|
|
109
|
+
| `data-bb-country-select-preferred` | comma-separated ISO codes | - | Prioritized countries at the top, for example `FR,BE,CH` |
|
|
110
|
+
| `data-bb-country-select-default` | ISO code or country name | current select value | Preselected country |
|
|
111
|
+
|
|
112
|
+
## Favicon
|
|
113
|
+
|
|
114
|
+
Updates the page favicon dynamically, with dark-mode support.
|
|
115
|
+
|
|
116
|
+
| Attribute | Values | Default | Description |
|
|
117
|
+
|---|---|---|---|
|
|
118
|
+
| `data-bb-favicon` | URL | - | Light/default favicon URL |
|
|
119
|
+
| `data-bb-favicon-dark` | URL | - | Favicon URL when `prefers-color-scheme: dark` matches |
|
|
120
|
+
|
|
121
|
+
## YouTube
|
|
122
|
+
|
|
123
|
+
Displays a dynamic YouTube feed through a Worker proxy endpoint.
|
|
124
|
+
|
|
125
|
+
### Feed Configuration Attributes
|
|
126
|
+
|
|
127
|
+
| Attribute | Values | Default | Description |
|
|
128
|
+
|---|---|---|---|
|
|
129
|
+
| `data-bb-youtube-channel` | channel ID(s), comma-separated | - | Enables the module and specifies one or multiple YouTube channel IDs |
|
|
130
|
+
| `data-bb-youtube-video-count` | number | `10` | Number of videos to display |
|
|
131
|
+
| `data-bb-youtube-skip` | number | `0` | Number of videos to skip from start |
|
|
132
|
+
| `data-bb-youtube-language` | `fr` \| `en` | `fr` | Relative-date language |
|
|
133
|
+
| `data-bb-youtube-allow-shorts` | `true` \| `false` | `false` | Include YouTube Shorts |
|
|
134
|
+
|
|
135
|
+
### Template Attributes
|
|
136
|
+
|
|
137
|
+
| Attribute | Values | Default | Description |
|
|
138
|
+
|---|---|---|---|
|
|
139
|
+
| `data-bb-youtube-container` | - | container element | Optional node where generated cards are inserted |
|
|
140
|
+
| `data-bb-youtube-item` | - | - | Template element used as one video card |
|
|
141
|
+
| `data-bb-youtube-thumbnail` | - | - | `<img>` node for thumbnail |
|
|
142
|
+
| `data-bb-youtube-title` | - | - | Node for video title |
|
|
143
|
+
| `data-bb-youtube-description` | - | - | Node for video description |
|
|
144
|
+
| `data-bb-youtube-date` | - | - | Node for relative published date |
|
|
145
|
+
| `data-bb-youtube-channel` | - | - | Node for channel name inside card |
|
|
146
|
+
|
|
147
|
+
### Required Worker Endpoint
|
|
148
|
+
|
|
149
|
+
Set the endpoint before loading `bb-contents.js`:
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<script>
|
|
153
|
+
window._bbContentsConfig = {
|
|
154
|
+
youtubeEndpoint: "https://your-worker.workers.dev"
|
|
155
|
+
};
|
|
156
|
+
</script>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
You can also update it at runtime:
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
<script>
|
|
163
|
+
configureYouTube("https://your-worker.workers.dev");
|
|
164
|
+
</script>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Development
|
|
168
|
+
|
|
169
|
+
Source files live in `src/`.
|
|
170
|
+
`bb-contents.js` and `bb-contents.min.js` are generated build outputs and should not be edited directly.
|
|
171
|
+
|
|
19
172
|
```bash
|
|
20
|
-
npm install
|
|
173
|
+
npm install
|
|
174
|
+
npm run build
|
|
21
175
|
```
|
|
22
176
|
|
|
23
|
-
##
|
|
177
|
+
## Publishing Rules
|
|
178
|
+
|
|
179
|
+
Version must stay identical in all 3 places:
|
|
180
|
+
|
|
181
|
+
1. `package.json` -> `version`
|
|
182
|
+
2. `bb-contents.js` -> `BB_CONTENTS_VERSION`
|
|
183
|
+
3. `bb-contents.js` header -> `@version`
|
|
184
|
+
|
|
185
|
+
Release targets:
|
|
186
|
+
|
|
187
|
+
- Test release: push `develop` + `npm publish --tag test`
|
|
188
|
+
- Live release: push `main` + `npm publish`
|
|
189
|
+
|
|
190
|
+
## Support
|
|
24
191
|
|
|
25
|
-
Besoin d’aide ou d’un conseil d’intégration ?
|
|
26
192
|
- Email: hello@bebranded.xyz
|
|
27
|
-
-
|
|
193
|
+
- GitHub issues: bug reports and feature requests
|
|
28
194
|
|
|
29
195
|
## Contribution
|
|
30
196
|
|
|
31
|
-
|
|
197
|
+
Contributions are welcome. Open an issue to discuss major changes, or submit a pull request directly.
|
|
32
198
|
|
|
33
|
-
##
|
|
199
|
+
## License
|
|
34
200
|
|
|
35
201
|
MIT
|
|
36
202
|
|
|
37
|
-
|
|
203
|
+
Copyright (c) 2025 BeBranded
|