diff --git a/docs/site/docs/__examples/_category_.json b/docs/site/docs/__examples/_category_.json deleted file mode 100644 index 73d20c19a..000000000 --- a/docs/site/docs/__examples/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Examples", - "position": 6 -} diff --git a/docs/site/docs/__examples/jira-integration.md b/docs/site/docs/__examples/jira-integration.md deleted file mode 100644 index 4494e86d6..000000000 --- a/docs/site/docs/__examples/jira-integration.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Jira integration diff --git a/docs/site/docs/__examples/plugin-catalog.md b/docs/site/docs/__examples/plugin-catalog.md deleted file mode 100644 index 1f64ce732..000000000 --- a/docs/site/docs/__examples/plugin-catalog.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Plugin catalog - -You can build a catalog of the plugins that you have installed in your Backstage instance. -The catalog will contain: - -- A list of all the plugins that you have installed -- A search bar to search for plugins -- A scorecard for each plugin that will show you the status of the plugin -- A status indicator for each plugin -- A kill switch to disable a plugin diff --git a/docs/site/docs/installation.md b/docs/site/docs/__installation.md similarity index 100% rename from docs/site/docs/installation.md rename to docs/site/docs/__installation.md diff --git a/docs/site/docs/examples/_cards.mdx b/docs/site/docs/examples/_cards.mdx new file mode 100644 index 000000000..1a79ee043 --- /dev/null +++ b/docs/site/docs/examples/_cards.mdx @@ -0,0 +1,22 @@ +
+
+

Dev Daily Plugin

+

A developer productivity dashboard showcasing developer-centric metrics and insights.

+
+ +
+

Security Plugin

+

A security dashboard that helps you manage security policies and compliance.

+
+ +
+

Incident Management Plugin

+

An incident management dashboard that helps you manage incidents and be more efficient when you are on call.

+
+ +
+

More Coming Soon

+

We're working on additional example plugins to support more use cases.

