microsoft · pelikhan · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025
diff --git a/docs/genaisrc/blog-image.genai.mts b/docs/genaisrc/blog-image.genai.mts
@@ -1,5 +1,5 @@
-script({ parameters: { force: false } })
-const file = env.files.find(({ filename }) => /\.mdx?$/.test(filename))
+script({ parameters: { force: false }, accept: ".md,.mdx" })
+const file = env.files[0]
 const target = path.changeext(file.filename, ".png")
 
 const fm = MD.frontmatter(file.content)

diff --git a/docs/genaisrc/docs-image.genai.mts b/docs/genaisrc/docs-image.genai.mts
@@ -0,0 +1,60 @@
+script({ parameters: { force: false }, accept: ".md,.mdx" })
+const { force } = env.vars
+const file = env.files[0]
+const target = path.changeext(file.filename, ".png")
+if (!force && (await workspace.stat(target)))
+    cancel("hero image already exists")
+
+const fm = MD.frontmatter(file.content)
+// phase 1: generate image prompt
+const style =
+    "iconic, 2D, 8-bit, corporate, 5-color, simple, geometric, 128x128. no people, no text, flat design, minimalistic, no background, no shadows, no gradients, no reflections, no 3D elements, no depth, no perspective, no realism, no photography, no realism, no photorealism"
-    "iconic, 2D, 8-bit, corporate, 5-color, simple, geometric, 128x128. no people, no text, flat design, minimalistic, no background, no shadows, no gradients, no reflections, no 3D elements, no depth, no perspective, no realism, no photography, no realism, no photorealism"
+    "iconic, 2D, 8-bit, corporate, 5-color, simple, geometric, 128x128. no people, no text, flat design, minimalistic, no background, no shadows, no gradients, no reflections, no 3D elements, no depth, no perspective, no realism, no photography, no photorealism"
-    "iconic, 2D, 8-bit, corporate, 5-color, simple, geometric, 128x128. no people, no text, flat design, minimalistic, no background, no shadows, no gradients, no reflections, no 3D elements, no depth, no perspective, no realism, no photography, no realism, no photorealism"
+    "iconic, 2D, 8-bit, corporate, 5-color, simple, geometric, 128x128. no people, no text, flat design, minimalistic, no background, no shadows, no gradients, no reflections, no 3D elements, no depth, no perspective, no realism, no photography, no photorealism"
+const { text: imagePrompt } = await runPrompt(
+    (_) => {
+        _.def("CONTENT", MD.content(file.content))
+        _.$`Generate an image prompt for DALLE-3 that illustrates the contents of <CONTENT>.
+Include specific description related to the content of <CONTENT>.        
+    ${style}`
+    },
+    { responseType: "text", systemSafety: false }
+)
+
+// phase 2: generate image
+const image = await generateImage(
+    `${imagePrompt}
+    STYLE:
+    ${style}`,
+    {
+        mime: "image/png",
+        size: "1024x1024",
+        scale: 1,
+        maxHeight: 762,
+        style: "vivid",
+        autoCrop: true
+    }
+)
+
+// phase 3: generate alt text
+const { text: alt } = await prompt`
+Generate an alt text description from <IMAGE_PROMPT>. 
+Rephrase the prompt in a way that would be useful for someone who cannot see the image.
+Do not start with "Alt Text:".
+
+IMAGE_PROMPT:
+${imagePrompt}`.options({
+    responseType: "text",
+    systemSafety: false,
+    label: "alt-text",
+})
+
+// phase 4: patch frontmatter
+fm.hero = {
+    image: {
+        alt,
+        file: "./" + path.basename(target),
+    },
+}
+await workspace.copyFile(image.image.filename, target)
+
+file.content = MD.updateFrontmatter(file.content, fm)
+await workspace.writeFiles(file)
diff --git a/docs/src/content/docs/blog/anthropic.png b/docs/src/content/docs/blog/anthropic.png
diff --git a/docs/src/content/docs/blog/ast-grep-and-transform.png b/docs/src/content/docs/blog/ast-grep-and-transform.png
diff --git a/...src/content/docs/blog/automatic-web-page-content-analysis-with-genaiscript-.png b/...src/content/docs/blog/automatic-web-page-content-analysis-with-genaiscript-.png
diff --git a/docs/src/content/docs/blog/azure-ai-search.png b/docs/src/content/docs/blog/azure-ai-search.png
diff --git a/docs/src/content/docs/blog/blog-images.png b/docs/src/content/docs/blog/blog-images.png
diff --git a/docs/src/content/docs/blog/blog-narration.png b/docs/src/content/docs/blog/blog-narration.png
diff --git a/docs/src/content/docs/blog/creating-release-notes-with-genai.png b/docs/src/content/docs/blog/creating-release-notes-with-genai.png
diff --git a/docs/src/content/docs/blog/fallback-tools.png b/docs/src/content/docs/blog/fallback-tools.png
diff --git a/docs/src/content/docs/blog/gentle-introduction-to-genaiscript.png b/docs/src/content/docs/blog/gentle-introduction-to-genaiscript.png
diff --git a/docs/src/content/docs/blog/gists.png b/docs/src/content/docs/blog/gists.png
diff --git a/docs/src/content/docs/blog/github-models-in-github-actions.png b/docs/src/content/docs/blog/github-models-in-github-actions.png
diff --git a/docs/src/content/docs/blog/hugging-face-transformers.png b/docs/src/content/docs/blog/hugging-face-transformers.png
diff --git a/docs/src/content/docs/blog/llm-agents.png b/docs/src/content/docs/blog/llm-agents.png
diff --git a/docs/src/content/docs/blog/makeitbetter.png b/docs/src/content/docs/blog/makeitbetter.png
diff --git a/docs/src/content/docs/blog/mcp-agents.png b/docs/src/content/docs/blog/mcp-agents.png
diff --git a/docs/src/content/docs/blog/mcp-intents.png b/docs/src/content/docs/blog/mcp-intents.png
diff --git a/docs/src/content/docs/blog/mcp-resources.png b/docs/src/content/docs/blog/mcp-resources.png
diff --git a/docs/src/content/docs/blog/mcp-tool-validation.png b/docs/src/content/docs/blog/mcp-tool-validation.png
diff --git a/docs/src/content/docs/blog/node-api.png b/docs/src/content/docs/blog/node-api.png
diff --git a/docs/src/content/docs/blog/playground.png b/docs/src/content/docs/blog/playground.png
diff --git a/docs/src/content/docs/blog/prompting-is-the-new-scripting.png b/docs/src/content/docs/blog/prompting-is-the-new-scripting.png
diff --git a/docs/src/content/docs/blog/readme-maintenance.png b/docs/src/content/docs/blog/readme-maintenance.png
diff --git a/docs/src/content/docs/blog/scripts-as-mcp-tools.png b/docs/src/content/docs/blog/scripts-as-mcp-tools.png
diff --git a/docs/src/content/docs/blog/search-transform-genai.png b/docs/src/content/docs/blog/search-transform-genai.png
diff --git a/docs/src/content/docs/blog/super-charge-copilot-chat.png b/docs/src/content/docs/blog/super-charge-copilot-chat.png
diff --git a/docs/src/content/docs/blog/support-for-agentic-tools.png b/docs/src/content/docs/blog/support-for-agentic-tools.png
diff --git a/docs/src/content/docs/blog/video-introduction.png b/docs/src/content/docs/blog/video-introduction.png
diff --git a/docs/src/content/docs/blog/video.png b/docs/src/content/docs/blog/video.png
diff --git a/docs/src/content/docs/blog/we-have-a-podcast.png b/docs/src/content/docs/blog/we-have-a-podcast.png
diff --git a/docs/src/content/docs/blog/webview.png b/docs/src/content/docs/blog/webview.png
diff --git a/docs/src/content/docs/getting-started/automating-scripts.mdx b/docs/src/content/docs/getting-started/automating-scripts.mdx
@@ -1,9 +1,19 @@
 ---
 title: Automating scripts
 sidebar:
