sfc-utils 1.3.53 → 1.3.55

package/example/gatsby-config.js

@@ -1,5 +1,5 @@
 // Add SFC utils
-const { getBrands, getNav, getFooter } = require('../index')
+const { getBrands2 } = require('../index')
 const { getSettings } = require('./tempsettings')
 const { DateTime } = require('luxon');
 
@@ -83,7 +83,7 @@ let plugins = [
     resolve: 'gatsby-plugin-less',
     options: {
       lessOptions: {
-        modifyVars: getBrands(settings.PROJECT.MARKET_KEY).styles,
+        modifyVars: getBrands2(settings.PROJECT.MARKET_KEY).styles,
       },
     },
   },

package/example/gatsby-node.js

@@ -4,12 +4,18 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
- var {requestImage} = require("./tasks/node-helpers");
+var {requestImage} = require("./tasks/node-helpers");
+let topperData = require("./src/data/topper2_settings.sheet.json");
 
 // Import all the WCM photos you'd like to use in this project
 // NOTE: Leave this as an empty array if you aren't importing any WCM photos, but you won't be able to use the WCMImage component
 const wcmPhotos = [20374215]
 
+// Add topper image to wcmPhotos list
+let numStr = (topperData[0].Image).toString()
+let isNum = /^\d+$/.test(numStr.trim())
+if (isNum && !wcmPhotos.includes(numStr.trim())) wcmPhotos.push((numStr.trim()));
+
 // Create nodes so GraphQL can access
 exports.sourceNodes = async ({
   actions,

package/example/project-config.json

@@ -2,7 +2,7 @@
   "_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": ["1v2U2iG7lEZHaKRgGTeg6xKlyTjZnu_C5uQ1CLSD5iEw"],
+  "GOOGLE_SHEETS": ["1DUvYnFdxtBv1AXcDI9X00s_opUSu4uHJmd5LNemCN9E"],
   "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.",
@@ -34,8 +34,8 @@
 
     "AUTHORS": [
       {
-        "AUTHOR_NAME": "Chronicle Digital Team",
-        "AUTHOR_PAGE": "https://projects.sfchronicle.com/"
+        "AUTHOR_NAME": "",
+        "AUTHOR_PAGE": ""
       }
     ]
   }

package/example/src/components/layout.js

@@ -49,20 +49,19 @@ const Layout = ({
   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"
+  }
+
   // 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()
@@ -161,6 +160,7 @@ const Layout = ({
           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" />

package/example/src/pages/index.js

@@ -1,31 +1,49 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import PropTypes from 'prop-types'
-// import useSWR from 'swr'
-// import { getData } from '../components/sfc/component-helpers/requesthelpers'
 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'
 import Newsletter from '../components/sfc/newsletter'
+import NavTop from '../components/sfc/navtop'
+import Byline from '../../../components/byline.mjs'
+import Topper2 from '../../../components/topper2.mjs'
+
 let rawCredits;
 try {
 	rawCredits = require('../data/credits.sheet.json')
-} catch (err){
+} catch (err) {
     // It's fine
     rawCredits = null;
 }
+
 let related_links;
-try{
+try {
   related_links = require('../data/related_links.sheet.json')
-} catch(err){
+} catch(err) {
   related_links = require('../data/sfc/related_links.json')
 }
 
+let topperSettings;
+try {
+  topperSettings = require('../data/topper2_settings.sheet.json')
+} catch {
+  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, {
@@ -39,11 +57,14 @@ const IndexPage = ({ data }) => {
   const {
     site: { siteMetadata },
     allRelatedLinksJson: { nodes: relatedLinks },
+    allWcmPhotos
   } = data
 
   return (
     <Layout meta={siteMetadata}>
-      <Topper meta={siteMetadata} />
+      <NavTop meta={siteMetadata} />
+      <Topper2 settings={topperSettings[0]} wcmData={allWcmPhotos} lazyloader={LazyLoader}/>
+      <Byline meta={siteMetadata}/>
       <main>
         <article>
           <p>
@@ -134,6 +155,15 @@ export const query = graphql`
         url
       }
     }
+    allWcmPhotos {
+      nodes {
+        photo {
+          ratio
+          wcmid
+          full_path
+        }
+      }
+    }
   }
 `
 IndexPage.propTypes = {

package/example/src/styles/credittooltip.less

@@ -0,0 +1,55 @@
+@import (less) '../../../styles/variables.less';
+
+body .__react_component_tooltip {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 20%);
+  padding: 6px @s4;
+  pointer-events: all;
+
+  .flex-contact {
+    display: flex;
+    align-items: center;
+
+    a {
+      &:visited {
+        color: @black;
+      }
+      &:hover {
+        opacity: 0.6;
+        color: @black;
+      }
+    }
+    .svg-wrapper {
+      width: 25px;
+      height: 25px;
+      border-radius: 25px;
+      border: 1px solid @black;
+      margin: 0 2px;
+    }
+    svg {
+      width: 100%;
+      padding: @s4;
+      // margin: 0 3px;
+    }
+  }
+}
+
+.contact-name, .font-awesome a {
+  color: @black;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: @grey-75;
+  cursor: pointer;
+
+  &:hover {
+    color: @grey-50;
+  }
+}
+
+.contact-name[data-tip="{}"] {
+  text-decoration: none;
+  color: @black;
+  &:hover {
+    color: inherit;
+    cursor: inherit;
+  }
+}

package/example/src/styles/footer.less

@@ -1,20 +1,20 @@
-@import (less) "values";
+@import (less) '../../../styles/variables.less';
 
 .pageFooter {
-  background-color: #222;
+  background-color: @black;
   overflow: auto;
-  padding: 30px 20px;
+  padding: @s32 @s24;
   position: relative;
 
   &.invert {
-    background-color: #ececec;
-    color: #000;
+    background-color: @grey-pale;
+    color: @black;
   }
 }
 
 .pageFooter--left {
   text-indent: -9999px;
-  margin-bottom: 15px;
+  margin-bottom: @s16;
 }
 
 .pageFooter--left-logo {
@@ -146,56 +146,63 @@
   list-style: none;
 }
 
+.PageFooter,.wrapper,ul {
+    padding-top: @s16 !important;
+}
+
+.PageFooter,.section,ul {
+    padding-top: 0 !important;
+}
+
 .pageFooter--right-links li {
-  margin-bottom: 10px;
+  margin-bottom: @s8;
   padding: 0;
 
   a {
-    color: #fff;
+    color: @white;
     text-decoration: none;
     &:hover {
-      color: #ccc;
+      color: @grey-25;
     }
     &:visited{
-      color: @gray;
+      color: @grey-50;
     }
   }
 }
 
-.invert .pageFooter--right-links li { 
+.invert .pageFooter--right-links li {
   a {
-    color: #222;
+    color: @black;
   }
   a:hover {
     color: @brand;
   }
-  &:visited{
-    color: @gray;
+  a:visited{
+    color: @grey-50;
   }
 }
 
 .pageFooter--right-links .section {
   -webkit-column-count: 2;
   column-count: 2;
-  margin: 11px 0 18px;
+  margin: @s8 0 @s24;
 }
 
 .pageFooter--right-links .footer-title {
-  margin-bottom: 4px;
   text-align: left;
   text-transform: uppercase;
 }
 
 .pageFooter--branding {
-  border-top: 1px solid #999;
+  border-top: 1px solid @grey-50;
   float: left;
-  padding-top: 17px;
+  padding-top: @s16;
   width: 100%;
-  color: #fff;
+  color: @white;
 }
 
 .invert .pageFooter--branding {
-  color: #000;
+  color: @black;
 }
 
 .pageFooter--branding-logo {
@@ -209,7 +216,7 @@
 }
 @media (min-width:48rem) {
   .pageFooter {
-    padding: 36px 64px;
+    padding: @s32 @s64;
   }
 
   .pageFooter--wrapper {
@@ -226,13 +233,13 @@
   }
 
   .pageFooter--right-topLine {
-    border-bottom: 1px solid #999;
-    margin-bottom: 14px;
+    border-bottom: 1px solid @grey-50;
+    margin-bottom: @s16;
     position: static;
     text-align: right;
 
     a {
-      color: #222;
+      color: @black;
     }
   }
 
@@ -248,14 +255,17 @@
 
   .pageFooter--right-links .wrapper > li {
     -webkit-box-flex: 0;
-    padding-bottom: 0;
+    padding: 0 @s16;
+    &:first-of-type {
+      padding-left: 0;
+    }
   }
 
   .pageFooter--right-links .section {
     -webkit-column-count: 1;
     column-count: 1;
     margin-bottom: 0;
-    margin-right: 5px;
+    margin-right: @s4;
   }
 
   .pageFooter--right-links .section > li:last-child {
@@ -271,16 +281,16 @@
 }
 @media (min-width:58rem) {
   .pageFooter {
-    padding: 36px;
+    padding: @s32;
   }
 
   .pageFooter--right {
-    width: 600px;
+    width: @md;
   }
 }
 @media (min-width:88.75rem) {
   .pageFooter {
-    padding: 36px 0;
+    padding: @s32 0;
   }
 
   .pageFooter--branding {
@@ -289,28 +299,28 @@
 }
 
 .pageFooter {
-  font-family: @sans-light;
+  font-family: @sans;
   font-variant-numeric: lining-nums;
-  font-weight: 300;
+  font-weight: 400;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-text-stroke: 0.45px rgba(0,0,0,.1);
-  color: #000;
+  color: @black;
   font-size: 12px;
   line-height: 1.17;
 }
 
 .pageFooter .footer-title {
-  font-family: @sans-bold;
+  font-family: @sans;
   font-variant-numeric: lining-nums;
-  font-weight: 400;
+  font-weight: 700;
   -webkit-font-smoothing: antialiased;
   letter-spacing: 1px;
-  color: #fff;
+  color: @white;
 }
 
 .pageFooter.invert .footer-title {
-  color: #000;
+  color: @black;
 }
 
 .pageFooter .footer-title,
@@ -320,7 +330,7 @@
 }
 
 .pageFooter .return {
-  font-family: @sans-med;
+  font-family: @sans;
   font-variant-numeric: lining-nums;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
@@ -328,7 +338,7 @@
 }
 
 #scrollTop {
-  color: #222;
+  color: @black;
   min-width: 120px;
   cursor: pointer;
   font-size: 12px;