gatsby-theme-guitar-book/src/components/social-card.js

A Gatsby theme for building guitar book websites

/* global preval */
import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import TextFit from 'react-textfit';
import {Global, css} from '@emotion/core';
import {IconArrowRight} from '@apollo/space-kit/icons/IconArrowRight';
import {smallCaps} from '../utils/typography';

const {fonts, image} = preval`
  const fs = require('fs');
  const path = require('path');

  function getBase64(path) {
    const fontPath = require.resolve('source-sans-pro/' + path);
    const base64Font = fs.readFileSync(fontPath, 'base64');
    return 'data:application/x-font-woff;charset=utf-8;base64,' + base64Font;
  }

  const base64Regular = getBase64('/WOFF2/TTF/SourceSansPro-Regular.ttf.woff2');
  const base64Semibold = getBase64('/WOFF2/TTF/SourceSansPro-Semibold.ttf.woff2');

  const cssPath = require.resolve('source-sans-pro/source-sans-pro.css');
  const fonts = fs
    .readFileSync(cssPath, 'utf-8')
    .replace('WOFF2/TTF/SourceSansPro-Regular.ttf.woff2', base64Regular)
    .replace('WOFF2/TTF/SourceSansPro-Semibold.ttf.woff2', base64Semibold);

  const imagePath = path.resolve(__dirname, '../assets/social-bg.jpg');
  const base64Image = fs.readFileSync(imagePath, 'base64');

  module.exports = {
    fonts,
    image: 'data:image/jpeg;base64,' + base64Image
  };
`;