-    order: 5
-description: Learn how to automate your scripts using the GenAIScript CLI for efficient batch processing and integration into CI/CD pipelines.
+  order: 5
+description: Learn how to automate your scripts using the GenAIScript CLI for
+  efficient batch processing and integration into CI/CD pipelines.
 keywords: automation, CLI, batch processing, CI/CD integration, script execution
+hero:
+  image:
+    alt: A simple, flat 8-bit icon displays a geometric laptop alongside a cogwheel
+      and checkmark, a stylized file tree linked by lines, a small cloud with an
+      upload arrow, and a basic shield representing security. All elements use a
+      five-color corporate palette, arranged on a transparent background in a
+      128x128 pixel square, with no people, text, shadows, or 3D effects.
+    file: ./automating-scripts.png
+
 ---
 
 import { Steps } from "@astrojs/starlight/components"

diff --git a/docs/src/content/docs/getting-started/automating-scripts.png b/docs/src/content/docs/getting-started/automating-scripts.png
diff --git a/docs/src/content/docs/getting-started/best-practices.md b/docs/src/content/docs/getting-started/best-practices.md
@@ -3,7 +3,20 @@ title: Best Practices
 description: Suggestions for using GenAIScripts more effectively
 keywords: best practices, writing scripts
 sidebar:
