From e71ffb7c085d723f18250a325334ca45a01d301b Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Sat, 27 Mar 2021 14:37:05 +0530 Subject: [PATCH] Added core features to microsite Signed-off-by: Shashank Bairy R --- .../data/plugins/backstage-kubernetes.yaml | 9 + .../plugins/backstage-service-catalog.yaml | 9 + .../plugins/backstage-software-templates.yaml | 9 + .../data/plugins/backstage-techdocs.yaml | 9 + microsite/pages/en/plugins.js | 173 ++++++++++++++---- microsite/static/css/plugins.css | 1 - microsite/static/img/backstage-k8s.svg | 1 + .../static/img/backstage-service-catalog.svg | 1 + .../img/backstage-software-templates.svg | 1 + microsite/static/img/backstage-techdocs.svg | 1 + 10 files changed, 180 insertions(+), 34 deletions(-) create mode 100644 microsite/data/plugins/backstage-kubernetes.yaml create mode 100644 microsite/data/plugins/backstage-service-catalog.yaml create mode 100644 microsite/data/plugins/backstage-software-templates.yaml create mode 100644 microsite/data/plugins/backstage-techdocs.yaml create mode 100644 microsite/static/img/backstage-k8s.svg create mode 100644 microsite/static/img/backstage-service-catalog.svg create mode 100644 microsite/static/img/backstage-software-templates.svg create mode 100644 microsite/static/img/backstage-techdocs.svg diff --git a/microsite/data/plugins/backstage-kubernetes.yaml b/microsite/data/plugins/backstage-kubernetes.yaml new file mode 100644 index 0000000000..82994ff1d5 --- /dev/null +++ b/microsite/data/plugins/backstage-kubernetes.yaml @@ -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' diff --git a/microsite/data/plugins/backstage-service-catalog.yaml b/microsite/data/plugins/backstage-service-catalog.yaml new file mode 100644 index 0000000000..5c7783d804 --- /dev/null +++ b/microsite/data/plugins/backstage-service-catalog.yaml @@ -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' diff --git a/microsite/data/plugins/backstage-software-templates.yaml b/microsite/data/plugins/backstage-software-templates.yaml new file mode 100644 index 0000000000..341fb814e7 --- /dev/null +++ b/microsite/data/plugins/backstage-software-templates.yaml @@ -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' diff --git a/microsite/data/plugins/backstage-techdocs.yaml b/microsite/data/plugins/backstage-techdocs.yaml new file mode 100644 index 0000000000..2619a73032 --- /dev/null +++ b/microsite/data/plugins/backstage-techdocs.yaml @@ -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' diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js index 9ee54173f1..87a69b9614 100644 --- a/microsite/pages/en/plugins.js +++ b/microsite/pages/en/plugins.js @@ -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 = () => (
@@ -43,41 +51,140 @@ const Plugins = () => (
+
+

Core Features

+
- {pluginMetadata.map( - ({ - iconUrl, - title, - description, - author, - authorUrl, - documentation, - category, - }) => ( -
-
-
- {title} -
-
-

{title}

-

- by {author} -

- {category} -
-
-
-

{truncate(description)}

-
- +
+
+
+ {coreFeaturesMetadata['Backstage
- ), - )} +
+

{coreFeaturesMetadata['Backstage Service Catalog'].title}

+

+ by {coreFeaturesMetadata['Backstage Service Catalog'].author} +

+ {coreFeaturesMetadata['Backstage Service Catalog'].category} +
+
+
+

{truncate(coreFeaturesMetadata['Backstage Service Catalog'].description)}

+
+ +
+
+
+
+ {coreFeaturesMetadata['Backstage +
+
+

{coreFeaturesMetadata['Backstage Software Templates'].title}

+

+ by {coreFeaturesMetadata['Backstage Software Templates'].author} +

+ {coreFeaturesMetadata['Backstage Software Templates'].category} +
+
+
+

{truncate(coreFeaturesMetadata['Backstage Software Templates'].description)}

+
+ +
+
+
+
+ {coreFeaturesMetadata['Backstage +
+
+

{coreFeaturesMetadata['Backstage TechDocs'].title}

+

+ by {coreFeaturesMetadata['Backstage TechDocs'].author} +

+ {coreFeaturesMetadata['Backstage TechDocs'].category} +
+
+
+

{truncate(coreFeaturesMetadata['Backstage TechDocs'].description)}

+
+ +
+
+
+
+ {coreFeaturesMetadata['Backstage +
+
+

{coreFeaturesMetadata['Backstage Kubernetes'].title}

+

+ by {coreFeaturesMetadata['Backstage Kubernetes'].author} +

+ {coreFeaturesMetadata['Backstage Kubernetes'].category} +
+
+
+

{truncate(coreFeaturesMetadata['Backstage Kubernetes'].description)}

+
+ +
+ +
+

All Plugins

+
+ + {pluginMetadata + .filter(plugin => plugin.category !== 'Core Feature') + .map( + ({ + iconUrl, + title, + description, + author, + authorUrl, + documentation, + category, + }) => ( +
+
+
+ {title} +
+
+

{title}

+

+ by {author} +

+ {category} +
+
+
+

{truncate(description)}

+
+ +
+ ), + ) + }

diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css index 8a0d843dc9..b9aebfa84c 100644 --- a/microsite/static/css/plugins.css +++ b/microsite/static/css/plugins.css @@ -11,7 +11,6 @@ grid-gap: 1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; - padding-top: 32px; } @media (max-width: 1200px) { diff --git a/microsite/static/img/backstage-k8s.svg b/microsite/static/img/backstage-k8s.svg new file mode 100644 index 0000000000..af2b23c945 --- /dev/null +++ b/microsite/static/img/backstage-k8s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/microsite/static/img/backstage-service-catalog.svg b/microsite/static/img/backstage-service-catalog.svg new file mode 100644 index 0000000000..66e88faf3d --- /dev/null +++ b/microsite/static/img/backstage-service-catalog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/microsite/static/img/backstage-software-templates.svg b/microsite/static/img/backstage-software-templates.svg new file mode 100644 index 0000000000..448da4bf67 --- /dev/null +++ b/microsite/static/img/backstage-software-templates.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/microsite/static/img/backstage-techdocs.svg b/microsite/static/img/backstage-techdocs.svg new file mode 100644 index 0000000000..a8f198a62a --- /dev/null +++ b/microsite/static/img/backstage-techdocs.svg @@ -0,0 +1 @@ + \ No newline at end of file