refactor notes directory and front matter

app/birthday/page.tsx

@@ -4,7 +4,7 @@ import Video from "../../components/Video";
 import { metadata as defaultMetadata } from "../layout";
 import type { Metadata } from "next";
 
-import thumbnail from "../../public/static/images/birthday/thumb.png";
+import thumbnail from "./thumbnail.png";
 
 export const metadata: Metadata = {
   title: "🎉 Cranky Birthday Boy on VHS Tape 📼",
@@ -29,8 +29,8 @@ export default function Page() {
       <Content>
         <Video
           src={{
-            webm: "/static/images/birthday/birthday.webm",
-            mp4: "/static/images/birthday/birthday.mp4",
+            webm: "/static/birthday/birthday.webm",
+            mp4: "/static/birthday/birthday.mp4",
           }}
           poster={thumbnail.src}
         />

app/cli/page.tsx

@@ -9,7 +9,7 @@ import { UnorderedList, ListItem } from "../../components/List";
 import { metadata as defaultMetadata } from "../layout";
 import type { Metadata } from "next";
 
-import cliImg from "../../public/static/images/cli/screenshot.png";
+import cliImg from "./images/screenshot.png";
 
 export const metadata: Metadata = {
   title: "CLI",

app/hillary/page.tsx

@@ -5,7 +5,7 @@ import Video from "../../components/Video";
 import { metadata as defaultMetadata } from "../layout";
 import type { Metadata } from "next";
 
-import thumbnail from "../../public/static/images/hillary/thumb.png";
+import thumbnail from "./thumbnail.png";
 
 export const metadata: Metadata = {
   title: "My Brief Apperance in Hillary Clinton's DNC Video",
@@ -30,9 +30,9 @@ export default function Page() {
       <Content>
         <Video
           src={{
-            webm: "/static/images/hillary/convention-720p.webm",
-            mp4: "/static/images/hillary/convention-720p.mp4",
-            vtt: "/static/images/hillary/subs.en.vtt",
+            webm: "/static/hillary/convention-720p.webm",
+            mp4: "/static/hillary/convention-720p.mp4",
+            vtt: "/static/hillary/subs.en.vtt",
           }}
           poster={thumbnail.src}
         />

app/layout.tsx

@@ -11,7 +11,7 @@ import "modern-normalize/modern-normalize.css"; // https://github.com/sindresorh
 import "./themes.css";
 import "./global.css";
 
-import meJpg from "../public/static/images/me.jpg";
+import meJpg from "./me.jpg";
 
 export const metadata: Metadata = {
   metadataBase: new URL(config.baseUrl),

app/leo/page.tsx

@@ -5,7 +5,7 @@ import Video from "../../components/Video";
 import { metadata as defaultMetadata } from "../layout";
 import type { Metadata } from "next";
 
-import thumbnail from "../../public/static/images/leo/thumb.png";
+import thumbnail from "./thumbnail.png";
 
 export const metadata: Metadata = {
   title: 'Facebook App on "The Lab with Leo Laporte"',
@@ -30,9 +30,9 @@ export default function Page() {
       <Content>
         <Video
           src={{
-            webm: "/static/images/leo/leo.webm",
-            mp4: "/static/images/leo/leo.mp4",
-            vtt: "/static/images/leo/subs.en.vtt",
+            webm: "/static/leo/leo.webm",
+            mp4: "/static/leo/leo.mp4",
+            vtt: "/static/leo/subs.en.vtt",
           }}
           poster={thumbnail.src}
         />

app/manifest.ts

@@ -1,11 +1,6 @@
 import config from "../lib/config";
 import type { MetadataRoute } from "next";
 
-import chrome512Png from "../public/static/favicons/android-chrome-512x512.png";
-import chrome192Png from "../public/static/favicons/android-chrome-192x192.png";
-import maskable512Png from "../public/static/favicons/maskable-512x512.png";
-import maskable192Png from "../public/static/favicons/maskable-192x192.png";
-
 const manifest = (): MetadataRoute.Manifest => {
   return {
     name: config.siteName,
@@ -14,28 +9,9 @@ const manifest = (): MetadataRoute.Manifest => {
     lang: config.siteLocale,
     icons: [
       {
-        src: chrome512Png.src,
-        sizes: `${chrome512Png.width}x${chrome512Png.height}`,
+        src: "/icon.png",
+        sizes: "any",
         type: "image/png",
-        purpose: "any",
-      },
-      {
-        src: chrome192Png.src,
-        sizes: `${chrome192Png.width}x${chrome192Png.height}`,
-        type: "image/png",
-        purpose: "any",
-      },
-      {
-        src: maskable512Png.src,
-        sizes: `${maskable512Png.width}x${maskable512Png.height}`,
-        type: "image/png",
-        purpose: "maskable",
-      },
-      {
-        src: maskable192Png.src,
-        sizes: `${maskable192Png.width}x${maskable192Png.height}`,
-        type: "image/png",
-        purpose: "maskable",
       },
     ],
     display: "browser",

app/not-found.tsx

@@ -11,8 +11,8 @@ export default async function Page() {
     <div style={{ textAlign: "center" }}>
       <Video
         src={{
-          webm: "/static/images/angry-panda.webm",
-          mp4: "/static/images/angry-panda.mp4",
+          webm: "/static/not-found/angry-panda.webm",
+          mp4: "/static/not-found/angry-panda.mp4",
         }}
         autoplay
         responsive={false}

app/notes/[slug]/page.tsx

@@ -6,7 +6,7 @@ import Time from "../../../components/Time";
 import Comments from "../../../components/Comments";
 import Loading from "../../../components/Loading";
 import HitCounter from "./counter";
-import { getPostSlugs, getPostData } from "../../../lib/helpers/posts";
+import { getPostSlugs, getFrontMatter } from "../../../lib/helpers/posts";
 import { metadata as defaultMetadata } from "../../layout";
 import config from "../../../lib/config";
 import { FiCalendar, FiTag, FiEdit, FiEye } from "react-icons/fi";
@@ -32,22 +32,22 @@ export async function generateStaticParams() {
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug } = await params;
-  const { frontMatter } = await getPostData(slug);
+  const frontmatter = await getFrontMatter(slug);
 
   return {
-    title: frontMatter.title,
-    description: frontMatter.description,
+    title: frontmatter.title,
+    description: frontmatter.description,
     openGraph: {
       ...defaultMetadata.openGraph,
-      title: frontMatter.title,
+      title: frontmatter.title,
       url: `/notes/${slug}`,
       type: "article",
       authors: [config.authorName],
-      tags: frontMatter.tags,
-      publishedTime: frontMatter.date,
-      modifiedTime: frontMatter.date,
-      images: frontMatter.image
-        ? [{ url: frontMatter.image, alt: frontMatter.title }]
+      tags: frontmatter.tags,
+      publishedTime: frontmatter.date,
+      modifiedTime: frontmatter.date,
+      images: frontmatter.image
+        ? [{ url: frontmatter.image, alt: frontmatter.title }]
         : defaultMetadata.openGraph?.images,
     },
     alternates: {
@@ -59,17 +59,17 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
 export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
-  const { frontMatter } = await getPostData(slug);
+  const frontmatter = await getFrontMatter(slug);
 
   const jsonLd: WithContext<Article> = {
     "@context": "https://schema.org",
     "@type": "Article",
-    name: frontMatter.title,
-    description: frontMatter.description || config.longDescription,
-    url: frontMatter.permalink,
-    image: frontMatter.image,
-    datePublished: frontMatter.date,
-    dateModified: frontMatter.date,
+    name: frontmatter.title,
+    description: frontmatter.description || config.longDescription,
+    url: frontmatter.permalink,
+    image: frontmatter.image,
+    datePublished: frontmatter.date,
+    dateModified: frontmatter.date,
     author: {
       "@type": "Person",
       name: config.authorName,
@@ -77,7 +77,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
     },
   };
 
-  const { default: MDXContent } = await import(`../../../notes/${slug}.mdx`);
+  const { default: MDXContent } = await import(`../../../notes/${slug}/index.mdx`);
 
   return (
     <>
@@ -85,17 +85,17 @@ export default async function Page({ params }: { params: Promise<{ slug: string
 
       <div className={styles.meta}>
         <div className={styles.metaItem}>
-          <Link href={`/notes/${frontMatter.slug}` as Route} plain className={styles.metaLink}>
+          <Link href={`/notes/${frontmatter.slug}` as Route} plain className={styles.metaLink}>
             <FiCalendar className={styles.metaIcon} />
-            <Time date={frontMatter.date} format="MMMM D, YYYY" />
+            <Time date={frontmatter.date} format="MMMM D, YYYY" />
           </Link>
         </div>
 
-        {frontMatter.tags && (
+        {frontmatter.tags && (
           <div className={styles.metaItem}>
             <FiTag className={styles.metaIcon} />
             <span className={styles.metaTags}>
-              {frontMatter.tags.map((tag) => (
+              {frontmatter.tags.map((tag) => (
                 <span key={tag} title={tag} className={styles.metaTag} aria-label={`Tagged with ${tag}`}>
                   {tag}
                 </span>
@@ -106,8 +106,8 @@ export default async function Page({ params }: { params: Promise<{ slug: string
 
         <div className={styles.metaItem}>
           <Link
-            href={`https://github.com/${config.githubRepo}/blob/main/notes/${frontMatter.slug}.mdx`}
-            title={`Edit "${frontMatter.title}" on GitHub`}
+            href={`https://github.com/${config.githubRepo}/blob/main/notes/${frontmatter.slug}/index.mdx`}
+            title={`Edit "${frontmatter.title}" on GitHub`}
             plain
             className={styles.metaLink}
           >
@@ -129,7 +129,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             >
               <FiEye className={styles.metaIcon} />
               <Suspense fallback={<Loading boxes={3} width={20} />}>
-                <HitCounter slug={`notes/${frontMatter.slug}`} />
+                <HitCounter slug={`notes/${frontmatter.slug}`} />
               </Suspense>
             </div>
           </ErrorBoundary>
@@ -138,8 +138,8 @@ export default async function Page({ params }: { params: Promise<{ slug: string
 
       <h1 className={styles.title}>
         <Link
-          href={`/notes/${frontMatter.slug}` as Route}
-          dangerouslySetInnerHTML={{ __html: frontMatter.htmlTitle || frontMatter.title }}
+          href={`/notes/${frontmatter.slug}` as Route}
+          dangerouslySetInnerHTML={{ __html: frontmatter.htmlTitle || frontmatter.title }}
           plain
           className={styles.link}
         />
@@ -149,9 +149,9 @@ export default async function Page({ params }: { params: Promise<{ slug: string
         <MDXContent />
       </Content>
 
-      {!frontMatter.noComments && (
+      {!frontmatter.noComments && (
         <div id="comments">
-          <Comments title={frontMatter.title} />
+          <Comments title={frontmatter.title} />
         </div>
       )}
     </>

app/previously/page.tsx

@@ -12,20 +12,20 @@ import type { Metadata } from "next";
 import { ComicNeue } from "../../lib/styles/fonts";
 import styles from "./page.module.css";
 
-import img_wayback from "../../public/static/images/previously/wayback.png";
-import img_2002_02 from "../../public/static/images/previously/2002_02.png";
-import img_2002_10 from "../../public/static/images/previously/2002_10.png";
-import img_2003_08 from "../../public/static/images/previously/2003_08.png";
-import img_2004_11 from "../../public/static/images/previously/2004_11.png";
-import img_2006_04 from "../../public/static/images/previously/2006_04.png";
-import img_2006_05 from "../../public/static/images/previously/2006_05.png";
-import img_2007_01 from "../../public/static/images/previously/2007_01.png";
-import img_2007_04 from "../../public/static/images/previously/2007_04.png";
-import img_2007_05 from "../../public/static/images/previously/2007_05.png";
-import img_2009_07 from "../../public/static/images/previously/2009_07.png";
-import img_2012_09 from "../../public/static/images/previously/2012_09.png";
-import img_2018_04 from "../../public/static/images/previously/2018_04.png";
-import img_2020_03 from "../../public/static/images/previously/2020_03.png";
+import img_wayback from "./images/wayback.png";
+import img_2002_02 from "./images/2002_02.png";
+import img_2002_10 from "./images/2002_10.png";
+import img_2003_08 from "./images/2003_08.png";
+import img_2004_11 from "./images/2004_11.png";
+import img_2006_04 from "./images/2006_04.png";
+import img_2006_05 from "./images/2006_05.png";
+import img_2007_01 from "./images/2007_01.png";
+import img_2007_04 from "./images/2007_04.png";
+import img_2007_05 from "./images/2007_05.png";
+import img_2009_07 from "./images/2009_07.png";
+import img_2012_09 from "./images/2012_09.png";
+import img_2018_04 from "./images/2018_04.png";
+import img_2020_03 from "./images/2020_03.png";
 
 export const metadata: Metadata = {
   title: "Previously on...",

app/uses/page.tsx

@@ -8,7 +8,7 @@ import { UnorderedList, ListItem } from "../../components/List";
 import { metadata as defaultMetadata } from "../layout";
 import type { Metadata, Route } from "next";
 
-import desktopImg from "../../public/static/images/uses/desktop.png";
+import desktopImg from "./images/desktop.png";
 
 export const metadata: Metadata = {
   title: "/uses",

app/zip/page.tsx

@@ -4,7 +4,7 @@ import CodeBlock from "../../components/CodeBlock/CodeBlock";
 import { metadata as defaultMetadata } from "../layout";
 import type { Metadata } from "next";
 
-import backgroundImg from "../../public/static/images/zip/bg.jpg";
+import backgroundImg from "./images/sundar.jpg";
 
 export const metadata: Metadata = {
   title: "fuckyougoogle.zip",