Merge pull request #107 from vtexdocs/feat/codeblock-copy-button

feat: working code block

package.json

@@ -22,6 +22,7 @@
     "cypress": "cypress open"
   },
   "dependencies": {
+    "@code-hike/mdx": "^0.9.0",
     "@openreplay/tracker": "^5.0.1",
     "@plaiceholder/next": "^2.5.0",
     "@types/http-proxy": "^1.17.9",

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import { IntlProvider } from 'react-intl'
 import { getMessages } from 'utils/get-messages'
 
+import '@code-hike/mdx/dist/index.css'
 import 'styles/global.css'
 import 'styles/rapidoc.css'
 import '@vtexdocs/components/dist/index.css'

src/pages/announcements/[slug].tsx

@@ -8,6 +8,8 @@ import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
 import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
+import { remarkCodeHike } from '@code-hike/mdx'
+import theme from 'styles/code-hike-theme'
 
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 
@@ -246,11 +248,13 @@ export const getStaticProps: GetStaticProps = async ({
       parseFrontmatter: true,
       mdxOptions: {
         remarkPlugins: [
+          [remarkCodeHike, theme],
           remarkGFM,
           remarkImages,
           [getHeadings, { headingList }],
           remarkBlockquote,
         ],
+        useDynamicImport: true,
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],

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

@@ -10,7 +10,7 @@ import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
 import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
-
+import { remarkCodeHike } from '@code-hike/mdx'
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 
 import { Box, Flex, Text } from '@vtex/brand-ui'
@@ -47,6 +47,8 @@ import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
 
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
+
+import theme from 'styles/code-hike-theme'
 import TimeToRead from 'components/TimeToRead'
 
 const docsPathsGLOBAL = await getTracksPaths('tracks')
@@ -299,12 +301,14 @@ export const getStaticProps: GetStaticProps = async ({
       parseFrontmatter: true,
       mdxOptions: {
         remarkPlugins: [
+          [remarkCodeHike, theme],
           remarkGFM,
           remarkImages,
           [getHeadings, { headingList }],
           remarkBlockquote,
           remarkReadingTime,
         ],
+        useDynamicImport: true,
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],

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

@@ -35,9 +35,10 @@ import {
 } from 'utils/navigation-utils'
 
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
-
+import { remarkCodeHike } from '@code-hike/mdx'
 import TutorialIndexing from 'components/tutorial-index'
 import TutorialMarkdownRender from 'components/tutorial-markdown-render'
+import theme from 'styles/code-hike-theme'
 
 // import { ParsedUrlQuery } from 'querystring'
 
@@ -395,12 +396,14 @@ export const getStaticProps: GetStaticProps = async ({
       parseFrontmatter: true,
       mdxOptions: {
         remarkPlugins: [
+          [remarkCodeHike, theme],
           remarkGFM,
           remarkImages,
           [getHeadings, { headingList }],
           remarkBlockquote,
           remarkReadingTime,
         ],
+        useDynamicImport: true,
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],

src/pages/faq/[slug].tsx

@@ -8,6 +8,8 @@ import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
 import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
+import { remarkCodeHike } from '@code-hike/mdx'
+import theme from 'styles/code-hike-theme'
 
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 
@@ -231,10 +233,12 @@ export const getStaticProps: GetStaticProps = async ({
         remarkPlugins: [
           remarkGFM,
           remarkImages,
+          [remarkCodeHike, theme],
           [getHeadings, { headingList }],
           remarkBlockquote,
           remarkReadingTime,
         ],
+        useDynamicImport: true,
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],

src/pages/known-issues/[slug].tsx

@@ -8,6 +8,8 @@ import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
 import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
+import { remarkCodeHike } from '@code-hike/mdx'
+import theme from 'styles/code-hike-theme'
 
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 
@@ -238,12 +240,14 @@ export const getStaticProps: GetStaticProps = async ({
       parseFrontmatter: true,
       mdxOptions: {
         remarkPlugins: [
+          [remarkCodeHike, theme],
           remarkGFM,
           remarkImages,
           [getHeadings, { headingList }],
           remarkBlockquote,
           remarkReadingTime,
         ],
+        useDynamicImport: true,
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],

src/styles/code-hike-theme.ts

@@ -0,0 +1,10 @@
+const theme = {
+  lineNumbers: false,
+  showCopyButton: true,
+  theme: 'github-dark',
+  skipLanguages: ['mermaid'],
+  staticMediaQuery: 'not screen, (max-width: 768px)',
+  autoImport: false,
+}
+
+export default theme