From a3383f007974711f0e95d4e0779bfdfdbbdeeebc Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Sat, 28 Jan 2023 01:11:07 -0500 Subject: [PATCH] feat: Add plugins page with Webpack require.context & folder per page Signed-off-by: Carlos Esteban Lopez --- microsite-next/docusaurus.config.js | 18 +++- microsite-next/package.json | 4 +- microsite-next/src/css/customTheme.css | 15 +++- .../{ => community}/community.module.scss | 15 ---- .../src/pages/{ => community}/community.tsx | 10 ++- microsite-next/src/pages/community/index.tsx | 3 + microsite-next/src/pages/plugins/index.tsx | 3 + .../src/pages/plugins/plugin-card.tsx | 54 +++++++++++ .../src/pages/plugins/plugins.module.scss | 33 +++++++ microsite-next/src/pages/plugins/plugins.tsx | 90 +++++++++++++++++++ microsite-next/tsconfig.json | 8 +- microsite-next/yarn.lock | 34 +++++++ 12 files changed, 263 insertions(+), 24 deletions(-) rename microsite-next/src/pages/{ => community}/community.module.scss (84%) rename microsite-next/src/pages/{ => community}/community.tsx (97%) create mode 100644 microsite-next/src/pages/community/index.tsx create mode 100644 microsite-next/src/pages/plugins/index.tsx create mode 100644 microsite-next/src/pages/plugins/plugin-card.tsx create mode 100644 microsite-next/src/pages/plugins/plugins.module.scss create mode 100644 microsite-next/src/pages/plugins/plugins.tsx diff --git a/microsite-next/docusaurus.config.js b/microsite-next/docusaurus.config.js index 55d24ba678..28e74f3633 100644 --- a/microsite-next/docusaurus.config.js +++ b/microsite-next/docusaurus.config.js @@ -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} */ { diff --git a/microsite-next/package.json b/microsite-next/package.json index fa33da8306..01feee18dc 100644 --- a/microsite-next/package.json +++ b/microsite-next/package.json @@ -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": { diff --git a/microsite-next/src/css/customTheme.css b/microsite-next/src/css/customTheme.css index 3b71d51d62..1a39467516 100644 --- a/microsite-next/src/css/customTheme.css +++ b/microsite-next/src/css/customTheme.css @@ -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 */ diff --git a/microsite-next/src/pages/community.module.scss b/microsite-next/src/pages/community/community.module.scss similarity index 84% rename from microsite-next/src/pages/community.module.scss rename to microsite-next/src/pages/community/community.module.scss index 4fadb9bf55..87dcdf92d1 100644 --- a/microsite-next/src/pages/community.module.scss +++ b/microsite-next/src/pages/community/community.module.scss @@ -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 { -} diff --git a/microsite-next/src/pages/community.tsx b/microsite-next/src/pages/community/community.tsx similarity index 97% rename from microsite-next/src/pages/community.tsx rename to microsite-next/src/pages/community/community.tsx index 40868f6c72..3ea0c36da9 100644 --- a/microsite-next/src/pages/community.tsx +++ b/microsite-next/src/pages/community/community.tsx @@ -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 ( @@ -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 - + {' '} CNCF Code of Conduct{' '} - + in everything we do.

@@ -158,7 +160,7 @@ export default function Community() { ({ content: text, link, label }, index) => (

  • - {text} {label} + {text} {label}

    • ), diff --git a/microsite-next/src/pages/community/index.tsx b/microsite-next/src/pages/community/index.tsx new file mode 100644 index 0000000000..5f3fd915db --- /dev/null +++ b/microsite-next/src/pages/community/index.tsx @@ -0,0 +1,3 @@ +import { Community } from './community'; + +export default Community; diff --git a/microsite-next/src/pages/plugins/index.tsx b/microsite-next/src/pages/plugins/index.tsx new file mode 100644 index 0000000000..9aec0c2586 --- /dev/null +++ b/microsite-next/src/pages/plugins/index.tsx @@ -0,0 +1,3 @@ +import { Plugins } from './plugins'; + +export default Plugins; diff --git a/microsite-next/src/pages/plugins/plugin-card.tsx b/microsite-next/src/pages/plugins/plugin-card.tsx new file mode 100644 index 0000000000..dec62af06f --- /dev/null +++ b/microsite-next/src/pages/plugins/plugin-card.tsx @@ -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) => ( +
    +
    + {title} + +

    {title}

    + +

    + by {author} +

    + + + {category} + +
    + +
    +

    {description}

    +
    + +
    + + Explore + +
    +
    +); diff --git a/microsite-next/src/pages/plugins/plugins.module.scss b/microsite-next/src/pages/plugins/plugins.module.scss new file mode 100644 index 0000000000..d21444583a --- /dev/null +++ b/microsite-next/src/pages/plugins/plugins.module.scss @@ -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)); + } +} diff --git a/microsite-next/src/pages/plugins/plugins.tsx b/microsite-next/src/pages/plugins/plugins.tsx new file mode 100644 index 0000000000..c904b57382 --- /dev/null +++ b/microsite-next/src/pages/plugins/plugins.tsx @@ -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 ( + +
    +
    +
    +

    Plugin Marketplace

    + +

    + Open source plugins that you can add to your Backstage deployment. + Learn how to build a plugin. +

    +
    + + + Add to Marketplace + +
    + +
    + +

    Core Features

    + +
    + {plugins.corePlugins.map(pluginData => ( + + ))} +
    + +

    All Plugins

    + +
    + {plugins.otherPlugins.map(pluginData => ( + + ))} +
    +
    +     + ); +} diff --git a/microsite-next/tsconfig.json b/microsite-next/tsconfig.json index 57bbce401d..ae8fe2298a 100644 --- a/microsite-next/tsconfig.json +++ b/microsite-next/tsconfig.json @@ -1,6 +1,12 @@ { "extends": "@tsconfig/docusaurus/tsconfig.json", "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "types": [ + "node", + "@docusaurus/module-type-aliases", + "@docusaurus/theme-classic", + "@types/webpack-env" + ] } } diff --git a/microsite-next/yarn.lock b/microsite-next/yarn.lock index 6091c6683c..8dc3fce883 100644 --- a/microsite-next/yarn.lock +++ b/microsite-next/yarn.lock @@ -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"