From c8038b2a412966bfa93a9168b6fea9c06791152d Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 16:17:54 +0100
Subject: [PATCH 01/11] hightlight api examples codeblocks server side using
 refactor

---
 package.json                                  |  3 +-
 .../apiExamples/apiExamples.module.scss       |  4 +-
 src/components/apiExamples/apiExamples.tsx    | 68 ++++++++++---------
 src/components/apiPage/styles.scss            |  2 +-
 .../codeBlock/code-blocks.module.scss         |  2 +-
 src/components/codeTabs.tsx                   |  2 +-
 src/components/docPage/type.scss              |  1 +
 yarn.lock                                     | 21 ++++++
 8 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index baab1f1ced3672..763b8e9181cc8c 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "esbuild": "^0.19.8",
     "framer-motion": "^10.12.16",
     "gray-matter": "^4.0.3",
+    "hast-util-to-jsx-runtime": "^2.3.2",
     "hastscript": "^8.0.0",
     "image-size": "^1.1.1",
     "js-cookie": "^3.0.5",
@@ -137,4 +138,4 @@
     "node": "20.11.0",
     "yarn": "1.22.21"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/apiExamples/apiExamples.module.scss b/src/components/apiExamples/apiExamples.module.scss
index 3a0a0213c0a888..0ff3395866ea2f 100644
--- a/src/components/apiExamples/apiExamples.module.scss
+++ b/src/components/apiExamples/apiExamples.module.scss
@@ -12,12 +12,12 @@
 
 .api-block-example.request {
   color: var(--white);
-  background-color: #2d2d2d;
+  background-color: var(--code-background);
   border-radius: 4px;
 }
 
 .api-block-example.response {
-  background: #2d2d2d;
+  background-color: var(--code-background);
   color: var(--white);
 }
 
diff --git a/src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples/apiExamples.tsx
index dfa9253c996b05..d6424cd42165e8 100644
--- a/src/components/apiExamples/apiExamples.tsx
+++ b/src/components/apiExamples/apiExamples.tsx
@@ -1,9 +1,21 @@
 'use client';
 
-import {Fragment, useEffect, useRef, useState} from 'react';
+import {Fragment, useState} from 'react';
+import {jsx, jsxs} from 'react/jsx-runtime';
+import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
+import bash from 'refractor/lang/bash.js';
+import javascript from 'refractor/lang/javascript.js';
+import json from 'refractor/lang/json.js';
+import {refractor} from 'refractor/lib/core.js';
 
 import {type API} from 'sentry-docs/build/resolveOpenAPI';
 
+refractor.register(json);
+refractor.register(javascript);
+refractor.register(bash);
+
+import {Nodes} from 'hastscript/lib/create-h';
+
 import styles from './apiExamples.module.scss';
 
 type ExampleProps = {
@@ -19,7 +31,6 @@ const responseStyles = `${styles['api-block-example']} ${styles.response}`;
 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(
@@ -29,42 +40,29 @@ 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={responseStyles} ref={ref}>
+    <pre className={responseStyles}>
       {selectedTabView === 0 &&
         (exampleJson ? (
-          <code
-            className={jsonCodeBlockStyles}
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(exampleJson, null, 2),
-            }}
-          />
+          <code className={jsonCodeBlockStyles}>
+            {toJsxRuntime(
+              refractor.highlight(JSON.stringify(exampleJson, null, 2), 'json') as Nodes,
+              {Fragment, jsx, jsxs}
+            )}
+          </code>
         ) : (
           strFormat(api.responses[selectedResponse].description)
         ))}
       {selectedTabView === 1 && (
-        <code
-          className={jsonCodeBlockStyles}
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(
-              api.responses[selectedResponse].content?.schema,
-              null,
-              2
-            ),
-          }}
-        />
+        <code className={jsonCodeBlockStyles}>
+          {toJsxRuntime(
+            refractor.highlight(
+              JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2),
+              'json'
+            ) as Nodes,
+            {Fragment, jsx, jsxs}
+          )}
+        </code>
       )}
     </pre>
   );
