mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
refactor
This commit is contained in:
parent
9493b9d2ef
commit
80cbfd2cd2
@ -40,7 +40,7 @@ export default function Layout({ children, location }) {
|
|||||||
<>
|
<>
|
||||||
<Typekit />
|
<Typekit />
|
||||||
<HostnameCheck allowedHosts={allowedHosts} />
|
<HostnameCheck allowedHosts={allowedHosts} />
|
||||||
<ThemeSwitch />
|
{/* <ThemeSwitch /> */}
|
||||||
|
|
||||||
<PoseGroup animateOnMount={process.env.NODE_ENV !== 'test'}>
|
<PoseGroup animateOnMount={process.env.NODE_ENV !== 'test'}>
|
||||||
<RoutesContainer
|
<RoutesContainer
|
||||||
|
@ -1,34 +1,28 @@
|
|||||||
import React, { PureComponent } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Helmet } from 'react-helmet'
|
import { Helmet } from 'react-helmet'
|
||||||
import { hostnameInfo } from './HostnameCheck.module.css'
|
import { hostnameInfo } from './HostnameCheck.module.css'
|
||||||
|
|
||||||
export default class HostnameCheck extends PureComponent {
|
HostnameCheck.propTypes = {
|
||||||
static propTypes = {
|
|
||||||
allowedHosts: PropTypes.array.isRequired
|
allowedHosts: PropTypes.array.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
checkAllowedHost = () => {
|
export default function HostnameCheck({ allowedHosts }) {
|
||||||
if (typeof window !== 'undefined' && window.location) {
|
|
||||||
return this.props.allowedHosts.includes(window.location.hostname)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
|
||||||
// default to true so SSR builds never show the banner
|
// default to true so SSR builds never show the banner
|
||||||
isAllowedHost: true
|
const [isAllowedHost, setIsAllowedHost] = useState(true)
|
||||||
|
|
||||||
|
const checkAllowedHost = () => {
|
||||||
|
if (typeof window !== 'undefined' && window.location) {
|
||||||
|
return allowedHosts.includes(window.location.hostname)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
useEffect(() => {
|
||||||
const isAllowedHost = this.checkAllowedHost()
|
const isAllowedHost = checkAllowedHost()
|
||||||
this.setState({ isAllowedHost })
|
setIsAllowedHost(isAllowedHost)
|
||||||
}
|
}, [])
|
||||||
|
|
||||||
render() {
|
return !isAllowedHost ? (
|
||||||
// return nothing if we're on an allowed host
|
|
||||||
if (this.state.isAllowedHost) return null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<meta name="robots" content="noindex,nofollow" />
|
<meta name="robots" content="noindex,nofollow" />
|
||||||
@ -40,6 +34,5 @@ export default class HostnameCheck extends PureComponent {
|
|||||||
clone, do a remix.`}</p>
|
clone, do a remix.`}</p>
|
||||||
</aside>
|
</aside>
|
||||||
</>
|
</>
|
||||||
)
|
) : null
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from 'react'
|
import React from 'react'
|
||||||
import { Helmet } from 'react-helmet'
|
import { Helmet } from 'react-helmet'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { useMeta } from '../../hooks/use-meta'
|
import { useMeta } from '../../hooks/use-meta'
|
||||||
@ -51,7 +51,7 @@ SEO.propTypes = {
|
|||||||
project: PropTypes.object
|
project: PropTypes.object
|
||||||
}
|
}
|
||||||
|
|
||||||
function SEO({ project }) {
|
export default function SEO({ project }) {
|
||||||
const meta = useMeta()
|
const meta = useMeta()
|
||||||
const { basics } = useResume()
|
const { basics } = useResume()
|
||||||
const title = (project && project.title) || null
|
const title = (project && project.title) || null
|
||||||
@ -71,5 +71,3 @@ function SEO({ project }) {
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(SEO)
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from 'react'
|
import React from 'react'
|
||||||
import { Helmet } from 'react-helmet'
|
import { Helmet } from 'react-helmet'
|
||||||
import { useMeta } from '../../hooks/use-meta'
|
import { useMeta } from '../../hooks/use-meta'
|
||||||
|
|
||||||
@ -17,7 +17,7 @@ const TypekitScript = (typekitID) => (
|
|||||||
</script>
|
</script>
|
||||||
)
|
)
|
||||||
|
|
||||||
const Typekit = () => {
|
export default function Typekit() {
|
||||||
const { typekitID } = useMeta()
|
const { typekitID } = useMeta()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -30,5 +30,3 @@ const Typekit = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(Typekit)
|
|
||||||
|
@ -10,7 +10,7 @@ import {
|
|||||||
|
|
||||||
const Animation = posed.aside(fadeIn)
|
const Animation = posed.aside(fadeIn)
|
||||||
|
|
||||||
const Availability = ({ hide }) => {
|
export default function Availability({ hide }) {
|
||||||
const { availability } = useMeta()
|
const { availability } = useMeta()
|
||||||
const { status, available, unavailable } = availability
|
const { status, available, unavailable } = availability
|
||||||
const className = status
|
const className = status
|
||||||
@ -30,5 +30,3 @@ const Availability = ({ hide }) => {
|
|||||||
Availability.propTypes = {
|
Availability.propTypes = {
|
||||||
hide: PropTypes.bool
|
hide: PropTypes.bool
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Availability
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Link } from 'gatsby'
|
import { Link } from 'gatsby'
|
||||||
import posed from 'react-pose'
|
import posed from 'react-pose'
|
||||||
@ -18,7 +18,7 @@ LogoUnit.propTypes = {
|
|||||||
isResume: PropTypes.bool
|
isResume: PropTypes.bool
|
||||||
}
|
}
|
||||||
|
|
||||||
function LogoUnit({ minimal }) {
|
export default function LogoUnit({ minimal }) {
|
||||||
const { basics } = useResume()
|
const { basics } = useResume()
|
||||||
const Animation = posed.div(moveInBottom)
|
const Animation = posed.div(moveInBottom)
|
||||||
|
|
||||||
@ -34,5 +34,3 @@ function LogoUnit({ minimal }) {
|
|||||||
</Animation>
|
</Animation>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(LogoUnit)
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import posed from 'react-pose'
|
import posed from 'react-pose'
|
||||||
import { moveInTop } from '../atoms/Transitions'
|
import { moveInTop } from '../atoms/Transitions'
|
||||||
@ -30,7 +30,7 @@ NetworkLink.propTypes = {
|
|||||||
url: PropTypes.string.isRequired
|
url: PropTypes.string.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
function Networks({ small, hide }) {
|
export default function Networks({ small, hide }) {
|
||||||
const { basics } = useResume()
|
const { basics } = useResume()
|
||||||
if (hide) return null
|
if (hide) return null
|
||||||
|
|
||||||
@ -51,8 +51,6 @@ function Networks({ small, hide }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(Networks)
|
|
||||||
|
|
||||||
Networks.propTypes = {
|
Networks.propTypes = {
|
||||||
small: PropTypes.bool,
|
small: PropTypes.bool,
|
||||||
hide: PropTypes.bool
|
hide: PropTypes.bool
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import loadable from '@loadable/component'
|
import loadable from '@loadable/component'
|
||||||
import LogoUnit from '../molecules/LogoUnit'
|
import LogoUnit from '../molecules/LogoUnit'
|
||||||
@ -37,11 +37,9 @@ FooterMarkup.propTypes = {
|
|||||||
year: PropTypes.number.isRequired
|
year: PropTypes.number.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
function Footer() {
|
export default function Footer() {
|
||||||
const metaYaml = useMeta()
|
const metaYaml = useMeta()
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
|
|
||||||
return <FooterMarkup year={year} meta={metaYaml} />
|
return <FooterMarkup year={year} meta={metaYaml} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(Footer)
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import Repository from '../molecules/Repository'
|
import Repository from '../molecules/Repository'
|
||||||
@ -12,7 +12,7 @@ Repositories.propTypes = {
|
|||||||
repos: PropTypes.array
|
repos: PropTypes.array
|
||||||
}
|
}
|
||||||
|
|
||||||
function Repositories({ repos }) {
|
export default function Repositories({ repos }) {
|
||||||
if (!repos) return null
|
if (!repos) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -26,5 +26,3 @@ function Repositories({ repos }) {
|
|||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(Repositories)
|
|
||||||
|
Loading…
Reference in New Issue
Block a user