Added community hub - initial commit

Signed-off-by: Suzanne Daniels <suzanned@spotify.com>
2022-03-18 15:39:53 +01:00
parent 38b78e60d5
commit 9ed25d38f6
12 changed files with 568 additions and 0 deletions
@@ -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
@@ -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
@@ -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
@@ -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;
@@ -70,6 +70,10 @@ const siteConfig = {
      page: 'demos',
      label: 'Demos',
    },
+    {
+      page: 'community',
+      label: 'Community',
+    },
  ],

  /* path to images for header/footer */
@@ -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;
+}