Replace React.FC and React.FunctionComponent with pure functions and add Prettier

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "printWidth": 120,
+  "singleQuote": false,
+  "trailingComma": "all"
+}

components/Author.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { format } from 'fecha';
-import { PostData } from '../loader';
+import { format } from "fecha"
+import React from "react"
+import { PostData } from "../loader"
 
-export const FollowButton = () => {
+export function FollowButton() {
   return (
     <a href="/newsletter">
       <div className="follow-button">Follow</div>
     </a>
-  );
-};
+  )
+}
 
-export const Author: React.FC<{ post: PostData }> = (props) => {
+export function Author(props: { post: PostData }) {
   return (
     <div className="author-container">
       <div className="author">
         {props.post.authorPhoto && (
-          <img src={props.post.authorPhoto} className="author-image" />
+          <img src={props.post.authorPhoto} className="author-image" alt="author photo"/>
         )}
-        <AuthorLines post={props.post} />
+        <AuthorLines post={props.post}/>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export const AuthorLines: React.FC<{ post: PostData }> = (props) => {
+export function AuthorLines(props: { post: PostData }) {
   return (
     <div>
       <p className="author-line">
         {props.post.author && <span>{props.post.author}</span>}
 
         {props.post.authorTwitter && (
           <span>
-            {' '}
+            {" "}
             <a
               href={`https://twitter.com/${props.post.authorTwitter}`}
-            >{`@${props.post.authorTwitter}`}</a>{' '}
+            >{`@${props.post.authorTwitter}`}</a>{" "}
           </span>
         )}
       </p>
       <p className="author-line subtle">
         {props.post.datePublished
-          ? format(new Date(props.post.datePublished), 'MMMM Do, YYYY')
-          : ''}
+          ? format(new Date(props.post.datePublished), "MMMM Do, YYYY")
+          : ""}
       </p>
     </div>
-  );
-};
+  )
+}

components/BlogPost.tsx

@@ -1,30 +1,28 @@
-import React from 'react';
-import { Author } from './Author';
-import { Markdown } from './Markdown';
-import { PostData } from '../loader';
-import { PostMeta } from './PostMeta';
+import React from "react"
+import { PostData } from "../loader"
+import { Author } from "./Author"
+import { Markdown } from "./Markdown"
+import { PostMeta } from "./PostMeta"
 
-export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
-  post,
-}) => {
-  const { title, subtitle } = post;
+export function BlogPost({ post }: { post: PostData }) {
+  const { title, subtitle } = post
   return (
     <div className="blog-post">
-      <PostMeta post={post} />
+      <PostMeta post={post}/>
       {post.bannerPhoto && (
-        <img className="blog-post-image" src={post.bannerPhoto} />
+        <img className="blog-post-image" src={post.bannerPhoto} alt="blog post cover"/>
       )}
 
       <div className="blog-post-title">
         {title && <h1>{title}</h1>}
         {subtitle && <h2>{subtitle}</h2>}
-        <br />
-        <Author post={post} />
+        <br/>
+        <Author post={post}/>
       </div>
 
       <div className="blog-post-content">
-        <Markdown source={post.content} />
+        <Markdown source={post.content}/>
       </div>
     </div>
-  );
-};
+  )
+}

components/Code.tsx

@@ -1,23 +1,17 @@
-import React from 'react';
-import darcula from 'react-syntax-highlighter/dist/cjs/styles/prism/darcula';
-import { PrismLight, PrismAsyncLight } from "react-syntax-highlighter"
+import React from "react"
+import { PrismAsyncLight, PrismLight } from "react-syntax-highlighter"
+import darcula from "react-syntax-highlighter/dist/cjs/styles/prism/darcula"
 
 const SyntaxHighlighter =
   typeof window === "undefined" ? PrismLight : PrismAsyncLight
 
