Add preview images for functions/events/elements

Author: Fernando-A-Rocha

functions/Cursor/getCursorAlpha.yaml

@@ -5,6 +5,7 @@ client:
     This function is used to get the client's cursor alpha (transparency).
   preview_images:
   - path: 'cursor-alpha.jpg'
+    width: 160
     description: 'Visual representation of the cursor alpha:'
   returns:
     description: |

schemas/common-defs.yaml

@@ -66,6 +66,12 @@ $defs:
         description:
           type: string
           description: Brief summary of the content in the picture.
+        width:
+          type: integer
+          description: Width of the image in pixels.
+        height:
+          type: integer
+          description: Height of the image in pixels.
 
   version:
     type: object

schemas/element.yaml

@@ -17,6 +17,8 @@ properties:
     description: A list of noteworthy pieces of information for the item.
     items:
       type: string
+  preview_images:
+    $ref: 'common-defs.yaml#/$defs/preview_images'
   examples:
     $ref: 'common-defs.yaml#/$defs/examples'
   see_also:

web/src/components/PreviewImages.astro

@@ -0,0 +1,22 @@
+---
+import { Image } from 'astro:assets';
+import { getAssetImagePath } from '@src/utils/general';
+
+
+interface Props {
+  images?: any;
+}
+
+const { images } = Astro.props;
+---
+
+{images && images.length > 0 && (
+    <div class="preview-images">
+        {images.map((imageInfo: any) => (
+            <Image width={imageInfo.width || undefined}
+                height={imageInfo.height || undefined}
+                src={getAssetImagePath(imageInfo.path)}
+                alt={imageInfo.description || "Preview"} />
+        ))}
+    </div>
+)}

web/src/pages/[element].astro

@@ -6,6 +6,7 @@ import path from "path";
 import { getSeeAlsoLinksForItem } from '@src/utils/general';
 import { getElementCategory, getOOPFunctionsForElement } from '@src/utils/elements';
 
+import PreviewImages from '@src/components/PreviewImages.astro';
 import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 import CodeExamplesSection from '@src/components/CodeExamplesSection.astro';
 import ElementOOPInfo from '@src/components/ElementOOPInfo.astro';
@@ -47,6 +48,8 @@ let oop_compatible_functions = getOOPFunctionsForElement(element.data.name);
 
   <EnhancedMarkdown content={element.data.description} />
 
+  <PreviewImages images={element.data.preview_images} />
+
   <ElementOOPInfo
     element_name={element.data.name}
     oop_only_methods={oop_only_methods}

web/src/pages/[event].astro

@@ -6,13 +6,15 @@ import path from "path";
 import { Code } from '@astrojs/starlight/components';
 import { getSeeAlsoLinksForItem } from '@src/utils/general';
 
+
 import NoteBox from '@src/components/NoteBox.astro';
 import type { NotesType } from '@src/utils/types';
 
 import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 import CodeExamplesSection from '@src/components/CodeExamplesSection.astro';
 import ItemDescription from '@src/components/ItemDescription.astro';
 import EnhancedMarkdown from '@src/components/EnhancedMarkdown.astro';
+import PreviewImages from '@src/components/PreviewImages.astro';
 
 export async function getStaticPaths() {
     const events = await getCollection('events');
@@ -73,6 +75,9 @@ if (Array.isArray(event.data.notes) && event.data.notes.length > 0) {
         <!-- Description -->
         <ItemDescription description={event.data.description} />
 
+        <!-- Preview Images -->
+        <PreviewImages images={event.data.preview_images} />
+
         <!-- Notes -->
         {notesContent.length > 0 && (
             <div class="notes-section">

web/src/pages/[func].astro

@@ -16,6 +16,7 @@ import CodeExamplesSection from '@src/components/CodeExamplesSection.astro';
 import ChangelogList from '@src/components/ChangelogList.astro';
 import ItemDescription from '@src/components/ItemDescription.astro';
 import EnhancedMarkdown from '@src/components/EnhancedMarkdown.astro';
+import PreviewImages from '@src/components/PreviewImages.astro';
 
 export async function getStaticPaths() {
     const functions = await getCollection('functions');
@@ -74,7 +75,6 @@ const metaArray = func.data[funcInfo.type]?.meta ?? [];
 const changelogEntries = metaArray.find(m => m.changelog)?.changelog ?? [];
 
 let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
-
 ---
 
 <div class={"show-type-badge-" + funcType}>
@@ -91,6 +91,9 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
         <!-- Description -->
         <ItemDescription description={funcInfo.description} />
 
+        <!-- Preview Images -->
+        <PreviewImages images={funcInfo.preview_images} />
+
         <!-- Notes -->
         {notesContent.length > 0 && (
             <div class="notes-section">

web/src/styles/custom.css

@@ -25,6 +25,11 @@
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
 }
+.preview-images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
 
 .see-also-section {
     margin-top: 4rem;

web/src/utils/functions.ts

@@ -31,6 +31,7 @@ export type FunctionInfo = {
     type: FunctionType;
     typePretty: string;
     pair?: string;
+    preview_images?: string[];
     oop?: OOPInfo;
     notes?: NotesType;
 };