Huge number of changes, upgrade to next 15, add loads of pages, auth, add ci, loads of clean up, a db for images etc

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

@@ -0,0 +1,23 @@
+import { signIn } from "@/lib/auth"
+ 
+export default function Auth(props: {
+  searchParams: { callbackUrl: string | undefined }
+}) {
+  return (
+    <form
+      className="w-40 mx-auto"
+      action={async () => {
+        "use server"
+        await signIn("authelia", {
+          redirectTo: props.searchParams?.callbackUrl ?? "",
+        })
+      }}
+      >
+      <button type="submit"
+        className={`rounded-lg dark:bg-dracula-bg-light transition-colors duration-100 dark:text-white px-2 py-2 font-normal border-transparent`}
+      >
+        <span>Sign in with Authelia</span>
+      </button>
+    </form>
+  )
+}

src/app/(root)/layout.tsx

@@ -1,9 +1,11 @@
-import "../globals.css";
+import { SessionProvider } from "next-auth/react";
 
 import NavBar from '@/components/navbar';
 import Footer from '@/components/footer';
 import LogIn from "@/components/auth/login";
 
+import "../globals.css";
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -11,9 +13,11 @@ export default function RootLayout({
 }>): 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}
+      <NavBar/>
+      <main className="px-6 py-4 w-full flex-1 align-middle overflow-y-scroll scrollbar scrollbar-thumb-dracula-purple scrollbar-track-dracula-bg-light">
+        <div className="mx-auto w-full align-middle lg:max-w-5xl ">
+          {children}
+        </div>
       </main>
       <Footer/>
     </>

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

@@ -4,7 +4,6 @@ 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>;
 }
 

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

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

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

@@ -1,7 +1,73 @@
-export default function Posts(): React.JSX.Element {
+import { glob } from "glob";
+import { getCurrentUrl } from "@/lib/current-url";
+import { unstable_cache } from "next/cache";
+import Link from "next/link";
+
+type postDetails = {
+  link: string,
+  metadata: {
+    title: string,
+    date: string,
+    coverImage: string,
+    blurb: string,
+    shortBlurb: string,
+    tags: string[]
+  }
+}
+
+async function loadPostDetails(): Promise<postDetails[]> {
+  const posts = await glob(`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`, {
+    nodir: true,
+  });
+
+  const loadPostData = posts.map(async (post) => {
+    const slug = [post.split('/').at(-1)!.slice(0, -4)]
+    const mdxFile = await import(`../../../../src/markdown/posts/[...slug]/${slug.join('/')}.mdx`)
+    return {
+      metadata: mdxFile.metadata,
+      link: getCurrentUrl() + '/posts/' + slug.join('/')
+    }
+  });
+
+  const postData = await Promise.all(loadPostData);
+  return postData;
+}
+
+const getPosts = unstable_cache(
+  loadPostDetails,
+  ['posts'],
+  {
+    revalidate: false
+  }
+)
+
+export default async function Posts(): Promise<React.JSX.Element> {
+  const postDetails = await getPosts();
   return (
-    <>
-      Actually this should be custom
-    </>
+    <div className="flex flex-col gap-6">
+      {postDetails.map((post) => {
+        return (
+          <div key={post.link}>
+            <div className="prose dark:prose-invert mx-auto">
+              <h2>
+                <Link href={post.link}>{post.metadata.title}</Link>
+              </h2>
+              <div className="flex flex-row">
+                {post.metadata.tags.map((tag) => {
+                  return (
+                    <div key={`${post.link}_${tag}`}>
+                      <span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">{tag}</span>
+                    </div>
+                  )
+                })}
+              </div>
+              <p>
+                {post.metadata.blurb}
+              </p>
+            </div>
+          </div>
+        )
+      })}
+    </div>
   );
 }