@@ -115,7 +113,13 @@ export function ApiExamples({api}: Props) {
   return (
     <Fragment>
       <div className="api-block">
-        <pre className={requestStyles}>{apiExample.join(' \\\n')}</pre>
+        <pre className={requestStyles}>
+          {toJsxRuntime(refractor.highlight(apiExample.join(' \\\n'), 'bash') as Nodes, {
+            Fragment,
+            jsx,
+            jsxs,
+          })}
+        </pre>
       </div>
       <div className="api-block">
         <div className="api-block-header response">
diff --git a/src/components/apiPage/styles.scss b/src/components/apiPage/styles.scss
index f77c3c2ca01d0a..65c33906925d80 100644
--- a/src/components/apiPage/styles.scss
+++ b/src/components/apiPage/styles.scss
@@ -31,7 +31,7 @@
 }
 
 .api-block-header.response {
-  background: #2d2d2d;
+  background-color: var(--code-background);
   border-bottom: 1px solid #444;
   color: var(--white);
   display: flex;
diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss
index aa002e3698412b..bc73ba698cb6dc 100644
--- a/src/components/codeBlock/code-blocks.module.scss
+++ b/src/components/codeBlock/code-blocks.module.scss
@@ -4,7 +4,7 @@
   }
 
   pre {
-    background: #251f3d;
+    background-color: var(--code-background);
     border: 1px solid #40364a;
     border-radius: 0;
     margin-top: 0;
diff --git a/src/components/codeTabs.tsx b/src/components/codeTabs.tsx
index 7eb5d856f8dd29..7096f1fd8742fd 100644
--- a/src/components/codeTabs.tsx
+++ b/src/components/codeTabs.tsx
@@ -136,7 +136,7 @@ const Container = styled('div')`
 `;
 
 const TabBar = styled('div')`
-  background: #251f3d;
+  background: var(--code-background);
   border-bottom: 1px solid #40364a;
   height: 36px;
   display: flex;
diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index 387a0792875936..60c7d5970a5719 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -10,6 +10,7 @@
 .prose {
   --heading-color: var(--darkPurple);
   --link-decoration: none;
+  --code-background: #251f3d;
   h1,
   h2,
   h3,
diff --git a/yarn.lock b/yarn.lock
index 4c2b25da6901a5..7b4193743b7fc6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6905,6 +6905,27 @@ hast-util-to-jsx-runtime@^2.0.0:
     unist-util-position "^5.0.0"
     vfile-message "^4.0.0"
 
+hast-util-to-jsx-runtime@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.2.tgz#6d11b027473e69adeaa00ca4cfb5bb68e3d282fa"
+  integrity sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    "@types/unist" "^3.0.0"
+    comma-separated-tokens "^2.0.0"
+    devlop "^1.0.0"
+    estree-util-is-identifier-name "^3.0.0"
+    hast-util-whitespace "^3.0.0"
+    mdast-util-mdx-expression "^2.0.0"
+    mdast-util-mdx-jsx "^3.0.0"
+    mdast-util-mdxjs-esm "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^1.0.0"
+    unist-util-position "^5.0.0"
+    vfile-message "^4.0.0"
+
 hast-util-to-parse5@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz"

From 9220f1a49c1416c59aacb10a1c22cdfec5330901 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:19:16 +0100
Subject: [PATCH 02/11] use the usual code block on curl snippet

---
 .../apiExamples/apiExamples.module.scss       |  6 -----
 src/components/apiExamples/apiExamples.tsx    | 27 ++++++++++++-------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/apiExamples/apiExamples.module.scss b/src/components/apiExamples/apiExamples.module.scss
index 0ff3395866ea2f..3b42977872d254 100644
--- a/src/components/apiExamples/apiExamples.module.scss
+++ b/src/components/apiExamples/apiExamples.module.scss
@@ -10,12 +10,6 @@
   padding: 0.75rem;
 }
 
-.api-block-example.request {
-  color: var(--white);
-  background-color: var(--code-background);
-  border-radius: 4px;
-}
-
 .api-block-example.response {
   background-color: var(--code-background);
   color: var(--white);
diff --git a/src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples/apiExamples.tsx
index d6424cd42165e8..b546bac6550a0d 100644
--- a/src/components/apiExamples/apiExamples.tsx
+++ b/src/components/apiExamples/apiExamples.tsx
@@ -18,13 +18,15 @@ import {Nodes} from 'hastscript/lib/create-h';
 
 import styles from './apiExamples.module.scss';
 
+import {CodeBlock} from '../codeBlock';
+import {CodeTabs} from '../codeTabs';
+
 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
@@ -112,15 +114,20 @@ export function ApiExamples({api}: Props) {
 
   return (
     <Fragment>
-      <div className="api-block">
-        <pre className={requestStyles}>
-          {toJsxRuntime(refractor.highlight(apiExample.join(' \\\n'), 'bash') as Nodes, {
-            Fragment,
-            jsx,
-            jsxs,
-          })}
-        </pre>
-      </div>
+      <CodeTabs>
+        <CodeBlock language="bash">
+          <pre>
+            {toJsxRuntime(
+              refractor.highlight(apiExample.join(' \\\n'), 'bash') as Nodes,
+              {
+                Fragment,
+                jsx,
+                jsxs,
+              }
+            )}
+          </pre>
+        </CodeBlock>
+      </CodeTabs>
       <div className="api-block">
         <div className="api-block-header response">
           <div className="tabs-group">

From e433dacbf285c080128873c63ba55269aa7a19bf Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:26:02 +0100
Subject: [PATCH 03/11] simplify styles

---
 src/components/apiExamples/apiExamples.module.scss |  7 ++-----
 src/components/apiExamples/apiExamples.tsx         | 11 +++--------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/apiExamples/apiExamples.module.scss b/src/components/apiExamples/apiExamples.module.scss
index 3b42977872d254..90ea811ac4fb3f 100644
--- a/src/components/apiExamples/apiExamples.module.scss
+++ b/src/components/apiExamples/apiExamples.module.scss
@@ -1,4 +1,6 @@
 .api-block-example {
+  background-color: var(--code-background);
+  color: var(--white);
   border: none;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -10,11 +12,6 @@
   padding: 0.75rem;
 }
 
-.api-block-example.response {
-  background-color: var(--code-background);
-  color: var(--white);
-}
-
 .api-params dd {
   padding: 0;
 
diff --git a/src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples/apiExamples.tsx
index b546bac6550a0d..1bb5465bfb7502 100644
--- a/src/components/apiExamples/apiExamples.tsx
+++ b/src/components/apiExamples/apiExamples.tsx
@@ -27,11 +27,6 @@ type ExampleProps = {
   selectedTabView: number;
 };
 
-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) {
   let exampleJson: any;
   if (api.responses[selectedResponse].content?.examples) {
@@ -43,10 +38,10 @@ function Example({api, selectedTabView, selectedResponse}: ExampleProps) {
   }
 
   return (
-    <pre className={responseStyles}>
+    <pre className={styles['api-block-example']}>
       {selectedTabView === 0 &&
         (exampleJson ? (
-          <code className={jsonCodeBlockStyles}>
+          <code className="!text-[0.8rem]">
             {toJsxRuntime(
               refractor.highlight(JSON.stringify(exampleJson, null, 2), 'json') as Nodes,
               {Fragment, jsx, jsxs}
@@ -56,7 +51,7 @@ function Example({api, selectedTabView, selectedResponse}: ExampleProps) {
           strFormat(api.responses[selectedResponse].description)
         ))}
       {selectedTabView === 1 && (
-        <code className={jsonCodeBlockStyles}>
+        <code className="!text-[0.8rem]">
           {toJsxRuntime(
             refractor.highlight(
               JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2),

From d3f8ca8e2e85abd7665cb5128684cdffb4183fcb Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:27:03 +0100
Subject: [PATCH 04/11] remove unused highlighter

---
 src/components/apiExamples/apiExamples.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples/apiExamples.tsx
index 1bb5465bfb7502..30e9636b323309 100644
--- a/src/components/apiExamples/apiExamples.tsx
+++ b/src/components/apiExamples/apiExamples.tsx
@@ -3,24 +3,21 @@
 import {Fragment, useState} from 'react';
 import {jsx, jsxs} from 'react/jsx-runtime';
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
+import {Nodes} from 'hastscript/lib/create-h';
 import bash from 'refractor/lang/bash.js';
-import javascript from 'refractor/lang/javascript.js';
 import json from 'refractor/lang/json.js';
 import {refractor} from 'refractor/lib/core.js';
 
 import {type API} from 'sentry-docs/build/resolveOpenAPI';
 
-refractor.register(json);
-refractor.register(javascript);
-refractor.register(bash);
-
-import {Nodes} from 'hastscript/lib/create-h';
-
 import styles from './apiExamples.module.scss';
 
 import {CodeBlock} from '../codeBlock';
 import {CodeTabs} from '../codeTabs';
 
+refractor.register(bash);
+refractor.register(json);
+
 type ExampleProps = {
   api: API;
   selectedResponse: number;

From bd7510969d9b5d9e30418b56a47f462cede96dd0 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:39:02 +0100
Subject: [PATCH 05/11] adjust api parameters spacing

---
 src/components/docPage/type.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index 60c7d5970a5719..30296e4458dd1c 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -175,9 +175,14 @@
   }
 
   dt + dd {
+    margin-top: 0.25rem;
     margin-bottom: var(--paragraph-margin-bottom);
   }
 
+  dd > p {
+    margin-top: 0;
+  }
+
   [data-onboarding-option].hidden {
     display: none;
   }

From fa7535ceb12270d0838e0e4074694d83f41df538 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:43:50 +0100
Subject: [PATCH 06/11] fix curl snippet styles

---
 src/components/codeBlock/code-blocks.module.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss
index bc73ba698cb6dc..dae2d1941bd5ce 100644
--- a/src/components/codeBlock/code-blocks.module.scss
+++ b/src/components/codeBlock/code-blocks.module.scss
@@ -5,8 +5,7 @@
 
   pre {
     background-color: var(--code-background);
-    border: 1px solid #40364a;
-    border-radius: 0;
+    border-radius: 0 0 0.25rem 0.25rem;
     margin-top: 0;
     margin-bottom: 0;
   }

From 653b889d1c97a73c0585fca6d8dc2afa7dfa7ed0 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:49:57 +0100
Subject: [PATCH 07/11] fix Http snippet border in dark mode

---
 src/components/apiPage/styles.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/apiPage/styles.scss b/src/components/apiPage/styles.scss
index 65c33906925d80..6f900fb53214be 100644
--- a/src/components/apiPage/styles.scss
+++ b/src/components/apiPage/styles.scss
@@ -7,6 +7,10 @@
   box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
   margin-bottom: var(--paragraph-margin-bottom);
 }
+.dark .api-block {
+  border: 1px solid var(--border-color);
+  box-shadow: none;
+}
 
 .api-block-header {
   border-top-left-radius: 3px;

From 15ba41cd4ad1750ad8eca1b0f1a580cd812d5c03 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Fri, 1 Nov 2024 17:55:00 +0100
Subject: [PATCH 08/11] remove prismjs direct dependency

---
 package.json | 1 -
 yarn.lock    | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 763b8e9181cc8c..7de1dfd784382d 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,6 @@
     "parse-numeric-range": "^1.3.0",
     "platformicons": "^6.0.3",
     "prism-sentry": "^1.0.2",
-    "prismjs": "^1.27.0",
     "query-string": "^6.13.1",
     "react": "^18",
     "react-dom": "^18",
diff --git a/yarn.lock b/yarn.lock
index 7b4193743b7fc6..60abe154a018ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10201,7 +10201,7 @@ prisma@^5.8.1:
   dependencies:
     "@prisma/engines" "5.12.1"
 
-prismjs@^1.23.0, prismjs@^1.27.0:
+prismjs@^1.23.0:
   version "1.29.0"
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

From ec6cfde82353e02e788f8fb37842fbe919d30601 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Sat, 2 Nov 2024 18:47:59 +0100
Subject: [PATCH 09/11] add copy paste

---
 .../apiExamples/apiExamples.module.scss       |  14 ++
 src/components/apiExamples/apiExamples.tsx    | 121 ++++++++++--------
 src/components/apiPage/styles.scss            |   2 +
 3 files changed, 87 insertions(+), 50 deletions(-)

diff --git a/src/components/apiExamples/apiExamples.module.scss b/src/components/apiExamples/apiExamples.module.scss
index 90ea811ac4fb3f..819940cefff6b1 100644
--- a/src/components/apiExamples/apiExamples.module.scss
+++ b/src/components/apiExamples/apiExamples.module.scss
@@ -19,3 +19,17 @@
     margin: 0;
   }
 }
+
+.copied {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  margin: 0;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 0.85rem;
+  background: rgba(255, 255, 255, 0.25);
+  border: none;
+  color: var(--white);
+  transition: opacity 150ms;
+}
diff --git a/src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples/apiExamples.tsx
index 30e9636b323309..9cfd10081d1f74 100644
--- a/src/components/apiExamples/apiExamples.tsx
+++ b/src/components/apiExamples/apiExamples.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import {Fragment, useState} from 'react';
+import {Fragment, useEffect, useState} from 'react';
 import {jsx, jsxs} from 'react/jsx-runtime';
+import {Clipboard} from 'react-feather';
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
 import {Nodes} from 'hastscript/lib/create-h';
 import bash from 'refractor/lang/bash.js';
@@ -10,6 +11,7 @@ import {refractor} from 'refractor/lib/core.js';
 
 import {type API} from 'sentry-docs/build/resolveOpenAPI';
 
+import codeBlockStyles from '../codeBlock/code-blocks.module.scss';
 import styles from './apiExamples.module.scss';
 
 import {CodeBlock} from '../codeBlock';
@@ -18,50 +20,6 @@ import {CodeTabs} from '../codeTabs';
 refractor.register(bash);
 refractor.register(json);
 
-type ExampleProps = {
-  api: API;
-  selectedResponse: number;
-  selectedTabView: number;
-};
-
-function Example({api, selectedTabView, selectedResponse}: ExampleProps) {
-  let exampleJson: any;
-  if (api.responses[selectedResponse].content?.examples) {
-    exampleJson = Object.values(
-      api.responses[selectedResponse].content?.examples ?? {}
-    ).map(e => e.value)[0];
-  } else if (api.responses[selectedResponse].content?.example) {
-    exampleJson = api.responses[selectedResponse].content?.example;
-  }
-
-  return (
-    <pre className={styles['api-block-example']}>
-      {selectedTabView === 0 &&
-        (exampleJson ? (
-          <code className="!text-[0.8rem]">
-            {toJsxRuntime(
-              refractor.highlight(JSON.stringify(exampleJson, null, 2), 'json') as Nodes,
-              {Fragment, jsx, jsxs}
-            )}
-          </code>
-        ) : (
-          strFormat(api.responses[selectedResponse].description)
-        ))}
-      {selectedTabView === 1 && (
-        <code className="!text-[0.8rem]">
-          {toJsxRuntime(
-            refractor.highlight(
-              JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2),
-              'json'
-            ) as Nodes,
-            {Fragment, jsx, jsxs}
-          )}
-        </code>
-      )}
-    </pre>
-  );
-}
-
 const strFormat = (str: string) => {
   const s = str.trim();
   if (s.endsWith('.')) {
@@ -104,6 +62,36 @@ export function ApiExamples({api}: Props) {
     ? ['RESPONSE', 'SCHEMA']
     : ['RESPONSE'];
 
+  const [showCopied, setShowCopied] = useState(false);
+
+  // Show the copy button after js has loaded
+  // otherwise the copy button will not work
+  const [showCopyButton, setShowCopyButton] = useState(false);
+  useEffect(() => {
+    setShowCopyButton(true);
+  }, []);
+  async function copyCode(code: string) {
+    await navigator.clipboard.writeText(code);
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 1200);
+  }
+
+  let exampleJson: any;
+  if (api.responses[selectedResponse].content?.examples) {
+    exampleJson = Object.values(
+      api.responses[selectedResponse].content?.examples ?? {}
+    ).map(e => e.value)[0];
+  } else if (api.responses[selectedResponse].content?.example) {
+    exampleJson = api.responses[selectedResponse].content?.example;
+  }
+
+  const codeToCopy =
+    selectedTabView === 0
+      ? exampleJson
+        ? JSON.stringify(exampleJson, null, 2)
+        : strFormat(api.responses[selectedResponse].description)
+      : JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2);
+
   return (
     <Fragment>
       <CodeTabs>
@@ -152,12 +140,45 @@ export function ApiExamples({api}: Props) {
                 )
             )}
           </div>
+
+          <button className={styles.copy} onClick={() => copyCode(codeToCopy)}>
+            {showCopyButton && <Clipboard size={16} />}
+          </button>
         </div>
-        <Example
-          api={api}
-          selectedTabView={selectedTabView}
-          selectedResponse={selectedResponse}
-        />
+        <pre className={`${styles['api-block-example']} relative`}>
+          <div className={codeBlockStyles.copied} style={{opacity: showCopied ? 1 : 0}}>
+            Copied
+          </div>
+          {selectedTabView === 0 &&
+            (exampleJson ? (
+              <code className="!text-[0.8rem]">
+                {toJsxRuntime(
+                  refractor.highlight(
+                    JSON.stringify(exampleJson, null, 2),
+                    'json'
+                  ) as Nodes,
+                  {Fragment, jsx, jsxs}
+                )}
+              </code>
+            ) : (
+              strFormat(api.responses[selectedResponse].description)
+            ))}
+          {selectedTabView === 1 && (
+            <code className="!text-[0.8rem]">
+              {toJsxRuntime(
+                refractor.highlight(
+                  JSON.stringify(
+                    api.responses[selectedResponse].content?.schema,
+                    null,
+                    2
+                  ),
+                  'json'
+                ) as Nodes,
+                {Fragment, jsx, jsxs}
+              )}
+            </code>
+          )}
+        </pre>
       </div>
     </Fragment>
   );
diff --git a/src/components/apiPage/styles.scss b/src/components/apiPage/styles.scss
index 6f900fb53214be..7617585a324b88 100644
--- a/src/components/apiPage/styles.scss
+++ b/src/components/apiPage/styles.scss
@@ -61,6 +61,8 @@
 
 .response-status-btn-group {
   border-radius: 3px;
+  margin-left: auto;
+  margin-right: 1rem;
 }
 
 .response-status-btn {

From 130c299e436c46cd068c95f5d318f9b6a51d8d41 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Sat, 2 Nov 2024 18:52:11 +0100
Subject: [PATCH 10/11] refactor code to jsx transformation

---
 src/components/apiExamples/apiExamples.tsx | 36 ++++++----------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/src/components/apiExamples/apiExamples.tsx b/src/components/apiExamples/apiExamples.tsx
index 9cfd10081d1f74..cc5b026aeb0051 100644
--- a/src/components/apiExamples/apiExamples.tsx
+++ b/src/components/apiExamples/apiExamples.tsx
@@ -32,6 +32,10 @@ type Props = {
   api: API;
 };
 
+const codeToJsx = (code: string, lang = 'json') => {
+  return toJsxRuntime(refractor.highlight(code, lang) as Nodes, {Fragment, jsx, jsxs});
+};
+
 export function ApiExamples({api}: Props) {
   const apiExample = [
     `curl https://sentry.io${api.apiPath}`,
@@ -96,16 +100,7 @@ export function ApiExamples({api}: Props) {
     <Fragment>
       <CodeTabs>
         <CodeBlock language="bash">
-          <pre>
-            {toJsxRuntime(
-              refractor.highlight(apiExample.join(' \\\n'), 'bash') as Nodes,
-              {
-                Fragment,
-                jsx,
-                jsxs,
-              }
-            )}
-          </pre>
+          <pre>{codeToJsx(apiExample.join(' \\\n'), 'bash')}</pre>
         </CodeBlock>
       </CodeTabs>
       <div className="api-block">
@@ -152,29 +147,16 @@ export function ApiExamples({api}: Props) {
           {selectedTabView === 0 &&
             (exampleJson ? (
               <code className="!text-[0.8rem]">
-                {toJsxRuntime(
-                  refractor.highlight(
-                    JSON.stringify(exampleJson, null, 2),
-                    'json'
-                  ) as Nodes,
-                  {Fragment, jsx, jsxs}
-                )}
+                {codeToJsx(JSON.stringify(exampleJson, null, 2), 'json')}
               </code>
             ) : (
               strFormat(api.responses[selectedResponse].description)
             ))}
           {selectedTabView === 1 && (
             <code className="!text-[0.8rem]">
-              {toJsxRuntime(
-                refractor.highlight(
-                  JSON.stringify(
-                    api.responses[selectedResponse].content?.schema,
-                    null,
-                    2
-                  ),
-                  'json'
-                ) as Nodes,
-                {Fragment, jsx, jsxs}
+              {codeToJsx(
+                JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2),
+                'json'
               )}
             </code>
           )}

From 7d5b1aa9162254dd2f30134769945d63a2436f82 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Sat, 2 Nov 2024 19:12:42 +0100
Subject: [PATCH 11/11] remove unused styles

---
 src/components/apiExamples/apiExamples.module.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/apiExamples/apiExamples.module.scss b/src/components/apiExamples/apiExamples.module.scss
index 819940cefff6b1..90ea811ac4fb3f 100644
--- a/src/components/apiExamples/apiExamples.module.scss
+++ b/src/components/apiExamples/apiExamples.module.scss
@@ -19,17 +19,3 @@
     margin: 0;
   }
 }
-
-.copied {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  margin: 0;
-  padding: 0 6px;
-  border-radius: 2px;
-  font-size: 0.85rem;
-  background: rgba(255, 255, 255, 0.25);
-  border: none;
-  color: var(--white);
-  transition: opacity 150ms;
-}