sfc-utils 1.4.203 → 1.4.205

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

@@ -1,74 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,17 +0,0 @@
-[
-	{	
-		"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

@@ -1,41 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import LayoutScript from "../../components/layout/layoutscript.mjs"
-
-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"
-        />
-        <LayoutScript/>
-        {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

@@ -1,166 +0,0 @@
-import React from 'react'
-import { graphql } from 'gatsby'
-import PropTypes from 'prop-types'
-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 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'
-import OgPubDate from '../../../components/ogpubdate.mjs'
-
-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')
-}
-
-let topperSettings;
-try {
-  topperSettings = require('../data/topper2_settings.sheet.json')
-} catch {
-  topperSettings = null;
-}
-
-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 },
-    allWcmPhotos
-  } = data
-
-  return (
-    <Layout meta={siteMetadata}>
-      <NavTop meta={siteMetadata} />
-      <Topper2 settings={topperSettings[0]} wcmData={allWcmPhotos}/>
-      <Byline 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} />
-      <OgPubDate />
-      {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
-      }
-    }
-    allWcmPhotos {
-      nodes {
-        photo {
-          ratio
-          wcmid
-          full_path
-        }
-      }
-    }
-  }
-`
-IndexPage.propTypes = {
-  data: PropTypes.object.isRequired,
-}
-
-export default IndexPage

package/example/src/styles/credittooltip.less

@@ -1,55 +0,0 @@
-@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;
-  }
-}