Skip to content

Commit

Permalink
Port community page (#72)
Browse files Browse the repository at this point in the history 
* Transfer Community page
* Adjust list spacing
* replace list-spaced with bootstrap utility classes
* remove list-spaced in batch-changes, implement bootstrap utility classes on list
* point buttonStyle and buttonLocation to components, remove duplicate tracking.ts
* add nav-item overrride for styling tabs
* updated tab keys on What's Next
* organized classes in Community scss
* replace image styles with bootstrap or _spacing
* replace list-spaced class with bootstrap util on code-search
* correct What's Next tab colors for mobile
* add mobile tabs fix to Batch Changes scss
  • Loading branch information
@zlonko
zlonko authored Apr 6, 2022
1 parent e996a39 commit 8250402
Show file tree
Hide file tree
Showing 6 changed files with 283 additions and 25 deletions.
10 changes: 5 additions & 5 deletions src/pages/batch-changes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,14 @@ export const BatchChangesPage: FunctionComponent = () => (
<div className="row">
<div className="col-lg-5">
<h1 className="mb-3">Search, define, execute, and track code changes</h1>
<ul className="list-spaced">
<li>
<ul>
<li className="mt-2">
Find all occurrences of code to change with Sourcegraph{' '}
<a href="http://about.sourcegraph.com/">universal code search</a>
</li>
<li>Programmatically define changes by creating a declarative specification file</li>
<li>Execute specifications via a lightweight CLI</li>
<li>Track changeset lifecycle status across multiple code hosts via the Sourcegraph UI</li>
<li className="mt-2">Programmatically define changes by creating a declarative specification file</li>
<li className="mt-2">Execute specifications via a lightweight CLI</li>
<li className="mt-2">Track changeset lifecycle status across multiple code hosts via the Sourcegraph UI</li>
</ul>
</div>
<div className="col-lg-7">
Expand Down
8 changes: 4 additions & 4 deletions src/pages/code-search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,16 @@ export const CodeSearchPage: FunctionComponent = () => (
</div>
<div className="col-lg-6">
<h2 className="display-3 font-weight-bold mb-3 mt-lg-0 mt-3">A search engine built for code</h2>
<ul className="list-spaced">
<li>
<ul>
<li className="mt-3">
<strong>Universal.</strong> Point Sourcegraph at the repositories you work with, stored in
any code host, or search across the open source universe.
</li>
<li>
<li className="mt-3">
<strong>Powerful.</strong> Get answers quickly with literal, structural, and regular
expression search, along with smart filters and Code Intelligence.
</li>
<li>
<li className="mt-3">
<strong>Extensible.</strong> Connect all your other tools to get things like test coverage,
1-click open file in editor, custom highlighting, and information from your other favorite
services all in one place with
Expand Down
255 changes: 255 additions & 0 deletions src/pages/community.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
import { FunctionComponent } from 'react'

import Tab from 'react-bootstrap/Tab'
import Tabs from 'react-bootstrap/Tabs'

import {
buttonStyle,
buttonLocation,
ContentSection,
Layout
} from '@components'

export const Community: FunctionComponent = () => (
<Layout
meta={{
title: 'Welcome to the Sourcegraph Community',
description:
"Sourcegraph is so much more than a universal code search engine. It's the story of new gen-developers who renaissance-d the way we work, live, and collaborate. It's our unparalleled thinking that creates endless possibilities, to rebuild, to disrupt and to innovate relentlessly despite all the complexities of the big code. But we're just getting started. Imagine the road ahead if we take this journey together.",
image: 'https://about.sourcegraph.com/sourcegraph-og.png',
}}
className="community-page"
heroAndHeaderClassName="community-page__hero-and-header"
hero={
<div className="container pb-4">
<div className="row p-5">
<div className="col-lg-6">
<div className="text-uppercase">Join us</div>
<h1 className="display-2 font-weight-bold mb-0">Welcome to the Sourcegraph Community</h1>
<p className="home__semiwide-paragraph my-5 display-5">
Seek guidance. Share best practices. Ask questions. The Sourcegraph Community is your new
platform to connect with one of the world's most talented developer communities. Here, we
encourage everyone to learn from each other and share everything they know. Because when we
collaborate, we grow faster, better, and stronger.
</p>
<a
className="btn btn-primary"
data-button-style={buttonStyle.primary}
data-button-location={buttonLocation.hero}
data-button-type="cta"
href="https://srcgr.ph/wp-join-community-space"
title="Join our Slack"
>
Join our Slack
</a>
</div>
<div className="col-lg-6">
<figure>
<img
className="w-100 mt-7"
src="/community/hero_illustration.svg"
alt="Sourcegraph Community"
/>
</figure>
</div>
</div>
</div>
}
>
<ContentSection className="py-5 text-center">
<h2 className="display-3 font-weight-bold mt-5 mb-3">Get up to speed</h2>
<div className="row justify-content-center">
<p className="col-md-8">
We can’t give you a 25-hour day, but here is a{' '}
<a href="http://srcgr.ph/cheatsheet">speed sheet</a> with the most useful Sourcegraph
shortcuts. Need even more speed? Fasten your seat belt and dive into our curated{' '}
<a href="https://learn.sourcegraph.com/tags/sourcegraph">tutorials</a> &#38; other{' '}
<a href="https://docs.sourcegraph.com/">tip documents</a>.
</p>
</div>
<div className="row">
<div className="col-12 mt-4">
<a href="http://srcgr.ph/cheatsheet">
<figure>
<img
className="max-w-800 w-100"
src="/community/cheatsheet_top.png"
alt="Sourcegraph Cheatsheet"
/>
</figure>
</a>
</div>
</div>
</ContentSection>

<div className="bg-gradient-green-blue py-5">
<ContentSection className="py-5">
<div className="row">
<div className="col-lg-6">
<h2 className="display-3 font-weight-bold mb-3">Sourcegraph Champions Program</h2>
<p>
In the spirit of collaboration, we created the Sourcegraph Champions Program to serve the
developer community, create a friendly networking space and share knowledge among each
other.
</p>
<p>
We believe that if we create the right environment and provide equal resources for all,
everyone can learn how to code. This is our mission. And if you share the same idea you are
a "champion" in our eyes.
</p>
<p>
We can't wait to meet you! And send you really cool custom swag ;)
<br />
<a className="btn btn-primary mt-3" href="https://handbook.sourcegraph.com/marketing/becoming_a_sourcegraph_champion">
Become a Sourcegraph Champion
</a>
</p>
<p>
Or if you know someone that should be a Sourcegraph Champion, please{' '}
<a href="https://forms.gle/QP6BBCpN1TwQfHzo6">nominate them</a>.
</p>
</div>
<div className="col-lg-6">
<img
className="w-100 mt-6"
src="/community/SG_Robots_Trophy.png"
alt="Become a Sourcegraph Champion!"
/>
</div>
</div>
</ContentSection>
</div>

<ContentSection className="py-6">
<div className="row">
<div className="col-lg-6">
<h2 className="display-3 font-weight-bold mt-5 mb-3">DM us on Slack. We're here.</h2>
What you seek is seeking you — come, chat and collaborate with inspiring engineers like you.
<ul>
<li className="mt-2">Ask questions - any questions: what is the best sit-stand desk?</li>
<li className="mt-2">Reach out to the community, discover new ideas &#38; seek or give mentorship</li>
<li className="mt-2">Share the road less traveled so that everyone can learn</li>
</ul>
<a className="btn btn-primary" href="https://srcgr.ph/wp-join-community-space" title="Join us on Slack">
Join us on Slack
</a>
</div>
<div className="col-lg-5">
<img
className="w-100 mt-6"
src="/community/SG_DM_us_on_slack.png"
alt="DM us on Slack!"
/>
</div>
</div>
</ContentSection>

<ContentSection className="py-4">
<h2 className="display-3 font-weight-bold mb-5 text-center">What's next?</h2>
<Tabs defaultActiveKey="sgEvents" id="use-cases" className="justify-content-center">
<Tab eventKey="sgEvents" title="Events">
<div className="row mt-5 justify-content-center">
<div className="col-lg-8">
<p>
Keynote speakers. Job opportunities and partnerships. You can find us in every major
industry event. Give us an air-hug if you see us.
</p>
<ul>
<li>
<a href="https://events.linuxfoundation.org/open-source-summit-north-america/register/">Open Source Summit</a> - 9/27 - 9/30
</li>
<li>
<a href="https://reactadvanced.com/">React Advanced London</a> - 10/22
</li>
<li>
<a href="https://africa.jsworldconference.com/">JSWorld Africa</a> - 10/30
</li>
<li>
<a href="https://festival.oscafrica.org/">Open Source Festival</a> - 11/11 - 11/13
</li>
<li>
<a href="https://www.gophercon.com/">GopherCon</a> - 12/5 - 12/8
</li>
</ul>
</div>
</div>
</Tab>
<Tab eventKey="devToolTime" title="Dev Tool Time">
<div className="row mt-5 justify-content-center">
<div className="col-lg-8">
<p>
Cool hardware. Most-wanted guests. And hot topics. Check our{' '}
<a href="https://srcgr.ph/dev-tool-time-playlist">YouTube channel</a> and
subscribe to keep up with new episodes.
</p>
<a href="https://srcgr.ph/dev-tool-time-playlist">
<img
className="w-100 h-auto mt-4"
width="850"
height="380"
src="/community/DTT_module.jpg"
alt="Dev Tool Time"
/>
</a>
</div>
</div>
</Tab>
<Tab eventKey="podcast" title="Podcast">
<div className="row mt-5 justify-content-center">
<div className="col-lg-8">
<p>
Tune into our developer convos wherever you listen to your favorite podcasts. Every
episode is an inspiration.
</p>
<a href="https://about.sourcegraph.com/podcast">
<img
className="w-100 h-auto mt-4"
width="750"
height="472"
src="/community/Podcast_module.png"
alt="Podcasts"
/>
</a>
</div>
</div>
</Tab>
</Tabs>
</ContentSection>

<ContentSection className="py-5">
<div className="row">
<div className="col-lg-7">
<h2 className="display-3 font-weight-bold mb-3">We’d love to hear from you!</h2>
<br />
Connect with us on the Sourcegraph Community Slack group, direct message us on Twitter, LinkedIn, or
email us at <a href="mailto:[email protected]">[email protected]</a>.
</div>
<div className="col-lg-5 mt-3">
<a
className="btn btn-secondary"
data-button-style={buttonStyle.primary}
data-button-location={buttonLocation.trySourcegraph}
data-button-type="cta"
href="https://srcgr.ph/wp-join-community-space"
title="Join us on Slack"
>
Join us on Slack
</a>
<br />
<a
className="btn btn-primary mt-3"
data-button-style={buttonStyle.primary}
data-button-location={buttonLocation.trySourcegraph}
data-button-type="cta"
href="mailto:[email protected]"
title="Send us an email"
>
Send us an email
</a>
</div>
</div>
</ContentSection>
</Layout>
)

export default Community
4 changes: 0 additions & 4 deletions src/styles/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,10 +284,6 @@ table {
font-family: $font-family-base !important;
}

.list-spaced > li {
margin-bottom: 1rem;
}

.nav-tabs {
font-weight: 600;
font-size: 1.25em;
Expand Down
4 changes: 4 additions & 0 deletions src/styles/pages/_batch-changes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@

&:hover {
color: $brand-primary-blue;

@media only screen and (max-width: 990px) {
color: unset;
}
}
}
}
Expand Down
27 changes: 15 additions & 12 deletions src/styles/pages/_community.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,20 @@
background-size: 100% 100%;
background-position: top left;
}
}

.hero_img {
width: 100%;
margin-top: 100px;
}

.cheatsheet_img {
max-width: 75%;
}

.sg_champion_img {
width: 100%;
.nav-item {
button {
font-weight: 600;
background-color: transparent;
color: $blue;

&:hover {
color: $brand-primary-blue;

@media only screen and (max-width: 990px) {
color: unset;
}
}
}
}
}

0 comments on commit 8250402

Please sign in to comment.