diff --git a/docs/plugins/add-to-marketplace.md b/docs/plugins/add-to-marketplace.md new file mode 100644 index 0000000000..23cfecd5d0 --- /dev/null +++ b/docs/plugins/add-to-marketplace.md @@ -0,0 +1,23 @@ +--- +id: add-to-marketplace +title: Add to Marketplace +--- + +## Adding a Plugin to the Marketplace + +To add a new plugin to the [plugin marketplace](https://backstage.io/plugins) +create a file in `data/plugins` with your plugin's information. Example: + +```yaml +--- +title: Your Plugin +author: Your Name +authorUrl: # A link to information about the author E.g. Company url, github user profile, etc +category: Monitoring # A single category e.g. CI, Machine Learning, Services, Monitoring +description: A brief description of the plugin. # Max 170 characters +documentation: # A link to your documentation E.g. Your github README +iconUrl: # Used as the src attribute for your logo. +# You can provide an external url or add your logo under static/img and provide a path +# relative to static/ e.g. img/my-logo.png +npmPackageName: # Your npm package name E.g. '@backstage/plugin-' quotes are required +``` diff --git a/microsite/data/plugins/rollbar.yaml b/microsite/data/plugins/rollbar.yaml new file mode 100644 index 0000000000..0118fab391 --- /dev/null +++ b/microsite/data/plugins/rollbar.yaml @@ -0,0 +1,10 @@ +--- +title: Rollbar +author: '@andrewthauer' +authorUrl: https://github.com/andrewthauer +category: Monitoring +description: View Rollbar errors for your services in Backstage. +documentation: https://github.com/spotify/backstage/tree/master/plugins/rollbar +iconUrl: https://rollbar.com/assets/media/rollbar-mark-color.png +npmPackageName: '@backstage/plugin-rollbar' + diff --git a/microsite/data/plugins/sentry.yaml b/microsite/data/plugins/sentry.yaml new file mode 100644 index 0000000000..7ca291acea --- /dev/null +++ b/microsite/data/plugins/sentry.yaml @@ -0,0 +1,10 @@ +--- +title: Sentry +author: Spotify +authorUrl: https://www.spotify.com/ +category: Monitoring +description: View Sentry issues in Backstage. +documentation: https://github.com/spotify/backstage/tree/master/plugins/sentry +iconUrl: https://sentry-brand.storage.googleapis.com/sentry-glyph-white.png +npmPackageName: '@backstage/plugin-sentry' + diff --git a/microsite/data/plugins/travis-ci.yaml b/microsite/data/plugins/travis-ci.yaml new file mode 100644 index 0000000000..48c0a4cb86 --- /dev/null +++ b/microsite/data/plugins/travis-ci.yaml @@ -0,0 +1,10 @@ +--- +title: Travis CI +author: roadie.io +authorUrl: https://roadie.io/ +category: CI +description: View Travis CI builds for your service in Backstage. +documentation: https://roadie.io/backstage/plugins/travis-ci +iconUrl: https://roadie.io/static/af2941eaf0af675facb281d566f42e14/45f2b/travis-ci-mascot-200x200.png +npmPackageName: '@roadiehq/backstage-plugin-travis-ci' + diff --git a/microsite/i18n/en.json b/microsite/i18n/en.json index 9d83dfcef9..f61442e938 100644 --- a/microsite/i18n/en.json +++ b/microsite/i18n/en.json @@ -199,6 +199,9 @@ "overview/what-is-backstage": { "title": "What is Backstage?" }, + "plugins/add-to-marketplace": { + "title": "Add to Marketplace" + }, "plugins/backend-plugin": { "title": "Backend plugin" }, @@ -295,6 +298,7 @@ "Docs": "Docs", "Blog": "Blog", "Demos": "Demos", + "Plugins": "Plugins", "Newsletter": "Newsletter" }, "categories": { diff --git a/microsite/package.json b/microsite/package.json index 035c7438a4..baaf9ccaf4 100644 --- a/microsite/package.json +++ b/microsite/package.json @@ -13,6 +13,7 @@ "rename-version": "docusaurus-rename-version" }, "devDependencies": { - "docusaurus": "^2.0.0-alpha.61" + "docusaurus": "^2.0.0-alpha.61", + "js-yaml": "^3.14.0" } } diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js new file mode 100644 index 0000000000..916f34c21e --- /dev/null +++ b/microsite/pages/en/plugins.js @@ -0,0 +1,84 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +const fs = require('fs'); +const yaml = require('js-yaml'); +const React = require('react'); +const Components = require(`${process.cwd()}/core/Components.js`); +const { + Block: { Container }, + BulletLine, +} = Components; + +const pluginsDirectory = require('path').join(process.cwd(), 'data/plugins'); +const pluginMetadata = fs + .readdirSync(pluginsDirectory) + .map(file => + yaml.safeLoad(fs.readFileSync(`./data/plugins/${file}`, 'utf8')), + ); +const truncate = text => + text.length > 170 ? text.substr(0, 170) + '...' : text; + +const addPluginDocsLink = '/docs/plugins/add-to-marketplace'; +const defaultIconUrl = 'img/logo-gradient-on-dark.svg'; + +const Plugins = () => ( +
+
+
+

