Gatsbyテーマをカスタマイズする

import React, { Fragment } from 'react';
import { Styled } from 'theme-ui';
/**
 * Shadow me to add your own bio content
 */
export default () => (
  <Fragment>
    Words by <Styled.a href='http://example.com/'>Jane Doe</Styled.a>.
    <br />
    Change me. This is all quite default.
  </Fragment>
);

import React from 'react';
export default ({ author }) => (
  <>
    {author}
    <br />
    ボディビル好きです。
    <br />
    好きなポージングは……ぜんぶです！
    <br />
    得意なポージングはアブドミナルアンドサイです💪
  </>
);

/**
 * Bio component that queries for data
 * with Gatsby's StaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/static-query/
 */
import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import Image from 'gatsby-image';
import { Styled, css, Flex } from 'theme-ui';
import BioContent from './bio-content';
const Bio = () => {
  const data = useStaticQuery(bioQuery);
  const {
    site: {
      siteMetadata: { author },
    },
    avatar,
  } = data;
  return (
    <Flex css={css({ mb: 4, alignItems: `center` })}>
      {avatar ? (
        <Image
          fixed={avatar.childImageSharp.fixed}
          alt={author}
          css={css({
            mr: 2,
            mb: 0,
            width: 48,
            minWidth: 48,
            borderRadius: 99999,
          })}
        />
      ) : (
        <div
          css={css({
            mr: 2,
            mb: 0,
            width: 48,
            minWidth: 48,
            borderRadius: 99999,
          })}
          role='presentation'
        />
      )}
      <Styled.div>
        <BioContent />
      </Styled.div>
    </Flex>
  );
};
const bioQuery = graphql`
  query BioQuery {
    site {
      siteMetadata {
        author
      }
    }
    avatar: file(absolutePath: { regex: "/avatar.(jpeg|jpg|gif|png)/" }) {
      childImageSharp {
        fixed(width: 48, height: 48) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`;
export default Bio;

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import Image from 'gatsby-image';
import { Styled, css, Flex } from 'theme-ui';
import BioContent from './bio-content';
const Bio = () => {
  const data = useStaticQuery(bioQuery);
  const {
    site: {
      siteMetadata: { author },
    },
    avatar,
  } = data;
  return (
    <Flex css={css({ mb: 4, alignItems: `center` })}>
      {avatar ? (
        <Image
          fixed={avatar.childImageSharp.fixed}
          alt={author}
          css={css({
            mr: 2,
            mb: 0,
            width: 48,
            minWidth: 48,
            borderRadius: 99999,
          })}
        />
      ) : (
        <div
          css={css({
            mr: 2,
            mb: 0,
            width: 48,
            minWidth: 48,
            borderRadius: 99999,
          })}
          role='presentation'
        />
      )}
      <Styled.div>
        <BioContent author={author} />
      </Styled.div>
    </Flex>
  );
};
const bioQuery = graphql`
  query {
    site {
      siteMetadata {
        author
      }
    }
    avatar: file(absolutePath: { regex: "/avatar.(jpeg|jpg|gif|png)/" }) {
      childImageSharp {
        fixed(width: 48, height: 48) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`;
export default Bio;