fix: id for faqs

src/common/utils/index.ts

@@ -84,3 +84,11 @@ export const getCategory = (pathname: string) => {
   }
   return undefined;
 };
+
+export const getSlug = (asPath: string) => {
+  if (asPath.includes('#')) {
+    const slug = asPath.split('#')[1];
+    return slug;
+  }
+  return;
+};

src/components/mdx/components/heading.tsx

@@ -26,7 +26,7 @@ const LinkButton = React.memo(({ link, onClick, ...rest }: BoxProps & { link: st
         onClick && onClick(e);
         onCopy?.();
       }}
-      transform="translateY(-5px)"
+      transform="translateY(1px)"
       {...rest}
     >
       <Tooltip label={label} aria-label={label}>
@@ -77,9 +77,7 @@ const Hashtag = () => (
 export const Heading = ({ as, children, id, ...rest }: FlexProps) => {
   const { isActive, doChangeActiveSlug } = useActiveHeading(id);
 
-  const { bind: _bind, hover, active } = useTouchable({
-    behavior: 'link',
-  });
+  const { bind: _bind, hover, active } = useTouchable();
   const router = useRouter();
 
   const link = `#${id}`;
@@ -108,17 +106,15 @@ export const Heading = ({ as, children, id, ...rest }: FlexProps) => {
         display: 'flex',
         // @ts-ignore
         justifyContent: 'flex-start',
-        textDecoration: id && hover ? 'underline' : 'unset',
         // @ts-ignore
         cursor: id && hover ? 'pointer' : 'unset',
         ...rest,
       })}
-      onClick={id && handleLinkClick}
     >
       <Box as="span">{children}</Box>
       <AnchorOffset id={id} />
       {id && isActive && <Hashtag />}
-      {id && <LinkButton opacity={hover || active ? 1 : 0} link={link} />}
+      {id && <LinkButton opacity={hover ? 1 : 0} link={link} />}
     </Title>
   );
 };

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

@@ -11,51 +11,9 @@ import { BackButton } from '@components/back-button';
 import Head from 'next/head';
 import { MDContents } from '@components/mdx/md-contents';
 export { getStaticProps, getStaticPaths } from '@common/data/faq';
-import { slugify } from '@common/utils';
+import { slugify, getSlug } from '@common/utils';
 import { PageTop } from '@components/page-top';
-
-const getBetterNames = (id: number) => {
-  switch (id) {
-    case 360007620914:
-      return {
-        title: 'General information',
-        description: 'General questions about Blockstack and the Stacks network',
-        img: '/images/pages/testnet.svg',
-      };
-    case 360007411853:
-      return {
-        title: 'Stacks Token',
-        description: 'Questions relating to the native token of Stacks 2.0',
-        img: '/images/pages/mining.svg',
-      };
-    case 360007760554:
-      return {
-        title: 'Stacks blockchain',
-        description: 'Learn about the blockchain and details of Stacks 2.0',
-        img: '/images/pages/hello-world.svg',
-      };
-    case 360007781533:
-      return {
-        title: 'Ecosystem details',
-        description: 'Questions related to the age of the project and the contributors',
-        img: '/images/pages/data-storage.svg',
-      };
-    case 360007780033:
-      return {
-        title: 'Building apps',
-        description: 'Learn about the platform and questions related to decentralized applications',
-        img: '/images/pages/connect.svg',
-      };
-  }
-};
-
-const getSlug = (asPath: string) => {
-  if (asPath.includes('#')) {
-    const slug = asPath.split('#')[1];
-    return slug;
-  }
-  return;
-};
+import { getBetterNames } from '@common/utils/faqs';
 
 const FAQItem = React.memo(({ faq, ...rest }: any) => {
   const id = slugify(faq.title);
@@ -80,7 +38,7 @@ const FAQItem = React.memo(({ faq, ...rest }: any) => {
           },
         })}
       >
-        <Components.h4 my="0px !important" color="currentColor">
+        <Components.h4 my="0px !important" id={id} color="currentColor">
           {faq.title}
         </Components.h4>
         <Box color={color('text-caption')} pl={space('base-loose')}>