paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Added core features to microsite

Browse Source 
Signed-off-by: Shashank Bairy R <shashank.bairy04@gmail.com>
This commit is contained in:
Shashank Bairy R
2021-03-27 14:37:05 +05:30
parent 566b549f63
commit e71ffb7c08
10 changed files with 180 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microsite/pages/en/plugins.js
+140 -33
View File
@@ -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>