@mjhls/mjh-framework 1.0.231 → 1.0.233

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.231
+# mjh-framework v. 1.0.233
 
 
 

package/dist/cjs/IssueContentDeck.js

@@ -42,7 +42,7 @@ var IssueContentDeck = function IssueContentDeck(props) {
   return React__default.createElement(
     Row,
     null,
-    data && data.map(function (row, index) {
+    data && data.length ? data.map(function (row, index) {
       return row.url && row.url.current && React__default.createElement(
         Col,
         { md: 12, lg: 6, style: { display: 'flex', flex: '1 0 auto' }, key: index },
@@ -74,7 +74,19 @@ var IssueContentDeck = function IssueContentDeck(props) {
           )
         )
       );
-    })
+    }) : React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'h5',
+        null,
+        React__default.createElement(
+          'em',
+          { className: 'pl-3' },
+          'New content coming soon, please check back later.'
+        )
+      )
+    )
   );
 };
 

package/dist/cjs/IssueDeck.js

@@ -44,7 +44,7 @@ var IssueDeck = function IssueDeck(props) {
   return React__default.createElement(
     Row,
     null,
-    data && data.map(function (row, index) {
+    data && data.length ? data.map(function (row, index) {
       return publication && row.identifier && row.identifier.current && React__default.createElement(
         Col,
         { md: 12, lg: 12, key: index },
@@ -137,7 +137,19 @@ var IssueDeck = function IssueDeck(props) {
           )
         )
       );
-    })
+    }) : React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'h5',
+        null,
+        React__default.createElement(
+          'em',
+          { className: 'pl-3' },
+          'New content coming soon, please check back later.'
+        )
+      )
+    )
   );
 };
 

package/dist/cjs/{Normal-5cf206ec.js → Normal-821546cd.js}

@@ -2023,8 +2023,12 @@ var HamMagazine = function HamMagazine(props) {
   }, []);
 
   React.useEffect(function () {
-    console.log('useEffect onClick', isOpen);
-  }, [isOpen]);
+    var handleResize = function handleResize() {
+      window.location.reload();
+      console.log('Screen size changed. Refreshing page.');
+    };
+    window.addEventListener('resize', handleResize);
+  }, []);
 
   React.useEffect(function () {
     var navOffsetTop = navRef.current.getBoundingClientRect().top;

package/dist/cjs/PublicationDeck.js

@@ -42,7 +42,7 @@ var PublicationDeck = function PublicationDeck(props) {
   return React__default.createElement(
     Row,
     null,
-    data && data.map(function (row, index) {
+    data && data.length ? data.map(function (row, index) {
       return row.identifier && row.identifier.current && React__default.createElement(
         Col,
         { xs: 6, sm: 6, md: 6, lg: 4, style: { display: 'flex', flex: '1 0 auto' }, key: index },
@@ -74,7 +74,19 @@ var PublicationDeck = function PublicationDeck(props) {
           )
         )
       );
-    })
+    }) : React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'h5',
+        null,
+        React__default.createElement(
+          'em',
+          { className: 'pl-3' },
+          'New content coming soon, please check back later.'
+        )
+      )
+    )
   );
 };
 

package/dist/cjs/TemplateNormal.js

@@ -16,7 +16,7 @@ require('./get-126b1712.js');
 require('react-bootstrap');
 require('./index.esm-340d3792.js');
 require('react-bootstrap/Button');
-var TemplateNormal = require('./Normal-5cf206ec.js');
+var TemplateNormal = require('./Normal-821546cd.js');
 require('react-bootstrap/ListGroup');
 require('next/head');
 require('react-bootstrap/Nav');

package/dist/cjs/index.js

@@ -44,7 +44,7 @@ var PublicationDeck = require('./PublicationDeck.js');
 var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
