Remove old microsite
Signed-off-by: Johan Haals <johan.haals@gmail.com>
This commit is contained in:
Johan Haals
@@ -1,4 +0,0 @@
|
||||
|
||||
# Build output
|
||||
build
|
||||
i18n
|
||||
@@ -1,2 +0,0 @@
|
||||
registry=https://registry.npmjs.org/
|
||||
engine-strict=true
|
||||
@@ -1 +0,0 @@
|
||||
build
|
||||
@@ -1,219 +0,0 @@
|
||||
# Backstage Documentation
|
||||
|
||||
This folder holds the service and configuration that runs Backstage's documentation hosted at https://backstage.io.
|
||||
|
||||
It pulls content in from the [root `/docs`](../docs/) folder and builds it into the resulting HTML web site.
|
||||
|
||||
This website was created with [Docusaurus](https://docusaurus.io/).
|
||||
|
||||
# What's In This Document
|
||||
|
||||
- [Getting Started](#getting-started)
|
||||
- [Directory Structure](#directory-structure)
|
||||
- [Editing Content](#editing-content)
|
||||
- [Adding Content](#adding-content)
|
||||
- [Full Documentation](#full-documentation)
|
||||
|
||||
# Getting Started
|
||||
|
||||
Testing the web site locally is a great way to see what final website will look like after publishing, and is ideal for testing more complex changes, large updates to navigation, or complex page designs that may include special alignment, which may not otherwise be validated through continuous integration.
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
$ yarn install
|
||||
```
|
||||
|
||||
## Local Development
|
||||
|
||||
```
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
This command starts a local development server and opens up a browser window. Most content changes made to the `docs/` root folder are reflected live without having to restart the server.
|
||||
|
||||
## Build
|
||||
|
||||
```
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory, which is what will be deployed to GitHub pages from the master branch.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
Your project file structure should look something like this
|
||||
|
||||
```
|
||||
my-docusaurus/
|
||||
docs/
|
||||
doc-1.md
|
||||
doc-2.md
|
||||
doc-3.md
|
||||
website/
|
||||
blog/
|
||||
2016-3-11-oldest-post.md
|
||||
2017-10-24-newest-post.md
|
||||
core/
|
||||
node_modules/
|
||||
pages/
|
||||
static/
|
||||
css/
|
||||
img/
|
||||
package.json
|
||||
sidebars.json
|
||||
siteConfig.js
|
||||
```
|
||||
|
||||
## Editing Content
|
||||
|
||||
### Editing an existing docs page
|
||||
|
||||
Edit docs by navigating to `docs/` and editing the corresponding document:
|
||||
|
||||
`docs/doc-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: page-needs-edit
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
### Editing an existing blog post
|
||||
|
||||
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
|
||||
|
||||
`website/blog/post-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: post-needs-edit
|
||||
title: This Blog Post Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
## Adding Content
|
||||
|
||||
### Adding a new docs page to an existing sidebar
|
||||
|
||||
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
|
||||
|
||||
```md
|
||||
---
|
||||
id: newly-created-doc
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
My new content here..
|
||||
```
|
||||
|
||||
1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`:
|
||||
|
||||
```javascript
|
||||
// Add newly-created-doc to the Getting Started category of docs
|
||||
{
|
||||
"docs": {
|
||||
"Getting Started": [
|
||||
"quick-start",
|
||||
"newly-created-doc" // new doc here
|
||||
],
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
### Adding a new blog post
|
||||
|
||||
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
headerLinks: [
|
||||
...
|
||||
{ blog: true, label: 'Blog' },
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
|
||||
|
||||
`website/blog/2018-05-21-New-Blog-Post.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
author: Frank Li
|
||||
authorURL: https://twitter.com/foobarbaz
|
||||
authorFBID: 503283835
|
||||
title: New Blog Post
|
||||
---
|
||||
|
||||
Lorem Ipsum...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
### Adding items to your site's top navigation bar
|
||||
|
||||
1. Add links to docs, custom pages or external links by editing the `headerLinks` field of `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
/* you can add docs */
|
||||
{ doc: 'my-examples', label: 'Examples' },
|
||||
/* you can add custom pages */
|
||||
{ page: 'help', label: 'Help' },
|
||||
/* you can add external links */
|
||||
{ href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
### Adding custom pages
|
||||
|
||||
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
|
||||
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Learn more about [Docusaurus custom pages](https://docusaurus.io/docs/en/custom-pages).
|
||||
|
||||
## Full Documentation
|
||||
|
||||
Full documentation can be found on the [Docusaurus website](https://docusaurus.io/).
|
||||
|
||||
## Additional notes
|
||||
|
||||
- If you want to make images zoomable on click, add the `data-zoomable` attribute to your `img` element.
|
||||
- In a docs or blog `.md` file, convert `` syntax to `<img data-zoomable src="/microsite/static/img/code.png" alt="This is image" />`
|
||||
@@ -1,143 +0,0 @@
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const simpleComponent = (Component, baseClassName = '', mods = []) => {
|
||||
const SimpleComponent = props => {
|
||||
// Extra BEM modifiers, e.g. `Block__Container--reversed`
|
||||
const modClasses = [];
|
||||
const otherProps = {};
|
||||
for (const prop in props) {
|
||||
if (mods.indexOf(prop) !== -1) {
|
||||
modClasses.push(`${baseClassName}--${prop}`);
|
||||
} else {
|
||||
otherProps[prop] = props[prop];
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...otherProps}
|
||||
className={`${baseClassName} ${props.className || ''} ${modClasses}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
SimpleComponent.displayName = `SimpleComponent(${Component}, ${baseClassName})`;
|
||||
|
||||
SimpleComponent.propTypes = {};
|
||||
for (const mod of mods) {
|
||||
SimpleComponent.propTypes[mod] = PropTypes.bool;
|
||||
}
|
||||
|
||||
return SimpleComponent;
|
||||
};
|
||||
|
||||
const Block = simpleComponent('section', 'Block', ['small', 'wrapped']);
|
||||
Block.Container = simpleComponent('div', 'Block__Container', [
|
||||
'reversed',
|
||||
'wrapped',
|
||||
'column',
|
||||
]);
|
||||
Block.TitleBox = simpleComponent('h1', 'Block__TitleBox', ['large', 'story']);
|
||||
Block.TextBox = simpleComponent('div', 'Block__TextBox', ['wide', 'small']);
|
||||
|
||||
Block.Title = simpleComponent('h1', 'Block__Title', ['half', 'main']);
|
||||
Block.Subtitle = simpleComponent('h1', 'Block__Subtitle');
|
||||
|
||||
Block.SmallTitle = simpleComponent('h2', 'Block__SmallTitle');
|
||||
Block.SmallestTitle = simpleComponent('h3', 'Block__SmallestTitle');
|
||||
|
||||
const BulletLine = simpleComponent('div', 'BulletLine');
|
||||
|
||||
Block.Paragraph = simpleComponent('p', 'Block__Paragraph');
|
||||
Block.LinkButton = simpleComponent('a', 'Block__LinkButton', ['stretch']);
|
||||
Block.QuoteContainer = simpleComponent('div', 'Block__QuoteContainer');
|
||||
Block.Quote = simpleComponent('p', 'Block__Quote');
|
||||
Block.Divider = simpleComponent('p', 'Block__Divider', ['quote']);
|
||||
Block.MediaFrame = simpleComponent('div', 'Block__MediaFrame');
|
||||
Block.Graphics = ({ padding, children, innerPadding, width }) => {
|
||||
const style = {};
|
||||
const innerStyle = {};
|
||||
if (padding) {
|
||||
style.padding = `${padding}% 0`;
|
||||
}
|
||||
|
||||
if (width) {
|
||||
style.width = width;
|
||||
}
|
||||
|
||||
if (innerPadding) {
|
||||
innerStyle.padding = `${innerPadding}% 0`;
|
||||
}
|
||||
return (
|
||||
<div className="Block__GraphicsContainer" style={style}>
|
||||
<div className="Block__Graphics" children={children} style={innerStyle} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Block.Graphic = props => {
|
||||
/* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */
|
||||
const { x = 0, y = 0, width = 0, src, className = '' } = props;
|
||||
const style = Object.assign(
|
||||
{ left: `${x}%`, top: `${y}%`, width: `${width}%` },
|
||||
props.style,
|
||||
);
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt=""
|
||||
{...props}
|
||||
style={style}
|
||||
className={`Block__Graphic ${className}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Block.Image = props => {
|
||||
/* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={`Block__Image${
|
||||
props.wide ? '--wide' : props.narrow ? '--narrow' : ''
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ActionBlock = simpleComponent('section', 'ActionBlock');
|
||||
ActionBlock.Title = simpleComponent('h1', 'ActionBlock__Title');
|
||||
ActionBlock.Subtitle = simpleComponent('h2', 'ActionBlock__Subtitle');
|
||||
ActionBlock.Link = simpleComponent('a', 'ActionBlock__Link');
|
||||
|
||||
const Breakpoint = ({ narrow, wide }) => (
|
||||
<React.Fragment>
|
||||
<div className="Breakpoint--narrow">{narrow}</div>
|
||||
<div className="Breakpoint--wide">{wide}</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const Banner = simpleComponent('div', 'Banner', ['hidden']);
|
||||
Banner.Container = simpleComponent('div', 'Banner__Container');
|
||||
|
||||
const BannerDismissButton = simpleComponent(
|
||||
props => (
|
||||
<svg {...props} data-banner-dismiss viewBox="0 0 24 24">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
||||
</svg>
|
||||
),
|
||||
'Banner__DismissButton',
|
||||
);
|
||||
|
||||
Banner.Dismissable = ({ storageKey, children }) => (
|
||||
<Banner hidden data-banner={storageKey}>
|
||||
{children}
|
||||
<BannerDismissButton />
|
||||
</Banner>
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
Block,
|
||||
ActionBlock,
|
||||
Breakpoint,
|
||||
BulletLine,
|
||||
Banner,
|
||||
};
|
||||
@@ -1,102 +0,0 @@
|
||||
/*
|
||||
* Copyright 2020 Backstage Project Authors.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
class Footer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<footer className="nav-footer" id="footer">
|
||||
<section className="sitemap">
|
||||
<div className="footer-title">
|
||||
<a href={this.props.config.baseUrl}>
|
||||
<h2 className="footerLogo"></h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Docs</h5>
|
||||
<a href={`/docs/overview/what-is-backstage`}>What is Backstage?</a>
|
||||
<a href={`/docs/getting-started/`}>Getting started</a>
|
||||
<a
|
||||
href={`/docs/features/software-catalog/software-catalog-overview`}
|
||||
>
|
||||
Software Catalog
|
||||
</a>
|
||||
<a href={`/docs/plugins/create-a-plugin`}>Create a Plugin</a>
|
||||
<a href={`/docs/dls/design`}>Designing for Backstage</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Community</h5>
|
||||
<a href="https://discord.gg/backstage-687207715902193673">
|
||||
Support chatroom
|
||||
</a>
|
||||
<a href="https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md">
|
||||
Contributing
|
||||
</a>
|
||||
<a href="https://backstage.spotify.com">Adopting</a>
|
||||
<a href="https://github.com/backstage/community">
|
||||
Community Sessions
|
||||
</a>
|
||||
<a href="https://info.backstage.spotify.com/newsletter_subscribe">
|
||||
Subscribe to our newsletter
|
||||
</a>
|
||||
<a href="https://www.cncf.io/projects/">CNCF Incubation</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>More</h5>
|
||||
<a href={this.props.config.fossWebsite}>
|
||||
Open Source @ {this.props.config.organizationName}
|
||||
</a>
|
||||
|
||||
<a href="https://engineering.atspotify.com/">
|
||||
Spotify Engineering Blog
|
||||
</a>
|
||||
<a href="https://developer.spotify.com/">Spotify for Developers</a>
|
||||
|
||||
<a href={this.props.config.repoUrl}>GitHub</a>
|
||||
<a
|
||||
className="github-button"
|
||||
href={this.props.config.repoUrl}
|
||||
data-icon="octicon-star"
|
||||
data-count-href="/backstage/backstage/stargazers"
|
||||
data-show-count="true"
|
||||
data-count-aria-label="# stargazers on GitHub"
|
||||
aria-label="Star this project on GitHub"
|
||||
>
|
||||
Star
|
||||
</a>
|
||||
{this.props.config.twitterUsername && (
|
||||
<div className="social">
|
||||
<a
|
||||
href={`https://twitter.com/${this.props.config.twitterUsername}`}
|
||||
className="twitter-follow-button"
|
||||
>
|
||||
Follow @{this.props.config.twitterUsername}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
<a href="https://spotify.github.io">Made with ❤️ at Spotify</a>
|
||||
</p>
|
||||
<p className="copyright">{this.props.config.copyright}</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Footer;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export class HubSpotForm extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<script src="https://js.hsforms.net/forms/v2.js" />
|
||||
<div
|
||||
className="Sidebar__Container"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
<button class="Sidebar__Button" onclick="toggleFormVisibility()">New Adopters</button>
|
||||
<div id="Sidebar__HubSpotContainer"></div>
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<script
|
||||
type="text/javascript"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if (typeof window !== undefined) {
|
||||
window.hbspt.forms.create({
|
||||
portalId: '21894833',
|
||||
formId: '9a5aa2af-87f3-4a44-819f-88ee243bb61e',
|
||||
target: '#Sidebar__HubSpotContainer',
|
||||
pageId: '79735607665',
|
||||
})
|
||||
}
|
||||
|
||||
function toggleFormVisibility() {
|
||||
var form = document.querySelector('.Sidebar__Container');
|
||||
form.classList.toggle('Sidebar__Container--open');
|
||||
}
|
||||
`,
|
||||
}}
|
||||
></script>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"version": "0.0.0",
|
||||
"name": "backstage-microsite",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"examples": "docusaurus-examples",
|
||||
"start": "docusaurus-start",
|
||||
"build": "docusaurus-build",
|
||||
"prettier:check": "prettier --check .",
|
||||
"publish-gh-pages": "docusaurus-publish",
|
||||
"write-translations": "docusaurus-write-translations",
|
||||
"version": "docusaurus-version",
|
||||
"rename-version": "docusaurus-rename-version",
|
||||
"verify:sidebars": "node ./scripts/verify-sidebars"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@spotify/prettier-config": "^14.0.0",
|
||||
"docusaurus": "^2.0.0-alpha.70",
|
||||
"js-yaml": "^4.1.0",
|
||||
"prettier": "^2.6.2"
|
||||
},
|
||||
"prettier": "@spotify/prettier-config"
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
/**
|
||||
* 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 React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
const BulletLine = Components.BulletLine;
|
||||
|
||||
const PARTNERS = [
|
||||
{
|
||||
name: 'Frontside Software',
|
||||
url: 'https://frontside.com/backstage/',
|
||||
logo: 'img/partner-logo-frontside.png',
|
||||
},
|
||||
{
|
||||
name: 'Roadie',
|
||||
url: 'https://roadie.io/',
|
||||
logo: 'img/partner-logo-roadie.png',
|
||||
},
|
||||
{
|
||||
name: 'ThoughtWorks',
|
||||
url: 'https://www.thoughtworks.com',
|
||||
logo: 'img/partner-logo-thoughtworks.png',
|
||||
},
|
||||
{
|
||||
name: 'VMWare',
|
||||
url: 'https://www.vmware.com',
|
||||
logo: 'img/partner-logo-vmware.png',
|
||||
},
|
||||
];
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title main>Backstage Community</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Join the vibrant community around Backstage through social media
|
||||
and different meetups. To ensure that you have a welcoming
|
||||
environment, we follow{' '}
|
||||
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
|
||||
{' '}
|
||||
CNCF Code of Conduct
|
||||
</a>{' '}
|
||||
in everything we do.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox style={{ margin: 'auto' }}>
|
||||
<Block.Paragraph>
|
||||
<Block.SmallTitle small>
|
||||
Get started in our community!
|
||||
</Block.SmallTitle>
|
||||
<ul>
|
||||
<li>
|
||||
<Block.Paragraph style={{ marginBottom: '0' }}>
|
||||
Chat and get support on our{' '}
|
||||
<a href="https://discord.gg/backstage-687207715902193673">
|
||||
Discord
|
||||
</a>
|
||||
</Block.Paragraph>
|
||||
</li>
|
||||
<li>
|
||||
<Block.Paragraph style={{ marginBottom: '0' }}>
|
||||
Get into contributing with the{' '}
|
||||
<a href="https://github.com/backstage/backstage/contribute">
|
||||
Good First Issues
|
||||
</a>
|
||||
</Block.Paragraph>
|
||||
</li>
|
||||
<li>
|
||||
<Block.Paragraph style={{ marginBottom: '0' }}>
|
||||
Subscribe to the{' '}
|
||||
<a href="https://info.backstage.spotify.com/newsletter_subscribe">
|
||||
Community newsletter
|
||||
</a>
|
||||
</Block.Paragraph>
|
||||
</li>
|
||||
<li>
|
||||
<Block.Paragraph style={{ marginBottom: '0' }}>
|
||||
Join the{' '}
|
||||
<a href="https://twitter.com/i/communities/1494019781716062215">
|
||||
Twitter community
|
||||
</a>
|
||||
</Block.Paragraph>
|
||||
</li>
|
||||
</ul>
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-top stripe-bottom bg-teal-bottom">
|
||||
<Block.Container style={{ flexFlow: 'column nowrap' }}>
|
||||
<Block.TextBox wide>
|
||||
<Block.Subtitle>Offical Backstage initiatives</Block.Subtitle>
|
||||
<Block.Title small>
|
||||
Stay tuned to the latest developments
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.Container>
|
||||
<Block.TextBox style={{ flexShrink: '1', alignSelf: 'stretch' }}>
|
||||
<Block.Container column>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Community sessions</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Maintainers and adopters meet monthly to share updates, demos,
|
||||
and ideas. Yep, all sessions are recorded!
|
||||
</Block.Paragraph>
|
||||
</Block.Container>
|
||||
<Block.LinkButton href="/on-demand">
|
||||
Join a session
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox style={{ flexShrink: '1', alignSelf: 'stretch' }}>
|
||||
<Block.Container column>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Newsletter</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
The official monthly Backstage newsletter. Don't miss the
|
||||
latest news from your favorite project!
|
||||
</Block.Paragraph>
|
||||
</Block.Container>
|
||||
<Block.LinkButton href="https://info.backstage.spotify.com/newsletter_subscribe">
|
||||
Subscribe
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox style={{ flexShrink: '1', alignSelf: 'stretch' }}>
|
||||
<Block.Container column>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Contributor Spotlight</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
A recognition for valuable community work. Nominate
|
||||
contributing members for their efforts! We'll put them in the
|
||||
spotlight ❤️
|
||||
</Block.Paragraph>
|
||||
</Block.Container>
|
||||
<Block.LinkButton href="/nominate">Nominate now</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-bottom bg-black-grey">
|
||||
<Block.Container wrapped style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox wide>
|
||||
<Block.Subtitle>Community initiatives</Block.Subtitle>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small style={{ alignSelf: 'stretch' }}>
|
||||
<Block.Container column>
|
||||
<Block.SmallTitle>Open Mic Meetup</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
A casual get together of Backstage users sharing their
|
||||
experiences and helping each other. Hosted by{' '}
|
||||
<a href="https://roadie.io/">Roadie.io</a> and{' '}
|
||||
<a href="https://frontside.com/">Frontside Software</a>.
|
||||
</Block.Paragraph>
|
||||
</Block.Container>
|
||||
<Block.LinkButton href="https://backstage-openmic.com/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small style={{ alignSelf: 'stretch' }}>
|
||||
<Block.Container column>
|
||||
<Block.SmallTitle>Backstage Weekly Newsletter</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
A weekly newsletter with news, updates and things community from
|
||||
your friends at <a href="https://roadie.io/">Roadie.io</a>.
|
||||
</Block.Paragraph>
|
||||
</Block.Container>
|
||||
<Block.LinkButton href="https://roadie.io/backstage-weekly/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-top stripe-bottom">
|
||||
<Block.Container style={{ flexFlow: 'column nowrap' }}>
|
||||
<Block.TextBox wide>
|
||||
<Block.Subtitle>Trainings and Certifications</Block.Subtitle>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox style={{ flexShrink: '1', alignSelf: 'stretch' }}>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Introduction to Backstage: Developer Portals Made Easy (LFS142x)
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
This is a course produced and curated by the Linux Foundation.
|
||||
This course introduces you to Backstage and how to get started
|
||||
with the project.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.LinkButton href="https://training.linuxfoundation.org/training/introduction-to-backstage-developer-portals-made-easy-lfs142x/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-top bg-black-grey">
|
||||
<Block.Container wrapped style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox wide>
|
||||
<Block.Subtitle>Commercial Partners</Block.Subtitle>
|
||||
</Block.TextBox>
|
||||
{PARTNERS.map(partner => (
|
||||
<Block.TextBox small>
|
||||
<Block.SmallTitle>
|
||||
<a href={partner.url}>
|
||||
<img src={`${baseUrl}${partner.logo}`} alt={partner.name} />
|
||||
</a>
|
||||
</Block.SmallTitle>
|
||||
</Block.TextBox>
|
||||
))}
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -1,296 +0,0 @@
|
||||
/**
|
||||
* 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 React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>See us in action</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Watch the videos below to get an introduction to Backstage and to
|
||||
see how we use different plugins to customize{' '}
|
||||
<a href="https://engineering.atspotify.com/2020/04/21/how-we-use-backstage-at-spotify/">
|
||||
our internal version of Backstage at Spotify
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
<Block.Paragraph>
|
||||
To see how other companies have already started using Backstage,
|
||||
watch these presentations from{' '}
|
||||
<a href="https://youtu.be/rRphwXeq33Q?t=1508">Expedia</a>,{' '}
|
||||
<a href="https://youtu.be/6sg5uMCLxTA?t=153">Zalando</a>, and{' '}
|
||||
<a href="https://youtu.be/UZTVjv-AvZA?t=188">TELUS</a>. For more,
|
||||
join our{' '}
|
||||
<a href="https://github.com/backstage/community">
|
||||
Community Sessions
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
<Block.Paragraph>
|
||||
To explore the UI and basic features of Backstage firsthand, go
|
||||
to: <a href="https://demo.backstage.io">demo.backstage.io</a>.
|
||||
(Tip: click “All” to view all the example components in the
|
||||
software catalog.)
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.Graphics>
|
||||
<Block.Graphic
|
||||
x={-7}
|
||||
y={-12}
|
||||
width={120}
|
||||
src={`${baseUrl}img/demo-screen.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Introduction to Backstage</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Backstage is an open source platform for building developer
|
||||
portals. We’ve been using our homegrown version at Spotify for
|
||||
years — so it’s already packed with features. (We have over 120
|
||||
internal plugins, built by 60 different teams.) In this live demo
|
||||
recording, Stefan Ålund, product manager for Backstage, tells the
|
||||
origin story of Backstage and gives you a tour of how we use it
|
||||
here at Spotify.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=1XtJ5FAOjPk'}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/1XtJ5FAOjPk"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Control cloud costs</Block.Title>
|
||||
<Block.Paragraph>
|
||||
How do you control cloud costs while maintaining the speed and
|
||||
independence of your development teams? With the{' '}
|
||||
<a href="https://backstage.io/plugins">Cost Insights plugin</a>{' '}
|
||||
for Backstage, managing cloud costs becomes just another part of
|
||||
an engineer’s daily development process. They get a clear view of
|
||||
their spending — and can decide for themselves how they want to
|
||||
optimize it. Learn more about the{' '}
|
||||
<a href="https://backstage.io/blog/2020/10/22/cost-insights-plugin">
|
||||
Cost Insights plugin
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://youtu.be/YLAd5hdXR_Q">
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/YLAd5hdXR_Q"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title id="techdocs-demo">
|
||||
Make documentation easy
|
||||
</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Documentation! Everyone needs it, no one wants to create it, and
|
||||
no one can ever find it. Backstage follows a “docs like code”
|
||||
approach: you write documentation in Markdown files right
|
||||
alongside your code. This makes documentation easier to create,
|
||||
maintain, find — and, you know, actually use. This demo video
|
||||
showcases Spotify’s internal version of TechDocs. Learn more about{' '}
|
||||
<a href="https://backstage.io/blog/2020/09/08/announcing-tech-docs">
|
||||
TechDocs
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://youtu.be/mOLCgdPw1iA">
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/mOLCgdPw1iA"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Manage your tech health</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Instead of manually updating a spreadsheet, what if you had a
|
||||
beautiful dashboard that could give you an instant, interactive
|
||||
picture of your entire org’s tech stack? That’s how we do it at
|
||||
Spotify. With our Tech Insights plugin for Backstage, anyone at
|
||||
Spotify can see which version of which software anyone else at
|
||||
Spotify is using — and a whole a lot more. From managing
|
||||
migrations to fighting tech entropy, Backstage makes managing our
|
||||
tech health actually kind of pleasant.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.LinkButton
|
||||
href={
|
||||
'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6'
|
||||
}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/K3xz6VAbgH8"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Create a microservice</Block.Title>
|
||||
<Block.Paragraph>
|
||||
You’re a Spotify engineer about to build a new microservice (or
|
||||
any component) using Spring Boot. Where do you start? Search for a
|
||||
quick start guide online? Create an empty repo on GitHub? Copy and
|
||||
paste an old project? Nope. Just go to Backstage, and you’ll be up
|
||||
and running in two minutes — with a “Hello World” app, CI, and
|
||||
documentation all automatically set up and configured in a
|
||||
standardized way.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=U1iwe3L5pzc'}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/U1iwe3L5pzc"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Search all your services</Block.Title>
|
||||
<Block.Paragraph>
|
||||
All of Spotify’s services are automatically indexed in Backstage.
|
||||
So our engineers can stop playing detective — no more spamming
|
||||
Slack channels asking if anyone knows who owns a particular
|
||||
service and where you can find its API, only to discover that the
|
||||
owner went on sabbatical three months ago and you have to hunt
|
||||
them down on a mountain in Tibet where they’re on a 12-day silent
|
||||
meditation retreat. At Spotify, anyone can always find anyone
|
||||
else’s service, inspect its APIs, and contact its current owner —
|
||||
all with one search.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=vcDL9tOv7Eo'}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/vcDL9tOv7Eo"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Manage data pipelines</Block.Title>
|
||||
<Block.Paragraph>
|
||||
We manage a lot of data pipelines (also known as workflows) here
|
||||
at Spotify. So, of course, we made a great workflows plugin for
|
||||
our version of Backstage. All our workflow tools — including a
|
||||
scheduler, log inspector, data lineage graph, and configurable
|
||||
alerts — are integrated into one simple interface.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=rH46MLNZIPM '}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/rH46MLNZIPM"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -1,12 +0,0 @@
|
||||
const React = require('react');
|
||||
const Redirect = require('../../core/Redirect.js');
|
||||
|
||||
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
||||
|
||||
function Docs() {
|
||||
return (
|
||||
<Redirect redirect="/docs/overview/what-is-backstage" config={siteConfig} />
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Docs;
|
||||
@@ -1,15 +0,0 @@
|
||||
const React = require('react');
|
||||
const Redirect = require('../../../../../core/Redirect.js');
|
||||
|
||||
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
||||
|
||||
function Docs() {
|
||||
return (
|
||||
<Redirect
|
||||
redirect="/docs/features/software-catalog/software-catalog-overview"
|
||||
config={siteConfig}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Docs;
|
||||
@@ -1,15 +0,0 @@
|
||||
const React = require('react');
|
||||
const Redirect = require('../../../../../core/Redirect.js');
|
||||
|
||||
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
||||
|
||||
function Docs() {
|
||||
return (
|
||||
<Redirect
|
||||
redirect="/docs/features/software-templates/software-templates-index"
|
||||
config={siteConfig}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Docs;
|
||||
@@ -1,15 +0,0 @@
|
||||
const React = require('react');
|
||||
const Redirect = require('../../../../../core/Redirect.js');
|
||||
|
||||
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
||||
|
||||
function Docs() {
|
||||
return (
|
||||
<Redirect
|
||||
redirect="/docs/features/techdocs/techdocs-overview"
|
||||
config={siteConfig}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Docs;
|
||||
@@ -1,671 +0,0 @@
|
||||
/**
|
||||
* 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 React = require('react');
|
||||
const { HubSpotForm } = require(`${process.cwd()}/core/HubSpotForm.js`);
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
const ActionBlock = Components.ActionBlock;
|
||||
const Breakpoint = Components.Breakpoint;
|
||||
const BulletLine = Components.BulletLine;
|
||||
const Banner = Components.Banner;
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
const { config: siteConfig } = this.props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<main className="MainContent MainContent--gradient">
|
||||
<Banner.Container>
|
||||
<Banner.Dismissable storageKey="2022-03-16-newsletter-cta">
|
||||
<div>
|
||||
🗞️ Want to stay up to date with Backstage? Sign up for our{' '}
|
||||
<a href="https://info.backstage.spotify.com/newsletter_subscribe">
|
||||
Newsletter
|
||||
</a>
|
||||
!
|
||||
</div>
|
||||
</Banner.Dismissable>
|
||||
</Banner.Container>
|
||||
|
||||
<Block small className="bg-black-grey stripe-bottom">
|
||||
<Block.Container>
|
||||
<Block.TextBox>
|
||||
<Block.Title main>
|
||||
An open platform for building developer portals
|
||||
</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Powered by a centralized software catalog, Backstage restores
|
||||
order to your infrastructure and enables your product teams to
|
||||
ship high-quality code quickly — without compromising
|
||||
autonomy.
|
||||
</Block.Paragraph>
|
||||
<Block.Container wrapped>
|
||||
<Block.LinkButton
|
||||
style={{ marginRight: '2rem' }}
|
||||
href={
|
||||
'https://github.com/backstage/backstage#getting-started'
|
||||
}
|
||||
>
|
||||
GitHub
|
||||
</Block.LinkButton>
|
||||
<Block.LinkButton
|
||||
href={'https://info.backstage.spotify.com/office-hours'}
|
||||
>
|
||||
Office Hours
|
||||
</Block.LinkButton>
|
||||
</Block.Container>
|
||||
</Block.TextBox>
|
||||
<Block.Graphics>
|
||||
<Block.Graphic
|
||||
x={-12.5}
|
||||
y={16}
|
||||
width={120}
|
||||
src={`${baseUrl}img/laptop.svg`}
|
||||
/>
|
||||
<Block.Graphic
|
||||
x={5.8}
|
||||
y={20}
|
||||
width={88}
|
||||
src={`${baseUrl}animations/backstage-logos-hero-8.gif`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe-top bg-black">
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-speed-paradox-7.gif`}
|
||||
/>
|
||||
<Block.SmallTitle small>The Speed Paradox</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
At Spotify, we've always believed in the speed and ingenuity
|
||||
that comes from having autonomous development teams. But as we
|
||||
learned firsthand, the faster you grow, the more fragmented
|
||||
and complex your software ecosystem becomes. And then
|
||||
everything slows down again.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-standards-paradox-4.gif`}
|
||||
/>
|
||||
<Block.SmallTitle small>The Standards Paradox</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
By centralizing services and standardizing your tooling,
|
||||
Backstage streamlines your development environment from end to
|
||||
end. Instead of restricting autonomy, standardization frees
|
||||
your engineers from infrastructure complexity. So you can
|
||||
return to building and scaling, quickly and safely.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-top bg-teal-top-right" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
{' '}
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-software-catalog-icon-1.gif`}
|
||||
/>
|
||||
<Block.Subtitle>Backstage Software Catalog</Block.Subtitle>
|
||||
<Block.Title half>
|
||||
Build an ecosystem, not a wilderness
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics padding={5}>
|
||||
<Block.Graphic
|
||||
y={-8}
|
||||
width={100}
|
||||
src={`${baseUrl}img/components-with-filter-small.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Manage all your software, all in one place{' '}
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Backstage makes it easy for one team to manage 10 services —
|
||||
and makes it possible for your company to manage thousands of
|
||||
them
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>A uniform overview</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Every team can see all the services they own and related
|
||||
resources (deployments, data pipelines, pull request status,
|
||||
etc.)
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.Image
|
||||
wide
|
||||
style={{
|
||||
background: `url(${baseUrl}img/components-with-filter.png)`,
|
||||
backgroundSize: '594px 435.5px',
|
||||
width: '594px',
|
||||
height: '435.5px',
|
||||
margin: '-380px 105px 0 10px',
|
||||
}}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Metadata on tap</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
All that information can be shared with plugins inside
|
||||
Backstage to enable other management features, like resource
|
||||
monitoring and testing
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Not just services</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Libraries, websites, ML models — you name it, Backstage knows
|
||||
all about it, including who owns it, dependencies, and more
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Discoverability & accountability
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
No more orphan software hiding in the dark corners of your
|
||||
tech stack
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small></Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>
|
||||
Learn more about the software catalog
|
||||
</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://backstage.io/docs/features/software-catalog/software-catalog-overview`}
|
||||
>
|
||||
Read
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-software-templates-icon-5.gif`}
|
||||
/>
|
||||
<Block.Subtitle>Backstage Software Templates</Block.Subtitle>
|
||||
<Block.Title small>Standards can set you free</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics padding={20}>
|
||||
<Block.Graphic
|
||||
y={-38}
|
||||
width={100}
|
||||
src={`${baseUrl}img/service-cards.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Like automated getting started guides
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Using templates, engineers can spin up a new microservice with
|
||||
your organization's best practices built-in, right from the
|
||||
start
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Push-button deployment
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Click a button to create a Spring Boot project with your repo
|
||||
automatically configured on GitHub and your CI already running
|
||||
the first build
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Built to your standards
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Go instead of Java? CircleCI instead of Jenkins? Serverless
|
||||
instead of Kubernetes? GCP instead of AWS? Customize your
|
||||
recipes with your best practices baked-in
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Golden Paths pave the way
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
When the right way is also the easiest way, engineers get up
|
||||
and running faster — and more safely
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<Block.Graphics>
|
||||
<Block.Graphic
|
||||
x={-50}
|
||||
y={-2}
|
||||
width={200}
|
||||
src={`${baseUrl}img/cards.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>
|
||||
Build your own software templates
|
||||
</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://backstage.io/docs/features/software-templates`}
|
||||
>
|
||||
Contribute
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-techdocs-icon-1.gif`}
|
||||
/>
|
||||
|
||||
<Block.Subtitle>Backstage TechDocs</Block.Subtitle>
|
||||
<Block.Title small>Docs like code</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<React.Fragment>
|
||||
<Block.Graphics padding={26}>
|
||||
<Block.Graphic
|
||||
x={-1.4}
|
||||
y={-45}
|
||||
width={107}
|
||||
src={`${baseUrl}img/techdocs-static-mobile.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Free documentation</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Whenever you use a Backstage Software Template, your project
|
||||
automatically gets a TechDocs site, for free
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Easy to write</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
With our docs-like-code approach, engineers write their
|
||||
documentation in Markdown files right alongside their code
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Easy to maintain</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Updating code? Update your documentation while you're there —
|
||||
with docs and code in the same place, it becomes a natural
|
||||
part of your workstream
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Easy to find and use</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Since all your documentation is in Backstage, finding any
|
||||
TechDoc is just a search query away
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<Block.Graphics padding={0}>
|
||||
<Block.Graphic
|
||||
x={-55}
|
||||
y={-5}
|
||||
width={210}
|
||||
src={`${baseUrl}img/techdocs-web.png`}
|
||||
/>
|
||||
<Block.Graphic
|
||||
x={-55}
|
||||
y={-5}
|
||||
width={210}
|
||||
src={`${baseUrl}img/techdocs2.gif`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>Learn more about TechDocs</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://backstage.io/docs/features/techdocs/techdocs-overview`}
|
||||
>
|
||||
Docs
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-top-right" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
{' '}
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-search-platform-icon-1.gif`}
|
||||
/>
|
||||
<Block.Subtitle>Backstage Search Platform</Block.Subtitle>
|
||||
<Block.Title half>
|
||||
A search platform made just for you
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics innerPadding={20}>
|
||||
<Block.Graphic
|
||||
y={-8}
|
||||
padding={0}
|
||||
width={100}
|
||||
src={`${baseUrl}img/search-platform-overview-small.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Way more than a text box{' '}
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Backstage Search more than just a box you type questions into
|
||||
— it's an entire platform all by itself, which you can
|
||||
customize to fit your organization's needs
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Search the way you want
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Bring your own search engine, create a customized search page
|
||||
experience, or edit the look and feel of each search result
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Index everything, find anything
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
With an extensible backend, you can search beyond the Software
|
||||
Catalog and index any source you'd like — whether it's
|
||||
TechDocs or Confluence and Stack Overflow
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Discoverability unlocked
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
New hires and seasoned employees alike can easily search your
|
||||
infrastructure instead of getting lost in it
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<Block.Graphics innerPadding={25} width={'1100px'}>
|
||||
<Block.Graphic
|
||||
padding={0}
|
||||
src={`${baseUrl}img/search-platform-overview.png`}
|
||||
width={100}
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
boxShadow: '3px 8px 8px rgba(0,0,0,0.3)',
|
||||
bottom: '8px',
|
||||
}}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>
|
||||
Learn more about Backstage Search
|
||||
</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://backstage.io/docs/features/search/search-overview`}
|
||||
>
|
||||
Read
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-kubernetes-icon-1.gif`}
|
||||
/>
|
||||
|
||||
<Block.Subtitle>Backstage Kubernetes</Block.Subtitle>
|
||||
<Block.Title small>
|
||||
Manage your services, not clusters
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Kubernetes made just for service owners
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Backstage features the first Kubernetes monitoring tool
|
||||
designed around the needs of service owners, not cluster
|
||||
admins
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Your service at a glance
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Get all your service's deployments in one, aggregated view —
|
||||
no more digging through cluster logs in a CLI, no more combing
|
||||
through lists of services you don't own
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Pick a cloud, any cloud
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Since Backstage uses the Kubernetes API, it's cloud agnostic —
|
||||
so it works no matter which cloud provider or managed
|
||||
Kubernetes service you use, and even works in multi-cloud orgs
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Any K8s, one UI</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Now you don't have to switch dashboards when you move from
|
||||
local testing to production, or from one cloud provider to
|
||||
another
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>
|
||||
Learn more about the K8s plugin
|
||||
</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://backstage.io/blog/2021/01/12/new-backstage-feature-kubernetes-for-service-owners`}
|
||||
>
|
||||
Read
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-plugin-icon-2.gif`}
|
||||
/>
|
||||
|
||||
<Block.Subtitle>
|
||||
Customize Backstage with plugins
|
||||
</Block.Subtitle>
|
||||
<Block.Title small>
|
||||
An app store for your infrastructure
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics padding={10}>
|
||||
<Block.Graphic
|
||||
y={-20}
|
||||
width={100}
|
||||
src={`${baseUrl}img/plugins.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Add functionality</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Want scalable website testing? Add the{' '}
|
||||
<a href="https://backstage.io/blog/2020/04/06/lighthouse-plugin">
|
||||
Lighthouse
|
||||
</a>{' '}
|
||||
plugin. Wondering about recommended frameworks? Add the{' '}
|
||||
<a href="https://backstage.io/blog/2020/05/14/tech-radar-plugin">
|
||||
Tech Radar
|
||||
</a>{' '}
|
||||
plugin.{' '}
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>BYO Plugins</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
If you don't see the plugin you need, it's simple to build
|
||||
your own
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Integrate your own custom tooling
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Building internal plugins lets you tailor your version of
|
||||
Backstage to be a perfect fit for your infrastructure
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Share with the community
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Building <a href="/plugins">open source plugins</a>{' '}
|
||||
contributes to the entire Backstage ecosystem, which benefits
|
||||
everyone
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Breakpoint
|
||||
wide={<img src={`${baseUrl}img/cards-plugins.png`} />}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe-top bg-teal">
|
||||
<ActionBlock.Title>Build a plugin</ActionBlock.Title>
|
||||
<ActionBlock.Link href="/docs/plugins/create-a-plugin">
|
||||
Contribute
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block small className="bg-black-grey cncf-block">
|
||||
<Block.Container center>
|
||||
<Block.SmallTitle small>
|
||||
Backstage is a{' '}
|
||||
<a href="https://www.cncf.io">
|
||||
Cloud Native Computing Foundation
|
||||
</a>{' '}
|
||||
incubation project
|
||||
<div className="cncf-logo" />
|
||||
</Block.SmallTitle>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
<HubSpotForm />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Index;
|
||||
@@ -1,29 +0,0 @@
|
||||
const React = require('react');
|
||||
|
||||
// This is an index of stable short-links to different doc sites
|
||||
// for example https://backstage.io/link?bind-routes
|
||||
const redirects = {
|
||||
'bind-routes':
|
||||
'/docs/plugins/composability#binding-external-routes-in-the-app',
|
||||
'scm-auth': '/docs/auth/#scaffolder-configuration-software-templates',
|
||||
'backend-system': '/docs/plugins/new-backend-system',
|
||||
};
|
||||
const fallback = '/docs';
|
||||
|
||||
function Link() {
|
||||
return (
|
||||
<html lang="en">
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
const redirects = ${JSON.stringify(redirects)};
|
||||
const target = redirects[window.location.search.slice(1)] || '${fallback}';
|
||||
window.location.href = target;
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Link;
|
||||
@@ -1,85 +0,0 @@
|
||||
/**
|
||||
* 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 React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Community Sessions</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Please be aware we follow the{' '}
|
||||
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
|
||||
{' '}
|
||||
CNCF Code of Conduct
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/wuztcqiQIa0"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="300"
|
||||
height="500"
|
||||
src="https://www.youtube.com/live_chat?v=wuztcqiQIa0&embed_domain=backstage.io&dark_theme=1"
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Don't be a stranger</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Main community channels
|
||||
<br />- Chat and get support on our{' '}
|
||||
<a href="https://discord.gg/backstage-687207715902193673">
|
||||
Discord
|
||||
</a>
|
||||
<br />- Get into contributing with the{' '}
|
||||
<a href="https://github.com/backstage/backstage/contribute">
|
||||
Good First Issues
|
||||
</a>
|
||||
<br />- Subscribe to the{' '}
|
||||
<a href="https://info.backstage.spotify.com/newsletter_subscribe">
|
||||
Community newsletter
|
||||
</a>
|
||||
<br />- Join the{' '}
|
||||
<a href="https://twitter.com/i/communities/1494019781716062215">
|
||||
Twitter community
|
||||
</a>
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* 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 React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Title>Contributor Spotlight nomination</Block.Title>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph></Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<iframe
|
||||
src="https://docs.google.com/forms/d/e/1FAIpQLSdiZ28O7vwHo6NrwirEzGSbuVyBANSv7ItHqRlgVvSz3Z5xqQ/viewform?embedded=true"
|
||||
width="800"
|
||||
height="1262"
|
||||
frameborder="0"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
>
|
||||
Loading…
|
||||
</iframe>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -1,148 +0,0 @@
|
||||
/**
|
||||
* 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 ondemandDirectory = require('path').join(process.cwd(), 'data/on-demand');
|
||||
const ondemandMetadata = fs
|
||||
.readdirSync(ondemandDirectory)
|
||||
.sort()
|
||||
.reverse()
|
||||
.map(file => yaml.load(fs.readFileSync(`./data/on-demand/${file}`, 'utf8')));
|
||||
const truncate = text =>
|
||||
text.length > 170 ? text.slice(0, 170) + '...' : text;
|
||||
|
||||
const addVideoDocsLink = '/docs/overview/support';
|
||||
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
|
||||
|
||||
const Ondemand = () => (
|
||||
<main className="MainContent">
|
||||
<div className="VideoPageLayout">
|
||||
<div className="VideoPageHeader">
|
||||
<h2>Upcoming live events</h2>
|
||||
<p>Upcoming Backstage events</p>
|
||||
<span>
|
||||
<a className="VideoAddNewButton ButtonFilled" href={addVideoDocsLink}>
|
||||
<b>Add an event or recording</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<Container wrapped className="VideoGrid">
|
||||
{ondemandMetadata
|
||||
.filter(video => video.category === 'Upcoming')
|
||||
.map(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
date,
|
||||
youtubeUrl,
|
||||
youtubeImgUrl,
|
||||
rsvpUrl,
|
||||
eventUrl,
|
||||
}) => (
|
||||
<div className="VideoCard">
|
||||
<div className="VideoCardHeader">
|
||||
<div className="VideoCardInfo">
|
||||
<h3 className="VideoCardTitle">{title}</h3>
|
||||
<p className="VideoCardDate">on {date}</p>
|
||||
|
||||
<span className="VideoCardChipOutlined">{category}</span>
|
||||
<p>
|
||||
<br />
|
||||
<img src={youtubeImgUrl} alt={title} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="VideoCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="VideoCardFooter">
|
||||
<a className="VideoButtonFilled" href={eventUrl}>
|
||||
Event page
|
||||
</a>
|
||||
<a className="VideoButtonFilled" href={rsvpUrl}>
|
||||
Remind me
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</Container>
|
||||
<BulletLine style={{ width: '100%' }} />
|
||||
<div className="VideoPageHeader">
|
||||
<h2>Community on demand</h2>
|
||||
</div>
|
||||
<Container wrapped className="VideoGrid">
|
||||
{ondemandMetadata
|
||||
.filter(video => video.category !== 'Upcoming')
|
||||
.map(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
date,
|
||||
youtubeUrl,
|
||||
youtubeImgUrl,
|
||||
}) => (
|
||||
<div className="VideoCard">
|
||||
<div className="VideoCardHeader">
|
||||
<div className="VideoCardInfo">
|
||||
<h3 className="VideoCardTitle">{title}</h3>
|
||||
<p className="VideoCardDate">on {date}</p>
|
||||
|
||||
<span className="VideoCardChipOutlined">{category}</span>
|
||||
<p>
|
||||
<br />
|
||||
<img src={youtubeImgUrl} alt={title} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="VideoCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="VideoCardFooter">
|
||||
<a className="VideoButtonFilled" href={youtubeUrl}>
|
||||
Watch on YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<div className="VideoCard" id="add-video-card">
|
||||
<div className="VideoCardBody">
|
||||
<p>Do you have a recording of a meetup to include on this page?</p>
|
||||
<p
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<a className="VideoButtonFilled" href={addVideoDocsLink}>
|
||||
<b>Add to the On-demand page</b>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Container className="VideoCardFooter">
|
||||
<p>
|
||||
Help us create a go-to place for hours of Backstage related
|
||||
content.
|
||||
</p>
|
||||
</Container>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
module.exports = Ondemand;
|
||||
@@ -1,174 +0,0 @@
|
||||
/**
|
||||
* 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.load(fs.readFileSync(`./data/plugins/${file}`, 'utf8')))
|
||||
.sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()));
|
||||
const truncate = text =>
|
||||
text.length > 170 ? text.slice(0, 170) + '...' : text;
|
||||
|
||||
const newForDays = 100;
|
||||
|
||||
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>Plugin Marketplace</h2>
|
||||
<p>
|
||||
Open source plugins that you can add to your Backstage deployment.
|
||||
Learn how to build a <a href="/docs/plugins">plugin</a>.
|
||||
</p>
|
||||
<span>
|
||||
<a
|
||||
className="PluginAddNewButton ButtonFilled"
|
||||
href={addPluginDocsLink}
|
||||
>
|
||||
<b>Add to Marketplace</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<BulletLine style={{ width: '100% ' }} />
|
||||
<div className="PluginPageHeader">
|
||||
<h2>Core Features</h2>
|
||||
</div>
|
||||
<Container wrapped className="PluginGrid">
|
||||
{pluginMetadata
|
||||
.filter(plugin => plugin.category === 'Core Feature')
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map(
|
||||
({
|
||||
iconUrl,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
authorUrl,
|
||||
documentation,
|
||||
category,
|
||||
}) => (
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={iconUrl || defaultIconUrl} alt={title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={authorUrl}>{author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</Container>
|
||||
<div className="PluginPageHeader">
|
||||
<h2>All Plugins</h2>
|
||||
</div>
|
||||
<Container wrapped className="PluginGrid">
|
||||
{pluginMetadata
|
||||
.filter(plugin => plugin.category !== 'Core Feature')
|
||||
.map(
|
||||
({
|
||||
iconUrl,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
authorUrl,
|
||||
documentation,
|
||||
category,
|
||||
addedDate,
|
||||
}) => (
|
||||
<div className="PluginCard">
|
||||
{Math.trunc(
|
||||
(Date.now() - new Date(addedDate)) / (1000 * 60 * 60 * 24),
|
||||
) < newForDays && (
|
||||
<div className="ribbon ribbon-top-right">
|
||||
<span>NEW</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={iconUrl || defaultIconUrl} alt={title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={authorUrl}>{author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</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/backstage/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/backstage/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>
|
||||
);
|
||||
|
||||
module.exports = Plugins;
|
||||
@@ -1,408 +0,0 @@
|
||||
{
|
||||
"releases": {
|
||||
"Release Notes": [
|
||||
"releases/v1.11.0",
|
||||
"releases/v1.10.0",
|
||||
"releases/v1.9.0",
|
||||
"releases/v1.8.0",
|
||||
"releases/v1.7.0",
|
||||
"releases/v1.6.0",
|
||||
"releases/v1.5.0",
|
||||
"releases/v1.4.0",
|
||||
"releases/v1.3.0",
|
||||
"releases/v1.2.0",
|
||||
"releases/v1.1.0",
|
||||
"releases/v1.0.0"
|
||||
]
|
||||
},
|
||||
"docs": {
|
||||
"Overview": [
|
||||
"overview/what-is-backstage",
|
||||
"overview/architecture-overview",
|
||||
"overview/roadmap",
|
||||
"overview/vision",
|
||||
"overview/background",
|
||||
"overview/adopting",
|
||||
"overview/versioning-policy",
|
||||
"overview/threat-model",
|
||||
"overview/support",
|
||||
"overview/glossary",
|
||||
"overview/logos"
|
||||
],
|
||||
"Getting Started": [
|
||||
"getting-started/index",
|
||||
"getting-started/configuration",
|
||||
"getting-started/create-an-app",
|
||||
"getting-started/running-backstage-locally",
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "App configuration",
|
||||
"ids": [
|
||||
"getting-started/configure-app-with-plugins",
|
||||
"getting-started/app-custom-theme",
|
||||
"getting-started/homepage"
|
||||
]
|
||||
},
|
||||
"getting-started/keeping-backstage-updated",
|
||||
"getting-started/concepts",
|
||||
"getting-started/contributors",
|
||||
"getting-started/project-structure"
|
||||
],
|
||||
"Local Development": [
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "CLI",
|
||||
"ids": [
|
||||
"local-dev/cli-overview",
|
||||
"local-dev/cli-build-system",
|
||||
"local-dev/cli-commands"
|
||||
]
|
||||
},
|
||||
"local-dev/linking-local-packages"
|
||||
],
|
||||
"Core Features": [
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Software Catalog",
|
||||
"ids": [
|
||||
"features/software-catalog/software-catalog-overview",
|
||||
"features/software-catalog/life-of-an-entity",
|
||||
"features/software-catalog/configuration",
|
||||
"features/software-catalog/system-model",
|
||||
"features/software-catalog/descriptor-format",
|
||||
"features/software-catalog/references",
|
||||
"features/software-catalog/well-known-annotations",
|
||||
"features/software-catalog/well-known-relations",
|
||||
"features/software-catalog/well-known-statuses",
|
||||
"features/software-catalog/extending-the-model",
|
||||
"features/software-catalog/external-integrations",
|
||||
"features/software-catalog/catalog-customization",
|
||||
"features/software-catalog/software-catalog-api"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Kubernetes",
|
||||
"ids": [
|
||||
"features/kubernetes/overview",
|
||||
"features/kubernetes/installation",
|
||||
"features/kubernetes/configuration",
|
||||
"features/kubernetes/authentication",
|
||||
"features/kubernetes/troubleshooting",
|
||||
"features/kubernetes/proxy"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Software Templates",
|
||||
"ids": [
|
||||
"features/software-templates/software-templates-index",
|
||||
"features/software-templates/configuration",
|
||||
"features/software-templates/adding-templates",
|
||||
"features/software-templates/writing-templates",
|
||||
"features/software-templates/input-examples",
|
||||
"features/software-templates/builtin-actions",
|
||||
"features/software-templates/writing-custom-actions",
|
||||
"features/software-templates/writing-custom-field-extensions",
|
||||
"features/software-templates/writing-custom-step-layouts",
|
||||
"features/software-templates/testing-scaffolder-alpha",
|
||||
"features/software-templates/migrating-from-v1beta2-to-v1beta3"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Backstage Search",
|
||||
"ids": [
|
||||
"features/search/search-overview",
|
||||
"features/search/getting-started",
|
||||
"features/search/concepts",
|
||||
"features/search/architecture",
|
||||
"features/search/search-engines",
|
||||
"features/search/how-to-guides"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "TechDocs",
|
||||
"ids": [
|
||||
"features/techdocs/techdocs-overview",
|
||||
"features/techdocs/getting-started",
|
||||
"features/techdocs/concepts",
|
||||
"features/techdocs/addons",
|
||||
"features/techdocs/architecture",
|
||||
"features/techdocs/creating-and-publishing",
|
||||
"features/techdocs/configuration",
|
||||
"features/techdocs/using-cloud-storage",
|
||||
"features/techdocs/configuring-ci-cd",
|
||||
"features/techdocs/cli",
|
||||
"features/techdocs/how-to-guides",
|
||||
"features/techdocs/troubleshooting",
|
||||
"features/techdocs/faqs"
|
||||
]
|
||||
}
|
||||
],
|
||||
"Integrations": [
|
||||
"integrations/index",
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "AWS S3",
|
||||
"ids": [
|
||||
"integrations/aws-s3/locations",
|
||||
"integrations/aws-s3/discovery"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Azure",
|
||||
"ids": [
|
||||
"integrations/azure/locations",
|
||||
"integrations/azure/discovery",
|
||||
"integrations/azure/org"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Bitbucket Cloud",
|
||||
"ids": [
|
||||
"integrations/bitbucketCloud/locations",
|
||||
"integrations/bitbucketCloud/discovery"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Bitbucket Server",
|
||||
"ids": [
|
||||
"integrations/bitbucketServer/locations",
|
||||
"integrations/bitbucketServer/discovery"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Datadog",
|
||||
"ids": ["integrations/datadog-rum/installation"]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Gerrit",
|
||||
"ids": [
|
||||
"integrations/gerrit/locations",
|
||||
"integrations/gerrit/discovery"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "GitHub",
|
||||
"ids": [
|
||||
"integrations/github/locations",
|
||||
"integrations/github/discovery",
|
||||
"integrations/github/org",
|
||||
"integrations/github/github-apps"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "GitLab",
|
||||
"ids": [
|
||||
"integrations/gitlab/locations",
|
||||
"integrations/gitlab/discovery",
|
||||
"integrations/gitlab/org"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Gitea",
|
||||
"ids": ["integrations/gitea/locations"]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Google GCS",
|
||||
"ids": ["integrations/google-cloud-storage/locations"]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "LDAP",
|
||||
"ids": ["integrations/ldap/org"]
|
||||
}
|
||||
],
|
||||
"Plugins": [
|
||||
"plugins/index",
|
||||
"plugins/existing-plugins",
|
||||
"plugins/create-a-plugin",
|
||||
"plugins/plugin-development",
|
||||
"plugins/structure-of-a-plugin",
|
||||
"plugins/integrating-plugin-into-software-catalog",
|
||||
"plugins/integrating-search-into-plugins",
|
||||
"plugins/composability",
|
||||
"plugins/customization",
|
||||
"plugins/analytics",
|
||||
"plugins/feature-flags",
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Backends and APIs",
|
||||
"ids": [
|
||||
"plugins/proxying",
|
||||
"plugins/backend-plugin",
|
||||
"plugins/call-existing-api",
|
||||
"plugins/url-reader"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Testing",
|
||||
"ids": ["plugins/testing"]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Publishing",
|
||||
"ids": [
|
||||
"plugins/publish-private",
|
||||
"plugins/add-to-marketplace",
|
||||
"plugins/observability"
|
||||
]
|
||||
}
|
||||
],
|
||||
"Configuration": [
|
||||
"conf/index",
|
||||
"conf/reading",
|
||||
"conf/writing",
|
||||
"conf/defining"
|
||||
],
|
||||
"Auth and identity": [
|
||||
"auth/index",
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Included providers",
|
||||
"ids": [
|
||||
"auth/auth0/provider",
|
||||
"auth/atlassian/provider",
|
||||
"auth/bitbucket/provider",
|
||||
"auth/microsoft/provider",
|
||||
"auth/github/provider",
|
||||
"auth/gitlab/provider",
|
||||
"auth/google/provider",
|
||||
"auth/google/gcp-iap-auth",
|
||||
"auth/okta/provider",
|
||||
"auth/onelogin/provider",
|
||||
"auth/oauth2-proxy/provider"
|
||||
]
|
||||
},
|
||||
"auth/identity-resolver",
|
||||
"auth/oauth",
|
||||
"auth/oidc",
|
||||
"auth/add-auth-provider",
|
||||
"auth/service-to-service-auth",
|
||||
"auth/troubleshooting",
|
||||
"auth/glossary"
|
||||
],
|
||||
"Permissions": [
|
||||
"permissions/overview",
|
||||
"permissions/concepts",
|
||||
"permissions/getting-started",
|
||||
"permissions/writing-a-policy",
|
||||
"permissions/frontend-integration",
|
||||
"permissions/custom-rules",
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Tutorial: using Permissions in your plugin",
|
||||
"ids": [
|
||||
"permissions/plugin-authors/01-setup",
|
||||
"permissions/plugin-authors/02-adding-a-basic-permission-check",
|
||||
"permissions/plugin-authors/03-adding-a-resource-permission-check",
|
||||
"permissions/plugin-authors/04-authorizing-access-to-paginated-data",
|
||||
"permissions/plugin-authors/05-frontend-authorization"
|
||||
]
|
||||
}
|
||||
],
|
||||
"Deployment": [
|
||||
"deployment/index",
|
||||
"deployment/scaling",
|
||||
"deployment/docker",
|
||||
"deployment/k8s",
|
||||
"deployment/heroku"
|
||||
],
|
||||
"Designing for Backstage": [
|
||||
"dls/design",
|
||||
"dls/component-design-guidelines",
|
||||
"dls/contributing-to-storybook",
|
||||
"dls/figma"
|
||||
],
|
||||
"API Reference": [
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Guides",
|
||||
"ids": ["api/utility-apis"]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "API Reference",
|
||||
"ids": ["reference/index"]
|
||||
},
|
||||
"api/deprecations"
|
||||
],
|
||||
"Tutorials": [
|
||||
"tutorials/journey",
|
||||
"tutorials/quickstart-app-plugin",
|
||||
"tutorials/react-router-stable-migration",
|
||||
"tutorials/package-role-migration",
|
||||
"tutorials/migrating-away-from-core",
|
||||
"tutorials/configuring-plugin-databases",
|
||||
"tutorials/switching-sqlite-postgres",
|
||||
"tutorials/using-backstage-proxy-within-plugin",
|
||||
"tutorials/yarn-migration"
|
||||
],
|
||||
"Architecture Decision Records (ADRs)": [
|
||||
"architecture-decisions/adrs-overview",
|
||||
"architecture-decisions/adrs-adr001",
|
||||
"architecture-decisions/adrs-adr002",
|
||||
"architecture-decisions/adrs-adr003",
|
||||
"architecture-decisions/adrs-adr004",
|
||||
"architecture-decisions/adrs-adr005",
|
||||
"architecture-decisions/adrs-adr006",
|
||||
"architecture-decisions/adrs-adr007",
|
||||
"architecture-decisions/adrs-adr008",
|
||||
"architecture-decisions/adrs-adr009",
|
||||
"architecture-decisions/adrs-adr010",
|
||||
"architecture-decisions/adrs-adr011",
|
||||
"architecture-decisions/adrs-adr012",
|
||||
"architecture-decisions/adrs-adr013"
|
||||
],
|
||||
"FAQ": ["FAQ"],
|
||||
"Experimental Backend System": [
|
||||
"backend-system/index",
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Architecture",
|
||||
"ids": [
|
||||
"backend-system/architecture/index",
|
||||
"backend-system/architecture/services",
|
||||
"backend-system/architecture/plugins",
|
||||
"backend-system/architecture/extension-points",
|
||||
"backend-system/architecture/modules",
|
||||
"backend-system/architecture/naming-patterns"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Building Backends",
|
||||
"ids": [
|
||||
"backend-system/building-backends/index",
|
||||
"backend-system/building-backends/migrating"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Building Plugins & Modules",
|
||||
"ids": [
|
||||
"backend-system/building-plugins-and-modules/index",
|
||||
"backend-system/building-plugins-and-modules/testing",
|
||||
"backend-system/building-plugins-and-modules/migrating"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Core Services",
|
||||
"ids": ["backend-system/core-services/index"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// See https://docusaurus.io/docs/site-config for all the possible
|
||||
// site configuration options.
|
||||
|
||||
// This figures out what the most recent release version is, so that we can link to it in the header
|
||||
const [{ name: latestRelease }] = require('fs')
|
||||
.readdirSync(require('path').resolve(__dirname, '../docs/releases'))
|
||||
.map(file => {
|
||||
const match = file.match(/^v(\d+)\.(\d+)\.(\d+)\.md$/);
|
||||
if (!match) {
|
||||
return undefined;
|
||||
}
|
||||
const parts = match.slice(1).map(v => parseInt(v, 10));
|
||||
return {
|
||||
name: file.slice(0, file.length - '.md'.length),
|
||||
weight: parts[0] * 1000000 + parts[1] * 1000 + parts[2],
|
||||
};
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => b.weight - a.weight);
|
||||
|
||||
const siteConfig = {
|
||||
title: 'Backstage Software Catalog and Developer Platform', // Title for your website.
|
||||
tagline: 'An open platform for building developer portals',
|
||||
url: 'https://backstage.io', // Your website URL
|
||||
cname: 'backstage.io',
|
||||
baseUrl: '/', // Base URL for your project */
|
||||
editUrl: 'https://github.com/backstage/backstage/edit/master/docs/',
|
||||
|
||||
// Used for publishing and more
|
||||
projectName: 'backstage',
|
||||
organizationName: 'Spotify',
|
||||
fossWebsite: 'https://spotify.github.io/',
|
||||
|
||||
// Google Analytics
|
||||
gaTrackingId: 'G-KSEVGGNCJW',
|
||||
gaGtag: true,
|
||||
|
||||
// For no header links in the top nav bar -> headerLinks: [],
|
||||
headerLinks: [
|
||||
{
|
||||
href: 'https://github.com/backstage/backstage',
|
||||
label: 'GitHub',
|
||||
},
|
||||
{
|
||||
doc: 'overview/what-is-backstage',
|
||||
href: '/docs',
|
||||
label: 'Docs',
|
||||
},
|
||||
{
|
||||
page: 'plugins',
|
||||
label: 'Plugins',
|
||||
},
|
||||
{
|
||||
page: 'blog',
|
||||
blog: true,
|
||||
label: 'Blog',
|
||||
},
|
||||
{
|
||||
doc: `releases/${latestRelease}`,
|
||||
href: '/releases',
|
||||
label: 'Releases',
|
||||
},
|
||||
{
|
||||
page: 'demos',
|
||||
label: 'Demos',
|
||||
},
|
||||
{
|
||||
page: 'community',
|
||||
label: 'Community',
|
||||
},
|
||||
],
|
||||
|
||||
/* path to images for header/footer */
|
||||
// headerIcon: "img/android-chrome-192x192.png",
|
||||
footerIcon: 'img/android-chrome-192x192.png',
|
||||
favicon: 'img/favicon.ico',
|
||||
|
||||
/* Colors for website */
|
||||
colors: {
|
||||
primaryColor: '#36BAA2',
|
||||
secondaryColor: '#121212',
|
||||
textColor: '#FFFFFF',
|
||||
navigatorTitleTextColor: '#e4e4e4',
|
||||
navigatorItemTextColor: '#9e9e9e',
|
||||
navGroupSubcategoryTitleColor: '#9e9e9e',
|
||||
},
|
||||
|
||||
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Backstage Project Authors. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: https://www.linuxfoundation.org/trademark-usage`,
|
||||
|
||||
highlight: {
|
||||
// Highlight.js theme to use for syntax highlighting in code blocks.
|
||||
theme: 'monokai',
|
||||
},
|
||||
|
||||
// Add custom scripts here that would be placed in <script> tags.
|
||||
scripts: [
|
||||
'https://buttons.github.io/buttons.js',
|
||||
'https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js',
|
||||
'/js/medium-zoom.js',
|
||||
'/js/dismissable-banner.js',
|
||||
'/js/scroll-nav-to-view-in-docs.js',
|
||||
],
|
||||
|
||||
// On page navigation for the current documentation page.
|
||||
onPageNav: 'separate',
|
||||
// No .html extensions for paths.
|
||||
cleanUrl: true,
|
||||
|
||||
// Open Graph and Twitter card images.
|
||||
ogImage: 'img/sharing-opengraph.png',
|
||||
twitterImage: 'img/twitter-summary.png',
|
||||
|
||||
// For sites with a sizable amount of content, set collapsible to true.
|
||||
// Expand/collapse the links and subcategories under categories.
|
||||
docsSideNavCollapsible: true,
|
||||
|
||||
// Show documentation's last contributor's name.
|
||||
// enableUpdateBy: true,
|
||||
|
||||
// Show documentation's last update time.
|
||||
enableUpdateTime: true,
|
||||
|
||||
// You may provide arbitrary config keys to be used as needed by your
|
||||
// template. For example, if you need your repo's URL...
|
||||
repoUrl: 'https://github.com/backstage/backstage',
|
||||
twitterUsername: 'SpotifyEng',
|
||||
|
||||
stylesheets: [
|
||||
'https://fonts.googleapis.com/css?family=IBM+Plex+Mono:500,700&display=swap',
|
||||
],
|
||||
|
||||
algolia: {
|
||||
apiKey: '10b9e6c92a4513c1cf390f50e53aad1f',
|
||||
indexName: 'backstage_io',
|
||||
appId: 'JCMFNHCHI8',
|
||||
searchParameters: {}, // Optional (if provided by Algolia)
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = siteConfig;
|
||||
-9460
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user