@mjhls/mjh-framework 1.0.118 → 1.0.119

package/dist/index.js

@@ -11594,7 +11594,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
     ),
     icon && React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n          .taxonomy-card:hover .taxonomy-icon {\n            transform: translateY(-50%) scale(1.5) translateX(0) !important;\n          }\n        '
     )
   );
@@ -11738,7 +11738,7 @@ var GroupDeck = function GroupDeck(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider {\n          position: relative;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 0.5rem;\n          color: white;\n          padding: 0 1rem;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow: scroll;\n          width: 100%;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 1rem;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 55px 0;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          width: 250px;\n          height: 140.625px;\n          margin-right: 10px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile__img {\n          width: 250px;\n          height: 140.625px;\n          -o-object-fit: cover;\n          object-fit: cover;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\u25B6\';\n          left: 0;\n          width: 100%;\n          font-size: 30px;\n          margin-left: 3px;\n          margin-top: -22px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n        #vid-slider .tile:hover .tile__details {\n          opacity: 1;\n        }\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n        #vid-slider .row__inner:hover {\n          -webkit-transform: translate3d(-62.5px, 0, 0);\n          transform: translate3d(-62.5px, 0, 0);\n        }\n        #vid-slider .row__inner:hover .tile {\n          opacity: 0.3;\n        }\n        #vid-slider .row__inner:hover .tile:hover {\n          -webkit-transform: scale(1.25);\n          transform: scale(1.25);\n          opacity: 1;\n        }\n        #vid-slider .tile:hover ~ .tile {\n          -webkit-transform: translate3d(62px, 0, 0);\n          transform: translate3d(62px, 0, 0);\n        }\n        #vid-slider .tile:hover .tile__info {\n          opacity: 0;\n        }\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -3px;\n        }\n        #vid-slider .tile__slider-next {\n          right: 0;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding: 0 1.2rem;\n        }\n        #vid-slider .tile:last-child {\n          margin-right: 2rem;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
     )
   );
@@ -11938,7 +11938,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider {\n          position: relative;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow: scroll;\n          width: 100%;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 1rem;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 55px 0;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          width: 250px;\n          height: 140.625px;\n          margin-right: 10px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile__img {\n          width: 250px;\n          height: 140.625px;\n          -o-object-fit: cover;\n          object-fit: cover;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\u25B6\';\n          left: 0;\n          width: 100%;\n          font-size: 30px;\n          margin-left: 2px;\n          margin-top: -23px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n        #vid-slider .tile:hover .tile__details {\n          opacity: 1;\n        }\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n        #vid-slider .row__inner:hover {\n          -webkit-transform: translate3d(-62.5px, 0, 0);\n          transform: translate3d(-62.5px, 0, 0);\n        }\n        #vid-slider .row__inner:hover .tile {\n          opacity: 0.3;\n        }\n        #vid-slider .row__inner:hover .tile:hover {\n          -webkit-transform: scale(1.25);\n          transform: scale(1.25);\n          opacity: 1;\n        }\n        #vid-slider .tile:hover ~ .tile {\n          -webkit-transform: translate3d(62px, 0, 0);\n          transform: translate3d(62px, 0, 0);\n        }\n        #vid-slider .tile:hover .tile__info {\n          opacity: 0;\n        }\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -3px;\n        }\n        #vid-slider .tile__slider-next {\n          right: 0;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding: 0 1.2rem;\n        }\n        #vid-slider .tile:last-child {\n          margin-right: 2rem;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
     )
   );
@@ -12179,7 +12179,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
         return React__default.createElement(
           React__default.Fragment,
-          null,
+          { key: article._id ? article._id : index$$1 },
           React__default.createElement(
             VisibilitySensor,
             {
@@ -12199,7 +12199,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
                   React__default.createElement(
                     'a',
                     null,
-                    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' })
+                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                   )
                 ),
                 React__default.createElement(
@@ -12819,12 +12819,12 @@ var LeftNav = function LeftNav(props) {
               { key: subIndex },
               React__default.createElement(
                 ListGroup.Item,
-                { as: 'li', active: true },
+                { as: 'li', active: true, key: subIndex + '_1' },
                 row.name
               ),
               React__default.createElement(
                 ListGroup.Item,
-                { as: 'li' },
+                { as: 'li', key: subIndex + '_2' },
                 renderListGroupItem(subRow)
               )
             );
@@ -12834,7 +12834,7 @@ var LeftNav = function LeftNav(props) {
               { key: subIndex },
               React__default.createElement(
                 ListGroup.Item,
-                { as: 'li' },
+                { as: 'li', key: subIndex + '_1' },
                 renderListGroupItem(subRow)
               )
             );
@@ -12895,7 +12895,7 @@ var PageFilter = function PageFilter(props) {
       ),
       React__default.createElement(
         'style',
-        { jsx: true },
+        { jsx: 'true' },
         '\n          .select-dropdown > a {\n            color: #8e8c84;\n          }\n        '
       )
     );
@@ -12951,7 +12951,7 @@ var Column3 = function Column3(props) {
       ),
       React__default.createElement(
         'style',
-        { jsx: true },
+        { 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          '
       ),
       (!main_36 || showRightAd) && React__default.createElement(
@@ -13185,7 +13185,7 @@ var Search = function Search(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .mobile-search {\n          width: 75%;\n          margin-right: 15px;\n        }\n      '
     )
   );
@@ -13259,8 +13259,8 @@ var NavMagazine = function NavMagazine(props) {
       website = props.website,
       _props$showLogin = props.showLogin,
       showLogin = _props$showLogin === undefined ? false : _props$showLogin,
-      _props$loginState = props.loginState,
-      loginState = _props$loginState === undefined ? false : _props$loginState;
+      _props$initialLoginSt = props.initialLoginState,
+      initialLoginState = _props$initialLoginSt === undefined ? false : _props$initialLoginSt;
 
   var navRef = React.useRef(null);
 
@@ -13274,6 +13274,11 @@ var NavMagazine = function NavMagazine(props) {
       screenWidth = _useState4[0],
       setScreenWidth = _useState4[1];
 
+  var _useState5 = React.useState(initialLoginState),
+      _useState6 = slicedToArray(_useState5, 2),
+      loginState = _useState6[0],
+      setLoginState = _useState6[1];
+
   React.useEffect(function () {
     document.addEventListener('scroll', trackScrolling);
     return function () {
@@ -13284,6 +13289,11 @@ var NavMagazine = function NavMagazine(props) {
 
   React.useEffect(function () {
     setScreenWidth(parseInt(window.innerWidth));
+    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
+      setLoginState(GCN.onecount.isLoggedIn());
+    } else {
+      console.error('GCN not defined');
+    }
   }, []);
 
   var trackScrolling = function trackScrolling() {
@@ -13296,6 +13306,24 @@ var NavMagazine = function NavMagazine(props) {
     }
   };
 
+  var handleLogin = function handleLogin(e) {
+    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
+      GCN.onecount.login();
+      setLoginState(GCN.onecount.isLoggedIn());
+    } else {
+      console.error('GCN not defined');
+    }
+  };
+
+  var handleLogout = function handleLogout(e) {
+    if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
+      GCN.onecount.logout();
+      setLoginState(GCN.onecount.isLoggedIn());
+    } else {
+      console.error('GCN not defined');
+    }
+  };
+
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -13313,7 +13341,9 @@ var NavMagazine = function NavMagazine(props) {
             { id: 'nav-mobile-register' },
             React__default.createElement(
               'div',
-              { className: 'px-2 py-2' },
+              { className: 'px-2 py-2', onClick: function onClick(e) {
+                  return handleLogin(e);
+                } },
               React__default.createElement(MdEmail, null),
               ' Register'
             )
@@ -13336,7 +13366,9 @@ var NavMagazine = function NavMagazine(props) {
             { id: 'nav-mobile-login' },
             React__default.createElement(
               'div',
-              { className: 'px-2 py-2 ' },
+              { className: 'px-2 py-2 ', onClick: function onClick(e) {
+                  return handleLogin(e);
+                } },
               React__default.createElement(IoMdLogIn, null),
               ' Login'
             )
@@ -13349,7 +13381,9 @@ var NavMagazine = function NavMagazine(props) {
               { id: 'nav-mobile-logout' },
               React__default.createElement(
                 'div',
-                { className: ' pl-2 pr-3 py-2 text-right' },
+                { className: 'pl-2 pr-3 py-2 text-right', onClick: function onClick(e) {
+                    return handleLogout(e);
+                  } },
                 React__default.createElement(IoMdLogIn, null),
                 ' Logout'
               )
@@ -13367,7 +13401,9 @@ var NavMagazine = function NavMagazine(props) {
               null,
               React__default.createElement(
                 'div',
-                { className: 'px-2 py-2 mr-2', id: 'nav-register' },
+                { className: 'px-2 py-2 mr-2', id: 'nav-register', onClick: function onClick(e) {
+                    return handleLogin(e);
+                  } },
                 React__default.createElement(MdEmail, null),
                 ' Register'
               )
@@ -13377,7 +13413,9 @@ var NavMagazine = function NavMagazine(props) {
               null,
               React__default.createElement(
                 'div',
-                { className: ' px-2 py-2', id: 'nav-login' },
+                { className: 'px-2 py-2', id: 'nav-login', onClick: function onClick(e) {
+                    return handleLogin(e);
+                  } },
                 React__default.createElement(IoMdLogIn, null),
                 ' Login'
               )
@@ -13391,7 +13429,9 @@ var NavMagazine = function NavMagazine(props) {
               null,
               React__default.createElement(
                 'div',
-                { className: ' px-2 py-2', id: 'nav-logout' },
+                { className: 'px-2 py-2', id: 'nav-logout', onClick: function onClick(e) {
+                    return handleLogout(e);
+                  } },
                 React__default.createElement(IoMdLogIn, null),
                 ' Logout'
               )
@@ -13519,7 +13559,7 @@ var NavMagazine = function NavMagazine(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        .nav-item svg{\n          margin-bottom: 2px;\n        }\n        #nav-login,\n        #nav-logout,\n        #nav-register {\n          padding: 0.5rem;\n          cursor: pointer;\n        }\n        #nav-mobile-login,\n        #nav-mobile-logout,\n        #nav-mobile-register {\n          display: none;\n          \n        }\n        #nav-mobile-logout, #nav-mobile-login{\n          position: absolute;\n          right: 1rem;\n        }\n        #nav-mobile-register {\n          position: absolute;\n          left: 1rem;\n        }\n       \n        @media screen and (max-width: 1199px) {\n          #nav-mobile-login,\n          #nav-mobile-logout,\n          #nav-mobile-register {\n            display: block;\n          }\n          .navbar-top {\n            flex-direction: row;\n            justify-content: space-around !important;\n            align-items: center;\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n            width: 100%;\n          }\n        }\n\n        @media screen and (max-width: 991px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n         \n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            float: right;\n            margin: 4px 0px 0px 0px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            display: none;\n          }\n        }\n\n        @media screen and (max-width: 376px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            width: 60%;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            width: 70%;\n          }\n        }\n        @media screen and (max-width: 328px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            margin-right: 5px;\n          }\n        }\n        @media screen and (max-width: 767px) {\n          .logo {\n            width: 100%;\n            padding-left: 10px;\n            padding-right: 10px;\n          }\n       \n        }\n      '
     )
   );
@@ -13649,7 +13689,7 @@ var NavNative = function NavNative(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        @media screen and (max-width: 991px) {\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            margin: 5px 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n        }\n      '
     )
   );
@@ -13727,7 +13767,7 @@ var NavNormal = function NavNormal(props) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        @media screen and (max-width: 991px) {\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n        }\n      '
     )
   );
@@ -17763,7 +17803,7 @@ var Sidebar = function Sidebar(_ref) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .sidebar {\n          width: 40%;\n          padding: 1rem 0 0;\n          margin-left: 1rem;\n          margin-right: 10%;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            width: unset;\n            padding: 1.25rem;\n           margin-left: 1rem;\n           margin-right: 1rem;\n          }\n        }\n      '
     )
   );
@@ -20144,8 +20184,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   //variables
 
 
-  var get2 = router$$1.asPath.split('/')[1];
-  var get3 = router$$1.asPath.split('/')[2].split('?')[0];
+  var get2 = router$$1 && router$$1.asPath ? router$$1.asPath.split('/')[1] : '';
+  var get3 = router$$1 && router$$1.asPath ? router$$1.asPath.split('/')[2].split('?')[0] : '';
 
   // Once component mounts, set the variables
   React.useEffect(function () {
@@ -20286,7 +20326,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        .vid-series .video-detail iframe {\n          height: 415px !important;\n        }\n        span.btn {\n          margin: 0 1rem;\n        }\n      '
     )
   );
@@ -20628,9 +20668,60 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
 //     ...,
 //      feature_img { asset-> {url} }
 //    }`
+
+
 var Feature = function Feature(props) {
   var dataset = props.dataset;
 
+  var checkUrlIsExternal = function checkUrlIsExternal(url) {
+    if (/(http|https?)([^\s]+)/g.test(url)) {
+      return true;
+    }
+    return false;
+  };
+
+  var renderUrl = function renderUrl(feature_link, feature_title, feature_body) {
+    if (checkUrlIsExternal(feature_link)) {
+      return React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          'a',
+          { href: feature_link, target: '_blank' },
+          React__default.createElement(
+            'h3',
+            { style: { color: 'white' } },
+            feature_title
+          ),
+          React__default.createElement(
+            'p',
+            { style: { color: '#eee' } },
+            feature_body
+          )
+        )
+      );
+    }
+
+    return React__default.createElement(
+      Link,
+      { href: feature_link },
+      React__default.createElement(
+        'a',
+        null,
+        React__default.createElement(
+          'h3',
+          { style: { color: 'white' } },
+          feature_title
+        ),
+        React__default.createElement(
+          'p',
+          { style: { color: '#eee' } },
+          feature_body
+        )
+      )
+    );
+  };
+
   return React__default.createElement(
     'div',
     null,
@@ -20651,24 +20742,7 @@ var Feature = function Feature(props) {
           React__default.createElement(
             Carousel.Caption,
             { style: { paddingRight: '50%', left: '3rem', right: '3rem', top: '0', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
-            React__default.createElement(
-              Link,
-              { href: feature_link },
-              React__default.createElement(
-                'a',
-                null,
-                React__default.createElement(
-                  'h3',
-                  { style: { color: 'white' } },
-                  feature_title
-                ),
-                React__default.createElement(
-                  'p',
-                  { style: { color: '#eee' } },
-                  feature_body
-                )
-              )
-            )
+            renderUrl(feature_link, feature_title, feature_body)
           )
         );
       })
@@ -20712,7 +20786,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       }),
       React__default.createElement(
         'style',
-        { jsx: true },
+        { jsx: 'true' },
         '\n          .breadcrumb {\n            border: none;\n            background: transparent;\n          }\n          .breadcrumb .breadcrumb-item a {\n            color: var(--primary);\n            font-size: 12px;\n          }\n          .breadcrumb .breadcrumb-item .active{\n            font-size: 12px;\n          }\n          .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n        '
       )
     );
@@ -20738,7 +20812,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     ),
     React__default.createElement(
       'style',
-      { jsx: true },
+      { jsx: 'true' },
       '\n        ol.breadcrumb {\n          background: transparent;\n          padding-left: 0.25rem;\n        }\n      '
     )
   );