From 44c5d5b24d2c6adb29e585948fe44a1ee1c840e7 Mon Sep 17 00:00:00 2001
From: omckeon <ordmckeon@gmail.com>
Date: Fri, 6 Dec 2024 10:04:37 +0000
Subject: [PATCH] Update usage example script to allow webm files for examples
 with audio output

---
 scripts/usage-example-page-generation.cjs     | 21 ++++++++++++++-----
 .../docs/usage-examples/CONTRIBUTING.mdx      | 14 ++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/scripts/usage-example-page-generation.cjs b/scripts/usage-example-page-generation.cjs
index d9139156..c43ac564 100644
--- a/scripts/usage-example-page-generation.cjs
+++ b/scripts/usage-example-page-generation.cjs
@@ -434,21 +434,32 @@ categories.forEach((categoryKey) => {
 
           const imageFiles = categoryFiles.filter(file => file.endsWith(exampleKey + '.png'));
           let outputFilePath = categoryPath + "/" + functionKey + "/" + exampleTxtKey;
-
+          // Check for .png files
           if (imageFiles.length > 0) {
             outputFilePath = outputFilePath.replaceAll(".txt", ".png");
+            mdxContent += `![${exampleKey} example](${outputFilePath})\n`
           }
           else {
-            const gifFiles = categoryFiles.filter(file => file.endsWith('.gif'));
+            const gifFiles = categoryFiles.filter(file => file.endsWith('.gif')).filter(file => file.startsWith(exampleKey));
+            // Check for .gif files
             if (gifFiles.length > 0) {
               outputFilePath = outputFilePath.replaceAll(".txt", ".gif");
+              mdxContent += `![${exampleKey} example](${outputFilePath})\n`
             }
             else {
-              console.log(kleur.red("\nError: No image or gif files found for " + exampleKey + "usage example"));
+              const webmFiles = categoryFiles.filter(file => file.endsWith('.webm'));
+              // Check for .webm files
+              if (webmFiles.length > 0) {
+                outputFilePath = outputFilePath.replaceAll(".txt", ".webm");
+                mdxContent += `<video controls style="max-width:100%; margin:auto; margin-top:16px;">\n`
+                mdxContent += `\t<source src="${outputFilePath}" type="video/webm" />\n`
+                mdxContent += `</video>\n`
+              }
+              else {
+                console.log(kleur.red("\nError: No image, gif or webm (audio) files found for " + exampleKey + "usage example"));
+              }
             }
           }
-
-          mdxContent += `![${exampleKey} example](${outputFilePath})\n`
           mdxContent += "\n---\n";
         });
       }
diff --git a/src/content/docs/usage-examples/CONTRIBUTING.mdx b/src/content/docs/usage-examples/CONTRIBUTING.mdx
index 9e04f287..b7fa732f 100644
--- a/src/content/docs/usage-examples/CONTRIBUTING.mdx
+++ b/src/content/docs/usage-examples/CONTRIBUTING.mdx
@@ -7,7 +7,10 @@ sidebar:
 To contribute a function usage example, you need to create the following files:
 
 - **Text file** (.txt) containing a title and short description of the example.
-- **Image file** (.png) (or **Gif file** (.gif) if the example code is interactive) showing the expected output of the example.
+- **Output Image/Video file** showing the expected output of the example. This output file needs to be one of the following:
+  - **Image file** (.png)
+  - **Gif file** (.gif) if the example code is interactive
+  - **Webm file** (.webm) if there is audio in the code example.
 - **Code files** with the example code. This must be a complete code example, not just a snippet of code.
 - ***Zip file*** (*only if your code requires resource files*) containing the "Resources" folder created with the `skm resources` command, with any resources needed for your example code to run. (More info about adding this at the end.)
 
@@ -79,13 +82,14 @@ Here is an example of the contents of the `write_line-2-extended.txt` file:
 The following code is an example of using [Write Line](/api/terminal#write-line-5) to create ASCII art of "Charlie the Unicorn" in the terminal.
 ```
 
-### Image of Gif file
+### Output Image/Gif/Audio file
 
 Add a screenshot of the output of the example program.
 
-If the example program includes user input or any movement, please create a Gif showing the program running.
+- If the example program includes user input or any movement, please create a Gif showing the program running.
+- If the example program includes audio, please create a Webm file showing the program running. You can use a tool such as [ffmpeg](https://ffmpeg.org/) to convert your video files to `.webm` files.
 
-Remove identifying details from the image/gif where possible.
+Remove identifying details from the image/gif/audio where possible.
 
 ### Code file(s)
 
@@ -125,7 +129,7 @@ To test this example code you can download these [**Resources**](/usage-examples
 
 Then update the link in the template above to add the `<category>`, `<unique-global-name>` and `<your-zip-file-name>`.
 
-eg. For the `draw_bitmap_named` example that has been created, the text file contents would look like this:
+eg. For the first `draw_bitmap_named` example that has been created, the text file contents would look like this:
 
 ```plaintext
 ### Basic Bitmap Drawing