Oops probably should've committed, not even sure what's changed. Set up MDX, set up cv and print, set up dark mode, look at react query

src/app/(root)/cv/page.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Cv from '@/components/cv';
+
+export default function CvPage(): React.JSX.Element {
+  return (
+    <div>
+      <div className='flex flex-row justify-center pb-4'>
+        <button className='py-2 px-4 border'>
+          Download
+        </button>
+      </div>
+      <Cv/>
+    </div>
+  );
+}

src/app/(root)/layout.tsx

@@ -0,0 +1,21 @@
+import "../globals.css";
+
+import NavBar from '@/components/navbar';
+import Footer from '@/components/footer';
+import LogIn from "@/components/auth/login";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>): React.JSX.Element {
+  return (
+    <>
+      <NavBar LogIn={<LogIn/>}/>
+      <main className="px-6 py-4 w-full mx-auto flex-1 align-middle lg:max-w-5xl">
+        {children}
+      </main>
+      <Footer/>
+    </>
+  );
+}

src/app/(root)/page.tsx

@@ -0,0 +1,9 @@
+import HomeMdx from '@/markdown/page.mdx';
+
+export default function Home(): React.JSX.Element {
+  return (
+    <>
+      <HomeMdx/>
+    </>
+  );
+}

src/app/(root)/photos/page.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import Lightbox from "@/components/lightbox";
+import { type GetPhotos } from "@/app/api/photos/route";
+
+async function getImageData(): Promise<GetPhotos> {
+  const res = await fetch(`http://localhost:3000/api/photos`, { next: { revalidate: false, tags: ['photos'] } });
+  console.log(res);
+  return res.json() as Promise<GetPhotos>;
+}
+
+export default async function Photos(): Promise<React.JSX.Element> {
+  const {data: imageData} = await getImageData();
+  
+  return (
+    <Lightbox imageData={imageData.images}>
+      {imageData.images.map((image) => (
+        <Image
+          key={image.src}
+          alt={image.src}
+          src={image.src}
+          className="object-contain h-60 w-80"
+          sizes="100vw"
+          loading="lazy"
+          width={image.width}
+          height={image.height}
+          blurDataURL={image.blur}
+          placeholder="blur"
+        />
+      ))}
+    </Lightbox>
+  );
+}

src/app/(root)/posts/[...slug]/page.tsx

@@ -0,0 +1,32 @@
+import { glob } from "glob";
+
+// type postMdx = {
+//   metadata: {
+//     title: string,
+//     date: string,
+//     coverImage: string,
+//     blurb: string,
+//     shortBlurb: string,
+//     tags: string[]
+//   }
+// }
+
+export async function generateStaticParams(): Promise<{slug: string[]}[]> {
+  const posts = await glob(`src/markdown/posts/[...slug]/**/*.mdx`, {
+    nodir: true,
+  });
+
+  const slugs = posts.map((post) => ({
+    slug: post.replace('src/markdown/posts/[...slug]/', '').replace(/\.mdx$/, '').split('/')
+  }));
+
+  return slugs;
+}
+
+export default function Post({params}: {params: { slug: string[] }}): React.JSX.Element {
+  return (
+    <>
+      {params.slug}
+    </>
+  );
+}

src/app/(root)/posts/layout.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Post({children}: {children: React.JSX.Element}): React.JSX.Element {
+  return (
+    <>
+      {children}
+    </>
+  );
+}

src/app/(root)/posts/page.tsx

@@ -0,0 +1,7 @@
+export default function Posts(): React.JSX.Element {
+  return (
+    <>
+      Actually this should be custom
+    </>
+  );
+}