paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

Tweaks to plugin marketplace (#2209)

Browse Source 
* Tweaks to plugin marketplace

* Add plugin details to roadmap

* Update README.md

* Link to plugins from home

* Update circleci.yaml
This commit is contained in:
Stefan Ålund
2020-09-01 14:27:33 +02:00
committed by GitHub
parent 8fa1d781e1
commit ee0310213c
11 changed files with 133 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CONTRIBUTING.md
+2 -5
View File
@@ -1,7 +1,4 @@
---
id: CONTRIBUTING
title: Contributing
---
# Contributing to Backstage
Our vision for Backstage is for it to become the trusted standard toolbox (read: UX layer) for the open source infrastructure landscape. Think of it like Kubernetes for developer experience. We realize this is an ambitious goal. We can’t do it alone.
@@ -31,7 +28,7 @@ What kind of plugins should/could be created? Some inspiration from the 120+ plu
## Suggesting a plugin
If you start developing a plugin that you aim to release as open source, we suggest that you create a new [new Issue](https://github.com/spotify/backstage/issues/new?template=plugin_template.md). This helps the community know what plugins are in development.
If you start developing a plugin that you aim to release as open source, we suggest that you create a new [new Issue](https://github.com/spotify/backstage/issues/new?labels=plugin&template=plugin_template.md&title=%5BPlugin%5D+THE+PLUGIN+NAME). This helps the community know what plugins are in development.
You can also use this process if you have an idea for a good plugin but you hope that someone else will pick up the work.
README.md
+1 -1
View File
@@ -61,7 +61,7 @@ Take a look at the [Getting Started](https://backstage.io/docs/getting-started/i
## Documentation
- [Main documentation](https://backstage.io/docs/overview/what-is-backstage)
- [Main documentation](https://backstage.io/docs)
- [Service Catalog](https://backstage.io/docs/features/software-catalog/software-catalog-overview)
- [Architecture](https://backstage.io/docs/overview/architecture-terminology) ([Decisions](https://backstage.io/docs/architecture-decisions/adrs-overview))
- [Designing for Backstage](https://backstage.io/docs/dls/design)
docs/overview/roadmap.md
+15 -6
View File
@@ -79,18 +79,26 @@ guidelines to get started.
- Further improvements to platform documentation
### Plugins
Building and maintaining [plugins](https://backstage.io/plugins) is the work of
the entire Backstage community.
A list of plugins that are in development is
[available here](https://github.com/spotify/backstage/issues?q=is%3Aissue+is%3Aopen+label%3Aplugin+sort%3Areactions-%2B1-desc).
We strongly recommend to upvote 👍 plugins you are interested in. This helps us
and the community prioritize what plugins to build.
Are you missing a plugin for your favorite tool? Please
[suggest a new one](https://github.com/spotify/backstage/issues/new?labels=plugin&template=plugin_template.md&title=%5BPlugin%5D+THE+PLUGIN+NAME).
Chances are that someone will jump in and help build it.
### Future work 🔮
- **[Backstage platform is stable](https://github.com/spotify/backstage/milestone/19)** -
The platform APIs and features are stable and can be depended on for
production use. After this plugins will require little to no maintenance.
- **[Plugin marketplace](https://github.com/spotify/backstage/issues/2009)** -
As the ecosystem of Backstage plugins continues to grow it is becoming
increasingly hard to keep track of what plugins are available. To solve this
we imagine a "Plugin marketplace" that helps with discovery and installation
of plugins.
- **Deploy a product demo at `demo.backstage.io`** - Deploy a typical Backstage
deployment available publicly so that people can click around and get a feel
for the product without having to install anything.
@@ -111,6 +119,7 @@ guidelines to get started.
### Completed milestones ✅
- [Plugin marketplace](https://backstage.io/plugins)
- [Improved and move documentation to backstage.io](https://backstage.io/docs/overview/what-is-backstage)
- [Backstage Service Catalog (alpha)](https://backstage.io/blog/2020/06/22/backstage-service-catalog-alpha)
- [Backstage Software Templates (alpha)](https://backstage.io/blog/2020/08/05/announcing-backstage-software-templates)
microsite/core/Footer.js
+3
View File
@@ -45,6 +45,9 @@ class Footer extends React.Component {
<div>
<h5>Community</h5>
<a href="https://discord.gg/MUpMjP2">Support chatroom</a>
<a href="https://github.com/spotify/backstage/blob/master/CONTRIBUTING.md">
Contributing
</a>
<a href="https://mailchi.mp/spotify/backstage-community">
Subscribe to our newsletter
</a>
microsite/data/plugins/api-docs.yaml
+1 -1
View File
@@ -5,5 +5,5 @@ authorUrl: https://sda.se/
category: Discovery
description: Components to discover and display API entities as an extension to the catalog plugin.
documentation: https://github.com/spotify/backstage/blob/master/plugins/api-docs/README.md
iconUrl: https://github.com/spotify/backstage/raw/master/plugins/api-docs/docs/entity_tab_api.png
iconUrl: https://thecoders.io/wp-content/uploads/2019/11/tech-swagger.svg
npmPackageName: '@backstage/plugin-api-docs'
microsite/data/plugins/circleci.yaml
+1 -1
View File
@@ -5,5 +5,5 @@ authorUrl: https://www.spotify.com/
category: CI
description: Automate your development process with CI hosted in the cloud or on a private server.
documentation: https://github.com/spotify/backstage/tree/master/plugins/circleci
iconUrl: https://d3r49iyjzglexf.cloudfront.net/logo-wordmark-26f8eaea9b0f6e13b90d3f4a8fd8fda31490f5af41daab98bbede45037682576.svg
iconUrl: https://www.saaves.com/storage/brochure/logo-circleci-icon1583764538.png
npmPackageName: '@backstage/plugin-circleci'
microsite/data/plugins/github-actions.yaml
+13
View File
@@ -0,0 +1,13 @@
---
title: GitHub Actions
author: Spotify
authorUrl: https://www.spotify.com/
category: CI
description: GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.
documentation: https://github.com/spotify/backstage/tree/master/plugins/github-actions
iconUrl: https://avatars2.githubusercontent.com/u/44036562?s=400&v=4
npmPackageName: '@backstage/plugin-github-actions'
tags:
- ci
- cd
- github
microsite/data/plugins/tech-radar.yaml
+1 -1
View File
@@ -5,5 +5,5 @@ authorUrl: https://www.spotify.com/
category: Discovery
description: Visualize the your company's official guidelines of different areas of software development.
documentation: https://github.com/spotify/backstage/tree/master/plugins/tech-radar
iconUrl: https://github.com/spotify/backstage/raw/master/plugins/tech-radar/docs/screenshot.png
iconUrl: https://img.icons8.com/officel/2x/radar.png
npmPackageName: '@backstage/plugin-tech-radar'
microsite/pages/en/index.js
+3 -7
View File
@@ -455,12 +455,8 @@ class Index extends React.Component {
Share with the community
</Block.SmallTitle>
<Block.Paragraph>
Building{' '}
<a href="https://github.com/spotify/backstage/blob/master/docs/FAQ.md#how-do-i-find-out-if-a-plugin-already-exists">
open source plugins
</a>{' '}
contributes to the entire Backstage ecosystem, which benefits
everyone
Building <a href="/plugins">open source plugins</a> contributes
to the entire Backstage ecosystem, which benefits everyone
</Block.Paragraph>
</Block.TextBox>
@@ -472,7 +468,7 @@ class Index extends React.Component {
<ActionBlock className="stripe-top bg-teal">
<ActionBlock.Title>Build a plugin</ActionBlock.Title>
<ActionBlock.Link href="https://github.com/spotify/backstage/blob/master/docs/plugins/create-a-plugin.md">
<ActionBlock.Link href="/docs/plugins/create-a-plugin">
Contribute
</ActionBlock.Link>
</ActionBlock>
microsite/pages/en/plugins.js
+35 -3
View File
@@ -29,13 +29,14 @@ const Plugins = () => (
<main className="MainContent">
<div className="PluginPageLayout">
<div className="PluginPageHeader">
<h2>Plugins</h2>
<h2>Plugin marketplace</h2>
<p>Open source plugins that you can add to your Backstage deployment</p>
<span>
<a
className="PluginAddNewButton ButtonFilled"
href={addPluginDocsLink}
>
<b>Add Plugin</b>
<b>Add to marketplace</b>
</a>
</span>
</div>
@@ -69,13 +70,44 @@ const Plugins = () => (
className="PluginCardLink ButtonFilled"
href={documentation}
>
docs
Explore
</a>
</span>
</Container>
</div>
),
)}
<div className="PluginCard" id="add-plugin-card">
<div className="PluginCardBody">
<p>
Do you have an existing plugin that you want to add to the
Marketplace?
</p>
<p
style={{
marginTop: '20px',
textAlign: 'center',
}}
>
<a className="ButtonFilled" href={addPluginDocsLink}>
<b>Add to marketplace</b>
</a>
</p>
</div>
<Container className="PluginCardFooter">
<p>
See what plugins are already{' '}
<a href="https://github.com/spotify/backstage/issues?q=is%3Aissue+is%3Aopen+label%3Aplugin+sort%3Areactions-%2B1-desc">
in progress
</a>{' '}
and 👍. Missing a plugin for your favorite tool? Please{' '}
<a href="https://github.com/spotify/backstage/issues/new?labels=plugin&template=plugin_template.md&title=%5BPlugin%5D+THE+PLUGIN+NAME">
suggest
</a>{' '}
a new one.
</p>
</Container>
</div>
</Container>
</div>
</main>
microsite/static/css/plugins.css
+58 -57
View File
@@ -1,111 +1,112 @@
.PluginCard {
background-color: #272822;
height: 100%;
padding: 16px;
display: flex;
flex-direction: column;
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;
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);
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 815px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
.PluginCard img {
float: left;
margin: 0px 16px 8px 0px;
height: 100px;
width: 100px;
float: left;
margin: 0px 16px 8px 0px;
height: 80px;
width: 80px;
}
.PluginCardHeader {
max-height: fit-content;
min-height: fit-content;
max-height: fit-content;
min-height: fit-content;
}
.PluginCardTitle {
color: white;
vertical-align: top;
margin: 8px 0px 0px 16px;
color: white;
vertical-align: top;
margin: 8px 0px 0px 16px;
}
.PluginAddNewButton {
position: absolute;
bottom: 16px;
right: 0px;
position: absolute;
bottom: 16px;
right: 0px;
}
.ButtonFilled {
padding: 4px 8px;
border-radius: 4px;
background-color: #36BAA2;
color: white;
margin-top: 36px;
padding: 4px 8px;
border-radius: 4px;
background-color: #36baa2;
color: white;
margin-top: 36px;
}
.ButtonFilled:hover {
border: 1px solid #36BAA2;
background-color: transparent;
border: 1px solid #36baa2;
background-color: transparent;
}
.ChipOutlined {
font-size: small;
border-radius: 16px;
padding: 2px 8px;
border: 1px solid #36BAA2;
color: #36BAA2;
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;
padding: 2px 8px;
position: absolute;
bottom: 0;
right: 0;
}
.PluginPageLayout {
margin: auto;
max-width: 1430px;
padding: 20px;
margin: auto;
max-width: 1430px;
padding: 20px;
}
.PluginPageHeader {
position: relative;
position: relative;
}
.PluginPageHeader h2 {
display: inline-block;
display: inline-block;
}
.PluginCardBody {
padding-top: 8px;
padding-top: 8px;
}
.PluginCardFooter {
position: relative;
min-height: 2em;
position: relative;
min-height: 2em;
}
.Author, .Author a {
margin-bottom: 0.25em;
color: rgba(255,255,255, 0.6);
.Author,
.Author a {
margin-bottom: 0.25em;
color: rgba(255, 255, 255, 0.6);
}
.Author a:hover {
color: white;
.Author a:hover {
color: white;
}