m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 09:56:51 +01:00
Code

footer refactor

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-08-29 01:13:47 +02:00
parent f13982c623
commit 23d2ea0ce8
Signed by: m
GPG Key ID: 606EEEF3C479A91F
10 changed files with 225 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.codeclimate.yml
View File

@ -2,4 +2,4 @@ version: '2'
checks:
method-lines:
config:
threshold: 50 # Gatsby's StaticQuery makes render functions pretty long
threshold: 55 # Gatsby's StaticQuery makes render functions pretty long

10
content/meta.yml
View File

@ -16,10 +16,12 @@ author:
name: Matthias Kretschmann
email: m@kretschmann.io
uri: https://matthiaskretschmann.com
twitter: kremalicious
github: kremalicious
facebook: matthiaskretschmann
googleplus: +MatthiasKretschmann
twitter: https://twitter.com/kremalicious
github: https://github.com/kremalicious
facebook: https://facebook.com/matthiaskretschmann
googleplus: https://plus.google.com/+MatthiasKretschmann
rss: https://kremalicious.com/feed.xml
jsonfeed: http://kremalicious.com/feed.json
avatar: ../src/images/avatar.jpg
bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"

39
src/components/molecules/IconLinks.jsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './IconLinks.module.scss'
import Twitter from '../svg/Twitter'
import Github from '../svg/Github'
import Facebook from '../svg/Facebook'
import Rss from '../svg/Rss'
import Jsonfeed from '../svg/Jsonfeed'
const NetworkIcon = ({ link }) => {
if (link.includes('twitter')) {
return <Twitter className={styles.twitter} />
} else if (link.includes('github')) {
return <Github className={styles.github} />
} else if (link.includes('facebook')) {
return <Facebook className={styles.facebook} />
} else if (link.includes('feed.xml')) {
return <Rss className={styles.rss} />
} else if (link.includes('feed.json')) {
return <Jsonfeed className={styles.json} />
}
}
const IconLinks = ({ links }) => (
<p>
{links.map(link => (
<a key={link} className={styles.link} href={link}>
<NetworkIcon link={link} />
</a>
))}
</p>
)
IconLinks.propTypes = {
links: PropTypes.array.isRequired
}
export default IconLinks

44
src/components/molecules/IconLinks.module.scss Normal file
View File

@ -0,0 +1,44 @@
@import 'variables';
.link {
text-align: center;
width: 2rem;
padding: $spacer / 4;
margin: 0;
display: inline-block;
color: $text-color-light;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
svg {
transition: color .3s ease-in-out;
display: block;
margin: 0 auto;
}
}
.twitter:hover {
fill: #019ad2;
}
.facebook:hover {
fill: #3b5998;
}
.github:hover {
fill: #333;
}
.rss:hover {
fill: #e15a00;
}
.json:hover {
fill: #8be028;
}

33
src/components/molecules/Subscribe.jsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import IconLinks from './IconLinks'
import styles from './Subscribe.module.scss'
const Subscribe = () => (
<StaticQuery
query={graphql`
query {
contentYaml {
author {
rss
jsonfeed
}
}
}
`}
render={data => {
const { rss, jsonfeed } = data.contentYaml.author
const links = [rss, jsonfeed]
return (
<aside className={styles.subscribe}>
<h1 className={styles.title}>Subscribe</h1>
<IconLinks links={links} />
</aside>
)
}}
/>
)
export default Subscribe

16
src/components/molecules/Subscribe.module.scss Normal file
View File

@ -0,0 +1,16 @@
@import 'variables';
// Subscribe component
.subscribe {
margin: $spacer auto;
p {
text-align: center;
margin: 0;
}
}
.title {
font-size: $font-size-h5;
margin-bottom: $spacer / 2;
}

58
src/components/molecules/Vcard.jsx Normal file
View File

@ -0,0 +1,58 @@
import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import IconLinks from './IconLinks'
import styles from './Vcard.module.scss'
const Vcard = () => (
<StaticQuery
query={graphql`
query {
contentYaml {
author {
name
uri
twitter
github
facebook
avatar {
childImageSharp {
fixed(width: 80, height: 80) {
...GatsbyImageSharpFixed
}
}
}
}
}
}
`}
render={data => {
const {
twitter,
github,
facebook,
avatar,
name,
uri
} = data.contentYaml.author
const links = [twitter, github, facebook]
return (
<div className="vcard author">
<Img className={styles.avatar} fixed={avatar.childImageSharp.fixed} />
<p className={styles.description}>
Blog of designer &amp; developer{' '}
<a className="fn" rel="author" href={uri}>
{name}
</a>
</p>
<IconLinks links={links} />
</div>
)
}}
/>
)
export default Vcard

