@mjhls/mjh-framework 1.0.113 → 1.0.115

package/dist/index.js

@@ -8508,7 +8508,10 @@ var DeckContent = function (_React$Component) {
       return builder.image(source);
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
-        return _this.urlFor(row.thumbnail).url();
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }
@@ -8581,6 +8584,50 @@ var DeckContent = function (_React$Component) {
           }
         }
       }
+    }, _this.renderAuthor = function (authorDetail, index$$1, length) {
+      if (authorDetail) {
+        var _id = authorDetail._id,
+            displayName = authorDetail.displayName,
+            url = authorDetail.url;
+
+        if (displayName && url && url.current) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
+            React__default.createElement(
+              Link,
+              { href: '/authors/[url]', as: '/authors/' + url.current },
+              React__default.createElement(
+                'a',
+                { className: 'text-muted' },
+                displayName,
+                length !== index$$1 + 1 && React__default.createElement('br', null)
+              )
+            )
+          );
+        } else if (displayName) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
+            React__default.createElement(
+              'span',
+              { className: 'text-muted' },
+              displayName,
+              length !== index$$1 + 1 && React__default.createElement('br', null)
+            )
+          );
+        }
+      } else return null;
     }, _this.cardLoader = function (page, columns, variant) {
       var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
 
@@ -8635,18 +8682,21 @@ var DeckContent = function (_React$Component) {
                         Card.Title,
                         null,
                         row.title
-                      ),
-                      _this.props.showPublished && row.published && React__default.createElement(
-                        Card.Subtitle,
-                        null,
-                        moment(row.published).format('MMMM DD, YYYY')
-                      ),
-                      React__default.createElement(
-                        Card.Text,
-                        null,
-                        row.summary
                       )
                     )
+                  ),
+                  _this.props.showPublished && row.published && React__default.createElement(
+                    Card.Subtitle,
+                    null,
+                    moment(row.published).format('MMMM DD, YYYY')
+                  ),
+                  _this.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && row.authorMapping.map(function (authorDetail, index$$1) {
+                    return _this.renderAuthor(authorDetail, index$$1, row.authorMapping.length);
+                  }),
+                  React__default.createElement(
+                    Card.Text,
+                    null,
+                    row.summary
                   )
                 )
               )
