@kendawson-online/vantl 2.0.5 → 2.1.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.
Files changed (12) hide show
  1. package/README.md +307 -133
  2. package/dist/images/alert.svg +50 -0
  3. package/dist/images/arrow-left.svg +1 -0
  4. package/dist/images/arrow-right.svg +1 -0
  5. package/dist/images/missing-image.svg +29 -0
  6. package/dist/timeline.min.css +1 -1
  7. package/dist/timeline.min.css.map +1 -1
  8. package/dist/timeline.min.js +1 -1
  9. package/dist/timeline.min.js.map +1 -1
  10. package/package.json +27 -13
  11. package/src/css/timeline.css +895 -175
  12. package/src/images/spinner.gif +0 -0
package/README.md CHANGED
@@ -1,13 +1,6 @@
1
- # Vantl - Vanilla (JS) Timeline
2
-
3
- A lightweight, responsive timeline library created with vanilla Javascript for creating beautiful horizontal and vertical timelines with zero dependencies. Inspired by [timeline](https://github.com/squarechip/timeline) originally created by [squarechip](https://github.com/squarechip) in 2018.
4
-
5
- <table align="center">
6
- <tr>
7
- <td><img src="demo/assets/img/horizontal-screenshot.png" width="650"></td>
8
- </tr>
9
- </table>
1
+ # Vantl - Vanilla Timeline
10
2
 
3
+ Vantl is a lightweight, responsive timeline library created with vanilla Javascript for creating beautiful horizontal and vertical timelines with zero dependencies. Inspired by [timeline](https://github.com/squarechip/timeline) originally created by [squarechip](https://github.com/squarechip) in 2018. You can load your timeline data via a variety of methods and, you can include multiple timelines on a single page.
11
4
 
12
5
  ## Features
13
6
 
@@ -21,169 +14,314 @@ A lightweight, responsive timeline library created with vanilla Javascript for c
21
14
  - 🚀 **Auto-init** - Just add a data attribute to load from JSON
22
15
  - 📏 **Small footprint** - Minified and tree-shakeable
23
16
 
24
- ## Quick Start
17
+ <br/><br/>
25
18
 
26
- ### Via CDN
19
+ # Getting Started:
27
20
 
28
- ```html
21
+ <br/>
22
+
23
+ Load stylesheet and Javascript functions to your document via CDN links:
24
+
25
+ ````html
29
26
  <!DOCTYPE html>
30
27
  <html>
31
28
  <head>
32
- <!-- timeline stylesheet -->
33
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@2/dist/timeline.min.css">
29
+ <!-- load stylesheet -->
30
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.css">
34
31
  </head>
35
32
  <body>
36
33
 
37
- <!-- your timeline code here -->
38
- <div id="timeline" class="timeline" data-json-config="/path/to/your/data.json"></div>
34
+ <!-- your timeline will go here -->
39
35
 
40
- <!-- timeline Javascript -->
41
- <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@2/dist/timeline.min.js"></script>
36
+ <!-- load functions -->
37
+ <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
42
38
  </body>
43
39
  </html>
44
- ```
40
+ ````
41
+ <br/>
45
42
 
46
- ### Via npm
43
+ ### 1️⃣ CREATE A TIMELINE USING BASIC HTML
47
44
 
48
- ```bash
49
- npm install @kendawson-online/vantl
50
- ```
45
+ <br/>
51
46
 
52
- ```javascript
53
- import { timeline } from '@kendawson-online/vantl';
54
- import '@kendawson-online/vantl/src/css/timeline.css';
47
+ Add some timeline node data in HTML. If you want your timeline to be oriented horizontally, set `data-mode="horizontal"` on the parent element (see code below). If you omit this setting, the timeline will be oriented vertically by default.
55
48
 
56
- timeline(document.querySelectorAll('.timeline'), {
57
- mode: 'vertical',
58
- nodeColor: '#2d6cdf'
59
- });
60
- ```
49
+ ````html
50
+ <!-- your timeline -->
51
+ <div class="timeline" data-mode="horizontal">
52
+ <div class="timeline__wrap">
53
+ <div class="timeline__items">
54
+ <div class="timeline__item">
55
+ <div class="timeline__content">
56
+ <h5>Jan. 1, 2000</h5>
57
+ <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum.</p>
58
+ </div>
59
+ </div>
60
+ <div class="timeline__item">
61
+ <div class="timeline__content">
62
+ <h5>Dec. 31, 2000</h5>
63
+ <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum.</p>
64
+ </div>
65
+ </div>
66
+ <div class="timeline__item">
67
+ <div class="timeline__content">
68
+ <h5>Jan. 1, 2001</h5>
69
+ <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum.</p>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ ````
76
+ <br/>
77
+
78
+ Add one line of code at the bottom to initialize your timeline. It goes after the CDN link but before the closing `</body>` tag and looks like this:
79
+
80
+ ````html
81
+ <!-- load functions -->
82
+ <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
83
+
84
+ <!-- initialize the timeline -->
85
+ <script>
86
+ timeline(document.querySelectorAll('.timeline'));
87
+ </script>
88
+
89
+ </body>
90
+ </html>
91
+ ````
92
+
93
+ <br/>
94
+
95
+ ### <a href="https://kendawson.online/vantl/demo/bare-bones-example.html" target="_blank">View A Basic HTML Example (With Source Code)</a> 👀
96
+
97
+ <br/><br/>
98
+
99
+ <a href="https://jquery.com" target="_blank"><img src="demo/assets/img/jquery.png" width="145" alt="jQuery" title="jQuery" /></a>
100
+
101
+ Note: if you're using <a href="https://jquery.com" target="_blank">jQuery</a> in your document, you can initialize your timeline like this:
102
+
103
+ ````html
104
+ <!-- load functions -->
105
+ <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
106
+
107
+ <!-- initialize timeline with jQuery -->
108
+ <script>
109
+ jQuery(function () {
110
+ $('.timeline').timeline({
111
+ mode: 'horizontal'
112
+ });
113
+ });
114
+ </script>
61
115
 
62
- ## Usage Examples
116
+ </body>
117
+ </html>
118
+ ````
119
+ For more info check the Advanced Usage section below
120
+
121
+ <br/>
122
+
123
+ ----
63
124
 
64
- ### 1. Auto-Init with JSON (Easiest)
125
+ <br/>
65
126
 
66
- The timeline auto-initializes when you add a `data-json-config` attribute:
127
+ ### 2️⃣ USE DATA ATTRIBUTES TO CUSTOMIZE YOUR TIMELINE
128
+
129
+ You can add data attributes to the timeline element to control how it looks and/or functions. For example, this is how you would set the orientation of the timeline to be horizontal instead of vertical (default):
67
130
 
68
131
  ```html
69
- <div class="timeline" data-json-config="/path/to/timeline.json"></div>
70
- ```
132
+ <div class="timeline" data-mode="horizontal">
133
+ ...
134
+ </div>
135
+ ````
136
+
137
+ If you don't pass an attribute, the app will simply use the default values.
138
+
139
+ Here are the available data attributes:
140
+
141
+ | Option | Type | Default | Description |
142
+ |--------|------|---------|-------------|
143
+ | `data-mode` | string | `'vertical'` | Layout mode: `'vertical'` or `'horizontal'` |
144
+ | `data-min-width` | number | `600` | Minimum viewport width (px) to maintain horizontal mode |
145
+ | `data-max-width` | number | `600` | Maximum viewport width (px) to maintain vertical mode |
146
+ | `data-move-items` | number | `1` | Items to scroll per navigation click (horizontal) |
147
+ | `data-start-index` | number | `0` | Initial item index (horizontal mode) |
148
+ | `data-horizontal-start-position` | string | `'top'` | First item alignment in horizontal layout: `'top'` or `'bottom'` |
149
+ | `data-vertical-start-position` | string | `'left'` | First item alignment in vertical layout: `'left'` or `'right'` |
150
+ | `data-same-side-nodes` | string|boolean | `false` | If set, forces all nodes to the same side. Accepts `'top'`/`'bottom'` (horizontal) or `'left'`/`'right'` (vertical). Use `data-same-side-nodes="true"` to follow the orientation-specific start position (`data-horizontal-start-position` / `data-vertical-start-position`). |
151
+ | `data-vertical-trigger` | string | `'15%'` | Scroll trigger distance: percentage or px (e.g., `'20%'` or `'150px'`) |
152
+ | `data-rtl-mode` | boolean | `false` | Right to left mode: `true` or `false` (only works in horizontal mode and overrides `startIndex` setting) |
153
+ | `data-node-color` | string | — | Node circle color (hex/rgb/hsl) |
154
+ | `data-line-color` | string | — | Timeline line color (hex/rgb/hsl) |
155
+ | `data-nav-color` | string | — | Navigation button color (hex/rgb/hsl) |
156
+ | `data-json-config` | string | — | path to a JSON data file (e.g., /path/to/valid/file.json)|
157
+
158
+ <br/>
159
+
160
+ See the [API Documentation](API-Documentation.md) for a more detailed description of all options.
161
+
162
+ <br/>
163
+
164
+ ----
165
+
166
+ <br/>
71
167
 
72
- **JSON Format:**
73
- ```json
168
+ ### 3️⃣ USING A JSON FILE TO LOAD TIMELINE DATA
169
+
170
+ <br/>
171
+
172
+ A great way to use vanilla timeline is to store and load your data from an external [JSON](https://www.json.org) file. JSON stands for: "JavaScript Object Notation".
173
+
174
+ It's a lightweight text format stored in a file with a `.json` extension. It's easy for humans to read and write and for machines to parse and use in apps. JSON is based on a web standard so you have to follow the rules to produce "well-formed JSON" that is formatted a specific way. A simple JSON file might look something like this:
175
+
176
+ ````javascript
74
177
  {
75
- "timelineName": "My Timeline",
76
- "layoutMode": "vertical",
77
- "lastupdated": "2026-01-08T20:15:34.873Z",
78
- "nodes": [
79
- {
80
- "id": 1,
81
- "title": "Event Title",
82
- "content": "Event description...",
83
- "image": "/path/to/image.jpg"
84
- }
85
- ]
178
+ "timelineName": "Timeline Title",
179
+ "layoutMode": "horizontal",
180
+ "minWidth": 700,
181
+ "maxWidth": "",
182
+ "nodeColor": "",
183
+ "lineColor": "",
184
+ "navColor": ""
86
185
  }
87
- ```
186
+ ````
187
+
188
+ <br/>
88
189
 
89
- ### 2. Inline HTML with Data Attributes
190
+ To use JSON, you add a data attribute called `data-json-config` to your HTML to tell the app which JSON file you want to load:
90
191
 
91
192
  ```html
92
- <div class="timeline" data-mode="horizontal">
93
- <div class="timeline__wrap">
193
+ <div class="timeline" data-json-config="/path/to/timeline.json"></div>
194
+ ```
195
+
196
+ <br/>
197
+
198
+ ⚠️ **Important:** if you set a `data-json-config` value, the app will prioritize JSON file settings and ignore any other data attribute values being passed inlne via HTML.
199
+
200
+ If you load your timeline data using the JSON method, you don't have to add the extra line of code at the bottom of the page (used to initialize the timeline). When a JSON file is loaded, the app is initialized automatically.
201
+
202
+ Here are some examples of JSON files you can use as templates to build your own timelines:
203
+
204
+ - [The most basic and simplified JSON file format possible](demo/assets/data/simple-data-array.json)
205
+
206
+ - [A Basic Horizontal Timeline Without Images](demo/assets/data/horiz-no-images.json)
207
+
208
+ - [A Basic Vertical Timeline Without Images](demo/assets/data/vert-no-images.json)
209
+
210
+ - [Advanced JSON template with Images and Colors](demo/assets/data/blank-template.json)
211
+
212
+ <br/>
213
+
214
+ 🗓️ **A NOTE ABOUT DATES IN JSON** 🗓️
215
+
216
+ Dates stored in JSON data files (e.g. the `lastupdated` field) are stored in a special format called ISO 8601. The vanilla timeline app expects dates to be in this specific format.
217
+
218
+ There is a [demo page](https://kendawson.online/vantl/demo/time.html) which displays dates in this format for you. The page also teaches you how to generate ISO 8601 timestamps in the developer console of your own web browser. Open the [demo/time.html](https://kendawson.online/vantl/demo/time.html) file in a browser to see a current ISO 8601 timestamp. You can copy/paste this date string directly to your JSON timelines.
219
+
220
+ ----
221
+
222
+ <br/>
223
+
224
+ # Deep Linking
225
+
226
+ Link to a specific timeline node using URL parameters:
227
+
228
+ ```
229
+ https://example.com/page.html?timeline=myTimelineId&id=3
230
+
231
+
232
+ https://[domain name]/[page name]?timeline=[timeline ID]&id=[node id]
233
+ ```
234
+ <br/>
235
+
236
+ 1) Add an `id` attribute and value to your timeline container:
237
+
238
+ ````html
239
+ <div id="myTimeline" class="timeline">
240
+ ...
241
+ </div>
242
+ ````
243
+ <br/>
244
+
245
+ 2) Add a `data-node-id` to each node you want to link to
246
+ ````html
94
247
  <div class="timeline__items">
248
+ <!-- node 1 -->
95
249
  <div class="timeline__item">
96
250
  <div class="timeline__content">
97
- <h5>2001</h5>
98
- <p>Lorem ipsum dolor sit amet, qui <a href="#">minim</a> labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
99
- </div>
100
- </div>
101
- <div class="timeline__item">
102
- <div class="timeline__content">
103
- <h5>2002</h5>
104
- <p>Lorem ipsum <a href="#">dolor sit amet</a>, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
251
+ <h5>Jan. 1, 2015</h5>
252
+ <p>Lorem ipsum dolor sit amet, qui minim labore.</p>
105
253
  </div>
106
254
  </div>
255
+ <!-- node 2 -->
107
256
  <div class="timeline__item">
108
257
  <div class="timeline__content">
109
- <h5>2003</h5>
110
- <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
258
+ <h5>Dec. 31, 2016</h5>
259
+ <p>Lorem ipsum dolor sit amet, qui minim labore.</p>
111
260
  </div>
112
261
  </div>
113
- </div>
114
- </div>
115
- </div>
262
+ </div>
263
+ ````
116
264
 
117
- <script>
118
- timeline(document.querySelectorAll('.timeline'));
119
- </script>
265
+ Deep linking works automatically with JSON-loaded timelines
266
+
267
+ <br/>
268
+
269
+ # Advanced Usage:
270
+
271
+ ### Installing with npm
272
+
273
+ ```bash
274
+ npm install @kendawson-online/vantl
120
275
  ```
121
276
 
122
- ### 3. JavaScript API
277
+ Importing timeline functions into your Javscript app:
123
278
 
124
279
  ```javascript
125
- // Vanilla JS
280
+ import { timeline } from '@kendawson-online/vantl';
281
+ import '@kendawson-online/vantl/dist/timeline.min.css';
282
+
126
283
  timeline(document.querySelectorAll('.timeline'), {
127
- mode: 'horizontal',
128
- visibleItems: 3,
284
+ mode: 'vertical',
285
+ nodeColor: '#2d6cdf'
286
+ });
287
+ ```
288
+
289
+ ### Setting options
290
+
291
+ ```javascript
292
+ // vanilla Javascript
293
+ timeline(document.querySelectorAll('.timeline'), {
294
+ mode: 'horizontal'
129
295
  });
130
296
 
131
- // jQuery (if available)
297
+
298
+ // jQuery
132
299
  $('.timeline').timeline({
133
300
  mode: 'vertical',
134
301
  verticalTrigger: '20%'
135
302
  });
136
303
  ```
137
304
 
138
- ## API Options
305
+ ### Available API Options
139
306
 
140
- All options can be set via JavaScript API, data attributes, or JSON config.
307
+ All options can be set via JavaScript API, data attributes, or with JSON config.
141
308
 
142
309
  | Option | Type | Default | Description |
143
310
  |--------|------|---------|-------------|
144
311
  | `mode` | string | `'vertical'` | Layout mode: `'vertical'` or `'horizontal'` |
145
312
  | `minWidth` | number | `600` | Min viewport width (px) to maintain horizontal mode |
146
- | `visibleItems` | number | `3` | Number of items in horizontal viewport |
313
+ | `maxWidth` | number | `600` | Max viewport width (px) to maintain vertical mode |
147
314
  | `moveItems` | number | `1` | Items to scroll per navigation click (horizontal) |
148
315
  | `startIndex` | number | `0` | Initial item index (horizontal mode) |
149
316
  | `horizontalStartPosition` | string | `'top'` | First item alignment: `'top'` or `'bottom'` |
150
317
  | `verticalStartPosition` | string | `'left'` | First item alignment: `'left'` or `'right'` |
318
+ | `sameSideNodes` | string|boolean | `false` | Force all nodes to the same side. Accepted literal values: `'top'`, `'bottom'`, `'left'`, `'right'`. Use `true` to follow the orientation-specific start position (`horizontalStartPosition` / `verticalStartPosition`). |
151
319
  | `verticalTrigger` | string | `'15%'` | Scroll trigger distance: percentage or px (e.g., `'20%'` or `'150px'`) |
152
320
  | `rtlMode` | boolean | `false` | Right-to-left mode (horizontal) |
153
321
  | `nodeColor` | string | — | Node circle color (hex/rgb/hsl) |
154
322
  | `lineColor` | string | — | Center line color (hex/rgb/hsl) |
155
323
  | `navColor` | string | — | Navigation button color (hex/rgb/hsl) |
156
324
 
157
- **Setting Options:**
158
-
159
- ```javascript
160
- // JavaScript
161
- timeline(el, { mode: 'horizontal', nodeColor: '#2d6cdf' });
162
- ```
163
-
164
- ```html
165
- <!-- Data attributes -->
166
- <div class="timeline" data-mode="horizontal" data-node-color="#2d6cdf">
167
- ```
168
-
169
- ```json
170
- // JSON
171
- { "layoutMode": "horizontal", "nodeColor": "#2d6cdf" }
172
- ```
173
-
174
- ## Deep Linking
175
-
176
- Link to a specific timeline node using URL parameters:
177
-
178
- ```
179
- https://example.com/page.html?timeline=myTimelineId&id=3
180
- ```
181
-
182
- - Add `id` attribute to timeline container
183
- - Add `data-node-id` to each item you want to link to
184
- - Works automatically with JSON-loaded timelines
185
-
186
- ## Advanced Features
187
325
 
188
326
  ### Custom Image Path
189
327
 
@@ -198,31 +336,15 @@ Override the auto-detected image path:
198
336
  <script src="dist/timeline.min.js"></script>
199
337
  ```
200
338
 
201
- ### Modal Content
202
-
203
- Each timeline item can display a modal popup on click:
204
-
205
- ```html
206
- <div class="timeline__item"
207
- data-modal-title="Full Title"
208
- data-modal-content="Extended description..."
209
- data-modal-image="/img/large.jpg"
210
- data-modal-html="<p>Custom HTML content</p>">
211
- ...
212
- </div>
213
- ```
214
-
215
- JSON items automatically support modals with the `title`, `content`, `image`, and `html` fields.
216
-
217
- ### Programmatic Control
339
+ ### Programmatic control
218
340
 
219
341
  ```javascript
220
342
  // Load from JSON programmatically
221
343
  loadDataFromJson('/data/timeline.json', '#myTimeline');
222
344
 
223
345
  // Clear cache
224
- clearTimelineCache(); // Clear all
225
- clearTimelineCache('timelineId'); // Clear specific
346
+ clearTimelineCache(); // Clear all cached JSON timelines
347
+ clearTimelineCache('/data/my-timeline.json'); // Clear cache for specific JSON URL
226
348
 
227
349
  // Navigate to node (horizontal mode)
228
350
  navigateTimelineToNodeIndex(containerElement, 5);
@@ -234,6 +356,32 @@ openTimelineModal(itemElement);
234
356
  closeTimelineModal();
235
357
  ```
236
358
 
359
+ ### More Information
360
+
361
+ - [API Documentation](API-Documentation.md)
362
+ - [Development Documentation](Development.md)
363
+
364
+ <br/>
365
+
366
+ ### Optional SwiperJS add-on (not bundled or supported)
367
+
368
+ - [SwiperJS](https://swiperjs.com) is a third-party library; Vantl only ships an adapter. You must bring Swiper yourself and consult the Swiper docs for setup and features.
369
+ - Resolution order when `useSwiper` is enabled: `options.swiperCdn` (ESM URL) → installed `swiper` package (dynamic import) → `window.Swiper` from a UMD CDN. If none are found, Vanilla Timeline falls back to its built-in carousel controls.
370
+ - Enable with `data-use-swiper="true"` (or boolean `true`) in HTML or `useSwiper: 'true' | 'auto' | true` in JS. Pass Swiper options via `swiperOptions`.
371
+ - Build warning about unresolved `swiper` is expected when you have not installed it; either ignore, mark it external (e.g., `external: ['swiper']`), or install Swiper to silence the warning.
372
+
373
+ UMD CDN example (provides `window.Swiper`):
374
+
375
+ ```html
376
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12.4.7/swiper-bundle.min.css">
377
+ <script src="https://cdn.jsdelivr.net/npm/swiper@12.4.7/swiper-bundle.min.js"></script>
378
+ <script src="dist/timeline.min.js"></script>
379
+ <script>
380
+ timeline(document.querySelectorAll('.timeline'), { useSwiper: 'auto' });
381
+ // Swiper-specific options: { swiperOptions: { loop: true } }
382
+ </script>
383
+ ```
384
+
237
385
  ## Browser Support
238
386
 
239
387
  - Chrome/Edge (2018+)
@@ -243,11 +391,42 @@ closeTimelineModal();
243
391
 
244
392
  ## Contributing
245
393
 
246
- See [DEVELOPMENT.md](DEVELOPMENT.md) for build instructions and architecture overview.
394
+ See [Development.md](Development.md) for build instructions and an architectural overview.
395
+
396
+ See [API Documentation](API-Documentation.md) for details about how the API works.
397
+
398
+ You can report issues and open pull requests on GitHub:
399
+
400
+ - https://github.com/kendawson-online/vantl/issues
401
+
402
+ - https://github.com/kendawson-online/vantl/pulls
403
+
404
+ ## Links
405
+
406
+ **NPM Package:** [@kendawson-online/vantl](https://www.npmjs.com/package/@kendawson-online/vantl)
407
+
408
+ **Repository:** [github.com/kendawson-online/vantl](https://github.com/kendawson-online/vantl)
409
+
410
+ **CDN:** [cdn.jsdelivr.net/npm/@kendawson-online/vantl](https://cdn.jsdelivr.net/npm/@kendawson-online/vantl)
411
+
247
412
 
248
413
  ## License
249
414
 
250
- MIT License - see [LICENSE](LICENSE) file for details.
415
+ [MIT License](LICENSE)
416
+
417
+ ---
418
+
419
+ **Note (optional Swiper integration):**
420
+
421
+ You may see a Rollup warning during `npm run build` similar to:
422
+
423
+ ```
424
+ (!) Unresolved dependencies
425
+ swiper (imported by "src/adapters/swiper-adapter.js")
426
+ ```
427
+
428
+ This is expected when Swiper is optional (not installed) because the adapter attempts to load Swiper at runtime via an ESM CDN, dynamic import, or `window.Swiper` (UMD). The build still completes; if you want Rollup to stop warning, add `external: ['swiper']` to `rollup.config.js`, or install `swiper` locally to include it in the bundle.
429
+
251
430
 
252
431
  ## Credits
253
432
 
@@ -255,8 +434,3 @@ Originally inspired by [timeline](https://github.com/squarechip/timeline) by [Mi
255
434
 
256
435
  Refactored and maintained by [Ken Dawson](https://github.com/kendawson-online) (2026).
257
436
 
258
- ---
259
-
260
- **Package:** [@kendawson-online/vantl](https://www.npmjs.com/package/@kendawson-online/vantl)
261
- **Repository:** [github.com/kendawson-online/vantl](https://github.com/kendawson-online/vantl)
262
- **CDN:** [cdn.jsdelivr.net/npm/@kendawson-online/vantl](https://cdn.jsdelivr.net/npm/@kendawson-online/vantl)
package/dist/images/alert.svg ADDED
@@ -0,0 +1,50 @@
1
+ <?xml version="1.0" ?>
2
+
3
+
4
+ <svg width="800px" height="800px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" id="_x3C_Layer_x3E_" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
+
package/dist/images/arrow-left.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="7.8" height="14"><path fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6.8 1L1 7l5.8 6"/></svg>
package/dist/images/arrow-right.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="7.8" height="14"><path fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1 13l5.8-5.9L1 1"/></svg>
package/dist/images/missing-image.svg ADDED
@@ -0,0 +1,29 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
3
+ <svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
4
+ viewBox="0 0 512 512" xml:space="preserve">
5
+ <g transform="translate(1 1)">
6
+ <polygon style="fill:#CCCCCC;" points="272.655,449.207 502.172,449.207 502.172,60.793 272.655,60.793 "/>
7
+ <polygon style="fill:#FFFFFF;" points="7.828,449.207 237.345,449.207 237.345,60.793 7.828,60.793 "/>
8
+ <polygon style="fill:#E2E3E5;" points="34.31,449.207 475.69,449.207 475.69,60.793 34.31,60.793 "/>
9
+ <path style="fill:#E0E0E0;" d="M167.607,198.503c0,22.069-17.655,40.607-40.607,40.607s-39.724-18.538-39.724-40.607
10
+ s17.655-40.607,40.607-40.607S167.607,175.552,167.607,198.503"/>
11
+ <path style="fill:#F0F0F0;" d="M141.124,198.503c0,22.069-12.359,40.607-27.366,40.607s-26.483-18.538-26.483-40.607
12
+ s12.359-40.607,27.366-40.607S141.124,175.552,141.124,198.503"/>
13
+ <g>
14
+ <path style="fill:#B6B6B6;" d="M502.172,458.034H7.828c-5.297,0-8.828-3.531-8.828-8.828V60.793c0-5.297,3.531-8.828,8.828-8.828
15
+ h494.345c5.297,0,8.828,3.531,8.828,8.828v388.414C511,454.503,507.469,458.034,502.172,458.034z M16.655,440.379h476.69V69.621
16
+ H16.655V440.379z"/>
17
+ <path style="fill:#B6B6B6;" d="M127.883,247.055c-27.366,0-49.434-22.069-49.434-49.434s22.069-49.434,49.434-49.434
18
+ s49.434,22.069,49.434,49.434S154.366,247.055,127.883,247.055z M127.883,166.724c-17.655,0-31.779,14.124-31.779,31.779
19
+ s14.124,31.779,31.779,31.779s31.779-14.124,31.779-31.779S144.655,166.724,127.883,166.724z"/>
20
+ <path style="fill:#B6B6B6;" d="M60.793,405.069c-2.648,0-5.297-0.883-7.062-2.648c-3.531-3.531-2.648-8.828,0.883-12.359
21
+ l150.069-132.414c3.531-2.648,8.828-2.648,12.359,0l97.103,97.103c3.531,3.531,3.531,8.828,0,12.359
22
+ c-3.531,3.531-8.828,3.531-12.359,0l-90.924-90.924L66.972,403.303C65.207,404.186,62.559,405.069,60.793,405.069z"/>
23
+ <path style="fill:#B6B6B6;" d="M259.414,321.207c-1.766,0-4.414-0.883-6.179-2.648c-3.531-3.531-3.531-8.828-0.883-12.359
24
+ l92.69-101.517c1.766-1.766,3.531-2.648,6.179-2.648c2.648,0,4.414,0.883,6.179,2.648l105.931,97.103
25
+ c3.531,3.531,3.531,8.828,0.883,12.359c-3.531,3.531-8.828,3.531-12.359,0.883l-98.869-91.807l-86.51,95.338
26
+ C263.828,320.324,262.062,321.207,259.414,321.207z"/>
27
+ </g>
28
+ </g>
29
+ </svg>