@mjhls/mjh-framework 1.0.158 → 1.0.160

package/dist/index.js

@@ -14,7 +14,8 @@ var Col = _interopDefault(require('react-bootstrap/Col'));
 var Card = _interopDefault(require('react-bootstrap/Card'));
 var moment = _interopDefault(require('moment'));
 var Link = _interopDefault(require('next/link'));
-var router = require('next/router');
+var Router = require('next/router');
+var Router__default = _interopDefault(Router);
 var LazyLoad = _interopDefault(require('react-lazyload'));
 var Media = _interopDefault(require('react-bootstrap/Media'));
 var reactBootstrap = require('react-bootstrap');
@@ -4757,19 +4758,19 @@ var DeckContent = function (_React$Component) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
           pageview = _this$props.pageview,
-          router$$1 = _this$props.router;
+          router = _this$props.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
-        var path = router$$1.asPath;
+        var path = router.asPath;
         var qrIndex = path.indexOf('?');
-        var pathname = router$$1.pathname;
+        var pathname = router.pathname;
         var queryString = '';
 
         if (qrIndex > 0) {
           path = path.substring(1, qrIndex);
 
-          var partialQS = router$$1.asPath.substring(qrIndex + 1);
+          var partialQS = router.asPath.substring(qrIndex + 1);
           var partialQSArr = partialQS.split('&');
 
           // exclude page=xxx from query string
@@ -4815,7 +4816,7 @@ var DeckContent = function (_React$Component) {
 
               pageview(newPath);
 
-              router$$1.push(pathname, newPath, {
+              router.push(pathname, newPath, {
                 shallow: true
               });
             });
@@ -5080,7 +5081,7 @@ var DeckContent = function (_React$Component) {
   return DeckContent;
 }(React__default.Component);
 
-var ContentCard = router.withRouter(DeckContent);
+var ContentCard = Router.withRouter(DeckContent);
 
 /**
  * Checks if `value` is classified as an `Array` object.
@@ -6160,19 +6161,19 @@ var GridContent = function (_React$Component) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
           pageview = _this$props.pageview,
-          router$$1 = _this$props.router;
+          router = _this$props.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
-        var path = router$$1.asPath;
+        var path = router.asPath;
         var qrIndex = path.indexOf('?');
-        var pathname = router$$1.pathname;
+        var pathname = router.pathname;
         var queryString = '';
 
         if (qrIndex > 0) {
           path = path.substring(1, qrIndex);
 
-          var partialQS = router$$1.asPath.substring(qrIndex + 1);
+          var partialQS = router.asPath.substring(qrIndex + 1);
           var partialQSArr = partialQS.split('&');
 
           // exclude page=xxx from query string
@@ -6207,7 +6208,7 @@ var GridContent = function (_React$Component) {
 
               pageview(newPath);
 
-              router$$1.push(pathname, newPath, {
+              router.push(pathname, newPath, {
                 shallow: true
               });
             });
@@ -6651,7 +6652,7 @@ var GridContent = function (_React$Component) {
   return GridContent;
 }(React__default.Component);
 
-var GridContent$1 = router.withRouter(GridContent);
+var GridContent$1 = Router.withRouter(GridContent);
 
 var DeckQueue = function (_React$Component) {
   inherits(DeckQueue, _React$Component);
@@ -6744,19 +6745,19 @@ var DeckQueue = function (_React$Component) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
           pageview = _this$props.pageview,
-          router$$1 = _this$props.router;
+          router = _this$props.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
-        var path = router$$1.asPath;
+        var path = router.asPath;
         var qrIndex = path.indexOf('?');
-        var pathname = router$$1.pathname;
+        var pathname = router.pathname;
         var queryString = '';
 
         if (qrIndex > 0) {
           path = path.substring(1, qrIndex);
 
-          var partialQS = router$$1.asPath.substring(qrIndex + 1);
+          var partialQS = router.asPath.substring(qrIndex + 1);
           var partialQSArr = partialQS.split('&');
 
           // exclude page=xxx from query string
@@ -6791,7 +6792,7 @@ var DeckQueue = function (_React$Component) {
 
               pageview(newPath);
 
-              router$$1.push(pathname, newPath, {
+              router.push(pathname, newPath, {
                 shallow: true
               });
             });
@@ -6988,7 +6989,7 @@ var DeckQueue = function (_React$Component) {
   return DeckQueue;
 }(React__default.Component);
 
-var Queue = router.withRouter(DeckQueue);
+var Queue = Router.withRouter(DeckQueue);
 
 var ThumbnailCard = function ThumbnailCard(_ref) {
   var size = _ref.size,
@@ -7555,17 +7556,17 @@ var loadData = function loadData(values, query, client, params, setData, setScro
   });
 };
 
-var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router$$1, currentPage, setCurrentPage) {
+var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage) {
   if (seoPaginate) {
-    var path = router$$1.asPath;
+    var path = router.asPath;
     var qrIndex = path.indexOf('?');
-    var pathname = router$$1.pathname;
+    var pathname = router.pathname;
     var queryString = '';
 
     if (qrIndex > 0) {
       path = path.substring(1, qrIndex);
 
-      var partialQS = router$$1.asPath.substring(qrIndex + 1);
+      var partialQS = router.asPath.substring(qrIndex + 1);
       var partialQSArr = partialQS.split('&');
 
       // exclude page=xxx from query string
@@ -7595,7 +7596,7 @@ var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pagevi
         }
         var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
         pageview(newPath);
-        router$$1.push(pathname, newPath, {
+        router.push(pathname, newPath, {
           shallow: true
         });
       }
@@ -7653,7 +7654,7 @@ var checkExternalUrl = function checkExternalUrl(url) {
   return new RegExp(['http', 'https'].join('|')).test(url);
 };
 
-var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems) {
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems) {
   var numberOfItemsBeforeAd = 6;
   return React__default.createElement(
     'div',
@@ -7672,7 +7673,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               {
                 key: article._id ? article._id : index$$1,
                 onChange: function onChange(isVisible) {
-                  isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router$$1, currentPage, setCurrentPage);
+                  isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
                 } },
               React__default.createElement(
                 React__default.Fragment,
@@ -7696,16 +7697,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     reactBootstrap.Media.Body,
                     null,
                     React__default.createElement(
-                      Link,
-                      { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
-                      React__default.createElement(
-                        'a',
-                        null,
-                        article.title && React__default.createElement(
-                          'h4',
-                          { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
-                          article.title
-                        )
+                      'a',
+                      { href: article.url.current, target: '_blank' },
+                      article.title && React__default.createElement(
+                        'h4',
+                        { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
+                        article.title
                       )
                     ),
                     showPublished && article.published && React__default.createElement(
@@ -7749,7 +7746,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               {
                 key: article._id ? article._id : index$$1,
                 onChange: function onChange(isVisible) {
-                  isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router$$1, currentPage, setCurrentPage);
+                  isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
                 } },
               React__default.createElement(
                 React__default.Fragment,
@@ -7762,7 +7759,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     style: { flexDirection: 'column', marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
                   (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
                     Link,
-                    { href: article.url.current, as: mapping[contentCategoryName] + '/' + article.url.current },
+                    { href: article.url.current },
                     React__default.createElement(
                       'a',
                       { className: 'feature-wrapper' },
@@ -7778,7 +7775,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     null,
                     React__default.createElement(
                       Link,
-                      { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                      { href: article.url.current },
                       React__default.createElement(
                         'a',
                         null,
@@ -7832,7 +7829,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
           {
             key: article._id ? article._id : index$$1,
             onChange: function onChange(isVisible) {
-              isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router$$1, currentPage, setCurrentPage);
+              isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
             } },
           React__default.createElement(
             React__default.Fragment,
@@ -7947,7 +7944,7 @@ var usePrevious = function usePrevious(value) {
 };
 
 var QueueDeckExpanded = function QueueDeckExpanded(props) {
-  var router$$1 = router.useRouter();
+  var router = Router.useRouter();
   var initialData = props.dataRecord,
       client = props.client,
       params = props.params,
@@ -8021,7 +8018,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, imageHeight, imageWidth, rightItems)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems)
         )
       ),
       React__default.createElement(
@@ -8035,7 +8032,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, rightItems)
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, rightItems)
       ),
       React__default.createElement(
         'div',
@@ -8247,19 +8244,19 @@ var VideoSeriesListing = function (_React$Component) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
           pageview = _this$props.pageview,
-          router$$1 = _this$props.router;
+          router = _this$props.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
-        var path = router$$1.asPath;
+        var path = router.asPath;
         var qrIndex = path.indexOf('?');
-        var pathname = router$$1.pathname;
+        var pathname = router.pathname;
         var queryString = '';
 
         if (qrIndex > 0) {
           path = path.substring(1, qrIndex);
 
-          var partialQS = router$$1.asPath.substring(qrIndex + 1);
+          var partialQS = router.asPath.substring(qrIndex + 1);
           var partialQSArr = partialQS.split('&');
 
           // exclude page=xxx from query string
@@ -8294,7 +8291,7 @@ var VideoSeriesListing = function (_React$Component) {
 
               pageview(newPath);
 
-              router$$1.push(pathname, newPath, {
+              router.push(pathname, newPath, {
                 shallow: true
               });
             });
@@ -8392,7 +8389,7 @@ var VideoSeriesListing = function (_React$Component) {
   }]);
   return VideoSeriesListing;
 }(React__default.Component);
-var VideoSeriesListing$1 = router.withRouter(VideoSeriesListing);
+var VideoSeriesListing$1 = Router.withRouter(VideoSeriesListing);
 
 var MasterDeck = function (_React$Component) {
   inherits(MasterDeck, _React$Component);
@@ -8506,19 +8503,19 @@ var MasterDeck = function (_React$Component) {
       var _this$props2 = _this.props,
           seoPaginate = _this$props2.seoPaginate,
           pageview = _this$props2.pageview,
-          router$$1 = _this$props2.router;
+          router = _this$props2.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
-        var path = router$$1.asPath;
+        var path = router.asPath;
         var qrIndex = path.indexOf('?');
-        var pathname = router$$1.pathname;
+        var pathname = router.pathname;
         var queryString = '';
 
         if (qrIndex > 0) {
           path = path.substring(1, qrIndex);
 
-          var partialQS = router$$1.asPath.substring(qrIndex + 1);
+          var partialQS = router.asPath.substring(qrIndex + 1);
           var partialQSArr = partialQS.split('&');
 
           // exclude page=xxx from query string
@@ -8564,7 +8561,7 @@ var MasterDeck = function (_React$Component) {
 
               pageview(newPath);
 
-              router$$1.push(pathname, newPath, {
+              router.push(pathname, newPath, {
                 shallow: true
               });
             });
@@ -8764,7 +8761,7 @@ var MasterDeck = function (_React$Component) {
   return MasterDeck;
 }(React__default.Component);
 
-var MasterDeck$1 = router.withRouter(MasterDeck);
+var MasterDeck$1 = Router.withRouter(MasterDeck);
 
 var PublicationDeck = function PublicationDeck(props) {
   var data = props.data,
@@ -9020,10 +9017,11 @@ var SideFooter = function SideFooter(props) {
   /*
   useage example: <SideFooter cache={props.cache} logo='/an_mjhls_brand_logo.png' />
   */
-  var _props$cache$siteSett = props.cache.siteSettingCache,
-      socialLinks = _props$cache$siteSett.socialLinks,
-      footerLinks = _props$cache$siteSett.footerLinks,
-      name = _props$cache$siteSett.name;
+  var _get = get_1(props, 'cache.siteSettingCache', {}),
+      socialLinks = _get.socialLinks,
+      footerLinks = _get.footerLinks,
+      name = _get.name;
+
   var logo = props.logo;
 
   var year = new Date().getFullYear();
@@ -9525,7 +9523,7 @@ var Search = function Search(props) {
       _props$device = props.device,
       device = _props$device === undefined ? 'desktop' : _props$device;
 
-  var router$$1 = router.useRouter();
+  var router = Router.useRouter();
 
   var _useState = React.useState(''),
       _useState2 = slicedToArray(_useState, 2),
@@ -9534,7 +9532,7 @@ var Search = function Search(props) {
 
   var submitSearch = function submitSearch(e) {
     e.preventDefault();
-    router$$1.push({
+    router.push({
       pathname: '/search',
       query: { searchTerm: searchKey }
     });
@@ -10752,7 +10750,7 @@ var FigureComponent = function FigureComponent(_ref) {
     var screenWidth = window.innerWidth;
     if (screenWidth > 1000) {
       if (widthP === 'auto') {
-        setimageWidth('30%');
+        if (imgFloat === 'none') setimageWidth('auto');else setimageWidth('30%');
       } else {
         setimageWidth(widthP + '%');
       }
@@ -10763,12 +10761,12 @@ var FigureComponent = function FigureComponent(_ref) {
     var screenWidth = window.innerWidth;
     if (screenWidth > 1000) {
       if (widthP === 'auto') {
-        setimageWidth('30%');
+        if (imgFloat === 'none') setimageWidth('auto');else setimageWidth('30%');
       } else {
         setimageWidth(widthP + '%');
       }
     }
-  }, [widthP]);
+  }, [widthP, imgFloat]);
 
   React.useEffect(function () {
     var screenWidth = window.innerWidth;
@@ -10787,20 +10785,17 @@ var FigureComponent = function FigureComponent(_ref) {
       'a',
       { href: link, target: blank ? '_blank' : '_self' },
       React__default.createElement(reactBootstrap.Figure.Image, { style: { width: '100%' }, className: '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: '100%', maxWidth: '100%' } },
-        caption
-      )
+      caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
     ) : React__default.createElement(
       React__default.Fragment,
       null,
       React__default.createElement(reactBootstrap.Figure.Image, { style: { width: '100%' }, className: '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: '100%', maxWidth: '100%' } },
-        caption
-      )
+      caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n      '
     )
   );
 };
@@ -10809,10 +10804,10 @@ var urlFor$2 = function urlFor(source, builder) {
   return builder.image(source);
 };
 
-var onChangeSlide = function onChangeSlide(selectedIndex, pageview, setCarouselIndex, asPath) {
-  setCarouselIndex(selectedIndex);
-  lib_3.refresh();
-  if (pageview) pageview(asPath);
+var onChangeSlide = function onChangeSlide(selectedIndex, router) {
+  var pageNumber = selectedIndex + 1;
+  var href = '/view/' + router.query.url + '/?page=' + pageNumber;
+  Router__default.push(router.pathname, pageNumber > 1 ? href : '/view/' + router.query.url, { shallow: true });
 };
 
 var Slideshow = function Slideshow(_ref) {
@@ -10820,7 +10815,7 @@ var Slideshow = function Slideshow(_ref) {
       client = _ref.client,
       pageview = _ref.pageview;
 
-  var router$$1 = router.useRouter();
+  var router = Router.useRouter();
 
   var _useState = React.useState(0),
       _useState2 = slicedToArray(_useState, 2),
@@ -10829,23 +10824,34 @@ var Slideshow = function Slideshow(_ref) {
 
   var builder = imageUrlBuilder(client);
 
+  React.useEffect(function () {
+    var itemArr = router.asPath.split('?page=');
+    var pageNumber = parseInt(itemArr[1]);
+    if (!pageNumber || isNaN(pageNumber) || pageNumber > slides.length) {
+      setCarouselIndex(0);
+    } else {
+      setCarouselIndex(parseInt(itemArr[1]) - 1);
+    }
+  }, [router]);
+
+  React.useEffect(function () {
+    lib_3.refresh();
+    if (pageview) pageview(router.asPath);
+  }, [router]);
+
   return React__default.createElement(
     'div',
     { className: 'mt-3 mb-3' },
     React__default.createElement(
       reactBootstrap.Carousel,
       { activeIndex: carouselIndex, onSelect: function onSelect(selectedIndex, e) {
-          return onChangeSlide(selectedIndex, pageview, setCarouselIndex, router$$1.asPath);
+          return onChangeSlide(selectedIndex, router);
         } },
       slides && slides.map(function (slide) {
         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' },
@@ -14399,7 +14405,7 @@ var Sidebar = function Sidebar(_ref) {
 
   return React__default.createElement(
     'article',
-    { className: 'sidebar', style: { background: '#eee' } },
+    { className: 'sidebar' },
     React__default.createElement(
       'div',
       null,
@@ -14413,7 +14419,7 @@ var Sidebar = function Sidebar(_ref) {
     React__default.createElement(
       'style',
       { 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      '
+      '\n        .sidebar {\n          clear: both;\n          float: right;\n          background-color: #eee;\n          width: 40%;\n          padding: 1rem;\n          margin: 0 0 1rem 1rem;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            float: none;\n            width: auto;\n            margin: 1rem 0;\n          }\n        }\n      '
     )
   );
 };
@@ -14538,16 +14544,19 @@ var Video = function Video(_ref) {
     if (videoID) {
       return React__default.createElement(ReactPlayerLoader, { accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove' } });
     } else if (experienceID) {
-      return React__default.createElement('iframe', {
-        src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
-        allowFullScreen: 'true',
-        webkitallowfullscreen: 'true',
-        mozallowfullscreen: 'true',
-        frameBorder: 'none',
-        scrolling: 'no',
-        height: '411',
-        width: '100%'
-      });
+      return React__default.createElement(
+        'div',
+        { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto', minHeight: '380px' } },
+        React__default.createElement('iframe', {
+          src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
+          allowFullScreen: 'true',
+          webkitallowfullscreen: 'true',
+          mozallowfullscreen: 'true',
+          frameBorder: 'none',
+          scrolling: 'no',
+          style: { border: 'none', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
+        })
+      );
     }
     return null;
   }
@@ -14590,7 +14599,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   var nodes = _ref.nodes,
       client = _ref.client;
 
-  var router$$1 = router.useRouter();
+  var router = Router.useRouter();
   //state
 
   var _useState = React.useState(''),
@@ -14610,8 +14619,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   //variables
 
 
-  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] : '';
+  var get2 = router && router.asPath ? router.asPath.split('/')[1] : '';
+  var get3 = router && router.asPath ? router.asPath.split('/')[2].split('?')[0] : '';
 
   // Once component mounts, set the variables
   React.useEffect(function () {
@@ -15226,10 +15235,10 @@ var urlFor$3 = function urlFor(source, builder) {
   return builder.image(source);
 };
 
-var onChangeSlide$1 = function onChangeSlide(selectedIndex, pageview, setCarouselIndex, asPath) {
-  setCarouselIndex(selectedIndex);
-  lib_3.refresh();
-  if (pageview) pageview(asPath);
+var onChangeSlide$1 = function onChangeSlide(selectedIndex, router) {
+  var pageNumber = selectedIndex + 1;
+  var href = '/view/' + router.query.url + '/?page=' + pageNumber;
+  Router__default.push(router.pathname, pageNumber > 1 ? href : '/view/' + router.query.url, { shallow: true });
 };
 
 var Slideshow$1 = function Slideshow(_ref) {
@@ -15238,8 +15247,7 @@ var Slideshow$1 = function Slideshow(_ref) {
       pageview = _ref.pageview,
       serializerArguments = _ref.serializerArguments;
 
-  console.log(slides);
-  var router$$1 = router.useRouter();
+  var router = Router.useRouter();
 
   var _useState = React.useState(0),
       _useState2 = slicedToArray(_useState, 2),
@@ -15248,14 +15256,29 @@ var Slideshow$1 = function Slideshow(_ref) {
 
   var builder = imageUrlBuilder(client);
 
+  React.useEffect(function () {
+    var itemArr = router.asPath.split('?page=');
+    var pageNumber = parseInt(itemArr[1]);
+    if (!pageNumber || isNaN(pageNumber) || pageNumber > slides.length) {
+      setCarouselIndex(0);
+    } else {
+      setCarouselIndex(parseInt(itemArr[1]) - 1);
+    }
+  }, [router]);
+
+  React.useEffect(function () {
+    lib_3.refresh();
+    if (pageview) pageview(router.asPath);
+  }, [router]);
+
   return React__default.createElement(
     'div',
     { className: 'mt-3 mb-3' },
     React__default.createElement(
       reactBootstrap.Carousel,
       { activeIndex: carouselIndex, onSelect: function onSelect(selectedIndex, e) {
-          return onChangeSlide$1(selectedIndex, pageview, setCarouselIndex, router$$1.asPath);
-        }, indicators: false },
+          return onChangeSlide$1(selectedIndex, router);
+        } },
       slides && slides.map(function (slide) {
         if (slide.slideshowImage && slide.slideshowImage.asset) {
           return React__default.createElement(