112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
import cx from 'classnames'
|
|
import dayjs from 'dayjs'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { ArrowRightIcon } from '@primer/octicons-react'
|
|
import { FeaturedLink, useProductLandingContext } from 'components/context/ProductLandingContext'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
import { TruncateLines } from 'components/TruncateLines'
|
|
|
|
export const FeaturedArticles = () => {
|
|
const {
|
|
featuredArticles = [],
|
|
changelog,
|
|
whatsNewChangelog,
|
|
changelogUrl,
|
|
} = useProductLandingContext()
|
|
const { t } = useTranslation('toc')
|
|
|
|
return (
|
|
<div className="d-lg-flex gutter my-6 py-6">
|
|
{featuredArticles.map((section, i) => {
|
|
return (
|
|
<div
|
|
key={section.label + i}
|
|
className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}
|
|
>
|
|
<ArticleList
|
|
title={section.label}
|
|
viewAllHref={section.viewAllHref}
|
|
articles={section.articles}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{changelog && (
|
|
<div className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}>
|
|
<ArticleList
|
|
title={t('whats_new')}
|
|
viewAllHref={changelogUrl}
|
|
articles={(whatsNewChangelog || []).map((link) => {
|
|
return {
|
|
title: link.title,
|
|
date: link.date,
|
|
href: link.href,
|
|
}
|
|
})}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type ArticleListProps = {
|
|
title?: string
|
|
viewAllHref?: string
|
|
articles: Array<FeaturedLink>
|
|
maxLines?: number
|
|
}
|
|
export const ArticleList = ({ title, viewAllHref, articles, maxLines = 2 }: ArticleListProps) => {
|
|
return (
|
|
<>
|
|
{title && (
|
|
<div className="featured-links-heading mb-4 d-flex flex-items-baseline">
|
|
<h3 className="f4 text-normal text-mono text-uppercase">{title}</h3>
|
|
{viewAllHref && (
|
|
<Link href={viewAllHref} className="ml-4">
|
|
View all <ArrowRightIcon size={14} className="v-align-middle" />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<ul className="list-style-none">
|
|
{articles.map((link) => {
|
|
return (
|
|
<li key={link.href} className="border-top">
|
|
<Link
|
|
href={link.href}
|
|
className="link-with-intro Bump-link--hover no-underline d-block py-3"
|
|
>
|
|
<h4 className="link-with-intro-title">
|
|
<span dangerouslySetInnerHTML={{ __html: link.title }} />
|
|
<span className="Bump-link-symbol">→</span>
|
|
</h4>
|
|
{!link.hideIntro && link.intro && (
|
|
<TruncateLines
|
|
as="p"
|
|
maxLines={maxLines}
|
|
className="link-with-intro-intro color-text-secondary mb-0 mt-1"
|
|
>
|
|
<span dangerouslySetInnerHTML={{ __html: link.intro }} />
|
|
</TruncateLines>
|
|
)}
|
|
{link.date && (
|
|
<time
|
|
className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
|
|
aria-label={dayjs(link.date).format('LLL')}
|
|
>
|
|
{dayjs(link.date).format('MMMM DD')}
|
|
</time>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|