better abstraction refactor & cleanup

Author: jaffrepaul

src/components/docImage.tsx

@@ -1,5 +1,6 @@
 import path from 'path';
 
+import {isExternalImage} from 'sentry-docs/config/images';
 import {serverContext} from 'sentry-docs/serverContext';
 
 import {ImageLightbox} from './imageLightbox';
@@ -64,12 +65,12 @@ export default function DocImage({
     return null;
   }
 
-  const isExternalImage = src.startsWith('http') || src.startsWith('//');
+  const isExternal = isExternalImage(src);
   let finalSrc = src;
   let imgPath = src;
 
   // For internal images, process the path
-  if (!isExternalImage) {
+  if (!isExternal) {
     if (src.startsWith('./')) {
       finalSrc = path.join('/mdx-images', src);
     } else if (!src?.startsWith('/') && !src?.includes('://')) {

src/components/imageLightbox/index.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import {useState} from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
 import Image from 'next/image';
 
 import {Lightbox} from 'sentry-docs/components/lightbox';
-import {isAllowedRemoteImage} from 'sentry-docs/config/images';
+import {isAllowedRemoteImage, isExternalImage} from 'sentry-docs/config/images';
 
 interface ImageLightboxProps
   extends Omit<
@@ -19,15 +18,9 @@ interface ImageLightboxProps
   width?: number;
 }
 
-// Helper functions
-const isExternalImage = (src: string): boolean =>
-  src.startsWith('http') || src.startsWith('//');
-
 const getImageUrl = (src: string, imgPath: string): string =>
   isExternalImage(src) ? src : imgPath;
 
-// Using shared allowlist logic from src/config/images
-
 type ValidDimensions = {
   height: number;
   width: number;
@@ -59,46 +52,36 @@ export function ImageLightbox({
 }: ImageLightboxProps) {
   const [open, setOpen] = useState(false);
 
-  // Check if we should use Next.js Image or regular img
-  // Use Next.js Image for internal images with valid dimensions
-  // Use regular img for external images or when dimensions are invalid/missing
   const dimensions = getValidDimensions(width, height);
   const shouldUseNextImage =
     !!dimensions && (!isExternalImage(src) || isAllowedRemoteImage(src));
 
-  const handleModifierClick = (e: React.MouseEvent) => {
-    // If Ctrl/Cmd+click, open image in new tab instead of lightbox
-    if (e.ctrlKey || e.metaKey) {
+  const openInNewTab = () => {
+    window.open(getImageUrl(src, imgPath), '_blank');
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    // Middle-click or Ctrl/Cmd+click opens in new tab
+    if (e.button === 1 || e.ctrlKey || e.metaKey) {
       e.preventDefault();
-      e.stopPropagation();
-      const url = getImageUrl(src, imgPath);
-      const newWindow = window.open(url, '_blank');
-      if (newWindow) {
-        newWindow.opener = null; // Security: prevent opener access
-      }
+      openInNewTab();
+      return;
     }
-    // Normal click will be handled by Dialog.Trigger
+    // Regular click falls through to Dialog.Trigger
   };
 
-  const handleModifierKeyDown = (e: React.KeyboardEvent) => {
-    // Handle Ctrl/Cmd+Enter or Ctrl/Cmd+Space to open in new tab
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if ((e.key === 'Enter' || e.key === ' ') && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
-      e.stopPropagation();
-      const url = getImageUrl(src, imgPath);
-      const newWindow = window.open(url, '_blank');
-      if (newWindow) {
-        newWindow.opener = null; // Security: prevent opener access
-      }
+      openInNewTab();
     }
-    // Normal key presses will be handled by Dialog.Trigger
+    // Regular Enter/Space falls through to Dialog.Trigger
   };
 
   // Filter out props that are incompatible with Next.js Image component
   // Next.js Image has stricter typing for certain props like 'placeholder'
   const {placeholder: _placeholder, ...imageCompatibleProps} = props;
 
-  // Render the appropriate image component
   const renderImage = (isInline: boolean = true) => {
     const renderedSrc = getImageUrl(src, imgPath);
     const imageClassName = isInline
@@ -127,27 +110,30 @@ export function ImageLightbox({
       <img
         src={renderedSrc}
         alt={alt}
-        loading={isInline ? 'lazy' : 'lazy'}
+        loading={isInline ? 'lazy' : 'eager'}
         decoding="async"
         style={imageStyle}
         className={imageClassName}
-        {...props}
+        {...imageCompatibleProps}
       />
     );
   };
 
   return (
     <Lightbox.Root open={open} onOpenChange={setOpen} content={renderImage(false)}>
-      <Dialog.Trigger asChild>
+      <Lightbox.Trigger asChild>
         <div
-          onClick={handleModifierClick}
-          onKeyDown={handleModifierKeyDown}
+          onClick={handleClick}
+          onAuxClick={handleClick}
+          onKeyDown={handleKeyDown}
           className="cursor-pointer border-none bg-transparent p-0 block w-full no-underline"
           aria-label={`View image: ${alt}`}
+          role="button"
+          tabIndex={0}
         >
           {renderImage()}
         </div>
-      </Dialog.Trigger>
+      </Lightbox.Trigger>
     </Lightbox.Root>
   );
 }

src/components/lightbox/index.tsx

@@ -8,49 +8,38 @@
  * </Lightbox.Root>
  *
  * @example
- * // Advanced usage with custom trigger and controlled state
+ * // Advanced usage with Lightbox.Trigger and controlled state
  * const [open, setOpen] = useState(false);
  *
- * <Lightbox.Root
- *   open={open}
- *   onOpenChange={setOpen}
- *   content={<MyLargeContent />}
- *   trigger={
- *     <Lightbox.Trigger onClick={handleClick}>
+ * <Lightbox.Root open={open} onOpenChange={setOpen} content={<MyLargeContent />}>
+ *   <Lightbox.Trigger asChild>
+ *     <button onClick={handleClick}>
  *       <MyThumbnail />
- *     </Lightbox.Trigger>
- *   }
- * />
+ *     </button>
+ *   </Lightbox.Trigger>
+ * </Lightbox.Root>
  */
 
 'use client';
 
-import {useState} from 'react';
+import {Fragment, useState} from 'react';
 import {X} from 'react-feather';
 import * as Dialog from '@radix-ui/react-dialog';
 
 import styles from './lightbox.module.scss';
 
 interface LightboxProps {
-  children?: React.ReactNode;
   content: React.ReactNode;
-  trigger?: React.ReactNode;
+  children?: React.ReactNode;
+  closeButton?: boolean;
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
-  closeButton?: boolean;
+  trigger?: React.ReactNode;
 }
 
 interface LightboxTriggerProps {
   children: React.ReactNode;
-  onClick?: (e: React.MouseEvent) => void;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-  className?: string;
-  'aria-label'?: string;
-}
-
-interface LightboxContentProps {
-  children: React.ReactNode;
-  className?: string;
+  asChild?: boolean;
 }
 
 interface LightboxCloseProps {
@@ -92,54 +81,29 @@ function LightboxRoot({
   );
 }
 
-// Trigger component for custom triggers
-function LightboxTrigger({
-  children,
-  onClick,
-  onKeyDown,
-  className = '',
-  'aria-label': ariaLabel,
-}: LightboxTriggerProps) {
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      className={`cursor-pointer border-none bg-transparent p-0 block w-full no-underline ${className}`}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      aria-label={ariaLabel}
-    >
-      {children}
-    </div>
-  );
-}
-
-// Content wrapper (optional, for additional styling)
-function LightboxContent({children, className = ''}: LightboxContentProps) {
-  return <div className={className}>{children}</div>;
+// Trigger component
+function LightboxTrigger({children, asChild = false}: LightboxTriggerProps) {
+  return <Dialog.Trigger asChild={asChild}>{children}</Dialog.Trigger>;
 }
 
 // Close button component
 function LightboxClose({children, className = ''}: LightboxCloseProps) {
   return (
     <Dialog.Close className={className}>
       {children || (
-        <>
+        <Fragment>
           <X className="h-4 w-4 stroke-[2.5]" />
           <span className="sr-only">Close</span>
-        </>
+        </Fragment>
       )}
     </Dialog.Close>
   );
 }
 
-// Compound component exports
 export const Lightbox = {
   Root: LightboxRoot,
   Trigger: LightboxTrigger,
-  Content: LightboxContent,
   Close: LightboxClose,
 };
 
-// For backward compatibility, export the root as default
 export default LightboxRoot;

src/config/images.ts

@@ -8,9 +8,15 @@ export const REMOTE_IMAGE_PATTERNS = REMOTE_IMAGE_HOSTNAMES.map(hostname => ({
   hostname,
 }));
 
+export function isExternalImage(src: string): boolean {
+  return src.startsWith('http') || src.startsWith('//');
+}
+
 export function isAllowedRemoteImage(src: string): boolean {
   try {
-    const url = new URL(src);
+    // Handle protocol-relative URLs by adding https: protocol
+    const normalizedSrc = src.startsWith('//') ? `https:${src}` : src;
+    const url = new URL(normalizedSrc);
     return (
       url.protocol === 'https:' &&
       (REMOTE_IMAGE_HOSTNAMES as readonly string[]).includes(url.hostname)

src/remark-image-size.js

@@ -13,7 +13,7 @@ export default function remarkImageSize(options) {
   return tree =>
     visit(tree, 'image', node => {
       // don't process external images
-      if (node.url.startsWith('http')) {
+      if (node.url.startsWith('http') || node.url.startsWith('//')) {
         return;
       }
       const fullImagePath = path.join(