component reorganization

components/Layout.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { useTheme } from "next-themes";
-import Header from "./page-header/Header";
+import Header from "./header/Header";
-import Footer from "./page-footer/Footer";
+import Footer from "./footer/Footer";
 import { themeColors } from "../lib/config";
 import type { ReactNode } from "react";
 

components/header/Header.tsx

@@ -64,6 +64,7 @@ const Header = () => (
               </Link>
             </li>
           ))}
+
           <li className={styles.theme_toggle}>
             <ThemeToggle className={styles.icon} />
           </li>

components/media/Figure.tsx

@@ -1,9 +1,9 @@
 import Image from "./Image";
 import innerText from "react-innertext";
 import type { ReactNode } from "react";
-import type { CustomImageProps } from "./Image";
+import type { ImageProps } from "next/image";
 
-export type CustomFigureProps = Omit<CustomImageProps, "alt"> & {
+type CustomFigureProps = Omit<ImageProps, "alt"> & {
   children: ReactNode; // caption (can be in markdown, yay!!!)
   alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
 };

components/media/Image.tsx

@@ -1,23 +1,18 @@
 import Image from "next/image";
 import type { ImageProps } from "next/image";
-import type { CSSProperties } from "react";
 
-export type CustomImageProps = ImageProps & {
+const CustomImage = ({ src, width, height, alt, priority }: ImageProps) => {
-  style?: CSSProperties;
-};
-
-const CustomImage = (props: CustomImageProps) => {
   return (
-    <div className="image_wrapper" style={props.style}>
+    <div className="image_wrapper">
       <Image
-        src={props.src}
+        src={src}
         layout="intrinsic"
-        width={props.width}
+        width={width}
-        height={props.height}
+        height={height}
-        alt={props.alt}
+        alt={alt || ""}
         quality={65}
-        loading={props.priority ? "eager" : "lazy"}
+        loading={priority ? "eager" : "lazy"}
-        priority={!!props.priority}
+        priority={!!priority}
       />
     </div>
   );

components/media/Tweet.tsx

@@ -1,6 +1,10 @@
 import TweetEmbed from "react-tweet-embed";
 
-const Tweet = (props: { id: string }) => (
+type CustomTweetProps = {
+  id: string;
+};
+
+const Tweet = (props: CustomTweetProps) => (
   <TweetEmbed
     id={props.id}
     options={{

components/media/Video.tsx

@@ -2,8 +2,22 @@ import ReactPlayer from "react-player/lazy";
 import type { ReactPlayerProps } from "react-player";
 
 const Video = (props: ReactPlayerProps) => (
-  <div style={{ position: "relative", paddingTop: "56.25%" }}>
+  <div
-    <ReactPlayer width="100%" height="100%" style={{ position: "absolute", top: 0, left: 0 }} {...props} />
+    style={{
+      position: "relative",
+      paddingTop: "56.25%",
+    }}
+  >
+    <ReactPlayer
+      width="100%"
+      height="100%"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+      }}
+      {...props}
+    />
   </div>
 );
 

components/notes/HitCounter.tsx

@@ -1,8 +1,8 @@
 import useSWR from "swr";
-import { fetcher } from "../../lib/fetcher";
 import Loading from "../loading/Loading";
+import { fetcher } from "../../lib/fetcher";
 
-const Hits = ({ slug }) => {
+const HitCounter = ({ slug }) => {
   // start fetching repos from API immediately
   const { data, error } = useSWR(`/api/hits/?slug=${encodeURIComponent(slug)}`, fetcher, {
     // avoid double (or more) counting views
@@ -27,4 +27,4 @@ const Hits = ({ slug }) => {
   );
 };
 
-export default Hits;
+export default HitCounter;

components/notes/Meta.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { format } from "date-fns";
-import Hits from "../hits/Hits";
+import HitCounter from "./HitCounter";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
 import * as config from "../../lib/config";
 import type { NoteMetaType } from "../../types";
@@ -20,6 +20,7 @@ const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
           </Link>
         </span>
       </div>
+
       {tags.length > 0 && (
         <div className={styles.tags}>
           <span>
@@ -32,6 +33,7 @@ const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
           ))}
         </div>
       )}
+
       <div>
         <span>
           <EditIcon className={`icon ${styles.icon}`} />
@@ -47,11 +49,12 @@ const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
           </a>
         </span>
       </div>
+
       <div>
         <span>
           <ViewsIcon className={`icon ${styles.icon}`} />
         </span>
-        <Hits slug={`notes/${slug}`} />
+        <HitCounter slug={`notes/${slug}`} />
       </div>
     </div>
 

components/title/Title.tsx

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

pages/birthday.tsx

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

pages/cli.tsx

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

pages/contact.tsx

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

pages/hillary.tsx

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

pages/leo.tsx

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

pages/license.tsx

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

pages/previously.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content";
-import PageTitle from "../components/page/PageTitle";
+import Title from "../components/title/Title";
 import { FloppyIcon, SirenIcon } from "../components/icons";
 
 /* eslint-disable camelcase */
@@ -32,9 +32,9 @@ const Previously = () => (
       }}
     />
 
-    <PageTitle>
+    <Title>
       <FloppyIcon /> Previously on...
-    </PageTitle>
+    </Title>
 
     <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";
-import PageTitle from "../components/page/PageTitle";
+import Title from "../components/title/Title";
 import { PrivacyIcon } from "../components/icons";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
@@ -16,9 +16,9 @@ const Privacy = () => (
       }}
     />
 
-    <PageTitle>
+    <Title>
       <PrivacyIcon /> Privacy
-    </PageTitle>
+    </Title>
 
     <Content>
       <p>Okay, this is an easy one. 😉</p>

pages/projects.tsx

@@ -1,6 +1,6 @@
 import { graphql } from "@octokit/graphql";
 import { NextSeo } from "next-seo";
-import PageTitle from "../components/page/PageTitle";
+import Title from "../components/title/Title";
 import RepoCard from "../components/projects/RepoCard";
 import { ProjectsIcon } from "../components/icons";
 import type { GetStaticProps } from "next";
@@ -15,9 +15,9 @@ const Projects = (props: { repos: RepoType[] }) => (
       }}
     />
 
-    <PageTitle>
+    <Title>
       <ProjectsIcon /> Projects
-    </PageTitle>
+    </Title>
 
     <div className="wrapper">
       {props.repos.map((repo: RepoType) => (

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";
-import PageTitle from "../components/page/PageTitle";
+import Title from "../components/title/Title";
 import { LaptopIcon } from "../components/icons";
 
 import desktopImg from "../public/static/images/uses/bigsur.png";
@@ -17,9 +17,9 @@ const Uses = () => (
       }}
     />
 
-    <PageTitle>
+    <Title>
       /uses <LaptopIcon />
-    </PageTitle>
+    </Title>
 
     <Content>
       <p>