respoinsive gallery

components/carousel/EmblaCarousel.jsx

@@ -4,13 +4,15 @@ import { Thumb } from './EmblaCarouselThumbsButton'
 // import imageByIndex from './imageByIndex'
 import Image from "next/image";
 import gumletLoader from "@/components/new-index/gumletLoader";
+import dynamic from "next/dynamic";
 
 import {
   PrevButton,
   NextButton,
   usePrevNextButtons
 } from './EmblaCarouselArrowButtons'
-import { ImageDialog } from './ImageDialog.js/ImageDialog';
+
+const ImageDialog = dynamic(() => {return import("./ImageDialog/ImageDialog")},{ ssr: false });
 
 const EmblaCarousel = (props) => {
   const { slides, options } = props

components/carousel/ImageDialog.js/ImageDialog.js → components/carousel/ImageDialog/ImageDialog.js

@@ -12,7 +12,7 @@ import {
 
 const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
 
-export const ImageDialog = ({open, toggleOpen, image, onPrevButtonClick, onNextButtonClick, prevBtnDisabled, nextBtnDisabled}) =>{
+const ImageDialog = ({open, toggleOpen, image, onPrevButtonClick, onNextButtonClick, prevBtnDisabled, nextBtnDisabled}) =>{
   const router = useRouter();
 
     const [loading, setLoading] = useState(true)
@@ -76,4 +76,5 @@ export const ImageDialog = ({open, toggleOpen, image, onPrevButtonClick, onNextB
         </DialogContentImage>
       </Dialog>
     )
-}
+}
+export default ImageDialog

components/carousel/index.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+// import React from 'react'
+// import ReactDOM from 'react-dom/client'
 import EmblaCarousel from './EmblaCarousel'
-import Header from './Header'
-import Footer from './Footer'
+// import Header from './Header'
+// import Footer from './Footer'
 // import '../css/base.css'
 // import '../css/sandbox.css'
 // import '../css/embla.css'

lib/constants.js

@@ -11,6 +11,8 @@ export const HOME_OG_IMAGE_URL =
 export const NAV_OFFSET = 'pt-[96px]'
 export const SIDEBAR_STICKY_OFFSET = 'pt-24'
 
+export const TOTAL_STATIC_POSTS = 200
+
 export const jobTypes = [
   {
     "Name":"Full-time",

pages/newsletter/[slug].js

@@ -6,6 +6,7 @@ import Container from '@/components/container'
 import Layout from "@/components/new-index/layoutForIndex";
 import { getAllPostsWithSlug, getNewsletter } from '@/lib/api'
 import { FormattedMessage } from "react-intl";
+import { TOTAL_STATIC_POSTS } from "@/lib/constants";
 
 const PostPreview = dynamic(() => import("@/components/post-preview"));
 
@@ -133,7 +134,7 @@ export async function getStaticProps({ params, preview = null, postType="newslet
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug('newsletter', 1000)
+  const allPosts = await getAllPostsWithSlug('newsletter', TOTAL_STATIC_POSTS)
 
   return {
     paths: allPosts && allPosts.data?.map((post) =>{ 

pages/post/[slug].js

@@ -34,7 +34,7 @@ import Image from "next/image";
 import gumletLoader from "@/components/new-index/gumletLoader";
 import SignupSidebar from "@/components/newsletter/SignupSidebar";
 import SponsorSidebarCard from "@/components/SponsorSidebarCard";
-import { SIDEBAR_STICKY_OFFSET } from "@/lib/constants";
+import { SIDEBAR_STICKY_OFFSET, TOTAL_STATIC_POSTS } from "@/lib/constants";
 import PostHeader from "@/components/post-header";
 const StickyFooterCTA = dynamic(() => import("@/components/StickyFooterCTA"), {
   ssr: false,
@@ -516,7 +516,7 @@ export async function getStaticPaths({ locales }) {
     process.env.NODE_ENV ||
       process.env.NEXT_PUBLIC_HOME_URL.indexOf("localhost") > -1
       ? 20
-      : 5000
+      : TOTAL_STATIC_POSTS
   );
   // const homePosts = await getCombinedPostsForHomeStatic()
 

pages/toolbox/[slug].js

@@ -15,9 +15,6 @@ import useUser from "@/lib/iron-session/useUser";
 import { SealQuestion } from "@phosphor-icons/react";
 
 import Carousel from '@/components/carousel'
-const PopupGallery = dynamic(() => import("@/components/gallery/PopupGallery"), {
-  ssr: true,
-});
 const StickyFooterCTA = dynamic(() => import("@/components/StickyFooterCTA"), {
   ssr: false,
 });
@@ -42,6 +39,7 @@ import PopularTagsSection from "@/components/v4/section/PopularTagsSection";
 import SectionDivider from "@/components/v4/section/SectionDivider";
 import Link from "next/link";
 import Button from "@/components/Primitives/Button";
+import { TOTAL_STATIC_POSTS } from "@/lib/constants";
 
 const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
   const { user } = useUser();
@@ -415,7 +413,7 @@ export async function getStaticProps({ params, preview = null, locale }) {
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug("tool", 5000);
+  const allPosts = await getAllPostsWithSlug("tool", TOTAL_STATIC_POSTS);
   // const homePageTools = await getAllToolsForHomeStatic()
   // let mergedSlugs = {
   //   ...allPosts,

pages/topics.js

@@ -12,9 +12,9 @@ import Footer from "@/components/footer";
 // import TopicSpotlightSection from "@/components/v4/section/TopicSpotlightSection";
 // import PopularTagsSection from "@/components/v4/section/PopularTagsSection";
 // import JumboTagsSection from "@/components/v4/section/JumboTagsSection";
-import JumboTagC from "@/components/v4/card/JumboTagC";
+// import JumboTagC from "@/components/v4/card/JumboTagC";
 import Link from "next/link";
-import DiscoverSection from "@/components/v4/section/DiscoverSectionB";
+// import DiscoverSection from "@/components/v4/section/DiscoverSectionB";
 import TopicIndexSection from "@/components/v4/section/TopicIndexSection";
 // import TwoColumnCards from "@/components/v4/layout/TwoColumnCardsB";
 // import CategoriesIconCardLarge from "@/components/v4/card/CategoriesIconCardLarge";