-export default class Code extends React.PureComponent<{
-  language: string;
-  value?: string;
-}> {
-  render() {
-    const { language, value } = this.props;
-    return (
-      <SyntaxHighlighter
-        language={(language === 'ts' ? 'typescript' : language) || 'typescript'}
-        style={darcula}
-      >
-        {value}
-      </SyntaxHighlighter>
-    );
-  }
-}
+export default function Code({ language, value }: { language: string, value?: string }) {
+  return (
+    <SyntaxHighlighter
+      language={(language === "ts" ? "typescript" : language) || "typescript"}
+      style={darcula}
+    >
+      {value}
+    </SyntaxHighlighter>
+  )
+};

components/Footer.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { globals } from '../globals';
+import React from "react"
+import { globals } from "../globals"
 
-export const Footer: React.FC = () => (
-  <div className="footer">
+export function Footer() {
+  return <div className="footer">
     <p>{`© ${globals.yourName} ${new Date().getFullYear()}`}</p>
     <a href="/rss.xml">
-      <img src="/img/rss-white.svg" alt="RSS Feed" height="30" width="30" />
+      <img src="/img/rss-white.svg" alt="RSS Feed" height="30" width="30"/>
     </a>
   </div>
-);
+}

components/Header.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import { globals } from '../globals';
+import React from "react"
+import { globals } from "../globals"
 
-export const Header: React.FC = () => (
-  <div className="header">
+export function Header() {
+  return <div className="header">
     <a href="/">{globals.siteName}</a>
-    <div className="flex-spacer" />
+    <div className="flex-spacer"/>
     <a href="https://github.com/colinhacks/devii">GitHub</a>
     <a href="/blog/the-ultimate-tech-stack">Motivation</a>
   </div>
-);
+}
+

components/Markdown.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import Code from './Code';
-import ReactMarkdown from 'react-markdown/with-html';
+import React from "react"
+import ReactMarkdown from "react-markdown/with-html"
+import Code from "./Code"
 
-export const Markdown: React.FC<{ source: string }> = (props) => {
+export function Markdown(props: { source: string }) {
   return (
-    <div style={{ width: '100%' }} className="devii-markdown">
+    <div style={{ width: "100%" }} className="devii-markdown">
       <ReactMarkdown
         key="content"
         source={props.source}
@@ -14,5 +14,5 @@ export const Markdown: React.FC<{ source: string }> = (props) => {
         escapeHtml={false}
       />
     </div>
-  );
-};
+  )
+}

components/Meta.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import NextHead from 'next/head';
-import { globals } from '../globals';
+import NextHead from "next/head"
+import React from "react"
+import { globals } from "../globals"
 
-export const Meta: React.FC<{
+export function Meta(props: {
   meta: {
     title: string;
     link?: string;
     desc?: string;
     image?: string;
   };
-}> = (props) => {
-  const { meta } = props;
+}) {
+  const { meta } = props
   return (
     <NextHead>
       <title>{meta.title}</title>
-      <meta name="copyright" content="Colin McDonnell" />
-      {meta.link && <link rel="canonical" href={meta.link} />}
-      {meta.desc && <meta name="description" content={meta.desc} />}
-      <meta property="og:type" content="website" />
-      <meta name="og:title" property="og:title" content={meta.title} />
+      <meta name="copyright" content="Colin McDonnell"/>
+      {meta.link && <link rel="canonical" href={meta.link}/>}
+      {meta.desc && <meta name="description" content={meta.desc}/>}
+      <meta property="og:type" content="website"/>
+      <meta name="og:title" property="og:title" content={meta.title}/>
       {meta.desc && (
         <meta
           name="og:description"
           property="og:description"
           content={meta.desc}
         />
       )}
-      <meta property="og:site_name" content={globals.siteName} />
-      {meta.link && <meta property="og:url" content={`${meta.link}`} />}
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:title" content={meta.title} />
-      {meta.desc && <meta name="twitter:description" content={meta.desc} />}
-      <meta name="twitter:site" content={globals.twitterHandle} />
-      <meta name="twitter:creator" content={globals.twitterHandle} />
-      {meta.image && <meta name="twitter:image" content={meta.image} />}
-      {meta.image && <meta property="og:image" content={`${meta.image}`} />}
+      <meta property="og:site_name" content={globals.siteName}/>
+      {meta.link && <meta property="og:url" content={`${meta.link}`}/>}
+      <meta name="twitter:card" content="summary"/>
+      <meta name="twitter:title" content={meta.title}/>
+      {meta.desc && <meta name="twitter:description" content={meta.desc}/>}
+      <meta name="twitter:site" content={globals.twitterHandle}/>
+      <meta name="twitter:creator" content={globals.twitterHandle}/>
+      {meta.image && <meta name="twitter:image" content={meta.image}/>}
+      {meta.image && <meta property="og:image" content={`${meta.image}`}/>}
     </NextHead>
-  );
-};
+  )
+}

