diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5b8febd1d2..853332f74d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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. diff --git a/README.md b/README.md index b5e8704548..4009864edc 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/docs/overview/roadmap.md b/docs/overview/roadmap.md index a84bc525c9..5a06f4544f 100644 --- a/docs/overview/roadmap.md +++ b/docs/overview/roadmap.md @@ -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) diff --git a/microsite/core/Footer.js b/microsite/core/Footer.js index 407bebca84..761862c1fc 100644 --- a/microsite/core/Footer.js +++ b/microsite/core/Footer.js @@ -45,6 +45,9 @@ class Footer extends React.Component {
Community
Support chatroom + + Contributing + Subscribe to our newsletter diff --git a/microsite/data/plugins/api-docs.yaml b/microsite/data/plugins/api-docs.yaml index b7f85b62b3..babcbf74f1 100644 --- a/microsite/data/plugins/api-docs.yaml +++ b/microsite/data/plugins/api-docs.yaml @@ -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' diff --git a/microsite/data/plugins/circleci.yaml b/microsite/data/plugins/circleci.yaml index c8a3677614..6937064815 100644 --- a/microsite/data/plugins/circleci.yaml +++ b/microsite/data/plugins/circleci.yaml @@ -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' diff --git a/microsite/data/plugins/github-actions.yaml b/microsite/data/plugins/github-actions.yaml new file mode 100644 index 0000000000..b384980b2a --- /dev/null +++ b/microsite/data/plugins/github-actions.yaml @@ -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 diff --git a/microsite/data/plugins/tech-radar.yaml b/microsite/data/plugins/tech-radar.yaml index a20667e8f0..585e204b12 100644 --- a/microsite/data/plugins/tech-radar.yaml +++ b/microsite/data/plugins/tech-radar.yaml @@ -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' diff --git a/microsite/pages/en/index.js b/microsite/pages/en/index.js index 986db4b732..7a58ede25f 100644 --- a/microsite/pages/en/index.js +++ b/microsite/pages/en/index.js @@ -455,12 +455,8 @@ class Index extends React.Component { Share with the community - Building{' '} - - open source plugins - {' '} - contributes to the entire Backstage ecosystem, which benefits - everyone + Building open source plugins contributes + to the entire Backstage ecosystem, which benefits everyone @@ -472,7 +468,7 @@ class Index extends React.Component { Build a plugin - + Contribute diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js index 916f34c21e..8c5f017e24 100644 --- a/microsite/pages/en/plugins.js +++ b/microsite/pages/en/plugins.js @@ -29,13 +29,14 @@ const Plugins = () => (
-

Plugins

+

Plugin marketplace

+

Open source plugins that you can add to your Backstage deployment

- Add Plugin + Add to marketplace
@@ -69,13 +70,44 @@ const Plugins = () => ( className="PluginCardLink ButtonFilled" href={documentation} > - docs + Explore
), )} +
+
+

+ Do you have an existing plugin that you want to add to the + Marketplace? +

+

+ + Add to marketplace + +

+
+ +

+ See what plugins are already{' '} + + in progress + {' '} + and ๐Ÿ‘. Missing a plugin for your favorite tool? Please{' '} + + suggest + {' '} + a new one. +

+ +
diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css index 042e2954e1..96fe3dac35 100644 --- a/microsite/static/css/plugins.css +++ b/microsite/static/css/plugins.css @@ -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; }