feat: add thumbnail to samples (#1026)

* feat: add thumbnail check to validator * feat: add thumbnail to samples * feat: add thumbnail to samples * fix: redundant gif path * fix: validation script in CI
OfficeDev · Sep 14, 2023 · 9b0580f · 9b0580f
1 parent a31531e
commit 9b0580f
Show file tree

Hide file tree

Showing 26 changed files with 139 additions and 119 deletions.
diff --git a/.config/samples-config-v3.json b/.config/samples-config-v3.json
@@ -17,6 +17,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": true
         },
@@ -36,6 +37,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": true
         },
@@ -57,6 +59,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -77,6 +80,7 @@
             ],
             "time": "1hr to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -96,7 +100,7 @@
             ],
             "time": "30min to run",
             "configuration": "Ready for debug",
-            "gifPath": "images/preview.png",
+            "thumbnailPath": "images/thumbnail.png",
             "suggested": false
         },
         {
@@ -118,6 +122,7 @@
             ],
             "time": "30min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -138,6 +143,7 @@
             ],
             "time": "45min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -157,6 +163,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "images/send-proactive-messages.gif",
             "gifPath": "images/send-proactive-messages.gif",
             "suggested": false,
             "downloadUrl": "https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-proactive-messaging-teamsfx"
@@ -177,6 +184,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -196,6 +204,7 @@
             ],
             "time": "5min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -217,6 +226,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -236,6 +246,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -257,6 +268,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -278,6 +290,7 @@
             ],
             "time": "10min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -299,6 +312,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -321,6 +335,7 @@
             ],
             "time": "30min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -342,6 +357,7 @@
             ],
             "time": "30min to run",
             "configuration": "Ready for debug",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -361,7 +377,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
-            "gifPath": "assets/sampleDemo.png",
+            "thumbnailPath": "assets/thumbnail.png",
             "suggested": false
         },
         {
@@ -379,7 +395,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
-            "gifPath": "assets/outlook-set-signature-overview.png",
+            "thumbnailPath": "assets/outlook-set-signature-overview.png",
             "suggested": false,
             "downloadUrl": "https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/outlook-set-signature"
         },
@@ -400,7 +416,7 @@
             ],
             "time": "15min to run",
             "configuration": "Manual configurations required",
-            "gifPath": "images/preview.png",
+            "thumbnailPath": "images/preview.png",
             "suggested": false
         },
         {
@@ -421,6 +437,7 @@
             ],
             "time": "5 min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -441,6 +458,7 @@
             ],
             "time": "5min to run",
             "configuration": "Manual configurations required",
+            "thumbnailPath": "assets/thumbnail.png",
             "gifPath": "assets/sampleDemo.gif",
             "suggested": false
         },
@@ -462,7 +480,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
-            "gifPath": "src/assets/screenshot.png",
+            "thumbnailPath": "src/assets/screenshot.png",
             "suggested": false
         },
         {
@@ -482,7 +500,7 @@
             ],
             "time": "5min to run",
             "configuration": "Ready for debug",
-            "gifPath": "assets/screenshot.png",
+            "thumbnailPath": "assets/screenshot.png",
             "suggested": false
         }
     ]

diff --git a/NPM-search-connector-M365/assets/thumbnail.png b/NPM-search-connector-M365/assets/thumbnail.png
diff --git a/adaptive-card-notification/assets/thumbnail.png b/adaptive-card-notification/assets/thumbnail.png
diff --git a/bot-sso/assets/thumbnail.png b/bot-sso/assets/thumbnail.png
diff --git a/graph-connector-app/assets/thumbnail.png b/graph-connector-app/assets/thumbnail.png
diff --git a/graph-toolkit-contact-exporter/assets/thumbnail.png b/graph-toolkit-contact-exporter/assets/thumbnail.png
diff --git a/graph-toolkit-one-productivity-hub/assets/thumbnail.png b/graph-toolkit-one-productivity-hub/assets/thumbnail.png
diff --git a/hello-world-in-meeting/images/preview.png → hello-world-in-meeting/images/thumbnail.png b/hello-world-in-meeting/images/preview.png → hello-world-in-meeting/images/thumbnail.png
diff --git a/hello-world-tab-with-backend/assets/thumbnail.png b/hello-world-tab-with-backend/assets/thumbnail.png
diff --git a/...-and-outlook-add-in/assets/sampleDemo.png → ...b-and-outlook-add-in/assets/thumbnail.png b/...-and-outlook-add-in/assets/sampleDemo.png → ...b-and-outlook-add-in/assets/thumbnail.png
diff --git a/incoming-webhook-notification/assets/thumbnail.png b/incoming-webhook-notification/assets/thumbnail.png
diff --git a/live-share-dice-roller/assets/thumbnail.png b/live-share-dice-roller/assets/thumbnail.png
diff --git a/query-org-user-with-message-extension-sso/assets/thumbnail.png b/query-org-user-with-message-extension-sso/assets/thumbnail.png
diff --git a/share-now/assets/thumbnail.png b/share-now/assets/thumbnail.png
diff --git a/stocks-update-notification-bot/assets/thumbnail.png b/stocks-update-notification-bot/assets/thumbnail.png
diff --git a/team-central-dashboard/assets/thumbnail.png b/team-central-dashboard/assets/thumbnail.png
diff --git a/teams-chef-bot/assets/thumbnail.png b/teams-chef-bot/assets/thumbnail.png
diff --git a/todo-list-SPFx/assets/thumbnail.png b/todo-list-SPFx/assets/thumbnail.png
diff --git a/todo-list-with-Azure-backend-M365/assets/thumbnail.png b/todo-list-with-Azure-backend-M365/assets/thumbnail.png
diff --git a/todo-list-with-Azure-backend/assets/thumbnail.png b/todo-list-with-Azure-backend/assets/thumbnail.png
diff --git a/validation-tool/src/index.ts b/validation-tool/src/index.ts
@@ -9,7 +9,7 @@ import standard from "figlet/importable-fonts/Standard.js";
 import { outputResult } from "./util";
 import validateEnvFiles from "./validators/envValidator";
 import validateFolderStructure from "./validators/folderStructureValidator";
