feat(aih): special treatment for shellscript code blocks (#370)

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>
 	)

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>
 	)
 }

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>
+	)
+}