Add plugins folder

penpot · Jul 15, 2024 · c025bfc · c025bfc
1 parent 875238c
commit c025bfc
Show file tree

Hide file tree

Showing 13 changed files with 1,006 additions and 0 deletions.
diff --git a/plugins/.gitignore b/plugins/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Bun lockfile (is optional)
+bun.lockb
diff --git a/plugins/LICENSE b/plugins/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) KALEIDOS INC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/plugins/README.md b/plugins/README.md
@@ -0,0 +1,60 @@
+# Penpot Plugin Starter Template
+
+This repository is designed to be your starting point for creating plugins for Penpot. Follow these instructions to set up your development environment and start building your own Penpot plugins.
+
+## Getting Started
+
+### Clone the Repository
+
+Begin by cloning this repository to your local machine. Use the following command in your terminal:
+
+```bash
+git clone --depth 1 https://github.com/penpot/penpot-plugin-starter-template penpot-plugin
+```
+
+This command clones the latest version of the template into a folder named `penpot-plugin`.
+
+### Configure the Plugin
+
+Next, you need to edit the plugin's configuration file:
+
+1. Navigate to the `penpot-plugin` directory.
+2. Open the `manifest.json` file located in the `/public` folder.
+3. Make any necessary changes to the configuration. Note that any modifications to this file require you to restart the development server for changes to take effect.
+
+### Run the Development Server
+
+To start the development server, run the following command in your terminal:
+
+```bash
+npm run dev
+```
+
+Once the server is running, open your web browser and go to `http://localhost:4400` to view your plugin in action. Now is ready to be loaded in Penpot.
+
+## Development
+
+### Technologies Used
+
+This plugin template uses several key technologies:
+
+- **TypeScript**
+- **Vite**
+- **Web Components**
+
+### Libraries Included
+
+The template includes two Penpot libraries to assist in your development:
+
+- `@penpot/plugin-styles`: This library provides utility functions and resources to help you style your components consistently with Penpot's design system.
+- `@penpot/plugin-types`: This library includes types and API descriptions for interacting with the Penpot plugin API, facilitating the development of plugins that can communicate effectively with the Penpot app.
+
+## Build Your Plugin
+
+When you're ready to build your plugin for production, run the following command:
+
+```bash
+npm run build
+```
+
+This command compiles your TypeScript code and assets into JavaScript, creating a `dist` folder that contains all the files necessary to deploy your plugin.
diff --git a/plugins/index.html b/plugins/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Penpot plugin example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>