Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment-driven Update: Quicklinks in header #6178

Merged
merged 11 commits into from
Oct 18, 2024
Merged

Experiment-driven Update: Quicklinks in header #6178

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
151f584
update hero ctas
john-rock Sep 30, 2024
71c5287
accept hrefs
john-rock Oct 1, 2024
8590932
fix the link
john-rock Oct 1, 2024
e1cf65c
update var name
john-rock Oct 1, 2024
e27c1e2
remove demo href
john-rock Oct 1, 2024
9526b06
Merge branch 'current' into experiment/apply-quicklink-hero
mirnawong1 Oct 4, 2024
d4e14a1
Merge branch 'current' into experiment/apply-quicklink-hero
mirnawong1 Oct 18, 2024
a003e39
update sentence case
john-rock Oct 18, 2024
72ec8bc
update button color
john-rock Oct 18, 2024
b0eb9f6
Merge branch 'current' into experiment/apply-quicklink-hero
mirnawong1 Oct 18, 2024
b8e7d43
Merge branch 'current' into experiment/apply-quicklink-hero
john-rock Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion website/src/components/hero/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<header className={` ${styles.Hero} container-fluid ${classNames ? classNames : ''}`} style={customStyles && customStyles}>
{showGraphic && (
Expand All @@ -12,6 +12,22 @@ function Hero({ heading, subheading, showGraphic = false, customStyles = {}, cla
<div className={`col col--7 ${colClassNames ? colClassNames : ''}`}>
<h1>{heading}</h1>
<p>{subheading}</p>
{callToActionsTitle && <span className={styles.callToActionsTitle}>{callToActionsTitle}</span>}
{callToActions.length > 0 && (
<div className={styles.callToActions}>
{callToActions.map((c, index) => (
c.href ? (
<a key={index} href={c.href} title={c.title} className={`${styles.callToAction}`} target={c.newTab ? '_blank' : '_self'}>
{c.title}
</a>
) : (
<a key={index} onClick={c.onClick} className={`${styles.callToAction}`}>
{c.title}
</a>
)
))}
</div>
)}
</div>
</div>
</div>
Expand Down
30 changes: 30 additions & 0 deletions website/src/components/hero/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

.callToAction {
outline: #fff solid 1px;
border-radius: 4px;
padding: 0 12px;
color: #fff;
transition: all .2s;
cursor: pointer;
}

.callToAction:hover, .callToAction:active, .callToAction:focus {
text-decoration: none;
outline: rgb(4, 115, 119) solid 1px;
color: #fff;
}
40 changes: 38 additions & 2 deletions website/src/components/quickstartGuideList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -98,6 +98,35 @@ 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 heroCTAs = [
{
title: 'Quickstart Guides',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sugg sentence case

Suggested change
title: 'Quickstart Guides',
title: 'Quickstart guides',

value: 'Quickstart'
},
{
title: 'Use Jinja to improve your SQL code',
value: 'Jinja'
},
{
title: 'Orchestration',
value: 'Orchestration'
},
{
title: 'Sign up for dbt Cloud',
href: 'https://www.getdbt.com/signup',
newTab: true
}
];

// Function to handle CTA clicks
const handleCallToActionClick = (value) => {
const params = new URLSearchParams(location.search);
params.set('tags', value);
history.replace({ search: params.toString() });
};

return (
<Layout>
<Head>
Expand All @@ -111,6 +140,13 @@ function QuickstartList({ quickstartData }) {
showGraphic={false}
customStyles={{ marginBottom: 0 }}
classNames={styles.quickstartHero}
callToActions={heroCTAs.map(guide => ({
title: guide.title,
href: guide.href,
onClick: () => handleCallToActionClick(guide.value),
newTab: guide.newTab
}))}
callToActionsTitle={'Popular guides'}
/>
<section id='quickstart-card-section'>
<div className={`container ${styles.quickstartFilterContainer} `}>
Expand All @@ -135,7 +171,7 @@ function QuickstartList({ quickstartData }) {
</div>
</section>
</Layout>
)
);
}

export default QuickstartList;
Loading