-import validateGif from "./validators/gifValidator";
+import validateImage from "./validators/imageValidator";
 import validatePackageJson from "./validators/packageJsonValidator";
 import validateTeamsAppManifest from "./validators/teamsAppManifestValidator";
 import validateTeamsAppYaml from "./validators/teamsAppYamlValidator";
@@ -22,7 +22,7 @@ const validators = [
   validateTeamsAppYaml,
   validateTeamsAppManifest,
   validateEnvFiles,
-  validateGif,
+  validateImage,
   validatePackageJson,
 ];
 

diff --git a/validation-tool/src/validators/gifValidator.ts b/validation-tool/src/validators/gifValidator.ts
diff --git a/validation-tool/src/validators/imageValidator.ts b/validation-tool/src/validators/imageValidator.ts
@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import fs from "fs-extra";
+import path from "path";
+import sizeOf from "image-size";
+import { Result } from "../resultType";
+
+/**
+ * Rule 1: Images should have 1600*920/800*460 resolution or same ratio.
+ * 
+ * @param projectDir root directory of the project
+ * @returns validation result
+ */
+export default async function validateImage(projectDir: string): Promise<Result> {
+  const result: Result = {
+    name: "Image Files",
+    passed: [],
+    failed: [],
+    warning: [],
+  };
+  const defaultImages = ["thumbnail.png", "sampleDemo.gif"];
+  for (const image of defaultImages) {
+    const imageDefaultPath = path.join(projectDir, "assets", image);
+    const imageName = path.join("assets", image);
+    if (!await fs.exists(imageDefaultPath)) {
+      result.warning.push(`${imageName} does not exist.`);
+      continue;
+    }
+    const dimensions = sizeOf(imageDefaultPath);
+    if (dimensions.width && dimensions.height && dimensions.width / dimensions.height === 40/23) {
+      result.passed.push(`${imageName} has 1600*920/800*460 resolution or same ratio.`);
+    } else {
+      result.failed.push(`${imageName} should have 1600*920/800*460 resolution or same ratio.`);
+    }
+  }
+  return result;
+}
diff --git a/...tool/test/validators/gifValidator.test.ts → ...ol/test/validators/imageValidator.test.ts b/...tool/test/validators/gifValidator.test.ts → ...ol/test/validators/imageValidator.test.ts
@@ -5,9 +5,9 @@ import mock from "mock-fs";
 import fs from "fs-extra";
 import path from "path";
 
-import validateGif from "../../src/validators/gifValidator";
+import validateImage from "../../src/validators/imageValidator";
 
-describe('validateGif()', () => {
+describe('validateImage()', () => {
   afterEach(() => {
     mock.restore();
   });
@@ -18,11 +18,11 @@ describe('validateGif()', () => {
       },
     });
 
-    const result = await validateGif(path.join(process.cwd(), "testFolder"));
-    expect(result.name).toEqual("GIF Demo File");
+    const result = await validateImage(path.join(process.cwd(), "testFolder"));
+    expect(result.name).toEqual("Image Files");
     expect(result.failed.length).toBe(0);
     expect(result.passed.length).toBe(0);
-    expect(result.warning.length).toBe(1);
+    expect(result.warning.length).toBe(2);
   });
 
   test('valid GIF', async () => {
@@ -35,11 +35,11 @@ describe('validateGif()', () => {
       },
     });
 
-    const result = await validateGif(path.join(process.cwd(), "testFolder"));
-    expect(result.name).toEqual("GIF Demo File");
+    const result = await validateImage(path.join(process.cwd(), "testFolder"));
+    expect(result.name).toEqual("Image Files");
     expect(result.failed.length).toBe(0);
     expect(result.passed.length).toBe(1);
-    expect(result.warning.length).toBe(0);
+    expect(result.warning.length).toBe(1);
   });
 
   test('invalid GIF', async () => {
@@ -52,10 +52,10 @@ describe('validateGif()', () => {
       },
     });
 
-    const result = await validateGif(path.join(process.cwd(), "testFolder"));
-    expect(result.name).toEqual("GIF Demo File");
+    const result = await validateImage(path.join(process.cwd(), "testFolder"));
+    expect(result.name).toEqual("Image Files");
     expect(result.failed.length).toBe(1);
     expect(result.passed.length).toBe(0);
-    expect(result.warning.length).toBe(0);
+    expect(result.warning.length).toBe(1);
   });
 });
diff --git a/validation-tool/validate-config.js b/validation-tool/validate-config.js
@@ -15,7 +15,7 @@ const mandatoryFields = [
   "tags",
   "time",
   "configuration",
-  "gifPath",
+  "thumbnailPath",
   "suggested",
 ];