@financial-times/dotcom-ui-shell 11.3.0 → 12.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/node/components/Content.d.ts +1 -1
- package/dist/node/components/DocumentHead.d.ts +1 -1
- package/dist/node/components/DocumentHead.js +5 -5
- package/dist/node/components/LinkedData.d.ts +1 -1
- package/dist/node/components/OpenGraph.d.ts +1 -1
- package/dist/node/components/OpenGraph.js +1 -1
- package/dist/node/components/ResourceHints.d.ts +1 -1
- package/dist/node/components/ResourceHints.js +2 -2
- package/dist/node/components/Shell.d.ts +1 -1
- package/dist/node/components/Shell.js +6 -6
- package/dist/node/components/StyleSheets.d.ts +1 -1
- package/dist/node/index.js +5 -1
- package/dist/node/lib/flattenOpenGraphData.d.ts +1 -1
- package/dist/node/lib/flattenOpenGraphData.js +1 -1
- package/dist/node/lib/formatAttributeNames.d.ts +1 -1
- package/dist/node/lib/formatAttributeNames.js +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -3123
- package/package.json +5 -5
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { TOpenGraphProps } from './OpenGraph';
|
3
3
|
import { TLinkedDataProps } from './LinkedData';
|
4
|
-
export
|
4
|
+
export type TDocumentHeadProps = TOpenGraphProps & TLinkedDataProps & {
|
5
5
|
description?: string;
|
6
6
|
facebookPage?: string;
|
7
7
|
googleSiteVerification?: string;
|
@@ -16,17 +16,17 @@ const DocumentHead = (props) => (react_1.default.createElement(react_1.default.F
|
|
16
16
|
props.canonicalURL && react_1.default.createElement("link", { rel: "canonical", href: props.canonicalURL }),
|
17
17
|
react_1.default.createElement("meta", { name: "robots", content: props.robots }),
|
18
18
|
react_1.default.createElement("meta", { name: "google-site-verification", content: props.googleSiteVerification }),
|
19
|
-
props.metaTags.map((attributes, i) => (react_1.default.createElement("meta",
|
19
|
+
props.metaTags.map((attributes, i) => (react_1.default.createElement("meta", { key: `meta-${i}`, ...attributes }))),
|
20
20
|
react_1.default.createElement(LinkedData_1.default, { jsonLd: props.jsonLd }),
|
21
21
|
react_1.default.createElement("meta", { property: "fb:pages", content: props.facebookPage }),
|
22
22
|
react_1.default.createElement("meta", { property: "twitter:site", content: props.twitterSite }),
|
23
23
|
react_1.default.createElement(OpenGraph_1.default, { openGraph: props.openGraph }),
|
24
24
|
props.showSmartBanner &&
|
25
25
|
(react_1.default.createElement("meta", { name: "apple-itunes-app", content: props.canonicalURL ? `app-id=1200842933, app-argument=${props.canonicalURL}` : 'app-id=1200842933' })),
|
26
|
-
react_1.default.createElement("link", { rel: "icon", type: "image/svg+xml", href: imageServiceIconURL_1.default('ftlogo-v1:brand-ft-logo-square-coloured', 0, 'svg') }),
|
27
|
-
react_1.default.createElement("link", { rel: "alternate icon", type: "image/png", href: imageServiceIconURL_1.default('ftlogo-v1:brand-ft-logo-square-coloured', 32), sizes: "32x32" }),
|
28
|
-
react_1.default.createElement("link", { rel: "alternate icon", type: "image/png", href: imageServiceIconURL_1.default('ftlogo-v1:brand-ft-logo-square-coloured', 194), sizes: "194x194" }),
|
29
|
-
react_1.default.createElement("link", { rel: "apple-touch-icon", href: imageServiceIconURL_1.default('ftlogo-v1:brand-ft-logo-square-coloured', 180), sizes: "180x180" }),
|
26
|
+
react_1.default.createElement("link", { rel: "icon", type: "image/svg+xml", href: (0, imageServiceIconURL_1.default)('ftlogo-v1:brand-ft-logo-square-coloured', 0, 'svg') }),
|
27
|
+
react_1.default.createElement("link", { rel: "alternate icon", type: "image/png", href: (0, imageServiceIconURL_1.default)('ftlogo-v1:brand-ft-logo-square-coloured', 32), sizes: "32x32" }),
|
28
|
+
react_1.default.createElement("link", { rel: "alternate icon", type: "image/png", href: (0, imageServiceIconURL_1.default)('ftlogo-v1:brand-ft-logo-square-coloured', 194), sizes: "194x194" }),
|
29
|
+
react_1.default.createElement("link", { rel: "apple-touch-icon", href: (0, imageServiceIconURL_1.default)('ftlogo-v1:brand-ft-logo-square-coloured', 180), sizes: "180x180" }),
|
30
30
|
props.manifestFile ? react_1.default.createElement("link", { rel: "manifest", href: props.manifestFile }) : null,
|
31
31
|
props.additionalMetadata));
|
32
32
|
DocumentHead.defaultProps = {
|
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
const react_1 = __importDefault(require("react"));
|
7
7
|
const flattenOpenGraphData_1 = __importDefault(require("../lib/flattenOpenGraphData"));
|
8
|
-
const OpenGraph = ({ openGraph }) => (react_1.default.createElement(react_1.default.Fragment, null, flattenOpenGraphData_1.default(openGraph).map(([property, content], i) => (react_1.default.createElement("meta", { key: `og-${i}`, property: property, content: content })))));
|
8
|
+
const OpenGraph = ({ openGraph }) => (react_1.default.createElement(react_1.default.Fragment, null, (0, flattenOpenGraphData_1.default)(openGraph).map(([property, content], i) => (react_1.default.createElement("meta", { key: `og-${i}`, property: property, content: content })))));
|
9
9
|
OpenGraph.defaultProps = {
|
10
10
|
openGraph: {}
|
11
11
|
};
|
@@ -14,7 +14,7 @@ const ResourceHints = (props) => {
|
|
14
14
|
react_1.default.createElement("link", { rel: "preconnect", href: "https://securepubads.g.doubleclick.net" }),
|
15
15
|
props.resourceHints.map((resource, i) => {
|
16
16
|
var _a;
|
17
|
-
const contentType = getResourceType_1.default(resource);
|
17
|
+
const contentType = (0, getResourceType_1.default)(resource);
|
18
18
|
const mimeType = mime_types_1.default.lookup(resource) ||
|
19
19
|
mime_types_1.default.lookup((_a = resource.match(/(?<=font_format=)([a-z0-9]+)/)) === null || _a === void 0 ? void 0 : _a[0]) ||
|
20
20
|
null;
|
@@ -29,7 +29,7 @@ const ResourceHints = (props) => {
|
|
29
29
|
if (contentType === 'font') {
|
30
30
|
attributes.crossOrigin = 'anonymous';
|
31
31
|
}
|
32
|
-
return react_1.default.createElement("link",
|
32
|
+
return react_1.default.createElement("link", { key: `hint-${i}`, rel: "preload", ...attributes });
|
33
33
|
})));
|
34
34
|
};
|
35
35
|
ResourceHints.defaultProps = {
|
@@ -6,7 +6,7 @@ import ResourceHints, { TResourceHintsProps } from './ResourceHints';
|
|
6
6
|
import { TAppContextProps } from '@financial-times/dotcom-ui-app-context';
|
7
7
|
import { TFlagsEmbedProps } from '@financial-times/dotcom-ui-flags';
|
8
8
|
import { TAttributeData } from '../lib/formatAttributeNames';
|
9
|
-
|
9
|
+
type TShellProps = TDocumentHeadProps & TAppContextProps & TStylesheetProps & TResourceHintsProps & TContentProps & TFlagsEmbedProps & {
|
10
10
|
scripts?: string[];
|
11
11
|
children?: any;
|
12
12
|
initialProps?: any;
|
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
-
exports.Content = exports.ResourceHints = exports.DocumentHead =
|
6
|
+
exports.Content = exports.ResourceHints = exports.DocumentHead = void 0;
|
7
|
+
exports.Shell = Shell;
|
7
8
|
const react_1 = __importDefault(require("react"));
|
8
9
|
const Content_1 = __importDefault(require("./Content"));
|
9
10
|
exports.Content = Content_1.default;
|
@@ -31,22 +32,21 @@ function Shell(props) {
|
|
31
32
|
...props.resourceHints,
|
32
33
|
...dotcom_ui_base_styles_1.fontFaceURLs
|
33
34
|
];
|
34
|
-
return (react_1.default.createElement("html",
|
35
|
+
return (react_1.default.createElement("html", { ...(0, formatAttributeNames_1.default)(props.htmlAttributes), lang: "en-GB", className: `no-js core ${dotcom_ui_base_styles_1.loadCustomFontsClassNames}`, "data-o-component": "o-typography", style: dotcom_ui_base_styles_1.documentStyles },
|
35
36
|
react_1.default.createElement("head", null,
|
36
|
-
react_1.default.createElement(DocumentHead_1.default,
|
37
|
+
react_1.default.createElement(DocumentHead_1.default, { ...props }),
|
37
38
|
react_1.default.createElement(ResourceHints_1.default, { resourceHints: resourceHints }),
|
38
39
|
react_1.default.createElement("script", { id: "initial-props", type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(props.initialProps) } }),
|
39
40
|
react_1.default.createElement(StyleSheets_1.default, { criticalStyles: props.criticalStyles, stylesheets: props.stylesheets, asyncStylesheets: props.asyncStylesheets }),
|
40
|
-
react_1.default.createElement(dotcom_ui_bootstrap_1.Bootstrap,
|
41
|
+
react_1.default.createElement(dotcom_ui_bootstrap_1.Bootstrap, { ...bootstrapProps }),
|
41
42
|
react_1.default.createElement(GTMHead_1.default, { flags: props.flags }),
|
42
43
|
react_1.default.createElement(dotcom_ui_base_styles_1.LoadFontsEmbed, null)),
|
43
|
-
react_1.default.createElement("body",
|
44
|
+
react_1.default.createElement("body", { ...(0, formatAttributeNames_1.default)(props.bodyAttributes) },
|
44
45
|
react_1.default.createElement(GTMBody_1.default, { flags: props.flags }),
|
45
46
|
react_1.default.createElement(Content_1.default, { contents: props.contents || props.children }),
|
46
47
|
react_1.default.createElement(dotcom_ui_app_context_1.AppContextEmbed, { appContext: props.appContext }),
|
47
48
|
react_1.default.createElement(dotcom_ui_flags_1.FlagsEmbed, { flags: props.flags }))));
|
48
49
|
}
|
49
|
-
exports.Shell = Shell;
|
50
50
|
Shell.defaultProps = {
|
51
51
|
scripts: [],
|
52
52
|
stylesheets: [],
|
package/dist/node/index.js
CHANGED
@@ -1,7 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
3
|
if (k2 === undefined) k2 = k;
|
4
|
-
Object.
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
5
9
|
}) : (function(o, m, k, k2) {
|
6
10
|
if (k2 === undefined) k2 = k;
|
7
11
|
o[k2] = m[k];
|
@@ -2,6 +2,7 @@
|
|
2
2
|
// Flattens a nested object into an array of key/value pairs
|
3
3
|
// { foo: { bar: { baz: 123 } } } => [['foo:bar:baz', 123]]
|
4
4
|
Object.defineProperty(exports, "__esModule", { value: true });
|
5
|
+
exports.default = flattenData;
|
5
6
|
function flattenData(data, prefix) {
|
6
7
|
const output = [];
|
7
8
|
for (const [key, value] of Object.entries(data)) {
|
@@ -18,4 +19,3 @@ function flattenData(data, prefix) {
|
|
18
19
|
}
|
19
20
|
return output;
|
20
21
|
}
|
21
|
-
exports.default = flattenData;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.default = formatAttributeNames;
|
3
4
|
function formatAttributeNames(data = {}) {
|
4
5
|
const output = {};
|
5
6
|
for (const [key, value] of Object.entries(data)) {
|
@@ -22,7 +23,6 @@ function formatAttributeNames(data = {}) {
|
|
22
23
|
}
|
23
24
|
return output;
|
24
25
|
}
|
25
|
-
exports.default = formatAttributeNames;
|
26
26
|
function hyphenateChar(char) {
|
27
27
|
return '-' + char.toLowerCase();
|
28
28
|
}
|