+
+ +
diff --git a/docs/site/docs/examples/_category_.json b/docs/site/docs/examples/_category_.json new file mode 100644 index 000000000..54600239d --- /dev/null +++ b/docs/site/docs/examples/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Enterprise-Ready Plugins", + "position": 6 +} diff --git a/docs/site/docs/examples/dev-daily.md b/docs/site/docs/examples/dev-daily.md new file mode 100644 index 000000000..feb25bc83 --- /dev/null +++ b/docs/site/docs/examples/dev-daily.md @@ -0,0 +1,40 @@ +--- +title: Dev Daily Plugin +description: A dashboard that consolidates developers' daily activities like pull requests, tasks and reviews to help plan and manage their day. +sidebar_position: 2 +--- + +# Dev Daily Plugin + +The Dev Daily Plugin provides developers with a consolidated dashboard of their daily development activities, including pull requests, tasks, and reviews. This plugin helps developers efficiently plan and manage their day by bringing together key information in one place. + +![Dev Daily Plugin Dashboard](/img/dev-daily/plan-my-day.png) + +## Prerequisites + +- Complete the [Getting Started](/getting-started) guide +- Jira and Github accounts + +## Install + +```bash +yarn --cwd packages/app add @port-labs/backstage-plugin-dev-daily +``` + +Next, add the `DevDailyPage` component to your Backstage instance. + +In the file `packages/app/src/App.tsx`, add the route: + +```tsx +import { DevDailyPluginPage } from "@port-labs/backstage-plugin-dev-daily"; +// ... +} />; +``` + +Then add the link to the NavBar, in the file: `packages/app/src/components/Root/Root.tsx`: + +```tsx +import AssignmentTurnedInIcon from "@material-ui/icons/AssignmentTurnedIn"; +// ... +; +``` diff --git a/docs/site/docs/examples/incident-management.md b/docs/site/docs/examples/incident-management.md new file mode 100644 index 000000000..8ba4225cf --- /dev/null +++ b/docs/site/docs/examples/incident-management.md @@ -0,0 +1,9 @@ +--- +title: Incident Management Plugin +description: A plugin that helps you manage incidents and be more efficient when you are on call. +sidebar_position: 4 +--- + +# Incident Management Plugin + +Coming soon... diff --git a/docs/site/docs/examples/intro.md b/docs/site/docs/examples/intro.md new file mode 100644 index 000000000..1c1d24577 --- /dev/null +++ b/docs/site/docs/examples/intro.md @@ -0,0 +1,22 @@ +--- +title: Introduction +description: Example plugins showcasing Port's plugin framework capabilities +sidebar_position: 1 +slug: /examples +--- + +import Cards from './\_cards.mdx'; + +# Enterprise-Ready Plugins + +Port's plugin framework for Backstage empowers you to build custom plugins that perfectly match your organization's needs. To help you get started, we provide free, enterprise-grade example plugins. + +## Available plugins + + + +## Build Your Own + +Remember, these examples are just the beginning. Port's plugin framework enables you to build any custom functionality your organization needs. Whether you want to modify these examples or create entirely new plugins from scratch, the framework provides the foundation for building powerful Backstage extensions. + +Check out our [Getting Started guide](../getting-started.md) to begin building your own custom plugins. diff --git a/docs/site/docs/examples/security.md b/docs/site/docs/examples/security.md new file mode 100644 index 000000000..ac283750d --- /dev/null +++ b/docs/site/docs/examples/security.md @@ -0,0 +1,9 @@ +--- +title: Security Plugin +description: A plugin that helps you manage security policies and compliance. +sidebar_position: 3 +--- + +# Security Plugin + +Coming soon... diff --git a/docs/site/docs/getting-started.md b/docs/site/docs/getting-started.md index 9037f2337..64d1cad86 100644 --- a/docs/site/docs/getting-started.md +++ b/docs/site/docs/getting-started.md @@ -6,6 +6,8 @@ sidebar_position: 2 Let's discover **Port's Backstage plugin in less than 5 minutes**. +![Dev Daily Plugin Dashboard](/img/dev-daily/plan-my-day.png) + ### Prerequisites - A Backstage instance @@ -31,24 +33,6 @@ Then register the backend plugin in `packages/backend/src/index.ts`: backend.add(import("@port-labs/backstage-plugin-framework-backend")); ``` -Finally, add components as you like from the frontend plugin to your Backstage instance. - -For example, let's add the Scorecard component to the NavBar: - -in the file: `packages/app/src/App.tsx`, add the route: - -```typescript -} /> -``` - -and then add the link to the NavBar, in the file: `packages/app/src/components/Root/Root.tsx`: - -```typescript - -``` - -![Scorecards page](/img/scorecards.png) - ### Configure Credentials 1. In Port, on the top right, click on the `...` (three dots) and select **Credentials**. @@ -68,6 +52,35 @@ and then add the link to the NavBar, in the file: `packages/app/src/components/R Read more [find your Port credentials](https://docs.getport.io/build-your-software-catalog/custom-integration/api/#find-your-port-credentials) +## Adding the settings page + +The settings page is a page that allows you to configure the plugin. + +To add the settings page, you need to add the `SettingsPage` component to your Backstage instance. + +In the file `packages/app/src/App.tsx`, replace the `}>` with the following code: + +```tsx +import { SettingsPage } from "@port-labs/backstage-plugin-framework"; + +// ... +}> + + } + /> + +; +``` + +## Example out-of-the-box plugin - Dev Daily + +Follow the [Dev Daily Plugin documentation](./examples/dev-daily.md) to learn how to use the Dev Daily Plugin. + +![Dev Daily Plugin Dashboard](/img/dev-daily/plan-my-day.png) + ## Extend your Backstage instance Take your Backstage instance to the next level by integrating with Port's powerful API. diff --git a/docs/site/docs/intro.md b/docs/site/docs/intro.md index 12f631c10..204b8d13c 100644 --- a/docs/site/docs/intro.md +++ b/docs/site/docs/intro.md @@ -3,22 +3,32 @@ sidebar_position: 1 slug: / --- +import Cards from './examples/\_cards.mdx'; + # Introduction -The Port Backstage plugin allows you to ramp up your Backstage instance quickly. -Building a developer portal from scratch can be a daunting task, but with the Port Backstage plugin, you can have a **fully functional portal in days not months**. +The **Backstage Plugin Framework** by Port will help you build plugins for your Backstage instance faster. + +We are also providing a few enterprise-ready example plugins to help you get started. + +Building a developer portal from scratch can be a daunting task, but with the **Backstage Plugin Framework** by Port, you can have a **fully functional portal in days not months**.
- Port Backstage plugin + Port Backstage plugin
-With this plugin, you can: +With this framework, you can: -- Build new plugin with **PortSDK** in days and not months -- Consolidate data from multiple sources into a single, unified view -- Implement governance and compliance through Port's rules engine and scorecards -- Enable self-service actions for developers +- Build a new plugin with the framework in days and not months +- Use our enterprise-ready [out-of-the-box plugins](/examples) to get started faster - Integrate with 50+ tools and services through Port's extensive integration library +- Use our rules engine to build scorecards which promote standards across your software catalog + +## Enterprise-Ready Plugins + +Port's plugin framework for Backstage empowers you to build custom plugins that perfectly match your organization's needs. To help you get started, we provide free, enterprise-grade example plugins. + + ## Key benefits diff --git a/docs/site/docusaurus.config.ts b/docs/site/docusaurus.config.ts index a8fc17985..0a2e26488 100644 --- a/docs/site/docusaurus.config.ts +++ b/docs/site/docusaurus.config.ts @@ -4,8 +4,8 @@ import { themes as prismThemes } from "prism-react-renderer"; import tailwindPlugin from "./src/plugins/tailwind-config.cjs"; const config: Config = { - title: "Port Backstage Plugin", - tagline: "Combine all your integrations in one plugin", + title: "Port Plugin Framework for Backstage", + tagline: "Build plugins for your Backstage instance faster", favicon: "img/icon.svg", url: "https://docs.backstage-plugin.getport.io", @@ -45,7 +45,7 @@ const config: Config = { // Replace with your project's social card image: "img/icon.svg", navbar: { - title: "Port Backstage Plugin", + title: "Backstage Plugin Framework", logo: { alt: "Port Logo", src: "img/icon.svg", diff --git a/docs/site/static/img/dev-daily/my-open-prs.png b/docs/site/static/img/dev-daily/my-open-prs.png new file mode 100644 index 000000000..e64bf2c4d Binary files /dev/null and b/docs/site/static/img/dev-daily/my-open-prs.png differ diff --git a/docs/site/static/img/dev-daily/plan-my-day.png b/docs/site/static/img/dev-daily/plan-my-day.png new file mode 100644 index 000000000..eb161fe10 Binary files /dev/null and b/docs/site/static/img/dev-daily/plan-my-day.png differ diff --git a/docs/site/static/img/plugin-base.png b/docs/site/static/img/plugin-base.png index bf401b19e..45246b045 100644 Binary files a/docs/site/static/img/plugin-base.png and b/docs/site/static/img/plugin-base.png differ