MetaPost component for kitze.io

Bio.js

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;

MetaPost.js

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;