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

', + }, + 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

', - }, - 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"