Added community hub - initial commit
Signed-off-by: Suzanne Daniels <suzanned@spotify.com>
This commit is contained in:
Suzanne Daniels
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* 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 (
|
||||
<main className="MainContent">
|
||||
{new Date('2022-03-17') > new Date() ? <Component /> : null}
|
||||
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Title>Backstage Community</Block.Title>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
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{' '}
|
||||
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
|
||||
{' '}
|
||||
CNCF Code of Conduct
|
||||
</a>{' '}
|
||||
in everything we do.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
Main community channels
|
||||
<br />- Chat and get support on our{' '}
|
||||
<a href="https://discord.gg/MUpMjP2">Discord</a>
|
||||
<br />- Get into contributing with the{' '}
|
||||
<a href="https://github.com/backstage/backstage/contribute">
|
||||
Good First Issues
|
||||
</a>
|
||||
<br />- Subscribe to the{' '}
|
||||
<a href="https://mailchi.mp/spotify/backstage-community">
|
||||
Community newsletter
|
||||
</a>
|
||||
<br />- Join the{' '}
|
||||
<a href="https://twitter.com/i/communities/1494019781716062215">
|
||||
Twitter community
|
||||
</a>
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Title>Community Sessions</Block.Title>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
<b>Adopters Community Sessions</b>
|
||||
<br />
|
||||
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 demo's or
|
||||
discuss any relevat topic like developer effectiveness, developer
|
||||
experience, developer portals, etc.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
<b>Contributor Community Sessions</b>
|
||||
<br />
|
||||
Discuss all things contributing, diving deep under the hood of
|
||||
Backstage (Backstage of Backstage? Backerstage?). An open
|
||||
discussion with maintainers and contributors of Backstage.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="/on-demand">Watch now</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Graphic
|
||||
x={60}
|
||||
y={12}
|
||||
width={30}
|
||||
src={`${baseUrl}img/b-sessions.png`}
|
||||
/>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Backstage official Newsletter</Block.Title>
|
||||
<Block.Paragraph>
|
||||
The official monthly Backstage newsletter. Containing the latest
|
||||
news from your favorite project.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://roadie.io/backstage-weekly/">
|
||||
Subscribe
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.Graphic
|
||||
x={45}
|
||||
y={12}
|
||||
width={40}
|
||||
src={`${baseUrl}img/roadie-newsletter.png`}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Spotlight</Block.Title>
|
||||
<Block.Paragraph>
|
||||
A recognition for valuable community work, the{' '}
|
||||
<b>Contributor Spotlight</b>. Nominate contributing members for
|
||||
their efforts! We'll put them in the spotlight ❤️.
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://bit.ly/backstage-nominate ">
|
||||
Nominate now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Open Mic Meetup</Block.Title>
|
||||
<Block.Paragraph>
|
||||
A monthly casual get together of Backstage users sharing their
|
||||
experiences and helping each other. Hosted by Roadie.io and
|
||||
Frontside Software.
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://backstage-openmic.com/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Backstage Weekly</Block.Title>
|
||||
<Block.Paragraph>
|
||||
A weekly newsletter with news, updates and things community from
|
||||
your friends at Roadie.io
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://roadie.io/backstage-weekly/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Graphic
|
||||
x={41}
|
||||
y={12}
|
||||
width={40}
|
||||
src={`${baseUrl}img/roadie-newsletter.png`}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -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 (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Community Sessions</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Please be aware we follow the{' '}
|
||||
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
|
||||
{' '}
|
||||
CNCF Code of Conduct
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Paragraph>
|
||||
<iframe
|
||||
width="1280"
|
||||
height="720"
|
||||
src="https://www.youtube.com/embed/OmXi6iwq5qo"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</Block.Paragraph>
|
||||
<Block.TextBox>
|
||||
<iframe
|
||||
src="https://www.youtube.com/live_chat?v=OmXi6iwq5qo&embed_domain=localhost&dark_theme=1"
|
||||
width="400px"
|
||||
height="680px"
|
||||
></iframe>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Don't be a stranger</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Main community channels
|
||||
<br />- Chat and get support on our{' '}
|
||||
<a href="https://discord.gg/MUpMjP2">Discord</a>
|
||||
<br />- Get into contributing with the{' '}
|
||||
<a href="https://github.com/backstage/backstage/contribute">
|
||||
Good First Issues
|
||||
</a>
|
||||
<br />- Subscribe to the{' '}
|
||||
<a href="https://mailchi.mp/spotify/backstage-community">
|
||||
Community newsletter
|
||||
</a>
|
||||
<br />- Join the{' '}
|
||||
<a href="https://twitter.com/i/communities/1494019781716062215">
|
||||
Twitter community
|
||||
</a>
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -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/community/add-content';
|
||||
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
|
||||
|
||||
const Ondemand = () => (
|
||||
<main className="MainContent">
|
||||
<div className="VideoPageLayout">
|
||||
<div className="VideoPageHeader">
|
||||
<h2>Upcoming live events</h2>
|
||||
<p>Upcoming Backstage events</p>
|
||||
<span>
|
||||
<a className="VideoAddNewButton ButtonFilled" href={addVideoDocsLink}>
|
||||
<b>Add an event or recording</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<Container wrapped className="VideoGrid">
|
||||
{ondemandMetadata
|
||||
.filter(video => video.category === 'Upcoming')
|
||||
.map(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
date,
|
||||
youtubeUrl,
|
||||
youtubeImgUrl,
|
||||
rsvpUrl,
|
||||
eventUrl,
|
||||
}) => (
|
||||
<div className="VideoCard">
|
||||
<div className="VideoCardHeader">
|
||||
<div className="VideoCardInfo">
|
||||
<h3 className="VideoCardTitle">{title}</h3>
|
||||
<p className="VideoCardDate">on {date}</p>
|
||||
|
||||
<span className="VideoCardChipOutlined">{category}</span>
|
||||
<p>
|
||||
<br />
|
||||
<img src={youtubeImgUrl} alt={title} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="VideoCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="VideoCardFooter">
|
||||
<a className="VideoButtonFilled" href={eventUrl}>
|
||||
Event page
|
||||
</a>
|
||||
<a className="VideoButtonFilled" href={rsvpUrl}>
|
||||
Remind me
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</Container>
|
||||
<BulletLine style={{ width: '100% ' }} />
|
||||
<div className="VideoPageHeader">
|
||||
<h2>Community on demand</h2>
|
||||
</div>
|
||||
<Container wrapped className="VideoGrid">
|
||||
{ondemandMetadata
|
||||
.filter(video => video.category !== 'Upcoming')
|
||||
.map(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
date,
|
||||
youtubeUrl,
|
||||
youtubeImgUrl,
|
||||
}) => (
|
||||
<div className="VideoCard">
|
||||
<div className="VideoCardHeader">
|
||||
<div className="VideoCardInfo">
|
||||
<h3 className="VideoCardTitle">{title}</h3>
|
||||
<p className="VideoCardDate">on {date}</p>
|
||||
|
||||
<span className="VideoCardChipOutlined">{category}</span>
|
||||
<p>
|
||||
<br />
|
||||
<img src={youtubeImgUrl} alt={title} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="VideoCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="VideoCardFooter">
|
||||
<a className="VideoButtonFilled" href={youtubeUrl}>
|
||||
Watch on YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<div className="VideoCard" id="add-video-card">
|
||||
<div className="VideoCardBody">
|
||||
<p>Do you have a recording of a meetup to include on this page?</p>
|
||||
<p
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<a className="VideoButtonFilled" href={addVideoDocsLink}>
|
||||
<b>Add to the On-demand page</b>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Container className="VideoCardFooter">
|
||||
<p>
|
||||
Help us create a go-to place for hours of Backstage related
|
||||
content.
|
||||
</p>
|
||||
</Container>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
module.exports = Ondemand;
|
||||
Reference in New Issue
Block a user