fix(api): blogs page sync query param on filter & pagination

package.json

@@ -47,6 +47,7 @@
     "gatsby-source-filesystem": "^5.11.0",
     "gatsby-transformer-remark": "^6.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-animated-cursor": "^2.11.2",
     "react-barcode": "^1.4.6",

src/apis/fetch-blogs.ts

@@ -82,7 +82,9 @@ const fetchBlogs = async ({
       color: c.attributes.color,
     })),
     cover: `${process.env.GATSBY_API_BASE_URL?.slice(0, -4)}${
-      it.attributes.cover.data.attributes.formats.small.url
+      !slug
+        ? it.attributes.cover.data.attributes.formats.thumbnail.url
+        : it.attributes.cover.data.attributes.formats.small.url
     }`,
   }));
   const data = {

src/components/layout.tsx

@@ -17,13 +17,14 @@ import AnimatedCursor from 'react-animated-cursor';
 import cn from 'classnames';
 import { FaChevronUp } from '@react-icons/all-files/fa/FaChevronUp';
 import { FaCube } from '@react-icons/all-files/fa/FaCube';
-import { motion, useCycle, useScroll, useSpring } from 'framer-motion';
+import { motion, useCycle, useScroll } from 'framer-motion';
 import MatrixRain from './matrix-rain';
 import BackgroundContainer from './background-container';
 import Header from './header';
 import Footer from './footer';
 import ApplicationPane from './application-pane';
 import SEOHead from './seo-head';
+import ProgressIndicator from './progress-indicator';
 
 const StyledMain = tw.main`flex-auto overflow-x-hidden z-0`;
 
@@ -117,11 +118,6 @@ const Layout: FC<PropsWithChildren<PageProps>> = ({ children, location }) => {
   );
 
   const { scrollYProgress } = useScroll({ container: ref, target: ref });
-  const scaleX = useSpring(scrollYProgress, {
-    stiffness: 80,
-    damping: 20,
-    restDelta: 0.001,
-  });
 
   const handlePageSelected = useCallback(() => {
     toggleAppMenu();
@@ -183,7 +179,7 @@ const Layout: FC<PropsWithChildren<PageProps>> = ({ children, location }) => {
             />
           )}
           {enableProgressbar ? (
-            <motion.div className="progress-bar z-[90]" style={{ scaleX }} />
+            <ProgressIndicator scrollYProgress={scrollYProgress} />
           ) : null}
           <div
             id="main-container"