4.0/CTA update

content/blogposts/blog-post-starter-pack.md

@@ -134,19 +134,11 @@ Change the <b>color</b> of the Badge by setting its `color` property to one of t
 ```
 
 <div className="tw-mt-sm">
-  <Badge text="Search code" color="cerise" size="small" onClick={() => window.open('https://sourcegraph.com/', '_blank', 'noopener')} />
+  <Badge text="Search code" color="cerise" link="https://sourcegraph.com/" size="small" />
 </div>
-To add a <b>link</b> to your badge, add a value to the `onClick` property as seen below:
+To add a <b>link</b> to your badge, pass the badge a link as seen below:
 ```javascript
-<Badge text="Search code" color="cerise" size="small" onClick={() => window.open('https://sourcegraph.com/', '_blank', 'noopener')} />
-```
-
-<div className="tw-mt-sm">
-  <Badge text="Code Insights" color="green" size="small" onClick={() => window.open("/code-insights", "_self")} />
-</div>
-If the link is to an internal page on about.sourcegraph.com, we don't want to open the link in a new tab. Add the following to the markdown adjusted to your badge values:
-```javascript
-<Badge text="Code Insights" color="green" size="small" onClick={() => window.open("/code-insights", "_self")} />
+<Badge text="Search code" color="cerise" link="https://sourcegraph.com/" size="small" />
 ```
 
 <div className="tw-mt-sm">

content/terms/security.md

@@ -12,7 +12,7 @@ If you have specific questions or concerns, contact us at security@sourcegraph.c
 If you think you have discovered a security vulnerability in our product, please follow our instructions on [how to report a security vulnerability](https://handbook.sourcegraph.com/product-engineering/engineering/cloud/security/reporting-vulnerabilities).
 
 For details on our information security practices or to request a copy of our SOC 2 Report, please visit our 
-<Badge text="Security Trust Portal" color="blue" size="large" onClick={() => window.open('https://security.sourcegraph.com/', '_blank', 'noopener')} />.
+<Badge text="Security Trust Portal" color="blue" size="large" link="https://security.sourcegraph.com/" />.
 
 ## Sourcegraph.com
 

next-sitemap.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next-sitemap').IConfig} */
 
 module.exports = {
-    siteUrl: 'https://about.sourcegraph.com',
-    generateRobotsTxt: true,
-    generateIndexSitemap: false,
-    outDir: 'out'
+  siteUrl: 'https://about.sourcegraph.com',
+  generateRobotsTxt: true,
+  generateIndexSitemap: false,
+  outDir: 'out',
 }

src/components/Badge.tsx

@@ -17,6 +17,7 @@ interface Badge {
         | 'vermillion'
         | 'green'
         | 'lemon'
+    link?: string
     icon?: ElementType
     onClick?: () => void
     checked?: boolean
@@ -30,12 +31,22 @@ interface Badge {
  * @param props.text - badge text
  * @param props.size - the size of the badge
  * @param props.color - the color of the badge
+ * @param props.link - a link for an anchor tag
  * @param props.icon - the icon to use beside the text
  * @param props.onClick - an onClick function
  * @param props.checked - the controlled checked state
  * @param props.circle - whether it's a basic or circle radius badge
  */
-export const Badge: FunctionComponent<Badge> = ({ text, size, color = 'light-gray', icon, onClick, checked, circle }) => {
+export const Badge: FunctionComponent<Badge> = ({
+    text,
+    size,
+    color = 'light-gray',
+    link,
+    icon,
+    onClick,
+    checked,
+    circle,
+}) => {
     const Icon: ElementType = icon || 'div'
 
     const colors = {
@@ -119,14 +130,19 @@ export const Badge: FunctionComponent<Badge> = ({ text, size, color = 'light-gra
         {
             [colors[color].unchecked]: !checked || !onClick,
             [colors[color].checked]: checked,
-            [colors[color].hover]: !!onClick,
+            [colors[color].hover]: !!onClick || !!link,
             'tw-cursor-pointer tw-transition-all tw-ease-out': !!onClick,
             'tw-rounded-full': circle,
             'tw-rounded-md': !circle,
         }
     )
 
-    return (
+    return link ? (
+        <a href={link} className={classNames('tw-no-underline', styles)} tabIndex={0}>
+            {text}
+            {icon && <Icon className="tw-inline tw-ml-1" size={size === 'small' ? 12 : 14} />}
+        </a>
+    ) : (
         <div
             className={styles}
             onClick={onClick}

src/components/Blog/ReleasePost.tsx

@@ -18,7 +18,7 @@ interface Props extends PostComponentProps {}
  * A post about a release.
  */
 export const ReleasePost: FunctionComponent<Props> = ({
-    post,
+    post: { frontmatter },
     content,
     url,
     className = '',
@@ -35,79 +35,128 @@ export const ReleasePost: FunctionComponent<Props> = ({
                 </div>
             )}
 
-            <h3 className="tw-pt-sm tw-pb-xxs m-0 card-body release-post__changelog-header">Changelog highlights</h3>
+            {frontmatter.changelogItems?.length ? (
+                <div>
+                    <h3 className="tw-pt-sm tw-pb-xxs m-0 card-body release-post__changelog-header">
+                        Changelog highlights
+                    </h3>
 
-            <div className="tw-border-y tw-border-solid tw-border-gray-200 list-group list-group-flush">
-                {post.frontmatter.changelogItems?.map(({ url, category, description }) => (
-                    <a
-                        href={url}
-                        className="release-post__item md:tw-flex list-group-item list-group-item-action"
-                        key={url}
-                        title={`${category}: ${description}`}
-                        data-button-style={buttonStyle.text}
-                        data-button-location={buttonLocation.body}
-                        data-button-type="cta"
-                    >
-                        <span className="mb-2 release-post__item-category mb-md-0">
-                            <span className="release-post__item-category-badge">{category}</span>
-                        </span>
-                        <span className="release-post__item-description">{description}</span>
-                    </a>
-                ))}
-            </div>
+                    <div className="tw-border-y tw-border-solid tw-border-gray-200 list-group list-group-flush">
+                        {frontmatter.changelogItems?.map(({ url, category, description }) => (
+                            <a
+                                href={url}
+                                className="release-post__item md:tw-flex list-group-item list-group-item-action"
+                                key={url}
+                                title={`${category}: ${description}`}
+                                data-button-style={buttonStyle.text}
+                                data-button-location={buttonLocation.body}
+                                data-button-type="cta"
+                            >
+                                <span className="mb-2 release-post__item-category mb-md-0">
+                                    <span className="release-post__item-category-badge">{category}</span>
+                                </span>
+                                <span className="release-post__item-description">{description}</span>
+                            </a>
+                        ))}
+                    </div>
 
-            <ul className="tw-mb-0 tw-py-4 tw-flex-wrap tw-list-none tw-flex-col md:tw-flex-row md:tw-flex">
-                <li className="release-post__help-item">
-                    <a
-                        href="https://docs.sourcegraph.com/admin/install"
-                        title="How to install"
-                        data-button-style={buttonStyle.text}
-                        data-button-location={buttonLocation.body}
-                        data-button-type="cta"
-                    >
-                        How to install
-                    </a>
-                </li>
-                <li className="release-post__help-item">
-                    <a
-                        href="https://docs.sourcegraph.com/admin/updates"
-                        title="How to upgrade"
-                        data-button-style={buttonStyle.text}
-                        data-button-location={buttonLocation.body}
-                        data-button-type="cta"
-                    >
-                        How to upgrade
-                    </a>
-                </li>
-                <li className="tw-flex-1" />
-                <li className="release-post__help-item">
-                    <a
-                        href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md"
-                        title="Full changelog"
-                        data-button-style={buttonStyle.text}
-                        data-button-location={buttonLocation.body}
-                        data-button-type="cta"
-                    >
-                        Full changelog
-                    </a>
-                </li>
-            </ul>
+                    <ul className="tw-mb-0 tw-py-4 tw-flex-wrap tw-list-none tw-flex-col md:tw-flex-row md:tw-flex">
+                        <li>
+                            <a
+                                href="https://docs.sourcegraph.com/admin/install"
+                                className="tw-text-gray-400"
+                                title="How to install"
+                                data-button-style={buttonStyle.text}
+                                data-button-location={buttonLocation.body}
+                                data-button-type="cta"
+                            >
+                                How to install
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                href="https://docs.sourcegraph.com/admin/updates"
+                                className="tw-text-gray-400"
+                                title="How to upgrade"
+                                data-button-style={buttonStyle.text}
+                                data-button-location={buttonLocation.body}
+                                data-button-type="cta"
+                            >
+                                How to upgrade
+                            </a>
+                        </li>
+                        <li className="tw-flex-1" />
+                        <li>
+                            <a
+                                href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md"
+                                className="tw-text-gray-400"
+                                title="Full changelog"
+                                data-button-style={buttonStyle.text}
+                                data-button-location={buttonLocation.body}
+                                data-button-type="cta"
+                            >
+                                Full changelog
+                            </a>
+                        </li>
+                    </ul>
 
-            <div className="card-body release-post__body">
-                * Please{' '}
-                <Link href="/demo" passHref={true}>
-                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                    <a
-                        title="contact Sourcegraph"
-                        data-button-style={buttonStyle.text}
-                        data-button-location={buttonLocation.body}
-                        data-button-type="cta"
-                    >
-                        contact Sourcegraph
-                    </a>
-                </Link>{' '}
-                with any licensing questions.
-            </div>
+                    <div className="card-body release-post__body">
+                        * Please{' '}
+                        <Link href="/demo" passHref={true}>
+                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                            <a
+                                title="contact Sourcegraph"
+                                data-button-style={buttonStyle.text}
+                                data-button-location={buttonLocation.body}
+                                data-button-type="cta"
+                            >
+                                contact Sourcegraph
+                            </a>
+                        </Link>{' '}
+                        with any licensing questions.
+                    </div>
+                </div>
+            ) : (
+                <ul className="tw-border-t tw-mt-md tw-mb-0 tw-py-4 tw-flex-wrap tw-list-none tw-flex-col md:tw-flex-row md:tw-flex">
+                    <li>
+                        <a
+                            href="https://docs.sourcegraph.com/admin/install"
+                            className="tw-text-gray-400"
+                            title="How to install"
+                            data-button-style={buttonStyle.text}
+                            data-button-location={buttonLocation.body}
+                            data-button-type="cta"
+                        >
+                            How to install
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="https://docs.sourcegraph.com/admin/updates"
+                            className="tw-text-gray-400"
+                            title="How to upgrade"
+                            data-button-style={buttonStyle.text}
+                            data-button-location={buttonLocation.body}
+                            data-button-type="cta"
+                        >
+                            How to upgrade
+                        </a>
+                    </li>
+                    <li className="tw-flex-1" />
+                    <li>
+                        <a
+                            href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md"
+                            className="tw-text-gray-400"
+                            title="Full changelog"
+                            data-button-style={buttonStyle.text}
+                            data-button-location={buttonLocation.body}
+                            data-button-type="cta"
+                        >
+                            Full changelog
+                        </a>
+                    </li>
+                </ul>
+            )}
         </>
     )
 
@@ -120,22 +169,22 @@ export const ReleasePost: FunctionComponent<Props> = ({
                             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                             <a
                                 className="tw-block"
-                                title={post.frontmatter.title}
+                                title={frontmatter.title}
                                 data-button-style={buttonStyle.text}
                                 data-button-location={buttonLocation.body}
                                 data-button-type="cta"
                             >
-                                {post.frontmatter.title}
+                                {frontmatter.title}
                             </a>
                         </Link>
                     ) : (
-                        post.frontmatter.title
+                        frontmatter.title
                     )}
                 </h1>
 
-                {post.frontmatter.publishDate && (
-                    <time className="text-muted" dateTime={post.frontmatter.publishDate}>
-                        {formatDate(post.frontmatter.publishDate)}
+                {frontmatter.publishDate && (
+                    <time className="text-muted" dateTime={frontmatter.publishDate}>
+                        {formatDate(frontmatter.publishDate)}
                     </time>
                 )}
             </header>

src/components/CaseStudies/CaseStudyLayout.tsx

@@ -111,14 +111,12 @@ export const CaseStudyLayout: FunctionComponent<Props> = ({
         </div>
 
         <CtaSection
-            centerContent={true}
             background="black"
-            title="See Sourcegraph in action."
-            description="Learn how companies of all sizes and in all industries use Sourcegraph to solve big code problems."
-            cta1={{
+            centerContent={true}
+            cta2={{
                 text: 'Request a demo',
+                ctaStyle: 'outlineButton',
                 link: '/demo',
-                ctaStyle: 'primaryButton',
             }}
         />
     </>

src/components/CaseStudies/NewCaseStudyLayout.tsx

@@ -1,7 +1,5 @@
 import { FunctionComponent } from 'react'
 
-import ArrowRightIcon from 'mdi-react/ArrowRightIcon'
-
 import { ContentSection, CtaSection } from '@components'
 
 import { CaseStudyCard, CASESTUDIES } from './CaseStudyCard'
@@ -23,16 +21,11 @@ export const NewCaseStudyLayout: FunctionComponent<Props> = ({ customer, childre
             <CtaSection
                 background="venusCode"
                 centerContent={true}
-                cta1={{
+                cta2={{
                     text: 'Request a demo',
-                    ctaStyle: 'primaryButton',
+                    ctaStyle: 'outlineButton',
                     link: '/demo',
                 }}
-                cta2={{
-                    text: 'Try Sourcegraph now',
-                    icon: <ArrowRightIcon />,
-                    link: '/get-started/self-hosted',
-                }}
             />
 
             <ContentSection background="white">

src/components/ContentSection.tsx

@@ -29,7 +29,11 @@ export const ContentSection: FunctionComponent<ContentSection> = ({
             illustration={illustration}
             className={classNames('tw-px-sm tw-py-3xl md:tw-py-5xl', parentClassName)}
         >
-            <section className={classNames('tw-mx-auto', className, slimWidth ? 'tw-max-w-[840px]' : 'tw-max-w-screen-xl')}>{children}</section>
+            <section
+                className={classNames('tw-mx-auto', className, slimWidth ? 'tw-max-w-[840px]' : 'tw-max-w-screen-xl')}
+            >
+                {children}
+            </section>
         </Background>
     </div>
 )