This repository has been archived on 2022-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
skynet-webportal/packages/website/src/components/bio.js

54 lines
1.2 KiB
JavaScript

/**
* Bio component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.com/docs/use-static-query/
*/
import * as React from "react";
import { useStaticQuery, graphql } from "gatsby";
import { StaticImage } from "gatsby-plugin-image";
const Bio = () => {
const data = useStaticQuery(graphql`
query BioQuery {
site {
siteMetadata {
author
social {
twitter
}
}
}
}
`);
// Set these values by editing "siteMetadata" in gatsby-config.js
const author = data.site.siteMetadata?.author;
const social = data.site.siteMetadata?.social;
return (
<div className="bio">
<StaticImage
className="bio-avatar"
layout="fixed"
formats={["AUTO", "WEBP", "AVIF"]}
src="../images/profile-pic.png"
width={50}
height={50}
quality={95}
alt="Profile picture"
/>
{author && (
<p>
Written by <strong>{author}</strong>
{` `}
<a href={`https://twitter.com/${social?.twitter || ``}`}>You should follow them on Twitter</a>
</p>
)}
</div>
);
};
export default Bio;