1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

replace react-time with new component

This commit is contained in:
Matthias Kretschmann 2019-10-12 04:25:15 +02:00
parent f790772553
commit 03863a2f26
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 126 additions and 81 deletions

View File

@ -4,7 +4,6 @@ module.exports = {
'^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js' '^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js'
}, },
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$', testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$',
moduleNameMapper: { moduleNameMapper: {
'.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy', '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

View File

@ -30,51 +30,51 @@
], ],
"dependencies": { "dependencies": {
"classnames": "^2.2.6", "classnames": "^2.2.6",
"date-fns": "^2.4.1",
"dms2dec": "^1.1.0", "dms2dec": "^1.1.0",
"fast-exif": "^1.0.1", "fast-exif": "^1.0.1",
"fraction.js": "^4.0.12", "fraction.js": "^4.0.12",
"gatsby": "^2.15.28", "gatsby": "^2.15.36",
"gatsby-image": "^2.2.23", "gatsby-image": "^2.2.27",
"gatsby-plugin-catch-links": "^2.1.12", "gatsby-plugin-catch-links": "^2.1.13",
"gatsby-plugin-feed": "^2.3.15", "gatsby-plugin-feed": "^2.3.16",
"gatsby-plugin-lunr": "^1.5.2", "gatsby-plugin-lunr": "^1.5.2",
"gatsby-plugin-manifest": "^2.2.20", "gatsby-plugin-manifest": "^2.2.21",
"gatsby-plugin-matomo": "^0.7.2", "gatsby-plugin-matomo": "^0.7.2",
"gatsby-plugin-meta-redirect": "^1.1.1", "gatsby-plugin-meta-redirect": "^1.1.1",
"gatsby-plugin-offline": "^3.0.11", "gatsby-plugin-offline": "^3.0.14",
"gatsby-plugin-react-helmet": "^3.1.10", "gatsby-plugin-react-helmet": "^3.1.11",
"gatsby-plugin-sass": "^2.1.17", "gatsby-plugin-sass": "^2.1.18",
"gatsby-plugin-sharp": "^2.2.27", "gatsby-plugin-sharp": "^2.2.29",
"gatsby-plugin-sitemap": "^2.2.16", "gatsby-plugin-sitemap": "^2.2.17",
"gatsby-plugin-svgr": "^2.0.2", "gatsby-plugin-svgr": "^2.0.2",
"gatsby-plugin-typescript": "^2.1.11", "gatsby-plugin-typescript": "^2.1.12",
"gatsby-plugin-use-dark-mode": "^1.1.2", "gatsby-plugin-use-dark-mode": "^1.1.2",
"gatsby-plugin-webpack-size": "^1.0.0", "gatsby-plugin-webpack-size": "^1.0.0",
"gatsby-redirect-from": "^0.2.1", "gatsby-redirect-from": "^0.2.1",
"gatsby-remark-autolink-headers": "^2.1.13", "gatsby-remark-autolink-headers": "^2.1.14",
"gatsby-remark-copy-linked-files": "^2.1.23", "gatsby-remark-copy-linked-files": "^2.1.26",
"gatsby-remark-images": "^3.1.25", "gatsby-remark-images": "^3.1.26",
"gatsby-remark-smartypants": "^2.1.11", "gatsby-remark-smartypants": "^2.1.12",
"gatsby-remark-vscode": "^1.2.0", "gatsby-remark-vscode": "^1.2.0",
"gatsby-source-filesystem": "^2.1.28", "gatsby-source-filesystem": "^2.1.31",
"gatsby-source-graphql": "^2.1.17", "gatsby-source-graphql": "^2.1.18",
"gatsby-transformer-remark": "^2.6.26", "gatsby-transformer-remark": "^2.6.28",
"gatsby-transformer-sharp": "^2.2.19", "gatsby-transformer-sharp": "^2.2.21",
"graphql": "^14.5.8", "graphql": "^14.5.8",
"intersection-observer": "^0.7.0", "intersection-observer": "^0.7.0",
"js-scrypt": "^0.2.0", "js-scrypt": "^0.2.0",
"load-script": "^1.0.0", "load-script": "^1.0.0",
"pigeon-maps": "^0.14.0", "pigeon-maps": "^0.14.0",
"pigeon-marker": "^0.3.4", "pigeon-marker": "^0.3.4",
"react": "^16.10.1", "react": "^16.10.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
"react-clipboard.js": "^2.0.13", "react-clipboard.js": "^2.0.13",
"react-dom": "^16.10.1", "react-dom": "^16.10.2",
"react-helmet": "^5.2.1", "react-helmet": "^5.2.1",
"react-modal": "^3.10.1", "react-modal": "^3.10.1",
"react-pose": "^4.0.8", "react-pose": "^4.0.9",
"react-qr-svg": "^2.2.1", "react-qr-svg": "^2.2.1",
"react-time": "^4.3.0",
"react-transition-group": "^4.3.0", "react-transition-group": "^4.3.0",
"remark": "^11.0.1", "remark": "^11.0.1",
"remark-react": "^6.0.0", "remark-react": "^6.0.0",
@ -83,33 +83,33 @@
"web3": "^1.2.1" "web3": "^1.2.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/node": "^7.6.2", "@babel/node": "^7.6.3",
"@babel/preset-env": "^7.6.2", "@babel/preset-env": "^7.6.3",
"@babel/preset-typescript": "^7.6.0", "@babel/preset-typescript": "^7.6.0",
"@svgr/webpack": "^4.3.3", "@svgr/webpack": "^4.3.3",
"@testing-library/jest-dom": "^4.1.0", "@testing-library/jest-dom": "^4.1.2",
"@testing-library/react": "^9.2.0", "@testing-library/react": "^9.3.0",
"@types/classnames": "^2.2.9", "@types/classnames": "^2.2.9",
"@types/jest": "^24.0.18", "@types/jest": "^24.0.18",
"@types/lunr": "^2.3.2", "@types/lunr": "^2.3.2",
"@types/node": "^12.7.8", "@types/node": "^12.7.12",
"@types/react": "^16.9.4", "@types/react": "^16.9.5",
"@types/react-dom": "^16.9.1", "@types/react-dom": "^16.9.1",
"@types/react-helmet": "^5.0.11", "@types/react-helmet": "^5.0.11",
"@types/react-modal": "^3.8.3", "@types/react-modal": "^3.8.3",
"@types/react-transition-group": "^4.2.2", "@types/react-transition-group": "^4.2.3",
"@types/web3": "^1.0.20", "@types/web3": "^1.0.20",
"@typescript-eslint/eslint-plugin": "^2.3.2", "@typescript-eslint/eslint-plugin": "^2.3.3",
"@typescript-eslint/parser": "^2.3.2", "@typescript-eslint/parser": "^2.3.3",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0", "babel-jest": "^24.9.0",
"eslint": "^6.5.1", "eslint": "^6.5.1",
"eslint-config-prettier": "^6.3.0", "eslint-config-prettier": "^6.4.0",
"eslint-loader": "^3.0.2", "eslint-loader": "^3.0.2",
"eslint-plugin-graphql": "^3.1.0", "eslint-plugin-graphql": "^3.1.0",
"eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1", "eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.15.0", "eslint-plugin-react": "^7.16.0",
"fs-extra": "^8.1.0", "fs-extra": "^8.1.0",
"identity-obj-proxy": "^3.0.0", "identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0", "jest": "^24.9.0",
@ -121,13 +121,13 @@
"pify": "^4.0.1", "pify": "^4.0.1",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"prettier-stylelint": "^0.4.2", "prettier-stylelint": "^0.4.2",
"stylelint": "^11.0.0", "stylelint": "^11.1.1",
"stylelint-config-css-modules": "^1.5.0", "stylelint-config-css-modules": "^1.5.0",
"stylelint-config-prettier": "^6.0.0", "stylelint-config-prettier": "^6.0.0",
"stylelint-config-standard": "^19.0.0", "stylelint-config-standard": "^19.0.0",
"stylelint-prettier": "^1.1.1", "stylelint-prettier": "^1.1.1",
"ts-jest": "^24.1.0", "ts-jest": "^24.1.0",
"typescript": "^3.6.3", "typescript": "^3.6.4",
"why-did-you-update": "^1.0.6" "why-did-you-update": "^1.0.6"
}, },
"engines": { "engines": {

View File

@ -1,5 +1,4 @@
declare module 'pigeon-maps' declare module 'pigeon-maps'
declare module 'pigeon-marker' declare module 'pigeon-marker'
declare module 'react-blockies' declare module 'react-blockies'
declare module 'react-time'
declare module 'remark-react' declare module 'remark-react'

View File

@ -1,13 +1,13 @@
import React from 'react' import React from 'react'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import Time from 'react-time'
import slugify from 'slugify' import slugify from 'slugify'
import styles from './PostMeta.module.scss' import Time from '../atoms/Time'
import { useSiteMetadata } from '../../hooks/use-site-metadata' import { useSiteMetadata } from '../../hooks/use-site-metadata'
import styles from './PostMeta.module.scss'
const PostMeta = ({ post }: { post: any }) => { export default function PostMeta({ post }: { post: any }) {
const { author, updated, tags, type } = post.frontmatter
const siteMeta = useSiteMetadata() const siteMeta = useSiteMetadata()
const { author, updated, tags, type } = post.frontmatter
const { date } = post.fields const { date } = post.fields
return ( return (
@ -21,16 +21,9 @@ const PostMeta = ({ post }: { post: any }) => {
<div className={styles.time}> <div className={styles.time}>
{updated && 'published '} {updated && 'published '}
<Time value={new Date(date)} titleFormat="YYYY/MM/DD HH:mm" relative /> <Time date={date} />
{updated && ' • updated '} {updated && ' • updated '}
{updated && ( {updated && <Time date={updated} />}
<Time
value={new Date(updated)}
titleFormat="YYYY/MM/DD HH:mm"
relative
/>
)}
</div> </div>
{type && type === 'photo' && ( {type && type === 'photo' && (
@ -55,5 +48,3 @@ const PostMeta = ({ post }: { post: any }) => {
</footer> </footer>
) )
} }
export default PostMeta

View File

@ -0,0 +1,29 @@
import React from 'react'
import testRender from '../../../jest/testRender'
import { PureChangelog as Changelog } from './Changelog'
const data = {
github: {
viewer: {
repositories: {
edges: [
{
node: {
name: 'gatsby-plugin-matomo',
url: 'https://hello.com',
owner: { login: 'kremalicious' },
object: {
text: 'hello'
}
}
}
]
}
}
}
}
describe('Changelog', () => {
testRender(<Changelog repo="gatsby-plugin-matomo" data={data} />)
})

View File

@ -4,34 +4,7 @@ import remark from 'remark'
import remarkReact from 'remark-react' import remarkReact from 'remark-react'
import styles from './Changelog.module.scss' import styles from './Changelog.module.scss'
const queryGithub = graphql` export function PureChangelog({ repo, data }: { repo: string; data: any }) {
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 repositoriesGitHub = data.github.viewer.repositories.edges
const repoFilteredArray = repositoriesGitHub const repoFilteredArray = repositoriesGitHub
@ -73,3 +46,33 @@ export default function Changelog({ repo }: { repo: string }) {
</div> </div>
) )
} }
export default function Changelog({ repo }: { repo: string }) {
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
}
}
}
}
}
}
}
}
`
const data = useStaticQuery(queryGithub)
return <PureChangelog repo={repo} data={data} />
}

View File

@ -0,0 +1,9 @@
import React from 'react'
// import { render } from '@testing-library/react'
import testRender from '../../../jest/testRender'
import Time from './Time'
describe('Time', () => {
testRender(<Time date="2017/12/23" />)
})

View File

@ -0,0 +1,15 @@
import React from 'react'
import { format, formatDistance } from 'date-fns'
export default function Time({ date }: { date: string }) {
const dateNew = new Date(date)
return (
<time
title={format(dateNew, 'yyyy/MM/dd HH:mm')}
dateTime={dateNew.toISOString()}
>
{formatDistance(dateNew, Date.now(), { addSuffix: true })}
</time>
)
}