-var TemplateNormal = require('./Normal-5cf206ec.js');
+var TemplateNormal = require('./Normal-821546cd.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -798,7 +798,7 @@ var FigureComponent = function FigureComponent(_ref) {
 };
 
 var urlFor$1 = function urlFor(source, builder) {
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var onChangeSlide = function onChangeSlide(selectedIndex, router) {
@@ -3460,7 +3460,7 @@ var Media = function Media(_ref) {
   var builder = index$1.imageUrlBuilder(client);
 
   var urlFor = function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   };
 
   var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
@@ -10784,7 +10784,7 @@ var Leads = function Leads(_ref) {
 
 var urlFor$2 = function urlFor(source, client) {
   var builder = index$1.imageUrlBuilder(client);
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var Slideshow$1 = function Slideshow(_ref) {
@@ -11386,7 +11386,7 @@ var SetCookie = function SetCookie(key, value) {
 
 var urlFor$3 = function urlFor(source, client) {
   var builder = index$1.imageUrlBuilder(client);
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
@@ -11684,7 +11684,7 @@ var fbsHero = function fbsHero(props) {
 
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -11793,7 +11793,7 @@ var HorizontalHero = function HorizontalHero(props) {
 
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   var topArticle = props.dataRecord[0];
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
@@ -11838,7 +11838,7 @@ var HorizontalHero = function HorizontalHero(props) {
         { className: 'horizontal-articles-wrap' },
         React__default.createElement(
           'a',
-          { href: topArticle.url.current, className: 'horizontal-article' },
+          { href: '/view/' + topArticle.url.current, className: 'horizontal-article' },
           React__default.createElement(
             'p',
             null,
@@ -11878,7 +11878,7 @@ var HorizontalHero = function HorizontalHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n            background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n            .horizontal-hero-img {\n                display: none;\n            }\n        }\n      '
+      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n          background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n          .horizontal-hero-img {\n            display: none;\n          }\n        }\n      '
     )
   );
 };
@@ -11888,7 +11888,7 @@ var OncliveHero = function OncliveHero(props) {
 
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   return React__default.createElement(
     'div',
@@ -11941,7 +11941,7 @@ var OncliveHero = function OncliveHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n      \n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n \n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: .9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
+      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n\n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n\n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: 0.9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
     )
   );
 };
@@ -11954,7 +11954,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
 
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -12150,7 +12150,7 @@ var VerticalHero = function VerticalHero(props) {
 
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   var _props$heroTitle = props.heroTitle,
       heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;
@@ -12215,7 +12215,7 @@ var YahooHero = function YahooHero(props) {
 
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -12306,7 +12306,7 @@ var YahooHero = function YahooHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n          \n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };
@@ -12432,7 +12432,7 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
   var builder = index$1.imageUrlBuilder(client);
 
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   //title, thumbnail, summary, published, documentGroup.identifier.current, documentGroup.identifier.name
@@ -12597,6 +12597,7 @@ var Article = function Article(props) {
     current: ''
   } : _props$article$url;
   var url = _props$article$url.current,
+      issue = _props$article.issue,
       changeUrl = props.changeUrl,
       isCutomPage = props.isCutomPage,
       shareOptions = props.shareOptions,
@@ -12690,7 +12691,14 @@ var Article = function Article(props) {
               serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true),
               blocks: articleBody,
               imageOptions: { w: 320, h: 240, fit: 'max' }
-            }, client.config()))
+            }, client.config())),
+            issue && issue.url && React__default.createElement(
+              'a',
+              { href: issue.url, target: '_blank', title: 'Download issue' },
+              React__default.createElement('img', { style: { margin: '1rem', maxHeight: '40px', maxWidth: '40px' }, src: '/download.png', alt: 'download issue' }),
+              'Download Issue : ',
+              issue.name
+            )
           )
         ),
         renderIsiContent(props.article)

package/dist/esm/IssueContentDeck.js

@@ -37,7 +37,7 @@ var IssueContentDeck = function IssueContentDeck(props) {
   return React__default.createElement(
     Row,
     null,
-    data && data.map(function (row, index) {
+    data && data.length ? data.map(function (row, index) {
       return row.url && row.url.current && React__default.createElement(
         Col,
         { md: 12, lg: 6, style: { display: 'flex', flex: '1 0 auto' }, key: index },
@@ -69,7 +69,19 @@ var IssueContentDeck = function IssueContentDeck(props) {
           )
         )
       );
-    })
+    }) : React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'h5',
+        null,
+        React__default.createElement(
+          'em',
+          { className: 'pl-3' },
+          'New content coming soon, please check back later.'
+        )
+      )
+    )
   );
 };
 

package/dist/esm/IssueDeck.js

@@ -39,7 +39,7 @@ var IssueDeck = function IssueDeck(props) {
   return React__default.createElement(
     Row,
     null,
-    data && data.map(function (row, index) {
+    data && data.length ? data.map(function (row, index) {
       return publication && row.identifier && row.identifier.current && React__default.createElement(
         Col,
         { md: 12, lg: 12, key: index },
@@ -132,7 +132,19 @@ var IssueDeck = function IssueDeck(props) {
           )
         )
       );
-    })
+    }) : React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'h5',
+        null,
+        React__default.createElement(
+          'em',
+          { className: 'pl-3' },
+          'New content coming soon, please check back later.'
+        )
+      )
+    )
   );
 };
 

package/dist/esm/{Normal-9fb1e124.js → Normal-20ff5bf5.js}

@@ -2018,8 +2018,12 @@ var HamMagazine = function HamMagazine(props) {
   }, []);
 
   useEffect(function () {
-    console.log('useEffect onClick', isOpen);
-  }, [isOpen]);
+    var handleResize = function handleResize() {
+      window.location.reload();
+      console.log('Screen size changed. Refreshing page.');
+    };
+    window.addEventListener('resize', handleResize);
+  }, []);
 
   useEffect(function () {
     var navOffsetTop = navRef.current.getBoundingClientRect().top;

package/dist/esm/PublicationDeck.js

@@ -37,7 +37,7 @@ var PublicationDeck = function PublicationDeck(props) {
   return React__default.createElement(
     Row,
     null,
-    data && data.map(function (row, index) {
+    data && data.length ? data.map(function (row, index) {
       return row.identifier && row.identifier.current && React__default.createElement(
         Col,
         { xs: 6, sm: 6, md: 6, lg: 4, style: { display: 'flex', flex: '1 0 auto' }, key: index },
@@ -69,7 +69,19 @@ var PublicationDeck = function PublicationDeck(props) {
           )
         )
       );
-    })
+    }) : React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'h5',
+        null,
+        React__default.createElement(
+          'em',
+          { className: 'pl-3' },
+          'New content coming soon, please check back later.'
+        )
+      )
+    )
   );
 };
 

