Prevent internal links to open a new tab and make some tweaks

shared.ts

@@ -5,11 +5,13 @@ import { Author } from './src/templates/author/shared';
 export const webinarsUrl =
     'https://try.estuary.dev/webinar-estuary101-ondemand';
 
-export const dashboardRegisterUrl = 'https://dashboard.estuary.dev/register';
+export const dashboardUrl = 'https://dashboard.estuary.dev';
+export const dashboardRegisterUrl = `${dashboardUrl}/register`;
 export const statusPageUrl = 'https://status.estuary.dev/';
 export const docsPageUrl = 'https://docs.estuary.dev';
 export const slackUrl =
     'https://estuary-dev.slack.com/join/shared_invite/zt-86nal6yr-VPbv~YfZE9Q~6Zl~gmZdFQ#/shared-invite/email';
+export const estuaryFlowGithubUrl = 'https://github.com/estuary/flow/';
 
 export const estuaryProductFlowVideoUrl =
     'https://www.youtube.com/embed/hlCh81ZbBik';
@@ -192,3 +194,5 @@ export interface Vendor {
 }
 
 export type DeploymentOption = keyof typeof features;
+
+export const activeUsersAmount = '5500+';

src/components/Advantages/index.tsx

@@ -24,6 +24,7 @@ type AdvantagesProps = {
     link?: {
         title: string;
         href: string;
+        openNewTab?: boolean;
     };
     isDarkTheme?: boolean;
     isImageOnTheLeft?: boolean;
@@ -60,7 +61,10 @@ const Advantages = ({
                 ) : null}
                 {link ? (
                     <ButtonWrapper>
-                        <OutboundLinkFilled href={link.href} target="_blank">
+                        <OutboundLinkFilled
+                            href={link.href}
+                            target={link.openNewTab ? '_blank' : undefined}
+                        >
                             {link.title}
                         </OutboundLinkFilled>
                     </ButtonWrapper>

src/components/ConnectorsLink/index.tsx

@@ -79,7 +79,7 @@ const ConnectorsLink = ({
             return `/integrations/${captureConnectors.find((c) => c.id === sourceId)?.slugified_name}-to-${
                 materializationConnectors.find((c) => c.id === destinationId)
                     ?.slugified_name
-            }`;
+            }/`;
         } else {
             return '#';
         }

src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx

@@ -15,9 +15,7 @@ const Card = ({ title, buttonHref }: CardProps) => {
                 <FileIcon color="#5072EB" />
             </div>
             <h3>{title}</h3>
-            <LinkOutlined href={buttonHref} target="_blank">
-                Read
-            </LinkOutlined>
+            <LinkOutlined href={buttonHref}>Read</LinkOutlined>
         </div>
     );
 };

src/components/EtlToolsPage/LearnMoreArticles/index.tsx

@@ -15,15 +15,15 @@ const LearnMoreArticles = () => {
                 <div className={cardsWrapper}>
                     <Card
                         title="The Data Engineer's Guide to ELT Alternatives"
-                        buttonHref="/ELT-alternatives-guide"
+                        buttonHref="/ELT-alternatives-guide/"
                     />
                     <Card
                         title="The Data Engineer's Guide to ETL Alternatives"
-                        buttonHref="/ETL-alternatives-guide"
+                        buttonHref="/ETL-alternatives-guide/"
                     />
                     <Card
                         title="The Data Engineer's Guide to CDC for Analytics, Ops, and AI Pipelines"
-                        buttonHref="/CDC-comparison-guide"
+                        buttonHref="/CDC-comparison-guide/"
                     />
                 </div>
             </Container>

src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx

@@ -26,8 +26,6 @@ const XvsYCard = ({ xVendor, yVendor }: XvsYCardProps) => {
     return (
         <a
             href={`/${getComparisonSlug(xVendor.slugKey, yVendor.slugKey)}`}
-            target="_blank"
-            rel="noreferrer"
             className={container}
         >
             {xVendorLogo && yVendorLogo ? (

src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less

@@ -37,6 +37,7 @@
     font-weight: 700;
     line-height: 28px;
     color: #47506D;
+    text-align: center;
 
     @media (max-width: 824px) {
       font-size: 1rem;

src/components/EtlToolsXvsYPage/GettingStarted/index.tsx

@@ -94,7 +94,7 @@ const GettingStarted = () => {
                     }
                     button={{
                         title: 'Contact us',
-                        href: '/contact-us',
+                        href: '/contact-us/',
                     }}
                 />
             </Container>

src/components/EtlToolsXvsYPage/Hero/index.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
 import VendorsLink from '../../VendorsLink';
 import { Vendor } from '../../../../shared';
-import NewTabLink from '../../NewTabLink';
+import InternalLink from '../../InternalLink';
 import ChevronRightIcon from '../../../svgs/chevron-right.svg';
 import HeroSectionDetails from '../../HeroSectionDetails';
 import Container from '../../Container';
@@ -48,10 +48,10 @@ const Hero = ({ vendors, xVendor, yVendor }: SectionOneProps) => {
                                 yVendor={yVendor}
                                 isDarkTheme
                             />
-                            <NewTabLink href="/etl-tools">
+                            <InternalLink href="/etl-tools/">
                                 View all comparisons
                                 <ChevronRightIcon color="#5072EB" />
-                            </NewTabLink>
+                            </InternalLink>
                         </>
                     }
                 />

src/components/Footer/index.tsx

@@ -9,7 +9,12 @@ import SlackIcon from '../../svgs/slack-outline.svg';
 import TwitterIcon from '../../svgs/twitter-outline.svg';
 import { ButtonOutlinedPrimary } from '../../globalStyles';
 import NewsletterSignupForm from '../NewsletterSignupForm';
-import { docsPageUrl, slackUrl, statusPageUrl } from '../../../shared';
+import {
+    docsPageUrl,
+    estuaryFlowGithubUrl,
+    slackUrl,
+    statusPageUrl,
+} from '../../../shared';
 import {
     footer,
     globalFooterWrapper,
@@ -86,15 +91,14 @@ const Footer = () => {
                         </Link>
                         <OutboundLink
                             target="_blank"
-                            href="https://github.com/estuary/flow"
+                            href={estuaryFlowGithubUrl}
                             className={globalFooterRightLink}
                         >
                             Github
                         </OutboundLink>
                         <a
-                            href="/contact-us"
+                            href="/contact-us/"
                             className={globalFooterRightLink}
-                            target="_blank"
                         >
                             Contact Us
                         </a>
@@ -168,7 +172,7 @@ const Footer = () => {
                         </OutboundLink>
                         <OutboundLink
                             target="_blank"
-                            href="https://github.com/estuary/flow"
+                            href={estuaryFlowGithubUrl}
                             aria-label="Github Repo Link"
                         >
                             <GithubIcon className={footerSocialIconStyle} />

src/components/Header/index.tsx

@@ -14,7 +14,12 @@ import {
     globalHeaderLogo,
     globalHeaderTitle,
 } from '../styles.module.less';
-import { dashboardRegisterUrl, slackUrl } from '../../../shared';
+import {
+    dashboardRegisterUrl,
+    dashboardUrl,
+    estuaryFlowGithubUrl,
+    slackUrl,
+} from '../../../shared';
 import {
     globalHeader,
     globalHeaderWrapper,
@@ -211,7 +216,7 @@ const Header = ({ fixedHeader }: HeaderProps) => {
                             </OutboundLink>
                             <OutboundLink
                                 target="_blank"
-                                href="https://github.com/estuary/flow"
+                                href={estuaryFlowGithubUrl}
                                 className={headerSocialIcon}
                                 aria-label="Github Repo Link"
                             >
@@ -222,7 +227,7 @@ const Header = ({ fixedHeader }: HeaderProps) => {
                             <OutboundLink
                                 target="_blank"
                                 className={globalHeaderLink}
-                                href="https://dashboard.estuary.dev"
+                                href={dashboardUrl}
                                 style={{ marginRight: '1rem' }}
                             >
                                 Log in

src/components/HeaderNavbar/Resources/index.tsx

@@ -99,7 +99,7 @@ const HeaderNavbarResources = ({ active, setActive }) => {
                                 </ImageWrapper>
                                 <LinkOutlined
                                     target="_blank"
-                                    href="/why"
+                                    href="/why/"
                                     theme="dark"
                                     $fullWidth
                                 >

src/components/HeroSectionDetails/index.tsx

@@ -32,11 +32,7 @@ const HeroSectionDetails = ({
                     >
                         Build a Pipeline
                     </OutboundLinkFilled>
-                    <LinkOutlined
-                        href="/contact-us"
-                        target="_blank"
-                        theme="dark"
-                    >
+                    <LinkOutlined href="/contact-us/" theme="dark">
                         Contact Us
                     </LinkOutlined>
                 </div>

src/components/Homepage/CaseStudies/Card.tsx

@@ -20,7 +20,6 @@ const Card = ({ href, title, description, image }: CardProps) => {
             <CaseStudyDescription>{description}.</CaseStudyDescription>
             <Button
                 href={href}
-                target="_blank"
                 rel="noopener"
                 aria-label={`Read case study for ${title}`}
             >

src/components/Homepage/CaseStudies/index.tsx

@@ -60,7 +60,7 @@ const CaseStudies = () => {
                                             key={caseStudy.id}
                                             title={caseStudy.Title}
                                             description={caseStudy.Description}
-                                            href={`/customers/${caseStudy.Slug}`}
+                                            href={`/customers/${caseStudy.Slug}/`}
                                             image={
                                                 <GatsbyImage
                                                     image={

src/components/Homepage/DeploymentModes/index.tsx

@@ -32,7 +32,7 @@ const DeploymentModes = () => {
                         <Tabs handleTabChange={handleTabChange} />
                         <TabPanels />
                     </TabContext>
-                    <LinkFilled href="/deployment-options" target="_blank">
+                    <LinkFilled href="/deployment-options/">
                         See Details
                     </LinkFilled>
                 </div>

src/components/Homepage/Do4xMoreWith25xLess/index.tsx

@@ -29,9 +29,7 @@ const Do4xMoreWith25xLess = () => {
                         deliver new projects in days, not months. And they spend
                         2-5x less on Estuary than on batch ELT.
                     </p>
-                    <Button href="/pricing" target="_blank">
-                        See Pricing
-                    </Button>
+                    <Button href="/pricing/">See Pricing</Button>
                 </LeftColumn>
                 <RightColumn>
                     <PricingCalculator />

src/components/Homepage/Hero/index.tsx

@@ -5,6 +5,7 @@ import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg';
 import MetricCard from '../../MetricCard';
 import VanityLogosMarquee from '../../VanityLogosMarquee';
 import HeroSectionDetails from '../../HeroSectionDetails';
+import { activeUsersAmount } from '../../../../shared';
 import AnimFallback from './AnimFallback';
 import AnimatedHero from './AnimatedHero';
 import {
@@ -44,7 +45,7 @@ const Hero = () => {
             <MetricCardsList>
                 <MetricCard
                     icon={<ActiveUsersIcon color={metricIconColor} />}
-                    value="5500+"
+                    value={activeUsersAmount}
                     label="Active users"
                 />
                 <MetricCard

src/components/Homepage/SeeHow/index.tsx

@@ -19,7 +19,7 @@ const SeeHow = () => {
                     <OutboundLinkOutlined href={webinarsUrl} target="_blank">
                         Watch Demo
                     </OutboundLinkOutlined>
-                    <HubspotButton href="/contact-us" target="_blank">
+                    <HubspotButton href="/contact-us/">
                         Contact Us
                     </HubspotButton>
                 </Buttons>

src/components/Homepage/TheBestRealTimeCdc/index.tsx

@@ -39,9 +39,7 @@ const TheBestRealTimeCdc = () => {
                         <Advantage title="Most versatile writes that maintain a current view or all change history" />
                         <Advantage title="Most scalable pipelines, with true elastic scaling" />
                     </AdvantagesList>
-                    <Link href="/integrations" target="_blank" rel="noopener">
-                        View Connectors
-                    </Link>
+                    <Link href="/integrations/">View Connectors</Link>
                 </LeftColumn>
                 <RightColumn>
                     <StaticImage

src/components/Integration/SectionSeven/index.tsx → src/components/Integration/DataopsMadeSimple/index.tsx

@@ -4,7 +4,7 @@ import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.le
 import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg';
 import Advantages from '../../Advantages';
 
-const SectionSeven = () => {
+const DataopsMadeSimple = () => {
     return (
         <section className={defaultWrapperDarkBlue}>
             <Advantages
@@ -30,4 +30,4 @@ const SectionSeven = () => {
     );
 };
 
-export default SectionSeven;
+export default DataopsMadeSimple;

src/components/Integration/SectionFive/index.tsx → src/components/Integration/EstuaryFlowVideo/index.tsx

@@ -11,7 +11,7 @@ import {
     title,
 } from './styles.module.less';
 
-const SectionFive = () => {
+const EstuaryFlowVideo = () => {
     return (
         <section className={defaultWrapperDarkBlue}>
             <div className={container}>
@@ -39,4 +39,4 @@ const SectionFive = () => {
     );
 };
 
-export default SectionFive;
+export default EstuaryFlowVideo;

src/components/Integration/SectionTwo/index.tsx → src/components/Integration/FromConnector/index.tsx

@@ -17,7 +17,7 @@ import {
     whiteFilledCircle,
 } from '../styles.module.less';
 
-const SectionTwo = ({
+const FromConnector = ({
     title,
     longDescription,
     shortDescription,
@@ -83,4 +83,4 @@ const SectionTwo = ({
     );
 };
 
-export default SectionTwo;
+export default FromConnector;