From db485e20618a2273caa1828cb8b4ac2ea1a5e372 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Tue, 24 Jan 2023 23:53:15 -0500 Subject: [PATCH 01/14] feat: Add Community page & Docusaurus 2 config Signed-off-by: Carlos Esteban Lopez --- microsite-next/docusaurus.config.js | 273 ++++++++--------- microsite-next/package.json | 9 +- .../src/pages/community.module.scss | 81 +++++ microsite-next/src/pages/community.tsx | 281 ++++++++++++++++++ microsite-next/tsconfig.json | 6 + microsite-next/typings.d.ts | 1 + microsite-next/yarn.lock | 103 ++++++- 7 files changed, 612 insertions(+), 142 deletions(-) create mode 100644 microsite-next/src/pages/community.module.scss create mode 100644 microsite-next/src/pages/community.tsx create mode 100644 microsite-next/tsconfig.json create mode 100644 microsite-next/typings.d.ts diff --git a/microsite-next/docusaurus.config.js b/microsite-next/docusaurus.config.js index 2b37ae20b2..55d24ba678 100644 --- a/microsite-next/docusaurus.config.js +++ b/microsite-next/docusaurus.config.js @@ -13,6 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +// @ts-check + +/** @type {import('@docusaurus/types').Config} */ module.exports = { title: 'Backstage Software Catalog and Developer Platform', tagline: 'An open platform for building developer portals', @@ -40,6 +44,7 @@ module.exports = { presets: [ [ '@docusaurus/preset-classic', + /** @type {import('@docusaurus/preset-classic').Options} */ { docs: { showLastUpdateAuthor: true, @@ -60,138 +65,140 @@ module.exports = { }, ], ], - plugins: [], - themeConfig: { - navbar: { - title: 'Backstage Software Catalog and Developer Platform', - items: [ - { - href: 'https://github.com/backstage/backstage', - label: 'GitHub', - position: 'left', - }, - { - to: 'docs/overview/what-is-backstage', - label: 'Docs', - position: 'left', - }, - { - to: '/plugins', - label: 'Plugins', - position: 'left', - }, - { - to: '/blog', - label: 'Blog', - position: 'left', - }, - { - to: 'docs/releases/v1.8.0', - label: 'Releases', - position: 'left', - }, - { - to: '/demos', - label: 'Demos', - position: 'left', - }, - { - to: '/community', - label: 'Community', - position: 'left', - }, - ], + plugins: ['docusaurus-plugin-sass'], + themeConfig: + /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ + { + navbar: { + title: 'Backstage Software Catalog and Developer Platform', + items: [ + { + href: 'https://github.com/backstage/backstage', + label: 'GitHub', + position: 'left', + }, + { + to: 'docs/overview/what-is-backstage', + label: 'Docs', + position: 'left', + }, + { + to: '/plugins', + label: 'Plugins', + position: 'left', + }, + { + to: '/blog', + label: 'Blog', + position: 'left', + }, + { + to: 'docs/releases/v1.8.0', + label: 'Releases', + position: 'left', + }, + { + to: '/demos', + label: 'Demos', + position: 'left', + }, + { + to: '/community', + label: 'Community', + position: 'left', + }, + ], + }, + image: 'img/sharing-opengraph.png', + footer: { + links: [ + { + items: [ + { + html: '', + }, + ], + }, + { + title: 'Docs', + items: [ + { + label: 'What is Backstage?', + to: 'docs/overview/what-is-backstage', + }, + { + label: 'Getting started', + to: 'docs/getting-started/', + }, + { + label: 'Software Catalog', + to: 'docs/features/software-catalog/software-catalog-overview', + }, + { + label: 'Create a Plugin', + to: 'docs/plugins/create-a-plugin', + }, + { + label: 'Designing for Backstage', + to: 'docs/dls/design', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Support chatroom', + to: 'https://discord.gg/MUpMjP2', + }, + { + label: 'Contributing', + to: 'https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md', + }, + { + label: 'Adopting', + to: 'https://backstage.spotify.com', + }, + { + label: 'Subscribe to our newsletter', + to: 'https://mailchi.mp/spotify/backstage-community', + }, + { + label: 'CNCF Incubation', + to: 'https://www.cncf.io/projects/', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'Open Source @ Spotify', + to: 'https://spotify.github.io/', + }, + { + label: 'Spotify Engineering Blog', + to: 'https://engineering.atspotify.com/', + }, + { + label: 'Spotify for Developers', + to: 'https://developer.spotify.com/', + }, + { + label: 'Github', + to: 'https://github.com/backstage/', + }, + ], + }, + ], + copyright: + '

Made with ❤️ at Spotify

Copyright © 2022 Backstage Project Authors. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: https://www.linuxfoundation.org/trademark-usage

