sfc-utils 1.3.64 → 1.3.66

package/brands2.js

@@ -39,7 +39,9 @@ let getBrands2 = function(market){
 				"twitter": "sfchronicle",
 				"gaAccount": "UA-1616916-26",
 				"subscribeLink": "https://www.sfchronicle.com/subproject",
-				"sailCustomer": "fca2a0390286f0e53120a668534d9529"
+				"sailCustomer": "fca2a0390286f0e53120a668534d9529",
+				"sailSiteName": "san-francisco-chronicle",
+				"siteId": 35,
 			}
 		},
 
@@ -61,7 +63,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-24",
 				"subscribeLink": "https://www.houstonchronicle.com/subproject",
-				"sailCustomer": "48e30b5083cf6bf47c519651453c9e8a"
+				"sailCustomer": "48e30b5083cf6bf47c519651453c9e8a",
+				"sailSiteName": "houston-chronicle",
+				"siteId": 33
 			}
 		},
 
@@ -83,7 +87,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-7",
 				"subscribeLink": "https://www.timesunion.com/subproject",
-				"sailCustomer": "5bb9eee089bdc2e27cbd265535ad1f90"
+				"sailCustomer": "5bb9eee089bdc2e27cbd265535ad1f90",
+				"sailSiteName": "times-union",
+				"siteId": 3
 			}
 		},
 
@@ -100,7 +106,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-27",
 				"subscribeLink": "https://www.expressnews.com/subproject",
-				"sailCustomer": "aec52c4681ed63b5beab139a2584f0d4"
+				"sailCustomer": "aec52c4681ed63b5beab139a2584f0d4",
+				"sailSiteName": "san-antonio-express-news",
+				"siteId": 36
 			}
 		},
 
@@ -117,7 +125,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "https://www.ctinsider.com/subproject",
-				"sailCustomer": "9b21160afa226c9f84d27b47c3d52364"
+				"sailCustomer": "9b21160afa226c9f84d27b47c3d52364",
+				"sailSiteName": "ct-insider",
+				"siteId": 61
 			}
 		},
 
@@ -134,7 +144,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "/subproject",
-				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c"
+				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c",
+				"sailSiteName": "midland-reporter-telegram",
+				"siteId": 57
 			}
 		},
 		Midcom: {
@@ -149,7 +161,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "/subproject",
-				"sailCustomer": "f3dc0abb53995f957783e76eff3ef01e"
+				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c",
+				"sailSiteName": "midland-daily-news",
+				"siteId": 61
 			}
 		},
 		Conroe: {
@@ -164,7 +178,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "https://www.yourconroenews.com/subproject",
-				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c"
+				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c",
+				"sailSiteName": "the-courier-of-montgomery-county",
+				"siteId": 68
 			}
 		},
 

package/components/helpers/utilfunctions.mjs

