mirror of https://github.com/kremalicious/blog.git
76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { graphql, useStaticQuery } from 'gatsby'
|
|
import remark from 'remark'
|
|
import remarkReact from 'remark-react'
|
|
import styles from './Changelog.module.scss'
|
|
|
|
const queryGithub = graphql`
|
|
query GitHubReposInfo {
|
|
github {
|
|
viewer {
|
|
repositories(first: 100, privacy: PUBLIC, isFork: false) {
|
|
edges {
|
|
node {
|
|
name
|
|
url
|
|
owner {
|
|
login
|
|
}
|
|
object(expression: "master:CHANGELOG.md") {
|
|
id
|
|
... on GitHub_Blob {
|
|
text
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function Changelog({ repo }: { repo: string }) {
|
|
const data = useStaticQuery(queryGithub)
|
|
const repositoriesGitHub = data.github.viewer.repositories.edges
|
|
|
|
const repoFilteredArray = repositoriesGitHub
|
|
.map(({ node }: { node: any }) => {
|
|
if (node.name === repo) return node
|
|
})
|
|
.filter((n: any) => n)
|
|
|
|
const repoMatch = repoFilteredArray[0]
|
|
const { object, url, owner } = repoMatch
|
|
|
|
if (repoMatch === undefined || object === undefined) return null
|
|
|
|
const changelogHtml =
|
|
object &&
|
|
remark()
|
|
.use(remarkReact)
|
|
.processSync(object.text).contents
|
|
|
|
const filePathUrl = `${url}/tree/master/CHANGELOG.md`
|
|
const filePathDisplay = `${owner.login}/${repo}:CHANGELOG.md`
|
|
|
|
return (
|
|
<div className={styles.changelog}>
|
|
<h2 className={styles.changelogTitle} id="changelog">
|
|
Changelog
|
|
</h2>
|
|
<div className={styles.changelogContent}>
|
|
{changelogHtml}
|
|
<p className={styles.changelogSource}>
|
|
<em>
|
|
sourced from{' '}
|
|
<a href={filePathUrl}>
|
|
<code>{filePathDisplay}</code>
|
|
</a>
|
|
</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|