add styling for shell scripts

Author: davemooreuws

src/components/code/CodeSwitcherSelect.tsx

@@ -61,7 +61,7 @@ export function CodeSwitcherSelect({
           >
             <SelectTrigger
               aria-label="Switch code language"
-              className="absolute right-2 top-[3px] z-10 hidden h-8 w-28 bg-white/5 text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:flex"
+              className="absolute right-2 top-[2.5px] z-10 hidden h-8 w-28 bg-white/5 text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:flex"
             >
               <SelectValue />
             </SelectTrigger>
@@ -78,7 +78,7 @@ export function CodeSwitcherSelect({
             onChange={(e) => setCurrentLanguage(e.target.value as LanguageId)}
             className={cn(
               'flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-              'absolute right-2 top-[3px] z-10 w-24 bg-white/5 font-sans text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:hidden',
+              'absolute right-2 top-[2.5px] z-10 w-24 bg-white/5 font-sans text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:hidden',
             )}
             value={selectedLang}
           >

src/components/code/CopyButton.tsx

@@ -7,11 +7,9 @@ import { cn } from '@/lib/utils'
 
 export function CopyButton({
   code,
-  showPanel,
   className,
 }: {
   code: string
-  showPanel?: boolean
   className?: string
 }) {
   const [copyCount, setCopyCount] = useState(0)
@@ -30,8 +28,7 @@ export function CopyButton({
     <button
       type="button"
       className={cn(
-        'group/button absolute right-2 h-8 rounded-md px-1.5 py-1 text-2xs font-medium backdrop-blur transition',
-        showPanel ? 'top-12' : 'top-2.5',
+        'group/button absolute right-2 top-2.5 h-8 rounded-md px-1.5 py-1 text-2xs font-medium backdrop-blur transition',
         copied
           ? 'bg-primary-400/10 ring-primary-400/20'
           : 'bg-white/5 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',

src/components/code/Pre.tsx

@@ -41,8 +41,21 @@ const Pre: React.FC<Props> = ({
 
   const showFileNamePanel = showPanel && !!title
 
+  const isBash = highlighted.lang === 'shellscript'
+
   return (
     <>
+      {isBash && !showFileNamePanel && (
+        <div className="relative flex h-9 items-center justify-start pr-12 font-display text-2xs text-zinc-300 sm:text-xs">
+          {/* one-off breakpoint to hide the filename on extremely narrow screens - to avoid interfering with the lang select */}
+          <div className="relative flex h-full items-center justify-center gap-x-1 px-4">
+            <div className="size-[6px] rounded-full bg-zinc-300/10" />
+            <div className="size-[6px] rounded-full bg-zinc-300/10" />
+            <div className="size-[6px] rounded-full bg-zinc-300/10" />
+          </div>
+          <div className="absolute bottom-0 h-[1px] w-full bg-zinc-300/5" />
+        </div>
+      )}
       {showFileNamePanel && (
         <div className="relative flex h-10 items-center justify-start pr-12 font-display text-2xs text-zinc-300 sm:text-xs">
           {/* one-off breakpoint to hide the filename on extremely narrow screens - to avoid interfering with the lang select */}
@@ -55,13 +68,16 @@ const Pre: React.FC<Props> = ({
           <div className="absolute bottom-0 h-[1px] w-full bg-zinc-300/5" />
         </div>
       )}
-      <CopyButton code={highlighted.code} showPanel={showPanel} />
+      <CopyButton
+        code={highlighted.code}
+        className={cn(showFileNamePanel && 'top-12', isBash && 'top-11')}
+      />
       <CodeHikePre
         code={highlighted}
         handlers={handlers}
         className={cn(
           'overflow-auto overscroll-x-contain p-4',
-          showPanel && !title && 'pt-8', // add padding to ensure the code doesn't touch the top of the panel
+          showPanel && !title && 'pt-7', // add padding to ensure the code doesn't touch the top of the panel
           className,
         )}
         style={{