Merge branch 'master' of github.com:spotify/backstage into shmidt-i/app-catalog-tabs-routes-everything-is-connected
This commit is contained in:
Ivan Shmidt
@@ -13,7 +13,7 @@ Two days ago, we released the open source version of [Backstage](https://backsta
|
||||
|
||||
## What’s the big infrastructure problem?
|
||||
|
||||
As companies grow, their infrastructure systems get messier. Consider a team that wants to deploy something to the cloud. While Spotify has many awesome engineers, not every engineer is well-versed in our chosen cloud-provider tooling. Yet everyone is required to know and understand Terraform, GCP/AWS/Azure CLIs, Gitlab CI, Prometheus, Kubernetes, Docker, various monitoring and alerting tools, and much, much more. Once other resources come into play (databases, queueing, etc.), each engineer requires even more tools and domain-specific knowledge (or “disciplines”), from backend to machine learning, to mobile and data.
|
||||
As companies grow, their infrastructure systems get messier. Consider a team that wants to deploy something to the cloud. While Spotify has many awesome engineers, not every engineer is well-versed in our chosen cloud-provider tooling. Yet everyone is required to know and understand Terraform, GCP/AWS/Azure CLIs, GitLab CI, Prometheus, Kubernetes, Docker, various monitoring and alerting tools, and much, much more. Once other resources come into play (databases, queueing, etc.), each engineer requires even more tools and domain-specific knowledge (or “disciplines”), from backend to machine learning, to mobile and data.
|
||||
|
||||
## What’s the fix?
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: CircleCI
|
||||
author: Spotify
|
||||
authorUrl: https://www.spotify.com/
|
||||
category: CI
|
||||
description: Automate your development process with CI hosted in the cloud or on a private server.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/circleci
|
||||
iconUrl: https://d3r49iyjzglexf.cloudfront.net/logo-wordmark-26f8eaea9b0f6e13b90d3f4a8fd8fda31490f5af41daab98bbede45037682576.svg
|
||||
npmPackageName: '@backstage/plugin-circleci'
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: GitOps Clusters
|
||||
author: Weaveworks
|
||||
authorUrl: https://www.weave.works/
|
||||
category: Kubernetes
|
||||
description: Create GitOps-managed Kubernetes clusters. Currently, it supports provisioning EKS clusters on GitHub via GitHub Actions.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/gitops-profiles
|
||||
iconUrl: https://res-5.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1462316670/i9d3delzvx1erzjhmcws.png
|
||||
npmPackageName: '@backstage/plugin-gitops-profiles'
|
||||
tags:
|
||||
- kubernetes
|
||||
- gitops
|
||||
- github
|
||||
- eks
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: GraphiQL
|
||||
author: Spotify
|
||||
authorUrl: https://www.spotify.com/
|
||||
category: Debugging
|
||||
description: Integrates GraphiQL as a tool to browse GraphiQL endpoints inside Backstage.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/lighthouse
|
||||
iconUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/GraphQL_Logo.svg/1024px-GraphQL_Logo.svg.png
|
||||
npmPackageName: '@backstage/plugin-graphiql'
|
||||
tags:
|
||||
- graphql
|
||||
- github
|
||||
- gitlab
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Lighthouse
|
||||
author: Spotify
|
||||
authorUrl: https://www.spotify.com/
|
||||
category: Accessibility
|
||||
description: Google's Lighthouse tool is a great resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your website.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/lighthouse
|
||||
iconUrl: https://seeklogo.com/images/G/google-lighthouse-logo-1C7FA08580-seeklogo.com.png
|
||||
npmPackageName: '@backstage/plugin-lighthouse'
|
||||
tags:
|
||||
- web
|
||||
- seo
|
||||
- accessibility
|
||||
- performance
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: New Relic
|
||||
author: '@timwheelercom'
|
||||
authorUrl: https://github.com/timwheelercom
|
||||
category: Monitoring
|
||||
description: Observability platform built to help engineers create and monitor their software.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/newrelic
|
||||
iconUrl: https://www.mulesoft.com/sites/default/files/2018-10/New_relic.png
|
||||
npmPackageName: '@backstage/plugin-newrelic'
|
||||
tags:
|
||||
- performance
|
||||
- monitoring
|
||||
- errors
|
||||
- alerting
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Rollbar
|
||||
author: '@andrewthauer'
|
||||
authorUrl: https://github.com/andrewthauer
|
||||
category: Monitoring
|
||||
description: View Rollbar errors for your services in Backstage.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/rollbar
|
||||
iconUrl: https://rollbar.com/assets/media/rollbar-mark-color.png
|
||||
npmPackageName: '@backstage/plugin-rollbar'
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Sentry
|
||||
author: Spotify
|
||||
authorUrl: https://www.spotify.com/
|
||||
category: Monitoring
|
||||
description: View Sentry issues in Backstage.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/sentry
|
||||
iconUrl: https://sentry-brand.storage.googleapis.com/sentry-glyph-white.png
|
||||
npmPackageName: '@backstage/plugin-sentry'
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Tech Radar
|
||||
author: Spotify
|
||||
authorUrl: https://www.spotify.com/
|
||||
category: Discovery
|
||||
description: Visualize the your company's official guidelines of different areas of software development.
|
||||
documentation: https://github.com/spotify/backstage/tree/master/plugins/tech-radar
|
||||
iconUrl: https://github.com/spotify/backstage/raw/master/plugins/tech-radar/docs/screenshot.png
|
||||
npmPackageName: '@backstage/plugin-tech-radar'
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Travis CI
|
||||
author: roadie.io
|
||||
authorUrl: https://roadie.io/
|
||||
category: CI
|
||||
description: View Travis CI builds for your service in Backstage.
|
||||
documentation: https://roadie.io/backstage/plugins/travis-ci
|
||||
iconUrl: https://roadie.io/static/af2941eaf0af675facb281d566f42e14/45f2b/travis-ci-mascot-200x200.png
|
||||
npmPackageName: '@roadiehq/backstage-plugin-travis-ci'
|
||||
|
||||
+16
-9
@@ -51,7 +51,7 @@
|
||||
"title": "Adding authentication providers"
|
||||
},
|
||||
"auth/auth-backend-classes": {
|
||||
"title": "auth/auth-backend-classes"
|
||||
"title": "Auth backend classes"
|
||||
},
|
||||
"auth/auth-backend": {
|
||||
"title": "Auth backend"
|
||||
@@ -103,7 +103,8 @@
|
||||
"title": "External integrations"
|
||||
},
|
||||
"features/software-catalog/software-catalog-overview": {
|
||||
"title": "Backstage Service Catalog (alpha)"
|
||||
"title": "Backstage Service Catalog (alpha)",
|
||||
"sidebar_label": "Backstage Service Catalog"
|
||||
},
|
||||
"features/software-catalog/installation": {
|
||||
"title": "features/software-catalog/installation"
|
||||
@@ -174,8 +175,8 @@
|
||||
"getting-started/installation": {
|
||||
"title": "Installation"
|
||||
},
|
||||
"journey": {
|
||||
"title": "journey"
|
||||
"overview/adopting": {
|
||||
"title": "Strategies for adopting"
|
||||
},
|
||||
"overview/architecture-overview": {
|
||||
"title": "Architecture overview"
|
||||
@@ -183,6 +184,9 @@
|
||||
"overview/architecture-terminology": {
|
||||
"title": "Architecture terminology"
|
||||
},
|
||||
"overview/background": {
|
||||
"title": "The Spotify Story"
|
||||
},
|
||||
"overview/roadmap": {
|
||||
"title": "Project roadmap"
|
||||
},
|
||||
@@ -195,6 +199,9 @@
|
||||
"overview/what-is-backstage": {
|
||||
"title": "What is Backstage?"
|
||||
},
|
||||
"plugins/add-to-marketplace": {
|
||||
"title": "Add to Marketplace"
|
||||
},
|
||||
"plugins/backend-plugin": {
|
||||
"title": "Backend plugin"
|
||||
},
|
||||
@@ -208,13 +215,13 @@
|
||||
"title": "Existing plugins"
|
||||
},
|
||||
"plugins/index": {
|
||||
"title": "Intro"
|
||||
"title": "Intro to plugins"
|
||||
},
|
||||
"plugins/integrating-plugin-into-service-catalog": {
|
||||
"title": "Integrate into the catalog service"
|
||||
},
|
||||
"plugins/plugin-development": {
|
||||
"title": "Plugin Development in Backstage"
|
||||
"title": "Plugin Development"
|
||||
},
|
||||
"plugins/proxying": {
|
||||
"title": "Proxying"
|
||||
@@ -285,16 +292,16 @@
|
||||
"reference/utility-apis/StorageApi": {
|
||||
"title": "reference/utility-apis/StorageApi"
|
||||
},
|
||||
"tutorials/index": {
|
||||
"title": "Overview"
|
||||
"tutorials/journey": {
|
||||
"title": "Future developer journey"
|
||||
}
|
||||
},
|
||||
"links": {
|
||||
"GitHub": "GitHub",
|
||||
"Docs": "Docs",
|
||||
"Plugins": "Plugins",
|
||||
"Blog": "Blog",
|
||||
"Demos": "Demos",
|
||||
"The Spotify story": "The Spotify story",
|
||||
"Newsletter": "Newsletter"
|
||||
},
|
||||
"categories": {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.1.1-alpha.19",
|
||||
"version": "0.1.1-alpha.20",
|
||||
"name": "backstage-microsite",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
@@ -13,6 +13,7 @@
|
||||
"rename-version": "docusaurus-rename-version"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docusaurus": "^2.0.0-alpha.61"
|
||||
"docusaurus": "^2.0.0-alpha.61",
|
||||
"js-yaml": "^3.14.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,122 +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 Breakpoint = Components.Breakpoint;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<div className="mainWrapper">
|
||||
<Block>
|
||||
<Block.Container column>
|
||||
<Block.TitleBox story>The Spotify Story</Block.TitleBox>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
Backstage was born out of necessity at Spotify. We found that as
|
||||
we grew, our infrastructure was becoming more fragmented, our
|
||||
engineers less productive.{' '}
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
Instead of building and testing code, teams were spending more
|
||||
time looking for the right information just to get started.
|
||||
“Where’s the API for that service we’re all supposed to be using?”
|
||||
“What version of that framework is everyone on?” “This service
|
||||
isn’t responding, who owns it?” “I can’t find documentation for
|
||||
anything!”{' '}
|
||||
</Block.Paragraph>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block small>
|
||||
<Block.QuoteContainer>
|
||||
<Block.Divider quote />
|
||||
|
||||
<Block.Quote>
|
||||
One place for everything. Accessible to everyone.
|
||||
</Block.Quote>
|
||||
</Block.QuoteContainer>
|
||||
</Block>
|
||||
}
|
||||
></Breakpoint>
|
||||
<Block.Paragraph>
|
||||
Context switching and cognitive overload were dragging engineers
|
||||
down, day by day. We needed to make it easier for our engineers to
|
||||
do their work without having to become an expert in every aspect
|
||||
of infrastructure tooling.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
Our idea was to centralize and simplify end-to-end software
|
||||
development with an abstraction layer that sits on top of all of
|
||||
our infrastructure and developer tooling. That’s Backstage.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
It’s a developer portal powered by a centralized service catalog —
|
||||
with a plugin architecture that makes it endlessly extensible and
|
||||
customizable.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
Manage all your services, software, tooling, and testing in
|
||||
Backstage. Start building a new microservice using an automated
|
||||
template in Backstage. Create, maintain, and find the
|
||||
documentation for all that software in Backstage.{' '}
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
One place for everything. Accessible to everyone.
|
||||
</Block.Paragraph>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block small>
|
||||
<Block.LinkButton stretch href={'https://backstage.io/'}>
|
||||
Explore Features
|
||||
</Block.LinkButton>
|
||||
</Block>
|
||||
}
|
||||
></Breakpoint>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<Block small>
|
||||
<Block.QuoteContainer>
|
||||
<Block.Divider quote />
|
||||
|
||||
<Block.Quote>
|
||||
One place for everything. Accessible to everyone.
|
||||
</Block.Quote>
|
||||
<Block.LinkButton stretch href={'https://backstage.io/'}>
|
||||
Explore Features
|
||||
</Block.LinkButton>
|
||||
</Block.QuoteContainer>
|
||||
</Block>
|
||||
}
|
||||
></Breakpoint>
|
||||
|
||||
<div
|
||||
style={{
|
||||
zIndex: -1,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundImage: `linear-gradient( to bottom, rgb(18, 18, 18), rgba(0, 0, 0, 0) ), url(../img/dot.svg)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -0,0 +1,12 @@
|
||||
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;
|
||||
@@ -353,10 +353,20 @@ class Index extends React.Component {
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<img
|
||||
style={{ margin: 'auto' }}
|
||||
src={`${baseUrl}img/techdocs-web.png`}
|
||||
/>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const yaml = require('js-yaml');
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const {
|
||||
Block: { Container },
|
||||
BulletLine,
|
||||
} = Components;
|
||||
|
||||
const pluginsDirectory = require('path').join(process.cwd(), 'data/plugins');
|
||||
const pluginMetadata = fs
|
||||
.readdirSync(pluginsDirectory)
|
||||
.map(file =>
|
||||
yaml.safeLoad(fs.readFileSync(`./data/plugins/${file}`, 'utf8')),
|
||||
);
|
||||
const truncate = text =>
|
||||
text.length > 170 ? text.substr(0, 170) + '...' : text;
|
||||
|
||||
const addPluginDocsLink = '/docs/plugins/add-to-marketplace';
|
||||
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
|
||||
|
||||
const Plugins = () => (
|
||||
<main className="MainContent">
|
||||
<div className="PluginPageLayout">
|
||||
<div className="PluginPageHeader">
|
||||
<h2>Plugins</h2>
|
||||
<span>
|
||||
<a
|
||||
className="PluginAddNewButton ButtonFilled"
|
||||
href={addPluginDocsLink}
|
||||
>
|
||||
<b>Add Plugin</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<BulletLine style={{ width: '100% ' }} />
|
||||
<Container wrapped className="grid">
|
||||
{pluginMetadata.map(
|
||||
({
|
||||
iconUrl,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
authorUrl,
|
||||
documentation,
|
||||
category,
|
||||
}) => (
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<img src={iconUrl || defaultIconUrl} alt={title} />
|
||||
<h2 className="PluginCardTitle">{title}</h2>
|
||||
<p className="Author">
|
||||
by <a href={authorUrl}>{author}</a>
|
||||
</p>
|
||||
<span className="ChipOutlined">{category}</span>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<Container className="PluginCardFooter">
|
||||
<span>
|
||||
<a
|
||||
className="PluginCardLink ButtonFilled"
|
||||
href={documentation}
|
||||
>
|
||||
docs
|
||||
</a>
|
||||
</span>
|
||||
</Container>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</Container>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
module.exports = Plugins;
|
||||
@@ -5,7 +5,9 @@
|
||||
"overview/architecture-overview",
|
||||
"overview/architecture-terminology",
|
||||
"overview/roadmap",
|
||||
"overview/vision"
|
||||
"overview/vision",
|
||||
"overview/background",
|
||||
"overview/adopting"
|
||||
],
|
||||
"Getting Started": [
|
||||
"getting-started/index",
|
||||
@@ -37,7 +39,6 @@
|
||||
"features/software-catalog/software-catalog-overview",
|
||||
"features/software-catalog/system-model",
|
||||
"features/software-catalog/descriptor-format",
|
||||
"features/software-catalog/populating-catalog",
|
||||
"features/software-catalog/extending-the-model",
|
||||
"features/software-catalog/external-integrations",
|
||||
"features/software-catalog/software-catalog-api"
|
||||
@@ -91,7 +92,7 @@
|
||||
{
|
||||
"type": "subcategory",
|
||||
"label": "Publishing",
|
||||
"ids": ["plugins/publishing", "plugins/publish-private"]
|
||||
"ids": ["plugins/publishing", "plugins/publish-private", "plugins/add-to-marketplace"]
|
||||
}
|
||||
],
|
||||
"Configuration": [
|
||||
@@ -132,7 +133,7 @@
|
||||
"ids": ["api/backend"]
|
||||
}
|
||||
],
|
||||
"Tutorials": ["tutorials/index"],
|
||||
"Tutorials": ["tutorials/journey"],
|
||||
"Architecture Decision Records (ADRs)": [
|
||||
"architecture-decisions/adrs-overview",
|
||||
"architecture-decisions/adrs-adr001",
|
||||
|
||||
+13
-11
@@ -17,17 +17,12 @@ const siteConfig = {
|
||||
url: 'https://backstage.io', // Your website URL
|
||||
cname: 'backstage.io',
|
||||
baseUrl: '/', // Base URL for your project */
|
||||
// For github.io type URLs, you would set the url and baseUrl like:
|
||||
// url: 'https://facebook.github.io',
|
||||
// baseUrl: '/test-site/',
|
||||
editUrl: 'https://github.com/spotify/backstage/edit/master/docs/',
|
||||
|
||||
// Used for publishing and more
|
||||
projectName: 'backstage',
|
||||
organizationName: 'Spotify',
|
||||
fossWebsite: 'https://spotify.github.io/',
|
||||
// For top-level user or org sites, the organization is still the same.
|
||||
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
|
||||
// organizationName: 'JoelMarcey'
|
||||
|
||||
// Google Analytics
|
||||
gaTrackingId: 'UA-48912878-10',
|
||||
@@ -35,13 +30,18 @@ const siteConfig = {
|
||||
// For no header links in the top nav bar -> headerLinks: [],
|
||||
headerLinks: [
|
||||
{
|
||||
href: 'https://github.com/spotify/backstage#backstage',
|
||||
href: 'https://github.com/spotify/backstage',
|
||||
label: 'GitHub',
|
||||
},
|
||||
{
|
||||
doc: 'overview/what-is-backstage',
|
||||
href: '/docs',
|
||||
label: 'Docs',
|
||||
},
|
||||
{
|
||||
page: 'plugins',
|
||||
label: 'Plugins',
|
||||
},
|
||||
{
|
||||
page: 'blog',
|
||||
blog: true,
|
||||
@@ -51,10 +51,6 @@ const siteConfig = {
|
||||
page: 'demos',
|
||||
label: 'Demos',
|
||||
},
|
||||
{
|
||||
page: 'background',
|
||||
label: 'The Spotify story',
|
||||
},
|
||||
{
|
||||
href: 'https://mailchi.mp/spotify/backstage-community',
|
||||
label: 'Newsletter',
|
||||
@@ -118,6 +114,12 @@ const siteConfig = {
|
||||
stylesheets: [
|
||||
'https://fonts.googleapis.com/css?family=IBM+Plex+Mono:500,700&display=swap',
|
||||
],
|
||||
|
||||
algolia: {
|
||||
apiKey: '8d115c9875ba0f4feaee95bab55a1645',
|
||||
indexName: 'backstage',
|
||||
searchParameters: {}, // Optional (if provided by Algolia)
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = siteConfig;
|
||||
|
||||
@@ -58,7 +58,7 @@ ol,
|
||||
li,
|
||||
td {
|
||||
font-family: Helvetica Neue, sans-serif;
|
||||
color: $textColor;
|
||||
color: #e4e4e4;
|
||||
}
|
||||
|
||||
.mainWrapper {
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
.PluginCard {
|
||||
background-color: #272822;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 815px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.PluginCard img {
|
||||
float: left;
|
||||
margin: 0px 16px 8px 0px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.PluginCardHeader {
|
||||
max-height: fit-content;
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
.PluginCardTitle {
|
||||
color: white;
|
||||
vertical-align: top;
|
||||
margin: 8px 0px 0px 16px;
|
||||
}
|
||||
|
||||
.PluginAddNewButton {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.ButtonFilled {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #36BAA2;
|
||||
color: white;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.ButtonFilled:hover {
|
||||
border: 1px solid #36BAA2;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ChipOutlined {
|
||||
font-size: small;
|
||||
border-radius: 16px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid #36BAA2;
|
||||
color: #36BAA2;
|
||||
}
|
||||
|
||||
.PluginCardLink {
|
||||
padding: 2px 8px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.PluginPageLayout {
|
||||
margin: auto;
|
||||
max-width: 1430px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.PluginPageHeader {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.PluginPageHeader h2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.PluginCardBody {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.PluginCardFooter {
|
||||
position: relative;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.Author, .Author a {
|
||||
margin-bottom: 0.25em;
|
||||
color: rgba(255,255,255, 0.6);
|
||||
}
|
||||
|
||||
.Author a:hover {
|
||||
color: white;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Reference in New Issue
Block a user