64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { Box, StyledLink } from './../elements/LayoutPrimitives'
|
|
import { StyledText } from './../../components/elements/StyledText'
|
|
import { formattedLongDate } from './../../lib/dateFormatting'
|
|
|
|
type SubtitleStyle = 'footnote' | 'shareSubtitle'
|
|
|
|
type ArticleSubtitleProps = {
|
|
rawDisplayDate: string
|
|
href: string
|
|
author?: string
|
|
style?: SubtitleStyle
|
|
hideButton?: boolean
|
|
}
|
|
|
|
export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
|
|
const textStyle = props.style || 'footnote'
|
|
|
|
return (
|
|
<Box>
|
|
<StyledText style={textStyle} css={{ wordBreak: 'break-word' }}>
|
|
{articleSubtitle(props.href, props.author)}{' '}
|
|
<span style={{ position: 'relative', bottom: 1 }}>• </span>{' '}
|
|
{formattedLongDate(props.rawDisplayDate)}{' '}
|
|
{!props.hideButton && (
|
|
<>
|
|
<span style={{ position: 'relative', bottom: 1 }}>• </span>{' '}
|
|
<StyledLink
|
|
href={props.href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
css={{
|
|
textDecoration: 'underline',
|
|
color: '$grayTextContrast',
|
|
}}
|
|
>
|
|
See original
|
|
</StyledLink>
|
|
</>
|
|
)}
|
|
</StyledText>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
function articleSubtitle(url: string, author?: string): string {
|
|
if (author) {
|
|
return `${authoredByText(author)}, ${new URL(url).hostname}`
|
|
} else {
|
|
return new URL(url).origin
|
|
}
|
|
}
|
|
|
|
export function authoredByText(author: string): string {
|
|
return `by ${removeHTMLTags(author)}`
|
|
}
|
|
|
|
function removeHTMLTags(str: string | null | undefined): string {
|
|
if (typeof str === 'string') {
|
|
return str.replace(/(<([^>]+)>)/gi, '')
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|