import React, { ReactElement, useEffect, useState, createElement, Fragment } from 'react' import { graphql, useStaticQuery } from 'gatsby' import { unified } from 'unified' import remarkParse from 'remark-parse' import remarkRehype from 'remark-rehype' import rehypeReact from 'rehype-react' import * as styles from './Changelog.module.css' export function PureChangelog({ repo, repos }: { repo: string repos: Queries.GitHubReposQuery['github']['viewer']['repositories']['edges'] }): ReactElement | null { const [changelogHtml, setChangelogHtml] = useState() const repoFilteredArray = repos .map(({ node }) => { if (node.name === repo) return node }) .filter((n: any) => n) const repoMatch = repoFilteredArray[0] useEffect(() => { if (!(repoMatch?.object as Queries.GitHub_Blob)?.text) return async function init() { const changelogHtml = await unified() .use(remarkParse) .use(remarkRehype) .use(rehypeReact, { createElement, Fragment }) .processSync((repoMatch?.object as Queries.GitHub_Blob).text).result setChangelogHtml(changelogHtml) } init() }, [(repoMatch?.object as Queries.GitHub_Blob)?.text]) return repoMatch ? (
sourced from{' '}
{`${repoMatch?.owner.login}/${repo}:CHANGELOG.md`}