sfc-utils 1.3.25 → 1.3.28

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

@@ -0,0 +1,74 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import videoStyles from '../../styles/modules/video.module.less'
+
+export default function Video({
+  id,
+  containerClass,
+  innerContainerClass,
+  videoClass,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  alt,
+  cap,
+  cred,
+}) {
+  return (
+    <figure className={containerClass ? containerClass : videoStyles.container}>
+      <div
+        className={
+          innerContainerClass
+            ? innerContainerClass
+            : innerContainerClass === null
+            ? ''
+            : videoStyles.responsiveContainer
+        }
+      >
+        <video
+          className={videoClass ? videoClass : videoStyles.default}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          preload="auto"
+          alt={alt}
+          poster={`https://files.sfchronicle.com/static-assets/compression-bot/${id}.jpg`}
+        >
+          <source
+            src={`https://files.sfchronicle.com/static-assets/compression-bot/${id}.mp4`}
+            type="video/mp4"
+          />
+          <source
+            src={`https://files.sfchronicle.com/static-assets/compression-bot/${id}.m3u8`}
+            type="application/x-mpegURL"
+          />
+        </video>
+      </div>
+      {cap && cred && (
+        <figcaption className={videoStyles.cFigCap}>
+          {cap} <span className={videoStyles.cFigCred}>{cred}</span>
+        </figcaption>
+      )}
+      {!cap && cred && (
+        <figcaption className={videoStyles.cFigCap}>
+          <span className={videoStyles.cFigCred}>{cred}</span>
+        </figcaption>
+      )}
+      {cap && !cred && (
+        <figcaption className={videoStyles.cFigCap}>{cap}</figcaption>
+      )}
+    </figure>
+  )
+}
+
+Video.propTypes = {
+  id: PropTypes.string.isRequired,
+  videoClass: PropTypes.string,
+  containerClass: PropTypes.string,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool,
+  alt: PropTypes.string.isRequired,
+  cred: PropTypes.string,
+  cap: PropTypes.string,
+}

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