-    order: 6
+  order: 6
+hero:
+  image:
+    alt: A small, simple illustration using five solid colors shows rectangle icons
+      for scripts, each with symbols indicating parameters, arranged to appear
+      interconnected. There’s a plain document icon with a folded corner, and
+      two distinct file icons marked out by colored sections for PDF and DOCX
+      formats. Arrows connect these elements, illustrating the flow of input and
+      output between scripts. A cogwheel icon signals configuration, while two
+      overlapping speech bubble shapes symbolize different large language
+      models. All shapes are flat, iconic, and set on a blank, untextured
+      background with no people or written text.
+    file: ./best-practices.png
+
 ---
 
 ## GenAIScript allows chatbot users to create reusable scripts

diff --git a/docs/src/content/docs/getting-started/best-practices.png b/docs/src/content/docs/getting-started/best-practices.png
diff --git a/docs/src/content/docs/getting-started/configuration.mdx b/docs/src/content/docs/getting-started/configuration.mdx
@@ -1,9 +1,23 @@
 ---
 title: Configuration
-description: Set up your LLM connection and authorization with environment variables for seamless integration.
-keywords: LLM setup, API configuration, environment variables, secure authorization, LLM integration
+description: Set up your LLM connection and authorization with environment
+  variables for seamless integration.
+keywords: LLM setup, API configuration, environment variables, secure
+  authorization, LLM integration
 sidebar:
-    order: 2
+  order: 2
+hero:
+  image:
+    alt: A small, flat, 8-bit style illustration features simple colored blocks
+      linked by straight lines to depict API and cloud connections. Each block
+      displays a basic symbol, including representations of artificial
+      intelligence, a cloud, code, an environment file, and a lock for security.
+      Iconic, abstract shapes indicate major tech providers like OpenAI, Azure,
+      Google, Hugging Face, GitHub, and Anthropic. The arrangement is clear and
+      geometric, with each block in a unique color from a five-color palette,
+      all on a transparent background with no text, people, or visual effects.
+    file: ./configuration.png
+
 ---
 
 import { FileTree } from "@astrojs/starlight/components"

diff --git a/docs/src/content/docs/getting-started/configuration.png b/docs/src/content/docs/getting-started/configuration.png
diff --git a/docs/src/content/docs/getting-started/debugging-scripts.mdx b/docs/src/content/docs/getting-started/debugging-scripts.mdx
@@ -1,9 +1,21 @@
 ---
 title: Debugging Scripts
 sidebar:
