sfc-utils 1.3.65 → 1.3.67

package/example/src/components/layout.js

@@ -3,62 +3,49 @@
 import React, { Fragment, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
-
-// Bring in footer
+import LayoutHelmet from '../../../components/layout/layouthelmet.mjs'
 import Footer from './sfc/footer'
-
 // Add SFC utils
-import { blendHDN, appCheck, getBrands, getBlueconic } from '../../../index'
-
+import { appCheck } from '../../../index'
+import { appendLayoutScripts, formatHDN } from "../../../components/helpers/utilfunctions.mjs"
 // Import global styles needed in document
 require('../styles/seed.less')
 
-const Layout = ({   
+const Layout = ({
   meta,
   url_add = '',
   description = false,
   image = false,
   social_title = false,
   title = false,
-  children, 
+  embed = false,
+  children,
 }) => {
   // Determine if we need registration code
 
   let {
     EMBEDDED,
-    MAIN_DOMAIN,
     PROJECT: {
-      AUTHORS,
       DESCRIPTION,
       IMAGE,
-      ISO_MODDATE,
-      ISO_PUBDATE,
-      OPT_SLASH,
-      SLUG,
       SOCIAL_TITLE,
-      SUBFOLDER,
-      TITLE,
-      MARKET_KEY,
-      CANONICAL_URL
+      TITLE
     },
   } = meta
 
   // Override these if they exist (but just use the default otherwise)
-  DESCRIPTION = description || DESCRIPTION
-  IMAGE = image || IMAGE
-  SOCIAL_TITLE = social_title || SOCIAL_TITLE
-  TITLE = title || TITLE
-
-  let styleSheetID;
-  if ((MARKET_KEY === "SFC") || (MARKET_KEY === "Houston") || (MARKET_KEY === "Albany")) {
-    styleSheetID = MARKET_KEY
-  }
-  else {
-    styleSheetID = "default"
+  meta.PROJECT.DESCRIPTION = description || DESCRIPTION
+  meta.PROJECT.IMAGE = image || IMAGE
+  meta.PROJECT.SOCIAL_TITLE = social_title || SOCIAL_TITLE
+  meta.PROJECT.TITLE = title || TITLE
+
+  // If we're receiving `embed` as a prop, change this page's settings to be embed settings
+  if (embed) {
+    meta.EMBEDDED = true
   }
 
   // Make sure url_add ends with a slash
-  if (url_add && url_add.slice(-1) !== "/"){
+  if (url_add && url_add.slice(-1) !== "/") {
     url_add += "/"
   }
 
@@ -67,77 +54,10 @@ const Layout = ({
   const isApp = appCheck()
 
   // Combine our settings with what Hearst puts on page
-  let stringHDN = ''
-  if (!EMBEDDED) {
-    // Put url_add into a new meta object to pass in
-    const metaHDN = Object.assign({}, meta)
-    metaHDN.URL_ADD = url_add
-    // Make sure this is free on app
-    if (isApp){
-      metaHDN.PAYWALL_SETTING = "free";
-    }
-    let blended = blendHDN(metaHDN)
-    stringHDN = blended.stringHDN
-  }
-
-  // Get brand vars
-  const thisBrand = getBrands(MARKET_KEY);
-
-  // Handle author data
-  let authorObj = []
-  let newAuthor = {}
-  try {
-    AUTHORS.forEach(author => {
-      newAuthor = {
-        '@type': 'Person',
-        name: author.AUTHOR_NAME,
-        url: author.AUTHOR_PAGE,
-      }
-      authorObj.push(newAuthor)
-    })
-  } catch (err) {
-    // If it errored, just set to neutral default
-    authorObj = {
-      '@type': 'Person',
-      name: thisBrand.attributes.siteName,
-      url: MAIN_DOMAIN,
-    }
-  }
+  let stringHDN = formatHDN(EMBEDDED, url_add, meta);
 
   useEffect(() => {
-    // React Helmet is actually terrible and runs these scripts twice, so we are including them async ourselves
-    // Run analytics and resizing scripts right away so we take care of that
-    if (!EMBEDDED){
-      let script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.src = 'https://nexus.ensighten.com/hearst/news/Bootstrap.js';
-      document.body.appendChild(script);
-    } else {
-      let script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.src = 'https://projects.sfchronicle.com/shared/js/responsive-child.js';
-      document.body.appendChild(script);
-    }
-
-    if (!EMBEDDED && !isApp){
-      let script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.id = 'adPositionManagerScriptTag';
-      script.src = 'https://aps.hearstnp.com/Scripts/loadAds.js';
-      document.body.appendChild(script);
-    }
-
-    // Wait a beat, then add to body so it doesn't mess with the head (which Helmet seems to want to manage)
-    setTimeout(() => {
-      if (!EMBEDDED && !isApp){
-        let blueconicURL = getBlueconic(window.location.origin)
-        let script = document.createElement('script');
-        script.type = 'text/javascript';
-        script.defer = true;
-        script.src = blueconicURL;
-        document.body.appendChild(script);
-      }
-    }, 5000)
+    appendLayoutScripts(EMBEDDED);
   }, [])
 
   return (
@@ -151,68 +71,8 @@ const Layout = ({
           },
         ]}
       />
-      <Helmet>
-        <title>{TITLE}</title>
-        <meta name="description" content={DESCRIPTION} />
-        <link
-          rel="shortcut icon"
-          href="/favicon.ico"
-          type="image/x-icon"
-        />
-        <link rel="canonical" href={ CANONICAL_URL } />
-        <link rel="stylesheet" href={`https://files.sfchronicle.com/brand-styles/${styleSheetID}.css`} />
-
-        {(isApp || EMBEDDED) ? (
-          <meta name="robots" content="noindex, nofollow" />
-        ) : (
-          <meta name="robots" content="max-image-preview:large" />
-        )}
-
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={SOCIAL_TITLE} />
-        <meta name="twitter:site" content={"@"+thisBrand.attributes.twitter} />
-        <meta
-          name="twitter:url"
-          content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`}
-        />
-        <meta name="twitter:image" content={IMAGE} />
-        <meta name="twitter:description" content={DESCRIPTION} />
 
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={SOCIAL_TITLE} />
-        <meta property="og:site_name" content={thisBrand.attributes.siteName} />
-        <meta property="og:url" content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`}/>
-        <meta property="og:image" content={IMAGE} />
-        <meta property="og:description" content={DESCRIPTION} />
-
-        <script data-schema="NewsArticle" type="application/ld+json">{`{
-          "@context": "http://schema.org",
-          "@type": "NewsArticle",
-          "mainEntityOfPage": {
-            "@type": "WebPage",
-            "@id": "${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}"
-          },
-          "headline": "${TITLE}",
-          "image": {
-            "@type": "ImageObject",
-            "url": "${IMAGE}"
-          },
-          "datePublished": "${ISO_PUBDATE}",
-          "dateModified": "${ISO_MODDATE}",
-          "author": ${JSON.stringify(authorObj)},
-          "publisher": {
-            "@type": "Organization",
-            "name": "${thisBrand.attributes.siteName}",
-            "logo": {
-              "@type": "ImageObject",
-              "url": "/apple-touch-icon.png",
-              "width": "180",
-              "height": "180"
-            }
-          },
-          "description": "${DESCRIPTION}"
-        }`}</script>
-      </Helmet>
+      <LayoutHelmet meta={meta} url_add={url_add} />
 
       {/* Full project included here: */}
       {children}

package/example/src/html.js

@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import LayoutScript from "../../components/layout/layoutscript.mjs"
 
 export default function HTML(props) {
   return (
@@ -11,8 +12,7 @@ export default function HTML(props) {
           name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
-        <script src="https://projects.sfchronicle.com/shared/js/jquery.min.js"></script>
-        <script src="https://treg.hearstnp.com/treg.js"></script>
+        <LayoutScript/>
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes} is="responsive-body">

package/example/src/pages/index.js

@@ -5,8 +5,6 @@ import Layout from '../components/layout'
 import WCMImage from '../components/sfc/wcmimage'
 import DropCap from '../components/sfc/dropcap'
 import { useCanNativeLazyLoad } from '../components/sfc/component-helpers/customhooks'
-import LazyLoad from 'react-lazyload'
-import Topper from '../components/sfc/topper'
 import RelatedSection from '../components/sfc/relatedsection'
 import CreditsSection from '../components/sfc/creditssection'
 import Ad from '../components/sfc/ad'
@@ -14,6 +12,7 @@ import Newsletter from '../components/sfc/newsletter'
 import NavTop from '../components/sfc/navtop'
 import Byline from '../../../components/byline.mjs'
 import Topper2 from '../../../components/topper2.mjs'
+import OgPubDate from '../../../components/ogpubdate.mjs'
 
 let rawCredits;
 try {
@@ -37,13 +36,6 @@ try {
   topperSettings = null;
 }
 
-// lazy loader wrapper for WCM Image
-const LazyLoader = ({children}) => {
-  return (
-    <LazyLoad offset={300} resize once>{children}</LazyLoad>
-  )
-}
-
 const IndexPage = ({ data }) => {
   // easy hooks based request library
   // const { data: responseData, error } = useSWR('https://api.kanye.rest', getData, {
@@ -63,7 +55,7 @@ const IndexPage = ({ data }) => {
   return (
     <Layout meta={siteMetadata}>
       <NavTop meta={siteMetadata} />
-      <Topper2 settings={topperSettings[0]} wcmData={allWcmPhotos} lazyloader={LazyLoader}/>
+      <Topper2 settings={topperSettings[0]} wcmData={allWcmPhotos}/>
       <Byline meta={siteMetadata}/>
       <main>
         <article>
@@ -110,6 +102,7 @@ const IndexPage = ({ data }) => {
       </main>
 
       <RelatedSection links={related_links} />
+      <OgPubDate />
       {rawCredits && <CreditsSection creditsData={rawCredits}/>}
     </Layout>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.65",
+  "version": "1.3.67",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/settings.js

@@ -14,7 +14,7 @@ try {
 // Get settings off story_settings if it exists, otherwise fall back to projectConfig
 let getSettings = function(){
 	if (!projectConfig) {
-		let settings = {PROJECT : {DATE: "September 20, 2022 9:00 AM", MOD_DATE: "September 21, 2022 9:00 AM"}}
+		let settings = {PROJECT : {DATE: "January 1, 1900 9:00 AM", MOD_DATE: "January 1, 1901 9:00 AM"}} // Making this demo date SUPER wrong so we can catch it
 		return (
 			settings
 		)

package/styles/brandStylesCommon.less

@@ -1,6 +1,6 @@
 .hed, .deck{
   text-align: center;
-  margin: @s8 0;
+  margin: @s16 0;
   &.left {
     text-align: left;
   }
@@ -10,6 +10,10 @@
   }
 }
 
+h1 {
+  font-size: 4rem;
+  font-family: @hed;
+}
 //could the next three classes be moved into byline module?
 .byline-wrapper {
   max-width: @lg;
@@ -153,12 +157,4 @@ a {
   &:visited {
     color: @grey-75;
   }
-}
-
-.dropcap:first-letter {
-  font-family: @hed;
-  font-size: @s112;
-  float: left;
-  line-height: 0.75;
-  margin: 0.75rem 0.5rem 0 0.25rem;
 }

package/styles/modules/imageslideshow.module.less

@@ -21,6 +21,19 @@
   }
 }
 
+.container-side-by-side {
+  padding-bottom: calc(50vw*2/3);
+  width: 50%;
+  height: 100%;
+
+  @media (max-width: @lg) {
+    margin: 0 auto;
+    width: auto;
+    white-space: nowrap;
+    padding-bottom: calc(100vw * (2/3));
+  }
+}
+
 .image-wrapper-stacked {
   position: absolute;
   width: 100%;
@@ -37,6 +50,38 @@
   }
 }
 
+.image-wrapper-side-by-side {
+  position: absolute;
+  width: calc(50vw);
+  height: calc(50vw*2/3);
+
+  @media (max-width: @lg) {
+    width: 100%;
+    height: calc(100vw*2/3);
+  }
+}
+
+.image-wrapper-side-by-side-portrait {
+  position: absolute;
+  width: calc(90vh*2/3);
+  height: calc(90vh);
+  min-height: calc(600px + 32px);
+
+  @media (max-width: @lg) {
+    height: calc(90vh);
+    min-height: unset;
+  }
+
+  @media @mobile {
+    width: 90vw;
+    height: calc(90vw*3/2);
+  }
+}
+
+.side-by-side-portrait-margin-left {
+  margin-left: clamp(0px, calc(50vw - 32px - 90vh * 2/3), calc(600px - 90vh * 2/3))
+}
+
 /* enter animation */
 .fade-enter {
   opacity: 0;

package/styles/modules/topper2.module.less

@@ -3,6 +3,8 @@
 :root {
   --headerDek-vertical-offset: 0px;
   --headerDek-horizontal-offset: 0px;
+  --container-background-color: none;
+  --side-by-side-text-color: black;
 }
 
 .topperContainerFullScreen {
@@ -20,6 +22,40 @@
   }
 }
 
+.topperContainerSideBySide {
+  display: flex;
+  align-items: center;
+  background: var(--container-background-color);
+
+  @media (max-width: @lg) {
+    flex-direction: column;
+  }
+}
+
+.topperContainerSideBySidePortrait {
+  display: flex;
+  align-items: center;
+  max-width: @xl;
+  margin: auto;
+  margin-bottom: @s32;
+  min-height: 600px;
+
+  @media (max-width: @lg) {
+    flex-direction: column;
+    margin-bottom: 0;
+  }
+}
+
+.fullWidthContainer {
+  background: var(--container-background-color);
+  width: 100%;
+  padding-bottom: @s16;
+
+  @media (max-width: @lg) {
+    padding-bottom: 0px;
+  }
+}
+
 .imageFullScreen {
   top: 0 !important;
   width: 100%;
@@ -38,6 +74,66 @@
   }
 }
 
+.imageSideBySide {
+  width: 50%;
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: auto;
+    float: none;
+    padding-bottom: 0;
+  }
+}
+
+.imageSideBySideSlideshow {
+  width: 50%;
+  height: calc(50vw*2/3 + 10px);
+
+  @media (max-width: @lg) {
+    width: 100%;
+    height: calc(100vw*2/3 + 10px);
+  }
+}
+
+.imageSideBySidePortrait {
+  width: 50%;
+  height: 90vh;
+  min-height: calc(600px + 32px);
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: auto;
+    float: none;
+    height: auto;
+    padding-bottom: 0;
+    min-height: unset;
+  }
+}
+
+.imageSideBySidePortraitSlideshow {
+  width: 50%;
+  height: 90vh;
+  min-height: calc(600px + 32px);
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: calc(90vh*2/3);
+    float: none;
+    height: calc(90vh);
+    padding-bottom: 0;
+    min-height: unset;
+  }
+
+  @media @mobile {
+    width: 90vw;
+    height: calc(90vw*3/2 + @s16);
+    padding: 0;
+  }
+}
+
 .headerDekStacked {
   margin-left: auto;
   margin-right: auto;
@@ -63,6 +159,20 @@
   }
 }
 
+.headerDekSideBySide {
+  max-width: 50%;
+  float: right;
+  text-align: left;
+  color: var(--side-by-side-text-color);
+
+  @media (max-width: @lg) {
+    width: auto;
+    max-width: 100%;
+    float: none;
+    padding: 0;
+  }
+}
+
 .hedFullScreen {
   margin-top: 0px;
 }
@@ -170,4 +280,133 @@
   @media @tablet {
     padding-left: @s8;
   }
+}
+
+.slideshowCaptionSideBySide {
+  padding-top: calc(50vw*2/3 - @s16);
+
+  @media (max-width: @lg) {
+    padding-top: calc(100vw*2/3 - @s16);
+  }
+}
+
+.slideshowCaptionSideBySidePortrait {
+  padding-top: clamp(584px, 88vh, 90vh);
+
+  @media (max-width: @lg) {
+    padding-top: calc(90vh - 37px - @s16);
+  }
+
+  @media @mobile {
+    padding-top: calc(90vw*3/2);
+  }
+}
+
+.captionSideBySide {
+  max-width: @lg;
+}
+
+.captionSideBySidePortrait {
+  width: clamp(0px, calc(50vw - 32px), calc(90vh * 2/3));
+  max-width: calc(50vw * 2/3 - 32px);
+  min-width: 400px;
+
+  @media (max-width: @lg) {
+    width: auto;
+    max-width: none;
+    min-width: 0px;
+  }
+}
+
+.reverseFlexbox {
+  flex-direction: row-reverse;
+
+  @media (max-width: @lg) {
+    flex-direction: column;
+  }
+}
+
+.captionTextColor {
+  color: var(--side-by-side-text-color);
+}
+
+.captionTextColorImportant {
+  color: var(--side-by-side-text-color) !important;
+}
+
+.largePaddingLeft {
+  padding: @s16 @s8 @s16 @s32;
+
+  @media (max-width: @lg) {
+    padding: 0;
+  }
+}
+
+.largePaddingRight {
+  padding: @s16 @s32 @s16 @s8;
+
+  @media (max-width: @lg) {
+    padding: 0;
+  }
+}
+
+.captionLargePaddingLeft {
+  padding-left: @s32;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.captionSmallPaddingLeft {
+  padding-left: @s16;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+
+  @media @mobile {
+    padding-left: 0;
+  }
+}
+
+.captionLargePaddingRight {
+  padding-left: @s8;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.captionXLargePaddingRight {
+  padding-left: @s16;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.captionSideBySidePortraitPadding {
+  padding-left: clamp(0px, calc(50vw - (90vh * 2/3) - @s16), calc(600px - 90vh *2/3 + @s16));
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.floatLeftWhenDesktop {
+  float: left;
+
+  @media (max-width: @lg) {
+    float: none;
+  }
+}
+
+.floatRightWhenDesktop {
+  float: right;
+  max-width: none;
+
+  @media (max-width: @lg) {
+    float: none;
+  }
 }