yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-21 23:58:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs-website/src/pages/_components/TownhallButton/index.jsx
View File

@ -11,20 +11,26 @@ const TownhallButton = () => {
const daysUntilLastThursday = lastThursday - currentDay;
let showButton = false;
let currentMonth = '';
let buttonText = '';
let buttonLink = '';
let townhallSeasonClass = '';
if (daysUntilLastThursday > 0 && daysUntilLastThursday <= 14) {
showButton = true;
currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(today);
const 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 (
showButton && (
<Link to="http://rsvp.datahubproject.io" className={clsx('button button--primary button--md', styles.feature)}>
Join {currentMonth} Townhall!&nbsp;✨
</Link>
)
<Link to={buttonLink} className={clsx('button button--primary button--md', styles[townhallSeasonClass])}>
{buttonText}
</Link>
);
};

37
docs-website/src/pages/_components/TownhallButton/townhallbutton.module.scss
View File

@ -1,14 +1,29 @@
.feature {
color: white;
border: 1px solid transparent;
background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
background-origin: border-box;
opacity: 90%;
&:hover {
opacity: 100%;
background: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
.townhall-season {
color: white;
border: 1px solid transparent;
background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
background-origin: border-box;
opacity: 90%;
&:hover {
opacity: 100%;
background: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
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;
}
}