feat(codehike): install codehike

package.json

@@ -22,6 +22,7 @@
     "cypress": "cypress open"
   },
   "dependencies": {
+    "@code-hike/mdx": "^0.9.0",
     "@highlightjs/cdn-assets": "^11.7.0",
     "@lit-labs/nextjs": "^0.1.1",
     "@openreplay/tracker": "^5.0.1",

src/components/code-block/index.tsx

@@ -4,6 +4,8 @@ import { Box, Text } from '@vtex/brand-ui'
 import styles from './styles'
 import { childrenToString } from 'utils/string-utils'
 
+//CODE HIKE IS BEING USED INSTEAD OF THIS COMPONENT
+
 type Component = {
   node: object
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/components/markdown-renderer/components.tsx

@@ -7,7 +7,7 @@ import { childrenToString, slugify } from 'utils/string-utils'
 import OverviewCard from 'components/overview-card'
 import WhatsNextCard from 'components/whats-next-card'
 import YoutubeFrame from 'components/youtube-frame'
-import CodeBlock from 'components/code-block'
+import { CH } from '@code-hike/mdx/components'
 import Steps from 'components/steps'
 
 import styles from './styles.module.css'
@@ -144,6 +144,7 @@ const MermaidDiagram = ({ node, ...props }: Component) => {
 }
 
 export default {
+  CH,
   OverviewCard,
   WhatsNextCard,
   YoutubeFrame,
@@ -213,7 +214,7 @@ export default {
     if (props.className && props.className === 'mermaid')
       return <MermaidDiagram {...props} />
 
-    return <CodeBlock {...props} />
+    return <pre className={styles.pre} {...props} />
   },
   h2: ({ node, ...props }: Component) => {
     const { activeItem, setActiveItem, goToPreviousItem } =

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import type { AppProps } from 'next/app'
 import type { Page } from 'utils/typings/types'
-
+import '@code-hike/mdx/dist/index.css'
 import Head from 'next/head'
 import { SessionProvider } from 'next-auth/react'
 

src/pages/docs/apps/[slug]/[child].tsx

@@ -34,6 +34,7 @@ import Head from 'next/head'
 import SeeAlsoSection from 'components/see-also-section'
 import { ParsedUrlQuery } from 'querystring'
 import { flattenJSON, getKeyByValue, getParents } from 'utils/navigation-utils'
+import { remarkCodeHike } from '@code-hike/mdx'
 
 interface IParams extends ParsedUrlQuery {
   slug: string
@@ -191,6 +192,17 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
         parseFrontmatter: true,
         mdxOptions: {
           remarkPlugins: [
+            [
+              remarkCodeHike,
+              {
+                autoImport: false,
+                showCopyButton: true,
+                lineNumbers: true,
+                skipLanguages: ['mermaid'],
+                staticMediaQuery: 'not screen, (max-width: 850px)',
+                theme: 'poimandres',
+              },
+            ],
             remarkGFM,
             remarkImages,
             [getHeadings, { headingList }],
@@ -199,6 +211,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
           rehypePlugins: [
             [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
           ],
+          useDynamicImport: true,
           format,
         },
       })

src/pages/docs/apps/[slug]/index.tsx

@@ -27,6 +27,7 @@ import Head from 'next/head'
 import SeeAlsoSection from 'components/see-also-section'
 import { ParsedUrlQuery } from 'querystring'
 import { flattenJSON, getKeyByValue, getParents } from 'utils/navigation-utils'
+import { remarkCodeHike } from '@code-hike/mdx'
 
 interface IParams extends ParsedUrlQuery {
   slug: string
@@ -234,6 +235,17 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
         parseFrontmatter: true,
         mdxOptions: {
           remarkPlugins: [
+            [
+              remarkCodeHike,
+              {
+                autoImport: false,
+                showCopyButton: true,
+                lineNumbers: true,
+                skipLanguages: ['mermaid'],
+                staticMediaQuery: 'not screen, (max-width: 850px)',
+                theme: 'poimandres',
+              },
+            ],
             remarkGFM,
             remarkImages,
             [getHeadings, { headingList }],
@@ -242,6 +254,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
           rehypePlugins: [
             [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
           ],
+          useDynamicImport: true,
           format,
         },
       })

src/pages/docs/guides/[slug].tsx

@@ -11,7 +11,7 @@ import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
 import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
 import remarkMermaid from 'utils/remark_plugins/mermaid'
-
+import { remarkCodeHike } from '@code-hike/mdx'
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 
 import { Box, Flex, Text } from '@vtex/brand-ui'
@@ -68,6 +68,7 @@ interface Props {
   }
   isListed: boolean
   branch: string
+  hideTOC: boolean
 }
 
 const DocumentationPage: NextPage<Props> = ({
@@ -84,6 +85,7 @@ const DocumentationPage: NextPage<Props> = ({
   breadcumbList,
   branch,
   sectionSelected,
+  hideTOC,
 }) => {
   const headings: Item[] = headingList
   const hidden =
@@ -151,10 +153,12 @@ const DocumentationPage: NextPage<Props> = ({
               <SeeAlsoSection docs={seeAlsoData} />
             )}
           </Box>
-          <Box sx={styles.rightContainer}>
-            <Contributors contributors={contributors} />
-            <TableOfContents />
-          </Box>
+          {!hideTOC && (
+            <Box sx={styles.rightContainer}>
+              <Contributors contributors={contributors} />
+              <TableOfContents />
+            </Box>
+          )}
           <OnThisPage />
         </Flex>
       </APIGuideContextProvider>
@@ -231,6 +235,17 @@ export const getStaticProps: GetStaticProps = async ({
       parseFrontmatter: true,
       mdxOptions: {
         remarkPlugins: [
+          [
+            remarkCodeHike,
+            {
+              autoImport: false,
+              showCopyButton: true,
+              lineNumbers: true,
+              skipLanguages: ['mermaid'],
+              staticMediaQuery: 'not screen, (max-width: 850px)',
+              theme: 'poimandres',
+            },
+          ],
           remarkGFM,
           remarkImages,
           [getHeadings, { headingList }],
@@ -240,6 +255,7 @@ export const getStaticProps: GetStaticProps = async ({
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],
+        useDynamicImport: true,
         format,
       },
     })
@@ -290,6 +306,8 @@ export const getStaticProps: GetStaticProps = async ({
       })
     )
 
+    const hideTOC = serialized.frontmatter?.hideTOC === true
+
     const docsListSlug = jp.query(
       sidebarfallback,
       `$..[?(@.type=='markdown')]..slug`
@@ -362,6 +380,7 @@ export const getStaticProps: GetStaticProps = async ({
         isListed,
         breadcumbList,
         branch,
+        hideTOC,
       },
     }
   } catch (error) {

src/pages/updates/release-notes/[slug].tsx

@@ -36,6 +36,7 @@ import { ActionType, getAction } from 'components/last-updates-card/functions'
 
 import styles from 'styles/documentation-page'
 import { PreviewContext } from 'utils/contexts/preview'
+import { remarkCodeHike } from '@code-hike/mdx'
 
 const docsPathsGLOBAL = await getDocsPaths()
 
@@ -179,10 +180,26 @@ export const getStaticProps: GetStaticProps = async ({
     let serialized = await serialize(documentationContent, {
       parseFrontmatter: true,
       mdxOptions: {
-        remarkPlugins: [remarkGFM, remarkImages, remarkBlockquote],
+        remarkPlugins: [
+          [
+            remarkCodeHike,
+            {
+              autoImport: false,
+              showCopyButton: true,
+              lineNumbers: true,
+              skipLanguages: ['mermaid'],
+              staticMediaQuery: 'not screen, (max-width: 850px)',
+              theme: 'poimandres',
+            },
+          ],
+          remarkGFM,
+          remarkImages,
+          remarkBlockquote,
+        ],
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],
+        useDynamicImport: true,
         format: 'mdx',
       },
     })