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

feat: Add plugins page with Webpack require.context & folder per page

Browse Source 
Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
This commit is contained in:
Carlos Esteban Lopez
2023-01-28 01:11:07 -05:00
committed by Carlos Lopez
parent db485e2061
commit a3383f0079
12 changed files with 263 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microsite-next/docusaurus.config.js
+17 -1
View File
@@ -65,7 +65,23 @@ module.exports = {
},
],
],
plugins: ['docusaurus-plugin-sass'],
plugins: [
'docusaurus-plugin-sass',
() => ({
configureWebpack() {
return {
module: {
rules: [
{
test: /\.ya?ml$/,
use: 'yaml-loader',
},
],
},
};
},
}),
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
{
microsite-next/package.json
+3 -1
View File
@@ -20,10 +20,12 @@
"@docusaurus/module-type-aliases": "^2.2.0",
"@spotify/prettier-config": "^14.0.0",
"@tsconfig/docusaurus": "^1.0.6",
"@types/webpack-env": "^1.18.0",
"js-yaml": "^4.1.0",
"prettier": "^2.6.2",
"replace": "^1.2.2",
"typescript": "^4.9.4"
"typescript": "^4.9.4",
"yaml-loader": "^0.8.0"
},
"prettier": "@spotify/prettier-config",
"dependencies": {
microsite-next/src/css/customTheme.css
+13 -2
View File
@@ -25,7 +25,7 @@
background-color: white;
}
/* Utility API Styling */
/* #region Utility API Styling */
.textGreen {
color: #82b366;
}
@@ -44,4 +44,15 @@
.textAlignCenter {
text-align: center;
}
/* End of Utility API Styling */
/* #endregion */
/* #region Utility component styles */
.bulletLine {
height: 3px;
background: linear-gradient(
89.75deg,
#9bf0e1 -1.5%,
rgba(155, 240, 225, 0) 111.48%
);
}
/* #endregion */
microsite-next/src/pages/community.module.scss → microsite-next/src/pages/community/community.module.scss
-15
View File
@@ -23,12 +23,6 @@
:global(.bulletLine) {
width: 50px;
height: 3px;
background: linear-gradient(
89.75deg,
#9bf0e1 -1.5%,
rgba(155, 240, 225, 0) 111.48%
);
}
p {
@@ -70,12 +64,3 @@
rgba(155, 240, 225, 0.67) 137.34%
);
}
.communityInitiatives {
}
.trainingNCertifications {
}
.partners {
}
microsite-next/src/pages/community.tsx → microsite-next/src/pages/community/community.tsx
+6 -4
View File
@@ -13,9 +13,10 @@ interface ICollectionItem {
link: string;
}
export default function Community() {
export function Community() {
const { siteConfig } = useDocusaurusContext();
//#region Collection Data
const communityListItems: ICollectionItem[] = [
{
content: 'Chat and get support on our',
@@ -122,6 +123,7 @@ export default function Community() {
logo: 'img/partner-logo-vmware.png',
},
];
//#endregion
return (
<Layout>
@@ -140,10 +142,10 @@ export default function Community() {
Join the vibrant community around Backstage through social
media and different meetups. To ensure that you have a
welcoming environment, we follow the
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
<Link to="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
{' '}
CNCF Code of Conduct{' '}
</a>
</Link>
in everything we do.
</p>
</div>
@@ -158,7 +160,7 @@ export default function Community() {
({ content: text, link, label }, index) => (
<li key={index}>
<p className="margin-bottom--none">
{text} <a href={link}>{label}</a>
{text} <Link to={link}>{label}</Link>
</p>
</li>
),
microsite-next/src/pages/community/index.tsx
+3
View File
@@ -0,0 +1,3 @@
import { Community } from './community';
export default Community;
microsite-next/src/pages/plugins/index.tsx
+3
View File
@@ -0,0 +1,3 @@
import { Plugins } from './plugins';
export default Plugins;
microsite-next/src/pages/plugins/plugin-card.tsx
+54
View File
@@ -0,0 +1,54 @@
import Link from '@docusaurus/Link';
import React from 'react';
export interface IPluginData {
author: string;
authorUrl: string;
category: string;
description: string;
documentation: string;
iconUrl: string;
title: string;
order?: number;
}
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
export const PluginCard = ({
author,
authorUrl,
category,
description,
documentation,
iconUrl,
title,
}: IPluginData) => (
<div className="card">
<div className="card__header">
<img src={iconUrl || defaultIconUrl} alt={title} />
<h3>{title}</h3>
<p className="PluginCardAuthor">
by <a href={authorUrl}>{author}</a>
</p>
<span className="button button--sm button--outline button--primary">
{category}
</span>
</div>
<div className="card__body">
<p>{description}</p>
</div>
<div className="card__footer">
<Link
to={documentation}
className="button button--outline button--primary button--block"
>
Explore
</Link>
</div>
</div>
);
microsite-next/src/pages/plugins/plugins.module.scss
+33
View File
@@ -0,0 +1,33 @@
.pluginsPage {
:global(.marketplaceBanner) {
display: flex;
align-items: center;
}
:global(.marketplaceContent) {
flex: 1;
}
:global(.card .card__header) {
display: grid;
row-gap: 0.25rem;
column-gap: 1rem;
align-items: center;
grid-template-columns: auto 1fr;
> * {
margin: 0;
}
:global(img) {
width: 80px;
grid-row: 1/4;
}
}
:global(.pluginsContainer) {
gap: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
microsite-next/src/pages/plugins/plugins.tsx
+90
View File
@@ -0,0 +1,90 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import clsx from 'clsx';
import React from 'react';
import { IPluginData, PluginCard } from './plugin-card';
import pluginsStyles from './plugins.module.scss';
//#region Plugin data import
const maxDescLength = 160;
const truncatePluginDescription = (pluginData: IPluginData) =>
pluginData.description.length > maxDescLength
? {
...pluginData,
description: pluginData.description.slice(0, maxDescLength) + '...',
}
: pluginData;
const pluginsContext = require.context(
'../../../../microsite/data/plugins',
false,
/\.ya?ml/,
);
const plugins = pluginsContext.keys().reduce(
(acum, id) => {
const pluginData: IPluginData = pluginsContext(id).default;
acum[
pluginData.category === 'Core Feature' ? 'corePlugins' : 'otherPlugins'
].push(truncatePluginDescription(pluginData));
return acum;
},
{ corePlugins: [] as IPluginData[], otherPlugins: [] as IPluginData[] },
);
plugins.corePlugins.sort((a, b) => a.order - b.order);
plugins.otherPlugins.sort((a, b) => a.order - b.order);
//#endregion
export function Plugins() {
const { siteConfig } = useDocusaurusContext();
return (
<Layout>
<div
className={clsx('container', 'padding--lg', pluginsStyles.pluginsPage)}
>
<div className="marketplaceBanner">
<div className="marketplaceContent">
<h2>Plugin Marketplace</h2>
<p>
Open source plugins that you can add to your Backstage deployment.
Learn how to build a <Link to="/docs/plugins">plugin</Link>.
</p>
</div>
<Link
to="/docs/plugins/add-to-marketplace"
className="button button--outline button--primary"
>
Add to Marketplace
</Link>
</div>
<div className="bulletLine margin-bottom--lg"></div>
<h2>Core Features</h2>
<div className="pluginsContainer margin-bottom--lg">
{plugins.corePlugins.map(pluginData => (
<PluginCard key={pluginData.title} {...pluginData}></PluginCard>
))}
</div>
<h2>All Plugins</h2>
<div className="pluginsContainer margin-bottom--lg">
{plugins.otherPlugins.map(pluginData => (
<PluginCard key={pluginData.title} {...pluginData}></PluginCard>
))}
</div>
</div>
</Layout>
);
}
microsite-next/tsconfig.json
+7 -1
View File
@@ -1,6 +1,12 @@
{
"extends": "@tsconfig/docusaurus/tsconfig.json",
"compilerOptions": {
"baseUrl": "."
"baseUrl": ".",
"types": [
"node",
"@docusaurus/module-type-aliases",
"@docusaurus/theme-classic",
"@types/webpack-env"
]
}
}
microsite-next/yarn.lock
+34
View File
@@ -2958,6 +2958,13 @@ __metadata:
languageName: node
linkType: hard
"@types/webpack-env@npm:^1.18.0":
version: 1.18.0
resolution: "@types/webpack-env@npm:1.18.0"
checksum: ecf4daa31cb37d474ac0ce058d83a3cadeb9881ca8107ae93c2299eaa9954943aae09b43e143c62ccbe4288a14db00c918c9debd707afe17c3998f873eaabc59
languageName: node
linkType: hard
"@types/ws@npm:^8.5.1":
version: 8.5.3
resolution: "@types/ws@npm:8.5.3"
@@ -3577,6 +3584,7 @@ __metadata:
"@docusaurus/preset-classic": 2.2.0
"@spotify/prettier-config": ^14.0.0
"@tsconfig/docusaurus": ^1.0.6
"@types/webpack-env": ^1.18.0
clsx: ^1.1.1
docusaurus-plugin-sass: ^0.2.3
js-yaml: ^4.1.0
@@ -3586,6 +3594,7 @@ __metadata:
replace: ^1.2.2
sass: ^1.57.1
typescript: ^4.9.4
yaml-loader: ^0.8.0
languageName: unknown
linkType: soft
@@ -6653,6 +6662,13 @@ __metadata:
languageName: node
linkType: hard
"javascript-stringify@npm:^2.0.1":
version: 2.1.0
resolution: "javascript-stringify@npm:2.1.0"
checksum: 009981ec84299da88795fc764221ed213e3d52251cc93a396430a7a02ae09f1163a9be36a36808689681a8e6113cf00fe97ec2eea2552df48111f79be59e9358
languageName: node
linkType: hard
"jest-util@npm:^29.3.1":
version: 29.3.1
resolution: "jest-util@npm:29.3.1"
@@ -10966,6 +10982,17 @@ __metadata:
languageName: node
linkType: hard
"yaml-loader@npm:^0.8.0":
version: 0.8.0
resolution: "yaml-loader@npm:0.8.0"
dependencies:
javascript-stringify: ^2.0.1
loader-utils: ^2.0.0
yaml: ^2.0.0
checksum: d12dd264666b80baec23cea9f81cb677a9102d6f34ab45d8b6c085ace4d05b7285db9ce317db57264c3317af01128ce6e5b754e6866d15ccd75e8141902fb529
languageName: node
linkType: hard
"yaml@npm:^1.10.0, yaml@npm:^1.10.2, yaml@npm:^1.7.2":
version: 1.10.2
resolution: "yaml@npm:1.10.2"
@@ -10973,6 +11000,13 @@ __metadata:
languageName: node
linkType: hard
"yaml@npm:^2.0.0":
version: 2.2.1
resolution: "yaml@npm:2.2.1"
checksum: 84f68cbe462d5da4e7ded4a8bded949ffa912bc264472e5a684c3d45b22d8f73a3019963a32164023bdf3d83cfb6f5b58ff7b2b10ef5b717c630f40bd6369a23
languageName: node
linkType: hard
"yargs-parser@npm:^18.1.2":
version: 18.1.3
resolution: "yargs-parser@npm:18.1.3"