@@ -9839,7 +9889,10 @@ var GridContent = function (_React$Component) {
       return builder.image(source);
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
-        return _this.urlFor(row.thumbnail).url();
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }
@@ -9902,47 +9955,49 @@ var GridContent = function (_React$Component) {
         }
       }
     }, _this.renderAuthor = function (authorDetail, index$$1, length) {
-      var _id = authorDetail._id,
-          displayName = authorDetail.displayName,
-          url = authorDetail.url;
+      if (authorDetail) {
+        var _id = authorDetail._id,
+            displayName = authorDetail.displayName,
+            url = authorDetail.url;
 
-      if (displayName && url && url.current) {
-        return React__default.createElement(
-          'div',
-          { key: _id },
-          index$$1 === 0 && React__default.createElement(
-            'span',
-            { className: 'pr-1' },
-            'By'
-          ),
-          React__default.createElement(
-            Link,
-            { href: '/authors/[url]', as: '/authors/' + url.current },
+        if (displayName && url && url.current) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
             React__default.createElement(
-              'a',
+              Link,
+              { href: '/authors/[url]', as: '/authors/' + url.current },
+              React__default.createElement(
+                'a',
+                { className: 'text-muted' },
+                displayName,
+                length !== index$$1 + 1 && React__default.createElement('br', null)
+              )
+            )
+          );
+        } else if (displayName) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
+            React__default.createElement(
+              'span',
               { className: 'text-muted' },
               displayName,
               length !== index$$1 + 1 && React__default.createElement('br', null)
             )
-          )
-        );
-      } else if (displayName) {
-        return React__default.createElement(
-          'div',
-          { key: _id },
-          index$$1 === 0 && React__default.createElement(
-            'span',
-            { className: 'pr-1' },
-            'By'
-          ),
-          React__default.createElement(
-            'span',
-            { className: 'text-muted' },
-            displayName,
-            length !== index$$1 + 1 && React__default.createElement('br', null)
-          )
-        );
-      }
+          );
+        }
+      } else return null;
     }, _this.renderManualPagination = function () {
       var currentPage = _this.state.currentPage;
 
@@ -9976,7 +10031,6 @@ var GridContent = function (_React$Component) {
           null,
           this.state.data && this.state.data.map(function (row, index$$1) {
             // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
-            var thumbnailURL = row.thumbnail ? _this2.urlFor(row.thumbnail).url() : _this2.props.defaultImage;
             return React__default.createElement(
               Col,
               { key: index$$1, md: 12, lg: lgVar, style: { display: 'flex', flex: '1 0 auto' } },
@@ -9995,7 +10049,7 @@ var GridContent = function (_React$Component) {
                       React__default.createElement(
                         'a',
                         null,
-                        React__default.createElement(Card.Img, { variant: 'top', src: thumbnailURL })
+                        React__default.createElement(Card.Img, { variant: 'top', src: _this2.renderCardImage(row, page), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
                       )
                     )
                   ),
@@ -10247,6 +10301,15 @@ var DeckQueue = function (_React$Component) {
 
       var builder = imageUrlBuilder(client);
       return builder.image(source);
+    }, _this.renderCardImage = function (row) {
+      if (row.thumbnail && row.thumbnail.asset) {
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
+      } else {
+        return _this.defaultImage;
+      }
     }, _this.changePageNumber = function (pageNumber) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
@@ -10339,7 +10402,7 @@ var DeckQueue = function (_React$Component) {
         this.state.data && this.state.data.map(function (row, index$$1) {
           var pageNumber = row.pageNumber || _this2.state.page;
           // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
-          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? _this2.urlFor(row.thumbnail).url() : _this2.props.defaultImage;
+
           return React__default.createElement(
             VisibilitySensor,
             {
@@ -10362,7 +10425,7 @@ var DeckQueue = function (_React$Component) {
                     React__default.createElement(
                       Link,
                       { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
-                      React__default.createElement(Card.Img, { variant: 'top', src: thumbnailURL })
+                      React__default.createElement(Card.Img, { variant: 'top', src: _this2.renderCardImage(row), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
                     )
                   ),
                   React__default.createElement(
@@ -10498,7 +10561,13 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
       return React__default.createElement(
         Media,
         { className: 'mb-3 thumbnail-card' },
-        React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage, alt: 'Generic placeholder' }),
+        React__default.createElement('img', {
+          width: size,
+          height: size,
+          className: 'mr-3',
+          src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage,
+          alt: 'Generic placeholder'
+        }),
         React__default.createElement(
           Media.Body,
           null,
@@ -10525,7 +10594,9 @@ var TaxonomyCard = function TaxonomyCard(props) {
       icon = _props$icon === undefined ? false : _props$icon,
       data = props.dataRecord,
       defaultImage = props.defaultImage,
-      client = props.client;
+      client = props.client,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth;
 
 
   var builder = imageUrlBuilder(client);
@@ -10534,6 +10605,13 @@ var TaxonomyCard = function TaxonomyCard(props) {
     return builder.image(source);
   };
 
+  var renderCardImage = function renderCardImage(row) {
+    var url = urlFor(row.thumbnail);
+    if (imageHeight) url = url.height(imageHeight);
+    if (imageWidth) url = url.width(imageWidth);
+    return url.url();
+  };
+
   var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
 
   var itemCounter = 0;
@@ -10556,7 +10634,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
           } else {
             lgVar = 6;
           }
-          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? urlFor(row.thumbnail.asset).url() : defaultImage;
+          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? renderCardImage(row) : defaultImage;
           return React__default.createElement(
             Col,
             { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
@@ -10629,15 +10707,6 @@ var TaxonomyCard = function TaxonomyCard(props) {
   );
 };
 
-/*
-GROQ query -
-*[_type == "article" && references(*[_type == 'documentGroup' && name == 'test']._id)][0...10]{
-  title,
-  published,
-  "thumbnail":  thumbnail.asset->url,
-	"url": url.current
-}
-*/
 var GroupDeck = function GroupDeck(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
   var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
@@ -10982,10 +11051,17 @@ var YoutubeGroup = function YoutubeGroup(props) {
   );
 };
 
-var urlFor = function urlFor(builder, source) {
+var urlFor = function urlFor(source, builder) {
   return builder.image(source);
 };
 
+var renderCardImage = function renderCardImage(row, builder, imageHeight, imageWidth) {
+  var url = urlFor(row.thumbnail, builder);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageWidth) url = url.width(imageWidth);
+  return url.url();
+};
+
 var loadMore = function loadMore(values, setValues, per) {
   setValues({
     page: values.page + 1,
@@ -11070,50 +11146,52 @@ var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pagevi
 };
 
 var renderAuthor = function renderAuthor(authorDetail, index$$1, length) {
-  var _id = authorDetail._id,
-      displayName = authorDetail.displayName,
-      url = authorDetail.url;
+  if (authorDetail) {
+    var _id = authorDetail._id,
+        displayName = authorDetail.displayName,
+        url = authorDetail.url;
 
-  if (displayName && url && url.current) {
-    return React__default.createElement(
-      'div',
-      { key: _id },
-      index$$1 === 0 && React__default.createElement(
-        'span',
-        { className: 'pr-1' },
-        'By'
-      ),
-      React__default.createElement(
-        Link,
-        { href: '/authors/[url]', as: '/authors/' + url.current },
+    if (displayName && url && url.current) {
+      return React__default.createElement(
+        'div',
+        { key: _id },
+        index$$1 === 0 && React__default.createElement(
+          'span',
+          { className: 'pr-1' },
+          'By'
+        ),
         React__default.createElement(
-          'a',
+          Link,
+          { href: '/authors/[url]', as: '/authors/' + url.current },
+          React__default.createElement(
+            'a',
+            { className: 'text-muted' },
+            displayName,
+            length !== index$$1 + 1 && React__default.createElement('br', null)
+          )
+        )
+      );
+    } else if (displayName) {
+      return React__default.createElement(
+        'div',
+        { key: _id },
+        index$$1 === 0 && React__default.createElement(
+          'span',
+          { className: 'pr-1' },
+          'By'
+        ),
+        React__default.createElement(
+          'span',
           { className: 'text-muted' },
           displayName,
           length !== index$$1 + 1 && React__default.createElement('br', null)
         )
-      )
-    );
-  } else if (displayName) {
-    return React__default.createElement(
-      'div',
-      { key: _id },
-      index$$1 === 0 && React__default.createElement(
-        'span',
-        { className: 'pr-1' },
-        'By'
-      ),
-      React__default.createElement(
-        'span',
-        { className: 'text-muted' },
-        displayName,
-        length !== index$$1 + 1 && React__default.createElement('br', null)
-      )
-    );
-  }
+      );
+    }
+  } else return null;
 };
 
-var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory) {
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth) {
   return React__default.createElement(
     'div',
     null,
@@ -11139,11 +11217,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               React__default.createElement(
                 'a',
                 null,
-                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', {
-                  className: 'mr-3',
-                  src: urlFor(builder, article.thumbnail).width(240).height(135).url(),
-                  alt: article.title
-                }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
+                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
               )
             ),
             React__default.createElement(
@@ -11235,7 +11309,9 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       pageview = props.pageview,
       defaultImage = props.defaultImage,
       showAuthor = props.showAuthor,
-      showCategory = props.showCategory;
+      showCategory = props.showCategory,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth;
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
@@ -11293,7 +11369,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React__default.createElement(
           reactBootstrap.Container,
           null,
-          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth)
         )
       ),
       React__default.createElement(
@@ -11339,6 +11415,98 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
   );
 };
 
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React.createContext && React.createContext(DefaultContext);
+
+var __assign$1 = undefined && undefined.__assign || function () {
+  __assign$1 = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign$1.apply(this, arguments);
+};
+
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
+  return t;
+};
+
+function Tree2Element(tree) {
+  return tree && tree.map(function (node, i) {
+    return React.createElement(node.tag, __assign$1({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+
+function GenIcon(data) {
+  return function (props) {
+    return React.createElement(IconBase, __assign$1({
+      attr: __assign$1({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function (conf) {
+    var computedSize = props.size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + ' ' : '') + props.className;
+
+    var attr = props.attr,
+        title = props.title,
+        svgProps = __rest(props, ["attr", "title"]);
+
+    return React.createElement("svg", __assign$1({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: __assign$1({
+        color: props.color || conf.color
+      }, conf.style, props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React.createElement("title", null, title), props.children);
+  };
+
+  return IconContext !== undefined ? React.createElement(IconContext.Consumer, null, function (conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+var IoIosArrowForward = function (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"}}]})(props);
+};
+IoIosArrowForward.displayName = "IoIosArrowForward";
+var IoIosHome = function (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M258.5 104.1c-1.5-1.2-3.5-1.2-5 0l-156 124.8c-.9.8-1.5 1.9-1.5 3.1v230c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V322c0-1.1.9-2 2-2h92c1.1 0 2 .9 2 2v140c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V232c0-1.2-.6-2.4-1.5-3.1l-156-124.8z"}},{"tag":"path","attr":{"d":"M458.7 204.2l-189-151.4C265.9 49.7 261 48 256 48s-9.9 1.7-13.7 4.8L160 119.7V77.5c0-1.1-.9-2-2-2H98c-1.1 0-2 .9-2 2v92.2l-42.7 35.1c-3.1 2.5-5.1 6.2-5.3 10.2-.2 4 1.3 7.9 4.1 10.7 2.6 2.6 6.1 4.1 9.9 4.1 3.2 0 6.3-1.1 8.8-3.1l183.9-148c.5-.4.9-.4 1.3-.4s.8.1 1.3.4l183.9 147.4c2.5 2 5.6 3.1 8.8 3.1 3.7 0 7.2-1.4 9.9-4.1 2.9-2.8 4.4-6.7 4.2-10.7-.3-4-2.2-7.7-5.4-10.2z"}}]})(props);
+};
+IoIosHome.displayName = "IoIosHome";
+var IoMdArrowDropdown = function (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M128 192l128 128 128-128z"}}]})(props);
+};
+IoMdArrowDropdown.displayName = "IoMdArrowDropdown";
+
 var VideoSeriesListing = function (_React$Component) {
   inherits(VideoSeriesListing, _React$Component);
 
@@ -11515,8 +11683,8 @@ var VideoSeriesListing = function (_React$Component) {
                   docSeries.title,
                   React__default.createElement(
                     'span',
-                    { style: { fontSize: '.9rem', color: 'grey', marginLeft: '1rem' } },
-                    'View Topic'
+                    { style: { fontSize: '.9rem', color: 'grey', marginLeft: '1rem', transform: 'translateY(-2px)' } },
+                    React__default.createElement(IoIosArrowForward, null)
                   )
                 )
               )
@@ -11763,11 +11931,74 @@ var LeftNav = function LeftNav(props) {
   );
 };
 
+var PageFilter = function PageFilter(props) {
+  var getParams = props.getParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter;
+
+  var _useState = React.useState(''),
+      _useState2 = slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var usePrevious = function usePrevious(value) {
+    var ref = React.useRef();
+    React.useEffect(function () {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+
+  var sortAttr = usePrevious({ filter: filter });
+
+  React.useEffect(function () {
+    if (sortAttr && sortAttr.filter !== filter) {
+      getParams(filter);
+    }
+  }, [filter, sortAttr, getParams]);
+
+  if (filters.length) {
+    return React__default.createElement(
+      reactBootstrap.Dropdown,
+      null,
+      React__default.createElement(
+        reactBootstrap.Dropdown.Toggle,
+        { id: 'filter-dropdown' },
+        filter || defaultFilter
+      ),
+      React__default.createElement(
+        reactBootstrap.Dropdown.Menu,
+        { className: 'select-dropdown' },
+        filters.map(function (filter, index) {
+          return React__default.createElement(
+            reactBootstrap.Dropdown.Item,
+            { key: index, onClick: function onClick() {
+                return setFilter(filter);
+              } },
+            filter
+          );
+        })
+      ),
+      React__default.createElement(
+        'style',
+        { jsx: true },
+        '\n          .select-dropdown > a {\n            color: #8e8c84;\n          }\n        '
+      )
+    );
+  }
+  return null;
+};
+
 var Column3 = function Column3(props) {
   var leftItems = props.leftItems,
       rightItems = props.rightItems,
       title = props.title,
-      website = props.website;
+      website = props.website,
+      showFilter = props.showFilter,
+      getParams = props.getParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter;
+
 
   return React__default.createElement(
     'section',
@@ -11783,20 +12014,38 @@ var Column3 = function Column3(props) {
       React__default.createElement(
         Col,
         { md: true, className: 'middleCol', style: { maxWidth: '640px', marginTop: !title && '10px' } },
-        title && React__default.createElement(
+        showFilter ? React__default.createElement(
+          'div',
+          { className: 'title-wrap' },
+          React__default.createElement(
+            'h1',
+            { className: 'title' },
+            title
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'filter-box' },
+            React__default.createElement(PageFilter, { getParams: getParams, filters: filters, defaultFilter: defaultFilter })
+          )
+        ) : title && React__default.createElement(
           'h1',
-          null,
+          { className: 'title' },
           title
         ),
         props.children
       ),
+      React__default.createElement(
+        'style',
+        { jsx: true },
+        '\n            .filter-box {\n              padding-top: 6px;\n              padding-right: 18px;\n            }\n            @media only screen and (min-width: 768px) {\n              .title-wrap {\n                display: flex;\n                justify-content: space-between;\n              }\n            }\n            @media only screen and (max-width: 767px) {\n              .filter-box {\n                float: right;\n                display: flex;\n                justify-content: flex-end;\n              }\n              .title-wrap {\n                display: flex;\n                flex-direction: column;\n                margin-bottom: 10px;\n              }\n            }\n          '
+      ),
       React__default.createElement(
         Col,
         { xs: 12, className: 'rightCol' },
         website && website.conferenceBannerContent && React__default.createElement(ConferenceBanner, { website: website }),
         React__default.createElement(
           'div',
-          { style: { position: "sticky", top: "60px" } },
+          { style: { position: 'sticky', top: '60px' } },
           rightItems && rightItems.map(function (row, index) {
             return React__default.createElement(
               'div',
@@ -11834,94 +12083,6 @@ var Header = function Header(props) {
   );
 };
 
-var DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext = React.createContext && React.createContext(DefaultContext);
-
-var __assign$1 = undefined && undefined.__assign || function () {
-  __assign$1 = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-
-    return t;
-  };
-
-  return __assign$1.apply(this, arguments);
-};
-
-var __rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
-  return t;
-};
-
-function Tree2Element(tree) {
-  return tree && tree.map(function (node, i) {
-    return React.createElement(node.tag, __assign$1({
-      key: i
-    }, node.attr), Tree2Element(node.child));
-  });
-}
-
-function GenIcon(data) {
-  return function (props) {
-    return React.createElement(IconBase, __assign$1({
-      attr: __assign$1({}, data.attr)
-    }, props), Tree2Element(data.child));
-  };
-}
-function IconBase(props) {
-  var elem = function (conf) {
-    var computedSize = props.size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + ' ' : '') + props.className;
-
-    var attr = props.attr,
-        title = props.title,
-        svgProps = __rest(props, ["attr", "title"]);
-
-    return React.createElement("svg", __assign$1({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: __assign$1({
-        color: props.color || conf.color
-      }, conf.style, props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && React.createElement("title", null, title), props.children);
-  };
-
-  return IconContext !== undefined ? React.createElement(IconContext.Consumer, null, function (conf) {
-    return elem(conf);
-  }) : elem(DefaultContext);
-}
-
-// THIS FILE IS AUTO GENERATED
-var IoIosHome = function (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M258.5 104.1c-1.5-1.2-3.5-1.2-5 0l-156 124.8c-.9.8-1.5 1.9-1.5 3.1v230c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V322c0-1.1.9-2 2-2h92c1.1 0 2 .9 2 2v140c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V232c0-1.2-.6-2.4-1.5-3.1l-156-124.8z"}},{"tag":"path","attr":{"d":"M458.7 204.2l-189-151.4C265.9 49.7 261 48 256 48s-9.9 1.7-13.7 4.8L160 119.7V77.5c0-1.1-.9-2-2-2H98c-1.1 0-2 .9-2 2v92.2l-42.7 35.1c-3.1 2.5-5.1 6.2-5.3 10.2-.2 4 1.3 7.9 4.1 10.7 2.6 2.6 6.1 4.1 9.9 4.1 3.2 0 6.3-1.1 8.8-3.1l183.9-148c.5-.4.9-.4 1.3-.4s.8.1 1.3.4l183.9 147.4c2.5 2 5.6 3.1 8.8 3.1 3.7 0 7.2-1.4 9.9-4.1 2.9-2.8 4.4-6.7 4.2-10.7-.3-4-2.2-7.7-5.4-10.2z"}}]})(props);
-};
-IoIosHome.displayName = "IoIosHome";
-var IoMdArrowDropdown = function (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M128 192l128 128 128-128z"}}]})(props);
-};
-IoMdArrowDropdown.displayName = "IoMdArrowDropdown";
-
 var AccordionPanel = function AccordionPanel(props) {
   var accordionClassName = props.accordionClassName,
       data = props.data;
@@ -12049,59 +12210,6 @@ var SocialShare = function SocialShare(props) {
   );
 };
 
-var PageFilter = function PageFilter(props) {
-  var getParams = props.getParams,
-      filters = props.filters,
-      defaultFilter = props.defaultFilter;
-
-  var _useState = React.useState(''),
-      _useState2 = slicedToArray(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
-  var usePrevious = function usePrevious(value) {
-    var ref = React.useRef();
-    React.useEffect(function () {
-      ref.current = value;
-    });
-    return ref.current;
-  };
-
-  var sortAttr = usePrevious({ filter: filter });
-
-  React.useEffect(function () {
-    if (sortAttr && sortAttr.filter !== filter) {
-      getParams(filter);
-    }
-  }, [filter, sortAttr, getParams]);
-
-  if (filters.length) {
-    return React__default.createElement(
-      reactBootstrap.Dropdown,
-      null,
-      React__default.createElement(
-        reactBootstrap.Dropdown.Toggle,
-        { id: 'filter-dropdown' },
-        filter || defaultFilter
-      ),
-      React__default.createElement(
-        reactBootstrap.Dropdown.Menu,
-        null,
-        filters.map(function (filter, index) {
-          return React__default.createElement(
-            reactBootstrap.Dropdown.Item,
-            { key: index, onClick: function onClick() {
-                return setFilter(filter);
-              } },
-            filter
-          );
-        })
-      )
-    );
-  }
-  return null;
-};
-
 var Search = function Search(props) {
   var _props$placeholder = props.placeholder,
       placeholder = _props$placeholder === undefined ? 'Search' : _props$placeholder,
@@ -13661,7 +13769,11 @@ var TemplateNormal = function TemplateNormal(props) {
       keywords = props.keywords,
       description = props.description,
       website = props.website,
-      horizontalAD = props.config.horizontalAD;
+      horizontalAD = props.config.horizontalAD,
+      showFilter = props.showFilter,
+      filterParams = props.filterParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter;
 
 
   var navigation = function navigation() {
@@ -13701,7 +13813,15 @@ var TemplateNormal = function TemplateNormal(props) {
       case '3':
         return React__default.createElement(
           Column3,
-          { title: title, leftItems: config.leftItems, rightItems: config.rightItems, website: website },
+          {
+            title: title,
+            leftItems: config.leftItems,
+            rightItems: config.rightItems,
+            website: website,
+            showFilter: showFilter,
+            getParams: filterParams,
+            filters: filters,
+            defaultFilter: defaultFilter },
           props.children
         );
       default:
@@ -13848,7 +13968,12 @@ var FigureComponent = function FigureComponent(_ref) {
     link ? React__default.createElement(
       'a',
       { href: link, target: blank ? '_blank' : '_self' },
-      React__default.createElement(reactBootstrap.Figure.Image, { ref: imgElement, onLoad: loadImg, src: urlFor$1(node$$1, client).url(), alt: alt && alt }),
+      React__default.createElement(reactBootstrap.Figure.Image, {
+        ref: imgElement,
+        onLoad: loadImg,
+        src: urlFor$1(node$$1, client).url(),
+        alt: alt && alt
+      }),
       caption && React__default.createElement(
         reactBootstrap.Figure.Caption,
         { style: { width: captionWidth } },
@@ -13857,7 +13982,12 @@ var FigureComponent = function FigureComponent(_ref) {
     ) : React__default.createElement(
       React__default.Fragment,
       null,
-      React__default.createElement(reactBootstrap.Figure.Image, { ref: imgElement, onLoad: loadImg, src: urlFor$1(node$$1, client).url(), alt: alt && alt }),
+      React__default.createElement(reactBootstrap.Figure.Image, {
+        ref: imgElement,
+        onLoad: loadImg,
+        src: urlFor$1(node$$1, client).url(),
+        alt: alt && alt
+      }),
       caption && React__default.createElement(
         reactBootstrap.Figure.Caption,
         { style: { width: captionWidth } },
@@ -13903,7 +14033,11 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           reactBootstrap.Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { src: slide.asset && urlFor$2(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React__default.createElement('img', {
+            src: slide.asset && urlFor$2(slide.asset, builder).url(),
+            alt: slide.alt && slide.alt,
+            style: { width: '100%' }
+          }),
           slide.caption && React__default.createElement(
             'p',
             { className: 'p-2' },
@@ -17522,7 +17656,10 @@ var Media$1 = function Media$$1(_ref) {
         React__default.createElement(
           'a',
           { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-          React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(poster.asset).url(), fluid: true }),
+          React__default.createElement(reactBootstrap.Figure.Image, {
+            src: urlFor(poster.asset).url(),
+            fluid: true
+          }),
           caption && React__default.createElement(
             reactBootstrap.Figure.Caption,
             null,
@@ -17534,7 +17671,9 @@ var Media$1 = function Media$$1(_ref) {
       return React__default.createElement(
         reactBootstrap.Figure,
         { className: 'd-block text-center mb-3' },
-        React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(poster.asset).url() }),
+        React__default.createElement(reactBootstrap.Figure.Image, {
+          src: urlFor(poster.asset).url()
+        }),
         caption && React__default.createElement(
           reactBootstrap.Figure.Caption,
           null,
@@ -20480,9 +20619,18 @@ var urlFor$3 = function urlFor(source, client) {
   return builder.image(source);
 };
 
+var renderCardImage$1 = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
+  var url = urlFor$3(thumbnail, client);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageWidth) url = url.width(imageWidth);
+  return url.url();
+};
+
 var Hero = function Hero(_ref) {
   var data = _ref.data,
-      client = _ref.client;
+      client = _ref.client,
+      imageHeight = _ref.imageHeight,
+      imageWidth = _ref.imageWidth;
   var title = data.title,
       summary = data.summary,
       thumbnail = data.thumbnail,
@@ -20502,7 +20650,7 @@ var Hero = function Hero(_ref) {
           { className: 'h4' },
           title
         ),
-        thumbnail && React__default.createElement(reactBootstrap.Card.Img, { src: urlFor$3(thumbnail, client).url() }),
+        thumbnail && client && React__default.createElement(reactBootstrap.Card.Img, { src: renderCardImage$1(thumbnail, client, imageHeight, imageWidth) }),
         summary && React__default.createElement(
           reactBootstrap.Card.Footer,
           { className: 'h6' },