From cc791688d421cefe8b8b271efd9f790a03e2d923 Mon Sep 17 00:00:00 2001 From: Breno Date: Wed, 9 Oct 2024 16:49:20 -0300 Subject: [PATCH 01/10] Add jump link to pricing calculator section --- src/components/PricingPage/SectionThree/index.tsx | 7 ++++++- src/components/PricingPage/SectionThree/styles.module.less | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/SectionThree/index.tsx index bc76a411..77f2de1d 100644 --- a/src/components/PricingPage/SectionThree/index.tsx +++ b/src/components/PricingPage/SectionThree/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import clsx from 'clsx'; import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less'; import { PricingCalculator } from '../../PricingCalculator'; import { @@ -7,11 +8,15 @@ import { description, textWrapper, pricingCalculatorWrapper, + jumpLinkOffset, } from './styles.module.less'; const SectionThree = () => { return ( -
+

PRICING CALCULATOR

diff --git a/src/components/PricingPage/SectionThree/styles.module.less b/src/components/PricingPage/SectionThree/styles.module.less index 13a861e0..ffeea651 100644 --- a/src/components/PricingPage/SectionThree/styles.module.less +++ b/src/components/PricingPage/SectionThree/styles.module.less @@ -1,5 +1,9 @@ @import '../../../globalStyles/sections.module.less'; +.jumpLinkOffset { + scroll-margin-top: 32px; +} + .container { .globalMaxWidth; display: flex; @@ -58,4 +62,4 @@ .pricingCalculatorWrapper { display: flex; flex-direction: column; -} +} \ No newline at end of file From 8c5a82629a9d6a689b4b0c3d648766249734ca32 Mon Sep 17 00:00:00 2001 From: Breno Date: Wed, 9 Oct 2024 17:26:01 -0300 Subject: [PATCH 02/10] Create a separate component for the copy to clipboard button --- .../CopyToClipboardButton/index.tsx | 52 +++++++++++++++ .../CopyToClipboardButton/styles.module.less | 26 ++++++++ src/components/styles.module.less | 21 +++++++ .../blog-post/ShareArticle/index.tsx | 63 ++++++------------- .../blog-post/ShareArticle/styles.ts | 41 ------------ 5 files changed, 119 insertions(+), 84 deletions(-) create mode 100644 src/components/CopyToClipboardButton/index.tsx create mode 100644 src/components/CopyToClipboardButton/styles.module.less diff --git a/src/components/CopyToClipboardButton/index.tsx b/src/components/CopyToClipboardButton/index.tsx new file mode 100644 index 00000000..4d713f04 --- /dev/null +++ b/src/components/CopyToClipboardButton/index.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import CheckIcon from '@mui/icons-material/Check'; +import Tooltip from '@mui/material/Tooltip'; +import clsx from 'clsx'; +import CopyIcon from '../../svgs/share-social-icons/copy.svg'; +import { buttonStyling, isCopiedStyling } from './styles.module.less'; + +interface CopyToClipboardButtonProps { + isCopied: boolean; + onCopy: () => void; +} + +const CopyToClipboardButton = ({ + isCopied, + onCopy, +}: CopyToClipboardButtonProps) => { + return ( + + + + ); +}; + +export default CopyToClipboardButton; diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less new file mode 100644 index 00000000..17136a8e --- /dev/null +++ b/src/components/CopyToClipboardButton/styles.module.less @@ -0,0 +1,26 @@ +@import '../styles.module.less'; + +.buttonStyling { + .socialShareButton; + + transition: background-color, + border 300ms ease-in-out; + + background-color: #FFFFFF; + border-color: #D7DCE5; + + &:hover { + background-color: #f9fafc; + border-color: #D7DCE5; + } +} + +.isCopiedStyling { + background-color: #00A99D30; + border-color: #00A99D; + + &:hover { + background-color: #00A99D30; + border-color: #00A99D; + } +} \ No newline at end of file diff --git a/src/components/styles.module.less b/src/components/styles.module.less index 58b06add..dc759354 100644 --- a/src/components/styles.module.less +++ b/src/components/styles.module.less @@ -55,3 +55,24 @@ font-size: 2rem; } } + +.socialShareButton { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #D7DCE5; + border-radius: 100%; + width: 40px; + height: 40px; + background-color: #FFFFFF; + cursor: pointer; + + &:hover { + background-color: #f9fafc; + } + + @media (max-width: 1150px) { + width: 48px; + height: 48px; + } +} diff --git a/src/templates/blog-post/ShareArticle/index.tsx b/src/templates/blog-post/ShareArticle/index.tsx index 696b4ccc..7ceed5f3 100644 --- a/src/templates/blog-post/ShareArticle/index.tsx +++ b/src/templates/blog-post/ShareArticle/index.tsx @@ -1,18 +1,12 @@ -import CheckIcon from '@mui/icons-material/Check'; -import Tooltip from '@mui/material/Tooltip'; import * as React from 'react'; -import CopyIcon from '../../../svgs/share-social-icons/copy.svg'; import EmailOutlinedIcon from '../../../svgs/share-social-icons/email-outlined.svg'; import FacebookOutlinedIcon from '../../../svgs/share-social-icons/facebook-outlined.svg'; import LinkedinOutlinedIcon from '../../../svgs/share-social-icons/linkedin-outlined.svg'; import TwitterXOutlinedIcon from '../../../svgs/share-social-icons/twitter-x-outlined.svg'; -import { - Container, - CopyButton, - FailedCopyInput, - SocialButtonsWrapper, - SocialLink, -} from './styles'; +import CopyToClipboardButton from '../../../components/CopyToClipboardButton'; +import { socialShareButton } from '../../../components/styles.module.less'; +import { OutboundLink } from '../../../components/OutboundLink'; +import { Container, FailedCopyInput, SocialButtonsWrapper } from './styles'; type ShareArticleProps = { article: { @@ -50,59 +44,42 @@ const ShareArticle = ({ article: { title, slug } }: ShareArticleProps) => { Share this article - - - {isCopied ? ( - - ) : ( - - )} - - - + - - + - - + - - + - + {isCopyFailed ? ( ) : null} diff --git a/src/templates/blog-post/ShareArticle/styles.ts b/src/templates/blog-post/ShareArticle/styles.ts index 92d1c576..de5dc592 100644 --- a/src/templates/blog-post/ShareArticle/styles.ts +++ b/src/templates/blog-post/ShareArticle/styles.ts @@ -1,6 +1,5 @@ import { TextField } from '@mui/material'; import styled from 'styled-components'; -import { OutboundLink } from '../../../components/OutboundLink'; export const Container = styled.div` display: flex; @@ -30,46 +29,6 @@ export const SocialButtonsWrapper = styled.div` } `; -const baseSocialButtonStyling = ` - display: flex; - align-items: center; - justify-content: center; - border: 1px solid #D7DCE5; - border-radius: 100%; - width: 40px; - height: 40px; - background-color: #FFFFFF; - cursor: pointer; - - &:hover { - background-color: #f9fafc; - } - - @media (max-width: 1150px) { - width: 48px; - height: 48px; - } -`; - -export const CopyButton = styled.button<{ $isCopied: boolean }>` - ${baseSocialButtonStyling} - - transition: background-color, border 300ms ease-in-out; - - background-color: ${(props) => (props.$isCopied ? '#00A99D30' : '#FFFFFF')}; - border-color: ${(props) => (props.$isCopied ? '#00A99D' : '#D7DCE5')}; - - &:hover { - background-color: ${(props) => - props.$isCopied ? '#00A99D30' : '#f9fafc'}; - border-color: ${(props) => (props.$isCopied ? '#00A99D' : '#D7DCE5')}; - } -`; - -export const SocialLink = styled(OutboundLink)` - ${baseSocialButtonStyling} -`; - export const FailedCopyInput = styled(TextField)` width: 100%; From af2c52ea7fc4a076bfca5153d22785de015adcb4 Mon Sep 17 00:00:00 2001 From: Breno Date: Wed, 9 Oct 2024 17:39:52 -0300 Subject: [PATCH 03/10] Move the rest of the copy code to the component --- .../CopyToClipboardButton/index.tsx | 99 ++++++++++++------- .../CopyToClipboardButton/styles.module.less | 16 ++- src/components/styles.module.less | 2 +- .../blog-post/ShareArticle/index.tsx | 27 +---- .../blog-post/ShareArticle/styles.ts | 9 -- 5 files changed, 82 insertions(+), 71 deletions(-) diff --git a/src/components/CopyToClipboardButton/index.tsx b/src/components/CopyToClipboardButton/index.tsx index 4d713f04..0e0070ab 100644 --- a/src/components/CopyToClipboardButton/index.tsx +++ b/src/components/CopyToClipboardButton/index.tsx @@ -1,51 +1,80 @@ -import React from 'react'; +import React, { useState } from 'react'; import CheckIcon from '@mui/icons-material/Check'; import Tooltip from '@mui/material/Tooltip'; import clsx from 'clsx'; +import { TextField } from '@mui/material'; import CopyIcon from '../../svgs/share-social-icons/copy.svg'; -import { buttonStyling, isCopiedStyling } from './styles.module.less'; +import { + buttonStyling, + isCopiedStyling, + copyFailed, + container, +} from './styles.module.less'; interface CopyToClipboardButtonProps { - isCopied: boolean; - onCopy: () => void; + contentToCopy: string; } const CopyToClipboardButton = ({ - isCopied, - onCopy, + contentToCopy, }: CopyToClipboardButtonProps) => { + const [isCopied, setIsCopied] = useState(false); + const [isCopyFailed, setIsCopyFailed] = useState(false); + + const copyToClipboard = () => { + navigator.clipboard.writeText(contentToCopy).then( + () => { + setIsCopied(true); + setIsCopyFailed(false); + setTimeout(() => setIsCopied(false), 2000); + }, + () => { + setIsCopied(false); + setIsCopyFailed(false); + } + ); + }; return ( - + - - + + + {isCopyFailed ? ( + + ) : null} +
); }; diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less index 17136a8e..c682f6dd 100644 --- a/src/components/CopyToClipboardButton/styles.module.less +++ b/src/components/CopyToClipboardButton/styles.module.less @@ -1,5 +1,11 @@ @import '../styles.module.less'; +.container { + display: flex; + align-items: center; + gap: 14px; +} + .buttonStyling { .socialShareButton; @@ -23,4 +29,12 @@ background-color: #00A99D30; border-color: #00A99D; } -} \ No newline at end of file +} + +.copyFailed { + width: 100%; + + .MuiInputBase-input { + padding: 12px; + } +} diff --git a/src/components/styles.module.less b/src/components/styles.module.less index dc759354..2e4e0894 100644 --- a/src/components/styles.module.less +++ b/src/components/styles.module.less @@ -62,7 +62,7 @@ justify-content: center; border: 1px solid #D7DCE5; border-radius: 100%; - width: 40px; + min-width: 40px; height: 40px; background-color: #FFFFFF; cursor: pointer; diff --git a/src/templates/blog-post/ShareArticle/index.tsx b/src/templates/blog-post/ShareArticle/index.tsx index 7ceed5f3..d6ac8a58 100644 --- a/src/templates/blog-post/ShareArticle/index.tsx +++ b/src/templates/blog-post/ShareArticle/index.tsx @@ -6,7 +6,7 @@ import TwitterXOutlinedIcon from '../../../svgs/share-social-icons/twitter-x-out import CopyToClipboardButton from '../../../components/CopyToClipboardButton'; import { socialShareButton } from '../../../components/styles.module.less'; import { OutboundLink } from '../../../components/OutboundLink'; -import { Container, FailedCopyInput, SocialButtonsWrapper } from './styles'; +import { Container, SocialButtonsWrapper } from './styles'; type ShareArticleProps = { article: { @@ -16,9 +16,6 @@ type ShareArticleProps = { }; const ShareArticle = ({ article: { title, slug } }: ShareArticleProps) => { - const [isCopied, setIsCopied] = React.useState(false); - const [isCopyFailed, setIsCopyFailed] = React.useState(false); - const shareMessage = `Check out the article "${title}"`; const articleUrl = `https://estuary.dev/${slug}`; @@ -26,28 +23,11 @@ const ShareArticle = ({ article: { title, slug } }: ShareArticleProps) => { const getSocialLinkAriaLabel = (platform: string) => `Click to share article on ${platform}`; - const copyToClipboard = () => { - navigator.clipboard.writeText(articleUrl).then( - () => { - setIsCopied(true); - setIsCopyFailed(false); - setTimeout(() => setIsCopied(false), 2000); - }, - () => { - setIsCopied(false); - setIsCopyFailed(false); - } - ); - }; - return ( Share this article - + { > - {isCopyFailed ? ( - - ) : null} ); diff --git a/src/templates/blog-post/ShareArticle/styles.ts b/src/templates/blog-post/ShareArticle/styles.ts index de5dc592..20d2e417 100644 --- a/src/templates/blog-post/ShareArticle/styles.ts +++ b/src/templates/blog-post/ShareArticle/styles.ts @@ -1,4 +1,3 @@ -import { TextField } from '@mui/material'; import styled from 'styled-components'; export const Container = styled.div` @@ -28,11 +27,3 @@ export const SocialButtonsWrapper = styled.div` gap: 20px; } `; - -export const FailedCopyInput = styled(TextField)` - width: 100%; - - .MuiInputBase-input { - padding: 12px; - } -`; From dce3bf4df92826e4c65c2a0cc9e9ee906648c319 Mon Sep 17 00:00:00 2001 From: Breno Date: Wed, 9 Oct 2024 17:46:18 -0300 Subject: [PATCH 04/10] Add copy to clipboard button next to the pricing calculator section title --- src/components/PricingPage/SectionThree/index.tsx | 6 +++++- src/components/PricingPage/SectionThree/styles.module.less | 6 ++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/SectionThree/index.tsx index 77f2de1d..c5699590 100644 --- a/src/components/PricingPage/SectionThree/index.tsx +++ b/src/components/PricingPage/SectionThree/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import clsx from 'clsx'; import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less'; import { PricingCalculator } from '../../PricingCalculator'; +import CopyToClipboardButton from '../../CopyToClipboardButton'; import { container, title, @@ -19,7 +20,10 @@ const SectionThree = () => { >
-

PRICING CALCULATOR

+
+

PRICING CALCULATOR

+ +

Use our intuitive pricing calculator to easily estimate your monthly costs. Simply input your requirements, and diff --git a/src/components/PricingPage/SectionThree/styles.module.less b/src/components/PricingPage/SectionThree/styles.module.less index ffeea651..0d6deb70 100644 --- a/src/components/PricingPage/SectionThree/styles.module.less +++ b/src/components/PricingPage/SectionThree/styles.module.less @@ -29,6 +29,12 @@ @media (max-width: 1024px) { text-align: center; } + + div:first-child { + display: flex; + align-items: center; + gap: 18px; + } } .title { From bfead6e4023578af3aeeb7bd44916fda6c8b0b33 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 10 Oct 2024 01:18:08 -0300 Subject: [PATCH 05/10] Fix title of the comparison template page --- src/templates/etl-tools/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/etl-tools/index.tsx b/src/templates/etl-tools/index.tsx index ccf63918..98542a2e 100644 --- a/src/templates/etl-tools/index.tsx +++ b/src/templates/etl-tools/index.tsx @@ -44,7 +44,7 @@ const EtlTools = ({ export const Head = ({ data: { xVendor, yVendor } }) => { return ( ); From 254861eb845fac372150fc0fc211003664416209 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 10 Oct 2024 03:30:15 -0300 Subject: [PATCH 06/10] Set aspect ratio to hero images from comparison pages to prevent image loading shift --- src/components/EtlToolsPage/SectionOne/styles.module.less | 1 + src/components/EtlToolsXvsYPage/SectionOne/styles.module.less | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/EtlToolsPage/SectionOne/styles.module.less b/src/components/EtlToolsPage/SectionOne/styles.module.less index 8d645774..3e45cc67 100644 --- a/src/components/EtlToolsPage/SectionOne/styles.module.less +++ b/src/components/EtlToolsPage/SectionOne/styles.module.less @@ -34,6 +34,7 @@ .rightColumn { max-width: 496px; width: 100%; + aspect-ratio: 1 / 1; position: relative; div:not(:first-of-type) { diff --git a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less b/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less index ca40e986..cd51eddc 100644 --- a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less +++ b/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less @@ -42,6 +42,7 @@ .rightColumn { max-width: 536px; + aspect-ratio: 15 / 9; width: 100%; position: relative; } From 88c9baebfca9d20442cd1232a44b626c02c36a71 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 10 Oct 2024 11:26:58 -0300 Subject: [PATCH 07/10] Fix toc responsiveness on blog post --- src/templates/blog-post/styles.module.less | 31 +++++++++++----------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less index b828d86f..78833fc2 100644 --- a/src/templates/blog-post/styles.module.less +++ b/src/templates/blog-post/styles.module.less @@ -397,27 +397,26 @@ .tableOfContentsWrapper { overflow: auto; - max-height: 45vh; margin-top: 24px; - @media (max-height: 1128px) { - max-height: 36vh; - } + @media (min-width: 769px) { + max-height: 45vh; - @media (max-height: 1000px) { - max-height: 30vh; - } + @media (max-height: 1128px) { + max-height: 36vh; + } - @media (max-height: 900px) { - max-height: 25vh; - } + @media (max-height: 1000px) { + max-height: 30vh; + } - @media (max-height: 815px) { - max-height: 20vh; - } + @media (max-height: 900px) { + max-height: 25vh; + } - @media (max-height: 770px) { - display: none; + @media (max-height: 815px) { + max-height: 20vh; + } } } @@ -614,4 +613,4 @@ @media (max-width: 768px) { display: none; } -} +} \ No newline at end of file From bd19f94eb2dd439fc5795ecc475b6bb5a89de074 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 10 Oct 2024 11:32:54 -0300 Subject: [PATCH 08/10] Add current URL origin instead of hardcoded --- src/components/PricingPage/SectionThree/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/SectionThree/index.tsx index c5699590..2d18a925 100644 --- a/src/components/PricingPage/SectionThree/index.tsx +++ b/src/components/PricingPage/SectionThree/index.tsx @@ -3,6 +3,7 @@ import clsx from 'clsx'; import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less'; import { PricingCalculator } from '../../PricingCalculator'; import CopyToClipboardButton from '../../CopyToClipboardButton'; +import useWindowExistence from '../../../hooks/useWindowExistence'; import { container, title, @@ -13,6 +14,8 @@ import { } from './styles.module.less'; const SectionThree = () => { + const hasWindow = useWindowExistence(); + return (

{

PRICING CALCULATOR

- + {hasWindow ? ( + + ) : null}

Use our intuitive pricing calculator to easily estimate From dac1d7cd596b0cea07fd7ec5f3cc80660ef83763 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 10 Oct 2024 14:56:20 -0300 Subject: [PATCH 09/10] Create a separate component for the articles sidebar to share between blog post and comparison templates --- src/components/ArticleSidebar/index.tsx | 35 ++++++ .../ArticleSidebar/styles.module.less | 58 +++++++++ src/components/BlogPostToc/index.tsx | 2 +- src/components/BlogPostToc/styles.module.less | 1 - .../VendorAvatar/styles.module.less | 5 +- .../EtlToolsXvsYPage/SectionTwo/index.tsx | 35 ++---- .../SectionTwo/styles.module.less | 43 +------ src/components/SidebarCta/index.tsx | 25 ++++ src/components/SidebarCta/styles.module.less | 59 +++++++++ src/templates/blog-post/index.tsx | 46 ++----- src/templates/blog-post/styles.module.less | 115 ------------------ 11 files changed, 203 insertions(+), 221 deletions(-) create mode 100644 src/components/ArticleSidebar/index.tsx create mode 100644 src/components/ArticleSidebar/styles.module.less create mode 100644 src/components/SidebarCta/index.tsx create mode 100644 src/components/SidebarCta/styles.module.less diff --git a/src/components/ArticleSidebar/index.tsx b/src/components/ArticleSidebar/index.tsx new file mode 100644 index 00000000..e897afbb --- /dev/null +++ b/src/components/ArticleSidebar/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import ShareArticle from '../../templates/blog-post/ShareArticle'; +import { RenderToc } from '../BlogPostToc'; +import SidebarCta from '../SidebarCta'; +import { + container, + shareArticleDesktop, + tableOfContentsWrapper, +} from './styles.module.less'; + +interface ArticleSidebarProps { + article: { + title: string; + slug: string; + }; + tableOfContents: any; +} + +const ArticleSidebar = ({ article, tableOfContents }: ArticleSidebarProps) => { + return ( +

+
+ +
+ {tableOfContents.length > 0 ? ( +
+ +
+ ) : null} + +
+ ); +}; + +export default ArticleSidebar; diff --git a/src/components/ArticleSidebar/styles.module.less b/src/components/ArticleSidebar/styles.module.less new file mode 100644 index 00000000..421636ed --- /dev/null +++ b/src/components/ArticleSidebar/styles.module.less @@ -0,0 +1,58 @@ +.container { + display: flex; + flex-direction: column; + max-width: 256px; + width: 100%; + gap: 24px; + height: fit-content; + + @media (max-width: 1150px) { + max-width: 100%; + } + + @media (min-width: 1151px) { + position: sticky; + top: 140px; + } + + @media (max-width: 767px) { + padding-right: 0; + position: relative !important; + } +} + +.shareArticleDesktop { + display: flex; + + @media (max-width: 1150px) { + display: none; + } +} + +.tableOfContentsWrapper { + overflow: auto; + + @media (max-width: 1150px) { + margin-bottom: 32px; + } + + @media (min-width: 769px) { + max-height: 45vh; + + @media (max-height: 1160px) { + max-height: 36vh; + } + + @media (max-height: 1000px) { + max-height: 25vh; + } + + @media (max-height: 900px) { + max-height: 20vh; + } + + @media (max-height: 790px) { + max-height: 50vh; + } + } +} diff --git a/src/components/BlogPostToc/index.tsx b/src/components/BlogPostToc/index.tsx index c2b87453..7fb3ad5f 100644 --- a/src/components/BlogPostToc/index.tsx +++ b/src/components/BlogPostToc/index.tsx @@ -117,7 +117,7 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => { null ); const timeoutRef = React.useRef(null); - const isMobile = useMediaQuery('(max-width:768px)'); + const isMobile = useMediaQuery('(max-width: 768px) or (max-height: 790px)'); React.useEffect(() => { intersectionObserver.current = new IntersectionObserver( diff --git a/src/components/BlogPostToc/styles.module.less b/src/components/BlogPostToc/styles.module.less index c7fb67c7..62522d3b 100644 --- a/src/components/BlogPostToc/styles.module.less +++ b/src/components/BlogPostToc/styles.module.less @@ -1,7 +1,6 @@ .tableOfContents { background: #fff; counter-reset: toc-counter; - margin-top: 18px; padding: 0 8px; h3 { diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less b/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less index 82432d1d..bc11f93a 100644 --- a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less +++ b/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less @@ -4,10 +4,13 @@ justify-content: center; gap: 10px; flex-direction: column; - padding: 24px; width: 100%; text-align: center; transition: background-color 200ms ease-in; + + span { + white-space: nowrap; + } } .tableLogoWrapper { diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx b/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx index cdad69be..4aa7e8d6 100644 --- a/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx +++ b/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx @@ -5,16 +5,9 @@ import { Vendor, } from '../../../../shared'; import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; -import ShareArticle from '../../../templates/blog-post/ShareArticle'; import BlogBanner from '../../BlogBanner'; -import { RenderToc } from '../../BlogPostToc'; -import { - container, - leftColumn, - rightColumn, - bold, - tableOfContentsWrapper, -} from './styles.module.less'; +import ArticleSidebar from '../../ArticleSidebar'; +import { container, rightColumn, bold } from './styles.module.less'; import UseCases from './UseCases'; import Connectors from './Connectors'; import CoreFeatures from './CoreFeatures'; @@ -135,20 +128,16 @@ const SectionTwo = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => { return (
-
- -
- -
-
+

{intro.heading}

diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less b/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less index d42a6249..b30809be 100644 --- a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less +++ b/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less @@ -6,7 +6,7 @@ display: flex; gap: 48px; - @media (max-width: 1240px) { + @media (max-width: 1150px) { flex-direction: column; } @@ -180,47 +180,6 @@ } } -.leftColumn { - display: flex; - flex-direction: column; - gap: 24px; - height: 100%; - - @media (min-width: 426px) { - min-width: 256px; - } - - @media (min-width: 1241px) { - position: sticky; - top: 140px; - } -} - -.tableOfContentsWrapper { - overflow: auto; - max-height: 70vh; - - @media (max-height: 880px) { - max-height: 65vh; - } - - @media (max-height: 740px) { - max-height: 60vh; - } - - @media (max-height: 740px) { - max-height: 50vh; - } - - @media (max-height: 540px) { - max-height: 40vh; - } - - @media (max-height: 440px) { - display: none; - } -} - .bold { font-weight: 600; } diff --git a/src/components/SidebarCta/index.tsx b/src/components/SidebarCta/index.tsx new file mode 100644 index 00000000..7b933bb9 --- /dev/null +++ b/src/components/SidebarCta/index.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import { OutboundLinkFilled } from '../OutboundLink'; +import { dashboardRegisterUrl } from '../../../shared'; +import { container, image } from './styles.module.less'; + +const SidebarCta = () => { + return ( +

+
+ + Build a Pipeline + +
+

+ Start streaming your data for free +

+ + Build a Pipeline + +
+ ); +}; + +export default SidebarCta; diff --git a/src/components/SidebarCta/styles.module.less b/src/components/SidebarCta/styles.module.less new file mode 100644 index 00000000..c08c40a4 --- /dev/null +++ b/src/components/SidebarCta/styles.module.less @@ -0,0 +1,59 @@ +.container { + padding: 16px; + border-radius: 24px; + border: 1px solid #5072eb33; + background: #f9fafc; + text-align: center; + + @media (max-width: 1150px) { + display: none; + } + + &.mobile-only { + @media (max-width: 767px) { + display: block; + } + } + + h3 { + color: #04192b; + text-align: center; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 24.2px; + margin: 20px 0; + padding: 0 8px; + + span { + color: #5072eb; + } + } +} + +.image { + background: #04192b url('../../images/pattern-sidebar-cta.svg') no-repeat bottom left / contain; + text-align: center; + border-radius: 16px; + padding-top: 16px; + + span { + text-transform: uppercase; + color: #ffffff; + font-size: 1.5rem; + font-weight: 700; + line-height: 36px; + + span { + color: #5072eb; + } + } + + &::after { + content: ''; + display: block; + width: 224px; + height: 128px; + background: url('../../images/build-pipeline.svg') no-repeat bottom / contain; + } +} diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx index cf49bd7d..07b2df00 100644 --- a/src/templates/blog-post/index.tsx +++ b/src/templates/blog-post/index.tsx @@ -13,7 +13,6 @@ import StraightLinesBackground from '../../components/BackgroundImages/StraightL import { PopularArticles } from '../../components/BlogPopularArticles'; import BlogPostPopupModal from '../../components/BlogPostPopupModal'; import { ProcessedPost } from '../../components/BlogPostProcessor'; -import { RenderToc } from '../../components/BlogPostToc'; import Breadcrumbs from '../../components/Breadcrumbs'; import { OutboundLinkFilled, @@ -29,6 +28,7 @@ import { dashboardRegisterUrl, getAuthorPathBySlug } from '../../../shared'; import Avatar from '../../components/Avatar'; import SocialLinks from '../../components/SocialLinks'; import BlogBanner from '../../components/BlogBanner'; +import ArticleSidebar from '../../components/ArticleSidebar'; import ShareArticle from './ShareArticle'; import { blogPost, @@ -47,10 +47,6 @@ import { mainContent, background, bigBuildPipelineBannerContainer, - postSidebar, - shareArticleDesktop, - sidebarRight, - banner, popularArticlesWrapper, bigBuildPipelineBannerSection, bigBuildPipelineBannerContainerLayout, @@ -67,7 +63,6 @@ import { authorNameAndRole, authorName, authorRole, - tableOfContentsWrapper, } from './styles.module.less'; dayjs.extend(reltime); @@ -198,38 +193,13 @@ const BlogPostTemplate = ({ data: { post } }) => { }} />
- -
-
- -
- {tableOfContents.length > 0 ? ( -
- -
- ) : null} -
-
- - Build a Pipeline - -
-

- Start streaming your data{' '} - for free -

- - Build a Pipeline - -
-
+
) : null} diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less index 78833fc2..709c57d9 100644 --- a/src/templates/blog-post/styles.module.less +++ b/src/templates/blog-post/styles.module.less @@ -366,121 +366,6 @@ } } -.postSidebar { - display: flex; - flex-direction: column; - max-width: 256px; - width: 100%; - - @media (max-width: 1150px) { - max-width: 100%; - } - - @media (min-width: 1150px) { - position: sticky; - top: 140px; - } - - @media (max-width: 767px) { - padding-right: 0; - position: relative !important; - } -} - -.shareArticleDesktop { - display: flex; - - @media (max-width: 1150px) { - display: none; - } -} - -.tableOfContentsWrapper { - overflow: auto; - margin-top: 24px; - - @media (min-width: 769px) { - max-height: 45vh; - - @media (max-height: 1128px) { - max-height: 36vh; - } - - @media (max-height: 1000px) { - max-height: 30vh; - } - - @media (max-height: 900px) { - max-height: 25vh; - } - - @media (max-height: 815px) { - max-height: 20vh; - } - } -} - -.sidebarRight { - padding: 16px; - border-radius: 24px; - border: 1px solid #5072eb33; - background: #f9fafc; - text-align: center; - margin-top: 18px; - - @media (max-width: 1150px) { - display: none; - } - - &.mobile-only { - @media (max-width: 767px) { - display: block; - } - } - - h3 { - color: #04192b; - text-align: center; - font-size: 1.25rem; - font-style: normal; - font-weight: 500; - line-height: 24.2px; - margin: 20px 0; - padding: 0 8px; - - span { - color: #5072eb; - } - } -} - -.banner { - background: #04192b url('../../images/pattern-sidebar-cta.svg') no-repeat bottom left / contain; - text-align: center; - border-radius: 16px; - padding-top: 16px; - - span { - text-transform: uppercase; - color: #ffffff; - font-size: 1.5rem; - font-weight: 700; - line-height: 36px; - - span { - color: #5072eb; - } - } - - &::after { - content: ''; - display: block; - width: 224px; - height: 128px; - background: url('../../images/build-pipeline.svg') no-repeat bottom / contain; - } -} - .popularArticlesWrapper { .sectionTopBottomPadding; .globalMaxWidth; From 5a744c30fc49c0b098cbe26cdd451ef48947803e Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 10 Oct 2024 15:05:21 -0300 Subject: [PATCH 10/10] Add current URL origin instead of hardcoded --- src/templates/blog-post/ShareArticle/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/templates/blog-post/ShareArticle/index.tsx b/src/templates/blog-post/ShareArticle/index.tsx index d6ac8a58..222806b8 100644 --- a/src/templates/blog-post/ShareArticle/index.tsx +++ b/src/templates/blog-post/ShareArticle/index.tsx @@ -6,6 +6,7 @@ import TwitterXOutlinedIcon from '../../../svgs/share-social-icons/twitter-x-out import CopyToClipboardButton from '../../../components/CopyToClipboardButton'; import { socialShareButton } from '../../../components/styles.module.less'; import { OutboundLink } from '../../../components/OutboundLink'; +import useWindowExistence from '../../../hooks/useWindowExistence'; import { Container, SocialButtonsWrapper } from './styles'; type ShareArticleProps = { @@ -16,9 +17,11 @@ type ShareArticleProps = { }; const ShareArticle = ({ article: { title, slug } }: ShareArticleProps) => { + const hasWindow = useWindowExistence(); + const shareMessage = `Check out the article "${title}"`; - const articleUrl = `https://estuary.dev/${slug}`; + const articleUrl = hasWindow ? `${window.location.origin}/${slug}` : ''; const getSocialLinkAriaLabel = (platform: string) => `Click to share article on ${platform}`;