sfc-utils 1.4.26 → 1.4.28

package/components/layout/layouthelmet.mjs

@@ -3,7 +3,7 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { appCheck, getBrands2 } from "../../index"
 
-const LayoutHelmet = ({ meta, url_add, noindex = false }) => {
+const LayoutHelmet = ({ meta, url_add, noindex=false, schemaOverride={} }) => {
   let {
     EMBEDDED,
     MAIN_DOMAIN,
@@ -62,6 +62,35 @@ const LayoutHelmet = ({ meta, url_add, noindex = false }) => {
     favHref = "https://files.sfchronicle.com/devhub-logos/DHlogos-sm.png"
   }
 
+  // Set the default schema that will be used as a fallback
+  let schemaContent = `{
+    "@context": "http://schema.org",
+    "@type": "${schemaOverride.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}"
+  }`
+
   return (
     <Helmet>
       <title>{TITLE}</title>
@@ -97,33 +126,8 @@ const LayoutHelmet = ({ meta, url_add, noindex = false }) => {
       <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>
+      <script data-schema={schemaOverride.type || "NewsArticle"} type="application/ld+json">{schemaOverride.content || schemaContent}</script>
+      
     </Helmet>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.26",
+  "version": "1.4.28",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/styles/brandStylesCommon.less

@@ -83,8 +83,6 @@ h1 {
   }
 }
 
-// TO DO: Add support for side-by-side visuals
-
 .inline-figure.wide, .inline-figure.full, .inline-figure.large {
   &.graphic-wrapper {
     @media @max-desktop {
@@ -99,6 +97,97 @@ h1 {
   }
 }
 
+//side-by-side photos
+.side-by-side-wrapper {
+  @media (max-width: 1200px) {
+      padding-left: @s16;
+      padding-right: @s16;
+  }
+}
+
+.side-by-side {
+  max-width: 592px;
+  width: 100%;
+  display: inline-block;
+  vertical-align: top;
+  @media (max-width: 1200px){
+      width: calc(50% - 4px);
+      // max-width: 640px;
+  }
+  @media @tablet {
+      width: 100%;
+      max-width: 640px;
+  }
+}
+.side-by-side-left {
+  margin-right: @s4;
+  @media @tablet {
+      margin-bottom: @s8;
+  }
+}
+.side-by-side-right {
+  margin-left: @s4;
+}
+
+.side-by-side-left, .side-by-side-right{
+  @media @tablet {
+      margin-right: auto;
+      margin-left: auto;
+      display: block;
+  }
+}
+.side-by-side-caption-wrapper {
+  margin-bottom: @s24;
+  margin-top: @s4;
+  line-height: 1.3;
+  .caption {
+      margin-bottom: 0;
+      margin-top: 0;
+      display: inline;
+      padding: 0 !important;
+  }
+  @media @max-text-width {
+      padding: 0;
+  }
+}
+.side-by-side-caption-left {
+  &::before{
+      content: "LEFT: ";
+      font-family: @sans;
+      font-size: @s14;
+      font-weight: 700;
+      color: @grey-75;
+  }
+  @media @tablet{
+      &::before{
+          content: "TOP: ";
+          font-family: @sans;
+          font-size: @s14;
+          font-weight: 700;
+          color: @grey-75;
+      }
+  }
+}
+.side-by-side-caption-right {
+  &::before{
+      content: " RIGHT: ";
+      font-family: @sans;
+      font-size: @s14;
+      font-weight: 700;
+      color: @grey-50;
+  }
+  @media @tablet{
+      &::before{
+          content: " BOTTOM: ";
+          font-family: @sans;
+          font-size: @s14;
+          font-weight: 700;
+          color: @grey-50;
+      }
+  }
+}
+
+//custom graphic
 .graphic-wrapper {
   &.inline-figure.wide, &.inline-figure.full, &.inline-figure.large {
     .caption {
@@ -128,6 +217,7 @@ h1 {
     }
   }
 }
+
 a {
   color: @black;
   text-decoration: underline;
@@ -156,4 +246,11 @@ a {
     height: 0.75rem;
     margin-left: @s4;
   }
+}
+
+//formatting for bulleted lists
+ul {
+  padding-left: 2.2rem;
+  &:extend(.text-width);
+  margin-bottom: @s24 !important;
 }