@@ -0,0 +1,131 @@
+import React, {useRef, useEffect, useLayoutEffect, useState} from 'react'
+import LazyLoad from 'react-lazyload'
+import PropTypes from 'prop-types'
+import * as wcmimageStyles from '../../styles/modules/wcmimage.module.less'
+import { useStaticQuery, graphql } from "gatsby"
+import { debounce } from '../sfc/component-helpers/utilfunctions'
+
+const currentEnv = process.env.GATSBY_DEPLOY_ENV
+
+const WCMImage = ({ wcm, alt, cap, cred, lz, className, ratio }) => {
+  // When the wrapping div is rendered, we're going to figure out the best size for this image to be
+  let picRef = useRef(null)
+  let [imageRez, setImageRez] = useState(0)
+
+  let setImageWidth = () => {
+    let pixelWidth = 900 // Default width if we need a fallback
+    let pixelRatio = window.devicePixelRatio || 1
+    if (picRef.current && picRef.current.offsetWidth){
+      pixelWidth = Math.round(picRef.current.offsetWidth * pixelRatio)
+    }
+    if (imageRez < pixelWidth){ // No need to resize if we're just scaling down
+      setImageRez(pixelWidth)
+    }
+  }
+
+  useEffect(() => {
+    const debouncedHandleResize = debounce(function handleResize() {
+      setImageWidth()
+    }, 500)
+    window.addEventListener('resize', debouncedHandleResize)
+
+    return () => {
+      window.removeEventListener('resize', debouncedHandleResize)
+    }
+  })
+
+  useEffect(() => {
+    setImageWidth()
+  }, [])
+
+  // Use GraphQL to grab the data for the WCM photo we want
+  const data = useStaticQuery(graphql`
+    query PhotoQuery {
+      allWcmPhotos {
+        nodes {
+          photo {
+            ratio
+            wcmid
+            full_path
+          }
+        }
+      }
+    }
+  `)
+
+  let photoRatio = "56.25%"; // Default to 16/9
+  let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/0/`;
+  if (!ratio){
+    let matchedPhoto = data.allWcmPhotos.nodes.find((item) => {
+      return item.photo.wcmid.toString() === wcm.toString()
+    })
+    if (!matchedPhoto && currentEnv !== "development"){
+      throw `WCMImage error: No matching ID for ${wcm} present in the array at the top of gatsby-node.js! If it's already there, you might need to reboot dev.`
+    } 
+    if (matchedPhoto){  
+      // Set ratio of the actual photo like a legit hacker
+      photoRatio = (matchedPhoto.photo.ratio*100)+"%";
+      fullPath = matchedPhoto.photo.full_path;
+    } else {
+      // Alert that things will go wrong on deploy
+      console.error(`No matching ID for ${wcm} found in gatsby-node.js! This is fine for development, but it will error on deploy!`);
+    }
+  } else {
+    // If an override is being passed in, use that
+    photoRatio = ratio
+  }
+  
+  // Get serious about alt tags
+  if (typeof alt !== "string"){
+    throw `WCMImage error: Image for ${wcm} needs an alt tag! Please add a good, descriptive alt tag. Suggestion from Mozilla: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.`
+  }
+
+  // Conditionally lazyload if we want to and have the capability
+  const ConditionalWrapper = ({ condition, wrapper, children }) => 
+  condition ? wrapper(children) : children;
+
+  return (
+    <figure className={className ? className : ""}>
+      <div ref={picRef} style={{paddingBottom: photoRatio, overflow: "hidden", position: "relative"}}>
+        <ConditionalWrapper
+          condition={!lz}
+          wrapper={children => <LazyLoad offset={300} resize once>{children}</LazyLoad>}
+        >
+          {imageRez > 0 &&
+            <img style={{position: "absolute"}}
+              className={wcmimageStyles.cImg}
+              // "lazy" won't work on older browsers, which is why we use LazyLoad conditionally
+              loading="lazy"
+              src={`${fullPath}${imageRez}x0.jpg`}
+              // PLEASE INCLUDE ALTS
+              alt={alt}
+            />
+          }
+        </ConditionalWrapper>
+      </div>
+      {cap && cred && (
+        <figcaption className={wcmimageStyles.cFigCap}>
+          {cap} <span className={wcmimageStyles.cFigCred}>{cred}</span>
+        </figcaption>
+      )}
+      {!cap && cred && (
+        <figcaption className={wcmimageStyles.cFigCap}>
+          <span className={wcmimageStyles.cFigCred}>{cred}</span>
+        </figcaption>
+      )}
+      {cap && !cred && (
+        <figcaption className={wcmimageStyles.cFigCap}>{cap}</figcaption>
+      )}
+    </figure>
+  )
+}
+
+WCMImage.propTypes = {
+  wcm: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  // alt: PropTypes.string.isRequired,
+  cap: PropTypes.string,
+  cred: PropTypes.string,
+  className: PropTypes.string,
+}
+
+export default WCMImage

package/example/src/data/sfc/related_links.json

@@ -0,0 +1,17 @@
+[
+	{	
+		"title": "TK TITLE1",
+		"url": "https://www.sfchronicle.com",
+		"wcmid": 20374215
+	},
+	{	
+		"title": "TK TITLE2",
+		"url": "https://www.sfchronicle.com",
+		"wcmid": 20374215
+	},
+	{	
+		"title": "TK TITLE3",
+		"url": "https://www.sfchronicle.com",
+		"wcmid": 20374215
+	}
+]

package/example/src/html.js

@@ -0,0 +1,41 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          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>
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes} is="responsive-body">
+        {props.preBodyComponents}
+        <noscript key="noscript" id="gatsby-noscript">
+          This app works best with JavaScript enabled.
+        </noscript>
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}

package/example/src/pages/index.js