-    order: 4.5
-description: Learn how to debug GenAIScript files using Visual Studio Code Debugger to efficiently troubleshoot and enhance your JavaScript automation scripts.
+  order: 4.5
+description: Learn how to debug GenAIScript files using Visual Studio Code
+  Debugger to efficiently troubleshoot and enhance your JavaScript automation
+  scripts.
 keywords: debugging, JavaScript, Visual Studio Code, automation scripts, breakpoints
+hero:
+  image:
+    alt: A simple 8-bit icon depicts a computer monitor displaying a code editor
+      with colored lines, a play button for running code, and a pause icon
+      indicating a breakpoint. A blue bug symbol in the corner represents
+      debugging, while a log file icon sits beside the window, and a gear icon
+      suggests settings. The design uses five flat corporate colors and
+      geometric shapes on a transparent background.
+    file: ./debugging-scripts.png
+
 ---
 
 import { Image } from "astro:assets"

diff --git a/docs/src/content/docs/getting-started/debugging-scripts.png b/docs/src/content/docs/getting-started/debugging-scripts.png
diff --git a/docs/src/content/docs/getting-started/index.mdx b/docs/src/content/docs/getting-started/index.mdx
@@ -1,17 +1,28 @@
 ---
 title: Getting Started
 sidebar:
-    order: 0
+  order: 0
 description: Start developing with the GenAIScript VS Code Extension to create
-    AI scripts efficiently.
+  AI scripts efficiently.
 keywords:
-    - AI Scripting Extension
-    - VS Code AI
-    - Generative AI Development
-    - AI Extension Setup
-    - AI Code Automation
+  - AI Scripting Extension
+  - VS Code AI
+  - Generative AI Development
+  - AI Extension Setup
+  - AI Code Automation
 genaiscript:
-    files: src/samples/markdown-small.txt
+  files: src/samples/markdown-small.txt
+hero:
+  image:
+    alt: An abstract pixelated 8-bit style icon features a blocky computer screen
+      with colorful squares symbolizing code. Arranged beside it are a chat
+      bubble for conversation, a simple document file, and a gear for tools. A
+      small spark shape suggests automation or AI. The design uses five solid
+      colors, has a flat and corporate appearance, and lacks any people, text,
+      background elements, or visual effects like shadows, gradients, or
+      reflections. The overall layout is 128 by 128 pixels.
+    file: ./index.png
+
 ---
 
 import { YouTube } from 'astro-embed';

diff --git a/docs/src/content/docs/getting-started/index.png b/docs/src/content/docs/getting-started/index.png
diff --git a/docs/src/content/docs/getting-started/installation.mdx b/docs/src/content/docs/getting-started/installation.mdx
@@ -1,9 +1,22 @@
 ---
 title: Installation
 sidebar:
-    order: 1
-description: Learn how to install GenAIScript as a Visual Studio Code extension or use it via command line for seamless integration into your development workflow.
-keywords: Visual Studio Code, GenAIScript extension, command line tool, manual installation, Node.js
+  order: 1
+description: Learn how to install GenAIScript as a Visual Studio Code extension
+  or use it via command line for seamless integration into your development
+  workflow.
+keywords: Visual Studio Code, GenAIScript extension, command line tool, manual
+  installation, Node.js
+hero:
+  image:
+    alt: A simple and colorful flat 2D image shows a geometric computer screen with
+      the Visual Studio Code logo, next to a small 8-bit style terminal window
+      marked by the Node.js logo, and a stylized folder tree highlighting a
+      .vsix file box. The design uses only five bright corporate colors, lacks
+      background, people, or text, and features only iconic shapes with no
+      shadows or gradients in a compact square format.
+    file: ./installation.png
+
 ---
 
 import { Image } from "astro:assets"

diff --git a/docs/src/content/docs/getting-started/installation.png b/docs/src/content/docs/getting-started/installation.png
diff --git a/docs/src/content/docs/getting-started/running-scripts.mdx b/docs/src/content/docs/getting-started/running-scripts.mdx
@@ -1,9 +1,24 @@
 ---
 title: Running scripts