Plugins

+ + + Add Plugin + + +
+ + + {pluginMetadata.map( + ({ + iconUrl, + title, + description, + author, + authorUrl, + documentation, + category, + }) => ( +
+
+ {title} +

{title}

+

+ by {author} +

+ {category} +
+
+

{truncate(description)}

+
+ + + + docs + + + +
+ ), + )} + +
+
+); + +module.exports = Plugins; diff --git a/microsite/sidebars.json b/microsite/sidebars.json index 72a9388818..5d8952ac41 100644 --- a/microsite/sidebars.json +++ b/microsite/sidebars.json @@ -91,7 +91,7 @@ { "type": "subcategory", "label": "Publishing", - "ids": ["plugins/publishing", "plugins/publish-private"] + "ids": ["plugins/publishing", "plugins/publish-private", "plugins/add-to-marketplace"] } ], "Configuration": [ diff --git a/microsite/siteConfig.js b/microsite/siteConfig.js index 73852d6ddd..cc5ad89e09 100644 --- a/microsite/siteConfig.js +++ b/microsite/siteConfig.js @@ -38,6 +38,10 @@ const siteConfig = { href: '/docs', label: 'Docs', }, + { + page: 'plugins', + label: 'Plugins', + }, { page: 'blog', blog: true, diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css new file mode 100644 index 0000000000..042e2954e1 --- /dev/null +++ b/microsite/static/css/plugins.css @@ -0,0 +1,111 @@ +.PluginCard { + background-color: #272822; + height: 100%; + padding: 16px; + display: flex; + flex-direction: column; +} + +.grid { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 1fr; + padding-top: 32px; +} + +@media (max-width: 1200px) { + .grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (max-width: 815px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.PluginCard img { + float: left; + margin: 0px 16px 8px 0px; + height: 100px; + width: 100px; +} + +.PluginCardHeader { + max-height: fit-content; + min-height: fit-content; +} + +.PluginCardTitle { + color: white; + vertical-align: top; + margin: 8px 0px 0px 16px; +} + +.PluginAddNewButton { + position: absolute; + bottom: 16px; + right: 0px; +} + +.ButtonFilled { + padding: 4px 8px; + border-radius: 4px; + background-color: #36BAA2; + color: white; + margin-top: 36px; +} + +.ButtonFilled:hover { + border: 1px solid #36BAA2; + background-color: transparent; +} + +.ChipOutlined { + font-size: small; + border-radius: 16px; + padding: 2px 8px; + border: 1px solid #36BAA2; + color: #36BAA2; +} + +.PluginCardLink { + padding: 2px 8px; + position: absolute; + bottom: 0; + right: 0; +} + +.PluginPageLayout { + margin: auto; + max-width: 1430px; + padding: 20px; +} + +.PluginPageHeader { + position: relative; +} + +.PluginPageHeader h2 { + display: inline-block; +} + +.PluginCardBody { + padding-top: 8px; +} + +.PluginCardFooter { + position: relative; + min-height: 2em; +} + +.Author, .Author a { + margin-bottom: 0.25em; + color: rgba(255,255,255, 0.6); +} + + .Author a:hover { + color: white; +}