@@ -0,0 +1,143 @@
+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 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'
+let rawCredits;
+try {
+	rawCredits = require('../data/credits.sheet.json')
+} catch (err){
+    // It's fine
+    rawCredits = null;
+}
+let related_links;
+try{
+  related_links = require('../data/related_links.sheet.json')
+} catch(err){
+  related_links = require('../data/sfc/related_links.json')
+}
+
+const IndexPage = ({ data }) => {
+  // easy hooks based request library
+  // const { data: responseData, error } = useSWR('https://api.kanye.rest', getData, {
+  //   onSuccess: (data) => console.log(data),
+  //   onError: (err) => console.log(err),
+  // })
+
+  // custom hook checks for nativelazyload
+  const lazy = useCanNativeLazyLoad()
+
+  const {
+    site: { siteMetadata },
+    allRelatedLinksJson: { nodes: relatedLinks },
+  } = data
+
+  return (
+    <Layout meta={siteMetadata}>
+      <Topper meta={siteMetadata} />
+      <main>
+        <article>
+          <p>
+            <DropCap>T</DropCap>
+            he Savage nodded, frowning. "You got rid of them. Yes, that's just
+            like you. Getting rid of everything unpleasant instead of learning
+            to put up with it. Whether 'tis better in the mind to suffer the
+            slings and arrows or outrageous fortune, or to take arms against a
+            sea of troubles and by opposing end them... But you don't do either.
+            Neither suffer nor oppose. You just abolish the slings and arrows.
+            It's too easy."
+          </p>
+
+          <p>
+            The Savage nodded, frowning. "You got rid of them. Yes, that's just
+            like you. Getting rid of everything unpleasant instead of learning
+            to put up with it. Whether 'tis better in the mind to suffer the
+            slings and arrows or outrageous fortune, or to take arms against a
+            sea of troubles and by opposing end them... But you don't do either.
+            Neither suffer nor oppose. You just abolish the slings and arrows.
+            It's too easy."
+          </p>
+
+          {/* Wrapping div supports "embed-" + center/left/right/full classes */}
+          <div className="embed-center">
+            <WCMImage wcm={20374215} alt="TKTKTK" lz={lazy} cap={"TKTKTK caption"} />
+          </div>
+
+          <p>
+            The Savage nodded, frowning. "You got rid of them. Yes, that's just
+            like you. Getting rid of everything unpleasant instead of learning
+            to put up with it. Whether 'tis better in the mind to suffer the
+            slings and arrows or outrageous fortune, or to take arms against a
+            sea of troubles and by opposing end them... But you don't do either.
+            Neither suffer nor oppose. You just abolish the slings and arrows.
+            It's too easy."
+          </p>
+
+          <Ad adLetter="A" />
+
+          <Newsletter />
+        </article>
+      </main>
+
+      <RelatedSection links={related_links} />
+      {rawCredits && <CreditsSection creditsData={rawCredits}/>}
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        EMBEDDED
+        MAIN_DOMAIN
+        PAYWALL_SETTING
+        PROJECT {
+          AUTHORS {
+            AUTHOR_NAME
+            AUTHOR_PAGE
+          }
+          DATE
+          DESCRIPTION
+          HEARST_CATEGORY
+          KEY_SUBJECTS
+          DECK
+          DISPLAY_TITLE
+          IMAGE
+          ISO_MODDATE
+          ISO_PUBDATE
+          OPT_SLASH
+          SLUG
+          SOCIAL_TITLE
+          SUBFOLDER
+          TITLE
+          TWITTER_TEXT
+          ANALYTICS_CREDIT
+          MARKET_KEY
+          CANONICAL_URL
+        }
+      }
+    }
+    allRelatedLinksJson {
+      nodes {
+        wcmid
+        title
+        url
+      }
+    }
+  }
+`
+IndexPage.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+export default IndexPage

package/example/src/styles/defaults.less

@@ -0,0 +1,99 @@
+// A home for our CSS that we think should be on all projects
+//elements
+body {
+  color: @text;
+  font-family: @serif-book;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+hr {
+  color: @light-gray;
+  max-width: 33%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+article {
+  margin-top: @step-3;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.2;
+  font-weight: normal;
+  font-variant-numeric: lining-nums;
+  font-kerning: normal;
+  font-variant-ligatures: normal;
+  text-rendering: optimizeLegibility;
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+p {
+  font-size: @base-font-size;
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 @step--1;
+}
+
+a {
+  color: @text;
+  text-decoration: underline;
+  text-decoration-color: @brand;
+  text-decoration-skip-ink: auto;
+  outline: 0 !important;
+
+  &:hover {
+    color: @brand;
+  }
+
+  &:visited {
+    color: @gray;
+  }
+}
+
+.grecaptcha-badge { // Captcha text handled in widget
+  display: none;
+}
+
+iframe {
+  border: none !important;
+}
+
+.gg-chevron-down {
+  --ggs: 2;
+}
+
+// Handle basic embed classes
+.embed-center, .embed-left, .embed-right, .embed-full {
+  max-width: 800px;
+  margin: @step-3 auto;
+  width: 100%;
+  padding: 0 @step--1;
+}
+
+.embed-left {
+  float: left;
+  max-width: 600px;
+}
+
+.embed-right {
+  float: right;
+  max-width: 600px;
+}
+
+.embed-full {
+  max-width: 100%;
+  padding: 0;
+
+  figcaption {
+    padding: 0 10px;
+  }
+}