MetaPost component for kitze.io
import React from 'react'; | |
import flex from '../../styles/flex'; | |
import { absoluteCorner, fixedSize } from 'styled-mixins'; | |
const textColor = `#e0e0e0`; | |
const Bio = ({ styles }) => { | |
return ( | |
<div | |
style={{ | |
...flex.horizontal, | |
...flex.centerHorizontalV, | |
...absoluteCorner(4, 20) | |
}} | |
> | |
<img | |
style={{ | |
...fixedSize(styles.avatar.size), | |
borderRadius: '100%', | |
marginRight: 15, | |
border: `3px solid ${textColor}` | |
}} | |
src="https://kitze.io/avatar.jpg" | |
alt="" | |
/> | |
<div | |
style={{ | |
...flex.vertical, | |
...flex.centerVertical | |
}} | |
> | |
<div style={{ ...styles.name, textShadow: '0 0 7px rgba(0,0,0,0.5)' }}> | |
Kitze | |
</div> | |
<div | |
style={{ | |
fontWeight: 600, | |
textShadow: '0 0 7px rgba(0,0,0,0.5)', | |
...styles.website | |
}} | |
> | |
kitze.io | |
</div> | |
</div> | |
</div> | |
); | |
}; | |
export default Bio; |
import React from 'react'; | |
import flex from '../../styles/flex'; | |
import { absoluteCorner, fixedSize } from 'styled-mixins'; | |
import Bio from './Bio'; | |
const defaultImageUrl = | |
'https://images.unsplash.com/photo-1583109193439-1ebb113bceac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2474&q=80'; | |
const fontSize = (fontSize) => ({ | |
fontSize: fontSize, | |
lineHeight: `${fontSize + 10}px` | |
}); | |
const fontSizes = { | |
default: ({ isLong }) => ({ | |
title: { | |
...fontSize(isLong ? 40 : 50) | |
}, | |
avatar: { | |
size: 150 | |
}, | |
name: { | |
fontSize: 45 | |
}, | |
website: { | |
fontSize: 28 | |
} | |
}) | |
}; | |
const getStyles = (viewport, props) => { | |
let foundFont = fontSizes[viewport]; | |
return foundFont(props); | |
}; | |
const MetaPost = ({ post, debug }) => { | |
const { title, metaImage, metaImageUrl } = post; | |
const size = { | |
width: 1200, | |
height: 630 | |
}; | |
const imageUrl = metaImage?.url || metaImageUrl || defaultImageUrl; | |
const style = { | |
...(debug && { border: '1px solid black' }), | |
...fixedSize(size.width, size.height), | |
...flex.vertical, | |
...flex.centerVertical, | |
overflow: 'hidden', | |
backgroundColor: 'black', | |
color: '#fff', | |
textAlign: 'center', | |
fontWeight: 'bold', | |
background: `url(${imageUrl})`, | |
backgroundSize: 'cover', | |
position: 'relative' | |
}; | |
const isLong = title.length > 80; | |
const styles = getStyles('default', { isLong }); | |
return ( | |
<div style={style}> | |
<div | |
style={{ | |
zIndex: 0, | |
...absoluteCorner(0), | |
backgroundColor: 'rgba(0,0,0,0.65)', | |
width: '100%', | |
height: '100%' | |
}} | |
/> | |
<div | |
style={{ | |
zIndex: 1, | |
position: 'relative', | |
width: '100%', | |
height: '100%', | |
...flex.vertical, | |
...flex.centerVertical | |
}} | |
> | |
<div | |
style={{ | |
padding: 100, | |
textShadow: '0 0 7px rgba(0,0,0,0.5)', | |
...styles.title, | |
marginBottom: 30 | |
}} | |
> | |
{title} | |
</div> | |
<Bio styles={styles} /> | |
</div> | |
</div> | |
); | |
}; | |
export default MetaPost; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment