fix: Fix code block hydration errors (#11046)

getsentry · Aug 12, 2024 · 25def56 · 25def56
1 parent 1a28c3c
commit 25def56
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 94 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -28,7 +28,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
       <body className={`${rubik.variable} text-darkPurple`}>
         <Theme accentColor="iris" grayColor="sand" radius="large" scaling="95%">
           {children}

diff --git a/mdx-components.tsx b/mdx-components.tsx
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,5 @@
 const {redirects} = require('./redirects.js');
 
-const createMDX = require('@next/mdx');
-const remarkPrism = require('remark-prism');
 const {codecovWebpackPlugin} = require('@codecov/webpack-plugin');
 const {withSentryConfig} = require('@sentry/nextjs');
 
@@ -33,15 +31,7 @@ const nextConfig = {
   redirects,
 };
 
-const withMDX = createMDX({
-  options: {
-    remarkPlugins: [remarkPrism],
-  },
-});
-
-module.exports = withMDX(nextConfig);
-
-module.exports = withSentryConfig(module.exports, {
+module.exports = withSentryConfig(nextConfig, {
   org: 'sentry',
   project: 'docs',
 

diff --git a/src/components/apiExamples/apiExamples.module.scss b/src/components/apiExamples/apiExamples.module.scss
@@ -0,0 +1,30 @@
+.api-block-example {
+  border: none;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 0.8rem;
+  padding: 0.75rem;
+}
+
+.api-block-example.request {
+  color: var(--white);
+  background-color: #2d2d2d;
+  border-radius: 4px;
+}
+
+.api-block-example.response {
+  background: #2d2d2d;
+  color: var(--white);
+}
+
+.api-params dd {
+  padding: 0;
+
+  p {
+    margin: 0;
+  }
+}
diff --git a/src/components/apiExamples.tsx → src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples.tsx → src/components/apiExamples/apiExamples.tsx
@@ -1,21 +1,25 @@
 'use client';
 
-// prismjs must be loaded before loading prism-json
-// eslint-disable-next-line simple-import-sort/imports
-import Prism from 'prismjs';
-import 'prismjs/components/prism-json';
-
-import {Fragment, useState} from 'react';
+import {Fragment, useEffect, useRef, useState} from 'react';
 
 import {type API} from 'sentry-docs/build/resolveOpenAPI';
 
+import styles from './apiExamples.module.scss';
+
 type ExampleProps = {
   api: API;
   selectedResponse: number;
   selectedTabView: number;
 };
 
+const requestStyles = `${styles['api-block-example']} ${styles.request}`;
+const responseStyles = `${styles['api-block-example']} ${styles.response}`;
+
+// overwriting global code block font size
+const jsonCodeBlockStyles = `!text-[0.8rem] language-json`;
+
 function Example({api, selectedTabView, selectedResponse}: ExampleProps) {
+  const ref = useRef(null);
   let exampleJson: any;
   if (api.responses[selectedResponse].content?.examples) {
     exampleJson = Object.values(
@@ -25,29 +29,39 @@ function Example({api, selectedTabView, selectedResponse}: ExampleProps) {
     exampleJson = api.responses[selectedResponse].content?.example;
   }
 
+  // load prism dynamically for these codeblocks,
+  // otherwise the highlighting applies globally
+  useEffect(() => {
+    (async () => {
+      const {highlightAllUnder} = await import('prismjs');
+      await import('prismjs/components/prism-json');
+      if (ref.current) {
+        highlightAllUnder(ref.current);
+      }
+    })();
+  }, [selectedResponse, selectedTabView]);
+
   return (
-    <pre className="api-block-example response">
+    <pre className={responseStyles} ref={ref}>
       {selectedTabView === 0 &&
         (exampleJson ? (
           <code
+            className={jsonCodeBlockStyles}
             dangerouslySetInnerHTML={{
-              __html: Prism.highlight(
-                JSON.stringify(exampleJson, null, 2),
-                Prism.languages.json,
-                'json'
-              ),
+              __html: JSON.stringify(exampleJson, null, 2),
             }}
           />
         ) : (
           strFormat(api.responses[selectedResponse].description)
         ))}
       {selectedTabView === 1 && (
         <code
+          className={jsonCodeBlockStyles}
           dangerouslySetInnerHTML={{
-            __html: Prism.highlight(
-              JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2),
-              Prism.languages.json,
-              'json'
+            __html: JSON.stringify(
+              api.responses[selectedResponse].content?.schema,
+              null,
+              2
             ),
           }}
         />
@@ -101,7 +115,7 @@ export function ApiExamples({api}: Props) {
   return (
     <Fragment>
       <div className="api-block">
-        <pre className="api-block-example request">{apiExample.join(' \\\n')}</pre>
+        <pre className={requestStyles}>{apiExample.join(' \\\n')}</pre>
       </div>
       <div className="api-block">
         <div className="api-block-header response">

diff --git a/src/components/apiPage/index.tsx b/src/components/apiPage/index.tsx
@@ -9,7 +9,7 @@ import remarkCodeTitles from 'sentry-docs/remark-code-title';
 
 import './styles.scss';
 
-import {ApiExamples} from '../apiExamples';
+import {ApiExamples} from '../apiExamples/apiExamples';
 import {DocPage} from '../docPage';
 import {SmartLink} from '../smartLink';
 

diff --git a/src/components/apiPage/styles.scss b/src/components/apiPage/styles.scss
@@ -87,37 +87,6 @@
   color: var(--white);
 }
 
-.api-block-example {
-  border: none;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 0.8rem;
-  padding: 0.75rem;
-}
-
-.api-block-example.request {
-  color: var(--white);
-  background-color: #2d2d2d;
-  border-radius: 4px;
-}
-
-.api-block-example.response {
-  background: #2d2d2d;
-  color: var(--white);
-}
-
-.api-params dd {
-  padding: 0;
-
-  p {
-    margin: 0;
-  }
-}
-
 .api-params dt {
   display: flex;
   flex-direction: row;

diff --git a/src/mdxOptions.js b/src/mdxOptions.js