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 Footer from "./page-footer/Footer";
+import Header from "./header/Header";
+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 & {
-  style?: CSSProperties;
-};
-
-const CustomImage = (props: CustomImageProps) => {
+const CustomImage = ({ src, width, height, alt, priority }: ImageProps) => {
   return (
-    <div className="image_wrapper" style={props.style}>
+    <div className="image_wrapper">
       <Image
-        src={props.src}
+        src={src}
         layout="intrinsic"
-        width={props.width}
-        height={props.height}
-        alt={props.alt}
+        width={width}
+        height={height}
+        alt={alt || ""}
         quality={65}
-        loading={props.priority ? "eager" : "lazy"}
-        priority={!!props.priority}
+        loading={priority ? "eager" : "lazy"}
+        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%" }}>
-    <ReactPlayer width="100%" height="100%" style={{ position: "absolute", top: 0, left: 0 }} {...props} />
+  <div
+    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);