remove prerendered response rest docs (github#25652)

Cyco8905 · Mar 4, 2022 · 9fd4fe0 · 9fd4fe0
1 parent 0d8bd53
commit 9fd4fe0
Show file tree

Hide file tree

Showing 17 changed files with 31,085 additions and 31,094 deletions.
diff --git a/components/article/ClientSideHighlightJS.tsx b/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
 }
diff --git a/components/declarations.d.ts b/components/declarations.d.ts
@@ -2,3 +2,5 @@ declare module '*.scss' {
   const content: Record<string, string>
   export default content
 }
+
+declare module 'highlightjs-curl'
diff --git a/components/rest/CodeBlock.tsx b/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">

diff --git a/components/rest/RestCodeSamples.tsx b/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>
           )
         }

diff --git a/components/rest/RestResponse.tsx b/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>
         )
       })}

diff --git a/components/rest/types.ts b/components/rest/types.ts
@@ -39,7 +39,7 @@ export interface CodeResponse {
 
 export interface xCodeSample {
   lang: string
-  sourceHTML: string
+  source: string
 }
 
 export interface Preview {

diff --git a/lib/rest/static/decorated/api.github.com.json b/lib/rest/static/decorated/api.github.com.json
diff --git a/lib/rest/static/decorated/ghes-3.0.json b/lib/rest/static/decorated/ghes-3.0.json
diff --git a/lib/rest/static/decorated/ghes-3.1.json b/lib/rest/static/decorated/ghes-3.1.json
diff --git a/lib/rest/static/decorated/ghes-3.2.json b/lib/rest/static/decorated/ghes-3.2.json
diff --git a/lib/rest/static/decorated/ghes-3.3.json b/lib/rest/static/decorated/ghes-3.3.json
diff --git a/lib/rest/static/decorated/ghes-3.4.json b/lib/rest/static/decorated/ghes-3.4.json
diff --git a/lib/rest/static/decorated/github.ae.json b/lib/rest/static/decorated/github.ae.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "hastscript": "^7.0.2",
     "helmet": "^4.6.0",
     "highlight.js": "11.2.0",
+    "highlightjs-curl": "^1.3.0",
     "highlightjs-graphql": "^1.0.2",
     "hot-shots": "^9.0.0",
     "html-entities": "^2.3.2",

diff --git a/script/rest/utils/operation.js b/script/rest/utils/operation.js
@@ -79,7 +79,6 @@ export default class Operation {
 
     await Promise.all([
       this.renderDescription(),
-      this.renderCodeSamples(),
       this.renderResponses(),
       this.renderParameterDescriptions(),
       this.renderBodyParameterDescriptions(),
@@ -100,19 +99,6 @@ export default class Operation {
     return this
   }
 
-  async renderCodeSamples() {
-    return Promise.all(
-      this['x-codeSamples'].map(async (sample) => {
-        const markdown = createCodeBlock(sample.source, sample.lang.toLowerCase())
-        sample.sourceHTML = await renderContent(markdown)
-
-        // Removing since we don't need this in the decorated files
-        delete sample.source
-        return sample
-      })
-    )
-  }
-
   async renderResponses() {
     // clone and delete this.responses so we can turn it into a clean array of objects
     const rawResponses = JSON.parse(JSON.stringify(this.responses))
@@ -187,9 +173,7 @@ export default class Operation {
               ? exampleSummary || responseDescription
               : exampleSummary || sentenceCase(exampleKey)
 
-          const payloadMarkdown = createCodeBlock(exampleValue, 'json')
-          cleanResponse.payload = await renderContent(payloadMarkdown)
-
+          cleanResponse.payload = JSON.stringify(exampleValue, null, 2)
           cleanResponses.push(cleanResponse)
         }
         return cleanResponses
@@ -411,12 +395,3 @@ async function getChildParamsGroup(param) {
     params: childParams,
   }
 }
-
-function createCodeBlock(input, language) {
-  // stringify JSON if needed
-  if (language === 'json' && typeof input !== 'string') {
-    input = JSON.stringify(input, null, 2)
-  }
-
-  return ['```' + language, input, '```'].join('\n')
-}
diff --git a/tests/unit/openapi-schema.js b/tests/unit/openapi-schema.js
@@ -57,12 +57,12 @@ describe('x-codeSamples for curl', () => {
   test('GET', () => {
     const operation = findOperation('GET', '/repos/{owner}/{repo}')
     expect(isPlainObject(operation)).toBe(true)
-    const { sourceHTML } = operation['x-codeSamples'].find((sample) => sample.lang === 'Shell')
+    const { source } = operation['x-codeSamples'].find((sample) => sample.lang === 'Shell')
     const expected =
-      '<pre><code class="hljs language-shell">curl \\\n' +
+      'curl \\\n' +
       '  -H "Accept: application/vnd.github.v3+json" \\\n' +
-      '  https://api.github.com/repos/octocat/hello-world</code></pre>'
-    expect(sourceHTML).toEqual(expected)
+      '  https://api.github.com/repos/octocat/hello-world'
+    expect(source).toEqual(expected)
   })
 
   test('operations with required preview headers match Shell examples', () => {
@@ -92,8 +92,8 @@ describe('x-codeSamples for @octokit/core.js', () => {
   test('GET', () => {
     const operation = findOperation('GET', '/repos/{owner}/{repo}')
     expect(isPlainObject(operation)).toBe(true)
-    const { sourceHTML } = operation['x-codeSamples'].find((sample) => sample.lang === 'JavaScript')
-    const plainText = sourceHTML.replace(/<[^>]+>/g, '').trim()
+    const { source } = operation['x-codeSamples'].find((sample) => sample.lang === 'JavaScript')
+    const plainText = source.replace(/<[^>]+>/g, '').trim()
     const expected = dedent`await octokit.request('GET /repos/{owner}/{repo}', {
       owner: 'octocat',
       repo: 'hello-world'
@@ -104,8 +104,8 @@ describe('x-codeSamples for @octokit/core.js', () => {
   test('POST', () => {
     const operation = findOperation('POST', '/repos/{owner}/{repo}/git/trees')
     expect(isPlainObject(operation)).toBe(true)
-    const { sourceHTML } = operation['x-codeSamples'].find((sample) => sample.lang === 'JavaScript')
-    const plainText = sourceHTML.replace(/<[^>]+>/g, '').trim()
+    const { source } = operation['x-codeSamples'].find((sample) => sample.lang === 'JavaScript')
+    const plainText = source.replace(/<[^>]+>/g, '').trim()
     const expected = dedent`await octokit.request('POST /repos/{owner}/{repo}/git/trees', {
       owner: 'octocat',
       repo: 'hello-world',
@@ -125,8 +125,8 @@ describe('x-codeSamples for @octokit/core.js', () => {
   test('PUT', () => {
     const operation = findOperation('PUT', '/authorizations/clients/{client_id}/{fingerprint}')
     expect(isPlainObject(operation)).toBe(true)
-    const { sourceHTML } = operation['x-codeSamples'].find((sample) => sample.lang === 'JavaScript')
-    const plainText = sourceHTML.replace(/<[^>]+>/g, '').trim()
+    const { source } = operation['x-codeSamples'].find((sample) => sample.lang === 'JavaScript')
+    const plainText = source.replace(/<[^>]+>/g, '').trim()
     const expected = dedent`await octokit.request('PUT /authorizations/clients/{client_id}/{fingerprint}', {
       client_id: 'client_id',
       fingerprint: 'fingerprint',