Merge pull request #5 from skunichetty/posts

Updated styling and refactored slug out of frontmatter

app/posts/layout.tsx

@@ -1,14 +1,17 @@
 import { Metadata } from "next";
+import { Inter } from "next/font/google";
 
 export const metadata: Metadata = {
   title: "Posts",
   description: "All Blog Posts by Sachchit Kunichetty",
 };
 
+const inter = Inter({ subsets: ["latin"] });
+
 interface LayoutProps {
   children: React.ReactNode;
 }
 
 export default function PostLayout({ children }: LayoutProps) {
-  return <div className="lg:mx-96 sm:mx-32 mx-10 block">{children}</div>;
+  return <div className={`${inter.className} lg:mx-60 mx-10 block`}>{children}</div>;
 }

app/posts/page.tsx

@@ -1,4 +1,4 @@
-import { readFile, readdir, lstat } from "fs/promises";
+import { readFile, readdir } from "fs/promises";
 import path from "path";
 import Link from "next/link";
 import { dateComparator } from "@/app/utils";
@@ -10,20 +10,25 @@ interface RawPostMetadata {
   date: string;
   editDate?: string;
   author: string;
-  slug: string;
   keywords: string[];
   description: string;
+  slug: string;
 }
 
 async function getPosts() {
   const entries = await readdir("app/posts", { withFileTypes: true });
   const folders = entries
     .filter((entry) => entry.isDirectory())
-    .map((entry) => path.join(entry.parentPath, entry.name));
+    .map((entry) => {
+      return {
+        fullpath: path.join(entry.parentPath, entry.name),
+        slug: entry.name
+      };
+    });
 
   const raw_metadata: RawPostMetadata[] = await Promise.all(
-    folders.map(async (folder) => {
-      const filename = `${folder}/page.mdx`;
+    folders.map(async ({fullpath, slug}) => {
+      const filename = `${fullpath}/page.mdx`;
       const main = await readFile(filename);
       const content = main.toString().split("\n");
 
@@ -34,7 +39,10 @@ async function getPosts() {
         while (index < content.length && content[index] != "---") {
           ++index;
         }
-        return parse(content.slice(1, index).join("\n"));
+        return {
+          slug, 
+          ...parse(content.slice(1, index).join("\n"))
+        };
       }
     })
   );

components/post.tsx

@@ -1,6 +1,7 @@
 "use client";
 import katex from "katex";
-import { MutableRefObject, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
+import Image, {StaticImageData} from "next/image";
 
 export interface PostMetadata {
   title: string;
@@ -31,10 +32,16 @@ interface BlockEquationProps {
   latex: string;
 }
 
+interface ImageWithCaptionProps {
+  src: string | StaticImageData;
+  alt: string;
+  caption: string;
+}
+
 export function PostHeader({ title, date }: PostHeaderProps) {
   return (
     <div className="mb-4">
-      <h1 className="text-5xl font-bold">{title}</h1>
+      <h1 className="sm:text-5xl text-3xl font-bold">{title}</h1>
       <h4 className="text-sm text-gray-600 dark:text-gray-400">
         {date.toLocaleDateString()}
       </h4>
@@ -44,22 +51,31 @@ export function PostHeader({ title, date }: PostHeaderProps) {
 
 export function Callout({ emoji, children }: CalloutProps) {
   return (
-    <div className="flex flex-row items-center px-6 pb-5 pt-2 border-2 border-stone-900 dark:border-stone-100 my-4 mx-8 bg-stone-300 dark:bg-stone-900">
-      <p className="text-2xl">{emoji}</p>
+    <div className="flex flex-row items-center px-6 pb-5 pt-2 border-2 border-stone-900 dark:border-stone-100 my-4 mx-8 bg-stone-300 dark:bg-stone-900 rounded-2xl">
+      <p className="text-2xl mt-3">{emoji}</p>
       <div className="px-5 col-span-2">{children}</div>
     </div>
   );
 }
 
 export function Example({ children }: ExampleProps) {
   return (
-    <div className="px-6 py-5 border-2 border-blue-500 my-4 mx-8 bg-stone-300 dark:bg-stone-900">
+    <div className="px-6 py-5 border-2 border-blue-500 my-4 sm:mx-8 mx-0 bg-stone-300 dark:bg-stone-900 rounded-2xl">
       <p className="font-bold">Example:</p>
       {children}
     </div>
   );
 }
 
+export function Definition({ children }: ExampleProps) {
+  return (
+    <div className="px-6 py-5 border-2 border-green-500 my-4 sm:mx-8 mx-0 bg-stone-300 dark:bg-stone-900 rounded-2xl">
+      <p className="font-bold">Definition:</p>
+      {children}
+    </div>
+  );
+}
+
 export function BlockEquation({ latex }: BlockEquationProps) {
   const body = useRef<HTMLDivElement>(null);
 
@@ -72,3 +88,14 @@ export function BlockEquation({ latex }: BlockEquationProps) {
   });
   return <div ref={body} className="mt-3 flex flex-row justify-center"></div>;
 }
+
+export function ImageWithCaption({ src, alt, caption }: ImageWithCaptionProps){
+  return (
+    <div className="flex flex-col items-center">
+      <div className="max-w-screen-md text-center sm:my-10 my-3">
+        <Image className="sm:px-5 dark:invert-0 invert mb-2" src={src} alt={alt} /> 
+        <p className="sm:text-sm text-xs dark:text-gray-400 text-gray-600">{caption}</p>
+      </div>
+    </div>
+  );
+}

mdx-components.tsx

@@ -13,8 +13,9 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     h4: ({ children }) => (
       <h4 className="text-xl font-medium mt-2 mb-1">{children}</h4>
     ),
-    ul: ({ children }) => <ul className="list-disc ml-5 mb-3">{children}</ul>,
-    ol: ({ children }) => <ol className="list-decimal	ml-5 mb-3">{children}</ol>,
+    ul: ({ children }) => <ul className="list-disc ml-5">{children}</ul>,
+    ol: ({ children }) => <ol className="list-decimal ml-5">{children}</ol>,
+    li: ({ children }) => <li className="sm:text-base text-sm sm:my-0 my-1">{children}</li>,
     em: ({ children }) => <em className="mr-[0.125rem]">{children}</em>,
     p: ({ children }) => (
       <p className=" sm:text-base text-sm mt-3">{children}</p>