Merge pull request #9 from skunichetty/posts

Deploying to AWS Lambda Post

app/layout.tsx

@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { Inter_Tight } from "next/font/google";
 import "./globals.css";
 import "katex/dist/katex.min.css";
+import '@wooorm/starry-night/style/both';
 
 const inter_tight = Inter_Tight({ subsets: ["latin"] });
 

app/posts/erm-p1/page.mdx

@@ -74,10 +74,10 @@ Steps 1 and 2 above form the process of **training** a machine learning model -
 To classify new data, the model just has to identify any patterns that exist, and then predict the label that correspond to those patterns.
 
 <ImageWithCaption 
-    className="dark:invert-0 invert"
     src={training_image}
     alt="Comparison of workflows between traditional and machine learning approaches."
     caption="Comparison of label prediction strategies, contrasting traditional and machine learning based approaches. Image by author." 
+    allowInvert={true}
 />
 
 The central requirement to training a model is access to historical data, which we collect as part of a training dataset. A **training dataset** is a collection of **training examples** (also called **examples**) that describe past occurrences of the phenomena we'd like to make a prediction for. Each example in the training dataset has two parts:
@@ -117,6 +117,7 @@ The goal in a supervised machine learning task is to _train_ the model to recogn
     src={model_image}
     alt="Summary of supervised machine learning approach in flow-diagram form."
     caption="Overview of Supervised Machine Learning setup. Image by author."
+    allowInvert={true}
 />
 
 In the next part (coming soon), we'll formalize this intuition into mathematics and discuss how ERM presents us with a framework that can describe the training process behind a machine learning algorithm.

components/post.tsx

@@ -35,12 +35,18 @@ interface ImageWithCaptionProps {
   src: string | StaticImageData;
   alt: string;
   caption: string;
+  allowInvert: boolean;
+}
+
+interface PostHeroProps {
+  src: string | StaticImageData;
+  alt: string;
 }
 
 export function PostHeader({ title, date }: PostHeaderProps) {
   return (
     <div className="mb-4">
-      <h1 className="sm:text-5xl text-3xl font-bold">{title}</h1>
+      <h1 className="sm:text-5xl text-3xl font-bold mb-2">{title}</h1>
       <h4 className="text-sm text-gray-600 dark:text-gray-400">
         {date.toLocaleDateString()}
       </h4>
@@ -50,8 +56,8 @@ 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 rounded-2xl">
-      <p className="text-2xl mt-3">{emoji}</p>
+    <div className="flex flex-row items-center sm:px-6 px-2 pb-5 pt-2 border-2 border-stone-900 dark:border-stone-100 my-4 sm:mx-8 mx-2 bg-stone-300 dark:bg-stone-900 rounded-2xl overflow-x-scroll">
+      <p className="sm:block hidden text-2xl mt-3">{emoji}</p>
       <div className="px-5 col-span-2">{children}</div>
     </div>
   );
@@ -88,13 +94,23 @@ 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){
+export function ImageWithCaption({ src, alt, caption, allowInvert }: 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} /> 
+        <Image className={`sm:px-5 mb-2 ${!allowInvert || "dark:invert-0 invert"}`} src={src} alt={alt} /> 
         <p className="sm:text-sm text-xs dark:text-gray-400 text-gray-600">{caption}</p>
       </div>
     </div>
   );
 }
+
+export function PostHero({ src, alt}: PostHeroProps){
+  return (
+    <div className="flex flex-col items-center">
+      <div className="text-center sm:my-10 my-3">
+        <Image className="mb-2" src={src} alt={alt} /> 
+      </div>
+    </div>
+  );
+}

mdx-components.tsx

@@ -1,25 +1,26 @@
 import type { MDXComponents } from "mdx/types";
 import Link from "next/link";
