mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
Merge pull request #142 from kremalicious/feature/manifest
switch to gatsby-plugin-manifest for web manifest and favicon generation
This commit is contained in:
commit
1f8a1c5415
@ -2,7 +2,7 @@ const path = require('path')
|
|||||||
const fs = require('fs')
|
const fs = require('fs')
|
||||||
const yaml = require('js-yaml')
|
const yaml = require('js-yaml')
|
||||||
const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8'))
|
const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8'))
|
||||||
const { title, description, url, matomoSite, matomoUrl } = meta[0]
|
const { title, url, matomoSite, matomoUrl } = meta[0]
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
@ -66,37 +66,16 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resolve: 'gatsby-plugin-favicon',
|
resolve: 'gatsby-plugin-manifest',
|
||||||
options: {
|
options: {
|
||||||
logo: './src/images/favicon.png',
|
name: title.toLowerCase(),
|
||||||
|
|
||||||
// WebApp Manifest Configuration
|
|
||||||
appName: title.toLowerCase(),
|
|
||||||
appDescription: description,
|
|
||||||
developerName: null,
|
|
||||||
developerURL: null,
|
|
||||||
dir: 'auto',
|
|
||||||
lang: 'en-US',
|
|
||||||
background: '#e7eef4',
|
|
||||||
theme_color: '#88bec8',
|
|
||||||
display: 'minimal-ui',
|
|
||||||
orientation: 'any',
|
|
||||||
start_url: '/?homescreen=1',
|
|
||||||
short_name: 'mk',
|
short_name: 'mk',
|
||||||
version: '1.0',
|
start_url: '/',
|
||||||
|
background_color: '#e7eef4',
|
||||||
icons: {
|
theme_color: '#88bec8',
|
||||||
android: true,
|
icon: 'src/images/favicon.png',
|
||||||
appleIcon: true,
|
display: 'minimal-ui',
|
||||||
appleStartup: true,
|
cache_busting_mode: 'name'
|
||||||
coast: false,
|
|
||||||
favicons: true,
|
|
||||||
firefox: true,
|
|
||||||
opengraph: false,
|
|
||||||
twitter: false,
|
|
||||||
yandex: false,
|
|
||||||
windows: false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'gatsby-plugin-react-helmet',
|
'gatsby-plugin-react-helmet',
|
||||||
|
@ -29,7 +29,7 @@
|
|||||||
"file-saver": "^2.0.1",
|
"file-saver": "^2.0.1",
|
||||||
"gatsby": "^2.8.6",
|
"gatsby": "^2.8.6",
|
||||||
"gatsby-image": "^2.1.2",
|
"gatsby-image": "^2.1.2",
|
||||||
"gatsby-plugin-favicon": "^3.1.6",
|
"gatsby-plugin-manifest": "^2.1.1",
|
||||||
"gatsby-plugin-matomo": "^0.7.1",
|
"gatsby-plugin-matomo": "^0.7.1",
|
||||||
"gatsby-plugin-offline": "^2.1.1",
|
"gatsby-plugin-offline": "^2.1.1",
|
||||||
"gatsby-plugin-react-helmet": "^3.0.12",
|
"gatsby-plugin-react-helmet": "^3.0.12",
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { StaticQuery, graphql } from 'gatsby'
|
import { Link, StaticQuery, graphql } from 'gatsby'
|
||||||
import posed from 'react-pose'
|
import posed from 'react-pose'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import { moveInBottom } from '../atoms/Transitions'
|
import { moveInBottom } from '../atoms/Transitions'
|
||||||
@ -23,14 +23,14 @@ export default class LogoUnit extends PureComponent {
|
|||||||
|
|
||||||
Animation = posed.div(moveInBottom)
|
Animation = posed.div(moveInBottom)
|
||||||
|
|
||||||
wrapClasses = classNames([styles.logounit], {
|
|
||||||
[styles.minimal]: this.props.minimal
|
|
||||||
})
|
|
||||||
|
|
||||||
nameClasses = classNames('p-name', [styles.title])
|
nameClasses = classNames('p-name', [styles.title])
|
||||||
descriptionClasses = classNames('p-job-title', [styles.description])
|
descriptionClasses = classNames('p-job-title', [styles.description])
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const wrapClasses = classNames([styles.logounit], {
|
||||||
|
[styles.minimal]: this.props.minimal
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StaticQuery
|
<StaticQuery
|
||||||
query={query}
|
query={query}
|
||||||
@ -38,20 +38,15 @@ export default class LogoUnit extends PureComponent {
|
|||||||
const { title, tagline } = data.metaYaml
|
const { title, tagline } = data.metaYaml
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={this.wrapClasses}>
|
<this.Animation>
|
||||||
<this.Animation>
|
<Link className={wrapClasses} to={'/'}>
|
||||||
<Logo className={styles.logo} />
|
<Logo className={styles.logo} />
|
||||||
<h1 data-testid="logo-title" className={this.nameClasses}>
|
<h1 className={this.nameClasses}>{title.toLowerCase()}</h1>
|
||||||
{title.toLowerCase()}
|
<p className={this.descriptionClasses}>
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
data-testid="logo-tagline"
|
|
||||||
className={this.descriptionClasses}
|
|
||||||
>
|
|
||||||
{tagline.toLowerCase()}
|
{tagline.toLowerCase()}
|
||||||
</p>
|
</p>
|
||||||
</this.Animation>
|
</Link>
|
||||||
</div>
|
</this.Animation>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
.logounit {
|
.logounit {
|
||||||
|
pointer-events: none;
|
||||||
display: block;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@ -46,9 +48,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.minimal {
|
.minimal {
|
||||||
transform: scale(.7);
|
pointer-events: all;
|
||||||
transform-origin: top center;
|
width: auto;
|
||||||
transform-box: border-box;
|
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
transform: scale(.7);
|
||||||
|
transform-origin: top center;
|
||||||
|
transform-box: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.title,
|
.title,
|
||||||
.description {
|
.description {
|
||||||
|
@ -11,17 +11,23 @@ beforeEach(() => {
|
|||||||
describe('LogoUnit', () => {
|
describe('LogoUnit', () => {
|
||||||
it('renders correctly from data file values', () => {
|
it('renders correctly from data file values', () => {
|
||||||
const { title, tagline } = data.metaYaml
|
const { title, tagline } = data.metaYaml
|
||||||
const { container, getByTestId } = render(<LogoUnit />)
|
const { container } = render(<LogoUnit />)
|
||||||
|
|
||||||
expect(container.firstChild).toBeInTheDocument()
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
expect(getByTestId('logo-title')).toHaveTextContent(title.toLowerCase())
|
expect(container.querySelector('.title')).toHaveTextContent(
|
||||||
expect(getByTestId('logo-tagline')).toHaveTextContent(tagline.toLowerCase())
|
title.toLowerCase()
|
||||||
|
)
|
||||||
|
expect(container.querySelector('.description')).toHaveTextContent(
|
||||||
|
tagline.toLowerCase()
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('renders in minimal variant', () => {
|
it('renders in minimal variant', () => {
|
||||||
const { container } = render(<LogoUnit minimal={true} />)
|
const { container } = render(<LogoUnit minimal={true} />)
|
||||||
|
|
||||||
expect(container.firstChild).toBeInTheDocument()
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
expect(container.firstChild.className).toMatch(/logounit minimal/)
|
expect(container.querySelector('.logounit').className).toMatch(
|
||||||
|
/logounit minimal/
|
||||||
|
)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Link, StaticQuery, graphql } from 'gatsby'
|
import { StaticQuery, graphql } from 'gatsby'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import Vcard from '../atoms/Vcard'
|
import Vcard from '../atoms/Vcard'
|
||||||
import LogoUnit from '../molecules/LogoUnit'
|
import LogoUnit from '../molecules/LogoUnit'
|
||||||
@ -27,9 +27,7 @@ const FooterMarkup = ({ pkg, meta, year }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className={classes}>
|
<footer className={classes}>
|
||||||
<Link to={'/'}>
|
<LogoUnit minimal />
|
||||||
<LogoUnit minimal />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Networks minimal />
|
<Networks minimal />
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Link, StaticQuery, graphql } from 'gatsby'
|
import { StaticQuery, graphql } from 'gatsby'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import Networks from '../molecules/Networks'
|
import Networks from '../molecules/Networks'
|
||||||
import Availability from '../molecules/Availability'
|
import Availability from '../molecules/Availability'
|
||||||
@ -31,21 +31,15 @@ export default class Header extends PureComponent {
|
|||||||
query={query}
|
query={query}
|
||||||
render={data => {
|
render={data => {
|
||||||
const meta = data.metaYaml
|
const meta = data.metaYaml
|
||||||
|
const headerClasses = classNames([styles.header], {
|
||||||
let headerClasses = classNames([styles.header], {
|
|
||||||
[styles.minimal]: minimal
|
[styles.minimal]: minimal
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className={headerClasses}>
|
<header className={headerClasses}>
|
||||||
<ThemeSwitch />
|
<ThemeSwitch />
|
||||||
|
<LogoUnit minimal={minimal} />
|
||||||
<Link className={styles.link} to={'/'}>
|
|
||||||
<LogoUnit minimal={minimal} />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Networks hide={minimal} />
|
<Networks hide={minimal} />
|
||||||
|
|
||||||
<Availability hide={minimal && !meta.availability.status} />
|
<Availability hide={minimal && !meta.availability.status} />
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
@ -12,19 +12,8 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
|
||||||
pointer-events: none;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal {
|
.minimal {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
padding-top: $spacer * 2;
|
padding-top: $spacer * 2;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
|
||||||
.link {
|
|
||||||
pointer-events: all;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user