m
/
portfolio
mirror of https://github.com/kremalicious/portfolio.git
1
0
Fork 0
Code Releases Activity

more pure components

This commit is contained in:
Matthias Kretschmann 2019-11-26 18:25:42 +01:00
parent 25c3d11e24
commit fb7132cbfc
Signed by: m
GPG Key ID: 606EEEF3C479A91F
12 changed files with 879 additions and 2342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3082
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
package.json
View File

@ -26,21 +26,21 @@
"@loadable/component": "^5.10.3",
"axios": "^0.19.0",
"file-saver": "^2.0.2",
"gatsby": "^2.18.3",
"gatsby-image": "^2.2.33",
"gatsby-plugin-manifest": "^2.2.29",
"gatsby": "^2.18.4",
"gatsby-image": "^2.2.34",
"gatsby-plugin-manifest": "^2.2.30",
"gatsby-plugin-matomo": "^0.7.2",
"gatsby-plugin-offline": "^3.0.23",
"gatsby-plugin-react-helmet": "^3.1.15",
"gatsby-plugin-sass": "^2.1.23",
"gatsby-plugin-sharp": "^2.3.3",
"gatsby-plugin-sitemap": "^2.2.21",
"gatsby-plugin-offline": "^3.0.24",
"gatsby-plugin-react-helmet": "^3.1.16",
"gatsby-plugin-sass": "^2.1.24",
"gatsby-plugin-sharp": "^2.3.4",
"gatsby-plugin-sitemap": "^2.2.22",
"gatsby-plugin-svgr": "^2.0.2",
"gatsby-plugin-webpack-size": "^1.0.0",
"gatsby-source-filesystem": "^2.1.38",
"gatsby-transformer-json": "^2.2.19",
"gatsby-transformer-sharp": "^2.3.5",
"gatsby-transformer-yaml": "^2.2.17",
"gatsby-source-filesystem": "^2.1.39",
"gatsby-transformer-json": "^2.2.20",
"gatsby-transformer-sharp": "^2.3.6",
"gatsby-transformer-yaml": "^2.2.18",
"giphy-js-sdk-core": "^1.0.6",
"graphql": "^14.5.8",
"intersection-observer": "^0.7.0",
@ -66,9 +66,10 @@
"@svgr/webpack": "^4.3.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@welldone-software/why-did-you-render": "^3.3.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-preset-gatsby": "^0.2.22",
"babel-preset-gatsby": "^0.2.23",
"chalk": "^3.0.0",
"eslint": "^6.7.1",
"eslint-config-prettier": "^6.7.0",

6
src/components/Layout.jsx
View File