19
src/components/molecules/Vcard.module.scss Normal file
View File

@ -0,0 +1,19 @@
@import 'variables';
@import 'mixins';
.avatar {
@include media-frame;
margin-bottom: ($spacer / 2);
border-radius: 50%;
}
.description {
font-size: $font-size-h5;
margin-top: 0;
margin-bottom: ($spacer / 4);
a {
display: block;
}
}

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

@ -1,16 +1,13 @@
import React, { PureComponent } from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import Container from '../atoms/Container'
import Vcard from '../molecules/Vcard'
import Subscribe from '../molecules/Subscribe'
import ModalThanks from '../molecules/ModalThanks'
import Twitter from '../svg/Twitter'
import Github from '../svg/Github'
import Facebook from '../svg/Facebook'
import Bitcoin from '../svg/Bitcoin'
import Rss from '../svg/Rss'
import Jsonfeed from '../svg/Jsonfeed'
import styles from './Footer.module.scss'
@ -41,95 +38,32 @@ class Footer extends PureComponent {
contentYaml {
author {
name
email
uri
twitter
github
facebook
googleplus
avatar {
childImageSharp {
fixed(width: 80, height: 80) {
...GatsbyImageSharpFixed
}
}
}
bitcoin
}
}
}
`}
render={data => {
const { author } = data.contentYaml
const { name, uri, bitcoin } = data.contentYaml.author
return (
<footer role="contentinfo" className={styles.footer}>
<Container>
<div className="vcard author">
<Img
className={styles.avatar}
fixed={author.avatar.childImageSharp.fixed}
/>
<p className={styles.description}>
Blog of designer &amp; developer{' '}
<a className="fn" rel="author" href={author.uri}>
{author.name}
</a>
</p>
<p>
<a
className={styles.link}
href={`https://twitter.com/${author.twitter}`}
>
<Twitter className={styles.twitter} />
</a>
<a
className={styles.link}
href={`https://github.com/${author.github}`}
>
<Github className={styles.github} />
</a>
<a
className={styles.link}
href={`https://www.facebook.com/${author.facebook}`}
>
<Facebook className={styles.facebook} />
</a>
</p>
</div>
<aside className={styles.subscribe}>
<h1 className={styles.title}>Subscribe</h1>
<p>
<a
className={styles.link}
href="http://kremalicious.com/feed.xml"
title="RSS Feed"
>
<Rss className={styles.rss} />
</a>
<a
className={styles.link}
href="http://kremalicious.com/feed.json"
title="JSON Feed"
>
<Jsonfeed className={styles.json} />
</a>
</p>
</aside>
<Vcard />
<Subscribe />
<section className={styles.copyright}>
<p>
&copy; 2005&ndash;
{this.state.year + ' '}
<a href="http://matthiaskretschmann.com" rel="me">
Matthias Kretschmann
<a href={uri} rel="me">
{name}
</a>
</p>
<p>
<a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/">
<a href="https://github.com/kremalicious/kremalicious3/">
<Github />
View source
</a>
@ -139,7 +73,7 @@ class Footer extends PureComponent {
onClick={this.toggleModal}
>
<Bitcoin />
<code>{author.bitcoin}</code>
<code>{bitcoin}</code>
</a>
</p>

79
src/components/organisms/Footer.module.scss
View File

@ -22,23 +22,6 @@
}
}
.avatar {
@include media-frame;
margin-bottom: ($spacer / 2);
border-radius: 50%;
}
.description {
font-size: $font-size-h5;
margin-top: 0;
margin-bottom: ($spacer / 4);
a {
display: block;
}
}
.copyright {
padding-top: $spacer;
padding-bottom: $spacer;
@ -57,68 +40,6 @@
}
}
// Subscribe component
.subscribe {
margin: $spacer auto;
p {
text-align: center;
margin: 0;
}
}
.link {
text-align: center;
width: 2rem;
padding: $spacer / 4;
margin: 0;
display: inline-block;
color: $text-color-light;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
svg {
transition: color .3s ease-in-out;
display: block;
margin: 0 auto;
}
}
.rss:hover {
fill: #e15a00;
}
.json:hover {
fill: #8be028;
}
.twitter:hover {
fill: #019ad2;
}
.google:hover {
fill: #c63b1e;
}
.facebook:hover {
fill: #3b5998;
}
.github:hover {
fill: #333;
}
.title {
font-size: $font-size-h5;
margin-bottom: ($spacer/2);
}
.btc {
margin-left: ($spacer / 2);