export default function SocialCard(props) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        boxSizing: 'border-box',
        width: 1200,
        height: 628,
        padding: 80,
        fontFamily: "'Source Sans Pro'",
        color: 'black',
        backgroundImage: `url(${image})`
      }}
    >
      <Global
        styles={css`
          ${fonts}
          svg.arrow-icon path {
            vector-effect: none;
            stroke-width: 4px;
          }
        `}
      />
      <div
        style={{
          fontSize: 32,
          fontWeight: 600,
          marginBottom: 16,
          color: 'black',
          ...smallCaps
        }}
      >
        {props.subtitle}
        {props.category && (
          <Fragment>
            {' '}
            <IconArrowRight
              className="arrow-icon"
              style={{
                width: '0.5em',
                height: '0.5em',
                verticalAlign: '0.05em'
              }}
            />{' '}
            {props.category}
          </Fragment>
        )}
      </div>
      <TextFit
        min={80}
        max={120}
        style={{
          width: '100%',
          height: 250,
          marginBottom: 'auto',
          lineHeight: 1.2,
          colors: 'black'
        }}
      >
        {props.title.replace(/\s+(\S*)$/, '\xA0$1')}
      </TextFit>
      <div>
        <svg viewBox="0 0 440.7 178.23" style={{ height: 105 }}>
          <g fill="#2d2b2d">
            <path d="M188.87 88.58v.23a36.51 36.51 0 01-73 0v-.23H98.22v33.07H82.6a12.77 12.77 0 000-14.7c-3-4.5-4.49-11.43-4.49-18.37H0c0 66.73 30.83 89.65 64.82 89.65 45.06 0 61.27-34.78 79.44-34.78 15 0 52.23 21.38 68.78 1.32 13-15.82 7.31-44.67 7.31-44.67l151.45-.12a11.52 11.52 0 008.51 5.34v2.9c-1.82.35-3.16 1.42-3.16 2.7 0 1.55 2 2.82 4.48 2.82s4.48-1.27 4.48-2.82c0-1.28-1.33-2.35-3.16-2.7v-2.93a18 18 0 006-2 21.11 21.11 0 017.2-1.9v3.28c-1.83.36-3.16 1.43-3.16 2.7 0 1.56 2 2.83 4.48 2.83s4.48-1.27 4.48-2.83c0-1.27-1.34-2.34-3.17-2.7v-3.51a102.16 102.16 0 0116.33.78v4c-1.83.36-3.16 1.42-3.16 2.7 0 1.56 2 2.83 4.48 2.83s4.48-1.27 4.48-2.83c0-1.28-1.34-2.34-3.16-2.7v-3.65c8.41 1 15.36 2.19 16.25 1a9.61 9.61 0 002-5.34s4.75.33 4.75-9.42z" />
            <path d="M152.37 121.62a32.85 32.85 0 0032.76-31h-6.58a26.26 26.26 0 01-52.36 0h-6.58a32.85 32.85 0 0032.76 31z" />
          </g>
          <g fill="#2d2b2d">
            <path d="M26.78 35.83C26.78 13.36 41.01 0 59.28 0a28.24 28.24 0 0120.75 8.7l-6.51 7.85c-3.45-3.36-7.48-6-13.86-6-12.18 0-20.37 9.45-20.37 24.86 0 15.66 7.27 25.16 21 25.16 3.82 0 7.6-1.1 9.79-3V42.76h-12.9v-10h23.86v30.28c-4.58 4.62-12.52 8.15-21.93 8.15-18.52 0-32.33-12.64-32.33-35.36zM107.54 39.82V1.29h12.18v39.48c0 15 5.59 19.87 13.9 19.87s14.2-4.92 14.2-19.87V1.29h11.71v38.56c0 22.55-10 31.37-25.91 31.37s-26.08-8.85-26.08-31.4zM188.2 1.29h12.18v68.67H188.2zM243.22 11.51h-19.77V1.29h51.82v10.25h-19.82v58.42h-12.23zM307.45 1.29h14.28l22.38 68.67h-12.86l-10.46-36.57c-2.18-7.26-4.2-15.1-6.21-22.64h-.42c-1.89 7.61-3.91 15.38-6.09 22.64l-10.54 36.54h-12.44zm-9.16 40.51h32.34v9.49h-32.31zM363.13 1.29h23.14c14.28 0 25.29 5 25.29 20.37 0 14.76-11 21.46-25.29 21.46h-11v26.84h-12.14zm21.88 32.09c9.41 0 14.53-3.91 14.53-11.72s-5.12-10.62-14.53-10.62h-9.7v22.34zm-1 6.49l8.82-7.27 21.44 37.36h-13.72z" />
          </g>
          <g fill="#2d2b2d">
            <path d="M235.17 109.19h10.28c7.61 0 12.49 2.89 12.49 9.21 0 3.95-2 7.11-5.86 8.26v.23c4.91.83 8.2 3.9 8.2 9.15 0 7.29-5.53 11-14.1 11h-11zm9.19 16.68c7.77 0 10.92-2.74 10.92-7.21 0-5.31-3.66-7.26-10.61-7.26h-6.85v14.47zm1.1 19c7.54 0 12.17-2.72 12.17-8.79 0-5.45-4.43-8-12.17-8h-7.64v16.83zM271.55 133.29c0-9.24 5.76-14.55 12.39-14.55s12.4 5.31 12.4 14.55-5.76 14.44-12.4 14.44-12.39-5.27-12.39-14.44zm22.12 0c0-7.27-4.15-12.31-9.73-12.31s-9.73 5-9.73 12.31 4.16 12.2 9.73 12.2 9.73-4.89 9.73-12.2zM308.06 133.29c0-9.24 5.76-14.55 12.39-14.55s12.4 5.31 12.4 14.55-5.76 14.44-12.4 14.44-12.39-5.27-12.39-14.44zm22.12 0c0-7.27-4.15-12.31-9.73-12.31s-9.72 5-9.72 12.31 4.15 12.2 9.72 12.2 9.73-4.89 9.73-12.2zM346.32 105.72h2.52v30.48h.12l13.63-16.73h2.93l-9 10.93 10.5 16.68h-2.83l-9.16-14.79-6.19 7.27v7.52h-2.52z" />
          </g>
        </svg>
      </div>
    </div>
  );
}

SocialCard.propTypes = {
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string.isRequired,
  category: PropTypes.string
};