Skip to content

Commit

Permalink
resources (#77)
Browse files Browse the repository at this point in the history
  • Loading branch information
bretthayes authored Apr 6, 2022
1 parent 8250402 commit 7c699f6
Show file tree
Hide file tree
Showing 6 changed files with 265 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const Footer: FunctionComponent<Props> = ({ minimal, className }) => (
</>
)}

<div className="footer__postscript d-flex justify-content-between pt-4 pb-2 small">
<div className={`footer__postscript d-flex justify-content-between ${minimal ? 'py-3' : 'pt-4 pb-2'} small`}>
<ul className="nav">
<li className="nav-item text-muted mr-3">&copy; {new Date().getFullYear()} Sourcegraph</li>
<li className="nav-item">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const Layout: FunctionComponent<LayoutProps> = props => {

{!props.hideFooter && (
<Footer
className={`pt-4 ${props.className || ''} ${isCaseStudyPage ? 'bg-black' : ''}`}
className={`${props.className || ''} ${isCaseStudyPage ? 'bg-black' : ''}`}
minimal={props.minimal}
/>
)}
Expand Down
46 changes: 46 additions & 0 deletions src/components/YouTube.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { FunctionComponent } from 'react'

interface Props {
className?: string
id: string
title: string
autoplay?: boolean
captions?: boolean
start?: number
end?: number
loop?: boolean
controls?: boolean
branding?: boolean
}

/**
* A responsive YouTube video player.
* See https://developers.google.com/youtube/player_parameters for options.
*/
export const YouTube: FunctionComponent<Props> = ({
className = '',
id,
title,
autoplay = false,
captions = false,
start = 0,
end = 0,
loop = false,
controls = true,
branding = false,
}) => (
<div className={`video-embed embed-responsive embed-responsive-16by9 ${className}`}>
<iframe
className="embed-responsive-item"
src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=${autoplay ? 1 : 0}&cc_load_policy=${
captions ? 1 : 0
}&start=${start}&end=${end}&loop=${loop ? 1 : 0}&controls=${controls ? 1 : 0}&modestbranding=${
branding ? 1 : 0
}&rel=0`}
allowFullScreen={true}
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
frameBorder="0"
title={title}
/>
</div>
)
3 changes: 1 addition & 2 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export { Blockquote, BlockquoteWithBorder, BlockquoteWithLogoTop, BlockquoteWith
export { Video } from './Video'
export { IntegrationsSection } from './IntegrationsSection'
export { SelfHostedSection } from './SelfHostedSection'
export { YouTube } from './YouTube'

// Tracking
export { buttonStyle, buttonLocation } from './data/tracking'
Expand All @@ -29,9 +30,7 @@ export {
} from './Actions'

// Pricing

export { PricingPlanProperty, PricingPlanFeature, PricingPlan } from './Pricing'

export type { Features } from './Pricing'

// Page Specific
Expand Down
146 changes: 146 additions & 0 deletions src/pages/resources/abcs-book.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import { FunctionComponent } from 'react'

import Link from 'next/link'

import { Layout, ContentSection, YouTube } from '@components'

export const AbcsEbook: FunctionComponent = () => (
<Layout
minimal={true}
meta={{
title: "Our ABCs: Always Be Coding children's book. Made with ❤️ by Sourcegraph.",
description:
'At Sourcegraph, many of us have young children who we\'re trying to provide fun new learning experiences for at home. That\'s why we created a new digital children\'s book titled "Our ABCs: Always Be Coding"—for all children that wonder what their techie parents do all day, night, and some weekends, too!',
image: 'https://about.sourcegraph.com/other/abcs-book/our-abcs.png',
}}
>
<ContentSection color="white" className="pt-6 pb-5">
<div className="row justify-content-md-center">
<div className="col-small-12">
<p className="text-center">
<img
src="/other/abcs-book/our-abcs-hero.png"
className="w-100 px-2 mb-3"
role="presentation"
alt="Our ABCs: Always Be Coding book"
/>
</p>
<h1 className="text-center">Our ABCs: Always Be Coding children's book</h1>
<p className="text-center my-5">
<a
className="button btn btn-primary"
id="abc-dlbook"
href="https://about.sourcegraph.com/resources/our-abcs-childrens-book-download"
>
Download your book
</a>
</p>
<hr />
</div>
</div>
<div className="row justify-content-md-center mt-3">
<div className="col-md-8">
<YouTube id="6bCO63O4swI" title="Our ABCs: Always Be Coding children's book by Sourcegraph" />
<p className="mt-5">
At Sourcegraph, many of us have young children who we're trying to provide fun new learning
experiences for at home.
</p>
<p>
That's why we created a new digital children's book titled{' '}
<a href="https://about.sourcegraph.com/resources/our-abcs-childrens-book-download">
<strong>&quot;Our ABCs: Always Be Coding&quot;</strong>
</a>
—for all children at home that wonder what their techie parents do all day, night, and some
weekends too!
</p>
<p>
The A-Z format introduces simple concepts in a fun and easy-to-understand way so that kids can
get curious about coding and perhaps take the first step in beginning their journey in learning
how to code. Or at least it will provide an engaging and educational distraction to give you a
break for a few minutes!
</p>
<p className="text-center">
<a
href="https://about.sourcegraph.com/resources/our-abcs-childrens-book-download"
className="d-block"
id="abc-dlbook"
>
<img
src="/other/abcs-book/our-abcs.png"
className="img-drop-shadow mb-0"
width="350px"
alt="Book cover: Our ABCs"
/>
</a>
</p>
<p className="text-center my-5">
<a
className="button btn btn-primary"
id="abc-dlbook"
href="https://about.sourcegraph.com/resources/our-abcs-childrens-book-download"
>
Download your book
</a>
</p>
<p>
We hope you enjoy the book and would love to get your feedback{' '}
<a href="https://twitter.com/intent/tweet?text=For%20all%20children%20at%20home%20that%20wonder%20what%20their%20techie%20parents%20do%20all%20day%2C%20night%2C%20and%20some%20weekends%2C%20too%2C%20they%20need%20the%20%22Our%20ABCs%3A%20Always%20Be%20Coding%22%20book%20by%20@sourcegraph%20-%20https%3A//about.sourcegraph.com/abc%20%23ABCsbook">
via Twitter
</a>{' '}
or <a href="mailto:hi+abc@sourcegraph.com">email</a>.
</p>

<p className="text-center">
<a
className="button btn btn-primary"
href="https://twitter.com/intent/tweet?text=For%20all%20children%20at%20home%20that%20wonder%20what%20their%20techie%20parents%20do%20all%20day%2C%20night%2C%20and%20some%20weekends%2C%20too%2C%20they%20need%20the%20%22Our%20ABCs%3A%20Always%20Be%20Coding%22%20book%20by%20@sourcegraph%20-%20https%3A//about.sourcegraph.com/abc%20%23abcsbook%20%23TYCTWD%20%23TODASTW%20%23BringYourKidsToWorkDay"
>
<svg className="mdi-icon " width="25" height="25" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
Click to Tweet
</a>
</p>

<h2 className="mt-5">FAQs</h2>

<p>We've had quite a few folks reach out with questions about this book and future ones.</p>

<h3 className="h4 pt-3">Do you plan on selling this as a physical book?</h3>
<p>
We want to make it easy for folks to get a physical copy and while we don't (yet) have plans to
print and distribute, we're looking into vendors that can print and ship on demand. In any case,
the PDF is high-resolution so you can print it yourself.
</p>

<h3 className="h4 pt-3">Do you have any other books like this planned?</h3>
<p>
We've been blown away by the response to this book and while we'd love to add "children's book
authoring" to the list of Sourcegraph capabilities, we haven't yet decided if we plan to turn
this into a series of similar books.
</p>
</div>
</div>
<hr />
<div className="row justify-content-md-center mt-5">
<div className="col-md-10">
<h3 className="text-center">About Sourcegraph</h3>
<p>
Sourcegraph empowers all developers to explore, navigate and better understand all code, faster,
with <Link href="/universal-code-search">Universal Code Search</Link>. Sourcegraph's mission is to
make it easier and faster for developers to work on solving problems.
</p>
<p>
To learn more, get our ebook:{' '}
<Link href="/resources/universal-code-search-ebook/?utm_source=abc">
Sourcegraph: Universal code search and intelligence
</Link>
.
</p>
</div>
</div>
</ContentSection>
</Layout>
)

export default AbcsEbook
70 changes: 70 additions & 0 deletions src/pages/resources/universal-code-search-ebook.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { FunctionComponent } from 'react'

import { Layout, ContentPage } from '@components'
import { useHubSpot } from '@hooks'

export const UniversalCodeSearchEbook: FunctionComponent = () => {
useHubSpot({
portalId: '2762526',
formId: 'd2425310-4f8c-4b6c-8b63-c4729912df82',
targetId: 'hubspotContactForm',
chiliPiper: false
})

return (
<Layout
minimal={true}
meta={{
title: 'Sourcegraph: Universal code search and intelligence',
description: 'Download the eBook: Universal code search and intelligence',
image: 'https://info.sourcegraph.com/hubfs/sourcegraph-universal-code-search-ebook-social.png',
}}
>
<ContentPage
title="Universal Code Search"
description="Ship better software faster with Sourcegraph Universal Code Search with enhanced code search, review, and code change management."
className="text-dark"
titleClassName="display-2 font-weight-bold"
>
<div className="landing-page bg-white text-dark">
<div className="container-lg py-6 px-5">
<div className="row flex-wrap-reverse">
<div className="col-md-4">
<p>By Quinn Slack and Beyang Liu</p>
<p>
We have entered the era of Big Code: rapidly growing codebases and repositories,
multiple languages and file formats, and a wide variety of developer tools. To
grapple with this increasing complexity, engineering teams need a tool that provides
Universal Code Search.
</p>

<p>With this ebook, you will learn:</p>
<ul>
<li>What is Universal Code Search</li>
<li>Top reasons developers rely on Sourcegraph</li>
<li>How to improve code reviews with code navigation</li>
<li>Why engineering leaders need code search and intelligence for their teams</li>
</ul>
</div>
<div className="col-md-4">
<img
src="/external-logos/sourcegraph-universal-code-search-ebook-v1.jpg"
alt="Download: Universal Code Search and Intelligence"
className="landing-page__img"
/>
</div>
<div className="col-md-4">
<h3 className="font-weight-light text-sans-serif">Get your free ebook.</h3>
<div className="form mt-5">
<div id="hubspotContactForm" className="d-flex justify-center" />
</div>
</div>
</div>
</div>
</div>
</ContentPage>
</Layout>
)
}

export default UniversalCodeSearchEbook

0 comments on commit 7c699f6

Please sign in to comment.