From 151f5845d34220a705d539a698fde4c9b888adf7 Mon Sep 17 00:00:00 2001 From: john-rock Date: Mon, 30 Sep 2024 14:07:54 -0400 Subject: [PATCH 1/7] update hero ctas --- website/src/components/hero/index.js | 18 +++++++++- website/src/components/hero/styles.module.css | 30 +++++++++++++++++ .../components/quickstartGuideList/index.js | 33 +++++++++++++++++-- 3 files changed, 78 insertions(+), 3 deletions(-) diff --git a/website/src/components/hero/index.js b/website/src/components/hero/index.js index e4bef8e234b..c171417428d 100644 --- a/website/src/components/hero/index.js +++ b/website/src/components/hero/index.js @@ -1,7 +1,7 @@ import React from 'react'; import styles from './styles.module.css'; -function Hero({ heading, subheading, showGraphic = false, customStyles = {}, classNames = '', colClassNames = '' }) { +function Hero({ heading, subheading, showGraphic = false, customStyles = {}, classNames = '', colClassNames = '', callToActionsTitle, callToActions = [] }) { return (
{showGraphic && ( @@ -12,6 +12,22 @@ function Hero({ heading, subheading, showGraphic = false, customStyles = {}, cla

{heading}

{subheading}

+ {callToActionsTitle && {callToActionsTitle}} + {callToActions.length > 0 && ( +
+ {callToActions.map((c, index) => ( + c.href ? ( + + {c.label} + + ) : ( + + {c.title} + + ) + ))} +
+ )}
diff --git a/website/src/components/hero/styles.module.css b/website/src/components/hero/styles.module.css index f596b53762a..2400949aa97 100644 --- a/website/src/components/hero/styles.module.css +++ b/website/src/components/hero/styles.module.css @@ -49,3 +49,33 @@ width: 60%; } } + +.callToActionsTitle { + font-weight: bold; + margin-top: 20px; + margin-bottom: 20px; + font-size: 1.25rem; + display: block; +} + +.callToActions { + display: flex; + flex-flow: wrap; + gap: 0.8rem; + justify-content: center; +} + +.callToActions a { + outline: #fff solid 1px; + border-radius: 4px; + padding: 0 12px; + color: #fff; + transition: all .2s; + cursor: pointer; +} + +.callToActions a:hover, .callToActions a:active, .callToActions a:focus { + text-decoration: none; + outline: rgb(4, 115, 119) solid 1px; + color: #fff; +} diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js index 0f4b5764340..c8df41d98ce 100644 --- a/website/src/components/quickstartGuideList/index.js +++ b/website/src/components/quickstartGuideList/index.js @@ -61,7 +61,7 @@ function QuickstartList({ quickstartData }) { // Update the URL with the new search parameters history.replace({ search: params.toString() }); -}; + }; // Handle all filters const handleDataFilter = () => { @@ -98,6 +98,30 @@ function QuickstartList({ quickstartData }) { handleDataFilter(); }, [selectedTags, selectedLevel, searchInput]); // Added searchInput to dependency array + // Set the featured guides that will show as CTAs in the hero section + // The value of the tag must match a tag in the frontmatter of the guides in order for the filter to apply after clicking + const featuredGuides = [ + { + title: 'Quickstart Guides', + value: 'Quickstart' + }, + { + title: 'Use Jinja to improve your SQL code', + value: 'Jinja' + }, + { + title: 'Orchestration', + value: 'Orchestration' + }, + ]; + + // Function to handle CTA clicks + const handleCallToActionClick = (value) => { + const params = new URLSearchParams(location.search); + params.set('tags', value); + history.replace({ search: params.toString() }); + }; + return ( @@ -111,6 +135,11 @@ function QuickstartList({ quickstartData }) { showGraphic={false} customStyles={{ marginBottom: 0 }} classNames={styles.quickstartHero} + callToActions={featuredGuides.map(guide => ({ + title: guide.title, + onClick: () => handleCallToActionClick(guide.value) + }))} + callToActionsTitle={'Popular guides'} />
@@ -135,7 +164,7 @@ function QuickstartList({ quickstartData }) {
- ) + ); } export default QuickstartList; From 71c52876ea5530defc5dcb2d3445d5ee77d2aeea Mon Sep 17 00:00:00 2001 From: john-rock Date: Tue, 1 Oct 2024 09:59:47 -0400 Subject: [PATCH 2/7] accept hrefs --- website/src/components/hero/index.js | 4 ++-- website/src/components/hero/styles.module.css | 4 ++-- website/src/components/quickstartGuideList/index.js | 9 ++++++++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/website/src/components/hero/index.js b/website/src/components/hero/index.js index c171417428d..073fb518998 100644 --- a/website/src/components/hero/index.js +++ b/website/src/components/hero/index.js @@ -17,8 +17,8 @@ function Hero({ heading, subheading, showGraphic = false, customStyles = {}, cla
{callToActions.map((c, index) => ( c.href ? ( - - {c.label} + + {c.title} ) : ( diff --git a/website/src/components/hero/styles.module.css b/website/src/components/hero/styles.module.css index 2400949aa97..d654db2908d 100644 --- a/website/src/components/hero/styles.module.css +++ b/website/src/components/hero/styles.module.css @@ -65,7 +65,7 @@ justify-content: center; } -.callToActions a { +.callToAction { outline: #fff solid 1px; border-radius: 4px; padding: 0 12px; @@ -74,7 +74,7 @@ cursor: pointer; } -.callToActions a:hover, .callToActions a:active, .callToActions a:focus { +.callToAction:hover, .callToAction:active, .callToAction:focus { text-decoration: none; outline: rgb(4, 115, 119) solid 1px; color: #fff; diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js index c8df41d98ce..53d1007648d 100644 --- a/website/src/components/quickstartGuideList/index.js +++ b/website/src/components/quickstartGuideList/index.js @@ -113,6 +113,11 @@ function QuickstartList({ quickstartData }) { title: 'Orchestration', value: 'Orchestration' }, + { + title: 'Sign up for dbt Cloud', + href: 'https://cloud.getdbt.com/signup/', + newTab: true + } ]; // Function to handle CTA clicks @@ -137,7 +142,9 @@ function QuickstartList({ quickstartData }) { classNames={styles.quickstartHero} callToActions={featuredGuides.map(guide => ({ title: guide.title, - onClick: () => handleCallToActionClick(guide.value) + href: guide.href, + onClick: () => handleCallToActionClick(guide.value), + newTab: guide.newTab }))} callToActionsTitle={'Popular guides'} /> From 859093245783fb29ee795b65e7b99046afda41a8 Mon Sep 17 00:00:00 2001 From: john-rock Date: Tue, 1 Oct 2024 10:02:15 -0400 Subject: [PATCH 3/7] fix the link --- website/src/components/quickstartGuideList/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js index 53d1007648d..2bff0142a66 100644 --- a/website/src/components/quickstartGuideList/index.js +++ b/website/src/components/quickstartGuideList/index.js @@ -115,7 +115,7 @@ function QuickstartList({ quickstartData }) { }, { title: 'Sign up for dbt Cloud', - href: 'https://cloud.getdbt.com/signup/', + href: 'https://www.getdbt.com/signup', newTab: true } ]; From e1cf65c6d51361c704f6fb486fadf4d39779a734 Mon Sep 17 00:00:00 2001 From: john-rock Date: Tue, 1 Oct 2024 10:03:15 -0400 Subject: [PATCH 4/7] update var name --- website/src/components/quickstartGuideList/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js index 2bff0142a66..0a14153bc56 100644 --- a/website/src/components/quickstartGuideList/index.js +++ b/website/src/components/quickstartGuideList/index.js @@ -100,7 +100,7 @@ function QuickstartList({ quickstartData }) { // Set the featured guides that will show as CTAs in the hero section // The value of the tag must match a tag in the frontmatter of the guides in order for the filter to apply after clicking - const featuredGuides = [ + const heroCTAs = [ { title: 'Quickstart Guides', value: 'Quickstart' @@ -140,7 +140,7 @@ function QuickstartList({ quickstartData }) { showGraphic={false} customStyles={{ marginBottom: 0 }} classNames={styles.quickstartHero} - callToActions={featuredGuides.map(guide => ({ + callToActions={heroCTAs.map(guide => ({ title: guide.title, href: guide.href, onClick: () => handleCallToActionClick(guide.value), From e27c1e27eb4556e50d13aed340446a8b8b767062 Mon Sep 17 00:00:00 2001 From: john-rock Date: Tue, 1 Oct 2024 10:49:21 -0400 Subject: [PATCH 5/7] remove demo href --- website/src/components/quickstartGuideList/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js index 0a14153bc56..3b3623f1e14 100644 --- a/website/src/components/quickstartGuideList/index.js +++ b/website/src/components/quickstartGuideList/index.js @@ -113,11 +113,6 @@ function QuickstartList({ quickstartData }) { title: 'Orchestration', value: 'Orchestration' }, - { - title: 'Sign up for dbt Cloud', - href: 'https://www.getdbt.com/signup', - newTab: true - } ]; // Function to handle CTA clicks From a003e39b223fd5c5b8c151b340c198d7b46d696d Mon Sep 17 00:00:00 2001 From: john-rock Date: Fri, 18 Oct 2024 08:52:11 -0400 Subject: [PATCH 6/7] update sentence case --- website/src/components/quickstartGuideList/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js index 3b3623f1e14..2b87ae3e4a1 100644 --- a/website/src/components/quickstartGuideList/index.js +++ b/website/src/components/quickstartGuideList/index.js @@ -102,7 +102,7 @@ function QuickstartList({ quickstartData }) { // The value of the tag must match a tag in the frontmatter of the guides in order for the filter to apply after clicking const heroCTAs = [ { - title: 'Quickstart Guides', + title: 'Quickstart guides', value: 'Quickstart' }, { From 72ec8bcef1a69cf68cb1b612b009edd6a95c7d7c Mon Sep 17 00:00:00 2001 From: john-rock Date: Fri, 18 Oct 2024 08:57:45 -0400 Subject: [PATCH 7/7] update button color --- website/src/components/hero/styles.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/website/src/components/hero/styles.module.css b/website/src/components/hero/styles.module.css index d654db2908d..67d3c8c5d68 100644 --- a/website/src/components/hero/styles.module.css +++ b/website/src/components/hero/styles.module.css @@ -77,5 +77,6 @@ .callToAction:hover, .callToAction:active, .callToAction:focus { text-decoration: none; outline: rgb(4, 115, 119) solid 1px; + background-color: rgb(4, 115, 119); color: #fff; }