-description: Discover how to run scripts in your development environment, manage script execution, and interpret the results for enhanced productivity.
-keywords: script execution, script management, result analysis, development automation, script workflow
+description: Discover how to run scripts in your development environment, manage
+  script execution, and interpret the results for enhanced productivity.
+keywords: script execution, script management, result analysis, development
+  automation, script workflow
 sidebar:
-    order: 4
+  order: 4
+hero:
+  image:
+    alt: "A minimal 8-bit style icon: on the left is a simple file explorer window
+      with stacked rectangles representing folders and a highlighted single
+      file; on the right is a basic command line window, centered with a bright
+      triangle play button. Above these, a plain scroll suggests a code script
+      and a square ticked checkbox suggests a task. A small magnifying glass and
+      a gear icon are present for analysis and settings. The image uses five
+      flat corporate colors, features only basic geometric shapes without
+      background, people, text, gradients, shadows, or 3D effects, and is sized
+      at 128x128 pixels."
+    file: ./running-scripts.png
+
 ---
 
 import { YouTube } from "astro-embed"

diff --git a/docs/src/content/docs/getting-started/running-scripts.png b/docs/src/content/docs/getting-started/running-scripts.png
diff --git a/docs/src/content/docs/getting-started/testing-scripts.mdx b/docs/src/content/docs/getting-started/testing-scripts.mdx
@@ -1,9 +1,20 @@
 ---
 title: Testing scripts
 sidebar:
-    order: 4.6
-description: Learn how to declare and run tests for your scripts to ensure their correctness and reliability.
+  order: 4.6
+description: Learn how to declare and run tests for your scripts to ensure their
+  correctness and reliability.
 keywords: testing, scripts, validation, GenAIScript CLI, automation
+hero:
+  image:
+    alt: A simple pixelated image displays a geometric computer monitor with three
+      distinct colored rectangles, a file icon, and a checklist icon. A dotted
+      line visually connects the file, checklist, and colored model options. The
+      design uses five clear corporate colors on a flat, plain background, with
+      no text, people, or shading. The style is 8-bit and highly simplified at a
+      small scale.
+    file: ./testing-scripts.png
+
 ---
 
 import { Image } from "astro:assets"

diff --git a/docs/src/content/docs/getting-started/testing-scripts.png b/docs/src/content/docs/getting-started/testing-scripts.png
diff --git a/docs/src/content/docs/getting-started/tutorial.md b/docs/src/content/docs/getting-started/tutorial.md
@@ -1,9 +1,20 @@
 ---
 title: Tutorial Notebook
 sidebar:
-    order: 100
-description: Learn how to use GenAIScript with this interactive tutorial notebook featuring executable JavaScript code blocks.
+  order: 100
+description: Learn how to use GenAIScript with this interactive tutorial
+  notebook featuring executable JavaScript code blocks.
 keywords: tutorial, GenAIScript notebook, interactive learning, JavaScript, markdown
+hero:
+  image:
+    alt: A simple 2D illustration uses geometric shapes to depict a computer screen
+      displaying code blocks, alongside icons for files and chat messages. It
+      features a recognizable script symbol, a document marked with hashtag and
+      asterisk symbols, and a magic wand or spark conveying automation. The
+      color scheme is limited to five bold corporate tones, with no people or
+      background, and follows a flat, 8-bit style at small size.
+    file: ./tutorial.png
+
 ---
 
 This Notebook is a GenAIScript tutorial. It is a Markdown document where each JavaScript code section is a runnable GenAIScript. You can execute each code block individually and see the results in the output section below the code block. To open this notebook in Visual Studio Code, press **F1** and run **GenAIScript: Create GenAIScript Markdown Notebook**.

