const [ headings, setHeadings ] = useState([])

useEffect(() => {

const hTagsCollection = document.querySelectorAll('h2, h3, h4, h5, h6')

const hTagsArr = [].slice.call(hTagsCollection)

console.log(hTagsCollection, hTagsArr)

setHeadings(hTagsArr)

if (hTagsArr.length !== 0) {

hTagsArr.map(el => el.setAttribute('id', el.textContent))

}

},[])

return (

<>

<Header>

<h1>{data.title}</h1>

<time dateTime={data.published_at.slice(0, 10)}>

{new Date(data.published_at).toDateString().slice(4)}

</time>

<span>

by {data.created_by.firstname} {data.created_by.lastname}

</span>

</Header>

<Figure>

<ProgressiveImage

preview={data.image[0].formats.thumbnail.url}

smallImage={data.image[0].formats.small.url}

mediumImage={data.image[0].formats.medium.url}

largeImage={data.image[0].formats.large.url}

sourceImage={data.image[0].url}

alt={data.image[0].alternativeText}

/>

<figcaption><em>{data.image[0].caption}</em></figcaption>

</Figure>

{

headings.length === 0 ? null :

<Nav className="contents">

<p>Contents</p>

<ul>

{

headings.map(li =>

<li className={li.nodeName} key={li.textContent}>

<a href={`#${li.textContent}`}>{li.textContent}</a>

</li>

)

}

</ul>

</Nav>

}

<ReactMarkdown

source={data.content}

escapeHtml={false}

transformImageUri={uri =>

uri.startsWith('http') ? uri : `${process.env.NEXT_PUBLIC_HCMS_API_URL}${uri}`

}

/>

</>

)