@@ -1,12 +1,75 @@
+import { getBlueconic } from "../../blueconic"
+import { appCheck, blendHDN } from "../../index"
+
+/** Used for resizing the WCM Image */
 function debounce(fn, ms) {
-    let timer
-    return _ => {
-      clearTimeout(timer)
-      timer = setTimeout(_ => {
-        timer = null
-        fn.apply(this, arguments)
-      }, ms)
+  let timer
+  return _ => {
+    clearTimeout(timer)
+    timer = setTimeout(_ => {
+      timer = null
+      fn.apply(this, arguments)
+    }, ms)
+  }
+}
+
+function appendLayoutScripts(isEmbedded, isAdRemoved) {
+  const isApp = appCheck();
+
+  // 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 (!isEmbedded) {
+    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 (!isEmbedded && !isAdRemoved) {
+    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 (!isEmbedded && !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)
+}
+
+function formatHDN(isEmbedded, url_add, meta) {
+  const isApp = appCheck();
+
+  // Combine our settings with what Hearst puts on page
+  let stringHDN = ''
+  if (!isEmbedded) {
+    // 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"
     }
+    // Allow gift button to appear next to sharebuttons
+    metaHDN.GIFT_ENABLED = true
+    let blended = blendHDN(metaHDN)
+    stringHDN = blended.stringHDN
   }
+  return stringHDN;
+}
 
-export { debounce }
+export { debounce, appendLayoutScripts, formatHDN }

package/components/layout/layouthelmet.mjs

@@ -0,0 +1,125 @@
+import React from 'react'
+
+import { Helmet } from 'react-helmet'
+import { appCheck, getBrands2 } from "../../index"
+
+const LayoutHelmet = ({ meta, url_add }) => {
+  let {
+    EMBEDDED,
+    MAIN_DOMAIN,
+    PROJECT: {
+      AUTHORS,
+      DESCRIPTION,
+      IMAGE,
+      ISO_MODDATE,
+      ISO_PUBDATE,
+      OPT_SLASH,
+      SLUG,
+      SOCIAL_TITLE,
+      SUBFOLDER,
+      TITLE,
+      MARKET_KEY,
+      CANONICAL_URL
+    },
+  } = meta
+
+  const isApp = appCheck()
+  const thisBrand = getBrands2(MARKET_KEY);
+
+  // Get stylesheet id from market key
+  let styleSheetID
+  if ((MARKET_KEY === "SFC") || (MARKET_KEY === "Houston") || (MARKET_KEY === "Albany")) {
+    styleSheetID = MARKET_KEY
+  }
+  else {
+    styleSheetID = "default"
+  }
+
+  // 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,
+    }
+  }
+
+  return (
+    <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}/${url_add}`} />
+      <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>
+  )
+}
+
+export default LayoutHelmet

package/components/layout/layoutscript.mjs

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const LayoutScript = () => {
+  return (
+    <>
+      <script src="https://projects.sfchronicle.com/shared/js/jquery.min.js"></script>
+      <script src="https://treg.hearstnp.com/treg.js"></script>
+    </>
+  )
+}
+
+export default LayoutScript

package/components/slideshow/captioncreditslideshow.mjs

@@ -0,0 +1,53 @@
+import React, { useEffect, useState, useRef } from "react"
+
+const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles }) => {
+  let captionCss = ["topper-image", "caption"];
+  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+
+  const [index, setIndex] = useState(0);
+  const timeoutRef = useRef(null);
+
+  function resetTimeout() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }
+
+  useEffect(() => {
+    resetTimeout();
+    timeoutRef.current = setTimeout(() => {
+      // Set current image index
+      setIndex((prevIndex) => (prevIndex === captionList.length - 1) ? 0 : prevIndex + 1);
+    },
+      4000 // Delay for switching images
+    );
+
+    return () => {
+      resetTimeout();
+    };
+  }, [index]);
+
+  const hasCaption = (captionList.length > 0)
+  const hasCredit = (creditList.length > 0)
+  return (
+    <>
+      {hasCaption && hasCredit && (
+        <figcaption className={captionCss.join(' ')}>
+          {captionList[index]} <span className="credit">{creditList[index]}</span>
+        </figcaption>
+      )}
+      {!hasCaption && hasCredit && (
+        <figcaption className={captionCss.join(' ')}>
+          <span className="credit">{creditList[index]}</span>
+        </figcaption>
+      )}
+      {hasCaption && !hasCredit && (
+        <figcaption className={captionCss.join(' ')}>
+          {captionList[index]}
+        </figcaption>
+      )}
+    </>
+  )
+}
+
+export default CaptionCreditSlideshow

package/components/slideshow/imageslideshow.mjs

@@ -0,0 +1,95 @@
+import React, { useEffect, useState, useRef } from "react"
+import TopperImage from "../topperimage.mjs"
+import * as styles from "../../styles/modules/imageslideshow.module.less"
+import * as imageStyles from "../../styles/modules/topperimage.module.less"
+import { TransitionGroup, CSSTransition } from "react-transition-group"
+
+const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
+  const [index, setIndex] = useState(0);
+  const timeoutRef = useRef(null);
+
+  function resetTimeout() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }
+
+  useEffect(() => {
+    resetTimeout();
+    timeoutRef.current = setTimeout(() => {
+      // Set current image index
+      setIndex((prevIndex) => (prevIndex === imageList.length - 1) ? 0 : prevIndex + 1);
+    },
+      4000 // Delay for switching images
+    );
+
+    return () => {
+      resetTimeout();
+    };
+  }, [index]);
+
+  const getContainerClass = () => {
+    switch (topperStyle) {
+      case "stacked":
+        return styles.containerStacked;
+      case "full-screen":
+        return styles.containerStacked;
+      default:
+        return "";
+    }
+  }
+
+  const getWrapperClass = () => {
+    switch (topperStyle) {
+      case "stacked":
+        return styles.imageWrapperStacked;
+      case "full-screen":
+        return styles.imageWrapperFullscreen;
+      default:
+        return "";
+    }
+  }
+
+  const getImageClassList = () => {
+    switch (topperStyle) {
+      case "stacked":
+        return [imageStyles.cForceAspectRatio];
+      case "full-screen":
+        return [imageStyles.cImgSlideshowFullscreen];
+      default:
+        return [""];
+    }
+  }
+
+  /**
+   * Overall CSS architecture:
+   * <Container>
+   *   <Wrapper>
+   *    <Image/>
+   *  </Wrapper> 
+   * </Container> 
+   */
+  return (
+    <div className={getContainerClass()}>
+      <TransitionGroup>
+        <CSSTransition
+          key={index}
+          timeout={4000}
+          classNames={{
+            enter: styles.fadeEnter,
+            enterActive: styles.fadeEnterActive,
+            exit: styles.fadeExit,
+            exitActive: styles.fadeExitActive,
+            exitDone: styles.fadeExitDone
+          }}
+        >
+          <div className={getWrapperClass()}>
+            <TopperImage wcm={imageList[index]} alt={altList[index]} wcmData={wcmData} overrideCssList={getImageClassList()} />
+          </div>
+        </CSSTransition>
+      </TransitionGroup>
+    </div>
+  )
+}
+
+export default ImageSlideshow