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 base = `${_src}&w=720&dpr=1&fit=max`;
-  const placeholder = `${_src}&w=40&dpr=1&fit=max`;
+    const placeholder = `${_src}&w=40&dpr=1&fit=max`;
-
+    return {
-  return {
+      srcset: _srcSet,
-    srcset,
+      src: base,
-    src: base,
+      placeholder,
-    placeholder,
+    };
-  };
+  } else {
+    return {
+      src: _src,
+      srcset: _srcSet,
+    };
+  }
 };
 
 const getAspectRatio = dimensions => {

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

@@ -20,35 +20,37 @@ const FAQItem = React.memo(({ faq, ...rest }: any) => {
   const { isActive } = useActiveHeading(id);
 
   return (
-    <Box as={AccordionItem} borderBottom={border()} {...rest}>
+    <Components.section>
-      <Flex
+      <Box as={AccordionItem} borderBottom={border()} {...rest}>
-        as={AccordionButton}
+        <Flex
-        _hover={{ color: color('accent') }}
+          as={AccordionButton}
-        css={css({
+          _hover={{ color: color('accent') }}
-          display: 'flex',
+          css={css({
-          width: '100%',
+            display: 'flex',
-          outline: 'none',
+            width: '100%',
-          alignItems: 'center',
+            outline: 'none',
-          justifyContent: 'space-between',
+            alignItems: 'center',
-          py: space('extra-loose'),
+            justifyContent: 'space-between',
-          textAlign: 'left',
+            py: space('extra-loose'),
-          color: isActive ? color('accent') : color('text-title'),
+            textAlign: 'left',
-          ':hover': {
+            color: isActive ? color('accent') : color('text-title'),
-            color: color('accent'),
+            ':hover': {
-          },
+              color: color('accent'),
-        })}
+            },
-      >
+          })}
-        <Components.h4 my="0px !important" id={id} color="currentColor">
+        >
-          {faq.title}
+          <Components.h4 my="0px !important" id={id} color="currentColor">
-        </Components.h4>
+            {faq.title}
-        <Box color={color('text-caption')} pl={space('base-loose')}>
+          </Components.h4>
-          <ChevronIcon direction="down" size="22px" />
+          <Box color={color('text-caption')} pl={space('base-loose')}>
+            <ChevronIcon direction="down" size="22px" />
+          </Box>
+        </Flex>
+        <Box pb={space('extra-loose')} as={AccordionPanel}>
+          {hydrate(faq.body, Components)}
         </Box>
-      </Flex>
-      <Box pb={space('extra-loose')} as={AccordionPanel}>
-        {hydrate(faq.body, Components)}
       </Box>
-    </Box>
+    </Components.section>
   );
 });