From 0ae8416167bcc54f9447bbe5864bd8a232f3ecf3 Mon Sep 17 00:00:00 2001
From: shreyansh <shreyash@codalent.com>
Date: Fri, 17 Jan 2025 15:17:44 +0530
Subject: [PATCH 1/2] feat: added copy code icon

---
 src/mdx-components.tsx | 31 +++++++++++++++++++++++++++++++
 tailwind.config.ts     |  4 ++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index 9ff7229..7b83d6a 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -1,7 +1,38 @@
+import CopyIcon from "@/image/icons/copy.svg";
 import type { MDXComponents } from "mdx/types";
+import React, { useState } from "react";
+
+const Pre = ({ children, ...props }: React.HTMLAttributes<HTMLElement>) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyCodeHandler = () => {
+    navigator.clipboard
+      .writeText(children.props.children)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+      })
+      .catch((err) => console.error("Failed to copy!", err));
+  };
+
+  return (
+    <div className="relative">
+      <pre {...props}>{children}</pre>
+      <button
+        onClick={copyCodeHandler}
+        className={`absolute right-2 top-2 ${
+          copied ? "text-green-500" : "text-brand-neutral-200"
+        }`}
+      >
+        <CopyIcon width={20} height={20} />
+      </button>
+    </div>
+  );
+};
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
+    pre: Pre,
     ...components,
   };
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 55152e0..595f3d7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  safelist: ["right-2", "top-2"],
   theme: {
     fontSize: {
       xxs: ["0.625rem", { lineHeight: "0.75rem" }], // 10px
@@ -176,7 +177,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography'),
-  ],
+  plugins: [require("@tailwindcss/typography")],
 };
 export default config;

From e234b0f8276f9a13fc1640bf76b5ddba5d5f0942 Mon Sep 17 00:00:00 2001
From: Arpit Bansal <arpit@codalent.com>
Date: Thu, 30 Jan 2025 14:26:19 +0530
Subject: [PATCH 2/2] fix: codeblock styling when no language is selected

---
 src/pages/use-cases/cryptos-currency.mdx |  6 +++---
 src/styles/vendor/prism-atom-dark.css    | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/pages/use-cases/cryptos-currency.mdx b/src/pages/use-cases/cryptos-currency.mdx
index 8ea310a..1a1bb38 100644
--- a/src/pages/use-cases/cryptos-currency.mdx
+++ b/src/pages/use-cases/cryptos-currency.mdx
@@ -1,5 +1,5 @@
 import MdxLayout from '@/components/MdxLayout';
-import URLInputBox from '@/components/URLInputBox'
+import URLInputBox from '@/components/URLInputBox';
 
 ## Endpoint
 ```http
@@ -9,7 +9,7 @@ import URLInputBox from '@/components/URLInputBox'
 ## Advanced manipulation with JMESPath
 This use case demonstrates a complex manipulation of data using an expression. It queries a CoinGecko API endpoint ([see the raw data](https://api.coingecko.com/api/v3/coins/markets?vs_currency=EUR&order=market_cap_desc&per_page=100&page=1&sparkline=false)) that returns data for over 100 cryptocurrencies. Each cryptocurrency returns an object like this:
 
-```
+```json
 {
   "id": "bitcoin",
   "symbol": "btc",
@@ -26,7 +26,7 @@ Our frontend will use just 5 fields and a shortened list with a slice of 5 curre
 
 To accomplish this modification, the `/cryptos/{currency}` use case applies a JMESPath expression that transforms the data. It looks like this (break lines for simplified reading, must be a one-liner):
 
-```
+```jmespath
 reverse(
     sort_by(
       collection[:5], &name
diff --git a/src/styles/vendor/prism-atom-dark.css b/src/styles/vendor/prism-atom-dark.css
index 25411d2..5ec8948 100644
--- a/src/styles/vendor/prism-atom-dark.css
+++ b/src/styles/vendor/prism-atom-dark.css
@@ -39,6 +39,18 @@ pre[class*="language-"] {
   background: #1d1f21;
 }
 
+pre {
+  background: #1d1f21 !important;
+  padding: 2em !important;
+  margin: 0 !important;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+pre code {
+  padding: 0 !important;
+}
+
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: 0.1em;