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

Displayed core plugins sorted by order property

Browse Source 
Signed-off-by: Shashank Bairy R <shashank.bairy04@gmail.com>
This commit is contained in:
Shashank Bairy R
2021-03-29 16:29:31 +05:30
parent 7961b0f523
commit 31e0630ddb
5 changed files with 41 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microsite/pages/en/plugins.js
+37 -189
View File
@@ -18,12 +18,6 @@ const pluginMetadata = fs
.readdirSync(pluginsDirectory)
.map(file => yaml.load(fs.readFileSync(`./data/plugins/${file}`, 'utf8')))
.sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()));
const coreFeaturesMetadata = pluginMetadata
.filter(plugin => plugin.category === 'Core Feature')
.reduce((acc, plugin) => {
acc[plugin.title] = plugin;
return acc;
}, {});
const truncate = text =>
text.length > 170 ? text.substr(0, 170) + '...' : text;
@@ -53,189 +47,43 @@ const Plugins = () => (
<h2>Core Features</h2>
</div>
<Container wrapped className="PluginGrid">
<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>
{pluginMetadata
.filter(plugin => plugin.category === 'Core Feature')
.sort((a, b) => a.order - b.order)
.map(
({
iconUrl,
title,
description,
author,
authorUrl,
documentation,
category,
}) => (
<div className="PluginCard">
<div className="PluginCardHeader">
<div className="PluginCardImage">
<img src={iconUrl || defaultIconUrl} alt={title} />
</div>
<div className="PluginCardInfo">
<h3 className="PluginCardTitle">{title}</h3>
<p className="PluginCardAuthor">
by <a href={authorUrl}>{author}</a>
</p>
<span className="PluginCardChipOutlined">{category}</span>
</div>
</div>
<div className="PluginCardBody">
<p>{truncate(description)}</p>
</div>
<div className="PluginCardFooter">
<a className="ButtonFilled" href={documentation}>
Explore
</a>
</div>
</div>
),
)}
</Container>
<div className="PluginPageHeader">
<h2>All Plugins</h2>