components/PostCard.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { format } from 'fecha';
-import { PostData } from '../loader';
-import { Tag } from './Tag';
+import { format } from "fecha"
+import React from "react"
+import { PostData } from "../loader"
+import { Tag } from "./Tag"
 
-export const PostCard: React.FC<{ post: PostData }> = (props) => {
-  const post = props.post;
+export function PostCard(props: { post: PostData }) {
+  const post = props.post
   return (
     <a className="post-card" href={`/${post.path}`}>
       <div className="post-card-inner">
@@ -19,17 +19,17 @@ export const PostCard: React.FC<{ post: PostData }> = (props) => {
           {false && post.subtitle && <p>{post.subtitle}</p>}
           <p>
             {props.post.datePublished
-              ? format(new Date(props.post.datePublished), 'MMMM Do, YYYY')
-              : ''}
+              ? format(new Date(props.post.datePublished), "MMMM Do, YYYY")
+              : ""}
           </p>
-          <div className="flex-spacer"> </div>
+          <div className="flex-spacer"></div>
           {false && (
             <div className="tag-container">
-              {post.tags && (post.tags || []).map((tag) => <Tag tag={tag} />)}
+              {post.tags && (post.tags || []).map((tag) => <Tag tag={tag}/>)}
             </div>
           )}
         </div>
       </div>
     </a>
-  );
-};
+  )
+}

components/PostMeta.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { PostData } from '../loader';
-import { Meta } from './Meta';
+import React from "react"
+import { PostData } from "../loader"
+import { Meta } from "./Meta"
 
-export const PostMeta: React.FC<{ post: PostData }> = ({ post }) => {
+export function PostMeta({ post }: { post: PostData }) {
   return (
     <Meta
       meta={{
@@ -12,5 +12,5 @@ export const PostMeta: React.FC<{ post: PostData }> = ({ post }) => {
         image: post.bannerPhoto,
       }}
     />
-  );
-};
+  )
+}

components/Tag.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react"
 
-export const Tag: React.FC<{ tag: string }> = (props) => {
+export function Tag(props: { tag: string }) {
   return (
     <div className="tag">{props.tag}</div>
-  );
-};
+  )
+}

globals.ts

@@ -1,11 +1,11 @@
 export namespace globals {
-  export const yourName = 'Alyssa P. Hacker';
-  export const siteName = 'My Awesome Blog';
-  export const siteDescription = 'I write about code \'n stuff';
-  export const siteCreationDate = 'March 3, 2020 04:00:00 GMT';
-  export const twitterHandle = '@alyssaphacker';
-  export const email = '[email protected]';
-  export const url = 'https://alyssaphacker.com';
-  export const accentColor = '#4fc2b4';
+  export const yourName = "Alyssa P. Hacker";
+  export const siteName = "My Awesome Blog";
+  export const siteDescription = "I write about code 'n stuff";
+  export const siteCreationDate = "March 3, 2020 04:00:00 GMT";
+  export const twitterHandle = "@alyssaphacker";
+  export const email = "[email protected]";
+  export const url = "https://alyssaphacker.com";
+  export const accentColor = "#4fc2b4";
   export const googleAnalyticsId = ``; // e.g. 'UA-999999999-1'
 }