package/dist/esm/TemplateNormal.js

@@ -14,7 +14,7 @@ import './get-b074314b.js';
 import 'react-bootstrap';
 import './index.esm-536609db.js';
 import 'react-bootstrap/Button';
-export { T as default } from './Normal-9fb1e124.js';
+export { T as default } from './Normal-20ff5bf5.js';
 import 'react-bootstrap/ListGroup';
 import 'next/head';
 import 'react-bootstrap/Nav';

package/dist/esm/index.js

@@ -40,8 +40,8 @@ export { default as PublicationDeck } from './PublicationDeck.js';
 export { default as IssueDeck } from './IssueDeck.js';
 import 'react-bootstrap/Badge';
 export { default as IssueContentDeck } from './IssueContentDeck.js';
-import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-9fb1e124.js';
-export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-9fb1e124.js';
+import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-20ff5bf5.js';
+export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-20ff5bf5.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -796,7 +796,7 @@ var FigureComponent = function FigureComponent(_ref) {
 };
 
 var urlFor$1 = function urlFor(source, builder) {
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var onChangeSlide = function onChangeSlide(selectedIndex, router) {
@@ -3458,7 +3458,7 @@ var Media = function Media(_ref) {
   var builder = imageUrlBuilder(client);
 
   var urlFor = function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   };
 
   var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
@@ -10782,7 +10782,7 @@ var Leads = function Leads(_ref) {
 
 var urlFor$2 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var Slideshow$1 = function Slideshow(_ref) {
@@ -11384,7 +11384,7 @@ var SetCookie = function SetCookie(key, value) {
 
 var urlFor$3 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
@@ -11682,7 +11682,7 @@ var fbsHero = function fbsHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -11791,7 +11791,7 @@ var HorizontalHero = function HorizontalHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   var topArticle = props.dataRecord[0];
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
@@ -11836,7 +11836,7 @@ var HorizontalHero = function HorizontalHero(props) {
         { className: 'horizontal-articles-wrap' },
         React__default.createElement(
           'a',
-          { href: topArticle.url.current, className: 'horizontal-article' },
+          { href: '/view/' + topArticle.url.current, className: 'horizontal-article' },
           React__default.createElement(
             'p',
             null,
@@ -11876,7 +11876,7 @@ var HorizontalHero = function HorizontalHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n            background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n            .horizontal-hero-img {\n                display: none;\n            }\n        }\n      '
+      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n          background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n          .horizontal-hero-img {\n            display: none;\n          }\n        }\n      '
     )
   );
 };
@@ -11886,7 +11886,7 @@ var OncliveHero = function OncliveHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   return React__default.createElement(
     'div',
@@ -11939,7 +11939,7 @@ var OncliveHero = function OncliveHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n      \n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n \n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: .9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
+      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n\n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n\n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: 0.9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
     )
   );
 };
@@ -11952,7 +11952,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -12148,7 +12148,7 @@ var VerticalHero = function VerticalHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   var _props$heroTitle = props.heroTitle,
       heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;
@@ -12213,7 +12213,7 @@ var YahooHero = function YahooHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -12304,7 +12304,7 @@ var YahooHero = function YahooHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n          \n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };
@@ -12430,7 +12430,7 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
   var builder = imageUrlBuilder(client);
 
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   //title, thumbnail, summary, published, documentGroup.identifier.current, documentGroup.identifier.name
@@ -12595,6 +12595,7 @@ var Article = function Article(props) {
     current: ''
   } : _props$article$url;
   var url = _props$article$url.current,
+      issue = _props$article.issue,
       changeUrl = props.changeUrl,
       isCutomPage = props.isCutomPage,
       shareOptions = props.shareOptions,
@@ -12688,7 +12689,14 @@ var Article = function Article(props) {
               serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true),
               blocks: articleBody,
               imageOptions: { w: 320, h: 240, fit: 'max' }
-            }, client.config()))
+            }, client.config())),
+            issue && issue.url && React__default.createElement(
+              'a',
+              { href: issue.url, target: '_blank', title: 'Download issue' },
+              React__default.createElement('img', { style: { margin: '1rem', maxHeight: '40px', maxWidth: '40px' }, src: '/download.png', alt: 'download issue' }),
+              'Download Issue : ',
+              issue.name
+            )
           )
         ),
         renderIsiContent(props.article)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.231",
+  "version": "1.0.233",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",