-import { PostHeader, Callout, BlockEquation, Example, Definition, ImageWithCaption } from "@/components/post";
+import Image from "next/image";
+import { PostHeader, Callout, BlockEquation, Example, Definition, ImageWithCaption, PostHero } from "@/components/post";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     h1: ({ id, children }) => (
-      <h1 id={id} className="text-3xl font-bold mt-5 mb-1">{children}</h1>
+      <h1 id={id} className="text-3xl font-bold mt-10 mb-1">{children}</h1>
     ),
     h2: ({ id, children }) => (
-      <h2 id={id} className="text-2xl font-bold mt-3 mb-1">{children}</h2>
+      <h2 id={id} className="text-2xl font-bold mt-7 mb-1">{children}</h2>
     ),
-    h3: ({ id, children }) => <h3 className="text-2xl mt-3 mb-1">{children}</h3>,
+    h3: ({ id, children }) => <h3 className="text-xl font-bold mt-5 mb-1">{children}</h3>,
     h4: ({ id, children }) => (
-      <h4 id={id} className="text-xl font-medium mt-2 mb-1">{children}</h4>
+      <h4 id={id} className="text-xl font-medium mt-4 mb-1">{children}</h4>
     ),
-    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>,
+    ul: ({ children }) => <ul className="list-disc ml-5 my-2">{children}</ul>,
+    ol: ({ children }) => <ol className="list-decimal ml-5 my-2">{children}</ol>,
+    li: ({ children }) => <li className="sm:text-base text-sm sm:my-0 my-1 mx-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>
+      <p className="sm:text-base text-sm mt-3">{children}</p>
     ),
     a: (props) => (
       <Link
@@ -30,10 +31,15 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         {props.children}
       </Link>
     ),
-    code: ({ children }) => (
-      <code className="text-sm p-1 bg-stone-850 dark:bg-stone-800 rounded-md text-blue-500">
-        {children}
-      </code>
+    code: (props) => (
+      <code className={`rounded-md ${props.className}`}> 
+         {props.children}
+       </code>
+    ),
+    pre: ({children}) => (
+       <pre className="sm:text-base text-xs dark:bg-stone-800 bg-stone-100 rounded-md p-4 mx-1 mt-3 overflow-x-scroll">
+         {children}
+       </pre>
     ),
     blockquote: ({ children }) => (
       <blockquote className="border-l-4 pl-4 dark:text-gray-400 text-gray-600 border-stone-900 dark:border-stone-100">
@@ -46,6 +52,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Example,
     Definition,
     ImageWithCaption,
+    Image,
+    PostHero,
     ...components,
   };
 }

next.config.mjs

@@ -2,8 +2,10 @@ import createMDX from "@next/mdx";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import remarkMath from "remark-math";
+import remarkToc from "remark-toc";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";
+import rehypeStarryNight from 'rehype-starry-night'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -18,16 +20,26 @@ function remarkMdxFrontmatterWithOptions() {
   });
 }
 
+function remarkTocWithOptions() {
+  return remarkToc({
+    tight: true,
+    maxDepth: 2,
+    ordered: true
+  });
+}
+
 const withMDX = createMDX({
   options: {
     remarkPlugins: [
       remarkFrontmatter,
       remarkMdxFrontmatterWithOptions,
       remarkMath,
+      remarkTocWithOptions 
     ],
     rehypePlugins: [
         rehypeKatex,
         rehypeSlug,
+        rehypeStarryNight
     ],
   },
 });

package.json

@@ -14,6 +14,7 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.3",
     "@types/mdx": "^2.0.13",
+    "@wooorm/starry-night": "^3.4.0",
     "gray-matter": "^4.0.3",
     "gsap": "^3.12.5",
     "katex": "^0.16.10",
@@ -25,9 +26,11 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-katex": "^7.0.0",
     "rehype-slug": "^6.0.0",
+    "rehype-starry-night": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-math": "^6.0.0",
-    "remark-mdx-frontmatter": "^4.0.0"
+    "remark-mdx-frontmatter": "^4.0.0",
+    "remark-toc": "^9.0.0"
   },
   "devDependencies": {
     "@types/katex": "^0.16.7",