sfc-utils 1.3.64 → 1.3.66

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'
@@ -37,13 +35,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 +54,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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.64",
+  "version": "1.3.66",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",
@@ -10,6 +10,7 @@
     "htmlparser2": "4.1.0",
     "opn": "^6.0.0",
     "prop-types": "^15.8.1",
+    "react-transition-group": "^4.4.5",
     "write": "^2.0.0"
   }
 }

package/styles/modules/imageslideshow.module.less

@@ -0,0 +1,62 @@
+@import (less) '../values';
+
+.container-stacked {
+  margin: 0 auto;
+  white-space: nowrap;
+  padding-bottom: calc(@xl*2/3);
+
+  @media @tablet {
+    padding-bottom: calc(100vw * (2/3));
+  }
+}
+
+.container-fullscreen {
+  padding-bottom: calc(100vh - 37px);
+  width: 100%;
+
+  @media @tablet {
+    margin: 0 auto;
+    white-space: nowrap;
+    padding-bottom: calc(100vw * (2/3));
+  }
+}
+
+.image-wrapper-stacked {
+  position: absolute;
+  width: 100%;
+}
+
+.image-wrapper-fullscreen {
+  position: absolute;
+  width: 100%;
+
+  @media @mobile {
+    margin: 0;
+    padding: 0;
+    height: auto;
+  }
+}
+
+/* enter animation */
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 1500ms linear;
+}
+
+/* exit animation */
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit.fade-exit-active {
+  opacity: 0;
+  transition: opacity 2000ms linear;
+}
+
+.fade-exit-done {
+  opacity: 0;
+}

package/styles/modules/topper2.module.less

@@ -1,49 +1,66 @@
 @import (less) "../variables.less";
 
-:root { 
-    --headerDek-vertical-offset: 0px;
-    --headerDek-horizontal-offset: 0px;
+:root {
+  --headerDek-vertical-offset: 0px;
+  --headerDek-horizontal-offset: 0px;
 }
 
 .topperContainerFullScreen {
-    max-width: 100%;
-    position: relative;
+  max-width: 100%;
+  position: relative;
+}
+
+.topperContainerSlideshowFullScreen {
+  max-width: 100%;
+  position: relative;
+  height: calc(100vh - 37px);
+
+  @media @tablet {
+    height: auto;
+  }
 }
 
 .imageFullScreen {
-    top: 0 !important;
-    width: 100%;
+  top: 0 !important;
+  width: 100%;
+
+  @media @mobile {
+    height: 100%;
+  }
 }
 
 .imageStacked {
-    position: relative;
-    overflow: hidden;
+  position: relative;
+  max-width: @xl;
 
-    @media @mobile {
-        width: 100%;
-    }
+  @media @mobile {
+    width: 100%;
+  }
 }
 
 .headerDekStacked {
   margin-left: auto;
   margin-right: auto;
+
   @media (max-width: 960px) {
     margin-left: 0;
     margin-right: 0;
   }
 }
+
 .headerDekFullScreen {
-    position: absolute;
-    padding: @s24; 
-    width: @md;
-    @media @tablet {
-        width: @sm;
-        position: static;
-        transform: none;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-    }
+  position: absolute;
+  padding: @s24;
+  width: @md;
+
+  @media @tablet {
+    width: @sm;
+    position: static;
+    transform: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
 }
 
 .hedFullScreen {
@@ -51,51 +68,55 @@
 }
 
 .deckFullScreen {
-  margin-bottom: 0px; 
+  margin-bottom: 0px;
 }
 
 .headerDekTop {
   top: 0%;
   margin-top: var(--headerDek-vertical-offset);
+
   @media @tablet {
-      margin-top: 0px;
+    margin-top: 0px;
   }
 }
 
 .headerDekBottom {
   bottom: 0%;
   margin-bottom: var(--headerDek-vertical-offset);
+
   @media @tablet {
-      margin-bottom: 0px;
+    margin-bottom: 0px;
   }
 }
 
 .headerDekLeft {
   left: 0%;
   margin-left: var(--headerDek-horizontal-offset);
+
   @media @tablet {
-      margin-left: 0px;
+    margin-left: 0px;
   }
 }
 
 .headerDekRight {
   right: 0%;
   margin-right: var(--headerDek-horizontal-offset);
+
   @media @tablet {
-      margin-right: 0px;
+    margin-right: 0px;
   }
 }
 
 .headerDekCenter {
-  left: 50%; 
+  left: 50%;
   transform: translate(-50%, 0%);
   margin-left: var(--headerDek-horizontal-offset);
 
-  @media @tablet { 
-      transform: none;
-      top: 0%;
-      left: 0%;
-      margin-left: 0px;
+  @media @tablet {
+    transform: none;
+    top: 0%;
+    left: 0%;
+    margin-left: 0px;
   }
 }
 
@@ -105,6 +126,7 @@
 
 .textAlignCenter {
   text-align: center;
+
   @media @tablet {
     text-align: left;
   }
@@ -113,6 +135,7 @@
 .whiteTextBlackBg {
   color: @white;
   background-color: rgba(0, 0, 0, 0.54);
+
   @media @tablet {
     color: @black;
     background-color: transparent;
@@ -124,15 +147,16 @@
   background-color: rgba(255, 255, 255, 0.54);
 }
 
-.hideWhenMobile {
-  @media @mobile { 
-      display: none;
+.hideWhenTablet {
+  @media @tablet {
+    display: none;
   }
 }
 
 .hideWhenDesktop {
   display: none;
-  @media @mobile {
+
+  @media @tablet {
     display: block;
     padding-left: @s8;
   }
@@ -140,4 +164,10 @@
 
 .smallPaddingLeft {
   padding-left: @s8;
+}
+
+.smallPaddingLeftWhenTablet {
+  @media @tablet {
+    padding-left: @s8;
+  }
 }

package/styles/modules/{wcmimage2.module.less → topperimage.module.less}

@@ -1,10 +1,35 @@
 @import (less) '../values';
 @import (less) "../variables.less";
 
-:root { 
+:root {
   --img-bottom-padding-ratio: "56.25%";
 }
 
+.c-force-aspect-ratio {
+  display: static;
+  width: @xl;
+  object-fit: cover;
+  height: calc(@xl*2/3);
+  margin: 0 auto;
+
+  @media @tablet {
+    height: calc(100vw*2/3);
+  }
+}
+
+.c-img-slideshow-fullscreen {
+  display: static;
+  width: 100%;
+  object-fit: cover;
+  height: calc(100vh - 37px);
+  margin: 0 auto;
+
+  @media @tablet {
+    width: @xl;
+    height: calc(100vw*2/3);
+  }
+}
+
 .c-img {
   display: block;
   position: relative;
@@ -17,7 +42,9 @@
 .c-img-fullscreen {
   position: static;
   object-fit: cover;
+  width: 100%;
   height: calc(100vh - 37px);
+
   @media @tablet {
     height: auto;
   }
@@ -25,7 +52,8 @@
 
 .c-fig-hidden-when-desktop {
   display: none;
-  @media @mobile {
+
+  @media @tablet {
     display: block;
     padding-left: @s8;
   }

package/styles/values.less

@@ -94,6 +94,7 @@
 .pa-xl {padding: @s40;}
 .pa-xxl {padding: @s48;}
 
+.mw-xs {max-width: @xs;}
 .mw-sm {max-width: @sm;}
 .mw-md {max-width: @md;}
 .mw-lg {max-width: @lg;}