diff --git a/docs/overview/support.md b/docs/overview/support.md index 49075366af..9eb2700cc8 100644 --- a/docs/overview/support.md +++ b/docs/overview/support.md @@ -18,3 +18,45 @@ description: Support and Community Details and Links our email newsletter. - Give us a star ⭐️ - If you are using Backstage or think it is an interesting project, we would love a star! ❤️ + +## Community Hub + +Check out the Backstage.io [Backstage Community Hub](https://backstage.io/community) for the Community Sessions, recordings, and community resources. + +### Adding a recording to the meetup page + +To add a new recording to the [meetup page](https://backstage.io/on-demand) +create a file in +[`microsite/data/on-demand`](https://github.com/backstage/backstage/tree/master/microsite/data/on-demand) +with your recording's information. Example: + +```yaml +--- +title: # name of the meetup +date: February 23, 2022 # date, format: Month day, year. This is the index field. +category: Meetup # Can be Event, Meetup, Webinar +description: # description, summary +youtubeUrl: # Url to youtube video +youtubeImgUrl: # Url to the preview image, for Youtube this is the format: https://i1.ytimg.com/vi//mqdefault.jpg +``` + +### Adding an upcoming meetup to the meetup page + +To add an upcoming meetup to the [meetup page](https://backstage.io/on-demand) +create a file in +[`microsite/data/on-demand`](https://github.com/backstage/backstage/tree/master/microsite/data/on-demand) +with your meetup's information. Example: + +```yaml +--- +title: # name of the meetup +date: February 23, 2022 # date, format: Month day, year. This is the index field. +category: Upcoming # Should be "Upcoming" +description: # description, summary +youtubeUrl: # Url to youtube video +youtubeImgUrl: # Url to the preview image, for Youtube this is the format: https://i1.ytimg.com/vi//mqdefault.jpg +rsvpUrl: # Link to registration, calendar item, etc +eventUrl: # Link to event landing page +``` + +After the meetup is done, and the recording is ready you can change it to a meetup recording. diff --git a/microsite/data/on-demand/20220216-01.yaml b/microsite/data/on-demand/20220216-01.yaml new file mode 100644 index 0000000000..1fc7371345 --- /dev/null +++ b/microsite/data/on-demand/20220216-01.yaml @@ -0,0 +1,7 @@ +--- +title: Community Sessions +date: February 16, 2022 +category: Meetup +description: This community session marks one year of Backstage community sessions! In this session, we celebrate one year of the Backstage community, hear from Patrik on stabilizing core APIs, learn more about Homepage Templates, find hidden info about your catalog entities, and Q&A. +youtubeUrl: https://youtu.be/evf_LV0KzIk +youtubeImgUrl: https://i1.ytimg.com/vi/evf_LV0KzIk/mqdefault.jpg diff --git a/microsite/data/on-demand/20220223-01.yaml b/microsite/data/on-demand/20220223-01.yaml new file mode 100644 index 0000000000..6efc9fe22c --- /dev/null +++ b/microsite/data/on-demand/20220223-01.yaml @@ -0,0 +1,7 @@ +--- +title: Community Sessions +date: February 23, 2022 +category: Meetup +description: Community Sessions Anniversary , SWAG opportunity❗, TechDocs add-on framework, URL Reader demo 👨‍💻, Q&A +youtubeUrl: https://youtu.be/Buu_KWdIFwU +youtubeImgUrl: https://i1.ytimg.com/vi/Buu_KWdIFwU/mqdefault.jpg diff --git a/microsite/data/on-demand/20220323.yaml b/microsite/data/on-demand/20220323.yaml new file mode 100644 index 0000000000..4a55111c3e --- /dev/null +++ b/microsite/data/on-demand/20220323.yaml @@ -0,0 +1,9 @@ +--- +title: Contributor Community Sessions +date: March 23, 2022 +category: Upcoming +description: Join the maintainers and contributors for the Contributor Community Sessions +youtubeUrl: https://youtu.be/evf_LV0KzIk +youtubeImgUrl: https://i1.ytimg.com/vi/evf_LV0KzIk/mqdefault.jpg +rsvpUrl: https://calendar.google.com/calendar/embed?src=c_qup9gbhn9sqpuao6trttd8mk5s@group.calendar.google.com +eventUrl: https://github.com/backstage/community/issues diff --git a/microsite/pages/en/community.js b/microsite/pages/en/community.js new file mode 100644 index 0000000000..35eb6d766c --- /dev/null +++ b/microsite/pages/en/community.js @@ -0,0 +1,163 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const React = require('react'); +const Components = require(`${process.cwd()}/core/Components.js`); +const Block = Components.Block; + +const Background = props => { + const { config: siteConfig } = props; + const { baseUrl } = siteConfig; + return ( +
+ + + Backstage Community + + + What's the use of having fun if you can't share it? Exactly. Join + the vibrant community around the Backstage project. Be it on + GitHub, social media, Discord... You'll find a welcoming + environment, to ensure this we follow the{' '} + + {' '} + CNCF Code of Conduct + {' '} + in everything we do. + + + + + Main community channels +
- Chat and get support on our{' '} + Discord +
- Get into contributing with the{' '} + + Good First Issues + +
- Subscribe to the{' '} + + Community newsletter + +
- Join the{' '} + + Twitter community + +
+ + + + + + + + Community Sessions + + + Adopters Community Sessions +
+ Backstage Community Sessions is the monthly meetup where we all + come together to listen to the latest maintainer updates, learn + from eachother about adopting, share exciting new demos or discuss + any relevat topic like developer effectiveness, developer + experience, developer portals, etc. + + + + Contributor Community Sessions +
+ Discuss all things contributing, diving deep under the hood of + Backstage (Backstage of Backstage? Backerstage?). An open + discussion with maintainers and contributors of Backstage. + + Watch now + + + + + + + + + + + Backstage official Newsletter + + The official monthly Backstage newsletter. Containing the latest + news from your favorite project. + + + Subscribe + + + + + + + + + + Spotlight + + A recognition for valuable community work, the{' '} + Contributor Spotlight. Nominate contributing members for + their efforts! We'll put them in the spotlight ❤️. +
+ + Nominate now + + + Open Mic Meetup + + A monthly casual get together of Backstage users sharing their + experiences and helping each other. Hosted by{' '} + Roadie.io and + Frontside Software. +
+ + + Learn more + + + + Backstage Weekly + + A weekly newsletter with news, updates and things community from + your friends at Roadie.io. + + + Learn more + + + + + + + + + + +
+ ); +}; + +module.exports = Background; diff --git a/microsite/pages/en/live.js b/microsite/pages/en/live.js new file mode 100644 index 0000000000..583ba5af10 --- /dev/null +++ b/microsite/pages/en/live.js @@ -0,0 +1,85 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const React = require('react'); +const Components = require(`${process.cwd()}/core/Components.js`); +const Block = Components.Block; + +const Background = props => { + const { config: siteConfig } = props; + const { baseUrl } = siteConfig; + return ( +
+ + + + Community Sessions + + Please be aware we follow the{' '} + + {' '} + CNCF Code of Conduct + + . + + + + + + + + + + + + + + + + + + + + Don't be a stranger + + Main community channels +
- Chat and get support on our{' '} + Discord +
- Get into contributing with the{' '} + + Good First Issues + +
- Subscribe to the{' '} + + Community newsletter + +
- Join the{' '} + + Twitter community + +
+ + + + +
+ ); +}; + +module.exports = Background; diff --git a/microsite/pages/en/nominate.js b/microsite/pages/en/nominate.js new file mode 100644 index 0000000000..6656257d52 --- /dev/null +++ b/microsite/pages/en/nominate.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const React = require('react'); +const Components = require(`${process.cwd()}/core/Components.js`); +const Block = Components.Block; + +const Background = props => { + const { config: siteConfig } = props; + const { baseUrl } = siteConfig; + return ( +
+ + + Contributor Spotlight nomination + + + + + + + + + + + +
+ ); +}; + +module.exports = Background; diff --git a/microsite/pages/en/on-demand.js b/microsite/pages/en/on-demand.js new file mode 100644 index 0000000000..56a5095c6f --- /dev/null +++ b/microsite/pages/en/on-demand.js @@ -0,0 +1,147 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +const fs = require('fs'); +const yaml = require('js-yaml'); +const React = require('react'); +const Components = require(`${process.cwd()}/core/Components.js`); +const { + Block: { Container }, + BulletLine, +} = Components; + +const ondemandDirectory = require('path').join(process.cwd(), 'data/on-demand'); +const ondemandMetadata = fs + .readdirSync(ondemandDirectory) + .map(file => yaml.load(fs.readFileSync(`./data/on-demand/${file}`, 'utf8'))) + .sort((b, a) => a.date.toLowerCase().localeCompare(b.date.toLowerCase())); +const truncate = text => + text.length > 170 ? text.substr(0, 170) + '...' : text; + +const addVideoDocsLink = '/docs/overview/support'; +const defaultIconUrl = 'img/logo-gradient-on-dark.svg'; + +const Ondemand = () => ( +
+
+
+

Upcoming live events

+

Upcoming Backstage events

+ + + Add an event or recording + + +
+ + {ondemandMetadata + .filter(video => video.category === 'Upcoming') + .map( + ({ + title, + description, + category, + date, + youtubeUrl, + youtubeImgUrl, + rsvpUrl, + eventUrl, + }) => ( +
+
+
+

{title}

+

on {date}

+ + {category} +

+
+ {title} +

+
+
+
+

{truncate(description)}

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

Community on demand

+
+ + {ondemandMetadata + .filter(video => video.category !== 'Upcoming') + .map( + ({ + title, + description, + category, + date, + youtubeUrl, + youtubeImgUrl, + }) => ( +
+
+
+

{title}

+

on {date}

+ + {category} +

+
+ {title} +

+
+
+
+

{truncate(description)}

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

Do you have a recording of a meetup to include on this page?

+

+ + Add to the On-demand page + +

+
+ +

+ Help us create a go-to place for hours of Backstage related + content. +

+ +
+ +
+
+); + +module.exports = Ondemand; diff --git a/microsite/siteConfig.js b/microsite/siteConfig.js index 6e291aa994..d757ed448b 100644 --- a/microsite/siteConfig.js +++ b/microsite/siteConfig.js @@ -70,6 +70,10 @@ const siteConfig = { page: 'demos', label: 'Demos', }, + { + page: 'community', + label: 'Community', + }, ], /* path to images for header/footer */ diff --git a/microsite/static/css/on-demand.css b/microsite/static/css/on-demand.css new file mode 100644 index 0000000000..909459796c --- /dev/null +++ b/microsite/static/css/on-demand.css @@ -0,0 +1,143 @@ +.VideoCard { + background-color: #282828; + height: 100%; + padding: 16px; + display: flex; + flex-direction: column; +} + +.VideoGrid { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 1fr; +} + +@media (max-width: 1200px) { + .VideoGrid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (max-width: 815px) { + .VideoGrid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media only screen and (max-width: 485px) { + .VideoGrid { + grid-template-columns: 1fr; + } +} + +.VideoCard img { + float: left; + margin: 0px 16px 8px 0px; + height: 160px; + width: 300px; +} + +.VideoCardHeader { + display: flex; + flex-direction: row; + align-items: center; + max-height: fit-content; + min-height: fit-content; +} + +.VideoCardImage { + width: 200px; + height: 80px; + margin-right: 16px; +} + +.VideoCardImage img { + width: 100%; + max-width: 100%; +} + +.VideoCardTitle { + color: white; + vertical-align: top; + margin: 8px 0 0; +} + +.VideoCardInfo { + flex: 1; +} + +.VideoAddNewButton { + position: absolute; + bottom: 16px; + right: 0px; +} + +@media only screen and (max-width: 485px) { + .VideoAddNewButton { + bottom: -4px; + } +} + +.VideoButtonFilled { + padding: 4px 8px; + border-radius: 4px; + color: #69ddc7; +} + +.VideoButtonFilled:hover { + border: 1px solid #69ddc7; + background-color: transparent; +} + +.VideoCardChipOutlined { + font-size: small; + border-radius: 16px; + padding: 2px 8px; + border: 1px solid #69ddc7; + color: #69ddc7; +} + +.VideoCardFooter { + display: flex; + justify-content: flex-end; + align-items: flex-end; + margin-top: auto; + min-height: 2em; +} + +.VideoCardFooter a { + padding: 2px 8px; +} + +.VideoPageLayout { + margin: auto; + max-width: 1430px; + padding: 20px; +} + +.VideoPageHeader { + position: relative; +} + +.VideoPageHeader h2 { + display: inline-block; +} + +.VideoCardBody { + padding-top: 8px; +} + +.VideoCardDate, +.VideoCardDate a { + margin-bottom: 0.25em; + color: rgba(255, 255, 255, 0.6); +} + +.VideoCardDate a:hover { + color: white; +} + +#add-video-card { + border: 1px solid #69ddc7; +} diff --git a/microsite/static/img/b-sessions.png b/microsite/static/img/b-sessions.png new file mode 100644 index 0000000000..35fb401341 Binary files /dev/null and b/microsite/static/img/b-sessions.png differ diff --git a/microsite/static/img/news-fpo.png b/microsite/static/img/news-fpo.png new file mode 100644 index 0000000000..cff7df917f Binary files /dev/null and b/microsite/static/img/news-fpo.png differ diff --git a/microsite/static/img/openmic.jpeg b/microsite/static/img/openmic.jpeg new file mode 100644 index 0000000000..09d3089639 Binary files /dev/null and b/microsite/static/img/openmic.jpeg differ diff --git a/microsite/static/img/roadie-newsletter.png b/microsite/static/img/roadie-newsletter.png new file mode 100644 index 0000000000..e0b8ceb55b Binary files /dev/null and b/microsite/static/img/roadie-newsletter.png differ diff --git a/microsite/static/img/spotlight.png b/microsite/static/img/spotlight.png new file mode 100644 index 0000000000..5e1bb57c10 Binary files /dev/null and b/microsite/static/img/spotlight.png differ