Added core features to microsite
Signed-off-by: Shashank Bairy R <shashank.bairy04@gmail.com>
This commit is contained in:
Shashank Bairy R
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Backstage Kubernetes
|
||||
author: Spotify
|
||||
authorUrl: https://github.com/spotify
|
||||
category: Core Feature
|
||||
description: Monitor all your service's deployments at a glance, even across clusters.
|
||||
documentation: https://backstage.io/docs/features/kubernetes/overview
|
||||
iconUrl: img/backstage-k8s.svg
|
||||
npmPackageName: '@backstage/plugin-kubernetes'
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Backstage Service Catalog
|
||||
author: Spotify
|
||||
authorUrl: https://github.com/spotify
|
||||
category: Core Feature
|
||||
description: Manage all your services and software components, all in one place.
|
||||
documentation: https://backstage.io/docs/features/software-catalog/software-catalog-overview
|
||||
iconUrl: img/backstage-service-catalog.svg
|
||||
npmPackageName: '@backstage/plugin-catalog'
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Backstage Software Templates
|
||||
author: Spotify
|
||||
authorUrl: https://github.com/spotify
|
||||
category: Core Feature
|
||||
description: Create new software components in just a few steps, with your standards built-in (Scaffolder).
|
||||
documentation: https://backstage.io/docs/features/software-templates/software-templates-index
|
||||
iconUrl: img/backstage-software-templates.svg
|
||||
npmPackageName: '@backstage/plugin-scaffolder'
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Backstage TechDocs
|
||||
author: Spotify
|
||||
authorUrl: https://github.com/spotify
|
||||
category: Core Feature
|
||||
description: A docs-like-code solution to technical documentation. Write your docs right alongside your code.
|
||||
documentation: https://backstage.io/docs/features/techdocs/techdocs-overview
|
||||
iconUrl: img/backstage-techdocs.svg
|
||||
npmPackageName: '@backstage/plugin-techdocs'
|
||||
+140
-33
@@ -21,9 +21,17 @@ const pluginMetadata = fs
|
||||
const truncate = text =>
|
||||
text.length > 170 ? text.substr(0, 170) + '...' : text;
|
||||
|
||||
const coreFeaturesMetadata = pluginMetadata
|
||||
.filter(plugin => plugin.category === 'Core Feature')
|
||||
.reduce((acc, plugin) => {
|
||||
acc[plugin.title] = plugin;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const addPluginDocsLink = '/docs/plugins/add-to-marketplace';
|
||||
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
|
||||
|
||||
|
||||
const Plugins = () => (
|
||||
<main className="MainContent">
|
||||
<div className="PluginPageLayout">
|
||||
@@ -43,41 +51,140 @@ const Plugins = () => (
|
||||
</span>
|
||||
</div>
|
||||
<BulletLine style={{ width: '100% ' }} />
|
||||
<div className="PluginPageHeader">
|
||||
<h2>Core Features</h2>
|
||||
</div>
|
||||
<Container wrapped className="PluginGrid">
|
||||
{pluginMetadata.map(
|
||||
({
|
||||
iconUrl,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
authorUrl,
|
||||
documentation,
|
||||
category,
|
||||
}) => (
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={iconUrl || defaultIconUrl} alt={title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={authorUrl}>{author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={coreFeaturesMetadata['Backstage Service Catalog'].iconUrl || defaultIconUrl} alt={coreFeaturesMetadata['Backstage Service Catalog'].title} />
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{coreFeaturesMetadata['Backstage Service Catalog'].title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={coreFeaturesMetadata['Backstage Service Catalog'].authorUrl}>{coreFeaturesMetadata['Backstage Service Catalog'].author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{coreFeaturesMetadata['Backstage Service Catalog'].category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(coreFeaturesMetadata['Backstage Service Catalog'].description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={coreFeaturesMetadata['Backstage Service Catalog'].documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={coreFeaturesMetadata['Backstage Software Templates'].iconUrl || defaultIconUrl} alt={coreFeaturesMetadata['Backstage Software Templates'].title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{coreFeaturesMetadata['Backstage Software Templates'].title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={coreFeaturesMetadata['Backstage Software Templates'].authorUrl}>{coreFeaturesMetadata['Backstage Software Templates'].author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{coreFeaturesMetadata['Backstage Software Templates'].category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(coreFeaturesMetadata['Backstage Software Templates'].description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={coreFeaturesMetadata['Backstage Software Templates'].documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={coreFeaturesMetadata['Backstage TechDocs'].iconUrl || defaultIconUrl} alt={coreFeaturesMetadata['Backstage TechDocs'].title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{coreFeaturesMetadata['Backstage TechDocs'].title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={coreFeaturesMetadata['Backstage TechDocs'].authorUrl}>{coreFeaturesMetadata['Backstage TechDocs'].author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{coreFeaturesMetadata['Backstage TechDocs'].category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(coreFeaturesMetadata['Backstage TechDocs'].description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={coreFeaturesMetadata['Backstage TechDocs'].documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={coreFeaturesMetadata['Backstage Kubernetes'].iconUrl || defaultIconUrl} alt={coreFeaturesMetadata['Backstage Kubernetes'].title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{coreFeaturesMetadata['Backstage Kubernetes'].title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={coreFeaturesMetadata['Backstage Kubernetes'].authorUrl}>{coreFeaturesMetadata['Backstage Kubernetes'].author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{coreFeaturesMetadata['Backstage Kubernetes'].category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(coreFeaturesMetadata['Backstage Kubernetes'].description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={coreFeaturesMetadata['Backstage Kubernetes'].documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
<div className="PluginPageHeader">
|
||||
<h2>All Plugins</h2>
|
||||
</div>
|
||||
<Container wrapped className="PluginGrid">
|
||||
{pluginMetadata
|
||||
.filter(plugin => plugin.category !== 'Core Feature')
|
||||
.map(
|
||||
({
|
||||
iconUrl,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
authorUrl,
|
||||
documentation,
|
||||
category,
|
||||
}) => (
|
||||
<div className="PluginCard">
|
||||
<div className="PluginCardHeader">
|
||||
<div className="PluginCardImage">
|
||||
<img src={iconUrl || defaultIconUrl} alt={title} />
|
||||
</div>
|
||||
<div className="PluginCardInfo">
|
||||
<h3 className="PluginCardTitle">{title}</h3>
|
||||
<p className="PluginCardAuthor">
|
||||
by <a href={authorUrl}>{author}</a>
|
||||
</p>
|
||||
<span className="PluginCardChipOutlined">{category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="PluginCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="PluginCardFooter">
|
||||
<a className="ButtonFilled" href={documentation}>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)
|
||||
}
|
||||
<div className="PluginCard" id="add-plugin-card">
|
||||
<div className="PluginCardBody">
|
||||
<p>
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1{fill:none;stroke:#7df3e1;stroke-linejoin:round;stroke-width:1.25px;}</style></defs><polyline class="cls-1" points="79.08 24.38 79.08 218.83 79.08 245.06"/><polyline class="cls-1" points="63.67 235.75 63.67 209.52 63.67 24.38"/><path class="cls-1" d="M189.83,220h0l0,0Z"/><path class="cls-1" d="M145.5,88.07c-16.61-12.31-5.42-21.25-22-33.56s-27.8-3.37-44.4-15.68v116.3c16.6,12.31,27.79,3.37,44.4,15.68s5.41,21.25,22,33.56,27.76,3.38,44.33,15.63l0-116.27C173.28,91.43,162.09,100.37,145.5,88.07Zm-7.78,66.36v0a23.17,23.17,0,0,1-16.43-6.81l-7,7,7-7a23.16,23.16,0,0,1-6.8-16.43h0a23.18,23.18,0,0,1,6.8-16.43l-7-7,7,7a23.2,23.2,0,0,1,16.43-6.8v0a23.16,23.16,0,0,1,16.43,6.8l7-7-7,7A23.15,23.15,0,0,1,161,131.19h0a23.13,23.13,0,0,1-6.81,16.43l7,7-7-7A23.13,23.13,0,0,1,137.72,154.43Z"/><path class="cls-1" d="M137.72,124.67V108a23.2,23.2,0,0,0-16.43,6.8l11.82,11.82A6.5,6.5,0,0,1,137.72,124.67Z"/><path class="cls-1" d="M144.24,131.19H161a23.15,23.15,0,0,0-6.81-16.43l-11.82,11.82A6.5,6.5,0,0,1,144.24,131.19Z"/><path class="cls-1" d="M133.11,126.58l-11.82-11.82a23.18,23.18,0,0,0-6.8,16.43H131.2A6.5,6.5,0,0,1,133.11,126.58Z"/><path class="cls-1" d="M142.33,126.58l11.82-11.82a23.16,23.16,0,0,0-16.43-6.8v16.71A6.5,6.5,0,0,1,142.33,126.58Z"/><path class="cls-1" d="M131.2,131.19H114.49a23.16,23.16,0,0,0,6.8,16.43l11.82-11.82A6.5,6.5,0,0,1,131.2,131.19Z"/><path class="cls-1" d="M137.72,137.71v16.72a23.13,23.13,0,0,0,16.43-6.81L142.33,135.8A6.5,6.5,0,0,1,137.72,137.71Z"/><path class="cls-1" d="M161,131.19H144.24a6.5,6.5,0,0,1-1.91,4.61l11.82,11.82A23.13,23.13,0,0,0,161,131.19Z"/><path class="cls-1" d="M133.11,135.8l-11.82,11.82a23.17,23.17,0,0,0,16.43,6.81V137.71A6.5,6.5,0,0,1,133.11,135.8Z"/><path class="cls-1" d="M82.63,16.19a11.26,11.26,0,1,0-19,8.19h0a11.23,11.23,0,0,0,15.41,0h0A11.21,11.21,0,0,0,82.63,16.19Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;stroke:#7df3e1;}.cls-1{stroke-linecap:round;}.cls-1,.cls-3{stroke-linejoin:round;stroke-width:1.25px;}.cls-2{stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M22.08,87.32c-1.64-3.26-2-6.12-1-8.45C24.64,70.6,45,70.7,73.39,77.6"/><circle class="cls-2" cx="31.13" cy="100.9" r="15.94"/><path class="cls-1" d="M88,136.33c-17.15-8.82-32-17.87-43.33-26.3"/><path class="cls-1" d="M198.45,131.52c25,16.22,39.43,31.24,35.81,39.61-4.72,10.91-38.57,7.26-81.64-7.33"/><path class="cls-1" d="M91.39,129.7C49,85.89,23.62,45.42,33.42,35.14c6.72-7,28.38,1.71,56.08,20.9"/><path class="cls-1" d="M193,153c23.35,29.29,36,54.36,28.87,61.87-8.5,8.92-40.94-7.48-79.25-38.28"/><path class="cls-3" d="M128.76,182.48c20.74,32.14,40.49,51.49,50,46.81"/><path class="cls-3" d="M76.52,20.71C64.08,26.81,73.27,71.5,96.9,123.56"/><circle class="cls-2" cx="111.23" cy="46.18" r="23.7"/><path class="cls-3" d="M133.76,53.58a71,71,0,1,1-39.92,8.47"/><path class="cls-3" d="M128.76,182.48c20.74,32.14,40.49,51.49,50,46.81,8.24-4,7-25-1.67-53.87"/><path class="cls-3" d="M95.51,28.62c-7.92-7.07-14.56-10.08-19-7.91C64.08,26.81,73.27,71.5,96.9,123.56"/><circle class="cls-2" cx="120.99" cy="148.62" r="34.89"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1{fill:none;stroke:#7df3e1;stroke-linejoin:round;stroke-width:1.25px;}</style></defs><path class="cls-1" d="M157.82,203.89a5.28,5.28,0,0,1-.67,3.09c-3.75,6.21-21.45,2.39-39.54-8.53C101.87,189,91,177.23,90.93,170.25c-7.27-.67-12.6.66-14.77,4.26-5.58,9.25,11.76,29.94,38.74,46.21s53.36,22,58.94,12.72C177.61,227.18,170.9,215.7,157.82,203.89Z"/><path class="cls-1" d="M157.82,203.89c-.3-5.42-6.78-13.52-16.86-21.24,0,0,0,.09-.05.13C139,185.93,130,184,120.77,178.43c-6.92-4.17-12-9.2-13.27-12.78-7.89-2-13.88-1.51-15.88,1.81a5.24,5.24,0,0,0-.69,2.79"/><path class="cls-1" d="M90.93,170.25c.09,7,10.94,18.71,26.68,28.2,18.09,10.92,35.79,14.74,39.54,8.53a5.28,5.28,0,0,0,.67-3.09"/><path class="cls-1" d="M141,182.65c1.69-3.22-4.19-10.17-13.28-15.66s-18.23-7.5-20.14-4.34a3.49,3.49,0,0,0,0,3"/><path class="cls-1" d="M107.5,165.65c1.29,3.58,6.35,8.61,13.27,12.78,9.22,5.56,18.23,7.5,20.14,4.35,0,0,0-.09.05-.13"/><path class="cls-1" d="M117.79,126a6.09,6.09,0,0,0,0,2.58l6.36,27,7.2-21.89a9.86,9.86,0,0,0,.45-4.26"/><path class="cls-1" d="M154.88,109V75.86a82.39,82.39,0,0,0-28-61.9l-2.08-1.83A45.42,45.42,0,0,0,94.7,54.89V94h0c-.64,9.87,5.75,21.3,17.08,28.72a44.56,44.56,0,0,0,6,3.28,6.16,6.16,0,0,1,9.26-4.09h0a10.13,10.13,0,0,1,4.8,7.57c8.51.37,16.05-2.61,20.12-8.83a18.2,18.2,0,0,0,2.88-8.6h0v-.38A20,20,0,0,0,154.88,109Z"/><path class="cls-1" d="M131.85,129.49a10.13,10.13,0,0,0-4.8-7.57h0a6.16,6.16,0,0,0-9.26,4.09"/><path class="cls-1" d="M173.76,96.66V86.55h0c.19-3.07-1.79-6.62-5.32-8.93-4.67-3.06-10.27-2.77-12.5.64a5.58,5.58,0,0,0-.89,2.68h0V81a5.89,5.89,0,0,0,0,.84v3.26h0v21.36h0v10.11h0c-.2,3.08,1.79,6.63,5.31,8.94,4.67,3.06,10.27,2.77,12.5-.64a5.71,5.71,0,0,0,.9-2.68h0v-.12c0-.27,0-.55,0-.83V118h0V96.66Z"/><path class="cls-1" d="M94.66,59.93a5.75,5.75,0,0,0,0-.83V59h0a5.63,5.63,0,0,0-.9-2.67c-2.23-3.41-7.83-3.7-12.5-.65-3.52,2.31-5.51,5.87-5.31,8.94h0v1.19s0,.07,0,.1V93.64s0,.07,0,.1v1.19h0c-.2,3.08,1.79,6.63,5.31,8.94,4.67,3.06,10.27,2.77,12.5-.64a5.71,5.71,0,0,0,.9-2.68h0v-.12a5.75,5.75,0,0,0,0-.83V95.9h0V59.94Z"/><ellipse class="cls-1" cx="122.77" cy="62.49" rx="10.06" ry="11.36"/></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1{fill:none;stroke:#7df3e1;stroke-linejoin:round;stroke-width:1.25px;}</style></defs><polygon class="cls-1" points="210.2 178.75 210.2 96.75 186.09 44.02 136.67 12.26 136.67 134.08 210.2 178.75"/><polygon class="cls-1" points="113.33 237.75 113.33 118.51 39.8 71.25 39.8 193.07 113.33 237.75"/><polyline class="cls-1" points="69.73 136.22 58.56 147.39 68.59 167.84"/><polyline class="cls-1" points="82.96 176.15 93.08 166.03 82.67 143.81"/><line class="cls-1" x1="159.63" y1="127.73" x2="122.15" y2="165.96"/><polyline class="cls-1" points="136.74 165.96 122.15 165.96 122.15 151.37"/><line class="cls-1" x1="122.15" y1="115.07" x2="159.51" y2="77.07"/><polyline class="cls-1" points="144.92 77.07 159.51 77.07 159.51 91.66"/><polygon class="cls-1" points="186.03 81.26 210.13 96.75 186.03 44.1 186.03 81.26"/></svg>
|
||||
|
After Width: | Height: | Size: 929 B |
Reference in New Issue
Block a user