docs: add youtube link to townhall button on docs (#9381)

This commit is contained in:
Hyejin Yoon 2023-12-07 08:59:25 +09:00 committed by GitHub
parent 16fe22aafa
commit dc6f169846
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 20 deletions

View File

@ -11,20 +11,26 @@ const TownhallButton = () => {
const daysUntilLastThursday = lastThursday - currentDay; const daysUntilLastThursday = lastThursday - currentDay;
let showButton = false; let buttonText = '';
let currentMonth = ''; let buttonLink = '';
let townhallSeasonClass = '';
if (daysUntilLastThursday > 0 && daysUntilLastThursday <= 14) { if (daysUntilLastThursday > 0 && daysUntilLastThursday <= 14) {
showButton = true; const currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(today);
currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(today); buttonText = `Join ${currentMonth} Townhall! ✨`;
buttonLink = 'http://rsvp.datahubproject.io';
townhallSeasonClass = 'townhall-season'
} else {
buttonText = 'Watch Our Latest Townhall! 👀';
buttonLink = 'https://www.youtube.com/playlist?list=PLdCtLs64vZvHTXGqybmOfyxXbGDn2Reb9';
townhallSeasonClass = 'non-townhall-season'
} }
return ( return (
showButton && ( <Link to={buttonLink} className={clsx('button button--primary button--md', styles[townhallSeasonClass])}>
<Link to="http://rsvp.datahubproject.io" className={clsx('button button--primary button--md', styles.feature)}> {buttonText}
Join {currentMonth} Townhall!&nbsp;
</Link> </Link>
)
); );
}; };

View File

@ -1,4 +1,4 @@
.feature { .townhall-season {
color: white; color: white;
border: 1px solid transparent; border: 1px solid transparent;
background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%); background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
@ -12,3 +12,18 @@
background-origin: border-box; background-origin: border-box;
} }
} }
.non-townhall-season {
color: white;
border: 1px solid transparent;
background-image: linear-gradient(to right, #1890ff 0%, #48DBFB 100%);
background-origin: border-box;
opacity: 90%;
&:hover {
opacity: 100%;
background: linear-gradient(to right, #1890ff 0%, #48DBFB 100%);
background-image: linear-gradient(to right, #1890ff 0%, #48DBFB 100%);
background-origin: border-box;
}
}