', + }, + algolia: { + appId: 'AZYC4ZFNTN', + apiKey: '7dbd2089b0d445ee0d87db71abfc794f', + indexName: 'backstage', + searchParameters: {}, + }, }, - image: 'img/sharing-opengraph.png', - footer: { - links: [ - { - items: [ - { - html: '', - }, - ], - }, - { - title: 'Docs', - items: [ - { - label: 'What is Backstage?', - to: 'docs/overview/what-is-backstage', - }, - { - label: 'Getting started', - to: 'docs/getting-started/', - }, - { - label: 'Software Catalog', - to: 'docs/features/software-catalog/software-catalog-overview', - }, - { - label: 'Create a Plugin', - to: 'docs/plugins/create-a-plugin', - }, - { - label: 'Designing for Backstage', - to: 'docs/dls/design', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Support chatroom', - to: 'https://discord.gg/MUpMjP2', - }, - { - label: 'Contributing', - to: 'https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md', - }, - { - label: 'Adopting', - to: 'https://backstage.spotify.com', - }, - { - label: 'Subscribe to our newsletter', - to: 'https://mailchi.mp/spotify/backstage-community', - }, - { - label: 'CNCF Incubation', - to: 'https://www.cncf.io/projects/', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Open Source @ Spotify', - to: 'https://spotify.github.io/', - }, - { - label: 'Spotify Engineering Blog', - to: 'https://engineering.atspotify.com/', - }, - { - label: 'Spotify for Developers', - to: 'https://developer.spotify.com/', - }, - { - label: 'Github', - to: 'https://github.com/backstage/', - }, - ], - }, - ], - copyright: - '

Made with ❤️ at Spotify

Copyright © 2022 Backstage Project Authors. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: https://www.linuxfoundation.org/trademark-usage

', - }, - algolia: { - appId: 'AZYC4ZFNTN', - apiKey: '7dbd2089b0d445ee0d87db71abfc794f', - indexName: 'backstage', - searchParameters: {}, - }, - }, }; diff --git a/microsite-next/package.json b/microsite-next/package.json index 478fce0196..fa33da8306 100644 --- a/microsite-next/package.json +++ b/microsite-next/package.json @@ -17,17 +17,22 @@ "docusaurus": "docusaurus" }, "devDependencies": { + "@docusaurus/module-type-aliases": "^2.2.0", "@spotify/prettier-config": "^14.0.0", + "@tsconfig/docusaurus": "^1.0.6", "js-yaml": "^4.1.0", "prettier": "^2.6.2", - "replace": "^1.2.2" + "replace": "^1.2.2", + "typescript": "^4.9.4" }, "prettier": "@spotify/prettier-config", "dependencies": { "@docusaurus/core": "2.2.0", "@docusaurus/preset-classic": "2.2.0", "clsx": "^1.1.1", + "docusaurus-plugin-sass": "^0.2.3", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "sass": "^1.57.1" } } diff --git a/microsite-next/src/pages/community.module.scss b/microsite-next/src/pages/community.module.scss new file mode 100644 index 0000000000..4fadb9bf55 --- /dev/null +++ b/microsite-next/src/pages/community.module.scss @@ -0,0 +1,81 @@ +.communityPage { + // --ifm-spacing-horizontal: 2rem; + + font-size: 1.25rem; + + h1 { + font-size: 54px; + line-height: 56px; + word-break: break-word; + } +} + +.banner, +.officialInitiatives, +.communityInitiatives, +.trainingNCertifications, +.commercialPartners { + :global(.row .col) { + max-width: 50%; + + display: flex; + flex-direction: column; + + :global(.bulletLine) { + width: 50px; + height: 3px; + background: linear-gradient( + 89.75deg, + #9bf0e1 -1.5%, + rgba(155, 240, 225, 0) 111.48% + ); + } + + p { + flex: 1; + } + } +} + +.banner, +.communityInitiatives, +.commercialPartners { + background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); + // clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw - 10px), 0 100%); +} + +.banner { + ul { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + } +} + +.officialInitiatives { + background: linear-gradient( + 178.64deg, + hsla(0, 0%, 100%, 0) 57.61%, + hsla(0, 0%, 100%, 0.17) 127.71% + ), + linear-gradient( + 144.35deg, + rgba(98, 197, 179, 0) 56.68%, + rgba(98, 197, 179, 0.59) 109.25% + ), + linear-gradient( + 192.29deg, + rgba(155, 240, 225, 0) 54.17%, + 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.tsx new file mode 100644 index 0000000000..40868f6c72 --- /dev/null +++ b/microsite-next/src/pages/community.tsx @@ -0,0 +1,281 @@ +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import { clsx } from 'clsx'; +import React from 'react'; + +import communityStyles from './community.module.scss'; + +interface ICollectionItem { + title?: string; + content: React.ReactNode; + label: string; + link: string; +} + +export default function Community() { + const { siteConfig } = useDocusaurusContext(); + + const communityListItems: ICollectionItem[] = [ + { + content: 'Chat and get support on our', + label: 'Discord', + link: 'https://discord.gg/MUpMjP2', + }, + { + content: 'Get into contributing with the', + label: 'Good First Issues', + link: 'https://github.com/backstage/backstage/contribute', + }, + { + content: 'Subscribe to the', + label: 'Community newsletter', + link: 'https://info.backstage.spotify.com/newsletter_subscribe', + }, + { + content: 'Join the', + label: 'Twitter community', + link: 'https://twitter.com/i/communities/1494019781716062215', + }, + ]; + + const officialInitiatives: ICollectionItem[] = [ + { + title: 'Community sessions', + content: + 'Maintainers and adopters meet monthly to share updates, demos, and ideas. Yep, all sessions are recorded!', + link: '/on-demand', + label: 'Join a session', + }, + { + title: 'Newsletter', + content: + "The official monthly Backstage newsletter. Don't miss the latest news from your favorite project!", + link: 'https://info.backstage.spotify.com/newsletter_subscribe', + label: 'Subscribe', + }, + { + title: 'Contributor Spotlight', + content: + "A recognition for valuable community work. Nominate contributing members for their efforts! We'll put them in the spotlight ❤️", + link: '/nominate', + label: 'Nominate now', + }, + ]; + + const communityInitiatives: ICollectionItem[] = [ + { + title: 'Open Mic Meetup', + content: ( + <> + A casual get together of Backstage users sharing their experiences and + helping each other. Hosted by{' '} + Roadie.io and{' '} + Frontside Software. + + ), + link: 'https://backstage-openmic.com/', + label: 'Learn more', + }, + { + title: 'Backstage Weekly Newsletter', + content: ( + <> + A weekly newsletter with news, updates and things community from your + friends at Roadie.io. + + ), + link: 'https://roadie.io/backstage-weekly/', + label: 'Learn more', + }, + ]; + + const trainingNCertifications: ICollectionItem[] = [ + { + title: 'Open Mic Meetup', + content: + 'This is a course produced and curated by the Linux Foundation. This course introduces you to Backstage and how to get started with the project.', + link: 'https://training.linuxfoundation.org/training/introduction-to-backstage-developer-portals-made-easy-lfs142x/', + label: 'Learn more', + }, + ]; + + const partners: { name: string; url: string; logo: string }[] = [ + { + name: 'Frontside Software', + url: 'https://frontside.com/backstage/', + logo: 'img/partner-logo-frontside.png', + }, + { + name: 'Roadie', + url: 'https://roadie.io/', + logo: 'img/partner-logo-roadie.png', + }, + { + name: 'ThoughtWorks', + url: 'https://www.thoughtworks.com', + logo: 'img/partner-logo-thoughtworks.png', + }, + { + name: 'VMWare', + url: 'https://www.vmware.com', + logo: 'img/partner-logo-vmware.png', + }, + ]; + + return ( + +
+
+
+
+
+

+ Backstage 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. +

+
+ +
+

+ Get started in our community! +

+ +
    + {communityListItems.map( + ({ content: text, link, label }, index) => ( +
  • +

    + {text} {label} +

    +
    • + ), + )} +
+
+
+
+
+ +
+
+
+

Offical Backstage initiatives

+ +

Stay tuned to the latest developments

+
+ +
+ {officialInitiatives.map( + ({ title, content, link, label }, index) => ( +
+
+ +

{title}

+ +

{content}

+ + + {label} + +
+ ), + )} +
+
+
+ +
+
+
+

Community initiatives

+
+ +
+ {communityInitiatives.map( + ({ title, content, link, label }, index) => ( +
+
+ +

{title}

+ +

{content}

+ + + {label} + +
+ ), + )} +
+
+
+ +
+
+
+

Trainings and Certifications

+
+ +
+ {trainingNCertifications.map( + ({ title, content, link, label }, index) => ( +
+
+ +

{title}

+ +

{content}

+ + + {label} + +
+ ), + )} +
+
+
+ +
+
+
+

Commercial Partners

+
+ +
+ {partners.map(({ name, url, logo }, index) => ( +
+ + {name} + +
+ ))} +
+
+
+
+ + ); +} diff --git a/microsite-next/tsconfig.json b/microsite-next/tsconfig.json new file mode 100644 index 0000000000..57bbce401d --- /dev/null +++ b/microsite-next/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "@tsconfig/docusaurus/tsconfig.json", + "compilerOptions": { + "baseUrl": "." + } +} diff --git a/microsite-next/typings.d.ts b/microsite-next/typings.d.ts new file mode 100644 index 0000000000..d5cf927a7c --- /dev/null +++ b/microsite-next/typings.d.ts @@ -0,0 +1 @@ +declare module '*.scss'; diff --git a/microsite-next/yarn.lock b/microsite-next/yarn.lock index 251ae303c0..6091c6683c 100644 --- a/microsite-next/yarn.lock +++ b/microsite-next/yarn.lock @@ -1794,7 +1794,7 @@ __metadata: languageName: node linkType: hard -"@docusaurus/module-type-aliases@npm:2.2.0": +"@docusaurus/module-type-aliases@npm:2.2.0, @docusaurus/module-type-aliases@npm:^2.2.0": version: 2.2.0 resolution: "@docusaurus/module-type-aliases@npm:2.2.0" dependencies: @@ -2608,6 +2608,13 @@ __metadata: languageName: node linkType: hard +"@tsconfig/docusaurus@npm:^1.0.6": + version: 1.0.6 + resolution: "@tsconfig/docusaurus@npm:1.0.6" + checksum: fb0d7965c01fe64fc6369a72695b903d654bd5fb145f373d707c2bae3c2d828703517d812cef1c041ae44b108f44e52778b9d9837a54fdf782e68e6619a90a4d + languageName: node + linkType: hard + "@types/body-parser@npm:*": version: 1.19.2 resolution: "@types/body-parser@npm:1.19.2" @@ -3566,14 +3573,19 @@ __metadata: resolution: "backstage-microsite@workspace:." dependencies: "@docusaurus/core": 2.2.0 + "@docusaurus/module-type-aliases": ^2.2.0 "@docusaurus/preset-classic": 2.2.0 "@spotify/prettier-config": ^14.0.0 + "@tsconfig/docusaurus": ^1.0.6 clsx: ^1.1.1 + docusaurus-plugin-sass: ^0.2.3 js-yaml: ^4.1.0 prettier: ^2.6.2 react: ^17.0.2 react-dom: ^17.0.2 replace: ^1.2.2 + sass: ^1.57.1 + typescript: ^4.9.4 languageName: unknown linkType: soft @@ -3939,7 +3951,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.4.2, chokidar@npm:^3.5.3": +"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.3": version: 3.5.3 resolution: "chokidar@npm:3.5.3" dependencies: @@ -4790,6 +4802,18 @@ __metadata: languageName: node linkType: hard +"docusaurus-plugin-sass@npm:^0.2.3": + version: 0.2.3 + resolution: "docusaurus-plugin-sass@npm:0.2.3" + dependencies: + sass-loader: ^10.1.1 + peerDependencies: + "@docusaurus/core": ^2.0.0-beta + sass: ^1.30.0 + checksum: 928b02fd7c63835d54cdcce2eeda01cb6124707c6d43ef8e77db06474d3e3b4b7282cc0d88fed378cf1f3db2fc93ba8c11366965bb9b668eae19ca805e578acb + languageName: node + linkType: hard + "dom-converter@npm:^0.2.0": version: 0.2.0 resolution: "dom-converter@npm:0.2.0" @@ -6214,6 +6238,13 @@ __metadata: languageName: node linkType: hard +"immutable@npm:^4.0.0": + version: 4.2.2 + resolution: "immutable@npm:4.2.2" + checksum: 4d6437ea9388fe8ceca7eed5c768cf438cda7fa14d2831b87b90aa00cc60d536964d107c255b8a2e5dbf4f44a0e1295afbb9d1f0a65fb4f57b936e71df601862 + languageName: node + linkType: hard + "import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -6793,10 +6824,10 @@ __metadata: languageName: node linkType: hard -"klona@npm:^2.0.5": - version: 2.0.5 - resolution: "klona@npm:2.0.5" - checksum: 8c976126ea252b766e648a4866e1bccff9d3b08432474ad80c559f6c7265cf7caede2498d463754d8c88c4759895edd8210c85c0d3155e6aae4968362889466f +"klona@npm:^2.0.4, klona@npm:^2.0.5": + version: 2.0.6 + resolution: "klona@npm:2.0.6" + checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7 languageName: node linkType: hard @@ -9214,6 +9245,44 @@ __metadata: languageName: node linkType: hard +"sass-loader@npm:^10.1.1": + version: 10.4.1 + resolution: "sass-loader@npm:10.4.1" + dependencies: + klona: ^2.0.4 + loader-utils: ^2.0.0 + neo-async: ^2.6.2 + schema-utils: ^3.0.0 + semver: ^7.3.2 + peerDependencies: + fibers: ">= 3.1.0" + node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 + sass: ^1.3.0 + webpack: ^4.36.0 || ^5.0.0 + peerDependenciesMeta: + fibers: + optional: true + node-sass: + optional: true + sass: + optional: true + checksum: df9a65a62247e95305299ccbdf212cffdcdb69490928aecdf4f3dcf539b5302ed7cbffa663f83c5fc3ce0864decf84257a9ce484f6df4cb4426feeb88445dcd0 + languageName: node + linkType: hard + +"sass@npm:^1.57.1": + version: 1.57.1 + resolution: "sass@npm:1.57.1" + dependencies: + chokidar: ">=3.0.0 <4.0.0" + immutable: ^4.0.0 + source-map-js: ">=0.6.2 <2.0.0" + bin: + sass: sass.js + checksum: 734a08781bcbe0e8defb2d54864e7012014ed3e68ba5fcb766189b002929019fc37b2f83a18d4be0b5f69ad77317c92396ce6112447ab47a194ed600ae1afb27 + languageName: node + linkType: hard + "sax@npm:^1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4" @@ -9603,7 +9672,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.0.2": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2": version: 1.0.2 resolution: "source-map-js@npm:1.0.2" checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c @@ -10092,6 +10161,26 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^4.9.4": + version: 4.9.4 + resolution: "typescript@npm:4.9.4" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: e782fb9e0031cb258a80000f6c13530288c6d63f1177ed43f770533fdc15740d271554cdae86701c1dd2c83b082cea808b07e97fd68b38a172a83dbf9e0d0ef9 + languageName: node + linkType: hard + +"typescript@patch:typescript@^4.9.4#~builtin": + version: 4.9.4 + resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin::version=4.9.4&hash=a1c5e5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 37f6e2c3c5e2aa5934b85b0fddbf32eeac8b1bacf3a5b51d01946936d03f5377fe86255d4e5a4ae628fd0cd553386355ad362c57f13b4635064400f3e8e05b9d + languageName: node + linkType: hard + "ua-parser-js@npm:^0.7.30": version: 0.7.33 resolution: "ua-parser-js@npm:0.7.33" From a3383f007974711f0e95d4e0779bfdfdbbdeeebc Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Sat, 28 Jan 2023 01:11:07 -0500 Subject: [PATCH 02/14] 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" From 4ce998cf8e785edb9b26891f91d53a75fe3ac282 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Thu, 2 Feb 2023 16:53:18 -0500 Subject: [PATCH 03/14] feat: Add demos page Signed-off-by: Carlos Esteban Lopez --- .../src/pages/demos/demos.module.scss | 28 +++ microsite-next/src/pages/demos/demos.tsx | 213 ++++++++++++++++++ microsite-next/src/pages/demos/index.tsx | 3 + 3 files changed, 244 insertions(+) create mode 100644 microsite-next/src/pages/demos/demos.module.scss create mode 100644 microsite-next/src/pages/demos/demos.tsx create mode 100644 microsite-next/src/pages/demos/index.tsx diff --git a/microsite-next/src/pages/demos/demos.module.scss b/microsite-next/src/pages/demos/demos.module.scss new file mode 100644 index 0000000000..0a567c45a7 --- /dev/null +++ b/microsite-next/src/pages/demos/demos.module.scss @@ -0,0 +1,28 @@ +.communityPage { + // --ifm-spacing-horizontal: 2rem; + + font-size: 1.25rem; + + h1 { + font-size: 54px; + line-height: 56px; + word-break: break-word; + } +} + +.banner { + p { + flex: 1; + text-align: justify; + } + + iframe { + width: 100%; + height: 100%; + min-height: 500px; + } +} + +.bannerGradient { + background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); +} diff --git a/microsite-next/src/pages/demos/demos.tsx b/microsite-next/src/pages/demos/demos.tsx new file mode 100644 index 0000000000..4c035dd130 --- /dev/null +++ b/microsite-next/src/pages/demos/demos.tsx @@ -0,0 +1,213 @@ +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import { clsx } from 'clsx'; +import React from 'react'; + +import demosStyles from './demos.module.scss'; + +interface IDemoItem { + title: string; + content: React.ReactNode; + actionItemLink?: string; + media: { + type: 'image' | 'video'; + link: string; + }; +} + +export function Demos() { + const { siteConfig } = useDocusaurusContext(); + + //#region Collection Data + const demoItems: IDemoItem[] = [ + { + title: 'See us in action', + content: ( + <> +

    + Watch the videos below to get an introduction to Backstage and to + see how we use different plugins to customize{' '} + + our internal version of Backstage at Spotify + +

    +

    + To see how other companies have already started using Backstage, + watch these presentations from{' '} + Expedia,{' '} + Zalando, and{' '} + TELUS. For + more, join our{' '} + + Community Sessions + +

    +

    + To explore the UI and basic features of Backstage firsthand, go to:{' '} + demo.backstage.io. (Tip:{' '} + click “All” to view all the example components in the software + catalog.) +

    + + ), + media: { + type: 'image', + link: `${siteConfig.baseUrl}img/demo-screen.png`, + }, + }, + { + title: 'Introduction to Backstage', + content: + 'Backstage is an open source platform for building developer portals. We’ve been using our homegrown version at Spotify for years — so it’s already packed with features. (We have over 120 internal plugins, built by 60 different teams.) In this live demo recording, Stefan Ålund, product manager for Backstage, tells the origin story of Backstage and gives you a tour of how we use it here at Spotify.', + actionItemLink: 'https://www.youtube.com/watch?v=1XtJ5FAOjPk', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/1XtJ5FAOjPk', + }, + }, + { + title: 'Control cloud costs', + content: ( + <> +

    + How do you control cloud costs while maintaining the speed and + independence of your development teams? With the{' '} + Cost Insights plugin{' '} + for Backstage, managing cloud costs becomes just another part of an + engineer’s daily development process. They get a clear view of their + spending — and can decide for themselves how they want to optimize + it. Learn more about the{' '} + + Cost Insights plugin + +

    + + ), + actionItemLink: 'https://youtu.be/YLAd5hdXR_Q', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/YLAd5hdXR_Q', + }, + }, + { + title: 'Make documentation easy', + content: ( + <> +

    + Documentation! Everyone needs it, no one wants to create it, and no + one can ever find it. Backstage follows a “docs like code” approach: + you write documentation in Markdown files right alongside your code. + This makes documentation easier to create, maintain, find — and, you + know, actually use. This demo video showcases Spotify’s internal + version of TechDocs. Learn more about{' '} + + TechDocs + + . +

    + + ), + actionItemLink: 'https://youtu.be/mOLCgdPw1iA', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/mOLCgdPw1iA', + }, + }, + { + title: 'Manage your tech health', + content: + 'Instead of manually updating a spreadsheet, what if you had a beautiful dashboard that could give you an instant, interactive picture of your entire org’s tech stack? That’s how we do it at Spotify. With our Tech Insights plugin for Backstage, anyone at Spotify can see which version of which software anyone else at Spotify is using — and a whole a lot more. From managing migrations to fighting tech entropy, Backstage makes managing our tech health actually kind of pleasant.', + actionItemLink: + 'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/K3xz6VAbgH8', + }, + }, + { + title: 'Create a microservice', + content: + 'You’re a Spotify engineer about to build a new microservice (or any component) using Spring Boot. Where do you start? Search for a quick start guide online? Create an empty repo on GitHub? Copy and paste an old project? Nope. Just go to Backstage, and you’ll be up and running in two minutes — with a “Hello World” app, CI, and documentation all automatically set up and configured in a standardized way.', + actionItemLink: 'https://www.youtube.com/watch?v=U1iwe3L5pzc', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/U1iwe3L5pzc', + }, + }, + { + title: 'Search all your services', + content: + 'All of Spotify’s services are automatically indexed in Backstage. So our engineers can stop playing detective — no more spamming Slack channels asking if anyone knows who owns a particular service and where you can find its API, only to discover that the owner went on sabbatical three months ago and you have to hunt them down on a mountain in Tibet where they’re on a 12-day silent meditation retreat. At Spotify, anyone can always find anyone else’s service, inspect its APIs, and contact its current owner — all with one search.', + actionItemLink: 'https://www.youtube.com/watch?v=vcDL9tOv7Eo', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/vcDL9tOv7Eo', + }, + }, + { + title: 'Manage data pipelines', + content: + 'We manage a lot of data pipelines (also known as workflows) here at Spotify. So, of course, we made a great workflows plugin for our version of Backstage. All our workflow tools — including a scheduler, log inspector, data lineage graph, and configurable alerts — are integrated into one simple interface.', + actionItemLink: 'https://www.youtube.com/watch?v=rH46MLNZIPM', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/rH46MLNZIPM', + }, + }, + ]; + //#endregion + + return ( + +
    + {demoItems.map((demoItem, index) => ( +
    +
    +
    +
    +

    + {demoItem.title} +

    + + {React.isValidElement(demoItem.content) ? ( + demoItem.content + ) : ( +

    {demoItem.content}

    + )} + + {demoItem.actionItemLink && ( + + WATCH NOW + + )} +
    + +
    + {demoItem.media.type === 'image' ? ( + {demoItem.title} + ) : ( + + )} +
    +
    +
    +
    + ))} +
    +     + ); +} diff --git a/microsite-next/src/pages/demos/index.tsx b/microsite-next/src/pages/demos/index.tsx new file mode 100644 index 0000000000..07330b7607 --- /dev/null +++ b/microsite-next/src/pages/demos/index.tsx @@ -0,0 +1,3 @@ +import { Demos } from './demos'; + +export default Demos; From 69c4fe79abe5ca9b318ab6abcbb3ef5ea2652a0c Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Thu, 2 Feb 2023 18:12:26 -0500 Subject: [PATCH 04/14] fix: Update deps & fix named page files to ignore by router Signed-off-by: Carlos Esteban Lopez --- microsite-next/package.json | 6 +- .../{community.tsx => _community.tsx} | 0 .../src/pages/community/community.module.scss | 1 + microsite-next/src/pages/community/index.tsx | 2 +- .../src/pages/demos/{demos.tsx => _demos.tsx} | 0 microsite-next/src/pages/demos/index.tsx | 2 +- .../{plugin-card.tsx => _plugin-card.tsx} | 0 .../plugins/{plugins.tsx => _plugins.tsx} | 2 +- microsite-next/src/pages/plugins/index.tsx | 2 +- microsite-next/yarn.lock | 367 ++++++++++-------- 10 files changed, 205 insertions(+), 177 deletions(-) rename microsite-next/src/pages/community/{community.tsx => _community.tsx} (100%) rename microsite-next/src/pages/demos/{demos.tsx => _demos.tsx} (100%) rename microsite-next/src/pages/plugins/{plugin-card.tsx => _plugin-card.tsx} (100%) rename microsite-next/src/pages/plugins/{plugins.tsx => _plugins.tsx} (97%) diff --git a/microsite-next/package.json b/microsite-next/package.json index 01feee18dc..861d0ff958 100644 --- a/microsite-next/package.json +++ b/microsite-next/package.json @@ -17,7 +17,7 @@ "docusaurus": "docusaurus" }, "devDependencies": { - "@docusaurus/module-type-aliases": "^2.2.0", + "@docusaurus/module-type-aliases": "2.3.0", "@spotify/prettier-config": "^14.0.0", "@tsconfig/docusaurus": "^1.0.6", "@types/webpack-env": "^1.18.0", @@ -29,8 +29,8 @@ }, "prettier": "@spotify/prettier-config", "dependencies": { - "@docusaurus/core": "2.2.0", - "@docusaurus/preset-classic": "2.2.0", + "@docusaurus/core": "2.3.0", + "@docusaurus/preset-classic": "2.3.0", "clsx": "^1.1.1", "docusaurus-plugin-sass": "^0.2.3", "react": "^17.0.2", diff --git a/microsite-next/src/pages/community/community.tsx b/microsite-next/src/pages/community/_community.tsx similarity index 100% rename from microsite-next/src/pages/community/community.tsx rename to microsite-next/src/pages/community/_community.tsx diff --git a/microsite-next/src/pages/community/community.module.scss b/microsite-next/src/pages/community/community.module.scss index 87dcdf92d1..5052b7d3b2 100644 --- a/microsite-next/src/pages/community/community.module.scss +++ b/microsite-next/src/pages/community/community.module.scss @@ -26,6 +26,7 @@ } p { + text-align: justify; flex: 1; } } diff --git a/microsite-next/src/pages/community/index.tsx b/microsite-next/src/pages/community/index.tsx index 5f3fd915db..474352685a 100644 --- a/microsite-next/src/pages/community/index.tsx +++ b/microsite-next/src/pages/community/index.tsx @@ -1,3 +1,3 @@ -import { Community } from './community'; +import { Community } from './_community'; export default Community; diff --git a/microsite-next/src/pages/demos/demos.tsx b/microsite-next/src/pages/demos/_demos.tsx similarity index 100% rename from microsite-next/src/pages/demos/demos.tsx rename to microsite-next/src/pages/demos/_demos.tsx diff --git a/microsite-next/src/pages/demos/index.tsx b/microsite-next/src/pages/demos/index.tsx index 07330b7607..db9298c0c6 100644 --- a/microsite-next/src/pages/demos/index.tsx +++ b/microsite-next/src/pages/demos/index.tsx @@ -1,3 +1,3 @@ -import { Demos } from './demos'; +import { Demos } from './_demos'; export default Demos; diff --git a/microsite-next/src/pages/plugins/plugin-card.tsx b/microsite-next/src/pages/plugins/_plugin-card.tsx similarity index 100% rename from microsite-next/src/pages/plugins/plugin-card.tsx rename to microsite-next/src/pages/plugins/_plugin-card.tsx diff --git a/microsite-next/src/pages/plugins/plugins.tsx b/microsite-next/src/pages/plugins/_plugins.tsx similarity index 97% rename from microsite-next/src/pages/plugins/plugins.tsx rename to microsite-next/src/pages/plugins/_plugins.tsx index c904b57382..2e165ba60b 100644 --- a/microsite-next/src/pages/plugins/plugins.tsx +++ b/microsite-next/src/pages/plugins/_plugins.tsx @@ -4,7 +4,7 @@ import Layout from '@theme/Layout'; import clsx from 'clsx'; import React from 'react'; -import { IPluginData, PluginCard } from './plugin-card'; +import { IPluginData, PluginCard } from './_plugin-card'; import pluginsStyles from './plugins.module.scss'; //#region Plugin data import diff --git a/microsite-next/src/pages/plugins/index.tsx b/microsite-next/src/pages/plugins/index.tsx index 9aec0c2586..d95494d73d 100644 --- a/microsite-next/src/pages/plugins/index.tsx +++ b/microsite-next/src/pages/plugins/index.tsx @@ -1,3 +1,3 @@ -import { Plugins } from './plugins'; +import { Plugins } from './_plugins'; export default Plugins; diff --git a/microsite-next/yarn.lock b/microsite-next/yarn.lock index 8dc3fce883..7c627edcb4 100644 --- a/microsite-next/yarn.lock +++ b/microsite-next/yarn.lock @@ -1660,9 +1660,9 @@ __metadata: languageName: node linkType: hard -"@docusaurus/core@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/core@npm:2.2.0" +"@docusaurus/core@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/core@npm:2.3.0" dependencies: "@babel/core": ^7.18.6 "@babel/generator": ^7.18.7 @@ -1674,13 +1674,13 @@ __metadata: "@babel/runtime": ^7.18.6 "@babel/runtime-corejs3": ^7.18.6 "@babel/traverse": ^7.18.8 - "@docusaurus/cssnano-preset": 2.2.0 - "@docusaurus/logger": 2.2.0 - "@docusaurus/mdx-loader": 2.2.0 + "@docusaurus/cssnano-preset": 2.3.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/mdx-loader": 2.3.0 "@docusaurus/react-loadable": 5.5.2 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-common": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-common": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 "@slorber/static-site-generator-webpack-plugin": ^4.0.7 "@svgr/webpack": ^6.2.1 autoprefixer: ^10.4.7 @@ -1740,40 +1740,40 @@ __metadata: react-dom: ^16.8.4 || ^17.0.0 bin: docusaurus: bin/docusaurus.mjs - checksum: ff47e6cf85b0f7dc0a9e5b9b0d26e33a6f7385f067566ff4f9b026d044839e4dfb4c3bc9476cfab7a7e95a0065478a534cda403dac3bb7bac9987406f1978a11 + checksum: 59954cd761e1cf55c951014a5bb960498b619a6a65fa82c853cc55317e8d27385f0be410b76381221dca136ab0d0030dcbaedca173f38f8495fefbac3e5235d4 languageName: node linkType: hard -"@docusaurus/cssnano-preset@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/cssnano-preset@npm:2.2.0" +"@docusaurus/cssnano-preset@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/cssnano-preset@npm:2.3.0" dependencies: cssnano-preset-advanced: ^5.3.8 postcss: ^8.4.14 postcss-sort-media-queries: ^4.2.1 tslib: ^2.4.0 - checksum: eff9707414867bf844ef5d84bde1c843593b9b7f542dd1a0a7acc88798b0c5ddb721124229912c234bd88b93cb18d8d69c6115cbf706c2a790497f7d9dd23757 + checksum: ec51299236c1fdad1ce7f761eb85076ebddefbbc21bba9596a226a6e830060e0905fcc072a5dad4e1f668956329b7296e3b1b4468956d29cd607190d7dd5531b languageName: node linkType: hard -"@docusaurus/logger@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/logger@npm:2.2.0" +"@docusaurus/logger@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/logger@npm:2.3.0" dependencies: chalk: ^4.1.2 tslib: ^2.4.0 - checksum: b3ce6e18721a34793a892221485c941d5f7112ae96d569f7918d12c1f50bde9c99bc4195f4d225e874b2bd5800a35413bfeaf78b63c6fbae5f3015d44d118eee + checksum: bf668d380e35ab795c0c28c4891794519093d13ae00221fe43981be1863fdada1f2de1c46095a9c949c15c545d1ad007d1714ee8a3862042c8f75785fded6e1a languageName: node linkType: hard -"@docusaurus/mdx-loader@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/mdx-loader@npm:2.2.0" +"@docusaurus/mdx-loader@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/mdx-loader@npm:2.3.0" dependencies: "@babel/parser": ^7.18.8 "@babel/traverse": ^7.18.8 - "@docusaurus/logger": 2.2.0 - "@docusaurus/utils": 2.2.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/utils": 2.3.0 "@mdx-js/mdx": ^1.6.22 escape-html: ^1.0.3 file-loader: ^6.2.0 @@ -1790,16 +1790,16 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: fee586498f43c46581062e681424c4637e75d505d813d8bf25f5315c912560f6600cd925bc5b07a93d5d5966741439578e7e72f30030b4c58a5cfdf72e0d8928 + checksum: e07be7155941ca9e3e07f996a0364e12bd5b9793b804bf87121341a491420047e88f7c010bde5ee71e65bed47b4febda242b601773f74bcafc116dd09ec8f5b5 languageName: node linkType: hard -"@docusaurus/module-type-aliases@npm:2.2.0, @docusaurus/module-type-aliases@npm:^2.2.0": - version: 2.2.0 - resolution: "@docusaurus/module-type-aliases@npm:2.2.0" +"@docusaurus/module-type-aliases@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/module-type-aliases@npm:2.3.0" dependencies: "@docusaurus/react-loadable": 5.5.2 - "@docusaurus/types": 2.2.0 + "@docusaurus/types": 2.3.0 "@types/history": ^4.7.11 "@types/react": "*" "@types/react-router-config": "*" @@ -1809,21 +1809,21 @@ __metadata: peerDependencies: react: "*" react-dom: "*" - checksum: ebcb9dff2f88b5962cd34aaa78b1a48531da4776229ef507665e3f053cccb185aadcc16c3703f21031e14ccb6c8312662a6eec1a2a06bc0a423221ad200e1e9e + checksum: 96d9dc39d90bbec155a55403272a9c3be2603fd556c1e4da6db161e3841de671e9e219b1de153f072ab09a440f523a628c4e382ff527acd527780e7843aebe0d languageName: node linkType: hard -"@docusaurus/plugin-content-blog@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-content-blog@npm:2.2.0" +"@docusaurus/plugin-content-blog@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-content-blog@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/logger": 2.2.0 - "@docusaurus/mdx-loader": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-common": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/mdx-loader": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-common": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 cheerio: ^1.0.0-rc.12 feed: ^4.2.2 fs-extra: ^10.1.0 @@ -1836,21 +1836,21 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 6d51e3b17b6fdeb4e04ddebe4d4ba8c7cc830bdc066c2b7898e4dee185e408f0d28ea873d18b5ee4406a568a9b05f70d17c986a9ed16b16b1450d34ca190fd06 + checksum: e5b89196ddec47f7c282b9f5fba1d1caada0c6d44776e2f55ee5b13b440661f586bef18553d49e3b44a417982e4c799d3e18e10f60d60e90a0b8c90b8b30232a languageName: node linkType: hard -"@docusaurus/plugin-content-docs@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-content-docs@npm:2.2.0" +"@docusaurus/plugin-content-docs@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-content-docs@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/logger": 2.2.0 - "@docusaurus/mdx-loader": 2.2.0 - "@docusaurus/module-type-aliases": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/mdx-loader": 2.3.0 + "@docusaurus/module-type-aliases": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 "@types/react-router-config": ^5.0.6 combine-promises: ^1.1.0 fs-extra: ^10.1.0 @@ -1863,116 +1863,132 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 3a262b49dd6f9d59f4e10dd25185bb4280dbf77b62e28a1dd658d5db0861ae8c82dd025f24212f0d8fec0a46a37f6ef0f2cde25ac736d445247e8727177da660 + checksum: a18bd0c7e089239819938675fd3c3f5a7447cfeae6f27dac165a34558d4b39cad8a4934736228ecf4d7dde6f28fe4e1c5ed97ba9f5cba3251f5eb4781517f413 languageName: node linkType: hard -"@docusaurus/plugin-content-pages@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-content-pages@npm:2.2.0" +"@docusaurus/plugin-content-pages@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-content-pages@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/mdx-loader": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/mdx-loader": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 fs-extra: ^10.1.0 tslib: ^2.4.0 webpack: ^5.73.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 1e22fb8deb9b8f612ebe1ea6f8b1ce76acfc6eb8cbc0d5fc9b99b99d64e2f356d0fb136247e9f72cd84b2788eaf953a640d23ff7e2a5d650de6ec06468181a94 + checksum: 3ff7090045929a64b87da4e5e5a57cf725e552b03569d2a0086cf79849316393948e239d58f4bea758d131224b165ceb96ab1e908e357e6e256b5e499f0d4ad6 languageName: node linkType: hard -"@docusaurus/plugin-debug@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-debug@npm:2.2.0" +"@docusaurus/plugin-debug@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-debug@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils": 2.3.0 fs-extra: ^10.1.0 react-json-view: ^1.21.3 tslib: ^2.4.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: edf2a416b790591c66ffa8ca1fd4ed15ab2d2dc15cd67c5253714502a6828739a7a47996c3664731c6b24da1da5862ddfef60defb84bd3b8273313267db0cb54 + checksum: 770cd5749730ebb3f8633f7c07b0e5248ee24c175dcb6bfc99717253fc6e16ac75d720e373a4d98ade51ca47ec69543cd7159f215961f64d41f95120efe06c76 languageName: node linkType: hard -"@docusaurus/plugin-google-analytics@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-google-analytics@npm:2.2.0" +"@docusaurus/plugin-google-analytics@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-google-analytics@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 tslib: ^2.4.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 44ad3a6c1b661516cb87553103565af64a6f145d823b16882d5c7d23b99e091b7c4ba8323c5f6fe756e70fbb0f9f31d56c74512dc17da6d3c16dfabd17d719ac + checksum: 2de84efb8998c36315d856ec1c7fe40af9265d078642f2984d280d9e698af45922dcc205039fbaeb30f45802d788e230fe34cd4d292d57d95f99c006b92f2e25 languageName: node linkType: hard -"@docusaurus/plugin-google-gtag@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-google-gtag@npm:2.2.0" +"@docusaurus/plugin-google-gtag@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-google-gtag@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 tslib: ^2.4.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 4e7d6fcc3f30f1d54933fdeb59d3065989596e91940304965635867808d89c7b864a394f5fab2bcde98037539bf6840efc692e856fb7a4ae32ce8b5f8a4e191a + checksum: 8d1c192163ed902498ed8ff5fef668a8ebd8fd63b3da691295a875ef96eb98e2e9b0967986dff2ea454f2094479fec2e4876d2f66c643a174df26204e4aab2a2 languageName: node linkType: hard -"@docusaurus/plugin-sitemap@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/plugin-sitemap@npm:2.2.0" +"@docusaurus/plugin-google-tag-manager@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-google-tag-manager@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/logger": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-common": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 + tslib: ^2.4.0 + peerDependencies: + react: ^16.8.4 || ^17.0.0 + react-dom: ^16.8.4 || ^17.0.0 + checksum: dd9830fd4f3ee5f4ab1a8a26a055b7551084e49dd33046eb62950fa74a30d1c6371cacb10f42753ba0b32b025bdcb34abf6877dd7b7fe42e9ab86f3539634483 + languageName: node + linkType: hard + +"@docusaurus/plugin-sitemap@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/plugin-sitemap@npm:2.3.0" + dependencies: + "@docusaurus/core": 2.3.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-common": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 fs-extra: ^10.1.0 sitemap: ^7.1.1 tslib: ^2.4.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 8ae78093d17a96fc2c6f3829d425731dae3af19b0eec29c61a6465342462a8c24da4c5a10f1a1b1813630d2408f2e11fa17af652b74b4e8fda975d4a00bf1389 + checksum: f2ace8f5a121aa616d411dbe0211ecba5ca57ad1fceb4529f8418c4c5259cfe62a5a511332289502242e6ff04116d27ddf5a8826d16324cc1ccaacfca29b49b1 languageName: node linkType: hard -"@docusaurus/preset-classic@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/preset-classic@npm:2.2.0" +"@docusaurus/preset-classic@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/preset-classic@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/plugin-content-blog": 2.2.0 - "@docusaurus/plugin-content-docs": 2.2.0 - "@docusaurus/plugin-content-pages": 2.2.0 - "@docusaurus/plugin-debug": 2.2.0 - "@docusaurus/plugin-google-analytics": 2.2.0 - "@docusaurus/plugin-google-gtag": 2.2.0 - "@docusaurus/plugin-sitemap": 2.2.0 - "@docusaurus/theme-classic": 2.2.0 - "@docusaurus/theme-common": 2.2.0 - "@docusaurus/theme-search-algolia": 2.2.0 - "@docusaurus/types": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/plugin-content-blog": 2.3.0 + "@docusaurus/plugin-content-docs": 2.3.0 + "@docusaurus/plugin-content-pages": 2.3.0 + "@docusaurus/plugin-debug": 2.3.0 + "@docusaurus/plugin-google-analytics": 2.3.0 + "@docusaurus/plugin-google-gtag": 2.3.0 + "@docusaurus/plugin-google-tag-manager": 2.3.0 + "@docusaurus/plugin-sitemap": 2.3.0 + "@docusaurus/theme-classic": 2.3.0 + "@docusaurus/theme-common": 2.3.0 + "@docusaurus/theme-search-algolia": 2.3.0 + "@docusaurus/types": 2.3.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 70214f17766097a2e9c4b21a343bf323f7ed3d2e23c6169577cd14333a074fa15aabff6532c1774ec17c54f50c1616dbd8625c41a115d2fe799b2b7fa830c2c9 + checksum: 0806924793094a4446b20d63fdc910c5ae82b2353905502f886c2a02981a4e42378b0251e38a60caf496e6e6034014096829eb51401685f747934eb83f15dcbb languageName: node linkType: hard @@ -1988,22 +2004,22 @@ __metadata: languageName: node linkType: hard -"@docusaurus/theme-classic@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/theme-classic@npm:2.2.0" +"@docusaurus/theme-classic@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/theme-classic@npm:2.3.0" dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/mdx-loader": 2.2.0 - "@docusaurus/module-type-aliases": 2.2.0 - "@docusaurus/plugin-content-blog": 2.2.0 - "@docusaurus/plugin-content-docs": 2.2.0 - "@docusaurus/plugin-content-pages": 2.2.0 - "@docusaurus/theme-common": 2.2.0 - "@docusaurus/theme-translations": 2.2.0 - "@docusaurus/types": 2.2.0 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-common": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/mdx-loader": 2.3.0 + "@docusaurus/module-type-aliases": 2.3.0 + "@docusaurus/plugin-content-blog": 2.3.0 + "@docusaurus/plugin-content-docs": 2.3.0 + "@docusaurus/plugin-content-pages": 2.3.0 + "@docusaurus/theme-common": 2.3.0 + "@docusaurus/theme-translations": 2.3.0 + "@docusaurus/types": 2.3.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-common": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 "@mdx-js/react": ^1.6.22 clsx: ^1.2.1 copy-text-to-clipboard: ^3.0.1 @@ -2020,20 +2036,20 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: ccfb0bef12178d0fbe3329a3238cd6bf7223ee03d890594676c06490eabfd59908bb1872c1a007f605db4edf402bc49cdf14aa7116550e95844d5135a92c2969 + checksum: a6206f34161aa388e36dde2f8eb9291cec34dba890a40cd7226040efd303aa322110237464016ce407a65b8a2bff755470ff6c5250b20e3a27645d8860246a65 languageName: node linkType: hard -"@docusaurus/theme-common@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/theme-common@npm:2.2.0" +"@docusaurus/theme-common@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/theme-common@npm:2.3.0" dependencies: - "@docusaurus/mdx-loader": 2.2.0 - "@docusaurus/module-type-aliases": 2.2.0 - "@docusaurus/plugin-content-blog": 2.2.0 - "@docusaurus/plugin-content-docs": 2.2.0 - "@docusaurus/plugin-content-pages": 2.2.0 - "@docusaurus/utils": 2.2.0 + "@docusaurus/mdx-loader": 2.3.0 + "@docusaurus/module-type-aliases": 2.3.0 + "@docusaurus/plugin-content-blog": 2.3.0 + "@docusaurus/plugin-content-docs": 2.3.0 + "@docusaurus/plugin-content-pages": 2.3.0 + "@docusaurus/utils": 2.3.0 "@types/history": ^4.7.11 "@types/react": "*" "@types/react-router-config": "*" @@ -2041,26 +2057,27 @@ __metadata: parse-numeric-range: ^1.3.0 prism-react-renderer: ^1.3.5 tslib: ^2.4.0 + use-sync-external-store: ^1.2.0 utility-types: ^3.10.0 peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 23cbba8e7e24494c6d106ce3d0b90ef461580bfacef9f27dfbc4f0b33fcb349394faf2bedf0a44db8c455535e50e828e82270c8f159c3d8d60f0e0980170be4e + checksum: e38683aa8fd74599b9ccb6032af7a0ccb76144f5b3ccc4b93d423be263ca5ffb1ace42c22ce789c11ab45ae076fdf95bd36287b551edbf51d55c2e848e8a6189 languageName: node linkType: hard -"@docusaurus/theme-search-algolia@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/theme-search-algolia@npm:2.2.0" +"@docusaurus/theme-search-algolia@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/theme-search-algolia@npm:2.3.0" dependencies: "@docsearch/react": ^3.1.1 - "@docusaurus/core": 2.2.0 - "@docusaurus/logger": 2.2.0 - "@docusaurus/plugin-content-docs": 2.2.0 - "@docusaurus/theme-common": 2.2.0 - "@docusaurus/theme-translations": 2.2.0 - "@docusaurus/utils": 2.2.0 - "@docusaurus/utils-validation": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/plugin-content-docs": 2.3.0 + "@docusaurus/theme-common": 2.3.0 + "@docusaurus/theme-translations": 2.3.0 + "@docusaurus/utils": 2.3.0 + "@docusaurus/utils-validation": 2.3.0 algoliasearch: ^4.13.1 algoliasearch-helper: ^3.10.0 clsx: ^1.2.1 @@ -2072,23 +2089,23 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 42b6cb0322d6c772b7796ea6e9693d596554ebd087792ad71238cebedf3b632bfa8005138d521bce1ff118f49aea7d72e5dc97a03f236b4728a2dc7576870071 + checksum: 97d7314ae6c612eda1b8aa24b6d812c66a8da1030f7eea8d04c9ab8caba62bb66ec95dfcbb613f0f522fa6130e51cd41fcc7eca1c0fe50e533ccbf5aa9e2047d languageName: node linkType: hard -"@docusaurus/theme-translations@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/theme-translations@npm:2.2.0" +"@docusaurus/theme-translations@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/theme-translations@npm:2.3.0" dependencies: fs-extra: ^10.1.0 tslib: ^2.4.0 - checksum: 7fe7d104fd094f2af2321986a86edef1eb8ab25415ea94ab1b242d08aec7627b3d5790001631621cd80c57c710714308aad5adfbf570cb74e0f01fda93b610be + checksum: df11b8a0b569a5adaec505d52cccffef1d903404232c776354035a387b56fcc7aa7d742aa0df622ccc052b61443ba134b6dcc6d3a4076aced4cd253d6cf957f6 languageName: node linkType: hard -"@docusaurus/types@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/types@npm:2.2.0" +"@docusaurus/types@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/types@npm:2.3.0" dependencies: "@types/history": ^4.7.11 "@types/react": "*" @@ -2101,13 +2118,13 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 - checksum: 5166ca49bb9333e4d733e4bf8d49d65e11ea6b39e4d8eecc24e1de24d61d2459c52dd8bd27362b66b03e41df96acf1a449145211b3bf0c5a59a987c77102e8f1 + checksum: 563749b9473e35848c3e462c7e401d292dbf3f36e3ab72b5a03aebe204f1147b666953fc8e176c2024ea9c2b3a8aa7fd33f500df576afff456dea003b742c52b languageName: node linkType: hard -"@docusaurus/utils-common@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/utils-common@npm:2.2.0" +"@docusaurus/utils-common@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/utils-common@npm:2.3.0" dependencies: tslib: ^2.4.0 peerDependencies: @@ -2115,29 +2132,30 @@ __metadata: peerDependenciesMeta: "@docusaurus/types": optional: true - checksum: 05d23a2f82a1bc119e3ad6b37481c9bc984f62efd3a79046567216784b78fb20fe7452252d610bb4c063e4ded8a7ab7efa1dc9f9f228357c20b9f4729c7a0576 + checksum: 67711f2a53cd9e91768645015ab17e9c3b46d850958a4dcab6e0fb939b4d90bb3bb0323f8c70446246af6aacad98c1044d33f5f74dcc8e8bc9871ae62ea33a7b languageName: node linkType: hard -"@docusaurus/utils-validation@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/utils-validation@npm:2.2.0" +"@docusaurus/utils-validation@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/utils-validation@npm:2.3.0" dependencies: - "@docusaurus/logger": 2.2.0 - "@docusaurus/utils": 2.2.0 + "@docusaurus/logger": 2.3.0 + "@docusaurus/utils": 2.3.0 joi: ^17.6.0 js-yaml: ^4.1.0 tslib: ^2.4.0 - checksum: a30e47cf84628950176cc02a121f31b200b46cdccf02e80d76f24b51b9d33fccee35c43047f507b8fb48deb38f863580ecbcdc1393718c6f3a14fcd40d5d1ab6 + checksum: 0275530f4c49a1d0269422dfbe8f7abcda94c83fb3c20d1be36f9259b16c2170f8090f30077091b02e1059b2c683726d40b19235f07250f245719159d3ecd98c languageName: node linkType: hard -"@docusaurus/utils@npm:2.2.0": - version: 2.2.0 - resolution: "@docusaurus/utils@npm:2.2.0" +"@docusaurus/utils@npm:2.3.0": + version: 2.3.0 + resolution: "@docusaurus/utils@npm:2.3.0" dependencies: - "@docusaurus/logger": 2.2.0 + "@docusaurus/logger": 2.3.0 "@svgr/webpack": ^6.2.1 + escape-string-regexp: ^4.0.0 file-loader: ^6.2.0 fs-extra: ^10.1.0 github-slugger: ^1.4.0 @@ -2156,7 +2174,7 @@ __metadata: peerDependenciesMeta: "@docusaurus/types": optional: true - checksum: d027a6d2417e043ac463402aadca22f1101f942daaf02330d9bb4743dcbe3bd2fd46d27dedf316fcf2b6698713fede974ba59eb5d4bc92c8959e23bc25e7a03a + checksum: 6874bd327af99bc97bdea3fca6ce71f917b6a89fa18bbd81a2d955a33ccf1746f70960f27fc7fca557bc9e1a671a6f369e7aade28f7908727dc58e84f9ac5851 languageName: node linkType: hard @@ -3579,9 +3597,9 @@ __metadata: version: 0.0.0-use.local resolution: "backstage-microsite@workspace:." dependencies: - "@docusaurus/core": 2.2.0 - "@docusaurus/module-type-aliases": ^2.2.0 - "@docusaurus/preset-classic": 2.2.0 + "@docusaurus/core": 2.3.0 + "@docusaurus/module-type-aliases": 2.3.0 + "@docusaurus/preset-classic": 2.3.0 "@spotify/prettier-config": ^14.0.0 "@tsconfig/docusaurus": ^1.0.6 "@types/webpack-env": ^1.18.0 @@ -10496,6 +10514,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:^1.2.0": + version: 1.2.0 + resolution: "use-sync-external-store@npm:1.2.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" From c0e0bcc137b3293a48b7f57e18c500536893169b Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Fri, 3 Feb 2023 22:02:42 -0500 Subject: [PATCH 05/14] feat: Add home page with first banner Signed-off-by: Carlos Esteban Lopez --- microsite-next/src/pages/home/_home.tsx | 82 +++++++++++++++++++ .../src/pages/home/home.module.scss | 44 ++++++++++ microsite-next/src/pages/index.tsx | 12 +-- 3 files changed, 128 insertions(+), 10 deletions(-) create mode 100644 microsite-next/src/pages/home/_home.tsx create mode 100644 microsite-next/src/pages/home/home.module.scss diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx new file mode 100644 index 0000000000..f7ad7f6bf9 --- /dev/null +++ b/microsite-next/src/pages/home/_home.tsx @@ -0,0 +1,82 @@ +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import { clsx } from 'clsx'; +import React from 'react'; + +import homeStyles from './home.module.scss'; + +export function Home() { + const { siteConfig } = useDocusaurusContext(); + + return ( + +
    +
    +
    +
    +
    +
    + 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} + + Newsletter + + ! +
    + +
    X
    +
    +
    +
    + +
    +
    +

    An open platform for building developer portals

    + +

    + Powered by a centralized software catalog, Backstage restores + order to your infrastructure and enables your product teams to + ship high-quality code quickly — without compromising autonomy. +

    + +
    + + GITHUB + + + OFFICE HOURS + +
    +
    + +
    + + +
    +
    +
    +
    +     + ); +} diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss new file mode 100644 index 0000000000..ae804e344d --- /dev/null +++ b/microsite-next/src/pages/home/home.module.scss @@ -0,0 +1,44 @@ +.homePage { + font-size: 1.25rem; + + h1 { + font-size: 54px; + line-height: 56px; + word-break: break-word; + } + + :global(.buttonsContainer) { + gap: 1rem; + display: grid; + grid-template-columns: repeat(2, auto); + } +} + +.newsletterBanner { + --ifm-link-hover-color: var(--ifm-color-info); + + flex-direction: row; + color: var(--ifm-button-color); + background-color: var(--ifm-color-primary); + + :global(.bannerContent) { + flex: 1; + } +} + +.openPlatformBanner { + :global(.svgContainer) { + position: relative; + + :global(img.laptopSvg) { + width: 100%; + } + + :global(img.laptopScreenGif) { + position: absolute; + top: 3%; + left: 17%; + width: 70%; + } + } +} diff --git a/microsite-next/src/pages/index.tsx b/microsite-next/src/pages/index.tsx index 3bbf03b0e2..853a4b2c82 100644 --- a/microsite-next/src/pages/index.tsx +++ b/microsite-next/src/pages/index.tsx @@ -1,11 +1,3 @@ -import Layout from '@theme/Layout'; -import React from 'react'; +import { Home } from './home/_home'; -function Index() { - return ( - -

    HELLO

    -     - ); -} -export default Index; +export default Home; From 2c21d5f6c57562ba6a6b456826a76da782ac6803 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Mon, 6 Feb 2023 22:01:49 -0500 Subject: [PATCH 06/14] feat: Extract reusable block & add catalog section to home page Signed-off-by: Carlos Esteban Lopez --- .../banner-section-columns.module.scss | 43 +++++ .../banner-section/banner-section-columns.tsx | 34 ++++ .../banner-section/banner-section.module.scss | 29 ++++ .../banner-section/banner-section.tsx | 27 ++++ .../content-block/content-block.module.scss | 22 +++ .../content-block/content-block.tsx | 55 +++++++ microsite-next/src/pages/home/_home.tsx | 152 ++++++++++++++---- .../src/pages/home/home.module.scss | 44 +++-- 8 files changed, 360 insertions(+), 46 deletions(-) create mode 100644 microsite-next/src/components/banner-section/banner-section-columns.module.scss create mode 100644 microsite-next/src/components/banner-section/banner-section-columns.tsx create mode 100644 microsite-next/src/components/banner-section/banner-section.module.scss create mode 100644 microsite-next/src/components/banner-section/banner-section.tsx create mode 100644 microsite-next/src/components/content-block/content-block.module.scss create mode 100644 microsite-next/src/components/content-block/content-block.tsx diff --git a/microsite-next/src/components/banner-section/banner-section-columns.module.scss b/microsite-next/src/components/banner-section/banner-section-columns.module.scss new file mode 100644 index 0000000000..32cc53eb5e --- /dev/null +++ b/microsite-next/src/components/banner-section/banner-section-columns.module.scss @@ -0,0 +1,43 @@ +.bannerSection { + display: block; + + &:global(.greyBackground) { + background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); + } + + &:global(.greenGradientBackground) { + background: linear-gradient( + 178.64deg, + hsla(0, 0%, 100%, 0) 57.61%, + hsla(0, 0%, 100%, 0.17) 127.71% + ), + linear-gradient( + 144.35deg, + rgba(98, 197, 179, 0) 56.68%, + rgba(98, 197, 179, 0.59) 109.25% + ), + linear-gradient( + 192.29deg, + rgba(155, 240, 225, 0) 54.17%, + rgba(155, 240, 225, 0.67) 137.34% + ); + } + + &:global(.greenBottomGradientBackground) { + background: linear-gradient( + 178.64deg, + hsla(0, 0%, 100%, 0) 57.61%, + hsla(0, 0%, 100%, 0.17) 127.71% + ), + linear-gradient( + 144.35deg, + rgba(98, 197, 179, 0) 56.68%, + rgba(98, 197, 179, 0.59) 109.25% + ), + linear-gradient( + 192.29deg, + rgba(155, 240, 225, 0) 54.17%, + rgba(155, 240, 225, 0.67) 137.34% + ); + } +} diff --git a/microsite-next/src/components/banner-section/banner-section-columns.tsx b/microsite-next/src/components/banner-section/banner-section-columns.tsx new file mode 100644 index 0000000000..db33b52961 --- /dev/null +++ b/microsite-next/src/components/banner-section/banner-section-columns.tsx @@ -0,0 +1,34 @@ +import clsx from 'clsx'; +import React, { PropsWithChildren, ReactNode } from 'react'; + +import bannerColumnStyles from './banner-section-columns.module.scss'; + +export type IBannerSectionColumnsProps = PropsWithChildren<{ + header?: ReactNode; + // children: ReactNode | ReactNode[]; +}>; + +export const BannerSectionColumns = ({ + header, + children, +}: IBannerSectionColumnsProps) => ( + <> + {header && ( +
    +
    {header}
    +
    + )} + + {Array.isArray(children) ? ( +
    + {children.map((child, index) => ( +
    + {child} +
    + ))} +
    + ) : ( + children + )} + +); diff --git a/microsite-next/src/components/banner-section/banner-section.module.scss b/microsite-next/src/components/banner-section/banner-section.module.scss new file mode 100644 index 0000000000..478790877c --- /dev/null +++ b/microsite-next/src/components/banner-section/banner-section.module.scss @@ -0,0 +1,29 @@ +.bannerSection { + display: block; + + &:global(.greyBackground) { + background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); + } + + &:global(.greenGradientBackground) { + background: linear-gradient(70.44deg, #121212 55%, #5d817b); + } + + &:global(.greenBottomGradientBackground) { + background: linear-gradient( + 178.64deg, + hsla(0, 0%, 100%, 0) 57.61%, + hsla(0, 0%, 100%, 0.17) 127.71% + ), + linear-gradient( + 144.35deg, + rgba(98, 197, 179, 0) 56.68%, + rgba(98, 197, 179, 0.59) 109.25% + ), + linear-gradient( + 192.29deg, + rgba(155, 240, 225, 0) 54.17%, + rgba(155, 240, 225, 0.67) 137.34% + ); + } +} diff --git a/microsite-next/src/components/banner-section/banner-section.tsx b/microsite-next/src/components/banner-section/banner-section.tsx new file mode 100644 index 0000000000..d3530d7e49 --- /dev/null +++ b/microsite-next/src/components/banner-section/banner-section.tsx @@ -0,0 +1,27 @@ +import clsx from 'clsx'; +import React, { PropsWithChildren } from 'react'; + +import bannerStyles from './banner-section.module.scss'; + +export type IBannerSectionProps = PropsWithChildren<{ + greyBackground?: boolean; + greenGradientBackground?: boolean; + greenBottomGradientBackground?: boolean; +}>; + +export const BannerSection = ({ + children, + greyBackground = false, + greenGradientBackground = false, + greenBottomGradientBackground = false, +}: IBannerSectionProps) => ( +
    +
    {children}
    +
    +); diff --git a/microsite-next/src/components/content-block/content-block.module.scss b/microsite-next/src/components/content-block/content-block.module.scss new file mode 100644 index 0000000000..77f98400f7 --- /dev/null +++ b/microsite-next/src/components/content-block/content-block.module.scss @@ -0,0 +1,22 @@ +.contentBlock { + gap: 1.5rem; + display: grid; + + > *, + h1, + h2 { + margin: 0; + padding: 0; + } + + :global(.bulletLine) { + width: 50px; + margin-bottom: 0.5rem; + } + + :global(.actionButtons) { + gap: 1rem; + display: grid; + grid-template-columns: repeat(2, auto); + } +} diff --git a/microsite-next/src/components/content-block/content-block.tsx b/microsite-next/src/components/content-block/content-block.tsx new file mode 100644 index 0000000000..4c1cc6272e --- /dev/null +++ b/microsite-next/src/components/content-block/content-block.tsx @@ -0,0 +1,55 @@ +import Link from '@docusaurus/Link'; +import clsx from 'clsx'; +import React, { FC, PropsWithChildren, ReactNode } from 'react'; + +import contentBlockStyles from './content-block.module.scss'; + +export interface ContentBlockActionButtonProps { + label: string; + link: string; +} + +export type IContentBlockProps = PropsWithChildren<{ + title?: ReactNode; + className?: string; + topImgSrc?: string; + hasBulletLine?: boolean; + actionButtons?: ContentBlockActionButtonProps[]; +}>; + +export const ContentBlock = ({ + children, + title, + className, + topImgSrc, + hasBulletLine, + actionButtons, +}: IContentBlockProps) => { + return ( +
    + {topImgSrc && {topImgSrc}} + +
    + {hasBulletLine &&
    } + + {title && React.isValidElement(title) ? title :

    {title}

    } +
    + + {children &&

    {children}

    } + + {actionButtons && ( +
    + {actionButtons.map(({ link, label }, index) => ( + + {label} + + ))} +
    + )} +
    + ); +}; diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index f7ad7f6bf9..da99da6f1a 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -4,17 +4,20 @@ import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React from 'react'; +import { BannerSection } from '../../components/banner-section/banner-section'; import homeStyles from './home.module.scss'; +import { BannerSectionColumns } from '../../components/banner-section/banner-section-columns'; +import { ContentBlock } from '@site/src/components/content-block/content-block'; export function Home() { const { siteConfig } = useDocusaurusContext(); return ( -
    -
    -
    -
    +
    + + X
    -
    -
    + } + > + An open platform for building developer portals} + actionButtons={[ + { + link: 'https://github.com/backstage/backstage#getting-started', + label: 'GITHUB', + }, + { + link: 'https://info.backstage.spotify.com/office-hours', + label: 'OFFICE HOURS', + }, + ]} + > + Powered by a centralized software catalog, Backstage restores + order to your infrastructure and enables your product teams to + ship high-quality code quickly — without compromising autonomy. + -
    -
    -

    An open platform for building developer portals

    - -

    - Powered by a centralized software catalog, Backstage restores - order to your infrastructure and enables your product teams to - ship high-quality code quickly — without compromising autonomy. -

    - -
    - - GITHUB - - - OFFICE HOURS - -
    -
    - -
    +
    + + + + + + + At Spotify, we've always believed in the speed and ingenuity that + comes from having autonomous development teams. But as we learned + firsthand, the faster you grow, the more fragmented and complex + your software ecosystem becomes. And then everything slows down + again. + + + + By centralizing services and standardizing your tooling, Backstage + streamlines your development environment from end to end. Instead + of restricting autonomy, standardization frees your engineers from + infrastructure complexity. So you can return to building and + scaling, quickly and safely. + + + + + +
    +
    + Software Catalog Planet GIF + +

    Backstage Software Catalog

    + +

    Build an ecosystem, not a wilderness

    +
    + + + + + + + + Backstage makes it easy for one team to manage 10 services — and + makes it possible for your company to manage thousands of them + + + + Every team can see all the services they own and related resources + (deployments, data pipelines, pull request status, etc.) + + + + All that information can be shared with plugins inside Backstage + to enable other management features, like resource monitoring and + testing + + + + Libraries, websites, ML models — you name it, Backstage knows all + about it, including who owns it, dependencies, and more + + + + No more orphan software hiding in the dark corners of your tech + stack +
    -
    -
    + +
    ); } diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss index ae804e344d..aa442a0c7b 100644 --- a/microsite-next/src/pages/home/home.module.scss +++ b/microsite-next/src/pages/home/home.module.scss @@ -26,19 +26,41 @@ } } -.openPlatformBanner { - :global(.svgContainer) { - position: relative; +.svgContainer { + position: relative; - :global(img.laptopSvg) { - width: 100%; - } + :global(img.laptopSvg) { + width: 100%; + } - :global(img.laptopScreenGif) { - position: absolute; - top: 3%; - left: 17%; - width: 70%; + :global(img.laptopScreenGif) { + position: absolute; + top: 3%; + left: 17%; + width: 70%; + } +} + +.catalogContainer { + gap: 2rem; + display: grid; + align-items: center; + + grid-template-columns: repeat(4, 1fr); + + picture { + display: block; + + grid-row: 1/3; + grid-column: 3/-1; + } + + :global(.catalogTitle) { + grid-column: 1/3; + + img { + max-width: 190px; + max-height: 190px; } } } From ed297eead273b5860b14eaf62dd4c1b77815f1e7 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Tue, 7 Feb 2023 21:13:35 -0500 Subject: [PATCH 07/14] feat: Add all Call to Action banners in 1 go, CSS grid media query Signed-off-by: Carlos Esteban Lopez --- .../banner-section/banner-section.module.scss | 6 ++ .../banner-section/banner-section.tsx | 5 +- microsite-next/src/pages/home/_home.tsx | 83 ++++++++++++++++++- .../src/pages/home/home.module.scss | 23 +++-- 4 files changed, 105 insertions(+), 12 deletions(-) diff --git a/microsite-next/src/components/banner-section/banner-section.module.scss b/microsite-next/src/components/banner-section/banner-section.module.scss index 478790877c..2beabf9738 100644 --- a/microsite-next/src/components/banner-section/banner-section.module.scss +++ b/microsite-next/src/components/banner-section/banner-section.module.scss @@ -26,4 +26,10 @@ rgba(155, 240, 225, 0.67) 137.34% ); } + + &:global(.greenCallToActionGradientBackground) { + background: linear-gradient(87.29deg, #9bf0e1 17.71%, #36baa2 80.85%); + + color: var(--ifm-color-gray-900); + } } diff --git a/microsite-next/src/components/banner-section/banner-section.tsx b/microsite-next/src/components/banner-section/banner-section.tsx index d3530d7e49..dbab99200e 100644 --- a/microsite-next/src/components/banner-section/banner-section.tsx +++ b/microsite-next/src/components/banner-section/banner-section.tsx @@ -7,6 +7,7 @@ export type IBannerSectionProps = PropsWithChildren<{ greyBackground?: boolean; greenGradientBackground?: boolean; greenBottomGradientBackground?: boolean; + greenCallToActionGradientBackground?: boolean; }>; export const BannerSection = ({ @@ -14,14 +15,16 @@ export const BannerSection = ({ greyBackground = false, greenGradientBackground = false, greenBottomGradientBackground = false, + greenCallToActionGradientBackground = false, }: IBannerSectionProps) => (
    -
    {children}
    +
    {children}
    ); diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index da99da6f1a..a715ee93a9 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -130,10 +130,7 @@ export function Home() { makes it possible for your company to manage thousands of them - + Every team can see all the services they own and related resources (deployments, data pipelines, pull request status, etc.) @@ -158,6 +155,84 @@ export function Home() { + + +
    +

    Learn more about the software catalog

    + + + READ + +
    +     + + +
    +

    Build your own software templates

    + + + CONTRIBUTE + +
    +     + + +
    +

    Learn more about TechDocs

    + + + DOCS + +
    +     + + +
    +

    Learn more about Backstage Search

    + + + READ + +
    +     + + +
    +

    Learn more about the K8s plugin

    + + + READ + +
    +     + + +
    +

    Build a plugin

    + + + CONTRIBUTE + +
    +     ); diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss index aa442a0c7b..de15e49140 100644 --- a/microsite-next/src/pages/home/home.module.scss +++ b/microsite-next/src/pages/home/home.module.scss @@ -1,3 +1,5 @@ +$desktopUpBreakpoint: 997px; + .homePage { font-size: 1.25rem; @@ -46,21 +48,28 @@ display: grid; align-items: center; - grid-template-columns: repeat(4, 1fr); - picture { display: block; - - grid-row: 1/3; - grid-column: 3/-1; + text-align: center; } :global(.catalogTitle) { - grid-column: 1/3; - img { max-width: 190px; max-height: 190px; } } + + @media (min-width: $desktopUpBreakpoint) { + grid-template-columns: repeat(4, 1fr); + + picture { + grid-row: 1/3; + grid-column: 3/-1; + } + + :global(.catalogTitle) { + grid-column: 1/3; + } + } } From b4168778c0a5e6fdebead7d3da1a11d61bdda966 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Tue, 7 Feb 2023 22:18:37 -0500 Subject: [PATCH 08/14] feat: Add Software Templates section & _home page SCSS improvements Signed-off-by: Carlos Esteban Lopez --- microsite-next/src/pages/home/_home.tsx | 48 +++++++++++++++++++ .../src/pages/home/home.module.scss | 30 ++++++++++-- 2 files changed, 73 insertions(+), 5 deletions(-) diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index a715ee93a9..afc8381ec1 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -169,6 +169,54 @@ export function Home() { + +
    +
    + Software Templates Rocket GIF + +

    Backstage Software Templates

    + +

    Standards can set you free

    +
    + + + + + + + + Using templates, engineers can spin up a new microservice with + your organization's best practices built-in, right from the start + + + + Click a button to create a Spring Boot project with your repo + automatically configured on GitHub and your CI already running the + first build + + + + Go instead of Java? CircleCI instead of Jenkins? Serverless + instead of Kubernetes? GCP instead of AWS? Customize your recipes + with your best practices baked-in + + + + When the right way is also the easiest way, engineers get up and + running faster — and more safely + +
    +     +

    Build your own software templates

    diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss index de15e49140..1cc4ba8238 100644 --- a/microsite-next/src/pages/home/home.module.scss +++ b/microsite-next/src/pages/home/home.module.scss @@ -43,7 +43,9 @@ $desktopUpBreakpoint: 997px; } } -.catalogContainer { +// Shared container styles +.catalogContainer, +.softwareTemplatesContainer { gap: 2rem; display: grid; align-items: center; @@ -53,23 +55,41 @@ $desktopUpBreakpoint: 997px; text-align: center; } - :global(.catalogTitle) { + :global([class*='Title']), + :global([class*='title']) { img { max-width: 190px; max-height: 190px; } } +} +.catalogContainer { @media (min-width: $desktopUpBreakpoint) { grid-template-columns: repeat(4, 1fr); picture { - grid-row: 1/3; - grid-column: 3/-1; + grid-row: span 2; + grid-column: span 2; } :global(.catalogTitle) { - grid-column: 1/3; + grid-column: span 2; + } + } +} + +.softwareTemplatesContainer { + @media (min-width: $desktopUpBreakpoint) { + grid: repeat(2, auto) / repeat(4, 1fr); + + picture { + grid-row-start: 3; + grid-column: span 4; + } + + :global(.softwareTemplatesTitle) { + grid-column: span 4; } } } From cc4f67d95256f91e914f3d25c7811bbc9b234370 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 8 Feb 2023 19:14:37 -0500 Subject: [PATCH 09/14] feat: Home page sections complete Signed-off-by: Carlos Esteban Lopez --- microsite-next/src/pages/home/_home.tsx | 231 +++++++++++++++++++++++- 1 file changed, 225 insertions(+), 6 deletions(-) diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index afc8381ec1..59951646ce 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -1,13 +1,13 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { BannerSection } from '@site/src/components/banner-section/banner-section'; +import { BannerSectionColumns } from '@site/src/components/banner-section/banner-section-columns'; +import { ContentBlock } from '@site/src/components/content-block/content-block'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React from 'react'; -import { BannerSection } from '../../components/banner-section/banner-section'; import homeStyles from './home.module.scss'; -import { BannerSectionColumns } from '../../components/banner-section/banner-section-columns'; -import { ContentBlock } from '@site/src/components/content-block/content-block'; export function Home() { const { siteConfig } = useDocusaurusContext(); @@ -118,7 +118,7 @@ export function Home() { /> @@ -169,7 +169,7 @@ export function Home() {
    - +
    - + Software Templates Cards + +
    +
    + Backstage TechDocs File Copy GIF + +

    Backstage TechDocs

    + +

    Docs like code

    +
    + + + + Backstage TechDocs Markdown to HTML + + + + Whenever you use a Backstage Software Template, your project + automatically gets a TechDocs site, for free + + + + With our docs-like-code approach, engineers write their + documentation in Markdown files right alongside their code + + + + Updating code? Update your documentation while you're there — with + docs and code in the same place, it becomes a natural part of your + workstream + + + + Since all your documentation is in Backstage, finding any TechDoc + is just a search query away + +
    +     +

    Learn more about TechDocs

    @@ -243,6 +293,54 @@ export function Home() {
    + +
    +
    + Search Platform Telescope GIF + +

    Backstage Search Platform

    + +

    A search platform made just for you

    +
    + + + + Search Platform Search Bar + + + + Backstage Search more than just a box you type questions into — + it's an entire platform all by itself, which you can customize to + fit your organization's needs + + + + Bring your own search engine, create a customized search page + experience, or edit the look and feel of each search result + + + + With an extensible backend, you can search beyond the Software + Catalog and index any source you'd like — whether it's TechDocs or + Confluence and Stack Overflow + + + + New hires and seasoned employees alike can easily search your + infrastructure instead of getting lost in it + +
    +     +

    Learn more about Backstage Search

    @@ -256,6 +354,50 @@ export function Home() {
    + + +
    + Backstage Kubernetes Flag GIF + +

    Backstage Kubernetes

    + +

    Manage your services, not clusters

    +
    +
    + } + > + + Backstage features the first Kubernetes monitoring tool designed + around the needs of service owners, not cluster admins + + + + Get all your service's deployments in one, aggregated view — no + more digging through cluster logs in a CLI, no more combing + through lists of services you don't own + + + + Since Backstage uses the Kubernetes API, it's cloud agnostic — so + it works no matter which cloud provider or managed Kubernetes + service you use, and even works in multi-cloud orgs + + + + Now you don't have to switch dashboards when you move from local + testing to production, or from one cloud provider to another + + + +

    Learn more about the K8s plugin

    @@ -269,6 +411,65 @@ export function Home() {
    + +
    +
    + Plugins Building Blocks GIF + +

    + Customize Backstage with plugins +

    + +

    An app store for your infrastructure

    +
    + + + + Plugins Cards + + + + Want scalable website testing? Add the{' '} + + Lighthouse{' '} + + plugin. Wondering about recommended frameworks? Add the{' '} + + Tech Radar{' '} + + plugin. + + + + If you don't see the plugin you need, it's simple to build your + own + + + + Building internal plugins lets you tailor your version of + Backstage to be a perfect fit for your infrastructure + + + + Building open source plugins{' '} + contributes to the entire Backstage ecosystem, which benefits + everyone + +
    +     +

    Build a plugin

    @@ -281,6 +482,24 @@ export function Home() {
    + + +
    +

    + Backstage is a{' '} + + Cloud Native Computing Foundation + {' '} + incubation project +

    + + CNCF Logo +
    +
    ); From 0e22cacc48f2a8a4a4868c92e60a580fafa83f09 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Thu, 9 Feb 2023 18:29:08 -0500 Subject: [PATCH 10/14] feat: Hardcode dar theme, set up top left logo & add adopters form Signed-off-by: Carlos Esteban Lopez --- microsite-next/docusaurus.config.js | 9 ++- microsite-next/src/pages/home/_home.tsx | 71 ++++++++++++++----- .../home/_hub-spot-new-adopters-form.tsx | 52 ++++++++++++++ .../src/pages/home/home.module.scss | 4 ++ .../hub-spot-new-adopters-form.module.scss | 38 ++++++++++ 5 files changed, 154 insertions(+), 20 deletions(-) create mode 100644 microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx create mode 100644 microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss diff --git a/microsite-next/docusaurus.config.js b/microsite-next/docusaurus.config.js index 28e74f3633..4f7e0472be 100644 --- a/microsite-next/docusaurus.config.js +++ b/microsite-next/docusaurus.config.js @@ -85,8 +85,15 @@ module.exports = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ { + colorMode: { + defaultMode: 'dark', + // disableSwitch: true, + }, navbar: { - title: 'Backstage Software Catalog and Developer Platform', + logo: { + alt: 'Backstage Software Catalog and Developer Platform', + src: 'img/logo.svg', + }, items: [ { href: 'https://github.com/backstage/backstage', diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index 59951646ce..292a5a2dc0 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -5,39 +5,70 @@ import { BannerSectionColumns } from '@site/src/components/banner-section/banner import { ContentBlock } from '@site/src/components/content-block/content-block'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; -import React from 'react'; +import React, { useState } from 'react'; import homeStyles from './home.module.scss'; +import { HubSpotNewAdoptersForm } from './_hub-spot-new-adopters-form'; + +const hiddenNewsletterBannerKey = 'hiddenNewsletterBanner'; export function Home() { const { siteConfig } = useDocusaurusContext(); + const [hiddenNewsletterBanner, setHideNewsletterBanner] = useState(() => { + return JSON.parse(localStorage.getItem(hiddenNewsletterBannerKey)) || false; + }); + + const hideNewsletterBanner = (shouldHide: boolean) => { + localStorage.setItem(hiddenNewsletterBannerKey, JSON.stringify(shouldHide)); + setHideNewsletterBanner(shouldHide); + }; + return (
    -
    - 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} - + {!hiddenNewsletterBanner && ( +
    - Newsletter - - ! -
    +
    + 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} + + Newsletter + + ! +
    -
    X
    -
    +
    hideNewsletterBanner(true)} + > + + + +
    +
    + )} + } >     + + ); diff --git a/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx b/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx new file mode 100644 index 0000000000..18b720098f --- /dev/null +++ b/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx @@ -0,0 +1,52 @@ +import clsx from 'clsx'; +import React, { useEffect, useState } from 'react'; + +import hubSpotStyles from './hub-spot-new-adopters-form.module.scss'; + +export const HubSpotNewAdoptersForm = () => { + const [isClosed, setClosed] = useState(true); + + useEffect(() => { + const script = document.createElement('script'); + script.src = 'https://js.hsforms.net/forms/v2.js'; + document.body.appendChild(script); + + script.addEventListener('load', () => { + // @ts-ignore + if (window.hbspt) { + // @ts-ignore + window.hbspt.forms.create({ + portalId: '21894833', + formId: '9a5aa2af-87f3-4a44-819f-88ee243bb61e', + target: `.${hubSpotStyles.hubSpotNewAdopterFormContent}`, + pageId: '79735607665', + }); + } + }); + }, []); + + return ( +
    + + +
    +
    + ); +}; diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss index 1cc4ba8238..6b33c17681 100644 --- a/microsite-next/src/pages/home/home.module.scss +++ b/microsite-next/src/pages/home/home.module.scss @@ -26,6 +26,10 @@ $desktopUpBreakpoint: 997px; :global(.bannerContent) { flex: 1; } + + :global(.bannerCloseButton) { + color: var(--ifm-color-secondary); + } } .svgContainer { diff --git a/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss b/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss new file mode 100644 index 0000000000..83735db349 --- /dev/null +++ b/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss @@ -0,0 +1,38 @@ +.hubSpotNewAdopterFormContainer { + top: 50%; + right: 0; + display: flex; + position: fixed; + transform: translateY(-50%); + + transition: all 250ms ease-in-out; + + &:global(.adoptersFormHidden) { + transform: translate(500px, -50%); + } + + > button { + top: 50%; + left: -2rem; + position: fixed; + + transform: rotate(-90deg) translateX(-50%); + transform-origin: top left; + } +} + +.hubSpotNewAdopterFormContent { + height: 600px; + max-width: 500px; + overflow-y: hidden; + border-radius: 8px 0 0 8px; + background-color: var(--ifm-color-content); + + form { + width: 100%; + height: 100%; + overflow-y: auto; + + padding-right: 2rem; + } +} From 0a3024c9a6fcd9a8e19d74448867d9ed00065fa9 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Thu, 9 Feb 2023 18:39:45 -0500 Subject: [PATCH 11/14] fix: Fix adopters form background & remove theme switch from config Signed-off-by: Carlos Esteban Lopez --- microsite-next/docusaurus.config.js | 2 +- .../src/pages/home/hub-spot-new-adopters-form.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/microsite-next/docusaurus.config.js b/microsite-next/docusaurus.config.js index 4f7e0472be..52867ed121 100644 --- a/microsite-next/docusaurus.config.js +++ b/microsite-next/docusaurus.config.js @@ -87,7 +87,7 @@ module.exports = { { colorMode: { defaultMode: 'dark', - // disableSwitch: true, + disableSwitch: true, }, navbar: { logo: { diff --git a/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss b/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss index 83735db349..77e1a87a53 100644 --- a/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss +++ b/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss @@ -26,7 +26,7 @@ max-width: 500px; overflow-y: hidden; border-radius: 8px 0 0 8px; - background-color: var(--ifm-color-content); + background-color: var(--ifm-color-white); form { width: 100%; From 537b921b8359e02d510594db73df270fb86909c3 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Tue, 14 Feb 2023 16:44:03 -0500 Subject: [PATCH 12/14] refactor: Improve grid components & replace them in community page Signed-off-by: Carlos Esteban Lopez --- .../banner-section-columns.module.scss | 43 --- .../banner-section/banner-section-columns.tsx | 34 --- .../banner-section-grid.module.scss | 20 ++ .../banner-section/banner-section-grid.tsx | 35 +++ .../banner-section/banner-section.tsx | 8 +- .../content-block/content-block.module.scss | 10 +- .../content-block/content-block.tsx | 50 ++-- .../src/pages/community/_community.tsx | 267 +++++++++--------- .../src/pages/community/community.module.scss | 53 +--- microsite-next/src/pages/demos/_demos.tsx | 73 +++-- .../src/pages/demos/demos.module.scss | 4 - microsite-next/src/pages/home/_home.tsx | 111 ++++---- .../src/pages/home/home.module.scss | 12 +- 13 files changed, 325 insertions(+), 395 deletions(-) delete mode 100644 microsite-next/src/components/banner-section/banner-section-columns.module.scss delete mode 100644 microsite-next/src/components/banner-section/banner-section-columns.tsx create mode 100644 microsite-next/src/components/banner-section/banner-section-grid.module.scss create mode 100644 microsite-next/src/components/banner-section/banner-section-grid.tsx diff --git a/microsite-next/src/components/banner-section/banner-section-columns.module.scss b/microsite-next/src/components/banner-section/banner-section-columns.module.scss deleted file mode 100644 index 32cc53eb5e..0000000000 --- a/microsite-next/src/components/banner-section/banner-section-columns.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -.bannerSection { - display: block; - - &:global(.greyBackground) { - background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); - } - - &:global(.greenGradientBackground) { - background: linear-gradient( - 178.64deg, - hsla(0, 0%, 100%, 0) 57.61%, - hsla(0, 0%, 100%, 0.17) 127.71% - ), - linear-gradient( - 144.35deg, - rgba(98, 197, 179, 0) 56.68%, - rgba(98, 197, 179, 0.59) 109.25% - ), - linear-gradient( - 192.29deg, - rgba(155, 240, 225, 0) 54.17%, - rgba(155, 240, 225, 0.67) 137.34% - ); - } - - &:global(.greenBottomGradientBackground) { - background: linear-gradient( - 178.64deg, - hsla(0, 0%, 100%, 0) 57.61%, - hsla(0, 0%, 100%, 0.17) 127.71% - ), - linear-gradient( - 144.35deg, - rgba(98, 197, 179, 0) 56.68%, - rgba(98, 197, 179, 0.59) 109.25% - ), - linear-gradient( - 192.29deg, - rgba(155, 240, 225, 0) 54.17%, - rgba(155, 240, 225, 0.67) 137.34% - ); - } -} diff --git a/microsite-next/src/components/banner-section/banner-section-columns.tsx b/microsite-next/src/components/banner-section/banner-section-columns.tsx deleted file mode 100644 index db33b52961..0000000000 --- a/microsite-next/src/components/banner-section/banner-section-columns.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import clsx from 'clsx'; -import React, { PropsWithChildren, ReactNode } from 'react'; - -import bannerColumnStyles from './banner-section-columns.module.scss'; - -export type IBannerSectionColumnsProps = PropsWithChildren<{ - header?: ReactNode; - // children: ReactNode | ReactNode[]; -}>; - -export const BannerSectionColumns = ({ - header, - children, -}: IBannerSectionColumnsProps) => ( - <> - {header && ( -
    -
    {header}
    -
    - )} - - {Array.isArray(children) ? ( -
    - {children.map((child, index) => ( -
    - {child} -
    - ))} -
    - ) : ( - children - )} - -); diff --git a/microsite-next/src/components/banner-section/banner-section-grid.module.scss b/microsite-next/src/components/banner-section/banner-section-grid.module.scss new file mode 100644 index 0000000000..c57b82ac57 --- /dev/null +++ b/microsite-next/src/components/banner-section/banner-section-grid.module.scss @@ -0,0 +1,20 @@ +$desktopUpBreakpoint: 997px; + +.sectionGridContainer { + gap: 2rem; + display: grid; + + :global(.gridHeader) { + grid-column: 1 / -1; + } +} + +.gridContainer { + gap: 2rem; + display: grid; + align-items: center; + + @media (min-width: $desktopUpBreakpoint) { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + } +} diff --git a/microsite-next/src/components/banner-section/banner-section-grid.tsx b/microsite-next/src/components/banner-section/banner-section-grid.tsx new file mode 100644 index 0000000000..7846ffe010 --- /dev/null +++ b/microsite-next/src/components/banner-section/banner-section-grid.tsx @@ -0,0 +1,35 @@ +import clsx from 'clsx'; +import React, { PropsWithChildren, ReactNode } from 'react'; + +import bannerGridStyles from './banner-section-grid.module.scss'; + +export type IBannerSectionColumnsProps = PropsWithChildren<{ + header?: ReactNode; + className?: string; + // children: ReactNode | ReactNode[]; +}>; + +export const BannerSectionGrid = ({ + header, + children, + className, +}: IBannerSectionColumnsProps) => { + console.log('Header: ', header); + + return ( +
    + {header &&
    {header}
    } + +
    + {Array.isArray(children) + ? children.map((child, index) => + React.cloneElement(child, { + key: index, + className: clsx(child.props.className), + }), + ) + : children} +
    +
    + ); +}; diff --git a/microsite-next/src/components/banner-section/banner-section.tsx b/microsite-next/src/components/banner-section/banner-section.tsx index dbab99200e..564b1f2043 100644 --- a/microsite-next/src/components/banner-section/banner-section.tsx +++ b/microsite-next/src/components/banner-section/banner-section.tsx @@ -4,6 +4,7 @@ import React, { PropsWithChildren } from 'react'; import bannerStyles from './banner-section.module.scss'; export type IBannerSectionProps = PropsWithChildren<{ + className?: string; greyBackground?: boolean; greenGradientBackground?: boolean; greenBottomGradientBackground?: boolean; @@ -12,19 +13,22 @@ export type IBannerSectionProps = PropsWithChildren<{ export const BannerSection = ({ children, + className, greyBackground = false, greenGradientBackground = false, greenBottomGradientBackground = false, greenCallToActionGradientBackground = false, }: IBannerSectionProps) => (
    -
    {children}
    +
    + {children} +
    ); diff --git a/microsite-next/src/components/content-block/content-block.module.scss b/microsite-next/src/components/content-block/content-block.module.scss index 77f98400f7..9a34c55390 100644 --- a/microsite-next/src/components/content-block/content-block.module.scss +++ b/microsite-next/src/components/content-block/content-block.module.scss @@ -1,6 +1,9 @@ .contentBlock { + height: 100%; + gap: 1.5rem; display: grid; + align-items: center; > *, h1, @@ -9,6 +12,10 @@ padding: 0; } + :global(.contentBlockTitle) { + align-self: start; + } + :global(.bulletLine) { width: 50px; margin-bottom: 0.5rem; @@ -17,6 +24,7 @@ :global(.actionButtons) { gap: 1rem; display: grid; - grid-template-columns: repeat(2, auto); + align-self: end; + grid-template-columns: repeat(auto-fit, minmax(100px, auto)); } } diff --git a/microsite-next/src/components/content-block/content-block.tsx b/microsite-next/src/components/content-block/content-block.tsx index 4c1cc6272e..ae67070953 100644 --- a/microsite-next/src/components/content-block/content-block.tsx +++ b/microsite-next/src/components/content-block/content-block.tsx @@ -24,32 +24,30 @@ export const ContentBlock = ({ topImgSrc, hasBulletLine, actionButtons, -}: IContentBlockProps) => { - return ( -
    - {topImgSrc && {topImgSrc}} +}: IContentBlockProps) => ( +
    + {topImgSrc && {topImgSrc}} -
    - {hasBulletLine &&
    } +
    + {hasBulletLine &&
    } - {title && React.isValidElement(title) ? title :

    {title}

    } -
    - - {children &&

    {children}

    } - - {actionButtons && ( -
    - {actionButtons.map(({ link, label }, index) => ( - - {label} - - ))} -
    - )} + {title && React.isValidElement(title) ? title :

    {title}

    }
    - ); -}; + + {children && React.isValidElement(children) ? children :

    {children}

    } + + {actionButtons && ( +
    + {actionButtons.map(({ link, label }, index) => ( + + {label} + + ))} +
    + )} +
    +); diff --git a/microsite-next/src/pages/community/_community.tsx b/microsite-next/src/pages/community/_community.tsx index 3ea0c36da9..082d656454 100644 --- a/microsite-next/src/pages/community/_community.tsx +++ b/microsite-next/src/pages/community/_community.tsx @@ -1,10 +1,13 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { BannerSection } from '@site/src/components/banner-section/banner-section'; +import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React from 'react'; import communityStyles from './community.module.scss'; +import { ContentBlock } from '../../components/content-block/content-block'; interface ICollectionItem { title?: string; @@ -128,155 +131,137 @@ export function Community() { return (
    -
    -
    -
    -
    -

    - Backstage Community -

    + + + Backstage 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. + -

    - 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. -

    -
    - -
    -

    - Get started in our community! -

    - -
      - {communityListItems.map( - ({ content: text, link, label }, index) => ( -
    • -

      - {text} {label} -

      -
      • - ), - )} -
    -
    -
    -
    -
    - -
    -
    -
    -

    Offical Backstage initiatives

    - -

    Stay tuned to the latest developments

    -
    - -
    - {officialInitiatives.map( - ({ title, content, link, label }, index) => ( -
    -
    - -

    {title}

    - -

    {content}

    - - - {label} - -
    - ), + -
    -
    + title="Get started in our community!" + > +
      + {communityListItems.map( + ({ content: text, link, label }, index) => ( +
    • +

      + {text} {label} +

      +
      • + ), + )} +
    + + + -
    -
    -
    -

    Community initiatives

    -
    + + +

    Offical Backstage initiatives

    -
    - {communityInitiatives.map( - ({ title, content, link, label }, index) => ( -
    -
    +

    Stay tuned to the latest developments

    + + } + > + {officialInitiatives.map( + ({ title, content, link, label }, index) => ( + + {content} + + ), + )} + + -

    {title}

    + + Community initiatives} + > + {communityInitiatives.map( + ({ title, content, link, label }, index) => ( + +

    {content}

    +     + ), + )} +     +     -

    {content}

    - - - {label} - -
    - ), - )} -
    -
    -
    - -
    -
    -
    + + Trainings and Certifications -
    + } + > + {trainingNCertifications.map( + ({ title, content, link, label }, index) => ( + +

    {content}

    +     + ), + )} + + -
    - {trainingNCertifications.map( - ({ title, content, link, label }, index) => ( -
    -
    - -

    {title}

    - -

    {content}

    - - - {label} - -
    - ), - )} -
    -
    -
    - -
    -
    -
    -

    Commercial Partners

    -
    - -
    - {partners.map(({ name, url, logo }, index) => ( -
    - - {name} - -
    - ))} -
    -
    -
    + + Commercial Partners} + > + {partners.map(({ name, url, logo }, index) => ( +
    + + {name} + +
    + ))} +     +
    ); diff --git a/microsite-next/src/pages/community/community.module.scss b/microsite-next/src/pages/community/community.module.scss index 5052b7d3b2..3f829b0100 100644 --- a/microsite-next/src/pages/community/community.module.scss +++ b/microsite-next/src/pages/community/community.module.scss @@ -8,60 +8,21 @@ line-height: 56px; word-break: break-word; } -} -.banner, -.officialInitiatives, -.communityInitiatives, -.trainingNCertifications, -.commercialPartners { - :global(.row .col) { - max-width: 50%; - - display: flex; - flex-direction: column; - - :global(.bulletLine) { - width: 50px; - } - - p { - text-align: justify; - flex: 1; - } + p { + text-align: justify; } } -.banner, -.communityInitiatives, -.commercialPartners { - background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); - // clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw - 10px), 0 100%); -} +.listContainer { + height: 100%; + align-items: stretch !important; + grid-template-rows: auto 1fr; -.banner { ul { - flex: 1; + height: 100%; display: flex; flex-direction: column; justify-content: space-between; } } - -.officialInitiatives { - background: linear-gradient( - 178.64deg, - hsla(0, 0%, 100%, 0) 57.61%, - hsla(0, 0%, 100%, 0.17) 127.71% - ), - linear-gradient( - 144.35deg, - rgba(98, 197, 179, 0) 56.68%, - rgba(98, 197, 179, 0.59) 109.25% - ), - linear-gradient( - 192.29deg, - rgba(155, 240, 225, 0) 54.17%, - rgba(155, 240, 225, 0.67) 137.34% - ); -} diff --git a/microsite-next/src/pages/demos/_demos.tsx b/microsite-next/src/pages/demos/_demos.tsx index 4c035dd130..65c04c5282 100644 --- a/microsite-next/src/pages/demos/_demos.tsx +++ b/microsite-next/src/pages/demos/_demos.tsx @@ -1,5 +1,8 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { BannerSection } from '@site/src/components/banner-section/banner-section'; +import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; +import { ContentBlock } from '@site/src/components/content-block/content-block'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React from 'react'; @@ -162,50 +165,38 @@ export function Demos() {
    {demoItems.map((demoItem, index) => ( -
    -
    -
    -
    -

    - {demoItem.title} -

    + + {demoItem.title}} + actionButtons={[ + { + link: demoItem.actionItemLink, + label: 'WATCH NOW', + }, + ]} + > + {demoItem.content} + - {React.isValidElement(demoItem.content) ? ( - demoItem.content - ) : ( -

    {demoItem.content}

    - )} - - {demoItem.actionItemLink && ( - - WATCH NOW - - )} -
    - -
    - {demoItem.media.type === 'image' ? ( - {demoItem.title} - ) : ( - - )} -
    +
    + {demoItem.media.type === 'image' ? ( + {demoItem.title} + ) : ( + + )}
    -
    -
    + + ))}
    diff --git a/microsite-next/src/pages/demos/demos.module.scss b/microsite-next/src/pages/demos/demos.module.scss index 0a567c45a7..b99874297e 100644 --- a/microsite-next/src/pages/demos/demos.module.scss +++ b/microsite-next/src/pages/demos/demos.module.scss @@ -22,7 +22,3 @@ min-height: 500px; } } - -.bannerGradient { - background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%); -} diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index 292a5a2dc0..7f7f008bc4 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -1,7 +1,8 @@ +import BrowserOnly from '@docusaurus/BrowserOnly'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { BannerSection } from '@site/src/components/banner-section/banner-section'; -import { BannerSectionColumns } from '@site/src/components/banner-section/banner-section-columns'; +import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; import { ContentBlock } from '@site/src/components/content-block/content-block'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; @@ -12,7 +13,7 @@ import { HubSpotNewAdoptersForm } from './_hub-spot-new-adopters-form'; const hiddenNewsletterBannerKey = 'hiddenNewsletterBanner'; -export function Home() { +const HomePage = () => { const { siteConfig } = useDocusaurusContext(); const [hiddenNewsletterBanner, setHideNewsletterBanner] = useState(() => { @@ -28,47 +29,42 @@ export function Home() {
    - - {!hiddenNewsletterBanner && ( -
    -
    - 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} - - Newsletter - - ! -
    - -
    hideNewsletterBanner(true)} + !hiddenNewsletterBanner && ( +
    +
    + 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} + - - - -
    + Newsletter + + !
    - )} - + +
    hideNewsletterBanner(true)} + > + + + +
    +
    + ) } >
    -     +     - + - + @@ -386,20 +382,19 @@ export function Home() { - -
    - Backstage Kubernetes Flag GIF + <> + Backstage Kubernetes Flag GIF -

    Backstage Kubernetes

    +

    Backstage Kubernetes

    -

    Manage your services, not clusters

    -
    -
    +

    Manage your services, not clusters

    + } > - + @@ -536,4 +531,8 @@ export function Home() {
    ); -} +}; + +export const Home = () => { + return {() => }; +}; diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss index 6b33c17681..57f2b9acde 100644 --- a/microsite-next/src/pages/home/home.module.scss +++ b/microsite-next/src/pages/home/home.module.scss @@ -60,7 +60,8 @@ $desktopUpBreakpoint: 997px; } :global([class*='Title']), - :global([class*='title']) { + :global([class*='title']), + :global([class*='gridHeader']) { img { max-width: 190px; max-height: 190px; @@ -97,3 +98,12 @@ $desktopUpBreakpoint: 997px; } } } + +.kubernetesSectionContainer { + :global([class*='gridHeader']) { + img { + max-width: 190px; + max-height: 190px; + } + } +} From 3d97900cee0ea30fe29d4cd67558707b97cf2dd2 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Sun, 19 Feb 2023 14:46:27 -0500 Subject: [PATCH 13/14] refactor: Export pages directly from index file Signed-off-by: Carlos Esteban Lopez --- .../src/pages/community/_community.tsx | 268 ----------------- microsite-next/src/pages/community/index.tsx | 269 +++++++++++++++++- microsite-next/src/pages/demos/_demos.tsx | 204 ------------- microsite-next/src/pages/demos/index.tsx | 205 ++++++++++++- microsite-next/src/pages/plugins/_plugins.tsx | 90 ------ microsite-next/src/pages/plugins/index.tsx | 86 +++++- 6 files changed, 557 insertions(+), 565 deletions(-) delete mode 100644 microsite-next/src/pages/community/_community.tsx delete mode 100644 microsite-next/src/pages/demos/_demos.tsx delete mode 100644 microsite-next/src/pages/plugins/_plugins.tsx diff --git a/microsite-next/src/pages/community/_community.tsx b/microsite-next/src/pages/community/_community.tsx deleted file mode 100644 index 082d656454..0000000000 --- a/microsite-next/src/pages/community/_community.tsx +++ /dev/null @@ -1,268 +0,0 @@ -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { BannerSection } from '@site/src/components/banner-section/banner-section'; -import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; -import Layout from '@theme/Layout'; -import { clsx } from 'clsx'; -import React from 'react'; - -import communityStyles from './community.module.scss'; -import { ContentBlock } from '../../components/content-block/content-block'; - -interface ICollectionItem { - title?: string; - content: React.ReactNode; - label: string; - link: string; -} - -export function Community() { - const { siteConfig } = useDocusaurusContext(); - - //#region Collection Data - const communityListItems: ICollectionItem[] = [ - { - content: 'Chat and get support on our', - label: 'Discord', - link: 'https://discord.gg/MUpMjP2', - }, - { - content: 'Get into contributing with the', - label: 'Good First Issues', - link: 'https://github.com/backstage/backstage/contribute', - }, - { - content: 'Subscribe to the', - label: 'Community newsletter', - link: 'https://info.backstage.spotify.com/newsletter_subscribe', - }, - { - content: 'Join the', - label: 'Twitter community', - link: 'https://twitter.com/i/communities/1494019781716062215', - }, - ]; - - const officialInitiatives: ICollectionItem[] = [ - { - title: 'Community sessions', - content: - 'Maintainers and adopters meet monthly to share updates, demos, and ideas. Yep, all sessions are recorded!', - link: '/on-demand', - label: 'Join a session', - }, - { - title: 'Newsletter', - content: - "The official monthly Backstage newsletter. Don't miss the latest news from your favorite project!", - link: 'https://info.backstage.spotify.com/newsletter_subscribe', - label: 'Subscribe', - }, - { - title: 'Contributor Spotlight', - content: - "A recognition for valuable community work. Nominate contributing members for their efforts! We'll put them in the spotlight ❤️", - link: '/nominate', - label: 'Nominate now', - }, - ]; - - const communityInitiatives: ICollectionItem[] = [ - { - title: 'Open Mic Meetup', - content: ( - <> - A casual get together of Backstage users sharing their experiences and - helping each other. Hosted by{' '} - Roadie.io and{' '} - Frontside Software. - - ), - link: 'https://backstage-openmic.com/', - label: 'Learn more', - }, - { - title: 'Backstage Weekly Newsletter', - content: ( - <> - A weekly newsletter with news, updates and things community from your - friends at Roadie.io. - - ), - link: 'https://roadie.io/backstage-weekly/', - label: 'Learn more', - }, - ]; - - const trainingNCertifications: ICollectionItem[] = [ - { - title: 'Open Mic Meetup', - content: - 'This is a course produced and curated by the Linux Foundation. This course introduces you to Backstage and how to get started with the project.', - link: 'https://training.linuxfoundation.org/training/introduction-to-backstage-developer-portals-made-easy-lfs142x/', - label: 'Learn more', - }, - ]; - - const partners: { name: string; url: string; logo: string }[] = [ - { - name: 'Frontside Software', - url: 'https://frontside.com/backstage/', - logo: 'img/partner-logo-frontside.png', - }, - { - name: 'Roadie', - url: 'https://roadie.io/', - logo: 'img/partner-logo-roadie.png', - }, - { - name: 'ThoughtWorks', - url: 'https://www.thoughtworks.com', - logo: 'img/partner-logo-thoughtworks.png', - }, - { - name: 'VMWare', - url: 'https://www.vmware.com', - logo: 'img/partner-logo-vmware.png', - }, - ]; - //#endregion - - return ( - -
    - - - Backstage 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. - - - -
      - {communityListItems.map( - ({ content: text, link, label }, index) => ( -
    • -

      - {text} {label} -

      -
      • - ), - )} -
    -     -     -     - - - -

    Offical Backstage initiatives

    - -

    Stay tuned to the latest developments

    - - } - > - {officialInitiatives.map( - ({ title, content, link, label }, index) => ( - - {content} - - ), - )} -     -     - - - Community initiatives} - > - {communityInitiatives.map( - ({ title, content, link, label }, index) => ( - -

    {content}

    -     - ), - )} -     -     - - - Trainings and Certifications - } - > - {trainingNCertifications.map( - ({ title, content, link, label }, index) => ( - -

    {content}

    -     - ), - )} -     -     - - - Commercial Partners} - > - {partners.map(({ name, url, logo }, index) => ( -
    - - {name} - -
    - ))} -     -     -
    -     - ); -} diff --git a/microsite-next/src/pages/community/index.tsx b/microsite-next/src/pages/community/index.tsx index 474352685a..595e2b01c8 100644 --- a/microsite-next/src/pages/community/index.tsx +++ b/microsite-next/src/pages/community/index.tsx @@ -1,3 +1,270 @@ -import { Community } from './_community'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { BannerSection } from '@site/src/components/banner-section/banner-section'; +import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; +import Layout from '@theme/Layout'; +import { clsx } from 'clsx'; +import React from 'react'; + +import { ContentBlock } from '../../components/content-block/content-block'; +import communityStyles from './community.module.scss'; + +interface ICollectionItem { + title?: string; + content: React.ReactNode; + label: string; + link: string; +} + +const Community = () => { + const { siteConfig } = useDocusaurusContext(); + + //#region Collection Data + const communityListItems: ICollectionItem[] = [ + { + content: 'Chat and get support on our', + label: 'Discord', + link: 'https://discord.gg/MUpMjP2', + }, + { + content: 'Get into contributing with the', + label: 'Good First Issues', + link: 'https://github.com/backstage/backstage/contribute', + }, + { + content: 'Subscribe to the', + label: 'Community newsletter', + link: 'https://info.backstage.spotify.com/newsletter_subscribe', + }, + { + content: 'Join the', + label: 'Twitter community', + link: 'https://twitter.com/i/communities/1494019781716062215', + }, + ]; + + const officialInitiatives: ICollectionItem[] = [ + { + title: 'Community sessions', + content: + 'Maintainers and adopters meet monthly to share updates, demos, and ideas. Yep, all sessions are recorded!', + link: '/on-demand', + label: 'Join a session', + }, + { + title: 'Newsletter', + content: + "The official monthly Backstage newsletter. Don't miss the latest news from your favorite project!", + link: 'https://info.backstage.spotify.com/newsletter_subscribe', + label: 'Subscribe', + }, + { + title: 'Contributor Spotlight', + content: + "A recognition for valuable community work. Nominate contributing members for their efforts! We'll put them in the spotlight ❤️", + link: '/nominate', + label: 'Nominate now', + }, + ]; + + const communityInitiatives: ICollectionItem[] = [ + { + title: 'Open Mic Meetup', + content: ( + <> + A casual get together of Backstage users sharing their experiences and + helping each other. Hosted by{' '} + Roadie.io and{' '} + Frontside Software. + + ), + link: 'https://backstage-openmic.com/', + label: 'Learn more', + }, + { + title: 'Backstage Weekly Newsletter', + content: ( + <> + A weekly newsletter with news, updates and things community from your + friends at Roadie.io. + + ), + link: 'https://roadie.io/backstage-weekly/', + label: 'Learn more', + }, + ]; + + const trainingNCertifications: ICollectionItem[] = [ + { + title: 'Open Mic Meetup', + content: + 'This is a course produced and curated by the Linux Foundation. This course introduces you to Backstage and how to get started with the project.', + link: 'https://training.linuxfoundation.org/training/introduction-to-backstage-developer-portals-made-easy-lfs142x/', + label: 'Learn more', + }, + ]; + + const partners: { name: string; url: string; logo: string }[] = [ + { + name: 'Frontside Software', + url: 'https://frontside.com/backstage/', + logo: 'img/partner-logo-frontside.png', + }, + { + name: 'Roadie', + url: 'https://roadie.io/', + logo: 'img/partner-logo-roadie.png', + }, + { + name: 'ThoughtWorks', + url: 'https://www.thoughtworks.com', + logo: 'img/partner-logo-thoughtworks.png', + }, + { + name: 'VMWare', + url: 'https://www.vmware.com', + logo: 'img/partner-logo-vmware.png', + }, + ]; + //#endregion + + return ( + +
    + + + Backstage 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. + + + +
      + {communityListItems.map( + ({ content: text, link, label }, index) => ( +
    • +

      + {text} {label} +

      +
      • + ), + )} +
    +     +     +     + + + +

    Offical Backstage initiatives

    + +

    Stay tuned to the latest developments

    + + } + > + {officialInitiatives.map( + ({ title, content, link, label }, index) => ( + + {content} + + ), + )} +     +     + + + Community initiatives} + > + {communityInitiatives.map( + ({ title, content, link, label }, index) => ( + +

    {content}

    +     + ), + )} +     +     + + + Trainings and Certifications + } + > + {trainingNCertifications.map( + ({ title, content, link, label }, index) => ( + +

    {content}

    +     + ), + )} +     +     + + + Commercial Partners} + > + {partners.map(({ name, url, logo }, index) => ( +
    + + {name} + +
    + ))} +     +     +
    +     + ); +}; export default Community; diff --git a/microsite-next/src/pages/demos/_demos.tsx b/microsite-next/src/pages/demos/_demos.tsx deleted file mode 100644 index 65c04c5282..0000000000 --- a/microsite-next/src/pages/demos/_demos.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { BannerSection } from '@site/src/components/banner-section/banner-section'; -import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; -import { ContentBlock } from '@site/src/components/content-block/content-block'; -import Layout from '@theme/Layout'; -import { clsx } from 'clsx'; -import React from 'react'; - -import demosStyles from './demos.module.scss'; - -interface IDemoItem { - title: string; - content: React.ReactNode; - actionItemLink?: string; - media: { - type: 'image' | 'video'; - link: string; - }; -} - -export function Demos() { - const { siteConfig } = useDocusaurusContext(); - - //#region Collection Data - const demoItems: IDemoItem[] = [ - { - title: 'See us in action', - content: ( - <> -

    - Watch the videos below to get an introduction to Backstage and to - see how we use different plugins to customize{' '} - - our internal version of Backstage at Spotify - -

    -

    - To see how other companies have already started using Backstage, - watch these presentations from{' '} - Expedia,{' '} - Zalando, and{' '} - TELUS. For - more, join our{' '} - - Community Sessions - -

    -

    - To explore the UI and basic features of Backstage firsthand, go to:{' '} - demo.backstage.io. (Tip:{' '} - click “All” to view all the example components in the software - catalog.) -

    - - ), - media: { - type: 'image', - link: `${siteConfig.baseUrl}img/demo-screen.png`, - }, - }, - { - title: 'Introduction to Backstage', - content: - 'Backstage is an open source platform for building developer portals. We’ve been using our homegrown version at Spotify for years — so it’s already packed with features. (We have over 120 internal plugins, built by 60 different teams.) In this live demo recording, Stefan Ålund, product manager for Backstage, tells the origin story of Backstage and gives you a tour of how we use it here at Spotify.', - actionItemLink: 'https://www.youtube.com/watch?v=1XtJ5FAOjPk', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/1XtJ5FAOjPk', - }, - }, - { - title: 'Control cloud costs', - content: ( - <> -

    - How do you control cloud costs while maintaining the speed and - independence of your development teams? With the{' '} - Cost Insights plugin{' '} - for Backstage, managing cloud costs becomes just another part of an - engineer’s daily development process. They get a clear view of their - spending — and can decide for themselves how they want to optimize - it. Learn more about the{' '} - - Cost Insights plugin - -

    - - ), - actionItemLink: 'https://youtu.be/YLAd5hdXR_Q', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/YLAd5hdXR_Q', - }, - }, - { - title: 'Make documentation easy', - content: ( - <> -

    - Documentation! Everyone needs it, no one wants to create it, and no - one can ever find it. Backstage follows a “docs like code” approach: - you write documentation in Markdown files right alongside your code. - This makes documentation easier to create, maintain, find — and, you - know, actually use. This demo video showcases Spotify’s internal - version of TechDocs. Learn more about{' '} - - TechDocs - - . -

    - - ), - actionItemLink: 'https://youtu.be/mOLCgdPw1iA', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/mOLCgdPw1iA', - }, - }, - { - title: 'Manage your tech health', - content: - 'Instead of manually updating a spreadsheet, what if you had a beautiful dashboard that could give you an instant, interactive picture of your entire org’s tech stack? That’s how we do it at Spotify. With our Tech Insights plugin for Backstage, anyone at Spotify can see which version of which software anyone else at Spotify is using — and a whole a lot more. From managing migrations to fighting tech entropy, Backstage makes managing our tech health actually kind of pleasant.', - actionItemLink: - 'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/K3xz6VAbgH8', - }, - }, - { - title: 'Create a microservice', - content: - 'You’re a Spotify engineer about to build a new microservice (or any component) using Spring Boot. Where do you start? Search for a quick start guide online? Create an empty repo on GitHub? Copy and paste an old project? Nope. Just go to Backstage, and you’ll be up and running in two minutes — with a “Hello World” app, CI, and documentation all automatically set up and configured in a standardized way.', - actionItemLink: 'https://www.youtube.com/watch?v=U1iwe3L5pzc', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/U1iwe3L5pzc', - }, - }, - { - title: 'Search all your services', - content: - 'All of Spotify’s services are automatically indexed in Backstage. So our engineers can stop playing detective — no more spamming Slack channels asking if anyone knows who owns a particular service and where you can find its API, only to discover that the owner went on sabbatical three months ago and you have to hunt them down on a mountain in Tibet where they’re on a 12-day silent meditation retreat. At Spotify, anyone can always find anyone else’s service, inspect its APIs, and contact its current owner — all with one search.', - actionItemLink: 'https://www.youtube.com/watch?v=vcDL9tOv7Eo', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/vcDL9tOv7Eo', - }, - }, - { - title: 'Manage data pipelines', - content: - 'We manage a lot of data pipelines (also known as workflows) here at Spotify. So, of course, we made a great workflows plugin for our version of Backstage. All our workflow tools — including a scheduler, log inspector, data lineage graph, and configurable alerts — are integrated into one simple interface.', - actionItemLink: 'https://www.youtube.com/watch?v=rH46MLNZIPM', - media: { - type: 'video', - link: 'https://www.youtube.com/embed/rH46MLNZIPM', - }, - }, - ]; - //#endregion - - return ( - -
    - {demoItems.map((demoItem, index) => ( - - - {demoItem.title}} - actionButtons={[ - { - link: demoItem.actionItemLink, - label: 'WATCH NOW', - }, - ]} - > - {demoItem.content} - - -
    - {demoItem.media.type === 'image' ? ( - {demoItem.title} - ) : ( - - )} -
    -     -     - ))} -
    -     - ); -} diff --git a/microsite-next/src/pages/demos/index.tsx b/microsite-next/src/pages/demos/index.tsx index db9298c0c6..d112ca2c49 100644 --- a/microsite-next/src/pages/demos/index.tsx +++ b/microsite-next/src/pages/demos/index.tsx @@ -1,3 +1,206 @@ -import { Demos } from './_demos'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { BannerSection } from '@site/src/components/banner-section/banner-section'; +import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; +import { ContentBlock } from '@site/src/components/content-block/content-block'; +import Layout from '@theme/Layout'; +import { clsx } from 'clsx'; +import React from 'react'; + +import demosStyles from './demos.module.scss'; + +interface IDemoItem { + title: string; + content: React.ReactNode; + actionItemLink?: string; + media: { + type: 'image' | 'video'; + link: string; + }; +} + +const Demos = () => { + const { siteConfig } = useDocusaurusContext(); + + //#region Collection Data + const demoItems: IDemoItem[] = [ + { + title: 'See us in action', + content: ( + <> +

    + Watch the videos below to get an introduction to Backstage and to + see how we use different plugins to customize{' '} + + our internal version of Backstage at Spotify + +

    +

    + To see how other companies have already started using Backstage, + watch these presentations from{' '} + Expedia,{' '} + Zalando, and{' '} + TELUS. For + more, join our{' '} + + Community Sessions + +

    +

    + To explore the UI and basic features of Backstage firsthand, go to:{' '} + demo.backstage.io. (Tip:{' '} + click “All” to view all the example components in the software + catalog.) +

    + + ), + media: { + type: 'image', + link: `${siteConfig.baseUrl}img/demo-screen.png`, + }, + }, + { + title: 'Introduction to Backstage', + content: + 'Backstage is an open source platform for building developer portals. We’ve been using our homegrown version at Spotify for years — so it’s already packed with features. (We have over 120 internal plugins, built by 60 different teams.) In this live demo recording, Stefan Ålund, product manager for Backstage, tells the origin story of Backstage and gives you a tour of how we use it here at Spotify.', + actionItemLink: 'https://www.youtube.com/watch?v=1XtJ5FAOjPk', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/1XtJ5FAOjPk', + }, + }, + { + title: 'Control cloud costs', + content: ( + <> +

    + How do you control cloud costs while maintaining the speed and + independence of your development teams? With the{' '} + Cost Insights plugin{' '} + for Backstage, managing cloud costs becomes just another part of an + engineer’s daily development process. They get a clear view of their + spending — and can decide for themselves how they want to optimize + it. Learn more about the{' '} + + Cost Insights plugin + +

    + + ), + actionItemLink: 'https://youtu.be/YLAd5hdXR_Q', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/YLAd5hdXR_Q', + }, + }, + { + title: 'Make documentation easy', + content: ( + <> +

    + Documentation! Everyone needs it, no one wants to create it, and no + one can ever find it. Backstage follows a “docs like code” approach: + you write documentation in Markdown files right alongside your code. + This makes documentation easier to create, maintain, find — and, you + know, actually use. This demo video showcases Spotify’s internal + version of TechDocs. Learn more about{' '} + + TechDocs + + . +

    + + ), + actionItemLink: 'https://youtu.be/mOLCgdPw1iA', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/mOLCgdPw1iA', + }, + }, + { + title: 'Manage your tech health', + content: + 'Instead of manually updating a spreadsheet, what if you had a beautiful dashboard that could give you an instant, interactive picture of your entire org’s tech stack? That’s how we do it at Spotify. With our Tech Insights plugin for Backstage, anyone at Spotify can see which version of which software anyone else at Spotify is using — and a whole a lot more. From managing migrations to fighting tech entropy, Backstage makes managing our tech health actually kind of pleasant.', + actionItemLink: + 'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/K3xz6VAbgH8', + }, + }, + { + title: 'Create a microservice', + content: + 'You’re a Spotify engineer about to build a new microservice (or any component) using Spring Boot. Where do you start? Search for a quick start guide online? Create an empty repo on GitHub? Copy and paste an old project? Nope. Just go to Backstage, and you’ll be up and running in two minutes — with a “Hello World” app, CI, and documentation all automatically set up and configured in a standardized way.', + actionItemLink: 'https://www.youtube.com/watch?v=U1iwe3L5pzc', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/U1iwe3L5pzc', + }, + }, + { + title: 'Search all your services', + content: + 'All of Spotify’s services are automatically indexed in Backstage. So our engineers can stop playing detective — no more spamming Slack channels asking if anyone knows who owns a particular service and where you can find its API, only to discover that the owner went on sabbatical three months ago and you have to hunt them down on a mountain in Tibet where they’re on a 12-day silent meditation retreat. At Spotify, anyone can always find anyone else’s service, inspect its APIs, and contact its current owner — all with one search.', + actionItemLink: 'https://www.youtube.com/watch?v=vcDL9tOv7Eo', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/vcDL9tOv7Eo', + }, + }, + { + title: 'Manage data pipelines', + content: + 'We manage a lot of data pipelines (also known as workflows) here at Spotify. So, of course, we made a great workflows plugin for our version of Backstage. All our workflow tools — including a scheduler, log inspector, data lineage graph, and configurable alerts — are integrated into one simple interface.', + actionItemLink: 'https://www.youtube.com/watch?v=rH46MLNZIPM', + media: { + type: 'video', + link: 'https://www.youtube.com/embed/rH46MLNZIPM', + }, + }, + ]; + //#endregion + + return ( + +
    + {demoItems.map((demoItem, index) => ( + + + {demoItem.title}} + actionButtons={[ + { + link: demoItem.actionItemLink, + label: 'WATCH NOW', + }, + ]} + > + {demoItem.content} + + +
    + {demoItem.media.type === 'image' ? ( + {demoItem.title} + ) : ( + + )} +
    +     +     + ))} +
    +     + ); +}; export default Demos; diff --git a/microsite-next/src/pages/plugins/_plugins.tsx b/microsite-next/src/pages/plugins/_plugins.tsx deleted file mode 100644 index 2e165ba60b..0000000000 --- a/microsite-next/src/pages/plugins/_plugins.tsx +++ /dev/null @@ -1,90 +0,0 @@ -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/src/pages/plugins/index.tsx b/microsite-next/src/pages/plugins/index.tsx index d95494d73d..6f19864f93 100644 --- a/microsite-next/src/pages/plugins/index.tsx +++ b/microsite-next/src/pages/plugins/index.tsx @@ -1,3 +1,87 @@ -import { Plugins } from './_plugins'; +import Link from '@docusaurus/Link'; +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 + +const Plugins = () => ( + +
    +
    +
    +

    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 => ( + + ))} +
    +
    +     +); export default Plugins; From 0a770e840041793f7d57b11f4a0e8ae0277f4737 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Mon, 20 Feb 2023 19:04:14 -0500 Subject: [PATCH 14/14] refactor: CammelCase for folder structure Signed-off-by: Carlos Esteban Lopez --- .../bannerSection.module.scss} | 0 .../bannerSection.tsx} | 2 +- .../bannerSectionGrid.module.scss} | 0 .../bannerSectionGrid.tsx} | 2 +- .../contentBlock.module.scss} | 0 .../content-block.tsx => contentBlock/contentBlock.tsx} | 2 +- microsite-next/src/pages/community/index.tsx | 6 +++--- microsite-next/src/pages/demos/index.tsx | 6 +++--- microsite-next/src/pages/home/_home.tsx | 8 ++++---- ...-new-adopters-form.tsx => _hubSpotNewAdoptersForm.tsx} | 2 +- ...orm.module.scss => hubSpotNewAdoptersForm.module.scss} | 0 .../pages/plugins/{_plugin-card.tsx => _pluginCard.tsx} | 0 microsite-next/src/pages/plugins/index.tsx | 2 +- 13 files changed, 15 insertions(+), 15 deletions(-) rename microsite-next/src/components/{banner-section/banner-section.module.scss => bannerSection/bannerSection.module.scss} (100%) rename microsite-next/src/components/{banner-section/banner-section.tsx => bannerSection/bannerSection.tsx} (93%) rename microsite-next/src/components/{banner-section/banner-section-grid.module.scss => bannerSection/bannerSectionGrid.module.scss} (100%) rename microsite-next/src/components/{banner-section/banner-section-grid.tsx => bannerSection/bannerSectionGrid.tsx} (92%) rename microsite-next/src/components/{content-block/content-block.module.scss => contentBlock/contentBlock.module.scss} (100%) rename microsite-next/src/components/{content-block/content-block.tsx => contentBlock/contentBlock.tsx} (95%) rename microsite-next/src/pages/home/{_hub-spot-new-adopters-form.tsx => _hubSpotNewAdoptersForm.tsx} (94%) rename microsite-next/src/pages/home/{hub-spot-new-adopters-form.module.scss => hubSpotNewAdoptersForm.module.scss} (100%) rename microsite-next/src/pages/plugins/{_plugin-card.tsx => _pluginCard.tsx} (100%) diff --git a/microsite-next/src/components/banner-section/banner-section.module.scss b/microsite-next/src/components/bannerSection/bannerSection.module.scss similarity index 100% rename from microsite-next/src/components/banner-section/banner-section.module.scss rename to microsite-next/src/components/bannerSection/bannerSection.module.scss diff --git a/microsite-next/src/components/banner-section/banner-section.tsx b/microsite-next/src/components/bannerSection/bannerSection.tsx similarity index 93% rename from microsite-next/src/components/banner-section/banner-section.tsx rename to microsite-next/src/components/bannerSection/bannerSection.tsx index 564b1f2043..64c8d246c8 100644 --- a/microsite-next/src/components/banner-section/banner-section.tsx +++ b/microsite-next/src/components/bannerSection/bannerSection.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React, { PropsWithChildren } from 'react'; -import bannerStyles from './banner-section.module.scss'; +import bannerStyles from './bannerSection.module.scss'; export type IBannerSectionProps = PropsWithChildren<{ className?: string; diff --git a/microsite-next/src/components/banner-section/banner-section-grid.module.scss b/microsite-next/src/components/bannerSection/bannerSectionGrid.module.scss similarity index 100% rename from microsite-next/src/components/banner-section/banner-section-grid.module.scss rename to microsite-next/src/components/bannerSection/bannerSectionGrid.module.scss diff --git a/microsite-next/src/components/banner-section/banner-section-grid.tsx b/microsite-next/src/components/bannerSection/bannerSectionGrid.tsx similarity index 92% rename from microsite-next/src/components/banner-section/banner-section-grid.tsx rename to microsite-next/src/components/bannerSection/bannerSectionGrid.tsx index 7846ffe010..639cc0a97c 100644 --- a/microsite-next/src/components/banner-section/banner-section-grid.tsx +++ b/microsite-next/src/components/bannerSection/bannerSectionGrid.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React, { PropsWithChildren, ReactNode } from 'react'; -import bannerGridStyles from './banner-section-grid.module.scss'; +import bannerGridStyles from './bannerSectionGrid.module.scss'; export type IBannerSectionColumnsProps = PropsWithChildren<{ header?: ReactNode; diff --git a/microsite-next/src/components/content-block/content-block.module.scss b/microsite-next/src/components/contentBlock/contentBlock.module.scss similarity index 100% rename from microsite-next/src/components/content-block/content-block.module.scss rename to microsite-next/src/components/contentBlock/contentBlock.module.scss diff --git a/microsite-next/src/components/content-block/content-block.tsx b/microsite-next/src/components/contentBlock/contentBlock.tsx similarity index 95% rename from microsite-next/src/components/content-block/content-block.tsx rename to microsite-next/src/components/contentBlock/contentBlock.tsx index ae67070953..aae065db44 100644 --- a/microsite-next/src/components/content-block/content-block.tsx +++ b/microsite-next/src/components/contentBlock/contentBlock.tsx @@ -2,7 +2,7 @@ import Link from '@docusaurus/Link'; import clsx from 'clsx'; import React, { FC, PropsWithChildren, ReactNode } from 'react'; -import contentBlockStyles from './content-block.module.scss'; +import contentBlockStyles from './contentBlock.module.scss'; export interface ContentBlockActionButtonProps { label: string; diff --git a/microsite-next/src/pages/community/index.tsx b/microsite-next/src/pages/community/index.tsx index 595e2b01c8..a6dbf8432b 100644 --- a/microsite-next/src/pages/community/index.tsx +++ b/microsite-next/src/pages/community/index.tsx @@ -1,12 +1,12 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { BannerSection } from '@site/src/components/banner-section/banner-section'; -import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; +import { BannerSection } from '@site/src/components/bannerSection/bannerSection'; +import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSectionGrid'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React from 'react'; -import { ContentBlock } from '../../components/content-block/content-block'; +import { ContentBlock } from '../../components/contentBlock/contentBlock'; import communityStyles from './community.module.scss'; interface ICollectionItem { diff --git a/microsite-next/src/pages/demos/index.tsx b/microsite-next/src/pages/demos/index.tsx index d112ca2c49..2ca77e5c89 100644 --- a/microsite-next/src/pages/demos/index.tsx +++ b/microsite-next/src/pages/demos/index.tsx @@ -1,8 +1,8 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { BannerSection } from '@site/src/components/banner-section/banner-section'; -import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; -import { ContentBlock } from '@site/src/components/content-block/content-block'; +import { BannerSection } from '@site/src/components/bannerSection/bannerSection'; +import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSectionGrid'; +import { ContentBlock } from '@site/src/components/contentBlock/contentBlock'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React from 'react'; diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx index 7f7f008bc4..4ba5539348 100644 --- a/microsite-next/src/pages/home/_home.tsx +++ b/microsite-next/src/pages/home/_home.tsx @@ -1,15 +1,15 @@ import BrowserOnly from '@docusaurus/BrowserOnly'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { BannerSection } from '@site/src/components/banner-section/banner-section'; -import { BannerSectionGrid } from '@site/src/components/banner-section/banner-section-grid'; -import { ContentBlock } from '@site/src/components/content-block/content-block'; +import { BannerSection } from '@site/src/components/bannerSection/bannerSection'; +import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSectionGrid'; +import { ContentBlock } from '@site/src/components/contentBlock/contentBlock'; import Layout from '@theme/Layout'; import { clsx } from 'clsx'; import React, { useState } from 'react'; import homeStyles from './home.module.scss'; -import { HubSpotNewAdoptersForm } from './_hub-spot-new-adopters-form'; +import { HubSpotNewAdoptersForm } from './_hubSpotNewAdoptersForm'; const hiddenNewsletterBannerKey = 'hiddenNewsletterBanner'; diff --git a/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx b/microsite-next/src/pages/home/_hubSpotNewAdoptersForm.tsx similarity index 94% rename from microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx rename to microsite-next/src/pages/home/_hubSpotNewAdoptersForm.tsx index 18b720098f..36f00dff75 100644 --- a/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx +++ b/microsite-next/src/pages/home/_hubSpotNewAdoptersForm.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; -import hubSpotStyles from './hub-spot-new-adopters-form.module.scss'; +import hubSpotStyles from './hubSpotNewAdoptersForm.module.scss'; export const HubSpotNewAdoptersForm = () => { const [isClosed, setClosed] = useState(true); diff --git a/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss b/microsite-next/src/pages/home/hubSpotNewAdoptersForm.module.scss similarity index 100% rename from microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss rename to microsite-next/src/pages/home/hubSpotNewAdoptersForm.module.scss diff --git a/microsite-next/src/pages/plugins/_plugin-card.tsx b/microsite-next/src/pages/plugins/_pluginCard.tsx similarity index 100% rename from microsite-next/src/pages/plugins/_plugin-card.tsx rename to microsite-next/src/pages/plugins/_pluginCard.tsx diff --git a/microsite-next/src/pages/plugins/index.tsx b/microsite-next/src/pages/plugins/index.tsx index 6f19864f93..f8c6f78819 100644 --- a/microsite-next/src/pages/plugins/index.tsx +++ b/microsite-next/src/pages/plugins/index.tsx @@ -3,7 +3,7 @@ import Layout from '@theme/Layout'; import clsx from 'clsx'; import React from 'react'; -import { IPluginData, PluginCard } from './_plugin-card'; +import { IPluginData, PluginCard } from './_pluginCard'; import pluginsStyles from './plugins.module.scss'; //#region Plugin data import