mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-22 17:23:50 +01:00
package updates, refactor remark usage
This commit is contained in:
parent
07c93534cc
commit
faad0c6068
GPG Key ID:
606EEEF3C479A91F
@ -1,3 +1,29 @@
|
||||
const esModules = [
|
||||
'unified',
|
||||
'vfile',
|
||||
'vfile-.+',
|
||||
'unist-.+',
|
||||
'bail',
|
||||
'is-plain-obj',
|
||||
'trough',
|
||||
'mdast-util-.+',
|
||||
'micromark',
|
||||
'micromark-.+',
|
||||
'parse-entities',
|
||||
'character-entities',
|
||||
'property-information',
|
||||
'comma-separated-tokens',
|
||||
'hast-.+',
|
||||
'remark-.+',
|
||||
'rehype-.+',
|
||||
'space-separated-tokens',
|
||||
'decode-named-character-reference',
|
||||
'ccount',
|
||||
'escape-string-regexp',
|
||||
'markdown-table',
|
||||
'web-namespaces'
|
||||
].join('|')
|
||||
|
||||
module.exports = {
|
||||
rootDir: '../',
|
||||
transform: {
|
||||
@ -12,7 +38,7 @@ module.exports = {
|
||||
'^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1` // Workaround for https://github.com/facebook/jest/issues/9771
|
||||
},
|
||||
testPathIgnorePatterns: ['node_modules', '.cache', 'public', 'coverage'],
|
||||
transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
|
||||
transformIgnorePatterns: [`node_modules/(?!(gatsby|${esModules})/)`],
|
||||
globals: {
|
||||
__PATH_PREFIX__: ''
|
||||
},
|
||||
|
||||
4143
package-lock.json
generated
4143
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
66
package.json
66
package.json
@ -28,7 +28,7 @@
|
||||
"not op_mini all"
|
||||
],
|
||||
"dependencies": {
|
||||
"@ethersproject/providers": "^5.6.2",
|
||||
"@ethersproject/providers": "^5.6.4",
|
||||
"@ethersproject/units": "^5.6.0",
|
||||
"@loadable/component": "^5.15.2",
|
||||
"@web3-react/core": "^6.1.9",
|
||||
@ -41,30 +41,30 @@
|
||||
"fast-exif": "^1.0.1",
|
||||
"feather-icons": "^4.29.0",
|
||||
"fraction.js": "^4.2.0",
|
||||
"gatsby": "^4.11.2",
|
||||
"gatsby-plugin-catch-links": "^4.11.0",
|
||||
"gatsby-plugin-feed": "^4.11.1",
|
||||
"gatsby-plugin-image": "^2.11.1",
|
||||
"gatsby": "^4.12.1",
|
||||
"gatsby-plugin-catch-links": "^4.12.1",
|
||||
"gatsby-plugin-feed": "^4.12.1",
|
||||
"gatsby-plugin-image": "^2.12.1",
|
||||
"gatsby-plugin-lunr": "^1.5.2",
|
||||
"gatsby-plugin-manifest": "^4.11.1",
|
||||
"gatsby-plugin-manifest": "^4.12.1",
|
||||
"gatsby-plugin-matomo": "^0.13.0",
|
||||
"gatsby-plugin-meta-redirect": "^1.1.1",
|
||||
"gatsby-plugin-offline": "^5.11.1",
|
||||
"gatsby-plugin-react-helmet": "^5.11.0",
|
||||
"gatsby-plugin-sharp": "^4.11.1",
|
||||
"gatsby-plugin-sitemap": "^5.11.1",
|
||||
"gatsby-plugin-offline": "^5.12.1",
|
||||
"gatsby-plugin-react-helmet": "^5.12.1",
|
||||
"gatsby-plugin-sharp": "^4.12.1",
|
||||
"gatsby-plugin-sitemap": "^5.12.1",
|
||||
"gatsby-plugin-svgr": "^3.0.0-beta.0",
|
||||
"gatsby-redirect-from": "^0.5.0",
|
||||
"gatsby-remark-autolink-headers": "^5.11.1",
|
||||
"gatsby-remark-copy-linked-files": "^5.11.0",
|
||||
"gatsby-remark-images": "^6.11.1",
|
||||
"gatsby-remark-autolink-headers": "^5.12.1",
|
||||
"gatsby-remark-copy-linked-files": "^5.12.1",
|
||||
"gatsby-remark-images": "^6.12.1",
|
||||
"gatsby-remark-images-medium-zoom": "^1.7.0",
|
||||
"gatsby-remark-smartypants": "^5.11.0",
|
||||
"gatsby-remark-smartypants": "^5.12.1",
|
||||
"gatsby-remark-vscode": "^3.3.1",
|
||||
"gatsby-source-filesystem": "^4.11.1",
|
||||
"gatsby-source-graphql": "^4.11.1",
|
||||
"gatsby-transformer-remark": "^5.11.1",
|
||||
"gatsby-transformer-sharp": "^4.11.0",
|
||||
"gatsby-source-filesystem": "^4.12.1",
|
||||
"gatsby-source-graphql": "^4.12.1",
|
||||
"gatsby-transformer-remark": "^5.12.1",
|
||||
"gatsby-transformer-sharp": "^4.12.1",
|
||||
"nord-visual-studio-code": "github:arcticicestudio/nord-visual-studio-code",
|
||||
"pigeon-maps": "^0.21.0",
|
||||
"pigeon-marker": "^0.3.4",
|
||||
@ -75,46 +75,48 @@
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-qr-svg": "^2.4.0",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"remark": "^13.0.0",
|
||||
"remark-react": "^8.0.0",
|
||||
"slugify": "^1.6.5"
|
||||
"rehype-react": "^7.1.1",
|
||||
"remark-parse": "^10.0.1",
|
||||
"remark-rehype": "^10.1.0",
|
||||
"slugify": "^1.6.5",
|
||||
"unified": "^10.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.0.0",
|
||||
"@testing-library/react": "^13.1.1",
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"@types/jest": "^27.4.1",
|
||||
"@types/loadable__component": "^5.13.4",
|
||||
"@types/lunr": "^2.3.4",
|
||||
"@types/node": "^17.0.23",
|
||||
"@types/react": "^18.0.1",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@types/node": "^17.0.25",
|
||||
"@types/react": "^18.0.5",
|
||||
"@types/react-dom": "^18.0.1",
|
||||
"@types/react-helmet": "^6.1.5",
|
||||
"@types/react-transition-group": "^4.4.4",
|
||||
"@types/shortid": "^0.0.29",
|
||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||
"@typescript-eslint/parser": "^5.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.20.0",
|
||||
"@typescript-eslint/parser": "^5.20.0",
|
||||
"@welldone-software/why-did-you-render": "^7.0.1",
|
||||
"babel-preset-gatsby": "^2.11.1",
|
||||
"babel-preset-gatsby": "^2.12.1",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-graphql": "^4.0.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslint-plugin-testing-library": "^5.2.1",
|
||||
"fs-extra": "^10.0.1",
|
||||
"eslint-plugin-testing-library": "^5.3.1",
|
||||
"fs-extra": "^10.1.0",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^27.5.1",
|
||||
"markdownlint-cli": "^0.31.1",
|
||||
"node-iptc": "^1.0.5",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"ora": "^5.4.1",
|
||||
"ora": "^6.1.0",
|
||||
"postcss": "^8.4.12",
|
||||
"prettier": "^2.6.2",
|
||||
"shortid": "^2.2.16",
|
||||
"stylelint": "^14.6.1",
|
||||
"stylelint": "^14.7.1",
|
||||
"stylelint-config-css-modules": "^4.1.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-standard": "^25.0.0",
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
.title {
|
||||
margin-top: calc(var(--spacer) * 3);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: var(--spacer);
|
||||
padding-left: calc(var(--spacer) / 2);
|
||||
margin-left: calc(var(--spacer) / 2);
|
||||
border-left: var(--stroke-width) solid var(--border-color);
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import React, {
|
||||
ReactElement,
|
||||
useEffect,
|
||||
useState,
|
||||
createElement,
|
||||
Fragment
|
||||
} from 'react'
|
||||
import { graphql, useStaticQuery } from 'gatsby'
|
||||
import remark from 'remark'
|
||||
import remarkReact from 'remark-react'
|
||||
import { title, content, source } from './Changelog.module.css'
|
||||
import { unified } from 'unified'
|
||||
import remarkParse from 'remark-parse'
|
||||
import remarkRehype from 'remark-rehype'
|
||||
import rehypeReact from 'rehype-react'
|
||||
import { content, source } from './Changelog.module.css'
|
||||
import { GitHub, GitHubRepo } from '../../@types/GitHub'
|
||||
|
||||
export function PureChangelog({
|
||||
@ -12,6 +20,8 @@ export function PureChangelog({
|
||||
repo: string
|
||||
repos: [{ node: GitHubRepo }]
|
||||
}): ReactElement {
|
||||
const [changelogHtml, setChangelogHtml] = useState()
|
||||
|
||||
const repoFilteredArray = repos
|
||||
.map(({ node }: { node: GitHubRepo }) => {
|
||||
if (node.name === repo) return node
|
||||
@ -19,32 +29,33 @@ export function PureChangelog({
|
||||
.filter((n: any) => n)
|
||||
|
||||
const repoMatch = repoFilteredArray[0]
|
||||
if (!repoMatch) return null
|
||||
|
||||
const { object, url, owner } = repoMatch
|
||||
useEffect(() => {
|
||||
if (!repoMatch?.object?.text) return
|
||||
|
||||
const changelogHtml =
|
||||
object && remark().use(remarkReact).processSync(object.text).result
|
||||
async function init() {
|
||||
const changelogHtml = await unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkRehype)
|
||||
.use(rehypeReact, { createElement, Fragment })
|
||||
.processSync(repoMatch.object.text).result
|
||||
|
||||
const filePathUrl = `${url}/tree/main/CHANGELOG.md`
|
||||
const filePathDisplay = `${owner.login}/${repo}:CHANGELOG.md`
|
||||
setChangelogHtml(changelogHtml)
|
||||
}
|
||||
init()
|
||||
}, [repoMatch?.object?.text])
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className={title} id="changelog">
|
||||
Changelog
|
||||
</h2>
|
||||
<div className={content}>
|
||||
{changelogHtml}
|
||||
<p className={source}>
|
||||
sourced from{' '}
|
||||
<a href={filePathUrl}>
|
||||
<code>{filePathDisplay}</code>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return repoMatch ? (
|
||||
<div className={content} id="changelog">
|
||||
{changelogHtml}
|
||||
<p className={source}>
|
||||
sourced from{' '}
|
||||
<a href={`${repoMatch?.url}/tree/main/CHANGELOG.md`}>
|
||||
<code>{`${repoMatch?.owner.login}/${repo}:CHANGELOG.md`}</code>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
const queryGithub = graphql`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user