@dpgradio/creative 9.0.2 → 9.0.4

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 (8) hide show
  1. package/README.md +6 -6
  2. package/devbox.json +17 -0
  3. package/devbox.lock +130 -0
  4. package/package.json +1 -1
  5. package/src/app/hybrid.js +3 -3
  6. package/styles/fonts/joe.css +25 -20
  7. package/styles/fonts/qmusic.css +35 -31
  8. package/styles/fonts/willy.css +79 -2
package/README.md CHANGED
@@ -37,7 +37,7 @@ body, html {
37
37
  ```
38
38
 
39
39
  Use the following to import the colors and fonts of all brands:
40
-
40
+
41
41
  ```css
42
42
  @import "@dpgradio/creative/styles/all";
43
43
  ```
@@ -288,7 +288,7 @@ This is not meant to open URLs on our own domains, e.g. `https://qmusic.be/this-
288
288
  For that, use `hybrid.openPermalink`.
289
289
 
290
290
  Supported modes:
291
- * `seque`: Opens the URL in a windows that slides from the right, pushing onto the current page.
291
+ * `segue`: Opens the URL in a windows that slides from the right, pushing onto the current page.
292
292
  * `overlay`: Opens the URL in a full-screen modal that slides up from the bottom.
293
293
  * `in-app-browser`: Opens the URL in an in-app browser with navigation controls. No hybrid functionality supported.
294
294
  * `external-browser`: Opens the URL in the default browser. No hybrid functionality supported.
@@ -296,7 +296,7 @@ Supported modes:
296
296
  #### `hybrid.openPermalink(permalink)`
297
297
 
298
298
  Opens a permalink of e.g. an article.
299
- The article will be shown in a regular `seque` style.
299
+ The article will be shown in a regular `segue` style.
300
300
 
301
301
  ⚠️ As of October 2023, not yet supported by the apps.
302
302
 
@@ -348,21 +348,21 @@ const shareable = new Shareable()
348
348
  const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-70s-quiz-share-fb/index.html')
349
349
  .withDimensions(1200, 630)
350
350
  .withPayload({ results: this.matches });
351
-
351
+
352
352
  (await shareable.generateUsingImage(image)).openFacebookUrl()
353
353
 
354
354
  // Instagram
355
355
  const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-70s-quiz-share-fb/index.html')
356
356
  .withDimensions(1080, 1920)
357
357
  .withPayload({ results: this.matches });
358
-
358
+
359
359
  (await shareable.generateUsingImage(image)).openInstagramUrl()
360
360
 
361
361
  // Whatsapp
362
362
  const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-70s-quiz-share-fb/index.html')
363
363
  .withDimensions(1200, 630)
364
364
  .withPayload({ results: this.matches });
365
-
365
+
366
366
  (await shareable.generateUsingImage(image)).openWhatsappUrl()
367
367
  ```
368
368
 
package/devbox.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "$schema": "https://raw.githubusercontent.com/jetify-com/devbox/0.17.2/.schema/devbox.schema.json",
3
+ "packages": [
4
+ "nodejs@latest",
5
+ "git@latest"
6
+ ],
7
+ "shell": {
8
+ "init_hook": [
9
+ "echo 'Welcome to devbox!' > /dev/null"
10
+ ],
11
+ "scripts": {
12
+ "test": [
13
+ "echo \"Error: no test specified\" && exit 1"
14
+ ]
15
+ }
16
+ }
17
+ }
package/devbox.lock ADDED
@@ -0,0 +1,130 @@
1
+ {
2
+ "lockfile_version": "1",
3
+ "packages": {
4
+ "git@latest": {
5
+ "last_modified": "2026-06-27T07:37:20Z",
6
+ "resolved": "github:NixOS/nixpkgs/3d46470bb3030020f7e1361f33514854f5bfa86d#git",
7
+ "source": "devbox-search",
8
+ "version": "2.54.0",
9
+ "systems": {
10
+ "aarch64-darwin": {
11
+ "outputs": [
12
+ {
13
+ "name": "out",
14
+ "path": "/nix/store/7p841rdaha0pj23srg7lrwpnlaxyr7gr-git-2.54.0",
15
+ "default": true
16
+ },
17
+ {
18
+ "name": "doc",
19
+ "path": "/nix/store/53n75imxnfbr1nbkll4djg98r9vg1lyw-git-2.54.0-doc"
20
+ }
21
+ ],
22
+ "store_path": "/nix/store/7p841rdaha0pj23srg7lrwpnlaxyr7gr-git-2.54.0"
23
+ },
24
+ "aarch64-linux": {
25
+ "outputs": [
26
+ {
27
+ "name": "out",
28
+ "path": "/nix/store/j76bc0jffq323b6kvrckky5152h0pfdk-git-2.54.0",
29
+ "default": true
30
+ },
31
+ {
32
+ "name": "debug",
33
+ "path": "/nix/store/hi8y2a7kxz94pmnfh3k2gp2mzr57xmqd-git-2.54.0-debug"
34
+ },
35
+ {
36
+ "name": "doc",
37
+ "path": "/nix/store/ms4bxp0svz53yzxqwfzp5lwp22v11m7d-git-2.54.0-doc"
38
+ }
39
+ ],
40
+ "store_path": "/nix/store/j76bc0jffq323b6kvrckky5152h0pfdk-git-2.54.0"
41
+ },
42
+ "x86_64-darwin": {
43
+ "outputs": [
44
+ {
45
+ "name": "out",
46
+ "path": "/nix/store/x671lak90qvcxgc5irp4xv5zdbaym2yr-git-2.54.0",
47
+ "default": true
48
+ },
49
+ {
50
+ "name": "doc",
51
+ "path": "/nix/store/zakmjh312hmg2yslsyqmnw8lb8dgmyyk-git-2.54.0-doc"
52
+ }
53
+ ],
54
+ "store_path": "/nix/store/x671lak90qvcxgc5irp4xv5zdbaym2yr-git-2.54.0"
55
+ },
56
+ "x86_64-linux": {
57
+ "outputs": [
58
+ {
59
+ "name": "out",
60
+ "path": "/nix/store/k3wl6cg7q50zkx47af3msmg1yrg1f203-git-2.54.0",
61
+ "default": true
62
+ },
63
+ {
64
+ "name": "doc",
65
+ "path": "/nix/store/9a0f1mfx8n1b8y64qx9999pq70j48ms6-git-2.54.0-doc"
66
+ },
67
+ {
68
+ "name": "debug",
69
+ "path": "/nix/store/7bjwn43x9gcaf249d8l651083ri033dy-git-2.54.0-debug"
70
+ }
71
+ ],
72
+ "store_path": "/nix/store/k3wl6cg7q50zkx47af3msmg1yrg1f203-git-2.54.0"
73
+ }
74
+ }
75
+ },
76
+ "github:NixOS/nixpkgs/nixpkgs-unstable": {
77
+ "last_modified": "2026-07-05T19:27:47Z",
78
+ "resolved": "github:NixOS/nixpkgs/f205b5574fd0cb7da5b702a2da51507b7f4fdd1b?lastModified=1783279667&narHash=sha256-%2FNAkDSsve%2BGNM0Bt6tleJdCGfsTlK89nPjkVOzZMo0s%3D"
79
+ },
80
+ "nodejs@latest": {
81
+ "last_modified": "2026-06-27T07:37:20Z",
82
+ "plugin_version": "0.0.2",
83
+ "resolved": "github:NixOS/nixpkgs/3d46470bb3030020f7e1361f33514854f5bfa86d#nodejs_26",
84
+ "source": "devbox-search",
85
+ "version": "26.4.0",
86
+ "systems": {
87
+ "aarch64-darwin": {
88
+ "outputs": [
89
+ {
90
+ "name": "out",
91
+ "path": "/nix/store/dz3nxng3029j1gc570pkwj8ahfdl3sa4-nodejs-26.4.0",
92
+ "default": true
93
+ }
94
+ ],
95
+ "store_path": "/nix/store/dz3nxng3029j1gc570pkwj8ahfdl3sa4-nodejs-26.4.0"
96
+ },
97
+ "aarch64-linux": {
98
+ "outputs": [
99
+ {
100
+ "name": "out",
101
+ "path": "/nix/store/4bv9k994r33svxczpy2wk3lhsrh3kspl-nodejs-26.4.0",
102
+ "default": true
103
+ }
104
+ ],
105
+ "store_path": "/nix/store/4bv9k994r33svxczpy2wk3lhsrh3kspl-nodejs-26.4.0"
106
+ },
107
+ "x86_64-darwin": {
108
+ "outputs": [
109
+ {
110
+ "name": "out",
111
+ "path": "/nix/store/wyxj7d54jggi26lnap66c858mb2l2m2q-nodejs-26.4.0",
112
+ "default": true
113
+ }
114
+ ],
115
+ "store_path": "/nix/store/wyxj7d54jggi26lnap66c858mb2l2m2q-nodejs-26.4.0"
116
+ },
117
+ "x86_64-linux": {
118
+ "outputs": [
119
+ {
120
+ "name": "out",
121
+ "path": "/nix/store/i2jf2l5lqhy3d7zy3lzx5wjydyzw2hwm-nodejs-26.4.0",
122
+ "default": true
123
+ }
124
+ ],
125
+ "store_path": "/nix/store/i2jf2l5lqhy3d7zy3lzx5wjydyzw2hwm-nodejs-26.4.0"
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dpgradio/creative",
3
- "version": "9.0.2",
3
+ "version": "9.0.4",
4
4
  "description": "Support package for standalone Javascript applications",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/app/hybrid.js CHANGED
@@ -10,7 +10,7 @@ const IOS_APP_REGEX =
10
10
 
11
11
  class Hybrid {
12
12
  OPEN_URL_MODES = {
13
- SEQUE: 'seque',
13
+ SEGUE: 'segue',
14
14
  OVERLAY: 'overlay',
15
15
  IN_APP_BROWSER: 'in-app-browser',
16
16
  EXTERNAL_BROWSER: 'external-browser',
@@ -136,7 +136,7 @@ class Hybrid {
136
136
  * Opens an external URL.
137
137
  *
138
138
  * Supported modes:
139
- * - `seque`: Opens the URL in a windows that slides from the right, pushing onto the current page.
139
+ * - `segue`: Opens the URL in a windows that slides from the right, pushing onto the current page.
140
140
  * - `overlay`: Opens the URL in a full-screen modal that slides up from the bottom.
141
141
  * - `in-app-browser`: Opens the URL in an in-app browser with navigation controls. No hybrid functionality supported.
142
142
  * - `external-browser`: Opens the URL in the default browser. No hybrid functionality supported.
@@ -154,7 +154,7 @@ class Hybrid {
154
154
  }
155
155
 
156
156
  /**
157
- * Opens a permalink of e.g. an article. The article will be shown in a regular `seque` style.
157
+ * Opens a permalink of e.g. an article. The article will be shown in a regular `segue` style.
158
158
  *
159
159
  * As of October 2023, not yet supported by the apps.
160
160
  */
package/styles/fonts/joe.css CHANGED
@@ -1,34 +1,39 @@
1
1
  @font-face {
2
- font-family: geomanist;
3
- src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.woff2);
4
- font-weight: 200;
5
- font-style: normal
2
+ font-family: 'geomanist';
3
+ src: url('https://static.radio.dpgmedia.net/fonts/joe/geomanist/geomanist-light.woff2') format('woff2');
4
+ font-weight: 200;
5
+ font-style: normal;
6
+ font-display: swap;
6
7
  }
7
8
 
8
9
  @font-face {
9
- font-family: geomanist;
10
- src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.woff2);
11
- font-weight: 300;
12
- font-style: normal
10
+ font-family: 'geomanist';
11
+ src: url('https://static.radio.dpgmedia.net/fonts/joe/geomanist/geomanist-book.woff2') format('woff2');
12
+ font-weight: 300;
13
+ font-style: normal;
14
+ font-display: swap;
13
15
  }
14
16
 
15
17
  @font-face {
16
- font-family: geomanist;
17
- src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.woff2);
18
- font-weight: 400;
19
- font-style: normal
18
+ font-family: 'geomanist';
19
+ src: url('https://static.radio.dpgmedia.net/fonts/joe/geomanist/geomanist-regular.woff2') format('woff2');
20
+ font-weight: 400;
21
+ font-style: normal;
22
+ font-display: swap;
20
23
  }
21
24
 
22
25
  @font-face {
23
- font-family: geomanist;
24
- src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.woff2);
25
- font-weight: 500;
26
- font-style: normal
26
+ font-family: 'geomanist';
27
+ src: url('https://static.radio.dpgmedia.net/fonts/joe/geomanist/geomanist-medium.woff2') format('woff2');
28
+ font-weight: 500;
29
+ font-style: normal;
30
+ font-display: swap;
27
31
  }
28
32
 
29
33
  @font-face {
30
- font-family: geomanist;
31
- src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.woff2);
32
- font-weight: 600;
33
- font-style: normal
34
+ font-family: 'geomanist';
35
+ src: url('https://static.radio.dpgmedia.net/fonts/joe/geomanist/geomanist-bold.woff2') format('woff2');
36
+ font-weight: 600;
37
+ font-style: normal;
38
+ font-display: swap;
34
39
  }
package/styles/fonts/qmusic.css CHANGED
@@ -1,51 +1,55 @@
1
1
  @font-face {
2
- font-family: Cervo;
3
- src: url(https://fonts.qmusic.be/cervo-light-webfont.ttf), url(https://fonts.qmusic.be/cervo-light-webfont.eot), url(https://fonts.qmusic.be/cervo-light-webfont.woff), url(https://fonts.qmusic.be/cervo-light-webfont.woff2), url(https://fonts.qmusic.be/cervo-light-webfont.svg);
4
- font-weight: 400;
5
- font-style: normal
2
+ font-family: 'Cervo';
3
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/cervo/cervo-light.woff2') format('woff2');
4
+ font-weight: 400;
5
+ font-style: normal;
6
+ font-display: swap;
6
7
  }
7
8
 
8
9
  @font-face {
9
- font-family: Cervo;
10
- src: url(https://fonts.qmusic.be/cervo-medium-webfont.ttf), url(https://fonts.qmusic.be/cervo-medium-webfont.eot), url(https://fonts.qmusic.be/cervo-medium-webfont.woff), url(https://fonts.qmusic.be/cervo-medium-webfont.woff2), url(https://fonts.qmusic.be/cervo-medium-webfont.svg);
11
- font-weight: 600;
12
- font-style: normal
10
+ font-family: 'Cervo';
11
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/cervo/cervo-medium.woff2') format('woff2');
12
+ font-weight: 600;
13
+ font-style: normal;
14
+ font-display: swap;
13
15
  }
14
16
 
15
17
  @font-face {
16
- font-family: Qarla;
17
- src: url(https://fonts.qmusic.be/qarla-bold-webfont.ttf), url(https://fonts.qmusic.be/qarla-bold-webfont.eot), url(https://fonts.qmusic.be/qarla-bold-webfont.woff), url(https://fonts.qmusic.be/qarla-bold-webfont.woff2), url(https://fonts.qmusic.be/qarla-bold-webfont.svg);
18
- font-weight: 700;
19
- font-style: normal
18
+ font-family: 'Qarla';
19
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/qarla/qarla-bold.woff2') format('woff2');
20
+ font-weight: 700;
21
+ font-style: normal;
22
+ font-display: swap;
20
23
  }
21
24
 
22
25
  @font-face {
23
- font-family: Qarla;
24
- src: url(https://fonts.qmusic.be/qarla-bolditalic-webfont.ttf), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.eot), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.woff), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.woff2), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.svg);
25
- font-weight: 700;
26
- font-style: italic
26
+ font-family: 'Qarla';
27
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/qarla/qarla-bolditalic.woff2') format('woff2');
28
+ font-weight: 700;
29
+ font-style: italic;
30
+ font-display: swap;
27
31
  }
28
32
 
29
33
  @font-face {
30
- font-family: Qarla;
31
- src: url(https://fonts.qmusic.be/qarla-italic-webfont.ttf), url(https://fonts.qmusic.be/qarla-italic-webfont.eot), url(https://fonts.qmusic.be/qarla-italic-webfont.woff), url(https://fonts.qmusic.be/qarla-italic-webfont.woff2), url(https://fonts.qmusic.be/qarla-italic-webfont.svg);
32
- font-weight: 400;
33
- font-style: italic
34
+ font-family: 'Qarla';
35
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/qarla/qarla-italic.woff2') format('woff2');
36
+ font-weight: 400;
37
+ font-style: italic;
38
+ font-display: swap;
34
39
  }
35
40
 
36
41
  @font-face {
37
- font-family: Qarla;
38
- src: url(https://fonts.qmusic.be/qarla-regular-webfont.ttf), url(https://fonts.qmusic.be/qarla-regular-webfont.eot), url(https://fonts.qmusic.be/qarla-regular-webfont.woff), url(https://fonts.qmusic.be/qarla-regular-webfont.woff2), url(https://fonts.qmusic.be/qarla-regular-webfont.svg);
39
- font-weight: 400;
40
- font-style: normal
42
+ font-family: 'Qarla';
43
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/qarla/qarla-regular.woff2') format('woff2');
44
+ font-weight: 400;
45
+ font-style: normal;
46
+ font-display: swap;
41
47
  }
42
48
 
43
49
  @font-face {
44
- font-family: BlackBones;
45
- src: url(https://fonts.qmusic.be/black-bones.ttf), url(https://fonts.qmusic.be/black-bones.eot), url(https://fonts.qmusic.be/black-bones.woff), url(https://fonts.qmusic.be/black-bones.woff2), url(https://fonts.qmusic.be/black-bones.svg);
46
- font-weight: normal;
47
- font-style: normal;
48
- font-display: fallback;
50
+ font-family: 'BlackBones';
51
+ src: url('https://static.radio.dpgmedia.net/fonts/qmusic/black-bones/black-bones.woff2') format('woff2');
52
+ font-weight: normal;
53
+ font-style: normal;
54
+ font-display: swap;
49
55
  }
50
-
51
-
package/styles/fonts/willy.css CHANGED
@@ -1,2 +1,79 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Anton&family=Mulish:ital,wght@0,400;0,700;1,400;1,700&display=swap");
2
- @import url("https://use.typekit.net/ijq2qjl.css");
1
+ @font-face {
2
+ font-family: 'Anton';
3
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/anton/anton-regular.woff2') format('woff2');
4
+ font-weight: 400;
5
+ font-style: normal;
6
+ font-display: swap;
7
+ }
8
+
9
+ @font-face {
10
+ font-family: 'Mulish';
11
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/mulish/mulish-variable.woff2') format('woff2');
12
+ font-weight: 400 700;
13
+ font-style: normal;
14
+ font-display: swap;
15
+ }
16
+
17
+ @font-face {
18
+ font-family: 'Mulish';
19
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/mulish/mulish-italic-variable.woff2') format('woff2');
20
+ font-weight: 400 700;
21
+ font-style: italic;
22
+ font-display: swap;
23
+ }
24
+
25
+ @font-face {
26
+ font-family: 'Rift';
27
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-light.woff2') format('woff2');
28
+ font-weight: 300;
29
+ font-style: normal;
30
+ font-display: swap;
31
+ }
32
+
33
+ @font-face {
34
+ font-family: 'Rift';
35
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-regular.woff2') format('woff2');
36
+ font-weight: 400;
37
+ font-style: normal;
38
+ font-display: swap;
39
+ }
40
+
41
+ @font-face {
42
+ font-family: 'Rift';
43
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-italic.woff2') format('woff2');
44
+ font-weight: 400;
45
+ font-style: italic;
46
+ font-display: swap;
47
+ }
48
+
49
+ @font-face {
50
+ font-family: 'Rift';
51
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-medium.woff2') format('woff2');
52
+ font-weight: 500;
53
+ font-style: normal;
54
+ font-display: swap;
55
+ }
56
+
57
+ @font-face {
58
+ font-family: 'Rift';
59
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-demi.woff2') format('woff2');
60
+ font-weight: 600;
61
+ font-style: normal;
62
+ font-display: swap;
63
+ }
64
+
65
+ @font-face {
66
+ font-family: 'Rift';
67
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-bold.woff2') format('woff2');
68
+ font-weight: 700;
69
+ font-style: normal;
70
+ font-display: swap;
71
+ }
72
+
73
+ @font-face {
74
+ font-family: 'Rift';
75
+ src: url('https://static.radio.dpgmedia.net/fonts/willy/rift/rift-bolditalic.woff2') format('woff2');
76
+ font-weight: 700;
77
+ font-style: italic;
78
+ font-display: swap;
79
+ }