diff --git a/website/src/components/Blockquote.tsx b/website/src/components/Blockquote.tsx index 904747a79c9..10421e9eb5f 100644 --- a/website/src/components/Blockquote.tsx +++ b/website/src/components/Blockquote.tsx @@ -10,33 +10,45 @@ export const Blockquote: FunctionComponent<{ logoAlt?: string border?: boolean headline?: string -}> = ({ quote, by, logoImage, border, headline, logoAlt }) => { - const quoteStyles = 'p-3 rounded rounded-lg text-center' - + link?: string + linkText?: string +}> = ({ quote, by, logoImage, border, headline, logoAlt, link, linkText }) => { return ( <>
{border && headline ? ( -
-
{headline}
-
“{quote}”
+
+

{headline}

+
“{quote}”
) : (

“{quote}”

)} {by &&
— {by}
}
+ {logoImage && logoAlt && (
{logoAlt}
)} + {linkText && link && link.includes('http') && ( + + {linkText} + + )} + {linkText && link && !link.includes('http') && ( + +

{linkText}

+ + + )} ) } @@ -54,7 +66,11 @@ export const BlockquoteWithLogoBottom: FunctionComponent<{ <> {header &&

{header}

}
-

“{quote}”

+

+ {by && <>“} + {quote} + {by && <>”} +

{by &&
— {by}
}
{logoImage && logoAlt && ( diff --git a/website/src/css/pages/__case_studies.scss b/website/src/css/pages/__case_studies.scss index cca22d0ae19..e18932fb8a1 100644 --- a/website/src/css/pages/__case_studies.scss +++ b/website/src/css/pages/__case_studies.scss @@ -54,24 +54,8 @@ font-weight: 400; } - &--in-content { - margin: 2rem 0; - - p { - padding-left: 1rem; - border-left: 3px solid #f86012; - font-weight: 600; - font-size: 1.2rem; - line-height: 1.5; - } - - &--section { - padding-left: 1rem; - border-left: 3px solid #f86012; - font-weight: 600; - font-size: 1.2rem; - line-height: 1.5; - } + &--border { + border-left: 2px solid; } } } diff --git a/website/src/pages/use-cases/code-health.tsx b/website/src/pages/use-cases/code-health.tsx new file mode 100644 index 00000000000..4976a093b31 --- /dev/null +++ b/website/src/pages/use-cases/code-health.tsx @@ -0,0 +1,366 @@ +import { Link, PageProps } from 'gatsby' +import MagnifyIcon from 'mdi-react/MagnifyIcon' +import WrenchOutlineIcon from 'mdi-react/WrenchOutlineIcon' +import ClipBoardPulseOutlineIcon from 'mdi-react/ClipboardPulseOutlineIcon' +import React, { FunctionComponent, ReactNode } from 'react' + +import Layout from '../../components/Layout' +import { BackButtonBold } from '../../components/BackButton' +import { Blockquote } from '../../components/Blockquote' +import { BlogListItem } from '../../components/BlogListItem' +import { QuoteCarousel } from '../../components/QuoteCarousel' +import CustomCarousel from '../../components/CustomCarousel' +import { ContentSection } from '../../components/content/ContentSection' +import { CustomerLogos } from '../../components/CustomerLogos' +import { buttonStyle, buttonLocation } from '../../tracking' +import styles from './useCases.module.scss' + +const CarouselItem: FunctionComponent<{ header: string; text: ReactNode }> = ({ header, text }) => ( + <> +

{header}

+ {text} + +) + +const items = [ + { + buttonLabel: 'Find old versions easily', + text: ( + + Use Code Search to spot deprecated methods and APIs left in your + code and share examples of how the latest versions are used. +

+ } + /> + ), + headerClass: 'active', + itemClass: 'd-block', + }, + { + buttonLabel: 'Automate version updates and communications', + text: ( + + With Batch Changes, you can quickly update versions and send + pull requests to all your repositories as a way of alerting repository owners that they need to + upgrade. +

+ } + /> + ), + itemClass: 'd-none', + }, + { + buttonLabel: 'Get everyone on the same page with living docs', + text: ( + + Create living, actionable documentation with{' '} + Notebooks that show your best practices + with real-life examples you can share with your team. +

+ } + /> + ), + itemClass: 'd-none', + }, + { + buttonLabel: 'Monitor for deprecated code', + text: ( + + Make sure deprecated endpoints don't sneak back into your code. Get alerts for new occurrences + of deprecated methods or restricted patterns with{' '} + code monitoring. +

+ } + /> + ), + itemClass: 'd-none', + }, + { + buttonLabel: 'Develop a data-driven relationship with your code', + text: ( + + Create dashboards to track mitigations, package use, version adoption, code smells, codebase + size, and more to understand code health with Code Insights. +

+ } + /> + ), + itemClass: 'd-none', + }, +] + +const quoteCarouselItems = [ + { + header: 'Indeed improves code health at scale', + quote: `On average, I'd say that for every automated merge request that we're able to merge we save an hour…if we are doing several thousand automated merges in a year, we're saving several employee's worth of time.`, + by: 'Jared Hodge, Senior Manager, Developer Experience at Indeed', + logoImage: '/external-logos/indeed-logo.svg', + linkText: 'Read the case study', + link: '/case-studies/indeed-accelerates-development-velocity', + logoAlt: 'Indeed', + }, + { + header: 'Quantcast accelerates large-scale refactoring', + quote: 'Quantcast uses Sourcegraph to create burndown lists of issues and provide code owners links to Sourcegraph search results. Since Sourcegraph searches every repository, a single engineer can analyze thousands of repositories in only a few days rather than months.', + logoImage: '/external-logos/quantcast-logo.svg', + linkText: 'Read the case study', + link: '/case-studies/quantcast-large-scale-refactoring', + logoAlt: 'Quantcast', + }, + { + header: 'Workiva efficiently pays down tech debt', + quote: `As an organization that values paying down tech debt, Workiva's Client Platform team started using Sourcegraph to help them efficiently propagate updates to dependencies across all of their repositories without any ongoing maintenance.`, + logoImage: '/external-logos/workiva-vector-logo.svg', + linkText: 'Read the case study', + link: '/case-studies/workiva-automates-large-scale-code-changes', + logoAlt: 'Workiva', + }, +] + +const blogListItems = [ + { + title: 'How not to break a search engine or: What I learned about unglamorous engineering', + description: `When Sourcegraph switched to a new search query parser, you'd never know anything had changed. This is an account of the rigorous testing that happened behind the scenes to ensure a seamless transition.`, + type: 'Blog post', + image: 'https://storage.googleapis.com/sourcegraph-assets/blog/how-not-to-break-a-search-engine-new.png', + href: '/blog/how-not-to-break-a-search-engine-unglamorous-engineering', + }, + { + title: 'How we migrated entirely to CSS Modules using codemods and Sourcegraph Code Insights', + description: `Learn how Sourcegraph's Frontend Platform team overhauled our web application's design system and UI using 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', + href: '/blog/migrating-to-css-modules-with-codemods-and-code-insights', + }, + { + title: 'How we added backend integration testing to our CI pipeline', + description: `Here's the story and the lessons learned from our work to remove all existing backend-related end-to-end tests and reliably run their corresponding unit and integration tests as part of our CI pipeline on all branches.`, + type: 'Blog post', + image: 'https://storage.googleapis.com/sourcegraph-assets/blog/backend-integration-testing/backend-integration-testing.png', + href: '/blog/integration-testing', + }, +] + +const UseCasePage: FunctionComponent = props => ( + +
+
+
+
+ +

+ Healthy code, happy teams +

+
+ Improve code health with large-scale changes and track key initiatives across your + entire codebase. +
+
+ + Request a demo + + + Try Sourcegraph now + +
+
+
+
+
+ + } + > + +
+
+

+ Track and improve code health across your entire codebase +

+
+
+
+ +

Find unhealthy code

+

+ Build a healthier codebase by finding references to deprecated services, libraries, URL + patterns, and more across all your repositories. +

+
+
+ +

Remediate code health issues

+

+ Tackle refactoring efforts and tech debt from legacy systems and acquisitions with automated + pull requests across your entire codebase. +

+
+
+ +

Monitor code health initiatives

+

+ Stay on top of code health changes. Monitor and measure code health initiatives and get + actionable insights into the impact of large-scale changes. +

+
+
+
+ + +
+ +
+
+

Improving code health can be daunting

+

+ Engineering teams need to track and measure code quality consistently to monitor code health + across their entire codebase, but current tools don't make this easy. What does that mean + for you? +

+
    +
  • + Old versions, libraries, or functions are littered throughout your code, resulting in + incidents and backward compatibility issues. +
    • +
  • + Unclear code ownership leads to unclear responsibility, making it hard for developers to + find the right domain expert when they need help. +
    • +
  • + Engineering managers struggle to justify prioritizing and addressing tech debt because + success is difficult to track and measure. +
    • +
+
+
+
+
+
+ +
+ + +
+
+

+ How Sourcegraph helps +

+
+
+ +
+
+ + +
+ + + +
+ +
+ +
+
+

Get started with Sourcegraph

+

Give your team the tools they need to build a healthier codebase.

+
+
+ + Request a demo + + +

Explore other use cases

+ +
+
+ + +
+ +
+
+ + +
+
+

Related resources

+
+ {blogListItems.map(item => ( + + ))} +
+ + + +
+

Ready to build a healthier codebase?

+ + Get started today + +
+ + +) + +export default UseCasePage diff --git a/website/src/pages/use-cases/incident-response.tsx b/website/src/pages/use-cases/incident-response.tsx index 49aa801ed10..aca3a45c87d 100644 --- a/website/src/pages/use-cases/incident-response.tsx +++ b/website/src/pages/use-cases/incident-response.tsx @@ -150,43 +150,43 @@ const UseCasePage: FunctionComponent = props => ( 'Identify the root cause of an incident, understand its potential impact, fix the issue everywhere in your codebase. Incident response from Sourcegraph.', image: 'https://about.sourcegraph.com/sourcegraph-og.png', }} - className="use-cases-page" - heroAndHeaderClassName={`${styles.useCaseHeader} navbar-light`} + className="use-cases-page navbar-light" hero={ <> -
-
-
-
- -

- Resolve incidents quickly and confidently -

-
- Identify the root cause of an incident, understand its potential impact on other - services, and fix the issue everywhere in your codebase so it won't reoccur. -
-
- - Request a demo - - - Try Sourcegraph now - +
+
+
+
+ +

+ Resolve incidents quickly and confidently +

+
+ Identify the root cause of an incident, understand its potential impact on other + services, and fix the issue everywhere in your codebase so it won't reoccur. +
+
+ + Request a demo + + + Try Sourcegraph now + +
@@ -239,7 +239,7 @@ const UseCasePage: FunctionComponent = props => (

Current tools don't enable teams to quickly get to the root cause of an incident and ensure - it doesn't reoccur. What does that mean for you? + it doesn't reoccur. What does that mean for you?

  • diff --git a/website/src/pages/use-cases/index.tsx b/website/src/pages/use-cases/index.tsx index 3819f78cbbe..7d28dd1f2ab 100644 --- a/website/src/pages/use-cases/index.tsx +++ b/website/src/pages/use-cases/index.tsx @@ -19,65 +19,70 @@ export default ((props: any) => ( 'See how the most productive dev teams use Sourcegraph to build software you rely on. From remediating vulnerabilities to streamlining code reuse, our customers use Sourcegraph to solve big code problems.', image: 'https://about.sourcegraph.com/sourcegraph-og.png', }} - heroAndHeaderClassName={styles.headerAndHero} + className="use-cases-page navbar-light" hero={ -
    -
    -
    -

    Our customers move faster with Sourcegraph

    -

    - Companies of all sizes and in all industries use Sourcegraph universal code search to solve - big code problems. -

    -
    -
    -
    See how customers use Sourcegraph to
    -
    - - Find and fix security vulnerabilities - - - Accelerate developer onboarding - - - Resolve incidents faster - - - Streamline code reuse - - - Boost code health - +
    +
    +
    +
    +

    + Our customers move faster with Sourcegraph +

    +

    + Companies of all sizes and in all industries use Sourcegraph universal code search to + solve big code problems. +

    +
    +
    +
    See how customers use Sourcegraph to
    +
    + + Find and fix security vulnerabilities{' '} + + + + Accelerate developer onboarding + + + Resolve incidents faster + + + Streamline code reuse + + + Boost code health + +
    @@ -349,6 +354,9 @@ export default ((props: any) => ( > Request a demo + + Learn more +
    diff --git a/website/src/pages/use-cases/onboarding.tsx b/website/src/pages/use-cases/onboarding.tsx index 7f5d5fc5f7e..fcf0c824c04 100644 --- a/website/src/pages/use-cases/onboarding.tsx +++ b/website/src/pages/use-cases/onboarding.tsx @@ -131,41 +131,41 @@ const UseCasePage: FunctionComponent = props => ( 'Decrease time to first commit for new developers, help existing engineers master your codebase, and fast-track full codebase understanding.', image: 'https://about.sourcegraph.com/sourcegraph-og.png', }} - className="use-cases-page" - heroAndHeaderClassName={`${styles.useCaseHeader} navbar-light`} + className="use-cases-page navbar-light" hero={ <> -
    -
    -
    -
    - -

    Accelerate developer onboarding

    -
    - Decrease time to first commit for new developers, help existing engineers master your - codebase, and fast-track full codebase understanding. -
    -
    - - Request a demo - - - Try Sourcegraph now - +
    +
    +
    +
    + +

    Accelerate developer onboarding

    +
    + Decrease time to first commit for new developers, help existing engineers master + your codebase, and fast-track full codebase understanding. +
    +
    + + Request a demo + + + Try Sourcegraph now + +
    @@ -180,7 +180,7 @@ const UseCasePage: FunctionComponent = props => ( Make your codebase accessible for your entire team
    -
    +

    Find answers across all repositories

    @@ -216,10 +216,7 @@ const UseCasePage: FunctionComponent = props => (

    Developer onboarding is slow and expensive

    Current tools and practices don't enable teams to onboard developers effectively or - efficiently. -

    -

    - What does that mean for you? + efficiently. What does that mean for you?

    • New developers are left confused, struggling in front of an opaque codebase.
      • diff --git a/website/src/pages/use-cases/vulnerabilities.tsx b/website/src/pages/use-cases/vulnerabilities.tsx index ffe3e42fc6a..a0275f1fde4 100644 --- a/website/src/pages/use-cases/vulnerabilities.tsx +++ b/website/src/pages/use-cases/vulnerabilities.tsx @@ -174,41 +174,43 @@ const UseCasePage: FunctionComponent = props => ( 'Search across all your repositories to find and resolve vulnerabilities in minutes, not days.', image: 'https://about.sourcegraph.com/sourcegraph-og.png', }} - className="use-cases-page" - heroAndHeaderClassName={`${styles.useCaseHeader} navbar-light`} + className="use-cases-page navbar-light" hero={ <> -
      -
      -
      -
      - -

      Find and fix security vulnerabilities

      -
      - Search across all your repositories to find and resolve vulnerabilities in minutes, not - days. -
      -
      - - Request a demo - - - Try Sourcegraph now - +
      +
      +
      +
      + +

      + Find and fix security vulnerabilities +

      +
      + Search across all your repositories to find and resolve vulnerabilities in minutes, + not days. +
      +
      + + Request a demo + + + Try Sourcegraph now + +