Merge branch 'trunk' of github.com:codecoolture/codecoolture.com into trunk

Author: sergioalvz

components/Blockquote/style.css

@@ -1,5 +1,5 @@
 .Blockquote {
-  font-size: 1.2em;
+  font-size: var(--fs-l);
   margin-bottom: 1em;
   padding: 0 0.5em;
 

components/Code/style.css

@@ -1,5 +1,4 @@
 .Code {
-  font-size: 85%;
   padding: 0.15em 0.25em;
 
   background-color: var(--c-yellow-2);

components/Codeblock/index.tsx

@@ -1,7 +1,7 @@
 import { classNames } from "@/lib/classNames";
 
-type CodeblockProps = Pick<React.JSX.IntrinsicElements["pre"], "children" | "className">;
+type CodeblockProps = React.JSX.IntrinsicElements["pre"];
 
-export function Codeblock({ children }: CodeblockProps) {
-  return <pre className={classNames("Codeblock")}>{children}</pre>;
+export function Codeblock({ className, ...props }: CodeblockProps) {
+  return <pre className={classNames("Codeblock", className)} {...props} />;
 }

components/Heading/style.css

@@ -7,17 +7,17 @@
 }
 
 .Heading--Jumbo {
-  font-size: var(--fs-xl);
+  font-size: var(--fs-2xl);
   margin-bottom: 0.5em;
 }
 
 .Heading--Xl {
-  font-size: var(--fs-l);
+  font-size: var(--fs-xl);
   margin-bottom: 0.5em;
 }
 
 .Heading--L {
-  font-size: calc(var(--fs-m) * 1.25);
+  font-size: var(--fs-l);
   margin-bottom: 0.5em;
 }
 

layouts/Post/index.tsx

@@ -1,4 +1,5 @@
-import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import { MDXClient } from "next-mdx-remote-client";
+import { type SerializeResult } from "next-mdx-remote-client/serialize";
 
 import { ApiArticle } from "@/cms/api/ApiArticle";
 import { Blockquote } from "@/components/Blockquote";
@@ -20,12 +21,16 @@ import { Footer } from "./components/Footer";
 export interface PostProps {
   breadcrumbs: Array<{ label: string; url?: string }>;
 
-  mdx: MDXRemoteSerializeResult;
+  mdx: SerializeResult;
 
   post: ApiArticle;
 }
 
-export function Post({ breadcrumbs, mdx, post }: PostProps) {
+export function Post({ breadcrumbs, mdx, post }: Readonly<PostProps>) {
+  if ("error" in mdx) {
+    throw mdx.error;
+  }
+
   return (
     <>
       <Seo post={post} />
@@ -38,7 +43,7 @@ export function Post({ breadcrumbs, mdx, post }: PostProps) {
               <Timestamp date={post.date} />
             </header>
 
-            <MDXRemote
+            <MDXClient
               components={{
                 a: Link,
                 blockquote: Blockquote,

package.json

@@ -7,15 +7,14 @@
   "dependencies": {
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
-    "@next/mdx": "16.1.0",
+    "@next/mdx": "16.1.1",
     "@radix-ui/colors": "3.0.0",
     "@vercel/analytics": "1.6.1",
     "fathom-client": "3.7.2",
     "front-matter": "4.0.2",
     "lodash": "4.17.21",
-    "next": "16.1.0",
-    "next-mdx-remote": "5.0.0",
-    "prismjs": "1.30.0",
+    "next": "16.1.1",
+    "next-mdx-remote-client": "^2.1.7",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-icons": "5.5.0",
@@ -30,8 +29,8 @@
     "@types/node": "25.0.3",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "@typescript-eslint/eslint-plugin": "8.50.0",
-    "@typescript-eslint/parser": "8.50.0",
+    "@typescript-eslint/eslint-plugin": "8.50.1",
+    "@typescript-eslint/parser": "8.50.1",
     "cypress": "15.8.1",
     "eslint": "9.39.2",
     "eslint-config-next": "^16.1.0",

pages/blog/[slug].tsx

@@ -1,8 +1,7 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import { MDXRemoteSerializeResult } from "next-mdx-remote";
-import { serialize } from "next-mdx-remote/serialize";
+import { serialize, type SerializeResult } from "next-mdx-remote-client/serialize";
 import React from "react";
-import rehypeHighligh from "rehype-highlight";
+import rehypeHighlight from "rehype-highlight";
 import rehypeUnwrapImages from "rehype-unwrap-images";
 import remarkGfm from "remark-gfm";
 
@@ -13,7 +12,7 @@ import { isDevelopment } from "@/lib/env";
 
 interface ArticleProps {
   article: ApiArticle;
-  mdx: MDXRemoteSerializeResult;
+  mdx: SerializeResult;
 }
 
 export default class Articles extends React.Component<ArticleProps> {
@@ -47,10 +46,14 @@ export const getStaticProps: GetStaticProps<ArticleProps> = async ({ params }) =
     props: {
       article: article.toApiArticle({ cover: "https://codecoolture.com/static/articles/cover.jpg" }),
 
-      mdx: await serialize(article.getContent(), {
-        mdxOptions: {
-          rehypePlugins: [rehypeHighligh, rehypeUnwrapImages],
-          remarkPlugins: [remarkGfm],
+      mdx: await serialize({
+        source: article.getContent(),
+
+        options: {
+          mdxOptions: {
+            rehypePlugins: [rehypeHighlight, rehypeUnwrapImages],
+            remarkPlugins: [remarkGfm],
+          },
         },
       }),
     },

pages/notes/[slug].tsx

@@ -1,25 +1,21 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import { MDXRemoteSerializeResult } from "next-mdx-remote";
-import { serialize } from "next-mdx-remote/serialize";
-import React from "react";
-import rehypeHighligh from "rehype-highlight";
+import rehypeHighlight from "rehype-highlight";
 import rehypeUnwrapImages from "rehype-unwrap-images";
 import remarkGfm from "remark-gfm";
+import { serialize, type SerializeResult } from "next-mdx-remote-client/serialize";
 
 import { ApiArticle } from "@/cms/api/ApiArticle";
 import { getNotesRepository } from "@/cms/repositories";
 import { Post } from "@/layouts/Post";
 import { isDevelopment } from "@/lib/env";
 
-interface NoteProps {
-  mdx: MDXRemoteSerializeResult;
+type NoteProps = {
+  mdx: SerializeResult;
   note: ApiArticle;
-}
+};
 
-export default class Notes extends React.Component<NoteProps> {
-  public render() {
-    return <Post breadcrumbs={[{ label: "Notes", url: "/notes" }]} mdx={this.props.mdx} post={this.props.note} />;
-  }
+export default function Note(props: Readonly<NoteProps>) {
+  return <Post breadcrumbs={[{ label: "Notes", url: "/notes" }]} mdx={props.mdx} post={props.note} />;
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
@@ -47,10 +43,14 @@ export const getStaticProps: GetStaticProps<NoteProps> = async ({ params }) => {
     props: {
       note: note.toApiArticle({ cover: "https://codecoolture.com/static/notes/cover.jpg" }),
 
-      mdx: await serialize(note.getContent(), {
-        mdxOptions: {
-          rehypePlugins: [rehypeHighligh, rehypeUnwrapImages],
-          remarkPlugins: [remarkGfm],
+      mdx: await serialize({
+        source: note.getContent(),
+
+        options: {
+          mdxOptions: {
+            rehypePlugins: [rehypeHighlight, rehypeUnwrapImages],
+            remarkPlugins: [remarkGfm],
+          },
         },
       }),
     },

styles/index.css

@@ -28,12 +28,13 @@
   --ff-sans-serif: var(--font-ibm-plex-sans);
   --ff-monospace: var(--font-ibm-plex-mono);
 
-  --fs-xl: 2.5rem;
-  --fs-l: 1.5rem;
-  --fs-m: 18px;
-  --fs-s: 0.8rem;
-  --fs-xs: 0.6rem;
-  --fs-xxs: 0.5rem;
+  /* Typographic scale based on Perfect Fourth ratio (1.333) */
+  --fs-2xl: 2.369rem;
+  --fs-xl: 1.777rem;
+  --fs-l: 1.333rem;
+  --fs-m: 1rem;
+  --fs-s: 0.75rem;
+  --fs-xs: 0.563rem;
 
   --c-white: #fff;
 }