From e71ffb7c085d723f18250a325334ca45a01d301b Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Sat, 27 Mar 2021 14:37:05 +0530 Subject: [PATCH 1/3] 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 From 7961b0f523c3ebfca902010f3f9479a6e76863eb Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Sat, 27 Mar 2021 16:17:21 +0530 Subject: [PATCH 2/3] Ran prettier Signed-off-by: Shashank Bairy R --- microsite/pages/en/plugins.js | 152 +++++++++++++++++++++++++++------- 1 file changed, 122 insertions(+), 30 deletions(-) diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js index 87a69b9614..941f7a988f 100644 --- a/microsite/pages/en/plugins.js +++ b/microsite/pages/en/plugins.js @@ -18,20 +18,18 @@ 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 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 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 = () => (

@@ -58,21 +56,47 @@ const Plugins = () => (
- {coreFeaturesMetadata['Backstage + {coreFeaturesMetadata['Backstage
-

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

+

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

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

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

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

+

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

@@ -80,21 +104,50 @@ const Plugins = () => (
- {coreFeaturesMetadata['Backstage + {coreFeaturesMetadata['Backstage
-

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

+

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

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

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

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

+

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

@@ -102,21 +155,39 @@ const Plugins = () => (
- {coreFeaturesMetadata['Backstage + {coreFeaturesMetadata['Backstage
-

{coreFeaturesMetadata['Backstage TechDocs'].title}

+

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

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

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

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

+

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

@@ -124,21 +195,43 @@ const Plugins = () => (
- {coreFeaturesMetadata['Backstage + {coreFeaturesMetadata['Backstage
-

{coreFeaturesMetadata['Backstage Kubernetes'].title}

+

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

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

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

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

+

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

@@ -183,8 +276,7 @@ const Plugins = () => (
), - ) - } + )}

From 31e0630ddb07a076e09dd68768c330ce6ebd621d Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Mon, 29 Mar 2021 16:29:31 +0530 Subject: [PATCH 3/3] Displayed core plugins sorted by order property Signed-off-by: Shashank Bairy R --- .../data/plugins/backstage-kubernetes.yaml | 1 + .../plugins/backstage-service-catalog.yaml | 1 + .../plugins/backstage-software-templates.yaml | 1 + .../data/plugins/backstage-techdocs.yaml | 1 + microsite/pages/en/plugins.js | 226 +++--------------- 5 files changed, 41 insertions(+), 189 deletions(-) diff --git a/microsite/data/plugins/backstage-kubernetes.yaml b/microsite/data/plugins/backstage-kubernetes.yaml index 82994ff1d5..c821d034c5 100644 --- a/microsite/data/plugins/backstage-kubernetes.yaml +++ b/microsite/data/plugins/backstage-kubernetes.yaml @@ -7,3 +7,4 @@ description: Monitor all your service's deployments at a glance, even across clu documentation: https://backstage.io/docs/features/kubernetes/overview iconUrl: img/backstage-k8s.svg npmPackageName: '@backstage/plugin-kubernetes' +order: 4 diff --git a/microsite/data/plugins/backstage-service-catalog.yaml b/microsite/data/plugins/backstage-service-catalog.yaml index 5c7783d804..1a788078a5 100644 --- a/microsite/data/plugins/backstage-service-catalog.yaml +++ b/microsite/data/plugins/backstage-service-catalog.yaml @@ -7,3 +7,4 @@ 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' +order: 1 diff --git a/microsite/data/plugins/backstage-software-templates.yaml b/microsite/data/plugins/backstage-software-templates.yaml index 341fb814e7..4d478f9435 100644 --- a/microsite/data/plugins/backstage-software-templates.yaml +++ b/microsite/data/plugins/backstage-software-templates.yaml @@ -7,3 +7,4 @@ description: Create new software components in just a few steps, with your stand documentation: https://backstage.io/docs/features/software-templates/software-templates-index iconUrl: img/backstage-software-templates.svg npmPackageName: '@backstage/plugin-scaffolder' +order: 2 diff --git a/microsite/data/plugins/backstage-techdocs.yaml b/microsite/data/plugins/backstage-techdocs.yaml index 2619a73032..cd2ddefed4 100644 --- a/microsite/data/plugins/backstage-techdocs.yaml +++ b/microsite/data/plugins/backstage-techdocs.yaml @@ -7,3 +7,4 @@ description: A docs-like-code solution to technical documentation. Write your do documentation: https://backstage.io/docs/features/techdocs/techdocs-overview iconUrl: img/backstage-techdocs.svg npmPackageName: '@backstage/plugin-techdocs' +order: 3 diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js index 941f7a988f..de336444ab 100644 --- a/microsite/pages/en/plugins.js +++ b/microsite/pages/en/plugins.js @@ -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 = () => (

Core Features

-
-
-
- {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, - )} -

-
- -
+ {pluginMetadata + .filter(plugin => plugin.category === 'Core Feature') + .sort((a, b) => a.order - b.order) + .map( + ({ + iconUrl, + title, + description, + author, + authorUrl, + documentation, + category, + }) => ( +
+
+
+ {title} +
+
+

{title}

+

+ by {author} +

+ {category} +
+
+
+

{truncate(description)}

+
+ +
+ ), + )}

All Plugins