fix: image src, wrap faqs in sections

src/components/mdx/image.tsx

@@ -24,23 +24,28 @@ const useImgix = (src: string) => {
       srcset: undefined,
     };
   let _src = src;
+  let _srcSet = undefined;
   const router = useRouter();
   if (!src?.startsWith('http')) {
     const path = src.startsWith('/') ? '' : getUrl(router.pathname);
     _src = `${imgix + path + src + params}`;
-  }
+    _srcSet = `${_src}&w=860&dpr=1&fit=max 1x,
-  const srcset = `${_src}&w=860&dpr=1&fit=max 1x,
           ${_src}&w=480&fit=max&q=40&dpr=2 2x,
           ${_src}&w=480&fit=max&q=20&dpr=3 3x`;
 
     const base = `${_src}&w=720&dpr=1&fit=max`;
     const placeholder = `${_src}&w=40&dpr=1&fit=max`;
-
     return {
-    srcset,
+      srcset: _srcSet,
       src: base,
       placeholder,
     };
+  } else {
+    return {
+      src: _src,
+      srcset: _srcSet,
+    };
+  }
 };
 
 const getAspectRatio = dimensions => {

src/pages/references/faqs/[slug].tsx

@@ -20,6 +20,7 @@ const FAQItem = React.memo(({ faq, ...rest }: any) => {
   const { isActive } = useActiveHeading(id);
 
   return (
+    <Components.section>
       <Box as={AccordionItem} borderBottom={border()} {...rest}>
         <Flex
           as={AccordionButton}
@@ -49,6 +50,7 @@ const FAQItem = React.memo(({ faq, ...rest }: any) => {
           {hydrate(faq.body, Components)}
         </Box>
       </Box>
+    </Components.section>
   );
 });