Improvements for table & PreviewImages component

Author: FileEX

web/src/components/PreviewImages.astro

@@ -5,18 +5,20 @@ import { marked } from "marked";
 
 interface Props {
     images?: any[];
+    displayImageOnly?: boolean;
 }
 
-const { images } = Astro.props;
+const { images, displayImageOnly } = Astro.props;
 const maxDimension = 256; // max size of preview image (256x256)
 
 if (images?.length) {
     await Promise.all(
         images.map(async (imageInfo) => {
             const { default: resolvedPath } = await getAssetImagePath(imageInfo.path);
             const { width: originalWidth, height: originalHeight, src } = resolvedPath;
+            const customMax = imageInfo.maxDimension ?? maxDimension;
 
-            const scale = Math.min(maxDimension / originalWidth, maxDimension / originalHeight, 1);
+            const scale = Math.min(customMax / originalWidth, customMax / originalHeight, 1);
 
             Object.assign(imageInfo, {
                 resolvedPath,
@@ -31,9 +33,11 @@ if (images?.length) {
 
 {images && images.length > 0 && (
     <div data-pagefind-ignore id="preview-images-gallery">
-        <h4>Gallery</h4>
-        <p>Click on the image to view the full preview along with the description.</p>
-
+        {!displayImageOnly && (
+            <h4>Gallery</h4>
+            <p>Click on the image to view the full preview along with the description.</p>
+        )}
+        
         <div class="preview-images">
             {images.map(({ src, description, resolvedPath, width, height }) => (
                 <a href={src} class="glightbox" data-description={description ? marked(description) : ""} data-gallery="gallery">

web/src/styles/custom.css

@@ -294,6 +294,10 @@ td {
   background-color: var(--sl-color-bg-inline-code);
 }
 
+tr:nth-child(even) td {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
 .sl-heading-wrapper {
   margin-top: 0.5em;
   margin-bottom: 0.5em;