Plugins: Add support for media links in plugin manifest.json (#6672)

packages/generator-joplin/generators/app/templates/src/manifest.json

@@ -9,5 +9,6 @@
 	"homepage_url": "<%= pluginHomepageUrl %>",
 	"repository_url": "<%= pluginRepositoryUrl %>",
 	"keywords": [],
-	"categories": []
+	"categories": [],
+	"screenshots": []
 }

packages/generator-joplin/generators/app/templates/webpack.config.js

@@ -30,6 +30,7 @@ const userConfig = Object.assign({}, {
 const manifestPath = `${srcDir}/manifest.json`;
 const packageJsonPath = `${rootDir}/package.json`;
 const allPossibleCategories = ['appearance', 'developer tools', 'productivity', 'themes', 'integrations', 'viewer', 'search', 'tags', 'editor', 'files', 'personal knowledge management'];
+const allPossibleScreenshotsType = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
@@ -76,11 +77,29 @@ function validateCategories(categories) {
 	});
 }
 
+function validateScreenshots(screenshots) {
+	if (!screenshots) return null;
+	screenshots.forEach(screenshot => {
+		if (!screenshot.src) throw new Error('You must specify a src for each screenshot');
+
+		const screenshotType = screenshot.src.split('.').pop();
+		if (!allPossibleScreenshotsType.includes(screenshotType)) throw new Error(`${screenshotType} is not a valid screenshot type. Valid types are: \n${allPossibleScreenshotsType}\n`);
+
+		const screenshotPath = path.resolve(srcDir, screenshot.src);
+		// Max file size is 1MB
+		const fileMaxSize = 1024;
+		const fileSize = fs.statSync(screenshotPath).size / 1024;
+		if (fileSize > fileMaxSize) throw new Error(`Max screenshot file size is ${fileMaxSize}KB. ${screenshotPath} is ${fileSize}KB`);
+	});
+}
+
+
 function readManifest(manifestPath) {
 	const content = fs.readFileSync(manifestPath, 'utf8');
 	const output = JSON.parse(content);
 	if (!output.id) throw new Error(`Manifest plugin ID is not set in ${manifestPath}`);
 	validateCategories(output.categories);
+	validateScreenshots(output.screenshots);
 	return output;
 }
 

packages/lib/services/plugins/utils/manifestFromObject.ts

@@ -1,4 +1,4 @@
-import { PluginManifest, PluginPermission } from './types';
+import { PluginManifest, PluginPermission, Screenshot } from './types';
 import validatePluginId from './validatePluginId';
 
 export default function manifestFromObject(o: any): PluginManifest {
@@ -31,6 +31,11 @@ export default function manifestFromObject(o: any): PluginManifest {
 		return o[name];
 	};
 
+	const getScreenshots = (defaultValue: Screenshot[] = []): Screenshot[] => {
+		if (!o.screenshots) return defaultValue;
+		return o.screenshots;
+	};
+
 	const permissions: PluginPermission[] = [];
 
 	const manifest: PluginManifest = {
@@ -46,6 +51,7 @@ export default function manifestFromObject(o: any): PluginManifest {
 		repository_url: getString('repository_url', false),
 		keywords: getStrings('keywords', false),
 		categories: getStrings('categories', false),
+		screenshots: getScreenshots(),
 		permissions: permissions,
 
 		_recommended: getBoolean('_recommended', false, false),

packages/lib/services/plugins/utils/types.ts

@@ -2,6 +2,11 @@ export enum PluginPermission {
 	Model = 'model',
 }
 
+export interface Screenshot {
+	src: string;
+	label: string;
+}
+
 export interface PluginManifest {
 	manifest_version: number;
 	id: string;
@@ -14,6 +19,7 @@ export interface PluginManifest {
 	repository_url?: string;
 	keywords?: string[];
 	categories?: string[];
+	screenshots?: Screenshot[];
 	permissions?: PluginPermission[];
 
 	// Private keys

readme/api/references/plugin_manifest.md

@@ -13,7 +13,8 @@ Name | Type | Required? | Description
 `keywords` | string[] | No | Keywords associated with the plugins. They are used in search in particular.
 `homepage_url` | string | No | Homepage URL of the plugin. It can also be, for example, a link to a GitHub repository.
 `repository_url` | string | No | Repository URL where the plugin source code is hosted.
-`categories` | string[] | No  | [Categories](#categories) that describes the functionality of the plugin. |
+`categories` | string[] | No | [Categories](#categories) that describes the functionality of the plugin. 
+`screenshots` | Screenshot[] | No  | [Screenshots](#Screenshot) are used for listing on Joplin Plugin website.
 
 ## Categories
 
@@ -31,6 +32,13 @@ Name | Type | Required? | Description
 | themes |  changing theme of the app. |
 | viewer | enhancing the rendering of a note. |
 
+## Screenshot
+
+| Properties | Description |
+| --- | --- |
+| src | a relative path to src dir. |
+| label | description of the image. |
+
 ## Manifest example
 
 ```json
@@ -41,6 +49,10 @@ Name | Type | Required? | Description
     "version": "1.0.0",
     "author": "John Smith",
     "app_min_version": "1.4",
-    "homepage_url": "https://joplinapp.org"
+    "homepage_url": "https://joplinapp.org",
+    "screenshots": [{
+        "src": "path/to/image.png",
+        "label": "image description"
+    }]
 }
 ```