sfc-utils 1.3.65 → 1.3.66
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/components/helpers/utilfunctions.mjs +71 -8
- package/components/layout/layouthelmet.mjs +125 -0
- package/components/layout/layoutscript.mjs +12 -0
- package/example/src/components/layout.js +19 -159
- package/example/src/html.js +2 -2
- package/example/src/pages/index.js +1 -10
- package/package.json +1 -1
|
@@ -1,12 +1,75 @@
|
|
|
1
|
+
import { getBlueconic } from "../../blueconic"
|
|
2
|
+
import { appCheck, blendHDN } from "../../index"
|
|
3
|
+
|
|
4
|
+
/** Used for resizing the WCM Image */
|
|
1
5
|
function debounce(fn, ms) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
let timer
|
|
7
|
+
return _ => {
|
|
8
|
+
clearTimeout(timer)
|
|
9
|
+
timer = setTimeout(_ => {
|
|
10
|
+
timer = null
|
|
11
|
+
fn.apply(this, arguments)
|
|
12
|
+
}, ms)
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function appendLayoutScripts(isEmbedded, isAdRemoved) {
|
|
17
|
+
const isApp = appCheck();
|
|
18
|
+
|
|
19
|
+
// React Helmet is actually terrible and runs these scripts twice, so we are including them async ourselves
|
|
20
|
+
// Run analytics and resizing scripts right away so we take care of that
|
|
21
|
+
if (!isEmbedded) {
|
|
22
|
+
let script = document.createElement('script');
|
|
23
|
+
script.type = 'text/javascript';
|
|
24
|
+
script.src = 'https://nexus.ensighten.com/hearst/news/Bootstrap.js';
|
|
25
|
+
document.body.appendChild(script);
|
|
26
|
+
} else {
|
|
27
|
+
let script = document.createElement('script');
|
|
28
|
+
script.type = 'text/javascript';
|
|
29
|
+
script.src = 'https://projects.sfchronicle.com/shared/js/responsive-child.js';
|
|
30
|
+
document.body.appendChild(script);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (!isEmbedded && !isAdRemoved) {
|
|
34
|
+
let script = document.createElement('script');
|
|
35
|
+
script.type = 'text/javascript';
|
|
36
|
+
script.id = 'adPositionManagerScriptTag';
|
|
37
|
+
script.src = 'https://aps.hearstnp.com/Scripts/loadAds.js';
|
|
38
|
+
document.body.appendChild(script);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Wait a beat, then add to body so it doesn't mess with the head (which Helmet seems to want to manage)
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
if (!isEmbedded && !isApp) {
|
|
44
|
+
let blueconicURL = getBlueconic(window.location.origin)
|
|
45
|
+
let script = document.createElement('script');
|
|
46
|
+
script.type = 'text/javascript';
|
|
47
|
+
script.defer = true;
|
|
48
|
+
script.src = blueconicURL;
|
|
49
|
+
document.body.appendChild(script);
|
|
50
|
+
}
|
|
51
|
+
}, 5000)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function formatHDN(isEmbedded, url_add, meta) {
|
|
55
|
+
const isApp = appCheck();
|
|
56
|
+
|
|
57
|
+
// Combine our settings with what Hearst puts on page
|
|
58
|
+
let stringHDN = ''
|
|
59
|
+
if (!isEmbedded) {
|
|
60
|
+
// Put url_add into a new meta object to pass in
|
|
61
|
+
const metaHDN = Object.assign({}, meta)
|
|
62
|
+
metaHDN.URL_ADD = url_add
|
|
63
|
+
// Make sure this is free on app
|
|
64
|
+
if (isApp) {
|
|
65
|
+
metaHDN.PAYWALL_SETTING = "free"
|
|
9
66
|
}
|
|
67
|
+
// Allow gift button to appear next to sharebuttons
|
|
68
|
+
metaHDN.GIFT_ENABLED = true
|
|
69
|
+
let blended = blendHDN(metaHDN)
|
|
70
|
+
stringHDN = blended.stringHDN
|
|
10
71
|
}
|
|
72
|
+
return stringHDN;
|
|
73
|
+
}
|
|
11
74
|
|
|
12
|
-
export { debounce }
|
|
75
|
+
export { debounce, appendLayoutScripts, formatHDN }
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import { Helmet } from 'react-helmet'
|
|
4
|
+
import { appCheck, getBrands2 } from "../../index"
|
|
5
|
+
|
|
6
|
+
const LayoutHelmet = ({ meta, url_add }) => {
|
|
7
|
+
let {
|
|
8
|
+
EMBEDDED,
|
|
9
|
+
MAIN_DOMAIN,
|
|
10
|
+
PROJECT: {
|
|
11
|
+
AUTHORS,
|
|
12
|
+
DESCRIPTION,
|
|
13
|
+
IMAGE,
|
|
14
|
+
ISO_MODDATE,
|
|
15
|
+
ISO_PUBDATE,
|
|
16
|
+
OPT_SLASH,
|
|
17
|
+
SLUG,
|
|
18
|
+
SOCIAL_TITLE,
|
|
19
|
+
SUBFOLDER,
|
|
20
|
+
TITLE,
|
|
21
|
+
MARKET_KEY,
|
|
22
|
+
CANONICAL_URL
|
|
23
|
+
},
|
|
24
|
+
} = meta
|
|
25
|
+
|
|
26
|
+
const isApp = appCheck()
|
|
27
|
+
const thisBrand = getBrands2(MARKET_KEY);
|
|
28
|
+
|
|
29
|
+
// Get stylesheet id from market key
|
|
30
|
+
let styleSheetID
|
|
31
|
+
if ((MARKET_KEY === "SFC") || (MARKET_KEY === "Houston") || (MARKET_KEY === "Albany")) {
|
|
32
|
+
styleSheetID = MARKET_KEY
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
styleSheetID = "default"
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Handle author data
|
|
39
|
+
let authorObj = []
|
|
40
|
+
let newAuthor = {}
|
|
41
|
+
try {
|
|
42
|
+
AUTHORS.forEach(author => {
|
|
43
|
+
newAuthor = {
|
|
44
|
+
'@type': 'Person',
|
|
45
|
+
name: author.AUTHOR_NAME,
|
|
46
|
+
url: author.AUTHOR_PAGE,
|
|
47
|
+
}
|
|
48
|
+
authorObj.push(newAuthor)
|
|
49
|
+
})
|
|
50
|
+
} catch (err) {
|
|
51
|
+
// If it errored, just set to neutral default
|
|
52
|
+
authorObj = {
|
|
53
|
+
'@type': 'Person',
|
|
54
|
+
name: thisBrand.attributes.siteName,
|
|
55
|
+
url: MAIN_DOMAIN,
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<Helmet>
|
|
61
|
+
<title>{TITLE}</title>
|
|
62
|
+
<meta name="description" content={DESCRIPTION} />
|
|
63
|
+
<link
|
|
64
|
+
rel="shortcut icon"
|
|
65
|
+
href="/favicon.ico"
|
|
66
|
+
type="image/x-icon"
|
|
67
|
+
/>
|
|
68
|
+
<link rel="canonical" href={`${CANONICAL_URL}/${url_add}`} />
|
|
69
|
+
<link rel="stylesheet" href={`https://files.sfchronicle.com/brand-styles/${styleSheetID}.css`} />
|
|
70
|
+
|
|
71
|
+
{(isApp || EMBEDDED) ? (
|
|
72
|
+
<meta name="robots" content="noindex, nofollow" />
|
|
73
|
+
) : (
|
|
74
|
+
<meta name="robots" content="max-image-preview:large" />
|
|
75
|
+
)}
|
|
76
|
+
|
|
77
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
78
|
+
<meta name="twitter:title" content={SOCIAL_TITLE} />
|
|
79
|
+
<meta name="twitter:site" content={"@" + thisBrand.attributes.twitter} />
|
|
80
|
+
<meta
|
|
81
|
+
name="twitter:url"
|
|
82
|
+
content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`}
|
|
83
|
+
/>
|
|
84
|
+
<meta name="twitter:image" content={IMAGE} />
|
|
85
|
+
<meta name="twitter:description" content={DESCRIPTION} />
|
|
86
|
+
|
|
87
|
+
<meta property="og:type" content="article" />
|
|
88
|
+
<meta property="og:title" content={SOCIAL_TITLE} />
|
|
89
|
+
<meta property="og:site_name" content={thisBrand.attributes.siteName} />
|
|
90
|
+
<meta property="og:url" content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`} />
|
|
91
|
+
<meta property="og:image" content={IMAGE} />
|
|
92
|
+
<meta property="og:description" content={DESCRIPTION} />
|
|
93
|
+
|
|
94
|
+
<script data-schema="NewsArticle" type="application/ld+json">{`{
|
|
95
|
+
"@context": "http://schema.org",
|
|
96
|
+
"@type": "NewsArticle",
|
|
97
|
+
"mainEntityOfPage": {
|
|
98
|
+
"@type": "WebPage",
|
|
99
|
+
"@id": "${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}"
|
|
100
|
+
},
|
|
101
|
+
"headline": "${TITLE}",
|
|
102
|
+
"image": {
|
|
103
|
+
"@type": "ImageObject",
|
|
104
|
+
"url": "${IMAGE}"
|
|
105
|
+
},
|
|
106
|
+
"datePublished": "${ISO_PUBDATE}",
|
|
107
|
+
"dateModified": "${ISO_MODDATE}",
|
|
108
|
+
"author": ${JSON.stringify(authorObj)},
|
|
109
|
+
"publisher": {
|
|
110
|
+
"@type": "Organization",
|
|
111
|
+
"name": "${thisBrand.attributes.siteName}",
|
|
112
|
+
"logo": {
|
|
113
|
+
"@type": "ImageObject",
|
|
114
|
+
"url": "/apple-touch-icon.png",
|
|
115
|
+
"width": "180",
|
|
116
|
+
"height": "180"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
"description": "${DESCRIPTION}"
|
|
120
|
+
}`}</script>
|
|
121
|
+
</Helmet>
|
|
122
|
+
)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
export default LayoutHelmet
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
const LayoutScript = () => {
|
|
4
|
+
return (
|
|
5
|
+
<>
|
|
6
|
+
<script src="https://projects.sfchronicle.com/shared/js/jquery.min.js"></script>
|
|
7
|
+
<script src="https://treg.hearstnp.com/treg.js"></script>
|
|
8
|
+
</>
|
|
9
|
+
)
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default LayoutScript
|
|
@@ -3,62 +3,49 @@
|
|
|
3
3
|
import React, { Fragment, useEffect } from 'react'
|
|
4
4
|
import PropTypes from 'prop-types'
|
|
5
5
|
import { Helmet } from 'react-helmet'
|
|
6
|
-
|
|
7
|
-
// Bring in footer
|
|
6
|
+
import LayoutHelmet from '../../../components/layout/layouthelmet.mjs'
|
|
8
7
|
import Footer from './sfc/footer'
|
|
9
|
-
|
|
10
8
|
// Add SFC utils
|
|
11
|
-
import {
|
|
12
|
-
|
|
9
|
+
import { appCheck } from '../../../index'
|
|
10
|
+
import { appendLayoutScripts, formatHDN } from "../../../components/helpers/utilfunctions.mjs"
|
|
13
11
|
// Import global styles needed in document
|
|
14
12
|
require('../styles/seed.less')
|
|
15
13
|
|
|
16
|
-
const Layout = ({
|
|
14
|
+
const Layout = ({
|
|
17
15
|
meta,
|
|
18
16
|
url_add = '',
|
|
19
17
|
description = false,
|
|
20
18
|
image = false,
|
|
21
19
|
social_title = false,
|
|
22
20
|
title = false,
|
|
23
|
-
|
|
21
|
+
embed = false,
|
|
22
|
+
children,
|
|
24
23
|
}) => {
|
|
25
24
|
// Determine if we need registration code
|
|
26
25
|
|
|
27
26
|
let {
|
|
28
27
|
EMBEDDED,
|
|
29
|
-
MAIN_DOMAIN,
|
|
30
28
|
PROJECT: {
|
|
31
|
-
AUTHORS,
|
|
32
29
|
DESCRIPTION,
|
|
33
30
|
IMAGE,
|
|
34
|
-
ISO_MODDATE,
|
|
35
|
-
ISO_PUBDATE,
|
|
36
|
-
OPT_SLASH,
|
|
37
|
-
SLUG,
|
|
38
31
|
SOCIAL_TITLE,
|
|
39
|
-
|
|
40
|
-
TITLE,
|
|
41
|
-
MARKET_KEY,
|
|
42
|
-
CANONICAL_URL
|
|
32
|
+
TITLE
|
|
43
33
|
},
|
|
44
34
|
} = meta
|
|
45
35
|
|
|
46
36
|
// Override these if they exist (but just use the default otherwise)
|
|
47
|
-
DESCRIPTION = description || DESCRIPTION
|
|
48
|
-
IMAGE = image || IMAGE
|
|
49
|
-
SOCIAL_TITLE = social_title || SOCIAL_TITLE
|
|
50
|
-
TITLE = title || TITLE
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
styleSheetID = "default"
|
|
37
|
+
meta.PROJECT.DESCRIPTION = description || DESCRIPTION
|
|
38
|
+
meta.PROJECT.IMAGE = image || IMAGE
|
|
39
|
+
meta.PROJECT.SOCIAL_TITLE = social_title || SOCIAL_TITLE
|
|
40
|
+
meta.PROJECT.TITLE = title || TITLE
|
|
41
|
+
|
|
42
|
+
// If we're receiving `embed` as a prop, change this page's settings to be embed settings
|
|
43
|
+
if (embed) {
|
|
44
|
+
meta.EMBEDDED = true
|
|
58
45
|
}
|
|
59
46
|
|
|
60
47
|
// Make sure url_add ends with a slash
|
|
61
|
-
if (url_add && url_add.slice(-1) !== "/"){
|
|
48
|
+
if (url_add && url_add.slice(-1) !== "/") {
|
|
62
49
|
url_add += "/"
|
|
63
50
|
}
|
|
64
51
|
|
|
@@ -67,77 +54,10 @@ const Layout = ({
|
|
|
67
54
|
const isApp = appCheck()
|
|
68
55
|
|
|
69
56
|
// Combine our settings with what Hearst puts on page
|
|
70
|
-
let stringHDN =
|
|
71
|
-
if (!EMBEDDED) {
|
|
72
|
-
// Put url_add into a new meta object to pass in
|
|
73
|
-
const metaHDN = Object.assign({}, meta)
|
|
74
|
-
metaHDN.URL_ADD = url_add
|
|
75
|
-
// Make sure this is free on app
|
|
76
|
-
if (isApp){
|
|
77
|
-
metaHDN.PAYWALL_SETTING = "free";
|
|
78
|
-
}
|
|
79
|
-
let blended = blendHDN(metaHDN)
|
|
80
|
-
stringHDN = blended.stringHDN
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// Get brand vars
|
|
84
|
-
const thisBrand = getBrands(MARKET_KEY);
|
|
85
|
-
|
|
86
|
-
// Handle author data
|
|
87
|
-
let authorObj = []
|
|
88
|
-
let newAuthor = {}
|
|
89
|
-
try {
|
|
90
|
-
AUTHORS.forEach(author => {
|
|
91
|
-
newAuthor = {
|
|
92
|
-
'@type': 'Person',
|
|
93
|
-
name: author.AUTHOR_NAME,
|
|
94
|
-
url: author.AUTHOR_PAGE,
|
|
95
|
-
}
|
|
96
|
-
authorObj.push(newAuthor)
|
|
97
|
-
})
|
|
98
|
-
} catch (err) {
|
|
99
|
-
// If it errored, just set to neutral default
|
|
100
|
-
authorObj = {
|
|
101
|
-
'@type': 'Person',
|
|
102
|
-
name: thisBrand.attributes.siteName,
|
|
103
|
-
url: MAIN_DOMAIN,
|
|
104
|
-
}
|
|
105
|
-
}
|
|
57
|
+
let stringHDN = formatHDN(EMBEDDED, url_add, meta);
|
|
106
58
|
|
|
107
59
|
useEffect(() => {
|
|
108
|
-
|
|
109
|
-
// Run analytics and resizing scripts right away so we take care of that
|
|
110
|
-
if (!EMBEDDED){
|
|
111
|
-
let script = document.createElement('script');
|
|
112
|
-
script.type = 'text/javascript';
|
|
113
|
-
script.src = 'https://nexus.ensighten.com/hearst/news/Bootstrap.js';
|
|
114
|
-
document.body.appendChild(script);
|
|
115
|
-
} else {
|
|
116
|
-
let script = document.createElement('script');
|
|
117
|
-
script.type = 'text/javascript';
|
|
118
|
-
script.src = 'https://projects.sfchronicle.com/shared/js/responsive-child.js';
|
|
119
|
-
document.body.appendChild(script);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
if (!EMBEDDED && !isApp){
|
|
123
|
-
let script = document.createElement('script');
|
|
124
|
-
script.type = 'text/javascript';
|
|
125
|
-
script.id = 'adPositionManagerScriptTag';
|
|
126
|
-
script.src = 'https://aps.hearstnp.com/Scripts/loadAds.js';
|
|
127
|
-
document.body.appendChild(script);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// Wait a beat, then add to body so it doesn't mess with the head (which Helmet seems to want to manage)
|
|
131
|
-
setTimeout(() => {
|
|
132
|
-
if (!EMBEDDED && !isApp){
|
|
133
|
-
let blueconicURL = getBlueconic(window.location.origin)
|
|
134
|
-
let script = document.createElement('script');
|
|
135
|
-
script.type = 'text/javascript';
|
|
136
|
-
script.defer = true;
|
|
137
|
-
script.src = blueconicURL;
|
|
138
|
-
document.body.appendChild(script);
|
|
139
|
-
}
|
|
140
|
-
}, 5000)
|
|
60
|
+
appendLayoutScripts(EMBEDDED);
|
|
141
61
|
}, [])
|
|
142
62
|
|
|
143
63
|
return (
|
|
@@ -151,68 +71,8 @@ const Layout = ({
|
|
|
151
71
|
},
|
|
152
72
|
]}
|
|
153
73
|
/>
|
|
154
|
-
<Helmet>
|
|
155
|
-
<title>{TITLE}</title>
|
|
156
|
-
<meta name="description" content={DESCRIPTION} />
|
|
157
|
-
<link
|
|
158
|
-
rel="shortcut icon"
|
|
159
|
-
href="/favicon.ico"
|
|
160
|
-
type="image/x-icon"
|
|
161
|
-
/>
|
|
162
|
-
<link rel="canonical" href={ CANONICAL_URL } />
|
|
163
|
-
<link rel="stylesheet" href={`https://files.sfchronicle.com/brand-styles/${styleSheetID}.css`} />
|
|
164
|
-
|
|
165
|
-
{(isApp || EMBEDDED) ? (
|
|
166
|
-
<meta name="robots" content="noindex, nofollow" />
|
|
167
|
-
) : (
|
|
168
|
-
<meta name="robots" content="max-image-preview:large" />
|
|
169
|
-
)}
|
|
170
|
-
|
|
171
|
-
<meta name="twitter:card" content="summary_large_image" />
|
|
172
|
-
<meta name="twitter:title" content={SOCIAL_TITLE} />
|
|
173
|
-
<meta name="twitter:site" content={"@"+thisBrand.attributes.twitter} />
|
|
174
|
-
<meta
|
|
175
|
-
name="twitter:url"
|
|
176
|
-
content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`}
|
|
177
|
-
/>
|
|
178
|
-
<meta name="twitter:image" content={IMAGE} />
|
|
179
|
-
<meta name="twitter:description" content={DESCRIPTION} />
|
|
180
74
|
|
|
181
|
-
|
|
182
|
-
<meta property="og:title" content={SOCIAL_TITLE} />
|
|
183
|
-
<meta property="og:site_name" content={thisBrand.attributes.siteName} />
|
|
184
|
-
<meta property="og:url" content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`}/>
|
|
185
|
-
<meta property="og:image" content={IMAGE} />
|
|
186
|
-
<meta property="og:description" content={DESCRIPTION} />
|
|
187
|
-
|
|
188
|
-
<script data-schema="NewsArticle" type="application/ld+json">{`{
|
|
189
|
-
"@context": "http://schema.org",
|
|
190
|
-
"@type": "NewsArticle",
|
|
191
|
-
"mainEntityOfPage": {
|
|
192
|
-
"@type": "WebPage",
|
|
193
|
-
"@id": "${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}"
|
|
194
|
-
},
|
|
195
|
-
"headline": "${TITLE}",
|
|
196
|
-
"image": {
|
|
197
|
-
"@type": "ImageObject",
|
|
198
|
-
"url": "${IMAGE}"
|
|
199
|
-
},
|
|
200
|
-
"datePublished": "${ISO_PUBDATE}",
|
|
201
|
-
"dateModified": "${ISO_MODDATE}",
|
|
202
|
-
"author": ${JSON.stringify(authorObj)},
|
|
203
|
-
"publisher": {
|
|
204
|
-
"@type": "Organization",
|
|
205
|
-
"name": "${thisBrand.attributes.siteName}",
|
|
206
|
-
"logo": {
|
|
207
|
-
"@type": "ImageObject",
|
|
208
|
-
"url": "/apple-touch-icon.png",
|
|
209
|
-
"width": "180",
|
|
210
|
-
"height": "180"
|
|
211
|
-
}
|
|
212
|
-
},
|
|
213
|
-
"description": "${DESCRIPTION}"
|
|
214
|
-
}`}</script>
|
|
215
|
-
</Helmet>
|
|
75
|
+
<LayoutHelmet meta={meta} url_add={url_add} />
|
|
216
76
|
|
|
217
77
|
{/* Full project included here: */}
|
|
218
78
|
{children}
|
package/example/src/html.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import PropTypes from "prop-types"
|
|
3
|
+
import LayoutScript from "../../components/layout/layoutscript.mjs"
|
|
3
4
|
|
|
4
5
|
export default function HTML(props) {
|
|
5
6
|
return (
|
|
@@ -11,8 +12,7 @@ export default function HTML(props) {
|
|
|
11
12
|
name="viewport"
|
|
12
13
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
13
14
|
/>
|
|
14
|
-
<
|
|
15
|
-
<script src="https://treg.hearstnp.com/treg.js"></script>
|
|
15
|
+
<LayoutScript/>
|
|
16
16
|
{props.headComponents}
|
|
17
17
|
</head>
|
|
18
18
|
<body {...props.bodyAttributes} is="responsive-body">
|
|
@@ -5,8 +5,6 @@ import Layout from '../components/layout'
|
|
|
5
5
|
import WCMImage from '../components/sfc/wcmimage'
|
|
6
6
|
import DropCap from '../components/sfc/dropcap'
|
|
7
7
|
import { useCanNativeLazyLoad } from '../components/sfc/component-helpers/customhooks'
|
|
8
|
-
import LazyLoad from 'react-lazyload'
|
|
9
|
-
import Topper from '../components/sfc/topper'
|
|
10
8
|
import RelatedSection from '../components/sfc/relatedsection'
|
|
11
9
|
import CreditsSection from '../components/sfc/creditssection'
|
|
12
10
|
import Ad from '../components/sfc/ad'
|
|
@@ -37,13 +35,6 @@ try {
|
|
|
37
35
|
topperSettings = null;
|
|
38
36
|
}
|
|
39
37
|
|
|
40
|
-
// lazy loader wrapper for WCM Image
|
|
41
|
-
const LazyLoader = ({children}) => {
|
|
42
|
-
return (
|
|
43
|
-
<LazyLoad offset={300} resize once>{children}</LazyLoad>
|
|
44
|
-
)
|
|
45
|
-
}
|
|
46
|
-
|
|
47
38
|
const IndexPage = ({ data }) => {
|
|
48
39
|
// easy hooks based request library
|
|
49
40
|
// const { data: responseData, error } = useSWR('https://api.kanye.rest', getData, {
|
|
@@ -63,7 +54,7 @@ const IndexPage = ({ data }) => {
|
|
|
63
54
|
return (
|
|
64
55
|
<Layout meta={siteMetadata}>
|
|
65
56
|
<NavTop meta={siteMetadata} />
|
|
66
|
-
<Topper2 settings={topperSettings[0]} wcmData={allWcmPhotos}
|
|
57
|
+
<Topper2 settings={topperSettings[0]} wcmData={allWcmPhotos}/>
|
|
67
58
|
<Byline meta={siteMetadata}/>
|
|
68
59
|
<main>
|
|
69
60
|
<article>
|