Created
November 18, 2020 09:48
-
-
Save kitze/6f3672648c95b4f6d69f2549f071d851 to your computer and use it in GitHub Desktop.
MetaPost component for kitze.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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