remove prerendered response rest docs (#25652)

Author: rachmari

components/article/ClientSideHighlightJS.tsx

@@ -1,11 +1,16 @@
 import { useEffect } from 'react'
+import { useRouter } from 'next/router'
 import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
+import javascript from 'highlight.js/lib/languages/javascript'
+import hljsCurl from 'highlightjs-curl'
 
 // Add as needed. It's pretty cheap to add but please don't use
 // highlight.js import that loads all and everything.
 hljs.registerLanguage('json', json)
-const SUPPORTED_LANGUAGES = ['json']
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('curl', hljsCurl)
+const SUPPORTED_LANGUAGES = ['json', 'javascript', 'curl']
 
 // This is the selector we use for the first document.querySelectorAll()
 // to find the containers for `<code>` tags. Because it's s dataset
@@ -24,6 +29,8 @@ const CODE_ELEMENTS_PARENT_SELECTOR = '[data-highlight]'
 const CODE_SELECTOR = 'pre code'
 
 export default function ClientSideHighlightJS() {
+  const { asPath } = useRouter()
+
   useEffect(() => {
     // Hi Internet Explorer!
     // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#browser_compatibility
@@ -59,7 +66,7 @@ export default function ClientSideHighlightJS() {
         intersectionObserver.observe(element)
       }
     }
-  }, [])
+  }, [asPath])
 
   return null
 }

components/declarations.d.ts

@@ -2,3 +2,5 @@ declare module '*.scss' {
   const content: Record<string, string>
   export default content
 }
+
+declare module 'highlightjs-curl'

components/rest/CodeBlock.tsx

@@ -5,17 +5,12 @@ import styles from './CodeBlock.module.scss'
 type Props = {
   verb?: string
   codeBlock: string
-  setHTML?: boolean
+  highlight?: string
 }
 
-export function CodeBlock({ verb, codeBlock, setHTML = false }: Props) {
-  return setHTML ? (
-    <div
-      className={cx(styles.codeBlock, 'rounded')}
-      dangerouslySetInnerHTML={{ __html: codeBlock }}
-    />
-  ) : (
-    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')}>
+export function CodeBlock({ verb, codeBlock, highlight }: Props) {
+  return (
+    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')} data-highlight={highlight}>
       <code>
         {verb && (
           <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">

components/rest/RestCodeSamples.tsx

@@ -1,4 +1,4 @@
-import { xCodeSample } from './types'
+import type { xCodeSample } from './types'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { CodeBlock } from './CodeBlock'
 
@@ -34,8 +34,8 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
           sampleElements.push(
             <CodeBlock
               key={sample.lang + index}
-              codeBlock={sample.sourceHTML}
-              setHTML={true}
+              codeBlock={sample.source}
+              highlight={sample.lang === 'JavaScript' ? 'javascript' : 'curl'}
             ></CodeBlock>
           )
         }

components/rest/RestResponse.tsx

@@ -15,7 +15,7 @@ export function RestResponse({ responses }: Props) {
             <CodeBlock
               codeBlock={`Status: ${response.httpStatusCode} ${response.httpStatusMessage}`}
             />
-            <CodeBlock codeBlock={response.payload} setHTML={true} />
+            {response.payload ? <CodeBlock codeBlock={response.payload} highlight="json" /> : null}
           </div>
         )
       })}

components/rest/types.ts

@@ -39,7 +39,7 @@ export interface CodeResponse {
 
 export interface xCodeSample {
   lang: string
-  sourceHTML: string
+  source: string
 }
 
 export interface Preview {