Add Plugins Page to microsite (#2144)
* Add Plugins Page to microsite * Updates to microsite Plugins Page * Correct plugin authors and documentation links * Add category to UI * Move documentation from README to the docs website * Use external urls for logos * Updates to microsite Plugins Page * trailing whitespace * Run prettier on new markdown * Updates to microsite Plugins Page * Move plugins link * Clarify category field * Updates to microsite Plugins Page * Add authorUrl field to plugin config * Render author as a muted link like those in the site map * Updates to microsite Plugins Page * Add authorUrl field to example in docs * Updates to microsite Plugins Page * Add npmPackageName field - intended for future use * Updates to microsite Plugins Page * Add npmPackageName field - intended for future use * Updates to microsite Plugins Page * Use correct docs link
This commit is contained in:
Iain Billett
@@ -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-<etc>' quotes are required
|
||||
```
|
||||
@@ -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'
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 = () => (
|
||||
<main className="MainContent">
|
||||
<div className="PluginPageLayout">
|
||||
<div className="PluginPageHeader">
|
||||
<h2>Plugins</h2>
|
||||
<span>
|
||||
<a
|
||||
className="PluginAddNewButton ButtonFilled"
|
||||
href={addPluginDocsLink}
|
||||
>
|
||||
<b>Add Plugin</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<BulletLine style={{ width: '100% ' }} />
|
||||
<Container wrapped className="grid">
|
||||
{pluginMetadata.map(
|
||||
({
|
||||
iconUrl,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
authorUrl,
|
||||
documentation,
|
||||
category,
|
||||
}) => (
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<img src={iconUrl || defaultIconUrl} alt={title} />
|
||||
<h2 className="PluginCardTitle">{title}</h2>
|
||||
<p className="Author">
|
||||
by <a href={authorUrl}>{author}</a>
|
||||
</p>
|
||||
<span className="ChipOutlined">{category}</span>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<Container className="PluginCardFooter">
|
||||
<span>
|
||||
<a
|
||||
className="PluginCardLink ButtonFilled"
|
||||
href={documentation}
|
||||
>
|
||||
docs
|
||||
</a>
|
||||
</span>
|
||||
</Container>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</Container>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
module.exports = Plugins;
|
||||
@@ -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": [
|
||||
|
||||
@@ -38,6 +38,10 @@ const siteConfig = {
|
||||
href: '/docs',
|
||||
label: 'Docs',
|
||||
},
|
||||
{
|
||||
page: 'plugins',
|
||||
label: 'Plugins',
|
||||
},
|
||||
{
|
||||
page: 'blog',
|
||||
blog: true,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user