Use Case/ Code Reuse

website/src/components/BlogListItem.tsx

@@ -9,7 +9,12 @@ interface Blog {
     description: string
     type: string
     href: string
-    image?: string
+    img?: Image
+}
+
+interface Image {
+    src: string
+    alt: string
 }
 
 export const BlogListItem: FunctionComponent<Props> = ({ blog }) => (
@@ -22,7 +27,7 @@ export const BlogListItem: FunctionComponent<Props> = ({ blog }) => (
             <p>{blog.description}</p>
         </div>
         <div className="col-sm-4 col-md-3 d-flex align-items-center">
-            {blog.image && <img className="flex-1 w-100" src={blog.image} />}
+            {blog.img && <img className="flex-1 w-100" alt={blog.img.alt} src={blog.img.src} />}
         </div>
     </div>
 )

website/src/components/CustomCarousel.tsx

@@ -30,7 +30,7 @@ interface CarouselItem {
 const CustomCarousel: FunctionComponent<CarouselProps> = props => {
     const carouselMainStyles = 'd-flex flex-wrap'
     const carouselRightPanelStyles =
-        'col-lg-6 col-md-8 col-sm-12 mt-lg-6 ml-md-6 px-lg-0 d-flex align-items-center align-items-lg-start'
+        'col-lg-6 col-md-10 col-sm-12 mt-lg-6 ml-md-6 px-lg-0 d-flex align-items-center align-items-lg-start text-lg-left text-md-center'
     const { items, autoAdvance, title } = props
     const carouselHook = useCarousel(items, autoAdvance ?? false)
     const carouselItems = carouselHook.carouselItems.items as CarouselItem[]

website/src/components/Layout.tsx

@@ -81,7 +81,7 @@ export default class Layout extends React.PureComponent<LayoutProps> {
                             isBlog={isBlog}
                             isProductPage={isProductPage}
                             minimal={this.props.minimal}
-                            className={`${this.props.className || ''}`}
+                            className={this.props.className || ''}
                             hideGetStartedButton={this.props.hideGetStartedButton}
                         />
                         {this.props.hero}

website/src/components/ThreeUpText.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from 'react'
+
+interface Item {
+    icon?: React.ReactNode
+    subtitle: React.ReactNode
+    description: string
+}
+
+interface Props {
+    title: string
+    items: Item[]
+}
+
+export const ThreeUpText: FunctionComponent<Props> = ({ title, items }) => (
+    <section className="row mx-lg-0 mx-4">
+        <h1 className="text-center col-12 max-w-lg-550 mx-auto mt-6 mb-lg-4 px-0 font-weight-bold">{title}</h1>
+
+        <div className="mb-6 d-flex flex-wrap justify-content-between">
+            {items.map((item, index) => (
+                <div key={`item-${index + 1}-${item.description}`} className="col-12 col-lg-4 text-center pt-5">
+                    {item.icon && item.icon}
+                    {item.subtitle}
+                    <p className="max-w-md-400 mx-auto">{item.description}</p>
+                </div>
+            ))}
+        </div>
+    </section>
+)

website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx

@@ -3,6 +3,7 @@ import { PageProps, Link } from 'gatsby'
 import slugify from 'slugify'
 
 import { Blockquote, BlockquoteWithLogoTop } from '../../components/Blockquote'
+import { ThreeUpText } from '../../components/ThreeUpText'
 import { CaseStudyJumbotron, AuthorBio } from '../../components/content/CaseStudyPage'
 import { CaseStudyCard, CASESTUDIES } from '../../components/product/CaseStudyCard'
 import { ContentSection } from '../../components/content/ContentSection'
@@ -13,6 +14,23 @@ import ChartBarIcon from 'mdi-react/ChartBarIcon'
 import CheckCircleOutlineIcon from 'mdi-react/CheckCircleOutlineIcon'
 import FlagOutlineIcon from 'mdi-react/FlagOutlineIcon'
 
+const threeUpTextItems = [
+    {
+        subtitle: <h4 className="pb-3 mx-auto max-w-300 font-weight-bold text-curious-blue">{'<'} 5 min</h4>,
+        description:
+            'Nutanix was able to see where JMSAppender existed, fix it, and send out a release in less than 5 minutes.',
+    },
+    {
+        subtitle: <h4 className="pb-3 mx-auto max-w-300 font-weight-bold text-curious-blue">4 days</h4>,
+        description:
+            'Nutanix was able to deliver patches to its customers that fully remediated the Log4j vulnerability.',
+    },
+    {
+        subtitle: <h4 className="pb-3 mx-auto max-w-300 font-weight-bold text-curious-blue">100% confidence</h4>,
+        description: 'Nutanix was able to confidently identify every instance of Log4j across its sprawling codebase.',
+    },
+]
+
 const NutanixCaseStudy: FunctionComponent<PageProps> = props => (
     <Layout
         location={props.location}
@@ -36,7 +54,7 @@ const NutanixCaseStudy: FunctionComponent<PageProps> = props => (
 
             <ContentSection color="white" className="py-6 text-center max-w-600">
                 <BlockquoteWithLogoTop
-                    quote={`Sourcegraph was the right product at the right time.`}
+                    quote="Sourcegraph was the right product at the right time."
                     by="Jon Kohler, Technical Director of Solution Engineering at Nutanix"
                     logoHref="https://nutanix.com"
                     logoAlt="Nutanix"
@@ -254,33 +272,10 @@ const NutanixCaseStudy: FunctionComponent<PageProps> = props => (
                 </section>
             </ContentSection>
 
-            <div className="bg-gradient-venus-radial py-lg-7 p-5">
-                <section className="container-xl">
-                    <h2 className="text-center pb-5 display-3 font-weight-bold">Results</h2>
-                    <div className="mb-5 row">
-                        <div className="col-sm-12 col-md-4 text-center">
-                            <h3 className="pb-3 font-weight-bold text-curious-blue">{'<'} 5 min</h3>
-                            <p className="max-w-md-400 max-w-lg-250 max-w-xl-250 mx-auto">
-                                Nutanix was able to see where JMSAppender existed, fix it, and send out a release in
-                                less than 5 minutes.
-                            </p>
-                        </div>
-                        <div className="col-sm-12 col-md-4 text-center">
-                            <h3 className="pb-3 font-weight-bold text-curious-blue">4 days</h3>
-                            <p className="max-w-md-400 max-w-lg-250 max-w-xl-250 mx-auto">
-                                Nutanix was able to deliver patches to its customers that fully remediated the Log4j
-                                vulnerability.
-                            </p>
-                        </div>
-                        <div className="col-sm-12 col-md-4 text-center">
-                            <h3 className="pb-3 font-weight-bold text-curious-blue">100% confidence</h3>
-                            <p className="max-w-md-400 max-w-lg-250 max-w-xl-250 mx-auto">
-                                Nutanix was able to confidently identify every instance of Log4j across its sprawling
-                                codebase.
-                            </p>
-                        </div>
-                    </div>
-                </section>
+            <div className="bg-gradient-venus-radial py-5">
+                <ContentSection className="my-lg-5">
+                    <ThreeUpText title="Results" items={threeUpTextItems} />
+                </ContentSection>
             </div>
 
             <ContentSection color="white" className="py-6 max-w-700 col-xl-5">

website/src/pages/code-insights.tsx

@@ -267,21 +267,30 @@ const blogListItems = [
         description:
             'How our Frontend Platform team used codemods to automate a challenging global migration to CSS modules, and Code Insights to track and communicate progress.',
         type: 'Blog post',
-        image: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/migrating-to-css-modules.png',
+        img: {
+            src: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/migrating-to-css-modules.png',
+            alt: 'Migrating to CSS modules with codemods and code insights blog thumbnail',
+        },
         href: '/blog/migrating-to-css-modules-with-codemods-and-code-insights',
     },
     {
         title: 'Announcing Code Insights: analytics for engineering teams to understand and visualize their codebase over time',
         description: 'Learn about why we built Code Insights from our CEO.',
         type: 'Blog post',
-        image: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/announcement-header.png',
+        img: {
+            src: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/announcement-header.png',
+            alt: 'Announcing code insights blog thumbnail',
+        },
         href: '/blog/announcing-code-insights',
     },
     {
         title: 'Dive into documentation',
         description: 'Learn everything you need to know about Code Insights.',
         type: 'Docs',
-        image: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/code-insights-docs.png',
+        img: {
+            src: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/code-insights-docs.png',
+            alt: 'Code insights documentation thumbnail',
+        },
         href: 'https://docs.sourcegraph.com/code_insights',
     },
 ]

website/src/pages/partner-podcast.tsx

@@ -13,15 +13,21 @@ const resourceItems = [
         description:
             'Download the guide to developer onboarding and learn how to shift to a culture of continuous onboarding in your engineering organization.',
         type: 'Guide',
-        image: '/guides/dev-onboarding/thumbnail.png',
+        img: {
+            src: '/guides/dev-onboarding/thumbnail.png',
+            alt: 'Continuous developer onboarding guide thumbnail',
+        },
         href: '/guides/continuous-developer-onboarding',
     },
     {
         title: 'Nutanix fixed Log4j quickly and confidently with Sourcegraph',
         description:
             'See how Nutanix was able to confidently identify every instance of Log4j across its sprwaling codebase and deliver patches to its customers that fully remediated the vulnerability within 4 days.',
         type: 'Case study',
-        image: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/code-insights-docs.png',
+        img: {
+            src: 'https://storage.googleapis.com/sourcegraph-assets/blog/code-insights-ga-blogs/code-insights-docs.png',
+            alt: 'Nutanix fixed Log4j quickly with Sourcegraph case study thumbnail',
+        },
         href: '/case-studies/nutanix-fixed-log4j-with-sourcegraph',
     },
 ]

website/src/pages/use-cases/code-health.tsx

@@ -12,6 +12,7 @@ import { QuoteCarousel } from '../../components/QuoteCarousel'
 import CustomCarousel from '../../components/CustomCarousel'
 import { ContentSection } from '../../components/content/ContentSection'
 import { CustomerLogos } from '../../components/CustomerLogos'
+import { ThreeUpText } from '../../components/ThreeUpText'
 import { buttonStyle, buttonLocation } from '../../tracking'
 import styles from './useCases.module.scss'
 
@@ -156,6 +157,27 @@ const blogListItems = [
     },
 ]
 
+const threeUpTextItems = [
+    {
+        icon: <MagnifyIcon className="mb-4 text-blurple" size={40} />,
+        subtitle: <h4 className="pb-3 mx-auto max-w-350 font-weight-bold">Find unhealthy code</h4>,
+        description:
+            'Build a healthier codebase by finding references to deprecated services, libraries, URL patterns, and more across all your repositories.',
+    },
+    {
+        icon: <WrenchOutlineIcon className="mb-4 text-blurple" size={40} />,
+        subtitle: <h4 className="pb-3 mx-auto max-w-350 font-weight-bold">Remediate code health issues</h4>,
+        description:
+            'Tackle refactoring efforts and tech debt from legacy systems and acquisitions with automated pull requests across your entire codebase.',
+    },
+    {
+        icon: <ClipBoardPulseOutlineIcon className="mb-4 text-blurple" size={40} />,
+        subtitle: <h4 className="pb-3 mx-auto max-w-350 font-weight-bold">Monitor code health initiatives</h4>,
+        description:
+            'Stay on top of code health changes. Monitor and measure code health initiatives and get actionable insights into the impact of large-scale changes.',
+    },
+]
+
 const UseCasePage: FunctionComponent<PageProps> = props => (
     <Layout
         location={props.location}
@@ -210,39 +232,7 @@ const UseCasePage: FunctionComponent<PageProps> = props => (
         }
     >
         <ContentSection className="my-lg-5">
-            <div className="row mx-lg-0 mx-4">
-                <div className="d-flex justify-content-center w-100 mt-7 mb-lg-4 mb-0">
-                    <h1 className="text-center font-weight-bold col-lg-10 px-lg-8">
-                        Track and improve code health across your entire codebase
-                    </h1>
-                </div>
-                <div className="d-flex flex-column flex-lg-row mt-lg-4 my-6">
-                    <div className="col-lg-4 pr-lg-5 pl-lg-0 text-center mb-4">
-                        <MagnifyIcon className="mb-4 text-blurple" size={40} />
-                        <h4 className="font-weight-bold">Find unhealthy code</h4>
-                        <p>
-                            Build a healthier codebase by finding references to deprecated services, libraries, URL
-                            patterns, and more across all your repositories.
-                        </p>
-                    </div>
-                    <div className="col-lg-4 text-center mb-4">
-                        <WrenchOutlineIcon className="mb-4 text-blurple" size={40} />
-                        <h4 className="font-weight-bold">Remediate code health issues</h4>
-                        <p>
-                            Tackle refactoring efforts and tech debt from legacy systems and acquisitions with automated
-                            pull requests across your entire codebase.
-                        </p>
-                    </div>
-                    <div className="col-lg-4 pl-lg-5 pr-lg-0 text-center mb-4">
-                        <ClipBoardPulseOutlineIcon className="mb-4 text-blurple" size={40} />
-                        <h4 className="font-weight-bold">Monitor code health initiatives</h4>
-                        <p>
-                            Stay on top of code health changes. Monitor and measure code health initiatives and get
-                            actionable insights into the impact of large-scale changes.
-                        </p>
-                    </div>
-                </div>
-            </div>
+            <ThreeUpText title="Track and improve code health across your entire codebase" items={threeUpTextItems} />
         </ContentSection>
 
         <div className="bg-gradient-venus-radial">
@@ -272,7 +262,7 @@ const UseCasePage: FunctionComponent<PageProps> = props => (
                     </div>
                     <div className="col-lg-5 mt-lg-6 mt-5">
                         <Blockquote
-                            quote={`With the help of Sourcegraph, we were able to quickly look at all clients of an API and remove unused attributes that lived in different repositories, ultimately simplifying our APIs and speeding up developer iteration time.`}
+                            quote="With the help of Sourcegraph, we were able to quickly look at all clients of an API and remove unused attributes that lived in different repositories, ultimately simplifying our APIs and speeding up developer iteration time."
                             by="Justin Phillips, Software Engineer at Lyft"
                             logoImage="/external-logos/lyft-logo.svg"
                             logoAlt="Lyft"