White paper page and related components (#83)

* white papers WIP * jumbotron rework * cleanup * nuke dupe component * cleanup and bootstrap defaults * prettier and linting fix * improvements
sourcegraph · Apr 8, 2022 · 84d90a2 · 84d90a2
1 parent b236e12
commit 84d90a2
Show file tree

Hide file tree

Showing 12 changed files with 381 additions and 136 deletions.
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
@@ -172,7 +172,9 @@ const Footer: FunctionComponent<Props> = ({ minimal, className }) => (
                 </>
             )}
 
-            <div className={`footer__postscript d-flex justify-content-between ${minimal ? 'py-3' : '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">

diff --git a/src/components/WhitePaperPage/index.tsx b/src/components/WhitePaperPage/index.tsx
@@ -0,0 +1,44 @@
+import { FunctionComponent, ReactNode } from 'react'
+
+import classNames from 'classnames'
+
+import { TrySourcegraph } from 'components/TrySourcegraph'
+
+import styles from './whitePaperPage.module.scss'
+
+interface Props {
+    title: string
+    pdf?: string
+    className?: string
+    children?: ReactNode
+    heroBackgroundImage?: string
+}
+
+export const WhitePaperPage: FunctionComponent<Props> = ({ title, className, pdf, children, heroBackgroundImage }) => (
+    <div className={className}>
+        <div
+            className={classNames('jumbotron rounded-0 min-h-250 d-flex align-items-center text-light', className, {
+                [styles.hero]: heroBackgroundImage,
+            })}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={heroBackgroundImage ? { backgroundImage: `url(${heroBackgroundImage})` } : undefined}
+        >
+            <div className="container text-center py-5">
+                <span className="d-block mt-1 text-uppercase font-weight-bold">white paper</span>
+                <h1>{title}</h1>
+                {pdf && (
+                    <a href={pdf} className="btn btn-primary mt-4" rel="noreferrer nofollow" target="_blank">
+                        <i className="fa fa-file-pdf pr-2" />
+                        Download PDF
+                    </a>
+                )}
+            </div>
+        </div>
+
+        {children}
+
+        <div className="py-6">
+            <TrySourcegraph />
+        </div>
+    </div>
+)
diff --git a/src/components/WhitePaperPage/whitePaperPage.module.scss b/src/components/WhitePaperPage/whitePaperPage.module.scss
@@ -0,0 +1,5 @@
+.hero {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,6 +1,4 @@
 // Common
-export { Layout } from './Layout'
-export { ContentPage } from './ContentPage'
 export { ContentSection } from './ContentSection'
 export { Jumbotron } from './Jumbotron'
 export { RequestDemoForm } from './RequestDemoForm'
@@ -38,7 +36,7 @@ export { CustomCarousel, QuoteCarousel } from './Carousels'
 export { PricingPlanProperty, PricingPlanFeature, PricingPlan } from './Pricing'
 export type { Features } from './Pricing'
 
-// Page Specific
+// Case Studies
 export {
     CaseStudyJumbotron,
     CaseStudyLayout,
@@ -61,3 +59,8 @@ export {
     ReleasePost,
     BLOG_TYPE_TO_INFO,
 } from './Blog'
+
+// Layouts
+export { Layout } from './Layout'
+export { WhitePaperPage } from './WhitePaperPage'
+export { ContentPage } from './ContentPage'
diff --git a/src/pages/batch-changes.tsx b/src/pages/batch-changes.tsx
@@ -101,9 +101,13 @@ export const BatchChangesPage: FunctionComponent = () => (
                                 Find all occurrences of code to change with Sourcegraph{' '}
                                 <a href="http://about.sourcegraph.com/">universal code search</a>
                             </li>
-                            <li className="mt-2">Programmatically define changes by creating a declarative specification file</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>
+                            <li className="mt-2">
+                                Track changeset lifecycle status across multiple code hosts via the Sourcegraph UI
+                            </li>
                         </ul>
                     </div>
                     <div className="col-lg-7">

diff --git a/src/pages/community.tsx b/src/pages/community.tsx
@@ -3,12 +3,7 @@ import { FunctionComponent } from 'react'
 import Tab from 'react-bootstrap/Tab'
 import Tabs from 'react-bootstrap/Tabs'
 
-import {
-        buttonStyle,
-        buttonLocation,
-        ContentSection,
-        Layout
-    } from '@components'
+import { buttonStyle, buttonLocation, ContentSection, Layout } from '@components'
 
 export const Community: FunctionComponent = () => (
     <Layout
@@ -60,10 +55,9 @@ export const Community: FunctionComponent = () => (
             <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{' '}
+                    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>
@@ -100,7 +94,10 @@ export const Community: FunctionComponent = () => (
                         <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">
+                            <a
+                                className="btn btn-primary mt-3"
+                                href="https://handbook.sourcegraph.com/marketing/becoming_a_sourcegraph_champion"
+                            >
                                 Become a Sourcegraph Champion
                             </a>
                         </p>
@@ -127,19 +124,21 @@ export const Community: FunctionComponent = () => (
                     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">
+                            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>
+                    <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!"
-                    />
+                    <img className="w-100 mt-6" src="/community/SG_DM_us_on_slack.png" alt="DM us on Slack!" />
                 </div>
             </div>
         </ContentSection>
@@ -156,7 +155,10 @@ export const Community: FunctionComponent = () => (
                             </p>
                             <ul>
                                 <li>
-                                    <a href="https://events.linuxfoundation.org/open-source-summit-north-america/register/">Open Source Summit</a> - 9/27 - 9/30
+                                    <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
@@ -179,18 +181,18 @@ export const Community: FunctionComponent = () => (
                         <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.
+                                <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>
+                            <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>
@@ -201,15 +203,15 @@ export const Community: FunctionComponent = () => (
                                 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>
+                            <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>

diff --git a/src/pages/resources/abcs-book.tsx b/src/pages/resources/abcs-book.tsx
@@ -10,7 +10,7 @@ export const AbcsEbook: FunctionComponent = () => (
         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!',
+                "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',
         }}
     >
@@ -127,8 +127,8 @@ export const AbcsEbook: FunctionComponent = () => (
                     <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.
+                        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:{' '}

diff --git a/src/pages/resources/universal-code-search-ebook.tsx b/src/pages/resources/universal-code-search-ebook.tsx
@@ -8,7 +8,7 @@ export const UniversalCodeSearchEbook: FunctionComponent = () => {
         portalId: '2762526',
         formId: 'd2425310-4f8c-4b6c-8b63-c4729912df82',
         targetId: 'hubspotContactForm',
-        chiliPiper: false
+        chiliPiper: false,
     })
 
     return (