@ -10,9 +10,11 @@ import Footer from './organisms/Footer'
import styles from './Layout.module.scss'
import { useMeta } from '../hooks/use-meta'
// https://github.com/welldone-software/why-did-you-render
// if (process.env.NODE_ENV !== 'production') {
// const { whyDidYouUpdate } = require('why-did-you-update')
// whyDidYouUpdate(React)
// // eslint-disable-next-line
// const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js')
// whyDidYouRender(React)
// }
Layout.propTypes = {

6
src/components/atoms/SEO.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import Helmet from 'react-helmet'
import PropTypes from 'prop-types'
import { useMeta } from '../../hooks/use-meta'
@ -51,7 +51,7 @@ SEO.propTypes = {
project: PropTypes.object
}
export default function SEO({ project }) {
function SEO({ project }) {
const meta = useMeta()
const { basics } = useResume()
const title = (project && project.title) || null
@ -71,3 +71,5 @@ export default function SEO({ project }) {
/>
)
}
export default memo(SEO)

4
src/components/atoms/Typekit.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import Helmet from 'react-helmet'
import { useMeta } from '../../hooks/use-meta'
@ -31,4 +31,4 @@ const Typekit = () => {
)
}
export default Typekit
export default memo(Typekit)

6
src/components/molecules/LogoUnit.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import posed from 'react-pose'
@ -12,7 +12,7 @@ LogoUnit.propTypes = {
isResume: PropTypes.bool
}
export default function LogoUnit({ minimal }) {
function LogoUnit({ minimal }) {
const { basics } = useResume()
const Animation = posed.div(moveInBottom)
@ -30,3 +30,5 @@ export default function LogoUnit({ minimal }) {
</Animation>
)
}
export default memo(LogoUnit)

6
src/components/molecules/Networks.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import posed from 'react-pose'
import { moveInTop } from '../atoms/Transitions'
@ -25,7 +25,7 @@ NetworkLink.propTypes = {
url: PropTypes.string.isRequired
}
export default function Networks({ small, hide }) {
function Networks({ small, hide }) {
const { basics } = useResume()
if (hide) return null
@ -46,6 +46,8 @@ export default function Networks({ small, hide }) {
)
}
export default memo(Networks)
Networks.propTypes = {
small: PropTypes.bool,
hide: PropTypes.bool

12
src/components/molecules/ThemeSwitch.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo, useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import useDarkMode from '../../hooks/use-dark-mode'
@ -33,9 +33,13 @@ ThemeToggleInput.propTypes = {
toggleDark: PropTypes.func.isRequired
}
export default function ThemeSwitch() {
function ThemeSwitch() {
const { darkMode, toggleDark } = useDarkMode()
const themeColor = darkMode ? '#1d2224' : '#e7eef4'
const [themeColor, setThemeColor] = useState()
useEffect(() => {
darkMode ? setThemeColor('#1d2224') : setThemeColor('#e7eef4')
}, [darkMode])
return (
<>
@ -57,3 +61,5 @@ export default function ThemeSwitch() {
</>
)
}
export default memo(ThemeSwitch)

6
src/components/organisms/Footer.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import loadable from '@loadable/component'
@ -48,10 +48,12 @@ FooterMarkup.propTypes = {
year: PropTypes.number.isRequired
}
export default function Footer() {
function Footer() {
const metaYaml = useMeta()
const { portfolioJson } = useStaticQuery(query)
const year = new Date().getFullYear()
return <FooterMarkup year={year} pkg={portfolioJson} meta={metaYaml} />
}
export default memo(Footer)

20
src/components/organisms/Header.jsx
View File

@ -16,15 +16,17 @@ export default function Header({ minimal, hide }) {
const { availability } = useMeta()
return (
<header className={minimal ? styles.minimal : styles.header}>
<>
<ThemeSwitch />
{!hide && (
<>
<LogoUnit minimal={minimal} />
<Networks hide={minimal} />
<Availability hide={minimal && !availability.status} />
</>
)}
</header>
<header className={minimal ? styles.minimal : styles.header}>
{!hide && (
<>
<LogoUnit minimal={minimal} />
<Networks hide={minimal} />
<Availability hide={minimal && !availability.status} />
</>
)}
</header>
</>
)
}

40
src/components/organisms/Repositories.jsx
View File

@ -1,26 +1,26 @@
import React, { PureComponent } from 'react'
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import Repository from '../molecules/Repository'
import styles from './Repositories.module.scss'
export default class Repositories extends PureComponent {
static propTypes = {
repos: PropTypes.array
}
render() {
if (!this.props.repos) return null
return (
<section className={styles.section}>
<h1 className={styles.sectionTitle}>Open Source Projects</h1>
<div className={styles.repos}>
{this.props.repos.map(repo => (
<Repository key={repo.name} repo={repo} />
))}
</div>
</section>
)
}
Repositories.propTypes = {
repos: PropTypes.array
}
function Repositories({ repos }) {
if (!repos) return null
return (
<section className={styles.section}>
<h1 className={styles.sectionTitle}>Open Source Projects</h1>
<div className={styles.repos}>
{repos.map(repo => (
<Repository key={repo.name} repo={repo} />
))}
</div>
</section>
)
}
export default memo(Repositories)

6
src/pages/index.jsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
import shortid from 'shortid'
@ -56,7 +56,7 @@ Home.propTypes = {
pageContext: PropTypes.object.isRequired
}
export default function Home({ data, pageContext }) {
function Home({ data, pageContext }) {
const projects = data.allProjectsYaml.edges
const images = data.projectImageFiles.edges
@ -75,6 +75,8 @@ export default function Home({ data, pageContext }) {
)
}
export default memo(Home)
export const IndexQuery = graphql`
query {
allProjectsYaml {