diff --git a/docs/create-angular-plugin.md b/docs/create-angular-plugin.md index 13b711e..961928b 100644 --- a/docs/create-angular-plugin.md +++ b/docs/create-angular-plugin.md @@ -1,6 +1,12 @@ # Creating a Plugin -This guide walks you through the steps to create an Angular plugin. +This guide walks you through the steps to create an Angular plugin for our platform. You'll start by setting up the basic structure, configuring necessary files, and then running a local server to preview your plugin. + +If you prefer to create the plugin without a specific framework there's also [Creating a Plugin](./create-plugin.md). + +Keep in mind that this guide is for creating a plugin **inside `penpot-plugins` monorepo**. If you want to create a plugin outside our environment you can check the [Penpot Plugin Starter Template](https://github.com/penpot/penpot-plugin-starter-template) or the documentation at [Create a Plugin](https://help.penpot.app/technical-guide/plugins/create-a-plugin/). + +Let's dive in. ### Step 1: Initialize the Plugin @@ -58,6 +64,8 @@ Add the default port to the `serve.configurations.development` task: } ``` +For choosing the port go check the Sample Plugins table at the [README](../README.md) so your plugin doesn't use a duplicate port. We're using the range 4300-4399. + ### Step 4: Modify TypeScript Configuration Create ``tsconfig.plugin.json` next to the `tsconfig.json`: @@ -118,11 +126,13 @@ This will run two tasks: `serve`, the usual Angular server, and `buildPlugin`, w ### Step 8: Load the Plugin in Penpot -Finally, to load your plugin into Penpot, execute the following command in the browser's console devtools: +To load your plugin into Penpot you can use the shortcut `Ctrl + Alt + P` to directly open the Plugin manager modal. There you need to provide the plugin's manifest URL (example: `http://plugin.example/manifest.json`) for the installation. If there's no issues the plugin will be installed and then you would be able to open it whenever you like. -```typescript -ɵloadPluginByUrl('http://localhost:4201/assets/manifest.json'); -``` +You can also open the Plugin manager modal via: + +- Menu + + ![Penpot's menu image](./images/plugin-menu.png) ### Step 9: Build plugin @@ -134,9 +144,4 @@ npx nx run example-plugin:build For more detailed information on plugin development, check out our guides: -- [Plugin Usage Documentation](docs/plugin-usage.md) -- [Create API Documentation](docs/create-api.md) - -### Using a Starter Template - -If you prefer to kickstart your plugin development, consider using the [Penpot Plugin Starter Template](https://github.com/penpot/penpot-plugin-starter-template). It's a template designed to streamline the creation process for Penpot plugins. +- [Plugin Usage Documentation](,/plugin-usage.md) diff --git a/docs/create-plugin.md b/docs/create-plugin.md index f2b4c1f..2d1ca08 100644 --- a/docs/create-plugin.md +++ b/docs/create-plugin.md @@ -1,6 +1,12 @@ # Creating a Plugin -This guide walks you through the steps to create a plugin for our platform. You'll start by setting up the basic structure, configuring necessary files, and then running a local server to preview your plugin. Let's dive in. +This guide walks you through the steps to create a plugin for our platform. You'll start by setting up the basic structure, configuring necessary files, and then running a local server to preview your plugin. + +If you prefer to create the plugin with angular, there's also a [Creating a Plugin (angular)](./create-angular-plugin.md). + +Keep in mind that this guide is for creating a plugin **inside `penpot-plugins` monorepo**. If you want to create a plugin outside our environment you can check the [Penpot Plugin Starter Template](https://github.com/penpot/penpot-plugin-starter-template) or the documentation at [Create a Plugin](https://help.penpot.app/technical-guide/plugins/create-a-plugin/). + +Let's dive in. ### Step 1: Initialize the Plugin @@ -77,19 +83,16 @@ Add these options to the end of the `eslint.config.js` file to allow linting wit ### Step 7: Load the Plugin in Penpot -Finally, to load your plugin into Penpot, execute the following command in the browser's console devtools: +To load your plugin into Penpot you can use the shortcut `Ctrl + Alt + P` to directly open the Plugin manager modal. There you need to provide the plugin's manifest URL (example: `http://plugin.example/manifest.json`) for the installation. If there's no issues the plugin will be installed and then you would be able to open it whenever you like. -```typescript -ɵloadPluginByUrl('http://localhost:4201/manifest.json'); -``` +You can also open the Plugin manager modal via: + +- Menu + + ![Penpot's menu image](./images/plugin-menu.png) ### Learn More About Plugin Development For more detailed information on plugin development, check out our guides: -- [Plugin Usage Documentation](docs/plugin-usage.md) -- [Create API Documentation](docs/create-api.md) - -### Using a Starter Template - -If you prefer to kickstart your plugin development, consider using the [Penpot Plugin Starter Template](https://github.com/penpot/penpot-plugin-starter-template). It's a template designed to streamline the creation process for Penpot plugins. +- [Create API Documentation](./create-api.md) diff --git a/docs/images/plugin-menu.png b/docs/images/plugin-menu.png new file mode 100644 index 0000000..61f3b25 Binary files /dev/null and b/docs/images/plugin-menu.png differ diff --git a/docs/publish-package.md b/docs/publish-package.md index ed2e77a..4763ebf 100644 --- a/docs/publish-package.md +++ b/docs/publish-package.md @@ -1,5 +1,7 @@ # Publishing Packages +- DEPRECATED - + ## Introduction This guide details the process of publishing `plugin-types` and `plugins-styles` packages, which are essential for plugin development. To facilitate testing and distribution, we leverage npm for publishing and Verdaccio for setting up a local registry. Below is a walkthrough for publishing these packages, setting up a local registry, and managing releases.