From 5b49d5e428f0369a5be2e90eaf2103f46bcb5a44 Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Tue, 11 Jul 2023 16:57:05 -0300 Subject: [PATCH 01/11] feat(codehike): install codehike --- package.json | 1 + .../markdown-renderer/components.tsx | 2 + src/pages/_app.tsx | 2 +- src/pages/docs/guides/[slug].tsx | 15 +- src/pages/docs/guides/myTheme.ts | 607 ++++++++++++++++++ src/styles/global.css | 6 + 6 files changed, 630 insertions(+), 3 deletions(-) create mode 100644 src/pages/docs/guides/myTheme.ts diff --git a/package.json b/package.json index 80dcd376d..46433ea67 100644 --- a/package.json +++ b/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", diff --git a/src/components/markdown-renderer/components.tsx b/src/components/markdown-renderer/components.tsx index c88ac63e4..37e8ec20f 100644 --- a/src/components/markdown-renderer/components.tsx +++ b/src/components/markdown-renderer/components.tsx @@ -8,6 +8,7 @@ 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 styles from './styles.module.css' import { Box, Flex } from '@vtex/brand-ui' @@ -142,6 +143,7 @@ const MermaidDiagram = ({ node, ...props }: Component) => { } export default { + CH, OverviewCard, WhatsNextCard, YoutubeFrame, diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bd2127a61..3bdf5b726 100644 --- a/src/pages/_app.tsx +++ b/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' diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx index cc7c2c4d2..42be0051a 100644 --- a/src/pages/docs/guides/[slug].tsx +++ b/src/pages/docs/guides/[slug].tsx @@ -12,6 +12,8 @@ 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 { myTheme } from './myTheme' import remarkImages from 'utils/remark_plugins/plaiceholder' import { Box, Flex, Text } from '@vtex/brand-ui' @@ -181,8 +183,8 @@ export const getStaticProps: GetStaticProps = async ({ const previewBranch = preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') ? JSON.parse(JSON.stringify(previewData)).branch - : 'main' - const branch = preview ? previewBranch : 'main' + : 'test/codehike' + const branch = preview ? previewBranch : 'test/codehike' const slug = params?.slug as string const docsPaths = process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD @@ -231,6 +233,14 @@ export const getStaticProps: GetStaticProps = async ({ parseFrontmatter: true, mdxOptions: { remarkPlugins: [ + [ + remarkCodeHike, + { + autoImport: false, + showCopyButton: true, + theme: myTheme, + }, + ], remarkGFM, remarkImages, [getHeadings, { headingList }], @@ -240,6 +250,7 @@ export const getStaticProps: GetStaticProps = async ({ rehypePlugins: [ [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }], ], + useDynamicImport: true, format, }, }) diff --git a/src/pages/docs/guides/myTheme.ts b/src/pages/docs/guides/myTheme.ts new file mode 100644 index 000000000..7c2c6c4e1 --- /dev/null +++ b/src/pages/docs/guides/myTheme.ts @@ -0,0 +1,607 @@ +export const myTheme = { + $schema: 'vscode://schemas/color-theme', + name: 'light-plus', + tokenColors: [ + { + settings: { + foreground: '#000000', + }, + }, + { + scope: [ + 'meta.embedded', + 'source.groovy.embedded', + 'string meta.image.inline.markdown', + ], + settings: { + foreground: '#000000ff', + }, + }, + { + scope: 'emphasis', + settings: { + fontStyle: 'italic', + }, + }, + { + scope: 'strong', + settings: { + fontStyle: 'bold', + }, + }, + { + scope: 'meta.diff.header', + settings: { + foreground: '#000080', + }, + }, + { + scope: 'comment', + settings: { + foreground: '#008000', + }, + }, + { + scope: 'constant.language', + settings: { + foreground: '#0000ff', + }, + }, + { + scope: [ + 'constant.numeric', + 'variable.other.enummember', + 'keyword.operator.plus.exponent', + 'keyword.operator.minus.exponent', + ], + settings: { + foreground: '#098658', + }, + }, + { + scope: 'constant.regexp', + settings: { + foreground: '#811f3f', + }, + }, + { + name: 'css tags in selectors, xml tags', + scope: 'entity.name.tag', + settings: { + foreground: '#800000', + }, + }, + { + scope: 'entity.name.selector', + settings: { + foreground: '#800000', + }, + }, + { + scope: 'entity.other.attribute-name', + settings: { + foreground: '#e50000', + }, + }, + { + scope: [ + 'entity.other.attribute-name.class.css', + 'entity.other.attribute-name.class.mixin.css', + 'entity.other.attribute-name.id.css', + 'entity.other.attribute-name.parent-selector.css', + 'entity.other.attribute-name.pseudo-class.css', + 'entity.other.attribute-name.pseudo-element.css', + 'source.css.less entity.other.attribute-name.id', + 'entity.other.attribute-name.scss', + ], + settings: { + foreground: '#800000', + }, + }, + { + scope: 'invalid', + settings: { + foreground: '#cd3131', + }, + }, + { + scope: 'markup.underline', + settings: { + fontStyle: 'underline', + }, + }, + { + scope: 'markup.bold', + settings: { + fontStyle: 'bold', + foreground: '#000080', + }, + }, + { + scope: 'markup.heading', + settings: { + fontStyle: 'bold', + foreground: '#800000', + }, + }, + { + scope: 'markup.italic', + settings: { + fontStyle: 'italic', + }, + }, + { + scope: 'markup.strikethrough', + settings: { + fontStyle: 'strikethrough', + }, + }, + { + scope: 'markup.inserted', + settings: { + foreground: '#098658', + }, + }, + { + scope: 'markup.deleted', + settings: { + foreground: '#a31515', + }, + }, + { + scope: 'markup.changed', + settings: { + foreground: '#0451a5', + }, + }, + { + scope: [ + 'punctuation.definition.quote.begin.markdown', + 'punctuation.definition.list.begin.markdown', + ], + settings: { + foreground: '#0451a5', + }, + }, + { + scope: 'markup.inline.raw', + settings: { + foreground: '#800000', + }, + }, + { + name: 'brackets of XML/HTML tags', + scope: 'punctuation.definition.tag', + settings: { + foreground: '#800000', + }, + }, + { + scope: ['meta.preprocessor', 'entity.name.function.preprocessor'], + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'meta.preprocessor.string', + settings: { + foreground: '#a31515', + }, + }, + { + scope: 'meta.preprocessor.numeric', + settings: { + foreground: '#098658', + }, + }, + { + scope: 'meta.structure.dictionary.key.python', + settings: { + foreground: '#0451a5', + }, + }, + { + scope: 'storage', + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'storage.type', + settings: { + foreground: '#0000ff', + }, + }, + { + scope: ['storage.modifier', 'keyword.operator.noexcept'], + settings: { + foreground: '#0000ff', + }, + }, + { + scope: ['string', 'meta.embedded.assembly'], + settings: { + foreground: '#a31515', + }, + }, + { + scope: [ + 'string.comment.buffered.block.pug', + 'string.quoted.pug', + 'string.interpolated.pug', + 'string.unquoted.plain.in.yaml', + 'string.unquoted.plain.out.yaml', + 'string.unquoted.block.yaml', + 'string.quoted.single.yaml', + 'string.quoted.double.xml', + 'string.quoted.single.xml', + 'string.unquoted.cdata.xml', + 'string.quoted.double.html', + 'string.quoted.single.html', + 'string.unquoted.html', + 'string.quoted.single.handlebars', + 'string.quoted.double.handlebars', + ], + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'string.regexp', + settings: { + foreground: '#811f3f', + }, + }, + { + name: 'String interpolation', + scope: [ + 'punctuation.definition.template-expression.begin', + 'punctuation.definition.template-expression.end', + 'punctuation.section.embedded', + ], + settings: { + foreground: '#0000ff', + }, + }, + { + name: 'Reset JavaScript string interpolation expression', + scope: ['meta.template.expression'], + settings: { + foreground: '#000000', + }, + }, + { + scope: [ + 'support.constant.property-value', + 'support.constant.font-name', + 'support.constant.media-type', + 'support.constant.media', + 'constant.other.color.rgb-value', + 'constant.other.rgb-value', + 'support.constant.color', + ], + settings: { + foreground: '#0451a5', + }, + }, + { + scope: [ + 'support.type.vendored.property-name', + 'support.type.property-name', + 'variable.css', + 'variable.scss', + 'variable.other.less', + 'source.coffee.embedded', + ], + settings: { + foreground: '#e50000', + }, + }, + { + scope: ['support.type.property-name.json'], + settings: { + foreground: '#0451a5', + }, + }, + { + scope: 'keyword', + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'keyword.control', + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'keyword.operator', + settings: { + foreground: '#000000', + }, + }, + { + scope: [ + 'keyword.operator.new', + 'keyword.operator.expression', + 'keyword.operator.cast', + 'keyword.operator.sizeof', + 'keyword.operator.alignof', + 'keyword.operator.typeid', + 'keyword.operator.alignas', + 'keyword.operator.instanceof', + 'keyword.operator.logical.python', + 'keyword.operator.wordlike', + ], + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'keyword.other.unit', + settings: { + foreground: '#098658', + }, + }, + { + scope: [ + 'punctuation.section.embedded.begin.php', + 'punctuation.section.embedded.end.php', + ], + settings: { + foreground: '#800000', + }, + }, + { + scope: 'support.function.git-rebase', + settings: { + foreground: '#0451a5', + }, + }, + { + scope: 'constant.sha.git-rebase', + settings: { + foreground: '#098658', + }, + }, + { + name: 'coloring of the Java import and package identifiers', + scope: [ + 'storage.modifier.import.java', + 'variable.language.wildcard.java', + 'storage.modifier.package.java', + ], + settings: { + foreground: '#000000', + }, + }, + { + name: 'this.self', + scope: 'variable.language', + settings: { + foreground: '#0000ff', + }, + }, + { + name: 'Function declarations', + scope: [ + 'entity.name.function', + 'support.function', + 'support.constant.handlebars', + 'source.powershell variable.other.member', + 'entity.name.operator.custom-literal', + ], + settings: { + foreground: '#795E26', + }, + }, + { + name: 'Types declaration and references', + scope: [ + 'support.class', + 'support.type', + 'entity.name.type', + 'entity.name.namespace', + 'entity.other.attribute', + 'entity.name.scope-resolution', + 'entity.name.class', + 'storage.type.numeric.go', + 'storage.type.byte.go', + 'storage.type.boolean.go', + 'storage.type.string.go', + 'storage.type.uintptr.go', + 'storage.type.error.go', + 'storage.type.rune.go', + 'storage.type.cs', + 'storage.type.generic.cs', + 'storage.type.modifier.cs', + 'storage.type.variable.cs', + 'storage.type.annotation.java', + 'storage.type.generic.java', + 'storage.type.java', + 'storage.type.object.array.java', + 'storage.type.primitive.array.java', + 'storage.type.primitive.java', + 'storage.type.token.java', + 'storage.type.groovy', + 'storage.type.annotation.groovy', + 'storage.type.parameters.groovy', + 'storage.type.generic.groovy', + 'storage.type.object.array.groovy', + 'storage.type.primitive.array.groovy', + 'storage.type.primitive.groovy', + ], + settings: { + foreground: '#267f99', + }, + }, + { + name: 'Types declaration and references, TS grammar specific', + scope: [ + 'meta.type.cast.expr', + 'meta.type.new.expr', + 'support.constant.math', + 'support.constant.dom', + 'support.constant.json', + 'entity.other.inherited-class', + ], + settings: { + foreground: '#267f99', + }, + }, + { + name: 'Control flow / Special keywords', + scope: [ + 'keyword.control', + 'source.cpp keyword.operator.new', + 'source.cpp keyword.operator.delete', + 'keyword.other.using', + 'keyword.other.operator', + 'entity.name.operator', + ], + settings: { + foreground: '#AF00DB', + }, + }, + { + name: 'Variable and parameter name', + scope: [ + 'variable', + 'meta.definition.variable.name', + 'support.variable', + 'entity.name.variable', + 'constant.other.placeholder', + ], + settings: { + foreground: '#001080', + }, + }, + { + name: 'Constants and enums', + scope: ['variable.other.constant', 'variable.other.enummember'], + settings: { + foreground: '#0070C1', + }, + }, + { + name: 'Object keys, TS grammar specific', + scope: ['meta.object-literal.key'], + settings: { + foreground: '#001080', + }, + }, + { + name: 'CSS property value', + scope: [ + 'support.constant.property-value', + 'support.constant.font-name', + 'support.constant.media-type', + 'support.constant.media', + 'constant.other.color.rgb-value', + 'constant.other.rgb-value', + 'support.constant.color', + ], + settings: { + foreground: '#0451a5', + }, + }, + { + name: 'Regular expression groups', + scope: [ + 'punctuation.definition.group.regexp', + 'punctuation.definition.group.assertion.regexp', + 'punctuation.definition.character-class.regexp', + 'punctuation.character.set.begin.regexp', + 'punctuation.character.set.end.regexp', + 'keyword.operator.negation.regexp', + 'support.other.parenthesis.regexp', + ], + settings: { + foreground: '#d16969', + }, + }, + { + scope: [ + 'constant.character.character-class.regexp', + 'constant.other.character-class.set.regexp', + 'constant.other.character-class.regexp', + 'constant.character.set.regexp', + ], + settings: { + foreground: '#811f3f', + }, + }, + { + scope: 'keyword.operator.quantifier.regexp', + settings: { + foreground: '#000000', + }, + }, + { + scope: ['keyword.operator.or.regexp', 'keyword.control.anchor.regexp'], + settings: { + foreground: '#EE0000', + }, + }, + { + scope: 'constant.character', + settings: { + foreground: '#0000ff', + }, + }, + { + scope: 'constant.character.escape', + settings: { + foreground: '#EE0000', + }, + }, + { + scope: 'entity.name.label', + settings: { + foreground: '#000000', + }, + }, + ], + semanticHighlighting: true, + semanticTokenColors: { + newOperator: '#AF00DB', + stringLiteral: '#a31515', + customLiteral: '#795E26', + numberLiteral: '#098658', + }, + colors: { + 'checkbox.border': '#919191', + 'editor.background': '#f8f7fcff', + 'editor.foreground': '#000000', + 'editor.inactiveSelectionBackground': '#E5EBF1', + 'editorIndentGuide.background': '#D3D3D3', + 'editorIndentGuide.activeBackground': '#939393', + 'editor.selectionHighlightBackground': '#ADD6FF80', + 'editorSuggestWidget.background': '#F3F3F3', + 'activityBarBadge.background': '#007ACC', + 'sideBarTitle.foreground': '#6F6F6F', + 'list.hoverBackground': '#E8E8E8', + 'menu.border': '#D4D4D4', + 'input.placeholderForeground': '#767676', + 'searchEditor.textInputBorder': '#CECECE', + 'settings.textInputBorder': '#CECECE', + 'settings.numberInputBorder': '#CECECE', + 'statusBarItem.remoteForeground': '#FFF', + 'statusBarItem.remoteBackground': '#16825D', + 'ports.iconRunningProcessForeground': '#369432', + 'sideBarSectionHeader.background': '#0000', + 'sideBarSectionHeader.border': '#61616130', + 'tab.lastPinnedBorder': '#61616130', + 'notebook.cellBorderColor': '#E8E8E8', + 'notebook.selectedCellBackground': '#c8ddf150', + 'statusBarItem.errorBackground': '#c72e0f', + 'list.activeSelectionIconForeground': '#FFF', + 'list.focusAndSelectionOutline': '#90C2F9', + 'terminal.inactiveSelectionBackground': '#E5EBF1', + 'widget.border': '#d4d4d4', + 'tab.border': '#e7e9eeff', + 'editorGroupHeader.tabsBackground': '#ffffffff', + 'tab.inactiveBackground': '#e7e9eeff', + }, +} diff --git a/src/styles/global.css b/src/styles/global.css index 6c4f2b23a..5c844f2ca 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -113,4 +113,10 @@ table tbody tr:nth-of-type(even) { hr { border: 1px solid #E7E9EE; border-bottom: none; +} + +.ch-codeblock, .ch-codegroup, .ch-preview { + box-shadow: none !important; + border-radius: 4px !important; + border: 1px solid #e7e9ee; } \ No newline at end of file From e057f3b99373b48e4b2a308bf840e33a84030871 Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Wed, 12 Jul 2023 20:06:07 -0300 Subject: [PATCH 02/11] fix(mytheme): fix component declaration --- src/pages/docs/guides/myTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/docs/guides/myTheme.ts b/src/pages/docs/guides/myTheme.ts index 7c2c6c4e1..90f4c70f1 100644 --- a/src/pages/docs/guides/myTheme.ts +++ b/src/pages/docs/guides/myTheme.ts @@ -1,4 +1,4 @@ -export const myTheme = { +export default { $schema: 'vscode://schemas/color-theme', name: 'light-plus', tokenColors: [ From 6d682a281405a4257556876e1a963dc45e4ea7e6 Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Wed, 12 Jul 2023 20:08:56 -0300 Subject: [PATCH 03/11] fix(mytheme): fix import --- src/pages/docs/guides/[slug].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx index 42be0051a..55a27571b 100644 --- a/src/pages/docs/guides/[slug].tsx +++ b/src/pages/docs/guides/[slug].tsx @@ -13,7 +13,7 @@ import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote' import remarkMermaid from 'utils/remark_plugins/mermaid' import { remarkCodeHike } from '@code-hike/mdx' -import { myTheme } from './myTheme' +import myTheme from './myTheme' import remarkImages from 'utils/remark_plugins/plaiceholder' import { Box, Flex, Text } from '@vtex/brand-ui' From c947ffa35772d6bda738bacada0c3027d532db18 Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Wed, 12 Jul 2023 20:24:19 -0300 Subject: [PATCH 04/11] fix(codehiketheme): change folder and file name --- src/pages/docs/guides/[slug].tsx | 2 +- src/{pages/docs/guides/myTheme.ts => styles/codeHikeTheme.ts} | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) rename src/{pages/docs/guides/myTheme.ts => styles/codeHikeTheme.ts} (99%) diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx index 55a27571b..7f7b9384c 100644 --- a/src/pages/docs/guides/[slug].tsx +++ b/src/pages/docs/guides/[slug].tsx @@ -13,7 +13,7 @@ import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote' import remarkMermaid from 'utils/remark_plugins/mermaid' import { remarkCodeHike } from '@code-hike/mdx' -import myTheme from './myTheme' +import myTheme from 'styles/codeHikeTheme' import remarkImages from 'utils/remark_plugins/plaiceholder' import { Box, Flex, Text } from '@vtex/brand-ui' diff --git a/src/pages/docs/guides/myTheme.ts b/src/styles/codeHikeTheme.ts similarity index 99% rename from src/pages/docs/guides/myTheme.ts rename to src/styles/codeHikeTheme.ts index 90f4c70f1..7c795ccde 100644 --- a/src/pages/docs/guides/myTheme.ts +++ b/src/styles/codeHikeTheme.ts @@ -1,4 +1,4 @@ -export default { +const myTheme = { $schema: 'vscode://schemas/color-theme', name: 'light-plus', tokenColors: [ @@ -605,3 +605,5 @@ export default { 'tab.inactiveBackground': '#e7e9eeff', }, } + +export default myTheme From 958c054a8ea7bbbd9999fd1ea32939489cbb63ba Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Mon, 24 Jul 2023 19:13:13 -0300 Subject: [PATCH 05/11] style(global): update codehike styles --- src/pages/docs/guides/[slug].tsx | 16 +++++++++---- src/styles/global.css | 39 ++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 5 deletions(-) diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx index 7f7b9384c..b45b8a89e 100644 --- a/src/pages/docs/guides/[slug].tsx +++ b/src/pages/docs/guides/[slug].tsx @@ -11,7 +11,6 @@ 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 myTheme from 'styles/codeHikeTheme' import remarkImages from 'utils/remark_plugins/plaiceholder' @@ -70,6 +69,7 @@ interface Props { } isListed: boolean branch: string + hideTOC: boolean } const DocumentationPage: NextPage = ({ @@ -86,6 +86,7 @@ const DocumentationPage: NextPage = ({ breadcumbList, branch, sectionSelected, + hideTOC, }) => { const headings: Item[] = headingList const { setBranchPreview } = useContext(PreviewContext) @@ -153,10 +154,12 @@ const DocumentationPage: NextPage = ({ )} - - - - + {!hideTOC && ( + + + + + )} @@ -301,6 +304,8 @@ export const getStaticProps: GetStaticProps = async ({ }) ) + const hideTOC = serialized.frontmatter?.hideTOC === true + const docsListSlug = jp.query( sidebarfallback, `$..[?(@.type=='markdown')]..slug` @@ -373,6 +378,7 @@ export const getStaticProps: GetStaticProps = async ({ isListed, breadcumbList, branch, + hideTOC, }, } } catch (error) { diff --git a/src/styles/global.css b/src/styles/global.css index 5c844f2ca..4b5538de9 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -119,4 +119,43 @@ hr { box-shadow: none !important; border-radius: 4px !important; border: 1px solid #e7e9ee; +} + +.ch-spotlight-tab:hover{ + cursor: pointer; + box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1); + border: 1px solid #e3e3e3 +} + +.ch-spotlight-tab[data-selected]{ + border-color: #e31c58; + box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1); +} + +.ch-spotlight-tab h2, .ch-spotlight-tab h3{ + margin: 10px 0 !important; +} + +.ch-spotlight-tab{ + padding: 0 0.8em !important; +} + +.ch-spotlight-sticker, .ch-scrollycoding-sticker{ + width: 45% !important; + height: 100vh; +} + +.ch-codegroup{ + width: 100% !important +} + +.ch-codegroup { + margin: 8px; + --the-api-key: "{accountName}" +} + +.placeholder::after { + content: var(--the-api-key); + outline: 2px solid royalblue; + } \ No newline at end of file From 0a60965b221205b110dd3e59c989c552800a92f6 Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Wed, 16 Aug 2023 12:35:33 -0300 Subject: [PATCH 06/11] chore(markdown-preview): (temp) remove auth --- src/pages/editor/markdown-preview.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/editor/markdown-preview.tsx b/src/pages/editor/markdown-preview.tsx index e0e00c8f2..0b2cb9c55 100644 --- a/src/pages/editor/markdown-preview.tsx +++ b/src/pages/editor/markdown-preview.tsx @@ -3,7 +3,6 @@ import Head from 'next/head' import { Box, Text, Flex } from '@vtex/brand-ui' import CopyButton from 'components/copy-button' import ResizeIcon from 'components/icons/resize-icon' -import Auth from 'components/auth' import PageHeader from 'components/page-header' import type { Page } from 'utils/typings/types' import image from '../../../public/images/editor.png' @@ -192,7 +191,7 @@ const MarkdownPreviewPage: Page = () => { }, [documentContent]) return ( - + <> Markdown Preview @@ -275,7 +274,7 @@ const MarkdownPreviewPage: Page = () => { - + ) } From a4aa47e44cae76298eb8a7dbeb67af5fd9c9ede5 Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Wed, 16 Aug 2023 13:14:26 -0300 Subject: [PATCH 07/11] chore(global.css): update scrollycoding styles --- next.config.js | 1 + src/styles/global.css | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/next.config.js b/next.config.js index e82df1fb6..2513b59ea 100644 --- a/next.config.js +++ b/next.config.js @@ -24,6 +24,7 @@ const nextConfig = { config.experiments = { ...config.experiments, ...{ topLevelAwait: true } } // this will just update topLevelAwait property of config.experiments // config.experiments.topLevelAwait = true + config.resolve.fallback = { fs: false } config.module.rules.push({ test: /\.pem/, use: [ diff --git a/src/styles/global.css b/src/styles/global.css index 4b5538de9..05b137229 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -121,22 +121,22 @@ hr { border: 1px solid #e7e9ee; } -.ch-spotlight-tab:hover{ +.ch-spotlight-tab:hover, .ch-scrollycoding-step-content:hover{ cursor: pointer; box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1); border: 1px solid #e3e3e3 } -.ch-spotlight-tab[data-selected]{ +.ch-spotlight-tab[data-selected], .ch-scrollycoding-step-content[data-selected]{ border-color: #e31c58; box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1); } -.ch-spotlight-tab h2, .ch-spotlight-tab h3{ +.ch-spotlight-tab *, .ch-scrollycoding-step-content *{ margin: 10px 0 !important; } -.ch-spotlight-tab{ +.ch-spotlight-tab, .ch-scrollycoding-step-content{ padding: 0 0.8em !important; } From 8f8b3c707064315d010fe85a098921a1026954ca Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Wed, 16 Aug 2023 16:26:25 -0300 Subject: [PATCH 08/11] chore(markdown-preview): enable codehike preview --- next.config.js | 1 - src/pages/api/serialize.ts | 74 +++++++++++++++++++++++++++ src/pages/editor/markdown-preview.tsx | 55 ++++++-------------- src/styles/global.css | 2 +- 4 files changed, 92 insertions(+), 40 deletions(-) create mode 100644 src/pages/api/serialize.ts diff --git a/next.config.js b/next.config.js index 2513b59ea..e82df1fb6 100644 --- a/next.config.js +++ b/next.config.js @@ -24,7 +24,6 @@ const nextConfig = { config.experiments = { ...config.experiments, ...{ topLevelAwait: true } } // this will just update topLevelAwait property of config.experiments // config.experiments.topLevelAwait = true - config.resolve.fallback = { fs: false } config.module.rules.push({ test: /\.pem/, use: [ diff --git a/src/pages/api/serialize.ts b/src/pages/api/serialize.ts new file mode 100644 index 000000000..51a4d141e --- /dev/null +++ b/src/pages/api/serialize.ts @@ -0,0 +1,74 @@ +import { serialize } from 'next-mdx-remote/serialize' +import { NextApiRequest, NextApiResponse } from 'next' +import escapeCurlyBraces from 'utils/escapeCurlyBraces' +import replaceHTMLBlocks from 'utils/replaceHTMLBlocks' +import replaceMagicBlocks from 'utils/replaceMagicBlocks' +import remarkGFM from 'remark-gfm' +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 myTheme from 'styles/codeHikeTheme' +import remarkImages from 'utils/remark_plugins/client-image' + +async function serializeDocument(document: string) { + let docbefore = document + const { result, error } = escapeCurlyBraces(docbefore, 'client') + if (error) return { serialized: null, error } + docbefore = result + docbefore = replaceHTMLBlocks(docbefore) + docbefore = await replaceMagicBlocks(docbefore) + let serialized, serializedError + try { + serialized = await serialize(docbefore, { + parseFrontmatter: true, + mdxOptions: { + remarkPlugins: [ + [ + remarkCodeHike, + { + autoImport: false, + showCopyButton: true, + theme: myTheme, + }, + ], + remarkGFM, + remarkImages, + remarkBlockquote, + remarkMermaid, + ], + rehypePlugins: [ + [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }], + ], + useDynamicImport: true, + format: 'mdx', + development: process.env.NODE_ENV === 'development', + }, + }) + serialized = JSON.parse(JSON.stringify(serialized)) + } catch (e) { + serializedError = (e as Error).message + } + return { serialized, error: serializedError || '' } +} + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { + if (req.method === 'POST') { + const document = req.body.document // Get the document from the request body + + try { + const result = await serializeDocument(document) + res.status(200).json(result) + } catch (error) { + res + .status(500) + .json({ error: 'An error occurred while serializing the document.' }) + } + } else { + res.status(405).end() // Method Not Allowed + } +} diff --git a/src/pages/editor/markdown-preview.tsx b/src/pages/editor/markdown-preview.tsx index 0b2cb9c55..afb98cab9 100644 --- a/src/pages/editor/markdown-preview.tsx +++ b/src/pages/editor/markdown-preview.tsx @@ -8,18 +8,6 @@ import type { Page } from 'utils/typings/types' import image from '../../../public/images/editor.png' import MarkdownRenderer from 'components/markdown-renderer' -import { serialize } from 'next-mdx-remote/serialize' - -import remarkGFM from 'remark-gfm' -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 escapeCurlyBraces from 'utils/escapeCurlyBraces' -import replaceHTMLBlocks from 'utils/replaceHTMLBlocks' -import replaceMagicBlocks from 'utils/replaceMagicBlocks' -import remarkImages from 'utils/remark_plugins/client-image' - import styles from 'styles/document-editor' import { MDXRemoteSerializeResult } from 'next-mdx-remote' @@ -88,38 +76,28 @@ Text Template: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ri >ℹ️ This is an Info callout. ` -async function serializing( +async function renderMDXContent( document: string ): Promise<{ serialized: MDXRemoteSerializeResult | null; error: string }> { - let docbefore = document - const { result, error } = escapeCurlyBraces(docbefore, 'client') - if (error) return { serialized: null, error } - docbefore = result - docbefore = replaceHTMLBlocks(docbefore) - docbefore = await replaceMagicBlocks(docbefore) - let serialized, serializedError try { - serialized = await serialize(docbefore, { - parseFrontmatter: true, - mdxOptions: { - remarkPlugins: [ - remarkGFM, - remarkImages, - remarkBlockquote, - remarkMermaid, - ], - rehypePlugins: [ - [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }], - ], - format: 'mdx', - development: process.env.NODE_ENV === 'development', + const response = await fetch('/api/serialize', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', }, + body: JSON.stringify({ document }), }) - serialized = JSON.parse(JSON.stringify(serialized)) + + if (response.ok) { + const { serialized, error } = await response.json() + return { serialized, error } + } else { + return { serialized: null, error: '' } + } } catch (e) { - serializedError = (e as Error).message + const serializedError = (e as Error).message + return { serialized: null, error: serializedError || '' } } - return { serialized, error: serializedError || '' } } const MarkdownPreviewPage: Page = () => { @@ -184,7 +162,8 @@ const MarkdownPreviewPage: Page = () => { if (!active) { return } - const { serialized, error } = await serializing(documentContent) + const { serialized, error } = await renderMDXContent(documentContent) + setError(error) setSerializedDoc(serialized) } diff --git a/src/styles/global.css b/src/styles/global.css index 05b137229..7f904c318 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -132,7 +132,7 @@ hr { box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1); } -.ch-spotlight-tab *, .ch-scrollycoding-step-content *{ +.ch-spotlight-tab h2, .ch-spotlight-tab h3{ margin: 10px 0 !important; } From 8ac35fc686f99a37b49502bb88af05e7d2abcd4c Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Fri, 27 Oct 2023 19:54:48 -0300 Subject: [PATCH 09/11] style(guides): update codehike theme --- src/pages/docs/guides/[slug].tsx | 10 ++++++---- src/styles/documentation-page.ts | 3 --- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx index 31b598a51..e555b1746 100644 --- a/src/pages/docs/guides/[slug].tsx +++ b/src/pages/docs/guides/[slug].tsx @@ -12,7 +12,6 @@ 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 myTheme from 'styles/codeHikeTheme' import remarkImages from 'utils/remark_plugins/plaiceholder' import { Box, Flex, Text } from '@vtex/brand-ui' @@ -186,8 +185,8 @@ export const getStaticProps: GetStaticProps = async ({ const previewBranch = preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') ? JSON.parse(JSON.stringify(previewData)).branch - : 'test/codehike' - const branch = preview ? previewBranch : 'test/codehike' + : 'test/codehike-doc' + const branch = preview ? previewBranch : 'test/codehike-doc' const slug = params?.slug as string const docsPaths = process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD @@ -241,7 +240,10 @@ export const getStaticProps: GetStaticProps = async ({ { autoImport: false, showCopyButton: true, - theme: myTheme, + lineNumbers: true, + skipLanguages: ['mermaid'], + staticMediaQuery: 'not screen, (max-width: 850px)', + theme: 'poimandres', }, ], remarkGFM, diff --git a/src/styles/documentation-page.ts b/src/styles/documentation-page.ts index f8c10a254..c8bb42ae2 100644 --- a/src/styles/documentation-page.ts +++ b/src/styles/documentation-page.ts @@ -62,9 +62,6 @@ const articleBox: SxStyleProp = { strong: { fontWeight: '600', }, - '*': { - maxWidth: '100%', - }, } const contentContainer: SxStyleProp = { From eafdf19e966adb819723e5f5762d8521bef8289c Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Tue, 31 Oct 2023 18:00:58 -0300 Subject: [PATCH 10/11] chore(markdown-preview): undo changes to markdown-preview --- src/pages/api/serialize.ts | 74 --------------------------- src/pages/editor/markdown-preview.tsx | 60 +++++++++++++++------- 2 files changed, 41 insertions(+), 93 deletions(-) delete mode 100644 src/pages/api/serialize.ts diff --git a/src/pages/api/serialize.ts b/src/pages/api/serialize.ts deleted file mode 100644 index 51a4d141e..000000000 --- a/src/pages/api/serialize.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { serialize } from 'next-mdx-remote/serialize' -import { NextApiRequest, NextApiResponse } from 'next' -import escapeCurlyBraces from 'utils/escapeCurlyBraces' -import replaceHTMLBlocks from 'utils/replaceHTMLBlocks' -import replaceMagicBlocks from 'utils/replaceMagicBlocks' -import remarkGFM from 'remark-gfm' -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 myTheme from 'styles/codeHikeTheme' -import remarkImages from 'utils/remark_plugins/client-image' - -async function serializeDocument(document: string) { - let docbefore = document - const { result, error } = escapeCurlyBraces(docbefore, 'client') - if (error) return { serialized: null, error } - docbefore = result - docbefore = replaceHTMLBlocks(docbefore) - docbefore = await replaceMagicBlocks(docbefore) - let serialized, serializedError - try { - serialized = await serialize(docbefore, { - parseFrontmatter: true, - mdxOptions: { - remarkPlugins: [ - [ - remarkCodeHike, - { - autoImport: false, - showCopyButton: true, - theme: myTheme, - }, - ], - remarkGFM, - remarkImages, - remarkBlockquote, - remarkMermaid, - ], - rehypePlugins: [ - [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }], - ], - useDynamicImport: true, - format: 'mdx', - development: process.env.NODE_ENV === 'development', - }, - }) - serialized = JSON.parse(JSON.stringify(serialized)) - } catch (e) { - serializedError = (e as Error).message - } - return { serialized, error: serializedError || '' } -} - -export default async function handler( - req: NextApiRequest, - res: NextApiResponse -) { - if (req.method === 'POST') { - const document = req.body.document // Get the document from the request body - - try { - const result = await serializeDocument(document) - res.status(200).json(result) - } catch (error) { - res - .status(500) - .json({ error: 'An error occurred while serializing the document.' }) - } - } else { - res.status(405).end() // Method Not Allowed - } -} diff --git a/src/pages/editor/markdown-preview.tsx b/src/pages/editor/markdown-preview.tsx index afb98cab9..e0e00c8f2 100644 --- a/src/pages/editor/markdown-preview.tsx +++ b/src/pages/editor/markdown-preview.tsx @@ -3,11 +3,24 @@ import Head from 'next/head' import { Box, Text, Flex } from '@vtex/brand-ui' import CopyButton from 'components/copy-button' import ResizeIcon from 'components/icons/resize-icon' +import Auth from 'components/auth' import PageHeader from 'components/page-header' import type { Page } from 'utils/typings/types' import image from '../../../public/images/editor.png' import MarkdownRenderer from 'components/markdown-renderer' +import { serialize } from 'next-mdx-remote/serialize' + +import remarkGFM from 'remark-gfm' +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 escapeCurlyBraces from 'utils/escapeCurlyBraces' +import replaceHTMLBlocks from 'utils/replaceHTMLBlocks' +import replaceMagicBlocks from 'utils/replaceMagicBlocks' +import remarkImages from 'utils/remark_plugins/client-image' + import styles from 'styles/document-editor' import { MDXRemoteSerializeResult } from 'next-mdx-remote' @@ -76,28 +89,38 @@ Text Template: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ri >ℹ️ This is an Info callout. ` -async function renderMDXContent( +async function serializing( document: string ): Promise<{ serialized: MDXRemoteSerializeResult | null; error: string }> { + let docbefore = document + const { result, error } = escapeCurlyBraces(docbefore, 'client') + if (error) return { serialized: null, error } + docbefore = result + docbefore = replaceHTMLBlocks(docbefore) + docbefore = await replaceMagicBlocks(docbefore) + let serialized, serializedError try { - const response = await fetch('/api/serialize', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', + serialized = await serialize(docbefore, { + parseFrontmatter: true, + mdxOptions: { + remarkPlugins: [ + remarkGFM, + remarkImages, + remarkBlockquote, + remarkMermaid, + ], + rehypePlugins: [ + [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }], + ], + format: 'mdx', + development: process.env.NODE_ENV === 'development', }, - body: JSON.stringify({ document }), }) - - if (response.ok) { - const { serialized, error } = await response.json() - return { serialized, error } - } else { - return { serialized: null, error: '' } - } + serialized = JSON.parse(JSON.stringify(serialized)) } catch (e) { - const serializedError = (e as Error).message - return { serialized: null, error: serializedError || '' } + serializedError = (e as Error).message } + return { serialized, error: serializedError || '' } } const MarkdownPreviewPage: Page = () => { @@ -162,15 +185,14 @@ const MarkdownPreviewPage: Page = () => { if (!active) { return } - const { serialized, error } = await renderMDXContent(documentContent) - + const { serialized, error } = await serializing(documentContent) setError(error) setSerializedDoc(serialized) } }, [documentContent]) return ( - <> + Markdown Preview @@ -253,7 +275,7 @@ const MarkdownPreviewPage: Page = () => { - + ) } From fafa8acf0bd5f7b3c35e85162f2720f75e47257f Mon Sep 17 00:00:00 2001 From: Carolina Menezes Date: Tue, 31 Oct 2023 18:45:07 -0300 Subject: [PATCH 11/11] feat(pages): use code hike in all page types --- src/components/code-block/index.tsx | 2 ++ .../markdown-renderer/components.tsx | 3 +-- src/pages/docs/apps/[slug]/[child].tsx | 13 +++++++++++++ src/pages/docs/apps/[slug]/index.tsx | 13 +++++++++++++ src/pages/docs/guides/[slug].tsx | 4 ++-- src/pages/updates/release-notes/[slug].tsx | 19 ++++++++++++++++++- 6 files changed, 49 insertions(+), 5 deletions(-) diff --git a/src/components/code-block/index.tsx b/src/components/code-block/index.tsx index f63248987..ffa509ff3 100644 --- a/src/components/code-block/index.tsx +++ b/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 diff --git a/src/components/markdown-renderer/components.tsx b/src/components/markdown-renderer/components.tsx index 7444525a7..e93427fd1 100644 --- a/src/components/markdown-renderer/components.tsx +++ b/src/components/markdown-renderer/components.tsx @@ -7,7 +7,6 @@ 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' @@ -215,7 +214,7 @@ export default { if (props.className && props.className === 'mermaid') return - return + return 
   },
   h2: ({ node, ...props }: Component) => {
     const { activeItem, setActiveItem, goToPreviousItem } =
diff --git a/src/pages/docs/apps/[slug]/[child].tsx b/src/pages/docs/apps/[slug]/[child].tsx
index d50c363c9..6219e022a 100644
--- a/src/pages/docs/apps/[slug]/[child].tsx
+++ b/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,
         },
       })
diff --git a/src/pages/docs/apps/[slug]/index.tsx b/src/pages/docs/apps/[slug]/index.tsx
index aba4df4a3..e88088bb4 100644
--- a/src/pages/docs/apps/[slug]/index.tsx
+++ b/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,
         },
       })
diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx
index e555b1746..59ec3e3a5 100644
--- a/src/pages/docs/guides/[slug].tsx
+++ b/src/pages/docs/guides/[slug].tsx
@@ -185,8 +185,8 @@ export const getStaticProps: GetStaticProps = async ({
   const previewBranch =
     preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch')
       ? JSON.parse(JSON.stringify(previewData)).branch
-      : 'test/codehike-doc'
-  const branch = preview ? previewBranch : 'test/codehike-doc'
+      : 'main'
+  const branch = preview ? previewBranch : 'main'
   const slug = params?.slug as string
   const docsPaths =
     process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD
diff --git a/src/pages/updates/release-notes/[slug].tsx b/src/pages/updates/release-notes/[slug].tsx
index 9998cc1c8..7a96a225a 100644
--- a/src/pages/updates/release-notes/[slug].tsx
+++ b/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',
       },
     })