remove unnecessary react fragments

components/CodeBlock/CodeBlock.tsx

@@ -12,12 +12,10 @@ const CodeBlock = (props: Props) => {
   if (props.className?.split(" ").includes("code-highlight")) {
     // full multi-line code blocks with prism highlighting and copy-to-clipboard button
     return (
-      <>
-        <div className={styles.code}>
-          <CopyButton source={props.children} />
-          <code {...props}>{props.children}</code>
-        </div>
-      </>
+      <div className={styles.code}>
+        <CopyButton source={props.children} />
+        <code {...props}>{props.children}</code>
+      </div>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)

components/Header/Header.module.css

@@ -23,7 +23,7 @@
   line-height: 0;
 }
 
-.left {
+.name {
   flex: 1;
 }
 
@@ -33,11 +33,11 @@
     height: 5.9em;
   }
 
-  .left {
+  .name {
     flex: 0;
   }
 
-  .right {
+  .menu {
     flex: 1;
     max-width: 325px;
     margin-left: 2.5em;
@@ -45,7 +45,7 @@
 }
 
 @media screen and (max-width: 380px) {
-  .right {
+  .menu {
     max-width: 225px;
     margin-left: 1.6em;
   }

components/Header/Header.tsx

@@ -7,11 +7,11 @@ import styles from "./Header.module.css";
 const Header = () => (
   <header className={styles.header}>
     <nav className={styles.nav}>
-      <div className={styles.left}>
+      <div className={styles.name}>
         <Name />
       </div>
 
-      <div className={styles.right}>
+      <div className={styles.menu}>
         <Menu />
       </div>
     </nav>

components/NoteMeta/NoteMeta.module.css

@@ -55,24 +55,3 @@
 .tags .tag:last-of-type {
   margin-right: 0;
 }
-
-.title {
-  margin: 0.3em 0 0.5em -0.03em;
-  font-size: 2.1em;
-  line-height: 1.3;
-  font-weight: 700;
-}
-
-.title a {
-  background: none;
-  padding-bottom: 0;
-  color: inherit;
-}
-
-.title code {
-  font-size: 1em;
-  background: none !important;
-  border: 0 !important;
-  margin: 0 0.075em !important;
-  padding: 0 !important;
-}

components/NoteMeta/NoteMeta.tsx

@@ -7,63 +7,57 @@ import type { NoteMetaType } from "../../types";
 
 import styles from "./NoteMeta.module.css";
 
-const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
-  <>
-    <div className={styles.meta}>
-      <div className={styles.date}>
-        <span>
-          <DateIcon className={`icon ${styles.icon}`} />
-        </span>
-        <span title={format(new Date(date), "PPppp")}>
-          <Link href={`/notes/${slug}/`}>
-            <a>{format(new Date(date), "MMMM d, yyyy")}</a>
-          </Link>
-        </span>
-      </div>
+type Props = Pick<NoteMetaType, "slug" | "date" | "title" | "tags">;
 
-      {tags.length > 0 && (
-        <div className={styles.tags}>
-          <span>
-            <TagIcon className={`icon ${styles.icon}`} />
-          </span>
-          {tags.map((tag) => (
-            <span key={tag} className={styles.tag}>
-              {tag}
-            </span>
-          ))}
-        </div>
-      )}
-
-      <div>
-        <span>
-          <EditIcon className={`icon ${styles.icon}`} />
-        </span>
-        <span>
-          <a
-            href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={`Edit "${title}" on GitHub`}
-          >
-            Improve This Post
-          </a>
-        </span>
-      </div>
-
-      <div>
-        <span>
-          <ViewsIcon className={`icon ${styles.icon}`} />
-        </span>
-        <HitCounter slug={`notes/${slug}`} />
-      </div>
+const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
+  <div className={styles.meta}>
+    <div className={styles.date}>
+      <span>
+        <DateIcon className={`icon ${styles.icon}`} />
+      </span>
+      <span title={format(new Date(date), "PPppp")}>
+        <Link href={`/notes/${slug}/`}>
+          <a>{format(new Date(date), "MMMM d, yyyy")}</a>
+        </Link>
+      </span>
     </div>
 
-    <h1 className={styles.title}>
-      <Link href={`/notes/${slug}/`}>
-        <a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
-      </Link>
-    </h1>
-  </>
+    {tags.length > 0 && (
+      <div className={styles.tags}>
+        <span>
+          <TagIcon className={`icon ${styles.icon}`} />
+        </span>
+        {tags.map((tag) => (
+          <span key={tag} className={styles.tag}>
+            {tag}
+          </span>
+        ))}
+      </div>
+    )}
+
+    <div>
+      <span>
+        <EditIcon className={`icon ${styles.icon}`} />
+      </span>
+      <span>
+        <a
+          href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={`Edit "${title}" on GitHub`}
+        >
+          Improve This Post
+        </a>
+      </span>
+    </div>
+
+    <div>
+      <span>
+        <ViewsIcon className={`icon ${styles.icon}`} />
+      </span>
+      <HitCounter slug={`notes/${slug}`} />
+    </div>
+  </div>
 );
 
 export default NoteMeta;

components/NoteTitle/NoteTitle.module.css

@@ -0,0 +1,26 @@
+.title {
+  margin: 0.3em 0 0.5em -0.03em;
+  font-size: 2.1em;
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.title a {
+  background: none;
+  padding-bottom: 0;
+  color: inherit;
+}
+
+.title code {
+  font-size: 1em;
+  background: none !important;
+  border: 0 !important;
+  margin: 0 0.075em !important;
+  padding: 0 !important;
+}
+
+@media screen and (max-width: 768px) {
+  .title {
+    font-size: 1.8em;
+  }
+}

components/NoteTitle/NoteTitle.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+import type { NoteMetaType } from "../../types";
+
+import styles from "./NoteTitle.module.css";
+
+type Props = Pick<NoteMetaType, "slug" | "htmlTitle">;
+
+const NoteTitle = ({ slug, htmlTitle }: Props) => (
+  <h1 className={styles.title}>
+    <Link href={`/notes/${slug}/`}>
+      <a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
+    </Link>
+  </h1>
+);
+
+export default NoteTitle;

components/PageTitle/PageTitle.tsx

@@ -3,13 +3,13 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 import type { ReactNode } from "react";
 
-import styles from "./Title.module.css";
+import styles from "./PageTitle.module.css";
 
 type Props = {
   children: ReactNode;
 };
 
-const Title = ({ children }: Props) => {
+const PageTitle = ({ children }: Props) => {
   const router = useRouter();
 
   return (
@@ -21,4 +21,4 @@ const Title = ({ children }: Props) => {
   );
 };
 
-export default memo(Title);
+export default memo(PageTitle);

lib/mdx-components.ts

@@ -13,5 +13,5 @@ export const YouTube = dynamic(() => import("../components/YouTubeEmbed/YouTubeE
 export const Tweet = dynamic(() => import("../components/TweetEmbed/TweetEmbed"));
 export const Gist = dynamic(() => import("../components/GistEmbed/GistEmbed"));
 
-// one-offs for specific posts
+// One-offs for specific posts:
 export const OctocatLink = dynamic(() => import("../components/OctocatLink/OctocatLink"));

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>