From e1dcf42746b5446b31103588fda218b1d8847c94 Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Thu, 9 Jan 2025 16:18:51 +0100
Subject: [PATCH] feat(aih): special treatment for shellscript code blocks
 (#370)

---
 .../ai-hero/src/app/(content)/[post]/page.tsx |  2 +-
 apps/ai-hero/src/components/codehike/code.tsx | 36 +++++++++++++++----
 .../src/components/codehike/copy-button.tsx   | 26 ++++++++++++++
 3 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 apps/ai-hero/src/components/codehike/copy-button.tsx

diff --git a/apps/ai-hero/src/app/(content)/[post]/page.tsx b/apps/ai-hero/src/app/(content)/[post]/page.tsx
index 96232932c..894bf5c02 100644
--- a/apps/ai-hero/src/app/(content)/[post]/page.tsx
+++ b/apps/ai-hero/src/app/(content)/[post]/page.tsx
@@ -120,7 +120,7 @@ async function Post({ post }: { post: Post | null }) {
 	})
 
 	return (
-		<article className="prose sm:prose-lg lg:prose-xl prose-p:max-w-4xl prose-headings:max-w-4xl prose-ul:max-w-4xl prose-table:max-w-4xl prose-pre:max-w-4xl prose-p:text-foreground/80 mt-10 max-w-none">
+		<article className="prose sm:prose-lg lg:prose-xl prose-p:max-w-4xl prose-headings:max-w-4xl prose-ul:max-w-4xl prose-table:max-w-4xl prose-pre:max-w-4xl prose-p:text-foreground/80 mt-10 max-w-none [&_[data-pre]]:max-w-4xl">
 			{content}
 		</article>
 	)
diff --git a/apps/ai-hero/src/components/codehike/code.tsx b/apps/ai-hero/src/components/codehike/code.tsx
index 6901bdd6b..05debcef2 100644
--- a/apps/ai-hero/src/components/codehike/code.tsx
+++ b/apps/ai-hero/src/components/codehike/code.tsx
@@ -1,16 +1,40 @@
 import React from 'react'
 import { highlight, Pre, RawCode } from 'codehike/code'
 
+import { cn } from '@coursebuilder/ui/utils/cn'
+
+import { CopyButton } from './copy-button'
 import { callout, diff, focus, fold, link, mark } from './handlers'
 
 export async function Code({ codeblock }: { codeblock: RawCode }) {
 	const highlighted = await highlight(codeblock, 'github-dark')
+	const isTerminalCode = highlighted.lang === 'shellscript'
 	return (
-		<Pre
-			code={highlighted}
-			className="bg-background text-xs sm:text-sm"
-			style={{ ...highlighted.style, padding: '1rem', borderRadius: '0.5rem' }}
-			handlers={[callout, fold, mark, diff, focus, link]}
-		/>
+		<div data-pre="" className="group relative">
+			{isTerminalCode && (
+				<div
+					aria-hidden="true"
+					className="bg-background mt-8 flex items-center gap-1 rounded-t-[0.5rem] border-x border-t p-4"
+				>
+					<div className="h-2 w-2 rounded-full bg-gray-700" />
+					<div className="h-2 w-2 rounded-full bg-gray-700" />
+					<div className="h-2 w-2 rounded-full bg-gray-700" />
+				</div>
+			)}
+			<CopyButton text={highlighted.code} />
+			<Pre
+				code={highlighted}
+				className={cn('bg-background text-xs sm:text-sm', {
+					'!mt-0 !rounded-t-none rounded-b border-x border-b border-t-0':
+						isTerminalCode,
+				})}
+				style={{
+					...highlighted.style,
+					padding: '1rem',
+					borderRadius: '0.5rem',
+				}}
+				handlers={[callout, fold, mark, diff, focus, link]}
+			/>
+		</div>
 	)
 }
diff --git a/apps/ai-hero/src/components/codehike/copy-button.tsx b/apps/ai-hero/src/components/codehike/copy-button.tsx
new file mode 100644
index 000000000..6d814b674
--- /dev/null
+++ b/apps/ai-hero/src/components/codehike/copy-button.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+import { Button } from '@coursebuilder/ui'
+
+export function CopyButton({ text }: { text: string }) {
+	const [copied, setCopied] = useState(false)
+
+	return (
+		<Button
+			variant="outline"
+			size="icon"
+			className="absolute bottom-1 right-1 rounded opacity-0 transition group-focus-within:opacity-100 group-hover:opacity-100"
+			aria-label="Copy to clipboard"
+			onClick={() => {
+				navigator.clipboard.writeText(text)
+				setCopied(true)
+				setTimeout(() => setCopied(false), 1200)
+			}}
+		>
+			{copied ? <Check size={16} /> : <Copy size={16} />}
+		</Button>
+	)
+}