Skip to content

Instantly share code, notes, and snippets.

@kitze

kitze/Bio.js

Created Nov 18, 2020
Embed
What would you like to do?
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