@reykjavik/webtools 0.1.11 → 0.1.13
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/CHANGELOG.md +14 -0
- package/CookieHubConsent.d.ts +2 -2
- package/CookieHubConsent.js +2 -2
- package/README.md +195 -235
- package/esm/CookieHubConsent.d.ts +2 -2
- package/esm/CookieHubConsent.js +2 -2
- package/esm/fixIcelandicLocale.d.ts +1 -0
- package/esm/fixIcelandicLocale.js +21 -0
- package/esm/http.d.ts +3 -3
- package/esm/http.js +2 -2
- package/esm/index.d.ts +2 -0
- package/esm/next/SiteImprove.d.ts +4 -94
- package/esm/next/SiteImprove.js +12 -93
- package/esm/next/SiteImprove.privates.d.ts +100 -0
- package/esm/next/SiteImprove.privates.js +83 -0
- package/esm/next/http.d.ts +2 -2
- package/esm/next/http.js +3 -3
- package/esm/vanillaExtract.d.ts +46 -0
- package/esm/vanillaExtract.js +45 -0
- package/fixIcelandicLocale.d.ts +2 -0
- package/fixIcelandicLocale.js +21 -0
- package/http.d.ts +3 -3
- package/http.js +2 -2
- package/index.d.ts +2 -0
- package/next/SiteImprove.d.ts +4 -94
- package/next/SiteImprove.js +15 -96
- package/next/SiteImprove.privates.d.ts +100 -0
- package/next/SiteImprove.privates.js +91 -0
- package/next/http.d.ts +2 -2
- package/next/http.js +3 -3
- package/package.json +24 -1
- package/vanillaExtract.d.ts +46 -0
- package/vanillaExtract.js +53 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
- ... <!-- Add new lines here. -->
|
|
6
6
|
|
|
7
|
+
## 0.1.13
|
|
8
|
+
|
|
9
|
+
_2024-03-06_
|
|
10
|
+
|
|
11
|
+
- feat: Add `@reykjavik/webtools/fixIcelandicLocale` polyfill module
|
|
12
|
+
|
|
13
|
+
## 0.1.12
|
|
14
|
+
|
|
15
|
+
_2024-02-29_
|
|
16
|
+
|
|
17
|
+
- feat: Add `@reykjavik/webtools/next/vanillaExtract` component — with
|
|
18
|
+
plain-CSS injection helpers
|
|
19
|
+
- fix: Mark `peerDependencies` as optional
|
|
20
|
+
|
|
7
21
|
## 0.1.11
|
|
8
22
|
|
|
9
23
|
_2024-02-14_
|
package/CookieHubConsent.d.ts
CHANGED
|
@@ -218,14 +218,14 @@ export type CookieHubProviderProps = EitherObj<{
|
|
|
218
218
|
* management script and sets up a React state object with the relevant user
|
|
219
219
|
* consent flags.
|
|
220
220
|
*
|
|
221
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
221
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
|
|
222
222
|
*/
|
|
223
223
|
export declare const CookieHubProvider: (props: CookieHubProviderProps) => React.JSX.Element;
|
|
224
224
|
/**
|
|
225
225
|
* Returns up-to-date cookie consent flags. For use in React components or hook
|
|
226
226
|
* functions.
|
|
227
227
|
*
|
|
228
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
228
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
|
|
229
229
|
*/
|
|
230
230
|
export declare const useCookieHubConsent: () => Partial<CookieHubContextState['consent']>;
|
|
231
231
|
export {};
|
package/CookieHubConsent.js
CHANGED
|
@@ -61,7 +61,7 @@ const moveCookiehubScriptInDomTree = () => {
|
|
|
61
61
|
* management script and sets up a React state object with the relevant user
|
|
62
62
|
* consent flags.
|
|
63
63
|
*
|
|
64
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
64
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
|
|
65
65
|
*/
|
|
66
66
|
const CookieHubProvider = (props) => {
|
|
67
67
|
const [state, setState] = (0, react_1.useState)(initialConsentState);
|
|
@@ -134,7 +134,7 @@ exports.CookieHubProvider = CookieHubProvider;
|
|
|
134
134
|
* Returns up-to-date cookie consent flags. For use in React components or hook
|
|
135
135
|
* functions.
|
|
136
136
|
*
|
|
137
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
137
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
|
|
138
138
|
*/
|
|
139
139
|
const useCookieHubConsent = () => { var _a; return ((_a = (0, react_1.useContext)(CookieHubContext)) === null || _a === void 0 ? void 0 : _a.consent) || {}; };
|
|
140
140
|
exports.useCookieHubConsent = useCookieHubConsent;
|
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ yarn add @reykjavik/webtools
|
|
|
12
12
|
bun add @reykjavik/webtools
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
**
|
|
15
|
+
**Contents:**
|
|
16
16
|
|
|
17
17
|
<!-- prettier-ignore-start -->
|
|
18
18
|
|
|
@@ -22,21 +22,22 @@ bun add @reykjavik/webtools
|
|
|
22
22
|
- [`cacheControl` helper](#cachecontrol-helper)
|
|
23
23
|
- [Type `TTLConfig`](#type-ttlconfig)
|
|
24
24
|
- [`toSec` TTL helper](#tosec-ttl-helper)
|
|
25
|
-
- [`@reykjavik/webtools/next/http`](#reykjavikwebtoolsnexthttp)
|
|
26
|
-
- [`makeErrorizeAppHOC`](#makeerrorizeapphoc)
|
|
27
|
-
- [`showErrorPage` helper](#showerrorpage-helper)
|
|
28
|
-
- [`notModified304` helper](#notmodified304-helper)
|
|
29
25
|
- [`@reykjavik/webtools/CookieHubConsent`](#reykjavikwebtoolscookiehubconsent)
|
|
30
26
|
- [`CookieHubProvider` component](#cookiehubprovider-component)
|
|
31
27
|
- [`useCookieHubConsent`](#usecookiehubconsent)
|
|
32
|
-
- [`@reykjavik/webtools/
|
|
33
|
-
- [`
|
|
34
|
-
- [`
|
|
35
|
-
- [`
|
|
28
|
+
- [`@reykjavik/webtools/vanillaExtract`](#reykjavikwebtoolsvanillaextract)
|
|
29
|
+
- [`vanillaGlobal`](#vanillaglobal)
|
|
30
|
+
- [`vanillaProps`](#vanillaprops)
|
|
31
|
+
- [`vanillaClass`](#vanillaclass)
|
|
32
|
+
- [`vanillaClassNested`](#vanillaclassnested)
|
|
33
|
+
- [`vanillaNest`](#vanillanest)
|
|
34
|
+
- [`@reykjavik/webtools/fixIcelandicLocale`](#reykjavikwebtoolsfixicelandiclocale)
|
|
35
|
+
- [Framework Specific Tools](#framework-specific-tools)
|
|
36
|
+
- [Next.js Tools](#nextjs-tools)
|
|
36
37
|
- [Contributing](#contributing)
|
|
37
38
|
- [Changelog](#changelog)
|
|
38
39
|
|
|
39
|
-
<!-- prettier-ignore-
|
|
40
|
+
<!-- prettier-ignore-end -->
|
|
40
41
|
|
|
41
42
|
---
|
|
42
43
|
|
|
@@ -178,165 +179,6 @@ const ttlSec = toSec(ttl);
|
|
|
178
179
|
|
|
179
180
|
---
|
|
180
181
|
|
|
181
|
-
## `@reykjavik/webtools/next/http`
|
|
182
|
-
|
|
183
|
-
Contains HTTP helpers for Next.js projects
|
|
184
|
-
|
|
185
|
-
Re-exports all of the base [http module](#reykjaviktoolshttp)'s exports, for
|
|
186
|
-
convenience
|
|
187
|
-
|
|
188
|
-
### `makeErrorizeAppHOC`
|
|
189
|
-
|
|
190
|
-
**Syntax:**
|
|
191
|
-
`makeErrorizeAppHOC(ErrorPageComponent: ComponentType<EP>): (App: AppType<P>) => AppType<P | EP>`
|
|
192
|
-
|
|
193
|
-
Hhigher-order component (HOC) factory for Next.js App compnents to handle
|
|
194
|
-
cases when `getServerSideProps` returns an `__error` prop with `statusCode`
|
|
195
|
-
and optional friendly `message`.
|
|
196
|
-
|
|
197
|
-
Pass in an error-page compnent, and receive a HOC function that wraps any
|
|
198
|
-
Next.js App compnent. The HOC also has a type-safe
|
|
199
|
-
[`.showErrorPage`](#showerrorizedpage-helper) helper method to use inside
|
|
200
|
-
`getServerSideProps` in order to trigger display of the error page.
|
|
201
|
-
|
|
202
|
-
Set up the error page for your app:
|
|
203
|
-
|
|
204
|
-
```tsx
|
|
205
|
-
// src/helpers/myerrors.js
|
|
206
|
-
|
|
207
|
-
import {
|
|
208
|
-
makeErrorizeAppHOC,
|
|
209
|
-
ErrorProps,
|
|
210
|
-
InferErrorPageProps,
|
|
211
|
-
} from '@reykjavik/webtools/next/http';
|
|
212
|
-
|
|
213
|
-
type MyErrorPageProps = ErrorProps & {
|
|
214
|
-
/* ...custom props... */
|
|
215
|
-
};
|
|
216
|
-
const MyErrorPage = (props: MyErrorPageProps) => {
|
|
217
|
-
const { statusCode, message /* plus your custom props */ } = props;
|
|
218
|
-
return (
|
|
219
|
-
<div>
|
|
220
|
-
<h1>{statusCode}</h1>
|
|
221
|
-
{message && <p>{message}</p>}
|
|
222
|
-
</div>
|
|
223
|
-
);
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
// Generate and export the HOC
|
|
227
|
-
export const withMyErrorHandling = makeErrorizeAppHOC(MyErrorPage);
|
|
228
|
-
// Export the gSSP helper
|
|
229
|
-
export const showErrorPage = withMyErrorHandling.showErrorPage;
|
|
230
|
-
// Export the props type of the error page
|
|
231
|
-
export type ErrorPageProps = InferErrorPageProps<typeof showErrorPage>;
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
Wrap `_app.tsx` with the HOC you generated:
|
|
235
|
-
|
|
236
|
-
```jsx
|
|
237
|
-
// src/pages/_app.js
|
|
238
|
-
|
|
239
|
-
import { withMyErrorHandling } from '~/helpers/myerrors';
|
|
240
|
-
|
|
241
|
-
const App = ({ Component, pageProps }: AppProps<PageProps>) => {
|
|
242
|
-
// ...define your App component as normal...
|
|
243
|
-
};
|
|
244
|
-
|
|
245
|
-
export default withMyErrorHandling(App);
|
|
246
|
-
```
|
|
247
|
-
|
|
248
|
-
Return errors inside your page/route modules, using `showErrorPage`
|
|
249
|
-
|
|
250
|
-
```tsx
|
|
251
|
-
// src/pages/index.js
|
|
252
|
-
|
|
253
|
-
import type { GetServerSideProps } from 'next';
|
|
254
|
-
import { showErrorPage, ErrorPageProps } from '~/helpers/errors';
|
|
255
|
-
|
|
256
|
-
type MyPageProps = {};
|
|
257
|
-
// Export the page component
|
|
258
|
-
export default function MyPage(props: MyPageProps) {
|
|
259
|
-
// ...
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
export const getServerSideProps: GetServerSideProps<
|
|
263
|
-
MyPageProps | ErrorPageProps
|
|
264
|
-
> = async (ctx) => {
|
|
265
|
-
// ...fetch data from api
|
|
266
|
-
if (!apiRes.error === 'unauthorized') {
|
|
267
|
-
return showErrorPage(ctx.res, {
|
|
268
|
-
statusCode: HTTP_400_BadRequest,
|
|
269
|
-
// ...Add other custom MyErrorPage props
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
// ...return normal, happy page props.
|
|
273
|
-
};
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
See more below
|
|
277
|
-
|
|
278
|
-
### `showErrorPage` helper
|
|
279
|
-
|
|
280
|
-
**Syntax:**
|
|
281
|
-
`showErrorPage = (response: ServerResponse | NextContext, error: HTTP_ERROR | ErrorProps, ttl?: TTL | TTLConfig): void`
|
|
282
|
-
|
|
283
|
-
This method is attached to the HOC returned by
|
|
284
|
-
[`makeErrorizeAppHOC`](#makeerrorizeapphoc). Use it inside your pages'
|
|
285
|
-
`getServerSideProps` to return the appropriate an "error" props, including a
|
|
286
|
-
HTTP `statusCode`, etc.
|
|
287
|
-
|
|
288
|
-
```js
|
|
289
|
-
import { showErrorPage, ErrorPageProps } from '~/helpers/myerrors';
|
|
290
|
-
|
|
291
|
-
// ...then, somewhere inside getServerSideProps
|
|
292
|
-
if (invalidParams) {
|
|
293
|
-
return showErrorPage(
|
|
294
|
-
res,
|
|
295
|
-
{
|
|
296
|
-
statusCode: HTTP_400_BadRequest,
|
|
297
|
-
message: 'You passed me bad params :-(', // optional message
|
|
298
|
-
// ...Add other custom MyErrorPage props
|
|
299
|
-
},
|
|
300
|
-
'permanent'
|
|
301
|
-
);
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
if (!apiRes.error === 'unauthorized') {
|
|
305
|
-
// Optional `statusCode` shorthand signature, available if your
|
|
306
|
-
// error page has no required props (other than `statusCode`).
|
|
307
|
-
return showErrorPage(res, HTTP_403_Forbidden);
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
// ...return normal, happy page props.
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
The `ttl` parameter defaults to `'2s'`, but you can pass any
|
|
314
|
-
[`TTLConfig`](#type-ttlconfig).
|
|
315
|
-
|
|
316
|
-
### `notModified304` helper
|
|
317
|
-
|
|
318
|
-
**Syntax:** `notModified304(response: ServerResponse | NextContext): void`
|
|
319
|
-
|
|
320
|
-
Use this method to inside a `getServerSideProps` method (or API route) to
|
|
321
|
-
return a `HTTP_304_NotModified` response with an empty props object, in a way
|
|
322
|
-
that doesn't make TypeScript shout at you.
|
|
323
|
-
|
|
324
|
-
(Turns out that when a 304 status is returned, then Next.js doesn't even
|
|
325
|
-
attempt to render the Page compnoent, so the returned props don't matter.
|
|
326
|
-
TypeScript, however, doesn't know that.)
|
|
327
|
-
|
|
328
|
-
```js
|
|
329
|
-
import { notModified304 } from '@reykjavik/webtools/next/http';
|
|
330
|
-
|
|
331
|
-
// ...then, somewhere inside getServerSideProps
|
|
332
|
-
const notModified = data.modifiedTimestamp === req.headers['if-none-match'];
|
|
333
|
-
if (notModified) {
|
|
334
|
-
return notModified304(res);
|
|
335
|
-
}
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
---
|
|
339
|
-
|
|
340
182
|
## `@reykjavik/webtools/CookieHubConsent`
|
|
341
183
|
|
|
342
184
|
Contains React helpers for loading CookieHub's consent manager and reading
|
|
@@ -410,96 +252,218 @@ this hook will return an empty object.
|
|
|
410
252
|
|
|
411
253
|
---
|
|
412
254
|
|
|
413
|
-
## `@reykjavik/webtools/
|
|
414
|
-
|
|
415
|
-
Contains React helpers for loading SiteImprove's analytics scripts in Next.js
|
|
416
|
-
applications and perform custom event tracking.
|
|
255
|
+
## `@reykjavik/webtools/vanillaExtract`
|
|
417
256
|
|
|
418
|
-
|
|
257
|
+
Contains helpers for writing [vanilla-extract](https://vanilla-extract.style)
|
|
258
|
+
styles using plain CSS styntax.
|
|
419
259
|
|
|
420
|
-
|
|
421
|
-
|
|
260
|
+
This provides an "escape hatch" into regular CSS, when you're willing to trade
|
|
261
|
+
local type-safety for access to the full features and expressiveness of real
|
|
262
|
+
CSS.
|
|
263
|
+
([Background info](https://github.com/vanilla-extract-css/vanilla-extract/discussions/898#discussioncomment-7125457).)
|
|
422
264
|
|
|
423
|
-
|
|
265
|
+
### `vanillaGlobal`
|
|
424
266
|
|
|
425
|
-
|
|
267
|
+
**Syntax:** `vanillaGlobal: (css: string) => void`
|
|
426
268
|
|
|
427
|
-
|
|
428
|
-
import { SiteImprove } from '@reykjavik/webtools/next/SiteImprove';
|
|
269
|
+
Inserts free-form CSS as a vanilla-extract `globalStyle`.
|
|
429
270
|
|
|
430
|
-
|
|
271
|
+
```ts
|
|
272
|
+
// someFile.css.ts
|
|
273
|
+
import { vanillaGlobal } from '@reykjavik/webtools/vanillaExtract';
|
|
431
274
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
accountId={siteImproveAccountId}
|
|
436
|
-
onError={(error) =>
|
|
437
|
-
Logger('error', 'An error occured initializing siteimprove', error)
|
|
275
|
+
vanillaGlobal(`
|
|
276
|
+
body {
|
|
277
|
+
background-color: rebeccapurple;
|
|
438
278
|
}
|
|
439
|
-
|
|
279
|
+
`);
|
|
440
280
|
```
|
|
441
281
|
|
|
442
|
-
|
|
443
|
-
forcefully suppress loading the analytics script.
|
|
282
|
+
### `vanillaProps`
|
|
444
283
|
|
|
445
|
-
|
|
446
|
-
events to the console.
|
|
284
|
+
**Syntax:** `vanillaProps: (css: string) => GlobalStyleRule`
|
|
447
285
|
|
|
448
|
-
|
|
286
|
+
Spreads the return value into a style object, to inject free-form CSS
|
|
287
|
+
properties (or nested blocks)
|
|
449
288
|
|
|
450
|
-
|
|
451
|
-
|
|
289
|
+
```ts
|
|
290
|
+
// someFile.css.ts
|
|
291
|
+
import { style } from '@vanilla-extract/css';
|
|
292
|
+
import { vanillaProps } from '@reykjavik/webtools/vanillaExtract';
|
|
452
293
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
(alternative to `accountId` prop).
|
|
457
|
-
- `hasConstented?: boolean` — Manual GDPR 'analytics' consent flag. Allows
|
|
458
|
-
hard opt-out, but defers to
|
|
459
|
-
[`CookieHubProvider` values](#usecookiehubconsent) if they are available.
|
|
460
|
-
- `onLoad?: (e: unknown) => void` — Fires when the script has loaded.
|
|
461
|
-
- `onError?: (e: unknown) => void` — Fires if loading the script failed.
|
|
294
|
+
const myStyle = style({
|
|
295
|
+
color: 'darksalmon',
|
|
296
|
+
// ...other style props...
|
|
462
297
|
|
|
463
|
-
|
|
298
|
+
...vanillaProps(`
|
|
299
|
+
/* Plain CSS that's injected into the "myStyle" style block */
|
|
300
|
+
border-bottom: 1px solid red;
|
|
301
|
+
color: ${theme.color.primary}; /* I can still use typesafe values */
|
|
302
|
+
random-css-prop-normally-rejected-by-vanilla-extract: 'YOLO!';
|
|
303
|
+
`),
|
|
304
|
+
});
|
|
305
|
+
```
|
|
464
306
|
|
|
465
|
-
|
|
466
|
-
`pingSiteImprove(category: string, action: string, label?: string): void`
|
|
307
|
+
### `vanillaClass`
|
|
467
308
|
|
|
468
|
-
|
|
309
|
+
**Syntax:** `vanillaClass: (css: string) => string`
|
|
310
|
+
**Syntax:** `vanillaClass: (debugId: string, css: string) => string`
|
|
469
311
|
|
|
470
|
-
|
|
312
|
+
Returns a scoped cssClassName styled with free-form CSS. This function is a
|
|
313
|
+
thin wrapper around vanilla-extract's `style` function.
|
|
471
314
|
|
|
472
|
-
```
|
|
473
|
-
|
|
315
|
+
```ts
|
|
316
|
+
// someFile.css.ts
|
|
317
|
+
import { vanillaClass } from '@reykjavik/webtools/vanillaExtract';
|
|
474
318
|
|
|
475
|
-
const
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
319
|
+
export const myClass = vanillaClass(`
|
|
320
|
+
background-color: #ccc;
|
|
321
|
+
padding: .5em 1em;
|
|
322
|
+
`);
|
|
323
|
+
|
|
324
|
+
export const humanReadableClass = vanillaClass(
|
|
325
|
+
'HumanReadable',
|
|
326
|
+
`
|
|
327
|
+
border: 1px dashed hotpink;
|
|
328
|
+
cursor: pointer;
|
|
329
|
+
`
|
|
330
|
+
);
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
### `vanillaClassNested`
|
|
334
|
+
|
|
335
|
+
**Syntax:** `vanillaClassNested: (css: string) => string`
|
|
336
|
+
**Syntax:** `vanillaClassNested: (debugId: string, css: string) => string`
|
|
337
|
+
|
|
338
|
+
Returns a scoped cssClassName styled with free-form CSS.
|
|
339
|
+
|
|
340
|
+
It also automatically replaces all `&`-tokens with the selector for the
|
|
341
|
+
auto-generated class-name.
|
|
342
|
+
|
|
343
|
+
```ts
|
|
344
|
+
// someFile.css.ts
|
|
345
|
+
import { vanillaClassNested } from '@reykjavik/webtools/vanillaExtract';
|
|
346
|
+
|
|
347
|
+
export const myClass = vanillaClassNested(`
|
|
348
|
+
background-color: #ccc;
|
|
349
|
+
padding: .5em 1em;
|
|
350
|
+
|
|
351
|
+
/* Nested blocks begin: */
|
|
352
|
+
&:hover {
|
|
353
|
+
background-color: #666;
|
|
354
|
+
color: white;
|
|
479
355
|
}
|
|
480
|
-
|
|
356
|
+
& > strong {
|
|
357
|
+
color: maroon;
|
|
358
|
+
}
|
|
359
|
+
html[data-color-theme="unicorn"] & {
|
|
360
|
+
background-color: pink;
|
|
361
|
+
}
|
|
362
|
+
`);
|
|
481
363
|
```
|
|
482
364
|
|
|
483
|
-
|
|
365
|
+
**NOTE:** All "bare" (un-nested) style properties **must come first**, before
|
|
366
|
+
any nested blocks.
|
|
367
|
+
|
|
368
|
+
**NOTE 2:** `vanillaClassNested` does NOT support deeply nested blocks, or
|
|
369
|
+
anything so fancy. It will also replace `&` characters inside values,
|
|
370
|
+
comments, etc. If you need something more sophisticated, use a custom
|
|
371
|
+
`postcss` config.
|
|
372
|
+
|
|
373
|
+
### `vanillaNest`
|
|
374
|
+
|
|
375
|
+
**Syntax:** `vanillaNest: (ampSelector: string, css: string) => string`
|
|
376
|
+
|
|
377
|
+
Replaces all `&` tokens with the given selector string, in a direct (read.
|
|
378
|
+
"dumb") way. It's mainly useful when used with style-mixins, etc.
|
|
379
|
+
|
|
380
|
+
`vanillaNest` does NOT support deeply nested blocks, or anything so fancy. It
|
|
381
|
+
will also replace `&` characters inside values, comments, etc. If you need
|
|
382
|
+
something more sophisticated, use a custom `postcss` config.
|
|
383
|
+
|
|
384
|
+
```ts
|
|
385
|
+
// someCssHelper.ts
|
|
386
|
+
import { vanillaNest } from '@reykjavik/webtools/vanillaExtract';
|
|
387
|
+
|
|
388
|
+
export const hoverGlow = (
|
|
389
|
+
ampSelector: string,
|
|
390
|
+
glowiness?: 'normal' | 'insane'
|
|
391
|
+
) =>
|
|
392
|
+
vanillaNest(
|
|
393
|
+
ampSelector,
|
|
394
|
+
`
|
|
395
|
+
&:hover {
|
|
396
|
+
box-shadow: 0 0 20px 5px ${
|
|
397
|
+
glowiness === 'insane' ? 'hotpink' : 'salmon'
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
`
|
|
401
|
+
);
|
|
484
402
|
|
|
485
|
-
|
|
403
|
+
// ...then, somewhere else in a *.css.ts file:
|
|
486
404
|
|
|
487
|
-
|
|
488
|
-
|
|
405
|
+
import { hoverGlow } from '~/someCssHelper.js';
|
|
406
|
+
import { vanillaGlobal } from '@reykjavik/webtools/vanillaExtract';
|
|
489
407
|
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
// perform submit action...
|
|
495
|
-
if (success) {
|
|
496
|
-
const fileUrl = '/download/report.pdf';
|
|
497
|
-
pingSiteImproveOutbound(fileUrl);
|
|
498
|
-
document.location.href = fileUrl;
|
|
408
|
+
vanillaGlobal(`
|
|
409
|
+
.MyComponent {
|
|
410
|
+
border: 1px solid #ccc;
|
|
411
|
+
padding: 1em;
|
|
499
412
|
}
|
|
500
|
-
}
|
|
413
|
+
${hoverGlow('.MyComponent')}
|
|
414
|
+
|
|
415
|
+
.MyOtherComponent {
|
|
416
|
+
border: 1px solid #ccc;
|
|
417
|
+
padding: 1em;
|
|
418
|
+
}
|
|
419
|
+
${hoverGlow('.MyOtherComponent', 'insane')}
|
|
420
|
+
`);
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
(This low-level utility function is used internally by
|
|
424
|
+
[`vanillaClassNested`](#vanillaclassnested).)
|
|
425
|
+
|
|
426
|
+
---
|
|
427
|
+
|
|
428
|
+
## `@reykjavik/webtools/fixIcelandicLocale`
|
|
429
|
+
|
|
430
|
+
Polyfill for `String.prototype.localeCompare` to provide support for the
|
|
431
|
+
`'is'` locale in browsers that don't support it (\*cough* Chrome \*cough*).
|
|
432
|
+
|
|
433
|
+
At the top of your app's entry point, "side-effect import" this module to
|
|
434
|
+
apply the polyfill:
|
|
435
|
+
|
|
436
|
+
```ts
|
|
437
|
+
import '@reykjavik/webtools/fixIcelandicLocale';
|
|
438
|
+
|
|
439
|
+
// Then continue with your day
|
|
440
|
+
// and use `localeCompare` as you normally would...
|
|
501
441
|
```
|
|
502
442
|
|
|
443
|
+
**NOTE** The polyfill is only applied in engines that fail a simple feature
|
|
444
|
+
test.
|
|
445
|
+
|
|
446
|
+
---
|
|
447
|
+
|
|
448
|
+
## Framework Specific Tools
|
|
449
|
+
|
|
450
|
+
---
|
|
451
|
+
|
|
452
|
+
<!-- #fragment anchors to not break older v0.1 @see links -->
|
|
453
|
+
|
|
454
|
+
<a name="reykjavikwebtoolsnexthttp"></a> <a name="makeerrorizeapphoc"></a>
|
|
455
|
+
<a name="showerrorpage-helper"></a> <a name="notmodified304-helper"></a>
|
|
456
|
+
<a name="reykjavikwebtoolsnextsiteimprove"></a>
|
|
457
|
+
<a name="siteimprove-component"></a> <a name="pingsiteimprove-helper"></a>
|
|
458
|
+
<a name="pingsiteimproveoutbound-helper"></a>
|
|
459
|
+
|
|
460
|
+
### Next.js Tools
|
|
461
|
+
|
|
462
|
+
This package contains some helpers and components that are specifically
|
|
463
|
+
designed for use in [Next.js](https://nextjs.org/) projects.
|
|
464
|
+
|
|
465
|
+
See [README-nextjs.md](README-nextjs.md) for more info.
|
|
466
|
+
|
|
503
467
|
---
|
|
504
468
|
|
|
505
469
|
## Contributing
|
|
@@ -507,7 +471,7 @@ const handleSubmit = () => {
|
|
|
507
471
|
This project uses the [Bun runtime](https://bun.sh) for development (tests,
|
|
508
472
|
build, etc.)
|
|
509
473
|
|
|
510
|
-
PRs are
|
|
474
|
+
PRs are welcome!
|
|
511
475
|
|
|
512
476
|
---
|
|
513
477
|
|
|
@@ -515,7 +479,3 @@ PRs are welcoms!
|
|
|
515
479
|
|
|
516
480
|
See
|
|
517
481
|
[CHANGELOG.md](https://github.com/reykjavikcity/webtools/blob/main/CHANGELOG.md)
|
|
518
|
-
|
|
519
|
-
```
|
|
520
|
-
|
|
521
|
-
```
|
|
@@ -218,14 +218,14 @@ export type CookieHubProviderProps = EitherObj<{
|
|
|
218
218
|
* management script and sets up a React state object with the relevant user
|
|
219
219
|
* consent flags.
|
|
220
220
|
*
|
|
221
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
221
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
|
|
222
222
|
*/
|
|
223
223
|
export declare const CookieHubProvider: (props: CookieHubProviderProps) => React.JSX.Element;
|
|
224
224
|
/**
|
|
225
225
|
* Returns up-to-date cookie consent flags. For use in React components or hook
|
|
226
226
|
* functions.
|
|
227
227
|
*
|
|
228
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
228
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
|
|
229
229
|
*/
|
|
230
230
|
export declare const useCookieHubConsent: () => Partial<CookieHubContextState['consent']>;
|
|
231
231
|
export {};
|
package/esm/CookieHubConsent.js
CHANGED
|
@@ -35,7 +35,7 @@ const moveCookiehubScriptInDomTree = () => {
|
|
|
35
35
|
* management script and sets up a React state object with the relevant user
|
|
36
36
|
* consent flags.
|
|
37
37
|
*
|
|
38
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
38
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
|
|
39
39
|
*/
|
|
40
40
|
export const CookieHubProvider = (props) => {
|
|
41
41
|
const [state, setState] = useState(initialConsentState);
|
|
@@ -107,6 +107,6 @@ export const CookieHubProvider = (props) => {
|
|
|
107
107
|
* Returns up-to-date cookie consent flags. For use in React components or hook
|
|
108
108
|
* functions.
|
|
109
109
|
*
|
|
110
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
110
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
|
|
111
111
|
*/
|
|
112
112
|
export const useCookieHubConsent = () => { var _a; return ((_a = useContext(CookieHubContext)) === null || _a === void 0 ? void 0 : _a.consent) || {}; };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const locAliases = {
|
|
2
|
+
// Danish is good enough substitution for Icelandic
|
|
3
|
+
is: 'da',
|
|
4
|
+
'is-is': 'da',
|
|
5
|
+
};
|
|
6
|
+
const mapLocales = (locales) => {
|
|
7
|
+
locales = typeof locales === 'string' ? [locales] : locales || [];
|
|
8
|
+
return locales.map((loc) => locAliases[loc.toLowerCase()] || loc);
|
|
9
|
+
};
|
|
10
|
+
// ---------------------------------------------------------------------------
|
|
11
|
+
if ( /*#__PURE__*/'ö'.localeCompare('p', 'is') < 0) {
|
|
12
|
+
const _localeCompare = String.prototype.localeCompare;
|
|
13
|
+
/**
|
|
14
|
+
* Polyfill for String.prototype.localeCompare for the 'is' locale
|
|
15
|
+
* in browsers that don't support it (\*cough* Chrome \*cough*).
|
|
16
|
+
*/
|
|
17
|
+
String.prototype.localeCompare = function (that, locales, options) {
|
|
18
|
+
return _localeCompare.call(this, that, mapLocales(locales), options);
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
export {};
|
package/esm/http.d.ts
CHANGED
|
@@ -153,21 +153,21 @@ type TTLObj = {
|
|
|
153
153
|
/**
|
|
154
154
|
* Configures quick TTL-related settings for a HTTP request object
|
|
155
155
|
*
|
|
156
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
156
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#type-ttlconfig
|
|
157
157
|
*/
|
|
158
158
|
export type TTLConfig = TTL | TTLKeywords | TTLObj;
|
|
159
159
|
/**
|
|
160
160
|
* Converts a `TTL` (max-age) value into seconds, and returns `0` for bad
|
|
161
161
|
* and/or negative input values.
|
|
162
162
|
*
|
|
163
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
163
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#tosec-ttl-helper
|
|
164
164
|
*/
|
|
165
165
|
export declare const toSec: (ttl: TTL) => number;
|
|
166
166
|
/**
|
|
167
167
|
* Use this function to quickly set the `Cache-Control` header with a `max-age=`
|
|
168
168
|
* on a HTTP response
|
|
169
169
|
*
|
|
170
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
170
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#getcssbundleurl
|
|
171
171
|
*/
|
|
172
172
|
export declare const cacheControl: (response: ServerResponse | {
|
|
173
173
|
res: ServerResponse;
|
package/esm/http.js
CHANGED
|
@@ -136,7 +136,7 @@ const unitToSeconds = {
|
|
|
136
136
|
* Converts a `TTL` (max-age) value into seconds, and returns `0` for bad
|
|
137
137
|
* and/or negative input values.
|
|
138
138
|
*
|
|
139
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
139
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#tosec-ttl-helper
|
|
140
140
|
*/
|
|
141
141
|
export const toSec = (ttl) => {
|
|
142
142
|
if (typeof ttl === 'string') {
|
|
@@ -168,7 +168,7 @@ const setCC = (response, cc) => {
|
|
|
168
168
|
* Use this function to quickly set the `Cache-Control` header with a `max-age=`
|
|
169
169
|
* on a HTTP response
|
|
170
170
|
*
|
|
171
|
-
* @see https://github.com/reykjavikcity/webtools/
|
|
171
|
+
* @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#getcssbundleurl
|
|
172
172
|
*/
|
|
173
173
|
// eslint-disable-next-line complexity
|
|
174
174
|
export const cacheControl = (response, ttlCfg, eTag) => {
|
package/esm/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
/// <reference path="./vanillaExtract.d.ts" />
|
|
1
2
|
/// <reference path="./http.d.ts" />
|
|
3
|
+
/// <reference path="./fixIcelandicLocale.d.ts" />
|
|
2
4
|
/// <reference path="./CookieHubConsent.d.tsx" />
|
|
3
5
|
/// <reference path="./next/SiteImprove.d.tsx" />
|
|
4
6
|
/// <reference path="./next/http.d.tsx" />
|