remove unnecessary react fragments

pages/birthday.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import Video from "../components/Video/Video";
 import { TapeIcon } from "../components/Icons";
 
@@ -16,9 +16,9 @@ const Birthday = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <TapeIcon /> 1996.MOV
-    </Title>
+    </PageTitle>
 
     <Content>
       <Video

pages/cli.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import { BotIcon } from "../components/Icons";
 
 import cliImg from "../public/static/images/cli/screenshot.png";
@@ -16,9 +16,9 @@ const CLI = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <BotIcon /> CLI
-    </Title>
+    </PageTitle>
 
     <Content>
       <blockquote>

pages/contact.tsx

@@ -1,5 +1,5 @@
 import { NextSeo } from "next-seo";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import ContactForm from "../components/ContactForm/ContactForm";
 import { MailIcon, LockIcon } from "../components/Icons";
 import Content from "../components/Content/Content";
@@ -13,9 +13,9 @@ const Contact = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <MailIcon /> Contact Me
-    </Title>
+    </PageTitle>
 
     <Content>
       <div className="wrapper">

pages/hillary.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import Video from "../components/Video/Video";
 
 import thumbnail from "../public/static/images/hillary/thumb.png";
@@ -15,7 +15,7 @@ const Hillary = () => (
       }}
     />
 
-    <Title>My Brief Apperance in Hillary Clinton's DNC Video</Title>
+    <PageTitle>My Brief Apperance in Hillary Clinton's DNC Video</PageTitle>
     <Content>
       <Video
         webm="/static/images/hillary/convention-720p.webm"

pages/leo.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import Video from "../components/Video/Video";
 
 import thumbnail from "../public/static/images/leo/thumb.png";
@@ -15,7 +15,7 @@ const Leo = () => (
       }}
     />
 
-    <Title>Facebook App on "The Lab with Leo Laporte"</Title>
+    <PageTitle>Facebook App on "The Lab with Leo Laporte"</PageTitle>
 
     <Content>
       <Video

pages/license.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import { LicenseIcon } from "../components/Icons";
 
 const License = () => (
@@ -12,9 +12,9 @@ const License = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <LicenseIcon /> License
-    </Title>
+    </PageTitle>
 
     <Content>
       <p>

pages/notes/[slug].tsx

@@ -3,7 +3,8 @@ import { NextSeo, ArticleJsonLd } from "next-seo";
 import { MDXRemote } from "next-mdx-remote";
 import { escape } from "html-escaper";
 import Content from "../../components/Content/Content";
-import Meta from "../../components/NoteMeta/NoteMeta";
+import NoteMeta from "../../components/NoteMeta/NoteMeta";
+import NoteTitle from "../../components/NoteTitle/NoteTitle";
 import Comments from "../../components/Comments/Comments";
 import * as mdxComponents from "../../lib/mdx-components";
 import { getNote, getNoteSlugs } from "../../lib/parse-notes";
@@ -51,10 +52,13 @@ const Note = ({ frontMatter, source }: NoteType) => {
         publisherLogo={`${config.baseUrl}/static/images/me.jpg`}
       />
 
-      <Meta {...frontMatter} />
+      <NoteMeta slug={frontMatter.slug} date={frontMatter.date} title={frontMatter.title} tags={frontMatter.tags} />
+      <NoteTitle slug={frontMatter.slug} htmlTitle={frontMatter.htmlTitle} />
+
       <Content>
         <MDXRemote {...source} components={{ ...mdxComponents }} lazy />
       </Content>
+
       {frontMatter.noComments !== true && (
         <InView rootMargin="140px" triggerOnce={true} fallbackInView={true}>
           {({ inView, ref }) => (

pages/notes/index.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from "next-seo";
 import { format } from "date-fns";
-import List from "../../components/NotesList/NotesList";
+import NotesList from "../../components/NotesList/NotesList";
 import { getAllNotes } from "../../lib/parse-notes";
 import type { GetStaticProps } from "next";
 
@@ -14,7 +14,7 @@ const Notes = ({ notesByYear }) => (
       }}
     />
 
-    <List notesByYear={notesByYear} />
+    <NotesList notesByYear={notesByYear} />
   </>
 );
 

pages/previously.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import { FloppyIcon, SirenIcon } from "../components/Icons";
 
 /* eslint-disable camelcase */
@@ -32,9 +32,9 @@ const Previously = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <FloppyIcon /> Previously on...
-    </Title>
+    </PageTitle>
 
     <Content>
       <figure>

pages/privacy.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import { PrivacyIcon } from "../components/Icons";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
@@ -16,9 +16,9 @@ const Privacy = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <PrivacyIcon /> Privacy
-    </Title>
+    </PageTitle>
 
     <Content>
       <p>Okay, this is an easy one. 😉</p>

pages/projects.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "@octokit/graphql";
 import { NextSeo } from "next-seo";
-import Title from "../components/Title/Title";
-import RepoCard from "../components/RepositoryCard/RepositoryCard";
+import PageTitle from "../components/PageTitle/PageTitle";
+import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
 import { ProjectsIcon } from "../components/Icons";
 import type { GetStaticProps } from "next";
 import { RepoType } from "../types";
@@ -15,14 +15,14 @@ const Projects = (props: { repos: RepoType[] }) => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       <ProjectsIcon /> Projects
-    </Title>
+    </PageTitle>
 
     <div className="wrapper">
       {props.repos.map((repo: RepoType) => (
         <div key={repo.name} className="card">
-          <RepoCard {...repo} />
+          <RepositoryCard {...repo} />
         </div>
       ))}
     </div>

pages/uses.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
-import Title from "../components/Title/Title";
+import PageTitle from "../components/PageTitle/PageTitle";
 import { LaptopIcon } from "../components/Icons";
 
 import desktopImg from "../public/static/images/uses/bigsur.png";
@@ -17,9 +17,9 @@ const Uses = () => (
       }}
     />
 
-    <Title>
+    <PageTitle>
       /uses <LaptopIcon />
-    </Title>
+    </PageTitle>
 
     <Content>
       <p>