2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './Lead.module.css'
|
2018-07-22 04:27:37 +02:00
|
|
|
|
|
|
|
// Extract lead paragraph from content
|
|
|
|
// Grab everything before more tag, or just first paragraph
|
2020-05-22 14:38:19 +02:00
|
|
|
const PostLead = ({
|
|
|
|
post,
|
2020-07-19 13:31:27 +02:00
|
|
|
className
|
2020-05-22 14:38:19 +02:00
|
|
|
}: {
|
2022-11-11 03:31:54 +01:00
|
|
|
post: Queries.BlogPostBySlugQuery['post']
|
2020-07-19 13:31:27 +02:00
|
|
|
className?: string
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement => {
|
2018-07-22 04:27:37 +02:00
|
|
|
let lead
|
|
|
|
const content = post.html
|
|
|
|
const separator = '<!-- more -->'
|
|
|
|
|
2018-09-27 22:33:01 +02:00
|
|
|
if (content.includes(separator)) {
|
|
|
|
lead = content.split(separator)[0]
|
2018-07-22 04:27:37 +02:00
|
|
|
} else {
|
2018-09-27 22:33:01 +02:00
|
|
|
lead = content.split('\n')[0]
|
2018-07-22 04:27:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2018-09-27 21:33:25 +02:00
|
|
|
<div
|
2022-11-11 03:31:54 +01:00
|
|
|
className={`${styles.lead} ${className && className}`}
|
2018-09-27 21:33:25 +02:00
|
|
|
dangerouslySetInnerHTML={{ __html: lead }}
|
|
|
|
/>
|
2018-07-22 04:27:37 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PostLead
|