Merge pull request #15937 from luchillo17/feat/BCKSTG-110-docusaurus-2

Microsite: Docusaurus 2.2 upgrade
This commit is contained in:
Johan Haals
2023-02-21 10:06:04 +01:00
committed by GitHub
24 changed files with 2172 additions and 323 deletions
+162 -132
View File
@@ -13,6 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// @ts-check
/** @type {import('@docusaurus/types').Config} */
module.exports = {
title: 'Backstage Software Catalog and Developer Platform',
tagline: 'An open platform for building developer portals',
@@ -40,6 +44,7 @@ module.exports = {
presets: [
[
'@docusaurus/preset-classic',
/** @type {import('@docusaurus/preset-classic').Options} */
{
docs: {
showLastUpdateAuthor: true,
@@ -60,138 +65,163 @@ module.exports = {
},
],
],
plugins: [],
themeConfig: {
navbar: {
title: 'Backstage Software Catalog and Developer Platform',
items: [
{
href: 'https://github.com/backstage/backstage',
label: 'GitHub',
position: 'left',
plugins: [
'docusaurus-plugin-sass',
() => ({
configureWebpack() {
return {
module: {
rules: [
{
test: /\.ya?ml$/,
use: 'yaml-loader',
},
],
},
};
},
}),
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
{
colorMode: {
defaultMode: 'dark',
disableSwitch: true,
},
navbar: {
logo: {
alt: 'Backstage Software Catalog and Developer Platform',
src: 'img/logo.svg',
},
{
to: 'docs/overview/what-is-backstage',
label: 'Docs',
position: 'left',
},
{
to: '/plugins',
label: 'Plugins',
position: 'left',
},
{
to: '/blog',
label: 'Blog',
position: 'left',
},
{
to: 'docs/releases/v1.8.0',
label: 'Releases',
position: 'left',
},
{
to: '/demos',
label: 'Demos',
position: 'left',
},
{
to: '/community',
label: 'Community',
position: 'left',
},
],
items: [
{
href: 'https://github.com/backstage/backstage',
label: 'GitHub',
position: 'left',
},
{
to: 'docs/overview/what-is-backstage',
label: 'Docs',
position: 'left',
},
{
to: '/plugins',
label: 'Plugins',
position: 'left',
},
{
to: '/blog',
label: 'Blog',
position: 'left',
},
{
to: 'docs/releases/v1.8.0',
label: 'Releases',
position: 'left',
},
{
to: '/demos',
label: 'Demos',
position: 'left',
},
{
to: '/community',
label: 'Community',
position: 'left',
},
],
},
image: 'img/sharing-opengraph.png',
footer: {
links: [
{
items: [
{
html: '<a href="/"><h2 class="footerLogo"></h2></a>',
},
],
},
{
title: 'Docs',
items: [
{
label: 'What is Backstage?',
to: 'docs/overview/what-is-backstage',
},
{
label: 'Getting started',
to: 'docs/getting-started/',
},
{
label: 'Software Catalog',
to: 'docs/features/software-catalog/software-catalog-overview',
},
{
label: 'Create a Plugin',
to: 'docs/plugins/create-a-plugin',
},
{
label: 'Designing for Backstage',
to: 'docs/dls/design',
},
],
},
{
title: 'Community',
items: [
{
label: 'Support chatroom',
to: 'https://discord.gg/MUpMjP2',
},
{
label: 'Contributing',
to: 'https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md',
},
{
label: 'Adopting',
to: 'https://backstage.spotify.com',
},
{
label: 'Subscribe to our newsletter',
to: 'https://mailchi.mp/spotify/backstage-community',
},
{
label: 'CNCF Incubation',
to: 'https://www.cncf.io/projects/',
},
],
},
{
title: 'More',
items: [
{
label: 'Open Source @ Spotify',
to: 'https://spotify.github.io/',
},
{
label: 'Spotify Engineering Blog',
to: 'https://engineering.atspotify.com/',
},
{
label: 'Spotify for Developers',
to: 'https://developer.spotify.com/',
},
{
label: 'Github',
to: 'https://github.com/backstage/',
},
],
},
],
copyright:
'<p style="text-align:center"><a href="https://spotify.github.io/">Made with ❤️ at Spotify</a></p><p class="copyright">Copyright © 2022 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</p>',
},
algolia: {
appId: 'AZYC4ZFNTN',
apiKey: '7dbd2089b0d445ee0d87db71abfc794f',
indexName: 'backstage',
searchParameters: {},
},
},
image: 'img/sharing-opengraph.png',
footer: {
links: [
{
items: [
{
html: '<a href="/"><h2 class="footerLogo"></h2></a>',
},
],
},
{
title: 'Docs',
items: [
{
label: 'What is Backstage?',
to: 'docs/overview/what-is-backstage',
},
{
label: 'Getting started',
to: 'docs/getting-started/',
},
{
label: 'Software Catalog',
to: 'docs/features/software-catalog/software-catalog-overview',
},
{
label: 'Create a Plugin',
to: 'docs/plugins/create-a-plugin',
},
{
label: 'Designing for Backstage',
to: 'docs/dls/design',
},
],
},
{
title: 'Community',
items: [
{
label: 'Support chatroom',
to: 'https://discord.gg/MUpMjP2',
},
{
label: 'Contributing',
to: 'https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md',
},
{
label: 'Adopting',
to: 'https://backstage.spotify.com',
},
{
label: 'Subscribe to our newsletter',
to: 'https://mailchi.mp/spotify/backstage-community',
},
{
label: 'CNCF Incubation',
to: 'https://www.cncf.io/projects/',
},
],
},
{
title: 'More',
items: [
{
label: 'Open Source @ Spotify',
to: 'https://spotify.github.io/',
},
{
label: 'Spotify Engineering Blog',
to: 'https://engineering.atspotify.com/',
},
{
label: 'Spotify for Developers',
to: 'https://developer.spotify.com/',
},
{
label: 'Github',
to: 'https://github.com/backstage/',
},
],
},
],
copyright:
'<p style="text-align:center"><a href="https://spotify.github.io/">Made with ❤️ at Spotify</a></p><p class="copyright">Copyright © 2022 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</p>',
},
algolia: {
appId: 'AZYC4ZFNTN',
apiKey: '7dbd2089b0d445ee0d87db71abfc794f',
indexName: 'backstage',
searchParameters: {},
},
},
};
+11 -4
View File
@@ -17,17 +17,24 @@
"docusaurus": "docusaurus"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.3.0",
"@spotify/prettier-config": "^14.0.0",
"@tsconfig/docusaurus": "^1.0.6",
"@types/webpack-env": "^1.18.0",
"js-yaml": "^4.1.0",
"prettier": "^2.6.2",
"replace": "^1.2.2"
"replace": "^1.2.2",
"typescript": "^4.9.4",
"yaml-loader": "^0.8.0"
},
"prettier": "@spotify/prettier-config",
"dependencies": {
"@docusaurus/core": "2.2.0",
"@docusaurus/preset-classic": "2.2.0",
"@docusaurus/core": "2.3.0",
"@docusaurus/preset-classic": "2.3.0",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"sass": "^1.57.1"
}
}
@@ -0,0 +1,35 @@
.bannerSection {
display: block;
&:global(.greyBackground) {
background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
}
&:global(.greenGradientBackground) {
background: linear-gradient(70.44deg, #121212 55%, #5d817b);
}
&:global(.greenBottomGradientBackground) {
background: linear-gradient(
178.64deg,
hsla(0, 0%, 100%, 0) 57.61%,
hsla(0, 0%, 100%, 0.17) 127.71%
),
linear-gradient(
144.35deg,
rgba(98, 197, 179, 0) 56.68%,
rgba(98, 197, 179, 0.59) 109.25%
),
linear-gradient(
192.29deg,
rgba(155, 240, 225, 0) 54.17%,
rgba(155, 240, 225, 0.67) 137.34%
);
}
&:global(.greenCallToActionGradientBackground) {
background: linear-gradient(87.29deg, #9bf0e1 17.71%, #36baa2 80.85%);
color: var(--ifm-color-gray-900);
}
}
@@ -0,0 +1,34 @@
import clsx from 'clsx';
import React, { PropsWithChildren } from 'react';
import bannerStyles from './bannerSection.module.scss';
export type IBannerSectionProps = PropsWithChildren<{
className?: string;
greyBackground?: boolean;
greenGradientBackground?: boolean;
greenBottomGradientBackground?: boolean;
greenCallToActionGradientBackground?: boolean;
}>;
export const BannerSection = ({
children,
className,
greyBackground = false,
greenGradientBackground = false,
greenBottomGradientBackground = false,
greenCallToActionGradientBackground = false,
}: IBannerSectionProps) => (
<section
className={clsx(bannerStyles.bannerSection, className, {
greyBackground,
greenGradientBackground,
greenBottomGradientBackground,
greenCallToActionGradientBackground,
})}
>
<div className="container padding-horiz--lg padding-vert--xl">
{children}
</div>
</section>
);
@@ -0,0 +1,20 @@
$desktopUpBreakpoint: 997px;
.sectionGridContainer {
gap: 2rem;
display: grid;
:global(.gridHeader) {
grid-column: 1 / -1;
}
}
.gridContainer {
gap: 2rem;
display: grid;
align-items: center;
@media (min-width: $desktopUpBreakpoint) {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
@@ -0,0 +1,35 @@
import clsx from 'clsx';
import React, { PropsWithChildren, ReactNode } from 'react';
import bannerGridStyles from './bannerSectionGrid.module.scss';
export type IBannerSectionColumnsProps = PropsWithChildren<{
header?: ReactNode;
className?: string;
// children: ReactNode | ReactNode[];
}>;
export const BannerSectionGrid = ({
header,
children,
className,
}: IBannerSectionColumnsProps) => {
console.log('Header: ', header);
return (
<div className={clsx(bannerGridStyles.sectionGridContainer, className)}>
{header && <div className="gridHeader">{header}</div>}
<div className={bannerGridStyles.gridContainer}>
{Array.isArray(children)
? children.map((child, index) =>
React.cloneElement(child, {
key: index,
className: clsx(child.props.className),
}),
)
: children}
</div>
</div>
);
};
@@ -0,0 +1,30 @@
.contentBlock {
height: 100%;
gap: 1.5rem;
display: grid;
align-items: center;
> *,
h1,
h2 {
margin: 0;
padding: 0;
}
:global(.contentBlockTitle) {
align-self: start;
}
:global(.bulletLine) {
width: 50px;
margin-bottom: 0.5rem;
}
:global(.actionButtons) {
gap: 1rem;
display: grid;
align-self: end;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
}
}
@@ -0,0 +1,53 @@
import Link from '@docusaurus/Link';
import clsx from 'clsx';
import React, { FC, PropsWithChildren, ReactNode } from 'react';
import contentBlockStyles from './contentBlock.module.scss';
export interface ContentBlockActionButtonProps {
label: string;
link: string;
}
export type IContentBlockProps = PropsWithChildren<{
title?: ReactNode;
className?: string;
topImgSrc?: string;
hasBulletLine?: boolean;
actionButtons?: ContentBlockActionButtonProps[];
}>;
export const ContentBlock = ({
children,
title,
className,
topImgSrc,
hasBulletLine,
actionButtons,
}: IContentBlockProps) => (
<div className={clsx(className, contentBlockStyles.contentBlock)}>
{topImgSrc && <img src={topImgSrc} alt={topImgSrc} />}
<div className="contentBlockTitle">
{hasBulletLine && <div className="bulletLine" />}
{title && React.isValidElement(title) ? title : <h2>{title}</h2>}
</div>
{children && React.isValidElement(children) ? children : <p>{children}</p>}
{actionButtons && (
<div className="actionButtons">
{actionButtons.map(({ link, label }, index) => (
<Link
key={index}
className="button button--primary button--lg"
to={link}
>
{label}
</Link>
))}
</div>
)}
</div>
);
+13 -2
View File
@@ -25,7 +25,7 @@
background-color: white;
}
/* Utility API Styling */
/* #region Utility API Styling */
.textGreen {
color: #82b366;
}
@@ -44,4 +44,15 @@
.textAlignCenter {
text-align: center;
}
/* End of Utility API Styling */
/* #endregion */
/* #region Utility component styles */
.bulletLine {
height: 3px;
background: linear-gradient(
89.75deg,
#9bf0e1 -1.5%,
rgba(155, 240, 225, 0) 111.48%
);
}
/* #endregion */
@@ -0,0 +1,28 @@
.communityPage {
// --ifm-spacing-horizontal: 2rem;
font-size: 1.25rem;
h1 {
font-size: 54px;
line-height: 56px;
word-break: break-word;
}
p {
text-align: justify;
}
}
.listContainer {
height: 100%;
align-items: stretch !important;
grid-template-rows: auto 1fr;
ul {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
@@ -0,0 +1,270 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { BannerSection } from '@site/src/components/bannerSection/bannerSection';
import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSectionGrid';
import Layout from '@theme/Layout';
import { clsx } from 'clsx';
import React from 'react';
import { ContentBlock } from '../../components/contentBlock/contentBlock';
import communityStyles from './community.module.scss';
interface ICollectionItem {
title?: string;
content: React.ReactNode;
label: string;
link: string;
}
const Community = () => {
const { siteConfig } = useDocusaurusContext();
//#region Collection Data
const communityListItems: ICollectionItem[] = [
{
content: 'Chat and get support on our',
label: 'Discord',
link: 'https://discord.gg/MUpMjP2',
},
{
content: 'Get into contributing with the',
label: 'Good First Issues',
link: 'https://github.com/backstage/backstage/contribute',
},
{
content: 'Subscribe to the',
label: 'Community newsletter',
link: 'https://info.backstage.spotify.com/newsletter_subscribe',
},
{
content: 'Join the',
label: 'Twitter community',
link: 'https://twitter.com/i/communities/1494019781716062215',
},
];
const officialInitiatives: ICollectionItem[] = [
{
title: 'Community sessions',
content:
'Maintainers and adopters meet monthly to share updates, demos, and ideas. Yep, all sessions are recorded!',
link: '/on-demand',
label: 'Join a session',
},
{
title: 'Newsletter',
content:
"The official monthly Backstage newsletter. Don't miss the latest news from your favorite project!",
link: 'https://info.backstage.spotify.com/newsletter_subscribe',
label: 'Subscribe',
},
{
title: 'Contributor Spotlight',
content:
"A recognition for valuable community work. Nominate contributing members for their efforts! We'll put them in the spotlight ❤️",
link: '/nominate',
label: 'Nominate now',
},
];
const communityInitiatives: ICollectionItem[] = [
{
title: 'Open Mic Meetup',
content: (
<>
A casual get together of Backstage users sharing their experiences and
helping each other. Hosted by{' '}
<Link to="https://roadie.io/">Roadie.io</Link> and{' '}
<Link to="https://frontside.com/">Frontside Software</Link>.
</>
),
link: 'https://backstage-openmic.com/',
label: 'Learn more',
},
{
title: 'Backstage Weekly Newsletter',
content: (
<>
A weekly newsletter with news, updates and things community from your
friends at <Link to="https://roadie.io/">Roadie.io</Link>.
</>
),
link: 'https://roadie.io/backstage-weekly/',
label: 'Learn more',
},
];
const trainingNCertifications: ICollectionItem[] = [
{
title: 'Open Mic Meetup',
content:
'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.',
link: 'https://training.linuxfoundation.org/training/introduction-to-backstage-developer-portals-made-easy-lfs142x/',
label: 'Learn more',
},
];
const partners: { name: string; url: string; logo: string }[] = [
{
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',
},
];
//#endregion
return (
<Layout>
<div className={clsx(communityStyles.communityPage)}>
<BannerSection greyBackground>
<BannerSectionGrid>
<ContentBlock
className="padding-right--xl"
title={<h1>Backstage Community</h1>}
>
Join the vibrant community around Backstage through social media
and different meetups. To ensure that you have a welcoming
environment, we follow the
<Link to="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
{' '}
CNCF Code of Conduct{' '}
</Link>
in everything we do.
</ContentBlock>
<ContentBlock
className={clsx(
'padding-left--xl',
communityStyles.listContainer,
)}
title="Get started in our community!"
>
<ul>
{communityListItems.map(
({ content: text, link, label }, index) => (
<li key={index}>
<p className="margin-bottom--none">
{text} <Link to={link}>{label}</Link>
</p>
</li>
),
)}
</ul>
</ContentBlock>
</BannerSectionGrid>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSectionGrid
header={
<>
<h2 className="text--primary">Offical Backstage initiatives</h2>
<h1>Stay tuned to the latest developments</h1>
</>
}
>
{officialInitiatives.map(
({ title, content, link, label }, index) => (
<ContentBlock
key={index}
title={title}
hasBulletLine
actionButtons={[
{
link,
label,
},
]}
>
{content}
</ContentBlock>
),
)}
</BannerSectionGrid>
</BannerSection>
<BannerSection greyBackground>
<BannerSectionGrid
header={<h2 className="text--primary">Community initiatives</h2>}
>
{communityInitiatives.map(
({ title, content, link, label }, index) => (
<ContentBlock
key={index}
title={title}
hasBulletLine
actionButtons={[
{
link,
label,
},
]}
>
<p>{content}</p>
</ContentBlock>
),
)}
</BannerSectionGrid>
</BannerSection>
<BannerSection>
<BannerSectionGrid
header={
<h2 className="text--primary">Trainings and Certifications</h2>
}
>
{trainingNCertifications.map(
({ title, content, link, label }, index) => (
<ContentBlock
key={index}
title={title}
hasBulletLine
actionButtons={[
{
link,
label,
},
]}
>
<p>{content}</p>
</ContentBlock>
),
)}
</BannerSectionGrid>
</BannerSection>
<BannerSection greyBackground>
<BannerSectionGrid
header={<h2 className="text--primary">Commercial Partners</h2>}
>
{partners.map(({ name, url, logo }, index) => (
<div key={index}>
<Link to={url}>
<img src={`${siteConfig.baseUrl}${logo}`} alt={name} />
</Link>
</div>
))}
</BannerSectionGrid>
</BannerSection>
</div>
</Layout>
);
};
export default Community;
@@ -0,0 +1,24 @@
.communityPage {
// --ifm-spacing-horizontal: 2rem;
font-size: 1.25rem;
h1 {
font-size: 54px;
line-height: 56px;
word-break: break-word;
}
}
.banner {
p {
flex: 1;
text-align: justify;
}
iframe {
width: 100%;
height: 100%;
min-height: 500px;
}
}
+206
View File
@@ -0,0 +1,206 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { BannerSection } from '@site/src/components/bannerSection/bannerSection';
import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSectionGrid';
import { ContentBlock } from '@site/src/components/contentBlock/contentBlock';
import Layout from '@theme/Layout';
import { clsx } from 'clsx';
import React from 'react';
import demosStyles from './demos.module.scss';
interface IDemoItem {
title: string;
content: React.ReactNode;
actionItemLink?: string;
media: {
type: 'image' | 'video';
link: string;
};
}
const Demos = () => {
const { siteConfig } = useDocusaurusContext();
//#region Collection Data
const demoItems: IDemoItem[] = [
{
title: 'See us in action',
content: (
<>
<p>
Watch the videos below to get an introduction to Backstage and to
see how we use different plugins to customize{' '}
<Link to="https://engineering.atspotify.com/2020/04/21/how-we-use-backstage-at-spotify/">
our internal version of Backstage at Spotify
</Link>
</p>
<p>
To see how other companies have already started using Backstage,
watch these presentations from{' '}
<Link to="https://youtu.be/rRphwXeq33Q?t=1508">Expedia</Link>,{' '}
<Link to="https://youtu.be/6sg5uMCLxTA?t=153">Zalando</Link>, and{' '}
<Link to="https://youtu.be/UZTVjv-AvZA?t=188">TELUS</Link>. For
more, join our{' '}
<Link to="https://github.com/backstage/community">
Community Sessions
</Link>
</p>
<p>
To explore the UI and basic features of Backstage firsthand, go to:{' '}
<Link to="https://demo.backstage.io">demo.backstage.io</Link>. (Tip:{' '}
click All to view all the example components in the software
catalog.)
</p>
</>
),
media: {
type: 'image',
link: `${siteConfig.baseUrl}img/demo-screen.png`,
},
},
{
title: 'Introduction to Backstage',
content:
'Backstage is an open source platform for building developer portals. Weve been using our homegrown version at Spotify for years — so its 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.',
actionItemLink: 'https://www.youtube.com/watch?v=1XtJ5FAOjPk',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/1XtJ5FAOjPk',
},
},
{
title: 'Control cloud costs',
content: (
<>
<p>
How do you control cloud costs while maintaining the speed and
independence of your development teams? With the{' '}
<Link to="https://backstage.io/plugins">Cost Insights plugin</Link>{' '}
for Backstage, managing cloud costs becomes just another part of an
engineers 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{' '}
<Link to="https://backstage.io/blog/2020/10/22/cost-insights-plugin">
Cost Insights plugin
</Link>
</p>
</>
),
actionItemLink: 'https://youtu.be/YLAd5hdXR_Q',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/YLAd5hdXR_Q',
},
},
{
title: 'Make documentation easy',
content: (
<>
<p>
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 Spotifys internal
version of TechDocs. Learn more about{' '}
<Link to="https://backstage.io/blog/2020/09/08/announcing-tech-docs">
TechDocs
</Link>
.
</p>
</>
),
actionItemLink: 'https://youtu.be/mOLCgdPw1iA',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/mOLCgdPw1iA',
},
},
{
title: 'Manage your tech health',
content:
'Instead of manually updating a spreadsheet, what if you had a beautiful dashboard that could give you an instant, interactive picture of your entire orgs tech stack? Thats 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.',
actionItemLink:
'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/K3xz6VAbgH8',
},
},
{
title: 'Create a microservice',
content:
'Youre 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 youll 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.',
actionItemLink: 'https://www.youtube.com/watch?v=U1iwe3L5pzc',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/U1iwe3L5pzc',
},
},
{
title: 'Search all your services',
content:
'All of Spotifys 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 theyre on a 12-day silent meditation retreat. At Spotify, anyone can always find anyone elses service, inspect its APIs, and contact its current owner — all with one search.',
actionItemLink: 'https://www.youtube.com/watch?v=vcDL9tOv7Eo',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/vcDL9tOv7Eo',
},
},
{
title: 'Manage data pipelines',
content:
'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.',
actionItemLink: 'https://www.youtube.com/watch?v=rH46MLNZIPM',
media: {
type: 'video',
link: 'https://www.youtube.com/embed/rH46MLNZIPM',
},
},
];
//#endregion
return (
<Layout>
<div className={clsx(demosStyles.communityPage)}>
{demoItems.map((demoItem, index) => (
<BannerSection
key={index}
greyBackground={index % 2 === 0}
className={demosStyles.banner}
>
<BannerSectionGrid>
<ContentBlock
title={<h1>{demoItem.title}</h1>}
actionButtons={[
{
link: demoItem.actionItemLink,
label: 'WATCH NOW',
},
]}
>
{demoItem.content}
</ContentBlock>
<div className={clsx()}>
{demoItem.media.type === 'image' ? (
<img src={demoItem.media.link} alt={demoItem.title} />
) : (
<iframe
src={demoItem.media.link}
title={demoItem.title}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
></iframe>
)}
</div>
</BannerSectionGrid>
</BannerSection>
))}
</div>
</Layout>
);
};
export default Demos;
+538
View File
@@ -0,0 +1,538 @@
import BrowserOnly from '@docusaurus/BrowserOnly';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { BannerSection } from '@site/src/components/bannerSection/bannerSection';
import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSectionGrid';
import { ContentBlock } from '@site/src/components/contentBlock/contentBlock';
import Layout from '@theme/Layout';
import { clsx } from 'clsx';
import React, { useState } from 'react';
import homeStyles from './home.module.scss';
import { HubSpotNewAdoptersForm } from './_hubSpotNewAdoptersForm';
const hiddenNewsletterBannerKey = 'hiddenNewsletterBanner';
const HomePage = () => {
const { siteConfig } = useDocusaurusContext();
const [hiddenNewsletterBanner, setHideNewsletterBanner] = useState(() => {
return JSON.parse(localStorage.getItem(hiddenNewsletterBannerKey)) || false;
});
const hideNewsletterBanner = (shouldHide: boolean) => {
localStorage.setItem(hiddenNewsletterBannerKey, JSON.stringify(shouldHide));
setHideNewsletterBanner(shouldHide);
};
return (
<Layout>
<div className={homeStyles.homePage}>
<BannerSection greyBackground>
<BannerSectionGrid
header={
!hiddenNewsletterBanner && (
<div
className={clsx(
'card',
'padding--md',
homeStyles.newsletterBanner,
)}
>
<div className="text--left bannerContent">
🗞 Want to stay up to date with Backstage? Sign up for our{' '}
<Link
to="https://info.backstage.spotify.com/newsletter_subscribe"
className="text--secondary"
>
Newsletter
</Link>
!
</div>
<div
className={clsx('button button--link', 'bannerCloseButton')}
onClick={() => hideNewsletterBanner(true)}
>
<svg
className="text--secondary"
width="24"
height="24"
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>
</div>
</div>
)
}
>
<ContentBlock
className={homeStyles.openPlatformBanner}
title={<h1> An open platform for building developer portals</h1>}
actionButtons={[
{
link: 'https://github.com/backstage/backstage#getting-started',
label: 'GITHUB',
},
{
link: 'https://info.backstage.spotify.com/office-hours',
label: 'OFFICE HOURS',
},
]}
>
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.
</ContentBlock>
<div className={homeStyles.svgContainer}>
<img
className="laptopSvg"
src={`${siteConfig.baseUrl}img/laptop.svg`}
/>
<img
className="laptopScreenGif"
src={`${siteConfig.baseUrl}animations/backstage-logos-hero-8.gif`}
/>
</div>
</BannerSectionGrid>
</BannerSection>
<BannerSection>
<BannerSectionGrid>
<ContentBlock
title="The Speed Paradox"
topImgSrc={`${siteConfig.baseUrl}animations/backstage-speed-paradox-7.gif`}
>
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.
</ContentBlock>
<ContentBlock
title="The Standards Paradox"
topImgSrc={`${siteConfig.baseUrl}animations/backstage-standards-paradox-4.gif`}
>
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.
</ContentBlock>
</BannerSectionGrid>
</BannerSection>
<BannerSection greenGradientBackground>
<div className={homeStyles.catalogContainer}>
<div className="catalogTitle">
<img
src={`${siteConfig.baseUrl}animations/backstage-software-catalog-icon-1.gif`}
alt="Software Catalog Planet GIF"
/>
<h2 className="text--primary">Backstage Software Catalog</h2>
<h1>Build an ecosystem, not a wilderness</h1>
</div>
<picture className="catalogImg">
<source
srcSet={`${siteConfig.baseUrl}img/components-with-filter.png`}
media="(min-width: 997px)"
/>
<img
src={`${siteConfig.baseUrl}img/components-with-filter-small.png`}
alt="Software Catalog Filter Sidebar"
/>
</picture>
<ContentBlock
title="Manage all your software, all in one place"
hasBulletLine
>
Backstage makes it easy for one team to manage 10 services — and
makes it possible for your company to manage thousands of them
</ContentBlock>
<ContentBlock title="A uniform overview" hasBulletLine>
Every team can see all the services they own and related resources
(deployments, data pipelines, pull request status, etc.)
</ContentBlock>
<ContentBlock title="Metadata on tap" hasBulletLine>
All that information can be shared with plugins inside Backstage
to enable other management features, like resource monitoring and
testing
</ContentBlock>
<ContentBlock title="Not just services" hasBulletLine>
Libraries, websites, ML models — you name it, Backstage knows all
about it, including who owns it, dependencies, and more
</ContentBlock>
<ContentBlock
title="Discoverability & accountability"
hasBulletLine
>
No more orphan software hiding in the dark corners of your tech
stack
</ContentBlock>
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about the software catalog</h1>
<Link
to="https://backstage.io/docs/features/software-catalog/software-catalog-overview"
className="button button--secondary"
>
READ
</Link>
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
src={`${siteConfig.baseUrl}animations/backstage-software-templates-icon-5.gif`}
alt="Software Templates Rocket GIF"
/>
<h2 className="text--primary">Backstage Software Templates</h2>
<h1>Standards can set you free</h1>
</div>
<picture className="softwareTemplatesImg">
<source
srcSet={`${siteConfig.baseUrl}img/cards.png`}
media="(min-width: 997px)"
/>
<img
src={`${siteConfig.baseUrl}img/service-cards.png`}
alt="Software Templates Cards"
/>
</picture>
<ContentBlock
title="Like automated getting started guides"
hasBulletLine
>
Using templates, engineers can spin up a new microservice with
your organization's best practices built-in, right from the start
</ContentBlock>
<ContentBlock title="Push-button deployment" hasBulletLine>
Click a button to create a Spring Boot project with your repo
automatically configured on GitHub and your CI already running the
first build
</ContentBlock>
<ContentBlock title="Built to your standards" hasBulletLine>
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
</ContentBlock>
<ContentBlock title="Golden Paths pave the way" hasBulletLine>
When the right way is also the easiest way, engineers get up and
running faster and more safely
</ContentBlock>
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Build your own software templates</h1>
<Link
to="https://backstage.io/docs/features/software-templates"
className="button button--secondary"
>
CONTRIBUTE
</Link>
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
src={`${siteConfig.baseUrl}animations/backstage-techdocs-icon-1.gif`}
alt="Backstage TechDocs File Copy GIF"
/>
<h2 className="text--primary">Backstage TechDocs</h2>
<h1>Docs like code</h1>
</div>
<picture className="softwareTemplatesImg">
<source
srcSet={`${siteConfig.baseUrl}img/techdocs2.gif`}
media="(min-width: 997px)"
/>
<img
src={`${siteConfig.baseUrl}img/techdocs-static-mobile.png`}
alt="Backstage TechDocs Markdown to HTML"
/>
</picture>
<ContentBlock title="Free documentation" hasBulletLine>
Whenever you use a Backstage Software Template, your project
automatically gets a TechDocs site, for free
</ContentBlock>
<ContentBlock title="Easy to write" hasBulletLine>
With our docs-like-code approach, engineers write their
documentation in Markdown files right alongside their code
</ContentBlock>
<ContentBlock title="Easy to maintain" hasBulletLine>
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
</ContentBlock>
<ContentBlock title="Easy to find and use" hasBulletLine>
Since all your documentation is in Backstage, finding any TechDoc
is just a search query away
</ContentBlock>
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about TechDocs</h1>
<Link
to="https://backstage.io/docs/features/techdocs/techdocs-overview"
className="button button--secondary"
>
DOCS
</Link>
</div>
</BannerSection>
<BannerSection greenGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
src={`${siteConfig.baseUrl}animations/backstage-search-platform-icon-1.gif`}
alt="Search Platform Telescope GIF"
/>
<h2 className="text--primary">Backstage Search Platform</h2>
<h1>A search platform made just for you</h1>
</div>
<picture className="softwareTemplatesImg">
<source
srcSet={`${siteConfig.baseUrl}img/search-platform-overview.png`}
media="(min-width: 997px)"
/>
<img
src={`${siteConfig.baseUrl}img/search-platform-overview-small.png`}
alt="Search Platform Search Bar"
/>
</picture>
<ContentBlock title="Way more than a text box" hasBulletLine>
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
</ContentBlock>
<ContentBlock title="Search the way you want" hasBulletLine>
Bring your own search engine, create a customized search page
experience, or edit the look and feel of each search result
</ContentBlock>
<ContentBlock title="Index everything, find anything" hasBulletLine>
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
</ContentBlock>
<ContentBlock title="Discoverability unlocked" hasBulletLine>
New hires and seasoned employees alike can easily search your
infrastructure instead of getting lost in it
</ContentBlock>
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about Backstage Search</h1>
<Link
to="https://backstage.io/docs/features/search/search-overview"
className="button button--secondary"
>
READ
</Link>
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSectionGrid
className={homeStyles.kubernetesSectionContainer}
header={
<>
<img
src={`${siteConfig.baseUrl}animations/backstage-kubernetes-icon-1.gif`}
alt="Backstage Kubernetes Flag GIF"
/>
<h2 className="text--primary">Backstage Kubernetes</h2>
<h1>Manage your services, not clusters</h1>
</>
}
>
<ContentBlock
title="Kubernetes made just for service owners"
hasBulletLine
>
Backstage features the first Kubernetes monitoring tool designed
around the needs of service owners, not cluster admins
</ContentBlock>
<ContentBlock title="Your service at a glance" hasBulletLine>
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
</ContentBlock>
<ContentBlock title="Pick a cloud, any cloud" hasBulletLine>
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
</ContentBlock>
<ContentBlock title="Any K8s, one UI" hasBulletLine>
Now you don't have to switch dashboards when you move from local
testing to production, or from one cloud provider to another
</ContentBlock>
</BannerSectionGrid>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about the K8s plugin</h1>
<Link
to="https://backstage.io/blog/2021/01/12/new-backstage-feature-kubernetes-for-service-owners"
className="button button--secondary"
>
READ
</Link>
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
src={`${siteConfig.baseUrl}animations/backstage-plugin-icon-2.gif`}
alt="Plugins Building Blocks GIF"
/>
<h2 className="text--primary">
Customize Backstage with plugins
</h2>
<h1>An app store for your infrastructure</h1>
</div>
<picture className="softwareTemplatesImg">
<source
srcSet={`${siteConfig.baseUrl}img/cards-plugins.png`}
media="(min-width: 997px)"
/>
<img
src={`${siteConfig.baseUrl}img/plugins.png`}
alt="Plugins Cards"
/>
</picture>
<ContentBlock title="Add functionality" hasBulletLine>
Want scalable website testing? Add the{' '}
<Link to="https://backstage.io/blog/2020/04/06/lighthouse-plugin">
Lighthouse{' '}
</Link>
plugin. Wondering about recommended frameworks? Add the{' '}
<Link to="https://backstage.io/blog/2020/05/14/tech-radar-plugin">
Tech Radar{' '}
</Link>
plugin.
</ContentBlock>
<ContentBlock title="BYO Plugins" hasBulletLine>
If you don't see the plugin you need, it's simple to build your
own
</ContentBlock>
<ContentBlock
title="Integrate your own custom tooling"
hasBulletLine
>
Building internal plugins lets you tailor your version of
Backstage to be a perfect fit for your infrastructure
</ContentBlock>
<ContentBlock title="Share with the community" hasBulletLine>
Building <Link to="/plugins">open source plugins</Link>{' '}
contributes to the entire Backstage ecosystem, which benefits
everyone
</ContentBlock>
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Build a plugin</h1>
<Link
to="/docs/plugins/create-a-plugin"
className="button button--secondary"
>
CONTRIBUTE
</Link>
</div>
</BannerSection>
<BannerSection>
<div className="padding--lg text--center">
<h2>
Backstage is a{' '}
<Link to="https://www.cncf.io">
Cloud Native Computing Foundation
</Link>{' '}
incubation project
</h2>
<img
src={`${siteConfig.baseUrl}img/cncf-white.svg`}
alt="CNCF Logo"
height="100px"
/>
</div>
</BannerSection>
<HubSpotNewAdoptersForm />
</div>
</Layout>
);
};
export const Home = () => {
return <BrowserOnly>{() => <HomePage />}</BrowserOnly>;
};
@@ -0,0 +1,52 @@
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import hubSpotStyles from './hubSpotNewAdoptersForm.module.scss';
export const HubSpotNewAdoptersForm = () => {
const [isClosed, setClosed] = useState(true);
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://js.hsforms.net/forms/v2.js';
document.body.appendChild(script);
script.addEventListener('load', () => {
// @ts-ignore
if (window.hbspt) {
// @ts-ignore
window.hbspt.forms.create({
portalId: '21894833',
formId: '9a5aa2af-87f3-4a44-819f-88ee243bb61e',
target: `.${hubSpotStyles.hubSpotNewAdopterFormContent}`,
pageId: '79735607665',
});
}
});
}, []);
return (
<div
className={clsx(
hubSpotStyles.hubSpotNewAdopterFormContainer,
isClosed && 'adoptersFormHidden',
)}
>
<button
className="button button--primary"
onClick={() => {
setClosed(!isClosed);
}}
>
New Adopters
</button>
<div
className={clsx(
'padding-left--lg padding-vert--lg thin-scrollbar',
hubSpotStyles.hubSpotNewAdopterFormContent,
)}
></div>
</div>
);
};
@@ -0,0 +1,109 @@
$desktopUpBreakpoint: 997px;
.homePage {
font-size: 1.25rem;
h1 {
font-size: 54px;
line-height: 56px;
word-break: break-word;
}
:global(.buttonsContainer) {
gap: 1rem;
display: grid;
grid-template-columns: repeat(2, auto);
}
}
.newsletterBanner {
--ifm-link-hover-color: var(--ifm-color-info);
flex-direction: row;
color: var(--ifm-button-color);
background-color: var(--ifm-color-primary);
:global(.bannerContent) {
flex: 1;
}
:global(.bannerCloseButton) {
color: var(--ifm-color-secondary);
}
}
.svgContainer {
position: relative;
:global(img.laptopSvg) {
width: 100%;
}
:global(img.laptopScreenGif) {
position: absolute;
top: 3%;
left: 17%;
width: 70%;
}
}
// Shared container styles
.catalogContainer,
.softwareTemplatesContainer {
gap: 2rem;
display: grid;
align-items: center;
picture {
display: block;
text-align: center;
}
:global([class*='Title']),
:global([class*='title']),
:global([class*='gridHeader']) {
img {
max-width: 190px;
max-height: 190px;
}
}
}
.catalogContainer {
@media (min-width: $desktopUpBreakpoint) {
grid-template-columns: repeat(4, 1fr);
picture {
grid-row: span 2;
grid-column: span 2;
}
:global(.catalogTitle) {
grid-column: span 2;
}
}
}
.softwareTemplatesContainer {
@media (min-width: $desktopUpBreakpoint) {
grid: repeat(2, auto) / repeat(4, 1fr);
picture {
grid-row-start: 3;
grid-column: span 4;
}
:global(.softwareTemplatesTitle) {
grid-column: span 4;
}
}
}
.kubernetesSectionContainer {
:global([class*='gridHeader']) {
img {
max-width: 190px;
max-height: 190px;
}
}
}
@@ -0,0 +1,38 @@
.hubSpotNewAdopterFormContainer {
top: 50%;
right: 0;
display: flex;
position: fixed;
transform: translateY(-50%);
transition: all 250ms ease-in-out;
&:global(.adoptersFormHidden) {
transform: translate(500px, -50%);
}
> button {
top: 50%;
left: -2rem;
position: fixed;
transform: rotate(-90deg) translateX(-50%);
transform-origin: top left;
}
}
.hubSpotNewAdopterFormContent {
height: 600px;
max-width: 500px;
overflow-y: hidden;
border-radius: 8px 0 0 8px;
background-color: var(--ifm-color-white);
form {
width: 100%;
height: 100%;
overflow-y: auto;
padding-right: 2rem;
}
}
+2 -10
View File
@@ -1,11 +1,3 @@
import Layout from '@theme/Layout';
import React from 'react';
import { Home } from './home/_home';
function Index() {
return (
<Layout>
<h1>HELLO</h1>
</Layout>
);
}
export default Index;
export default Home;
@@ -0,0 +1,54 @@
import Link from '@docusaurus/Link';
import React from 'react';
export interface IPluginData {
author: string;
authorUrl: string;
category: string;
description: string;
documentation: string;
iconUrl: string;
title: string;
order?: number;
}
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
export const PluginCard = ({
author,
authorUrl,
category,
description,
documentation,
iconUrl,
title,
}: IPluginData) => (
<div className="card">
<div className="card__header">
<img src={iconUrl || defaultIconUrl} alt={title} />
<h3>{title}</h3>
<p className="PluginCardAuthor">
by <a href={authorUrl}>{author}</a>
</p>
<span className="button button--sm button--outline button--primary">
{category}
</span>
</div>
<div className="card__body">
<p>{description}</p>
</div>
<div className="card__footer">
<Link
to={documentation}
className="button button--outline button--primary button--block"
>
Explore
</Link>
</div>
</div>
);
@@ -0,0 +1,87 @@
import Link from '@docusaurus/Link';
import Layout from '@theme/Layout';
import clsx from 'clsx';
import React from 'react';
import { IPluginData, PluginCard } from './_pluginCard';
import pluginsStyles from './plugins.module.scss';
//#region Plugin data import
const maxDescLength = 160;
const truncatePluginDescription = (pluginData: IPluginData) =>
pluginData.description.length > maxDescLength
? {
...pluginData,
description: pluginData.description.slice(0, maxDescLength) + '...',
}
: pluginData;
const pluginsContext = require.context(
'../../../../microsite/data/plugins',
false,
/\.ya?ml/,
);
const plugins = pluginsContext.keys().reduce(
(acum, id) => {
const pluginData: IPluginData = pluginsContext(id).default;
acum[
pluginData.category === 'Core Feature' ? 'corePlugins' : 'otherPlugins'
].push(truncatePluginDescription(pluginData));
return acum;
},
{ corePlugins: [] as IPluginData[], otherPlugins: [] as IPluginData[] },
);
plugins.corePlugins.sort((a, b) => a.order - b.order);
plugins.otherPlugins.sort((a, b) => a.order - b.order);
//#endregion
const Plugins = () => (
<Layout>
<div
className={clsx('container', 'padding--lg', pluginsStyles.pluginsPage)}
>
<div className="marketplaceBanner">
<div className="marketplaceContent">
<h2>Plugin Marketplace</h2>
<p>
Open source plugins that you can add to your Backstage deployment.
Learn how to build a <Link to="/docs/plugins">plugin</Link>.
</p>
</div>
<Link
to="/docs/plugins/add-to-marketplace"
className="button button--outline button--primary"
>
Add to Marketplace
</Link>
</div>
<div className="bulletLine margin-bottom--lg"></div>
<h2>Core Features</h2>
<div className="pluginsContainer margin-bottom--lg">
{plugins.corePlugins.map(pluginData => (
<PluginCard key={pluginData.title} {...pluginData}></PluginCard>
))}
</div>
<h2>All Plugins</h2>
<div className="pluginsContainer margin-bottom--lg">
{plugins.otherPlugins.map(pluginData => (
<PluginCard key={pluginData.title} {...pluginData}></PluginCard>
))}
</div>
</div>
</Layout>
);
export default Plugins;
@@ -0,0 +1,33 @@
.pluginsPage {
:global(.marketplaceBanner) {
display: flex;
align-items: center;
}
:global(.marketplaceContent) {
flex: 1;
}
:global(.card .card__header) {
display: grid;
row-gap: 0.25rem;
column-gap: 1rem;
align-items: center;
grid-template-columns: auto 1fr;
> * {
margin: 0;
}
:global(img) {
width: 80px;
grid-row: 1/4;
}
}
:global(.pluginsContainer) {
gap: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
+12
View File
@@ -0,0 +1,12 @@
{
"extends": "@tsconfig/docusaurus/tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"types": [
"node",
"@docusaurus/module-type-aliases",
"@docusaurus/theme-classic",
"@types/webpack-env"
]
}
}
+1
View File
@@ -0,0 +1 @@
declare module '*.scss';
+325 -175
View File
@@ -1660,9 +1660,9 @@ __metadata:
languageName: node
linkType: hard
"@docusaurus/core@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/core@npm:2.2.0"
"@docusaurus/core@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/core@npm:2.3.0"
dependencies:
"@babel/core": ^7.18.6
"@babel/generator": ^7.18.7
@@ -1674,13 +1674,13 @@ __metadata:
"@babel/runtime": ^7.18.6
"@babel/runtime-corejs3": ^7.18.6
"@babel/traverse": ^7.18.8
"@docusaurus/cssnano-preset": 2.2.0
"@docusaurus/logger": 2.2.0
"@docusaurus/mdx-loader": 2.2.0
"@docusaurus/cssnano-preset": 2.3.0
"@docusaurus/logger": 2.3.0
"@docusaurus/mdx-loader": 2.3.0
"@docusaurus/react-loadable": 5.5.2
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-common": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-common": 2.3.0
"@docusaurus/utils-validation": 2.3.0
"@slorber/static-site-generator-webpack-plugin": ^4.0.7
"@svgr/webpack": ^6.2.1
autoprefixer: ^10.4.7
@@ -1740,40 +1740,40 @@ __metadata:
react-dom: ^16.8.4 || ^17.0.0
bin:
docusaurus: bin/docusaurus.mjs
checksum: ff47e6cf85b0f7dc0a9e5b9b0d26e33a6f7385f067566ff4f9b026d044839e4dfb4c3bc9476cfab7a7e95a0065478a534cda403dac3bb7bac9987406f1978a11
checksum: 59954cd761e1cf55c951014a5bb960498b619a6a65fa82c853cc55317e8d27385f0be410b76381221dca136ab0d0030dcbaedca173f38f8495fefbac3e5235d4
languageName: node
linkType: hard
"@docusaurus/cssnano-preset@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/cssnano-preset@npm:2.2.0"
"@docusaurus/cssnano-preset@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/cssnano-preset@npm:2.3.0"
dependencies:
cssnano-preset-advanced: ^5.3.8
postcss: ^8.4.14
postcss-sort-media-queries: ^4.2.1
tslib: ^2.4.0
checksum: eff9707414867bf844ef5d84bde1c843593b9b7f542dd1a0a7acc88798b0c5ddb721124229912c234bd88b93cb18d8d69c6115cbf706c2a790497f7d9dd23757
checksum: ec51299236c1fdad1ce7f761eb85076ebddefbbc21bba9596a226a6e830060e0905fcc072a5dad4e1f668956329b7296e3b1b4468956d29cd607190d7dd5531b
languageName: node
linkType: hard
"@docusaurus/logger@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/logger@npm:2.2.0"
"@docusaurus/logger@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/logger@npm:2.3.0"
dependencies:
chalk: ^4.1.2
tslib: ^2.4.0
checksum: b3ce6e18721a34793a892221485c941d5f7112ae96d569f7918d12c1f50bde9c99bc4195f4d225e874b2bd5800a35413bfeaf78b63c6fbae5f3015d44d118eee
checksum: bf668d380e35ab795c0c28c4891794519093d13ae00221fe43981be1863fdada1f2de1c46095a9c949c15c545d1ad007d1714ee8a3862042c8f75785fded6e1a
languageName: node
linkType: hard
"@docusaurus/mdx-loader@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/mdx-loader@npm:2.2.0"
"@docusaurus/mdx-loader@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/mdx-loader@npm:2.3.0"
dependencies:
"@babel/parser": ^7.18.8
"@babel/traverse": ^7.18.8
"@docusaurus/logger": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/logger": 2.3.0
"@docusaurus/utils": 2.3.0
"@mdx-js/mdx": ^1.6.22
escape-html: ^1.0.3
file-loader: ^6.2.0
@@ -1790,16 +1790,16 @@ __metadata:
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: fee586498f43c46581062e681424c4637e75d505d813d8bf25f5315c912560f6600cd925bc5b07a93d5d5966741439578e7e72f30030b4c58a5cfdf72e0d8928
checksum: e07be7155941ca9e3e07f996a0364e12bd5b9793b804bf87121341a491420047e88f7c010bde5ee71e65bed47b4febda242b601773f74bcafc116dd09ec8f5b5
languageName: node
linkType: hard
"@docusaurus/module-type-aliases@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/module-type-aliases@npm:2.2.0"
"@docusaurus/module-type-aliases@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/module-type-aliases@npm:2.3.0"
dependencies:
"@docusaurus/react-loadable": 5.5.2
"@docusaurus/types": 2.2.0
"@docusaurus/types": 2.3.0
"@types/history": ^4.7.11
"@types/react": "*"
"@types/react-router-config": "*"
@@ -1809,21 +1809,21 @@ __metadata:
peerDependencies:
react: "*"
react-dom: "*"
checksum: ebcb9dff2f88b5962cd34aaa78b1a48531da4776229ef507665e3f053cccb185aadcc16c3703f21031e14ccb6c8312662a6eec1a2a06bc0a423221ad200e1e9e
checksum: 96d9dc39d90bbec155a55403272a9c3be2603fd556c1e4da6db161e3841de671e9e219b1de153f072ab09a440f523a628c4e382ff527acd527780e7843aebe0d
languageName: node
linkType: hard
"@docusaurus/plugin-content-blog@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-content-blog@npm:2.2.0"
"@docusaurus/plugin-content-blog@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-content-blog@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/logger": 2.2.0
"@docusaurus/mdx-loader": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-common": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/logger": 2.3.0
"@docusaurus/mdx-loader": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-common": 2.3.0
"@docusaurus/utils-validation": 2.3.0
cheerio: ^1.0.0-rc.12
feed: ^4.2.2
fs-extra: ^10.1.0
@@ -1836,21 +1836,21 @@ __metadata:
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 6d51e3b17b6fdeb4e04ddebe4d4ba8c7cc830bdc066c2b7898e4dee185e408f0d28ea873d18b5ee4406a568a9b05f70d17c986a9ed16b16b1450d34ca190fd06
checksum: e5b89196ddec47f7c282b9f5fba1d1caada0c6d44776e2f55ee5b13b440661f586bef18553d49e3b44a417982e4c799d3e18e10f60d60e90a0b8c90b8b30232a
languageName: node
linkType: hard
"@docusaurus/plugin-content-docs@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-content-docs@npm:2.2.0"
"@docusaurus/plugin-content-docs@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-content-docs@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/logger": 2.2.0
"@docusaurus/mdx-loader": 2.2.0
"@docusaurus/module-type-aliases": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/logger": 2.3.0
"@docusaurus/mdx-loader": 2.3.0
"@docusaurus/module-type-aliases": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-validation": 2.3.0
"@types/react-router-config": ^5.0.6
combine-promises: ^1.1.0
fs-extra: ^10.1.0
@@ -1863,116 +1863,132 @@ __metadata:
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 3a262b49dd6f9d59f4e10dd25185bb4280dbf77b62e28a1dd658d5db0861ae8c82dd025f24212f0d8fec0a46a37f6ef0f2cde25ac736d445247e8727177da660
checksum: a18bd0c7e089239819938675fd3c3f5a7447cfeae6f27dac165a34558d4b39cad8a4934736228ecf4d7dde6f28fe4e1c5ed97ba9f5cba3251f5eb4781517f413
languageName: node
linkType: hard
"@docusaurus/plugin-content-pages@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-content-pages@npm:2.2.0"
"@docusaurus/plugin-content-pages@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-content-pages@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/mdx-loader": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/mdx-loader": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-validation": 2.3.0
fs-extra: ^10.1.0
tslib: ^2.4.0
webpack: ^5.73.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 1e22fb8deb9b8f612ebe1ea6f8b1ce76acfc6eb8cbc0d5fc9b99b99d64e2f356d0fb136247e9f72cd84b2788eaf953a640d23ff7e2a5d650de6ec06468181a94
checksum: 3ff7090045929a64b87da4e5e5a57cf725e552b03569d2a0086cf79849316393948e239d58f4bea758d131224b165ceb96ab1e908e357e6e256b5e499f0d4ad6
languageName: node
linkType: hard
"@docusaurus/plugin-debug@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-debug@npm:2.2.0"
"@docusaurus/plugin-debug@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-debug@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils": 2.3.0
fs-extra: ^10.1.0
react-json-view: ^1.21.3
tslib: ^2.4.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: edf2a416b790591c66ffa8ca1fd4ed15ab2d2dc15cd67c5253714502a6828739a7a47996c3664731c6b24da1da5862ddfef60defb84bd3b8273313267db0cb54
checksum: 770cd5749730ebb3f8633f7c07b0e5248ee24c175dcb6bfc99717253fc6e16ac75d720e373a4d98ade51ca47ec69543cd7159f215961f64d41f95120efe06c76
languageName: node
linkType: hard
"@docusaurus/plugin-google-analytics@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-google-analytics@npm:2.2.0"
"@docusaurus/plugin-google-analytics@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-google-analytics@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils-validation": 2.3.0
tslib: ^2.4.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 44ad3a6c1b661516cb87553103565af64a6f145d823b16882d5c7d23b99e091b7c4ba8323c5f6fe756e70fbb0f9f31d56c74512dc17da6d3c16dfabd17d719ac
checksum: 2de84efb8998c36315d856ec1c7fe40af9265d078642f2984d280d9e698af45922dcc205039fbaeb30f45802d788e230fe34cd4d292d57d95f99c006b92f2e25
languageName: node
linkType: hard
"@docusaurus/plugin-google-gtag@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-google-gtag@npm:2.2.0"
"@docusaurus/plugin-google-gtag@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-google-gtag@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils-validation": 2.3.0
tslib: ^2.4.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 4e7d6fcc3f30f1d54933fdeb59d3065989596e91940304965635867808d89c7b864a394f5fab2bcde98037539bf6840efc692e856fb7a4ae32ce8b5f8a4e191a
checksum: 8d1c192163ed902498ed8ff5fef668a8ebd8fd63b3da691295a875ef96eb98e2e9b0967986dff2ea454f2094479fec2e4876d2f66c643a174df26204e4aab2a2
languageName: node
linkType: hard
"@docusaurus/plugin-sitemap@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/plugin-sitemap@npm:2.2.0"
"@docusaurus/plugin-google-tag-manager@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-google-tag-manager@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/logger": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-common": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils-validation": 2.3.0
tslib: ^2.4.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: dd9830fd4f3ee5f4ab1a8a26a055b7551084e49dd33046eb62950fa74a30d1c6371cacb10f42753ba0b32b025bdcb34abf6877dd7b7fe42e9ab86f3539634483
languageName: node
linkType: hard
"@docusaurus/plugin-sitemap@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/plugin-sitemap@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.3.0
"@docusaurus/logger": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-common": 2.3.0
"@docusaurus/utils-validation": 2.3.0
fs-extra: ^10.1.0
sitemap: ^7.1.1
tslib: ^2.4.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 8ae78093d17a96fc2c6f3829d425731dae3af19b0eec29c61a6465342462a8c24da4c5a10f1a1b1813630d2408f2e11fa17af652b74b4e8fda975d4a00bf1389
checksum: f2ace8f5a121aa616d411dbe0211ecba5ca57ad1fceb4529f8418c4c5259cfe62a5a511332289502242e6ff04116d27ddf5a8826d16324cc1ccaacfca29b49b1
languageName: node
linkType: hard
"@docusaurus/preset-classic@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/preset-classic@npm:2.2.0"
"@docusaurus/preset-classic@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/preset-classic@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/plugin-content-blog": 2.2.0
"@docusaurus/plugin-content-docs": 2.2.0
"@docusaurus/plugin-content-pages": 2.2.0
"@docusaurus/plugin-debug": 2.2.0
"@docusaurus/plugin-google-analytics": 2.2.0
"@docusaurus/plugin-google-gtag": 2.2.0
"@docusaurus/plugin-sitemap": 2.2.0
"@docusaurus/theme-classic": 2.2.0
"@docusaurus/theme-common": 2.2.0
"@docusaurus/theme-search-algolia": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/plugin-content-blog": 2.3.0
"@docusaurus/plugin-content-docs": 2.3.0
"@docusaurus/plugin-content-pages": 2.3.0
"@docusaurus/plugin-debug": 2.3.0
"@docusaurus/plugin-google-analytics": 2.3.0
"@docusaurus/plugin-google-gtag": 2.3.0
"@docusaurus/plugin-google-tag-manager": 2.3.0
"@docusaurus/plugin-sitemap": 2.3.0
"@docusaurus/theme-classic": 2.3.0
"@docusaurus/theme-common": 2.3.0
"@docusaurus/theme-search-algolia": 2.3.0
"@docusaurus/types": 2.3.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 70214f17766097a2e9c4b21a343bf323f7ed3d2e23c6169577cd14333a074fa15aabff6532c1774ec17c54f50c1616dbd8625c41a115d2fe799b2b7fa830c2c9
checksum: 0806924793094a4446b20d63fdc910c5ae82b2353905502f886c2a02981a4e42378b0251e38a60caf496e6e6034014096829eb51401685f747934eb83f15dcbb
languageName: node
linkType: hard
@@ -1988,22 +2004,22 @@ __metadata:
languageName: node
linkType: hard
"@docusaurus/theme-classic@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/theme-classic@npm:2.2.0"
"@docusaurus/theme-classic@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/theme-classic@npm:2.3.0"
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/mdx-loader": 2.2.0
"@docusaurus/module-type-aliases": 2.2.0
"@docusaurus/plugin-content-blog": 2.2.0
"@docusaurus/plugin-content-docs": 2.2.0
"@docusaurus/plugin-content-pages": 2.2.0
"@docusaurus/theme-common": 2.2.0
"@docusaurus/theme-translations": 2.2.0
"@docusaurus/types": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-common": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/mdx-loader": 2.3.0
"@docusaurus/module-type-aliases": 2.3.0
"@docusaurus/plugin-content-blog": 2.3.0
"@docusaurus/plugin-content-docs": 2.3.0
"@docusaurus/plugin-content-pages": 2.3.0
"@docusaurus/theme-common": 2.3.0
"@docusaurus/theme-translations": 2.3.0
"@docusaurus/types": 2.3.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-common": 2.3.0
"@docusaurus/utils-validation": 2.3.0
"@mdx-js/react": ^1.6.22
clsx: ^1.2.1
copy-text-to-clipboard: ^3.0.1
@@ -2020,20 +2036,20 @@ __metadata:
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: ccfb0bef12178d0fbe3329a3238cd6bf7223ee03d890594676c06490eabfd59908bb1872c1a007f605db4edf402bc49cdf14aa7116550e95844d5135a92c2969
checksum: a6206f34161aa388e36dde2f8eb9291cec34dba890a40cd7226040efd303aa322110237464016ce407a65b8a2bff755470ff6c5250b20e3a27645d8860246a65
languageName: node
linkType: hard
"@docusaurus/theme-common@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/theme-common@npm:2.2.0"
"@docusaurus/theme-common@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/theme-common@npm:2.3.0"
dependencies:
"@docusaurus/mdx-loader": 2.2.0
"@docusaurus/module-type-aliases": 2.2.0
"@docusaurus/plugin-content-blog": 2.2.0
"@docusaurus/plugin-content-docs": 2.2.0
"@docusaurus/plugin-content-pages": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/mdx-loader": 2.3.0
"@docusaurus/module-type-aliases": 2.3.0
"@docusaurus/plugin-content-blog": 2.3.0
"@docusaurus/plugin-content-docs": 2.3.0
"@docusaurus/plugin-content-pages": 2.3.0
"@docusaurus/utils": 2.3.0
"@types/history": ^4.7.11
"@types/react": "*"
"@types/react-router-config": "*"
@@ -2041,26 +2057,27 @@ __metadata:
parse-numeric-range: ^1.3.0
prism-react-renderer: ^1.3.5
tslib: ^2.4.0
use-sync-external-store: ^1.2.0
utility-types: ^3.10.0
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 23cbba8e7e24494c6d106ce3d0b90ef461580bfacef9f27dfbc4f0b33fcb349394faf2bedf0a44db8c455535e50e828e82270c8f159c3d8d60f0e0980170be4e
checksum: e38683aa8fd74599b9ccb6032af7a0ccb76144f5b3ccc4b93d423be263ca5ffb1ace42c22ce789c11ab45ae076fdf95bd36287b551edbf51d55c2e848e8a6189
languageName: node
linkType: hard
"@docusaurus/theme-search-algolia@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/theme-search-algolia@npm:2.2.0"
"@docusaurus/theme-search-algolia@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/theme-search-algolia@npm:2.3.0"
dependencies:
"@docsearch/react": ^3.1.1
"@docusaurus/core": 2.2.0
"@docusaurus/logger": 2.2.0
"@docusaurus/plugin-content-docs": 2.2.0
"@docusaurus/theme-common": 2.2.0
"@docusaurus/theme-translations": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/utils-validation": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/logger": 2.3.0
"@docusaurus/plugin-content-docs": 2.3.0
"@docusaurus/theme-common": 2.3.0
"@docusaurus/theme-translations": 2.3.0
"@docusaurus/utils": 2.3.0
"@docusaurus/utils-validation": 2.3.0
algoliasearch: ^4.13.1
algoliasearch-helper: ^3.10.0
clsx: ^1.2.1
@@ -2072,23 +2089,23 @@ __metadata:
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 42b6cb0322d6c772b7796ea6e9693d596554ebd087792ad71238cebedf3b632bfa8005138d521bce1ff118f49aea7d72e5dc97a03f236b4728a2dc7576870071
checksum: 97d7314ae6c612eda1b8aa24b6d812c66a8da1030f7eea8d04c9ab8caba62bb66ec95dfcbb613f0f522fa6130e51cd41fcc7eca1c0fe50e533ccbf5aa9e2047d
languageName: node
linkType: hard
"@docusaurus/theme-translations@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/theme-translations@npm:2.2.0"
"@docusaurus/theme-translations@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/theme-translations@npm:2.3.0"
dependencies:
fs-extra: ^10.1.0
tslib: ^2.4.0
checksum: 7fe7d104fd094f2af2321986a86edef1eb8ab25415ea94ab1b242d08aec7627b3d5790001631621cd80c57c710714308aad5adfbf570cb74e0f01fda93b610be
checksum: df11b8a0b569a5adaec505d52cccffef1d903404232c776354035a387b56fcc7aa7d742aa0df622ccc052b61443ba134b6dcc6d3a4076aced4cd253d6cf957f6
languageName: node
linkType: hard
"@docusaurus/types@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/types@npm:2.2.0"
"@docusaurus/types@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/types@npm:2.3.0"
dependencies:
"@types/history": ^4.7.11
"@types/react": "*"
@@ -2101,13 +2118,13 @@ __metadata:
peerDependencies:
react: ^16.8.4 || ^17.0.0
react-dom: ^16.8.4 || ^17.0.0
checksum: 5166ca49bb9333e4d733e4bf8d49d65e11ea6b39e4d8eecc24e1de24d61d2459c52dd8bd27362b66b03e41df96acf1a449145211b3bf0c5a59a987c77102e8f1
checksum: 563749b9473e35848c3e462c7e401d292dbf3f36e3ab72b5a03aebe204f1147b666953fc8e176c2024ea9c2b3a8aa7fd33f500df576afff456dea003b742c52b
languageName: node
linkType: hard
"@docusaurus/utils-common@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/utils-common@npm:2.2.0"
"@docusaurus/utils-common@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/utils-common@npm:2.3.0"
dependencies:
tslib: ^2.4.0
peerDependencies:
@@ -2115,29 +2132,30 @@ __metadata:
peerDependenciesMeta:
"@docusaurus/types":
optional: true
checksum: 05d23a2f82a1bc119e3ad6b37481c9bc984f62efd3a79046567216784b78fb20fe7452252d610bb4c063e4ded8a7ab7efa1dc9f9f228357c20b9f4729c7a0576
checksum: 67711f2a53cd9e91768645015ab17e9c3b46d850958a4dcab6e0fb939b4d90bb3bb0323f8c70446246af6aacad98c1044d33f5f74dcc8e8bc9871ae62ea33a7b
languageName: node
linkType: hard
"@docusaurus/utils-validation@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/utils-validation@npm:2.2.0"
"@docusaurus/utils-validation@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/utils-validation@npm:2.3.0"
dependencies:
"@docusaurus/logger": 2.2.0
"@docusaurus/utils": 2.2.0
"@docusaurus/logger": 2.3.0
"@docusaurus/utils": 2.3.0
joi: ^17.6.0
js-yaml: ^4.1.0
tslib: ^2.4.0
checksum: a30e47cf84628950176cc02a121f31b200b46cdccf02e80d76f24b51b9d33fccee35c43047f507b8fb48deb38f863580ecbcdc1393718c6f3a14fcd40d5d1ab6
checksum: 0275530f4c49a1d0269422dfbe8f7abcda94c83fb3c20d1be36f9259b16c2170f8090f30077091b02e1059b2c683726d40b19235f07250f245719159d3ecd98c
languageName: node
linkType: hard
"@docusaurus/utils@npm:2.2.0":
version: 2.2.0
resolution: "@docusaurus/utils@npm:2.2.0"
"@docusaurus/utils@npm:2.3.0":
version: 2.3.0
resolution: "@docusaurus/utils@npm:2.3.0"
dependencies:
"@docusaurus/logger": 2.2.0
"@docusaurus/logger": 2.3.0
"@svgr/webpack": ^6.2.1
escape-string-regexp: ^4.0.0
file-loader: ^6.2.0
fs-extra: ^10.1.0
github-slugger: ^1.4.0
@@ -2156,7 +2174,7 @@ __metadata:
peerDependenciesMeta:
"@docusaurus/types":
optional: true
checksum: d027a6d2417e043ac463402aadca22f1101f942daaf02330d9bb4743dcbe3bd2fd46d27dedf316fcf2b6698713fede974ba59eb5d4bc92c8959e23bc25e7a03a
checksum: 6874bd327af99bc97bdea3fca6ce71f917b6a89fa18bbd81a2d955a33ccf1746f70960f27fc7fca557bc9e1a671a6f369e7aade28f7908727dc58e84f9ac5851
languageName: node
linkType: hard
@@ -2608,6 +2626,13 @@ __metadata:
languageName: node
linkType: hard
"@tsconfig/docusaurus@npm:^1.0.6":
version: 1.0.6
resolution: "@tsconfig/docusaurus@npm:1.0.6"
checksum: fb0d7965c01fe64fc6369a72695b903d654bd5fb145f373d707c2bae3c2d828703517d812cef1c041ae44b108f44e52778b9d9837a54fdf782e68e6619a90a4d
languageName: node
linkType: hard
"@types/body-parser@npm:*":
version: 1.19.2
resolution: "@types/body-parser@npm:1.19.2"
@@ -2951,6 +2976,13 @@ __metadata:
languageName: node
linkType: hard
"@types/webpack-env@npm:^1.18.0":
version: 1.18.0
resolution: "@types/webpack-env@npm:1.18.0"
checksum: ecf4daa31cb37d474ac0ce058d83a3cadeb9881ca8107ae93c2299eaa9954943aae09b43e143c62ccbe4288a14db00c918c9debd707afe17c3998f873eaabc59
languageName: node
linkType: hard
"@types/ws@npm:^8.5.1":
version: 8.5.3
resolution: "@types/ws@npm:8.5.3"
@@ -3565,15 +3597,22 @@ __metadata:
version: 0.0.0-use.local
resolution: "backstage-microsite@workspace:."
dependencies:
"@docusaurus/core": 2.2.0
"@docusaurus/preset-classic": 2.2.0
"@docusaurus/core": 2.3.0
"@docusaurus/module-type-aliases": 2.3.0
"@docusaurus/preset-classic": 2.3.0
"@spotify/prettier-config": ^14.0.0
"@tsconfig/docusaurus": ^1.0.6
"@types/webpack-env": ^1.18.0
clsx: ^1.1.1
docusaurus-plugin-sass: ^0.2.3
js-yaml: ^4.1.0
prettier: ^2.6.2
react: ^17.0.2
react-dom: ^17.0.2
replace: ^1.2.2
sass: ^1.57.1
typescript: ^4.9.4
yaml-loader: ^0.8.0
languageName: unknown
linkType: soft
@@ -3939,7 +3978,7 @@ __metadata:
languageName: node
linkType: hard
"chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
version: 3.5.3
resolution: "chokidar@npm:3.5.3"
dependencies:
@@ -4790,6 +4829,18 @@ __metadata:
languageName: node
linkType: hard
"docusaurus-plugin-sass@npm:^0.2.3":
version: 0.2.3
resolution: "docusaurus-plugin-sass@npm:0.2.3"
dependencies:
sass-loader: ^10.1.1
peerDependencies:
"@docusaurus/core": ^2.0.0-beta
sass: ^1.30.0
checksum: 928b02fd7c63835d54cdcce2eeda01cb6124707c6d43ef8e77db06474d3e3b4b7282cc0d88fed378cf1f3db2fc93ba8c11366965bb9b668eae19ca805e578acb
languageName: node
linkType: hard
"dom-converter@npm:^0.2.0":
version: 0.2.0
resolution: "dom-converter@npm:0.2.0"
@@ -6214,6 +6265,13 @@ __metadata:
languageName: node
linkType: hard
"immutable@npm:^4.0.0":
version: 4.2.2
resolution: "immutable@npm:4.2.2"
checksum: 4d6437ea9388fe8ceca7eed5c768cf438cda7fa14d2831b87b90aa00cc60d536964d107c255b8a2e5dbf4f44a0e1295afbb9d1f0a65fb4f57b936e71df601862
languageName: node
linkType: hard
"import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
version: 3.3.0
resolution: "import-fresh@npm:3.3.0"
@@ -6622,6 +6680,13 @@ __metadata:
languageName: node
linkType: hard
"javascript-stringify@npm:^2.0.1":
version: 2.1.0
resolution: "javascript-stringify@npm:2.1.0"
checksum: 009981ec84299da88795fc764221ed213e3d52251cc93a396430a7a02ae09f1163a9be36a36808689681a8e6113cf00fe97ec2eea2552df48111f79be59e9358
languageName: node
linkType: hard
"jest-util@npm:^29.3.1":
version: 29.3.1
resolution: "jest-util@npm:29.3.1"
@@ -6793,10 +6858,10 @@ __metadata:
languageName: node
linkType: hard
"klona@npm:^2.0.5":
version: 2.0.5
resolution: "klona@npm:2.0.5"
checksum: 8c976126ea252b766e648a4866e1bccff9d3b08432474ad80c559f6c7265cf7caede2498d463754d8c88c4759895edd8210c85c0d3155e6aae4968362889466f
"klona@npm:^2.0.4, klona@npm:^2.0.5":
version: 2.0.6
resolution: "klona@npm:2.0.6"
checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7
languageName: node
linkType: hard
@@ -9214,6 +9279,44 @@ __metadata:
languageName: node
linkType: hard
"sass-loader@npm:^10.1.1":
version: 10.4.1
resolution: "sass-loader@npm:10.4.1"
dependencies:
klona: ^2.0.4
loader-utils: ^2.0.0
neo-async: ^2.6.2
schema-utils: ^3.0.0
semver: ^7.3.2
peerDependencies:
fibers: ">= 3.1.0"
node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
sass: ^1.3.0
webpack: ^4.36.0 || ^5.0.0
peerDependenciesMeta:
fibers:
optional: true
node-sass:
optional: true
sass:
optional: true
checksum: df9a65a62247e95305299ccbdf212cffdcdb69490928aecdf4f3dcf539b5302ed7cbffa663f83c5fc3ce0864decf84257a9ce484f6df4cb4426feeb88445dcd0
languageName: node
linkType: hard
"sass@npm:^1.57.1":
version: 1.57.1
resolution: "sass@npm:1.57.1"
dependencies:
chokidar: ">=3.0.0 <4.0.0"
immutable: ^4.0.0
source-map-js: ">=0.6.2 <2.0.0"
bin:
sass: sass.js
checksum: 734a08781bcbe0e8defb2d54864e7012014ed3e68ba5fcb766189b002929019fc37b2f83a18d4be0b5f69ad77317c92396ce6112447ab47a194ed600ae1afb27
languageName: node
linkType: hard
"sax@npm:^1.2.4":
version: 1.2.4
resolution: "sax@npm:1.2.4"
@@ -9603,7 +9706,7 @@ __metadata:
languageName: node
linkType: hard
"source-map-js@npm:^1.0.2":
"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
version: 1.0.2
resolution: "source-map-js@npm:1.0.2"
checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c
@@ -10092,6 +10195,26 @@ __metadata:
languageName: node
linkType: hard
"typescript@npm:^4.9.4":
version: 4.9.4
resolution: "typescript@npm:4.9.4"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: e782fb9e0031cb258a80000f6c13530288c6d63f1177ed43f770533fdc15740d271554cdae86701c1dd2c83b082cea808b07e97fd68b38a172a83dbf9e0d0ef9
languageName: node
linkType: hard
"typescript@patch:typescript@^4.9.4#~builtin<compat/typescript>":
version: 4.9.4
resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=a1c5e5"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 37f6e2c3c5e2aa5934b85b0fddbf32eeac8b1bacf3a5b51d01946936d03f5377fe86255d4e5a4ae628fd0cd553386355ad362c57f13b4635064400f3e8e05b9d
languageName: node
linkType: hard
"ua-parser-js@npm:^0.7.30":
version: 0.7.33
resolution: "ua-parser-js@npm:0.7.33"
@@ -10391,6 +10514,15 @@ __metadata:
languageName: node
linkType: hard
"use-sync-external-store@npm:^1.2.0":
version: 1.2.0
resolution: "use-sync-external-store@npm:1.2.0"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
languageName: node
linkType: hard
"util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
version: 1.0.2
resolution: "util-deprecate@npm:1.0.2"
@@ -10877,6 +11009,17 @@ __metadata:
languageName: node
linkType: hard
"yaml-loader@npm:^0.8.0":
version: 0.8.0
resolution: "yaml-loader@npm:0.8.0"
dependencies:
javascript-stringify: ^2.0.1
loader-utils: ^2.0.0
yaml: ^2.0.0
checksum: d12dd264666b80baec23cea9f81cb677a9102d6f34ab45d8b6c085ace4d05b7285db9ce317db57264c3317af01128ce6e5b754e6866d15ccd75e8141902fb529
languageName: node
linkType: hard
"yaml@npm:^1.10.0, yaml@npm:^1.10.2, yaml@npm:^1.7.2":
version: 1.10.2
resolution: "yaml@npm:1.10.2"
@@ -10884,6 +11027,13 @@ __metadata:
languageName: node
linkType: hard
"yaml@npm:^2.0.0":
version: 2.2.1
resolution: "yaml@npm:2.2.1"
checksum: 84f68cbe462d5da4e7ded4a8bded949ffa912bc264472e5a684c3d45b22d8f73a3019963a32164023bdf3d83cfb6f5b58ff7b2b10ef5b717c630f40bd6369a23
languageName: node
linkType: hard
"yargs-parser@npm:^18.1.2":
version: 18.1.3
resolution: "yargs-parser@npm:18.1.3"