react-datocms 2.0.1 → 2.2.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 +143 -58
- package/dist/cjs/Seo/__tests__/index.test.js +272 -37
- package/dist/cjs/Seo/__tests__/index.test.js.map +1 -1
- package/dist/cjs/Seo/index.js +13 -60
- package/dist/cjs/Seo/index.js.map +1 -1
- package/dist/cjs/Seo/remixUtils.js +33 -0
- package/dist/cjs/Seo/remixUtils.js.map +1 -0
- package/dist/cjs/Seo/renderMetaTags.js +40 -0
- package/dist/cjs/Seo/renderMetaTags.js.map +1 -0
- package/dist/cjs/Seo/renderMetaTagsToString.js +22 -0
- package/dist/cjs/Seo/renderMetaTagsToString.js.map +1 -0
- package/dist/cjs/Seo/types.js +5 -0
- package/dist/cjs/Seo/types.js.map +1 -0
- package/dist/cjs/StructuredText/__tests__/index.test.js +77 -67
- package/dist/cjs/StructuredText/__tests__/index.test.js.map +1 -1
- package/dist/cjs/StructuredText/index.js +76 -61
- package/dist/cjs/StructuredText/index.js.map +1 -1
- package/dist/cjs/useQuerySubscription/index.js +1 -1
- package/dist/cjs/useQuerySubscription/index.js.map +1 -1
- package/dist/esm/Seo/__tests__/index.test.js +271 -36
- package/dist/esm/Seo/__tests__/index.test.js.map +1 -1
- package/dist/esm/Seo/index.d.ts +4 -12
- package/dist/esm/Seo/index.js +4 -55
- package/dist/esm/Seo/index.js.map +1 -1
- package/dist/esm/Seo/remixUtils.d.ts +6 -0
- package/dist/esm/Seo/remixUtils.js +29 -0
- package/dist/esm/Seo/remixUtils.js.map +1 -0
- package/dist/esm/Seo/renderMetaTags.d.ts +3 -0
- package/dist/esm/Seo/renderMetaTags.js +33 -0
- package/dist/esm/Seo/renderMetaTags.js.map +1 -0
- package/dist/esm/Seo/renderMetaTagsToString.d.ts +2 -0
- package/dist/esm/Seo/renderMetaTagsToString.js +18 -0
- package/dist/esm/Seo/renderMetaTagsToString.js.map +1 -0
- package/dist/esm/Seo/types.d.ts +37 -0
- package/dist/esm/Seo/types.js +4 -0
- package/dist/esm/Seo/types.js.map +1 -0
- package/dist/esm/StructuredText/__tests__/index.test.js +81 -71
- package/dist/esm/StructuredText/__tests__/index.test.js.map +1 -1
- package/dist/esm/StructuredText/index.d.ts +12 -7
- package/dist/esm/StructuredText/index.js +78 -63
- package/dist/esm/StructuredText/index.js.map +1 -1
- package/dist/esm/useQuerySubscription/index.js +1 -1
- package/dist/esm/useQuerySubscription/index.js.map +1 -1
- package/dist/types/Seo/index.d.ts +4 -12
- package/dist/types/Seo/remixUtils.d.ts +6 -0
- package/dist/types/Seo/renderMetaTags.d.ts +3 -0
- package/dist/types/Seo/renderMetaTagsToString.d.ts +2 -0
- package/dist/types/Seo/types.d.ts +37 -0
- package/dist/types/StructuredText/index.d.ts +12 -7
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -28,15 +28,18 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
28
28
|
- [Usage](#usage)
|
|
29
29
|
- [Example](#example-1)
|
|
30
30
|
- [Props](#props)
|
|
31
|
+
- [Layout mode](#layout-mode)
|
|
31
32
|
- [The `ResponsiveImage` object](#the-responsiveimage-object)
|
|
32
33
|
- [Social share, SEO and Favicon meta tags](#social-share-seo-and-favicon-meta-tags)
|
|
33
|
-
- [
|
|
34
|
-
- [
|
|
34
|
+
- [`renderMetaTags()`](#rendermetatags)
|
|
35
|
+
- [`renderMetaTagsToString()`](#rendermetatagstostring)
|
|
36
|
+
- [`toRemixMeta()`](#toremixmeta)
|
|
35
37
|
- [Structured text](#structured-text)
|
|
36
38
|
- [Basic usage](#basic-usage)
|
|
37
39
|
- [Custom renderers for inline records, blocks, and links](#custom-renderers-for-inline-records-blocks-and-links)
|
|
38
|
-
- [Override default
|
|
40
|
+
- [Override default rendering of nodes](#override-default-rendering-of-nodes)
|
|
39
41
|
- [Props](#props-1)
|
|
42
|
+
- [Development](#development)
|
|
40
43
|
|
|
41
44
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
42
45
|
|
|
@@ -252,23 +255,27 @@ export default withQuery(query)(Page);
|
|
|
252
255
|
| onLoad | () => void | :x: | Function triggered when the image has finished loading | undefined |
|
|
253
256
|
| usePlaceholder | Boolean | :x: | Whether the component should use a blurred image placeholder | true |
|
|
254
257
|
|
|
255
|
-
|
|
256
258
|
### Layout mode
|
|
257
259
|
|
|
258
260
|
With the `layout` property, you can configure the behavior of the image as the viewport changes size:
|
|
259
261
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
262
|
+
- When `intrinsic` (default behaviour), the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
|
|
263
|
+
- When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
|
|
264
|
+
- When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
|
|
265
|
+
- When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
|
|
266
|
+
- This is usually paired with the `objectFit` and `objectPosition` properties.
|
|
267
|
+
- Ensure the parent element has `position: relative` in their stylesheet.
|
|
266
268
|
|
|
267
269
|
Example for `layout="fill"` (useful also for background images):
|
|
268
270
|
|
|
269
271
|
```jsx
|
|
270
272
|
<div style={{ position: 'relative', width: 200, height: 500 }}>
|
|
271
|
-
<Image
|
|
273
|
+
<Image
|
|
274
|
+
data={imageData}
|
|
275
|
+
layout="fill"
|
|
276
|
+
objectFit="cover"
|
|
277
|
+
objectPosition="50% 50%"
|
|
278
|
+
/>
|
|
272
279
|
</div>
|
|
273
280
|
```
|
|
274
281
|
|
|
@@ -299,59 +306,131 @@ Here's a complete recap of what `responsiveImage` offers:
|
|
|
299
306
|
|
|
300
307
|
# Social share, SEO and Favicon meta tags
|
|
301
308
|
|
|
302
|
-
Just like the image component
|
|
309
|
+
Just like for the image component this package offers a number of utilities designed to work seamlessly with DatoCMS’s [`_seoMetaTags` and `faviconMetaTags` GraphQL queries](https://www.datocms.com/docs/content-delivery-api/seo) so that you can easily handle SEO, social shares and favicons in your pages.
|
|
303
310
|
|
|
304
|
-
|
|
305
|
-
- Compatible with any GraphQL library (Apollo, graphql-hooks, graphql-request, etc.);
|
|
306
|
-
- Usable both client and server side;
|
|
307
|
-
- Compatible with vanilla React, Next.js and pretty much any other React-based solution;
|
|
311
|
+
All the utilities take an array of `SeoOrFaviconTag`s in the exact form they're returned by the following [DatoCMS GraphQL API queries](https://www.datocms.com/docs/content-delivery-api/seo):
|
|
308
312
|
|
|
309
|
-
|
|
313
|
+
- `_seoMetaTags` (always available on any type of record)
|
|
314
|
+
- `faviconMetaTags` on the global `_site` object.
|
|
310
315
|
|
|
311
|
-
|
|
316
|
+
```graphql
|
|
317
|
+
query {
|
|
318
|
+
page: homepage {
|
|
319
|
+
title
|
|
320
|
+
seo: _seoMetaTags {
|
|
321
|
+
attributes
|
|
322
|
+
content
|
|
323
|
+
tag
|
|
324
|
+
}
|
|
325
|
+
}
|
|
312
326
|
|
|
313
|
-
|
|
314
|
-
|
|
327
|
+
site: _site {
|
|
328
|
+
favicon: faviconMetaTags {
|
|
329
|
+
attributes
|
|
330
|
+
content
|
|
331
|
+
tag
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
```
|
|
315
336
|
|
|
316
|
-
You can
|
|
337
|
+
You can then concat those two arrays of tags and pass them togheter to the function, ie:
|
|
317
338
|
|
|
318
|
-
|
|
339
|
+
```js
|
|
340
|
+
renderMetaTags([...data.page.seo, ...data.site.favicon]);
|
|
341
|
+
```
|
|
319
342
|
|
|
320
|
-
|
|
343
|
+
## `renderMetaTags()`
|
|
344
|
+
|
|
345
|
+
This function generates React `<meta>` and `<link />` elements, so it is compatible with React packages like [`react-helmet`](https://www.npmjs.com/package/react-helmet).
|
|
346
|
+
|
|
347
|
+
For a complete example take a look at our [examples directory](https://github.com/datocms/react-datocms/tree/master/examples).
|
|
321
348
|
|
|
322
349
|
```js
|
|
323
350
|
import React from 'react';
|
|
324
351
|
import { renderMetaTags } from 'react-datocms';
|
|
325
352
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
<
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
353
|
+
function Page({ data }) {
|
|
354
|
+
return (
|
|
355
|
+
<div>
|
|
356
|
+
<Helmet>
|
|
357
|
+
{renderMetaTags([...data.page.seo, ...data.site.favicon])}
|
|
358
|
+
</Helmet>
|
|
359
|
+
</div>
|
|
360
|
+
);
|
|
361
|
+
}
|
|
362
|
+
```
|
|
332
363
|
|
|
333
|
-
|
|
334
|
-
query {
|
|
335
|
-
page: homepage {
|
|
336
|
-
title
|
|
337
|
-
seo: _seoMetaTags {
|
|
338
|
-
attributes
|
|
339
|
-
content
|
|
340
|
-
tag
|
|
341
|
-
}
|
|
342
|
-
}
|
|
364
|
+
## `renderMetaTagsToString()`
|
|
343
365
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
366
|
+
This function generates an HTML string containing `<meta>` and `<link />` tags, so it can be used server-side.
|
|
367
|
+
|
|
368
|
+
```js
|
|
369
|
+
import { renderMetaTagsToString } from 'react-datocms';
|
|
370
|
+
|
|
371
|
+
const someMoreComplexHtml = `
|
|
372
|
+
<html>
|
|
373
|
+
<head>
|
|
374
|
+
${renderMetaTagsToString([...data.page.seo, ...data.site.favicon])}
|
|
375
|
+
</head>
|
|
376
|
+
</html>
|
|
352
377
|
`;
|
|
378
|
+
```
|
|
353
379
|
|
|
354
|
-
|
|
380
|
+
## `toRemixMeta()`
|
|
381
|
+
|
|
382
|
+
This function generates a `HtmlMetaDescriptor` object, compatibile with the [`meta`](https://remix.run/docs/en/v1.1.1/api/conventions#meta) export of the [Remix](https://remix.run/) framework:
|
|
383
|
+
|
|
384
|
+
```js
|
|
385
|
+
import type { MetaFunction } from 'remix';
|
|
386
|
+
import { toRemixMeta } from 'react-datocms';
|
|
387
|
+
|
|
388
|
+
export const meta: MetaFunction = ({ data: { post } }) => {
|
|
389
|
+
return toRemixMeta(post.seo);
|
|
390
|
+
};
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
Please note that the [`links`](https://remix.run/docs/en/v1.1.1/api/conventions#links) export [doesn't receive any loader data](https://github.com/remix-run/remix/issues/32) for performance reasons, so you cannot use it to declare favicons meta tags! The best way to render them is using `renderMetaTags` in your root component:
|
|
394
|
+
|
|
395
|
+
```jsx
|
|
396
|
+
import { renderMetaTags } from 'react-datocms';
|
|
397
|
+
|
|
398
|
+
export const loader = () => {
|
|
399
|
+
return request({
|
|
400
|
+
query: `
|
|
401
|
+
{
|
|
402
|
+
site: _site {
|
|
403
|
+
favicon: faviconMetaTags(variants: [icon, msApplication, appleTouchIcon]) {
|
|
404
|
+
...metaTagsFragment
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
${metaTagsFragment}
|
|
409
|
+
`,
|
|
410
|
+
});
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
export default function App() {
|
|
414
|
+
const { site } = useLoaderData();
|
|
415
|
+
|
|
416
|
+
return (
|
|
417
|
+
<html lang="en">
|
|
418
|
+
<head>
|
|
419
|
+
<meta charSet="utf-8" />
|
|
420
|
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
421
|
+
<Meta />
|
|
422
|
+
<Links />
|
|
423
|
+
{renderMetaTags(site.favicon)}
|
|
424
|
+
</head>
|
|
425
|
+
<body>
|
|
426
|
+
<Outlet />
|
|
427
|
+
<ScrollRestoration />
|
|
428
|
+
<Scripts />
|
|
429
|
+
{process.env.NODE_ENV === 'development' && <LiveReload />}
|
|
430
|
+
</body>
|
|
431
|
+
</html>
|
|
432
|
+
);
|
|
433
|
+
}
|
|
355
434
|
```
|
|
356
435
|
|
|
357
436
|
# Structured text
|
|
@@ -365,8 +444,7 @@ import React from 'react';
|
|
|
365
444
|
import { StructuredText } from 'react-datocms';
|
|
366
445
|
|
|
367
446
|
const Page = ({ data }) => {
|
|
368
|
-
// data.blogPost.content
|
|
369
|
-
// {
|
|
447
|
+
// data.blogPost.content = {
|
|
370
448
|
// value: {
|
|
371
449
|
// schema: "dast",
|
|
372
450
|
// document: {
|
|
@@ -581,19 +659,19 @@ For example:
|
|
|
581
659
|
|
|
582
660
|
- For all possible node types, refer to the [list of typeguard functions defined in the main `structured-text` package](https://github.com/datocms/structured-text/tree/main/packages/utils#typescript-type-guards). The [DAST format documentation](https://www.datocms.com/docs/structured-text/dast) has additional details.
|
|
583
661
|
|
|
584
|
-
In this case, you can easily override default rendering rules with the `
|
|
662
|
+
In this case, you can easily override default rendering rules with the `customNodeRules` and `customMarkRules` props.
|
|
585
663
|
|
|
586
664
|
```jsx
|
|
587
|
-
import {
|
|
665
|
+
import { renderNodeRule, renderMarkRule, StructuredText } from 'react-datocms';
|
|
588
666
|
import { isHeading, isCode } from 'datocms-structured-text-utils';
|
|
589
667
|
import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
|
|
590
668
|
import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
591
669
|
|
|
592
670
|
<StructuredText
|
|
593
671
|
data={data.blogPost.content}
|
|
594
|
-
|
|
672
|
+
customNodeRules={[
|
|
595
673
|
// Add HTML anchors to heading levels for in-page navigation
|
|
596
|
-
|
|
674
|
+
renderNodeRule(isHeading, ({ node, children, key }) => {
|
|
597
675
|
const HeadingTag = `h${node.level}`;
|
|
598
676
|
const anchor = toPlainText(node)
|
|
599
677
|
.toLowerCase()
|
|
@@ -609,7 +687,7 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
609
687
|
}),
|
|
610
688
|
|
|
611
689
|
// Use a custom syntax highlighter component for code blocks
|
|
612
|
-
|
|
690
|
+
renderNodeRule(isCode, ({ node, key }) => {
|
|
613
691
|
return (
|
|
614
692
|
<SyntaxHighlight
|
|
615
693
|
key={key}
|
|
@@ -621,7 +699,7 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
621
699
|
}),
|
|
622
700
|
|
|
623
701
|
// Apply different formatting to top-level paragraphs
|
|
624
|
-
|
|
702
|
+
renderNodeRule(
|
|
625
703
|
isParagraph,
|
|
626
704
|
({ adapter: { renderNode }, node, children, key, ancestors }) => {
|
|
627
705
|
if (isRoot(ancestors[0])) {
|
|
@@ -641,6 +719,12 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
641
719
|
},
|
|
642
720
|
),
|
|
643
721
|
]}
|
|
722
|
+
customMarkRules={[
|
|
723
|
+
// convert "strong" marks into <b> tags
|
|
724
|
+
renderMarkRule('strong', ({ mark, children, key }) => {
|
|
725
|
+
return <b key={key}>{children}</b>;
|
|
726
|
+
}),
|
|
727
|
+
]}
|
|
644
728
|
/>;
|
|
645
729
|
```
|
|
646
730
|
|
|
@@ -655,10 +739,11 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
|
|
|
655
739
|
| renderLinkToRecord | `({ record, children }) => ReactElement \| null` | Only required if document contains `itemLink` nodes | Convert an `itemLink` DAST node into React | `null` |
|
|
656
740
|
| renderBlock | `({ record }) => ReactElement \| null` | Only required if document contains `block` nodes | Convert a `block` DAST node into React | `null` |
|
|
657
741
|
| metaTransformer | `({ node, meta }) => Object \| null` | :x: | Transform `link` and `itemLink` meta property into HTML props | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
|
|
658
|
-
|
|
|
742
|
+
| customNodeRules | `Array<RenderRule>` | :x: | Customize how nodes are converted in JSX (use `renderNodeRule()` to generate rules) | `null` |
|
|
743
|
+
| customMarkRules | `Array<RenderMarkRule>` | :x: | Customize how marks are converted in JSX (use `renderMarkRule()` to generate rules) | `null` |
|
|
659
744
|
| renderText | `(text: string, key: string) => ReactElement \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |
|
|
660
745
|
|
|
661
|
-
|
|
746
|
+
# Development
|
|
662
747
|
|
|
663
748
|
This repository contains a number of demos/examples. You can use them to locally test your changes to the package with `npm link`:
|
|
664
749
|
|
|
@@ -21,66 +21,301 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
21
21
|
exports.__esModule = true;
|
|
22
22
|
var React = __importStar(require("react"));
|
|
23
23
|
var enzyme_1 = require("enzyme");
|
|
24
|
-
var
|
|
24
|
+
var __1 = require("..");
|
|
25
25
|
var metaTags = [
|
|
26
26
|
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
tag: "title"
|
|
27
|
+
"content": "Remix CMS - The easiest way to manage content with Remix",
|
|
28
|
+
"attributes": null,
|
|
29
|
+
"tag": "title"
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
"content": null,
|
|
33
|
+
"attributes": {
|
|
34
|
+
"property": "og:title",
|
|
35
|
+
"content": "Remix CMS - The easiest way to manage content with Remix"
|
|
35
36
|
},
|
|
36
|
-
|
|
37
|
-
tag: "meta"
|
|
37
|
+
"tag": "meta"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
"content": null,
|
|
41
|
+
"attributes": {
|
|
42
|
+
"name": "twitter:title",
|
|
43
|
+
"content": "Remix CMS - The easiest way to manage content with Remix"
|
|
43
44
|
},
|
|
44
|
-
|
|
45
|
-
tag: "meta"
|
|
45
|
+
"tag": "meta"
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
href: "https://example.org/favicon.png?h=16&w=16"
|
|
48
|
+
"content": null,
|
|
49
|
+
"attributes": {
|
|
50
|
+
"name": "description",
|
|
51
|
+
"content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
|
|
53
52
|
},
|
|
54
|
-
|
|
55
|
-
tag: "link"
|
|
53
|
+
"tag": "meta"
|
|
56
54
|
},
|
|
57
55
|
{
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
href: "https://example.org/favicon.png?h=32&w=32"
|
|
56
|
+
"content": null,
|
|
57
|
+
"attributes": {
|
|
58
|
+
"property": "og:description",
|
|
59
|
+
"content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
|
|
63
60
|
},
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
"tag": "meta"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"content": null,
|
|
65
|
+
"attributes": {
|
|
66
|
+
"name": "twitter:description",
|
|
67
|
+
"content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
|
|
68
|
+
},
|
|
69
|
+
"tag": "meta"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"content": null,
|
|
73
|
+
"attributes": {
|
|
74
|
+
"property": "og:image",
|
|
75
|
+
"content": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
|
|
76
|
+
},
|
|
77
|
+
"tag": "meta"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"content": null,
|
|
81
|
+
"attributes": {
|
|
82
|
+
"property": "og:image:width",
|
|
83
|
+
"content": "746"
|
|
84
|
+
},
|
|
85
|
+
"tag": "meta"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"content": null,
|
|
89
|
+
"attributes": {
|
|
90
|
+
"property": "og:image:height",
|
|
91
|
+
"content": "186"
|
|
92
|
+
},
|
|
93
|
+
"tag": "meta"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"content": null,
|
|
97
|
+
"attributes": {
|
|
98
|
+
"name": "twitter:image",
|
|
99
|
+
"content": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
|
|
100
|
+
},
|
|
101
|
+
"tag": "meta"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"content": null,
|
|
105
|
+
"attributes": {
|
|
106
|
+
"property": "og:locale",
|
|
107
|
+
"content": "en"
|
|
108
|
+
},
|
|
109
|
+
"tag": "meta"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"content": null,
|
|
113
|
+
"attributes": {
|
|
114
|
+
"property": "og:type",
|
|
115
|
+
"content": "article"
|
|
116
|
+
},
|
|
117
|
+
"tag": "meta"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"content": null,
|
|
121
|
+
"attributes": {
|
|
122
|
+
"property": "og:site_name",
|
|
123
|
+
"content": "DatoCMS"
|
|
124
|
+
},
|
|
125
|
+
"tag": "meta"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"content": null,
|
|
129
|
+
"attributes": {
|
|
130
|
+
"property": "article:modified_time",
|
|
131
|
+
"content": "2022-01-18T14:02:47Z"
|
|
132
|
+
},
|
|
133
|
+
"tag": "meta"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"content": null,
|
|
137
|
+
"attributes": {
|
|
138
|
+
"name": "twitter:card",
|
|
139
|
+
"content": "summary_large_image"
|
|
140
|
+
},
|
|
141
|
+
"tag": "meta"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"content": null,
|
|
145
|
+
"attributes": {
|
|
146
|
+
"name": "twitter:site",
|
|
147
|
+
"content": "@datocms"
|
|
148
|
+
},
|
|
149
|
+
"tag": "meta"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"attributes": {
|
|
153
|
+
"sizes": "16x16",
|
|
154
|
+
"type": "image/png",
|
|
155
|
+
"rel": "icon",
|
|
156
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
|
|
157
|
+
},
|
|
158
|
+
"content": null,
|
|
159
|
+
"tag": "link"
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"attributes": {
|
|
163
|
+
"sizes": "32x32",
|
|
164
|
+
"type": "image/png",
|
|
165
|
+
"rel": "icon",
|
|
166
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
|
|
167
|
+
},
|
|
168
|
+
"content": null,
|
|
169
|
+
"tag": "link"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"attributes": {
|
|
173
|
+
"sizes": "96x96",
|
|
174
|
+
"type": "image/png",
|
|
175
|
+
"rel": "icon",
|
|
176
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
|
|
177
|
+
},
|
|
178
|
+
"content": null,
|
|
179
|
+
"tag": "link"
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"attributes": {
|
|
183
|
+
"sizes": "192x192",
|
|
184
|
+
"type": "image/png",
|
|
185
|
+
"rel": "icon",
|
|
186
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
|
|
187
|
+
},
|
|
188
|
+
"content": null,
|
|
189
|
+
"tag": "link"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"attributes": {
|
|
193
|
+
"sizes": "57x57",
|
|
194
|
+
"rel": "apple-touch-icon",
|
|
195
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
|
|
196
|
+
},
|
|
197
|
+
"content": null,
|
|
198
|
+
"tag": "link"
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"attributes": {
|
|
202
|
+
"sizes": "60x60",
|
|
203
|
+
"rel": "apple-touch-icon",
|
|
204
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
|
|
205
|
+
},
|
|
206
|
+
"content": null,
|
|
207
|
+
"tag": "link"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"attributes": {
|
|
211
|
+
"sizes": "72x72",
|
|
212
|
+
"rel": "apple-touch-icon",
|
|
213
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
|
|
214
|
+
},
|
|
215
|
+
"content": null,
|
|
216
|
+
"tag": "link"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"attributes": {
|
|
220
|
+
"sizes": "76x76",
|
|
221
|
+
"rel": "apple-touch-icon",
|
|
222
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
|
|
223
|
+
},
|
|
224
|
+
"content": null,
|
|
225
|
+
"tag": "link"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"attributes": {
|
|
229
|
+
"sizes": "114x114",
|
|
230
|
+
"rel": "apple-touch-icon",
|
|
231
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
|
|
232
|
+
},
|
|
233
|
+
"content": null,
|
|
234
|
+
"tag": "link"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"attributes": {
|
|
238
|
+
"sizes": "120x120",
|
|
239
|
+
"rel": "apple-touch-icon",
|
|
240
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
|
|
241
|
+
},
|
|
242
|
+
"content": null,
|
|
243
|
+
"tag": "link"
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"attributes": {
|
|
247
|
+
"sizes": "144x144",
|
|
248
|
+
"rel": "apple-touch-icon",
|
|
249
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
|
|
250
|
+
},
|
|
251
|
+
"content": null,
|
|
252
|
+
"tag": "link"
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"attributes": {
|
|
256
|
+
"sizes": "152x152",
|
|
257
|
+
"rel": "apple-touch-icon",
|
|
258
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
|
|
259
|
+
},
|
|
260
|
+
"content": null,
|
|
261
|
+
"tag": "link"
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"attributes": {
|
|
265
|
+
"sizes": "180x180",
|
|
266
|
+
"rel": "apple-touch-icon",
|
|
267
|
+
"href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
|
|
268
|
+
},
|
|
269
|
+
"content": null,
|
|
270
|
+
"tag": "link"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"attributes": {
|
|
274
|
+
"name": "msapplication-square70x70logo",
|
|
275
|
+
"content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
|
|
276
|
+
},
|
|
277
|
+
"content": null,
|
|
278
|
+
"tag": "meta"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"attributes": {
|
|
282
|
+
"name": "msapplication-square150x150logo",
|
|
283
|
+
"content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
|
|
284
|
+
},
|
|
285
|
+
"content": null,
|
|
286
|
+
"tag": "meta"
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"attributes": {
|
|
290
|
+
"name": "msapplication-square310x310logo",
|
|
291
|
+
"content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
|
|
292
|
+
},
|
|
293
|
+
"content": null,
|
|
294
|
+
"tag": "meta"
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
"attributes": {
|
|
298
|
+
"name": "msapplication-square310x150logo",
|
|
299
|
+
"content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
|
|
300
|
+
},
|
|
301
|
+
"content": null,
|
|
302
|
+
"tag": "meta"
|
|
66
303
|
}
|
|
67
304
|
];
|
|
68
305
|
describe("renderMetaTags", function () {
|
|
69
306
|
it("generates an array of meta tags", function () {
|
|
70
|
-
var wrapper = enzyme_1.shallow(React.createElement("head", null,
|
|
307
|
+
var wrapper = enzyme_1.shallow(React.createElement("head", null, __1.renderMetaTags(metaTags)));
|
|
71
308
|
expect(wrapper).toMatchSnapshot();
|
|
72
309
|
});
|
|
73
310
|
});
|
|
74
311
|
describe("renderMetaTagsToString", function () {
|
|
75
312
|
it("generates an array of meta tags", function () {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
'<link sizes="32x32" type="image/png" rel="icon" href="https://example.org/favicon.png?h=32&w=32" />'
|
|
83
|
-
].join("\n"));
|
|
313
|
+
expect(__1.renderMetaTagsToString(metaTags)).toMatchSnapshot();
|
|
314
|
+
});
|
|
315
|
+
});
|
|
316
|
+
describe("toRemixMeta", function () {
|
|
317
|
+
it("generates a meta descriptor", function () {
|
|
318
|
+
expect(__1.toRemixMeta(metaTags)).toMatchSnapshot();
|
|
84
319
|
});
|
|
85
320
|
});
|
|
86
321
|
//# sourceMappingURL=index.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Seo/__tests__/index.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,iCAAiC;AACjC,
|
|
1
|
+
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Seo/__tests__/index.test.tsx"],"names":[],"mappings":"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"}
|