diff --git a/docs/src/content/docs/getting-started/tutorial.png b/docs/src/content/docs/getting-started/tutorial.png
diff --git a/docs/src/content/docs/getting-started/your-first-genai-script.mdx b/docs/src/content/docs/getting-started/your-first-genai-script.mdx
@@ -1,13 +1,26 @@
 ---
 title: Your first GenAI script
 sidebar:
-    order: 3
+  order: 3
 description: Learn how to create and execute your initial GenAI script to
-    automate interactions with language models.
+  automate interactions with language models.
 keywords: GenAI script creation, language model automation, script execution,
-    LLM prompt generation, genaisrc setup
+  LLM prompt generation, genaisrc setup
 genaiscript:
-    files: src/samples/markdown.md
+  files: src/samples/markdown.md
+hero:
+  image:
+    alt: A clean, pixel-art style image shows a geometric file folder holding
+      several colored file icons, with one icon visibly highlighted as if
+      selected. Nearby are stylized shapes representing documents, a code
+      symbol, a prompt box displaying a sample poem line, and simple icons
+      including a pen and a check mark suggesting proofreading tools. Abstract
+      interface elements hint at creating prompts and running scripts. The
+      artwork uses flat blue, yellow, green, orange, and gray shapes on a plain
+      white background, without any shadows, people, or actual text. The
+      composition is simple and compact, fitting a small square format.
+    file: ./your-first-genai-script.png
+
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components"

diff --git a/docs/src/content/docs/getting-started/your-first-genai-script.png b/docs/src/content/docs/getting-started/your-first-genai-script.png
diff --git a/docs/src/content/docs/reference/api/index.mdx b/docs/src/content/docs/reference/api/index.mdx
@@ -11,6 +11,15 @@ keywords:
   - API integration
   - environment variables
   - script execution
+hero:
+  image:
+    alt: "A minimal 8-bit style graphic shows a geometric computer screen or code
+      editor next to a gear, symbolizing a Node.js setup. Around them are simple
+      flat icons: a cube for packages, an arrow representing API imports, and a
+      circular loop for worker threads or process spawning. The design uses only
+      five bold corporate colors on a white background, with no people, text,
+      gradients, or shadows, at a size of 128 by 128 pixels."
+    file: ./index.png
 
 ---
 

diff --git a/docs/src/content/docs/reference/api/index.png b/docs/src/content/docs/reference/api/index.png
diff --git a/docs/src/content/docs/reference/cli/commands.md b/docs/src/content/docs/reference/cli/commands.md
@@ -3,6 +3,16 @@ title: Commands
 description: List of all CLI commands
 sidebar:
   order: 100
+hero:
+  image:
+    alt: "A 2D 8-bit style illustration made with flat geometric shapes in five
+      colors, featuring interlocking icons: document scripts, gears, file
+      folders, command line terminals, a brain with circuits for AI, stacked
+      disks for data, a server/cloud, and a filmstrip for video. The design is
+      corporate and minimal, with no text, people, or background, sized at
+      128x128 pixels."
+    file: ./commands.png
+
 ---
 
 <!-- autogenerated, do not edit -->

diff --git a/docs/src/content/docs/reference/cli/commands.png b/docs/src/content/docs/reference/cli/commands.png
diff --git a/docs/src/content/docs/reference/cli/configure.mdx b/docs/src/content/docs/reference/cli/configure.mdx
@@ -2,7 +2,17 @@
 title: Configure
 description: Configure and validate the LLM connections.
 sidebar:
-    order: 4
+  order: 4
+hero:
+  image:
+    alt: An 8-bit style computer terminal is depicted alongside a gear and network
+      node icons, using a flat 2D geometric design with only five distinct
+      colors. The image is small, at 128 by 128 pixels, and completely avoids
+      people, text, shadows, gradients, reflections, backgrounds, or any
+      three-dimensional effects. The composition suggests themes of computer
+      configuration and network connectivity.
+    file: ./configure.png
+
 ---
 
 Interactive command to configure and validate the LLM connections.

diff --git a/docs/src/content/docs/reference/cli/configure.png b/docs/src/content/docs/reference/cli/configure.png