sfc-utils 1.3.25 → 1.3.26

package/example/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "utilstest",
+  "description": "A Hearst interactive project",
+  "version": "1.0.0",
+  "author": "ewagstaff",
+  "dependencies": {
+    "axios": "0.27.2",
+    "css.gg": "2.0.0",
+    "gatsby": "4.13.0",
+    "gatsby-plugin-htaccess": "1.4.0",
+    "gatsby-plugin-html-attributes": "1.0.5",
+    "gatsby-plugin-less": "6.13.0",
+    "gatsby-plugin-preact": "6.13.0",
+    "gatsby-plugin-react-helmet": "5.13.0",
+    "gatsby-source-filesystem": "4.13.0",
+    "gatsby-transformer-json": "4.13.0",
+    "jump.js": "1.0.2",
+    "less": "4.1.1",
+    "preact": "10.5.13",
+    "preact-render-to-string": "5.2.0",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-headroom": "3.1.1",
+    "react-helmet": "6.1.0",
+    "react-lazyload": "3.2.0",
+    "require-directory": "2.1.1",
+    "swr": "^0.5.6"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "browserslist": [
+    "Chrome >= 61",
+    "ChromeAndroid >= 80",
+    "Safari >= 11",
+    "iOS >= 11",
+    "Firefox >= 60",
+    "FirefoxAndroid >= 68",
+    "Edge >= 16",
+    "Opera >= 48",
+    "Android >= 80",
+    "Samsung >= 8.2"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "deploy:git": "func() { npm run clean && export GATSBY_DEPLOY_ENV=\"$1\" && export GATSBY_DEPLOY_ORIGIN=\"$2\" && tasks/pre-build.sh && gatsby build --prefix-paths && tasks/post-build.sh; }; func",
+    "auth": "tasks/googleauth.js",
+    "sheets": "tasks/google-sheets.js",
+    "docs": "tasks/google-docs.js",
+    "dev": "export GATSBY_DEPLOY_ENV=development && gatsby develop -H 0.0.0.0",
+    "makec2p": "tasks/create-c2p-sheet.js",
+    "clean": "rm -rf .cache && rm -rf public_export && rm -rf public",
+    "format": "prettier --write \"src/**/*.js\"",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "analyze": "export ANALYZE_BUNDLE_SIZE=true && gatsby build"
+  },
+  "devDependencies": {
+    "babel-eslint": "10.1.0",
+    "eslint": "7.7.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.27",
+    "luxon": "1.24.1",
+    "prettier": "2.0",
+    "probe-image-size": "^7.0.1",
+    "request": "^2.88.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  }
+}

package/example/project-config.json

@@ -0,0 +1,42 @@
+{
+  "_comment": "The possible paywall values are 'meter' (hit the paywall after a certain number of free stories), 'paywall' (paywall immediately), 'free' (no wall), or 'meter-no-paywall' (count this against the reader's meter, but never show the paywall on this page)",
+  "PAYWALL_SETTING": "meter",
+  "EMBEDDED": false,
+  "GOOGLE_SHEETS": [],
+  "GOOGLE_DOCS": [],
+  
+  "_domain_explainer": "NOTE: MAIN_DOMAIN will get swapped out based on the MARKEY_KEY when deployed on the server. If you are building it locally for a repo push, you need to set the domain manually here.",
+  "MAIN_DOMAIN": "https://projects.sfchronicle.com",
+
+  "PROJECT": {
+    "_key_explainer": "NOTE: Change MARKET_KEY to deploy to other markets using their domain and settings. Accepted markets include: SFC, Houston, SanAntonio, Albany, CT",
+    "MARKET_KEY": "SFC",
+
+    "_comment": "IMPORTANT: SUBFOLDER and SLUG for used for file pathing and the deploy script! Take care with your edits to them! NOTE: Stage deploys will automatically go to 'projects/test-proj'",
+    "SUBFOLDER": "{%= subfolder_path %}",
+    "SLUG": "{%= app_slug %}",
+
+    "TITLE": "",
+    "DISPLAY_TITLE": "",
+    "SOCIAL_TITLE": "",
+    "IMAGE": "",
+    "DESCRIPTION": "",
+    "DECK": "",
+    "TWITTER_TEXT": "Some social text",
+    "_options_for_HEARST_CATEGORY": "Bay Area,Politics,Climate,Weather,California Wildfires,Food,Sports,Tech,Travel,US & World,Chronicle Vault,Opinion",
+    "HEARST_CATEGORY": "Bay Area",
+    "KEY_SUBJECTS": "Data",
+    "DATE": "January 1, 1970 6:00 PM",
+
+    "NEWSLETTER_ID": "SFC_NL_TopStories",
+    "NEWSLETTER_PROMO": "Get the Bay Area's best journalism delivered to my inbox daily",
+    "NEWSLETTER_LEGAL": "By subscribing, you agree to our <a href=\"https://www.sfchronicle.com/terms_of_use/\">Terms of Use</a> and acknowledge that your information will be used as described in our <a href=\"https://www.sfchronicle.com/privacy_policy/\"> Privacy Notice</a>.",
+
+    "AUTHORS": [
+      {
+        "AUTHOR_NAME": "Chronicle Digital Team",
+        "AUTHOR_PAGE": "https://projects.sfchronicle.com/"
+      }
+    ]
+  }
+}

package/example/src/components/layout.js

@@ -0,0 +1,236 @@
+/* Layout wraps all pages so updates here effect everything */
+
+import React, { Fragment, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Helmet } from 'react-helmet'
+
+// Bring in footer
+import Footer from './sfc/footer'
+
+// Add SFC utils
+import { blendHDN, appCheck, getBrands, getBlueconic } from '../../../index'
+
+// Import global styles needed in document
+require('../styles/seed.less')
+
+const Layout = ({   
+  meta,
+  url_add = '',
+  description = false,
+  image = false,
+  social_title = false,
+  title = 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
+    },
+  } = 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
+
+  // Make sure url_add ends with a slash
+  if (url_add && url_add.slice(-1) !== "/"){
+    url_add += "/"
+  }
+
+  // Set fonts by MARKET_KEY
+  switch(MARKET_KEY){
+    case "SFC": require('../../../fonts/sfc.less'); break;
+    case "Houston": require('../../../fonts/houston.less'); break;
+    case "Albany": require('../../../fonts/albany.less'); break;
+    // TK many more
+    default: require('../../../fonts/default.less'); break;
+  }
+
+  // Determine if app ver
+  // Either from the build settings or from the query string
+  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,
+    }
+  }
+
+  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)
+  }, [])
+
+  return (
+    <Fragment>
+      {/* Forcing HDN vars in so we can feed them to ensighten */}
+      <Helmet
+        script={[
+          {
+            type: 'text/javascript',
+            innerHTML: stringHDN,
+          },
+        ]}
+      />
+      <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 } />
+
+        {(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>
+
+      {/* Full project included here: */}
+      {children}
+
+      {/* Include footer unless it's embedded or the app version: */}
+      {!EMBEDDED && !isApp && <Footer meta={meta} />}
+    </Fragment>
+  )
+}
+
+Layout.propTypes = {
+  meta: PropTypes.object.isRequired,
+  url_add: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  social_title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+}
+
+export default Layout

package/example/src/components/sfc/ad.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import * as adStyles from '../../styles/modules/ad.module.less'
+
+// Hearst ad -- make sure Juice is fully loaded before running the script logic
+const Ad = ({ adLetter }) => {
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    let attemptLoad = () => {
+      if (typeof hearstPlaceAd === "undefined"){
+        // The function isn't ready yet, so wait
+        setTimeout(() => {
+          attemptLoad()
+        }, 1000)
+      } else {
+        // We have the function, so set loaded
+        setLoaded(true)
+      }
+    }
+
+    // Kick off loop
+    attemptLoad()
+  }, [])
+
+  return (
+    <div className={adStyles.ad}>
+      <p className={adStyles.adhed}>Advertisement</p>
+      <div id={`${adLetter}Pflex`}>
+        {loaded &&
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{
+              __html: `/*<![CDATA[*/hearstPlaceAd("${adLetter}Pflex");/*]]>*/`,
+            }}
+          ></script>
+        }
+      </div>
+    </div>
+  )
+}
+
+Ad.propTypes = {
+  adLetter: PropTypes.string
+}
+
+export default Ad