Allow extensions to contribute getting started content #119097
Description
We want to allow extensions to contribute items to the welcome page's getting started section:
Using a package.json like this:
"welcomeCategories": [
{
"id": "exampleProject",
"title": "Turn Markdown into HTML",
"description": "Use this sample project to learn how to convert Markdown to HTML!"
}
],
"welcomeItems": {
"exampleProject": [
{
"id": "md-to-html.openExample",
"title": "Open an example folder",
"description": "To start, try opening an example folder that has been preconfigured for this tutorial. This is optional, but helps for following along!",
"button": {
"title": "Open Example",
"command": "md-to-html.openExample"
},
"media": {
"path": "media/example-project.png",
"altText": "example project"
}
},
{
"id": "md-to-html.showPreview",
"title": "Preview your Markdown",
"description": "Open a markdown file and click the \"Open Preview\" button at the top of the screen to see a preview of your file. This is technically optional, but it updates live and is helpful to check when creating your content!",
"button": {
"title": "Open Markdown File",
"command": "md-to-html.openMarkdown"
},
"media": {
"path": "media/preview.png",
"altText": "preview"
},
"doneOn": {"command": "markdown.showPreviewToSide" }
},
{
"id": "md-to-html.convertToHTML",
"title": "Create your .html file",
"description": "To create the html file, run \"Convert Document to HTML\" from the editor actions context menu, behind the three dots top of the screen. This will create an .html file along side the markdown file.",
"button": {
"title": "Open Markdown File",
"command": "md-to-html.openMarkdown"
},
"media": {
"path": "media/convert-option.png",
"altText": "showing editor actions context menu"
},
"doneOn": {"command": "md-to-html.convertToHTML" }
},
{
"id": "md-to-html.openInBrowser",
"title": "Open your .html file in the browser",
"description": "Test that everything worked by opening the .html file in your browser. First open the html file in vscode, then right click in the editor and choose \"Open in Default Browser\".",
"button": {
"title": "Open HTML File",
"command": "md-to-html.openHTML"
},
"media": {
"path": "media/open-in-browser.png",
"altText": "use editor context menu to open an .html file in your browser"
},
"doneOn": {"command": "extension.openInDefaultBrowser" }
},
{
"id": "md-to-html.addKeybinding",
"title": "Create a keyboard shortcut",
"description": "That's all! You can share that single .html file with anyone without needing to bundle the images. To make this even easier in the future, consider adding a keybinding for the \"Convert Document to HTML\" command.",
"button": {
"title": "Add a keybinding",
"command": "md-to-html.addKeybinding"
},
"media": {
"path": "media/add-keybinding.png",
"altText": "use the keybindings editor to add a keybinding for this command"
}
}
]
},This is the change to the extension contributions interface:
export interface IExtensionContributions {
.....
welcomeItems?: { [category: string]: IWelcomeItem[] };
welcomeCategories?: IWelcomeCategory[];
.....
}export interface IWelcomeItem {
readonly id: string;
readonly title: string;
readonly description: string;
readonly button: { title: string } & ({ command?: never, link: string } | { command: string, link?: never }),
readonly media: { path: string | { hc: string, light: string, dark: string }, altText: string },
readonly doneOn?:
| { event: string; command?: never }
| { event?: never; command: string };
readonly when?: string;
}
export interface IWelcomeCategory {
readonly id: string,
readonly title: string;
readonly description: string;
readonly when?: string;
}