Fix TS and build errors

apps/techlabblog/app/[slug]/page.tsx

@@ -1,11 +1,12 @@
 import { Section } from "@commons-ui/core";
 
-import { getPost } from "@/techlabblog/lib/data";
 import PostHeader from "@/techlabblog/components/PostHeader";
+import { getPost } from "@/techlabblog/lib/data";
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const postModule = await getPost(params.slug);
-  if (!postModule) {
+
+  if (!(postModule && postModule.frontmatter)) {
     // TODO(kilemensi): 404
     return null;
   }
@@ -17,7 +18,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         py: { xs: 2.5, sm: 5 },
       }}
     >
-      {frontmatter ? <PostHeader {...frontmatter} /> : null}
+      <PostHeader {...frontmatter} />
       <PostContent />
     </Section>
   );

apps/techlabblog/app/layout.tsx

@@ -20,9 +20,14 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const settings = await getSettings();
+  if (!settings) {
+    // TODO(kilemensi): log to sentry
+    return null;
+  }
   const { analytics, connect, primaryNavigation, secondaryNavigation } =
-    await getSettings();
-  // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
+    settings;
+  // TODO(kilemensi): blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
   const { blurWidth, blurHeight, ...logoProps } = logoLight;
   const logo = {
     ...logoProps,

apps/techlabblog/components/PostHeader/PostSxProps.tsx → apps/techlabblog/components/Post/PostProps.tsx

@@ -2,8 +2,8 @@ import type { SxProps, Theme } from "@mui/material/styles";
 
 import { Post } from "@/techlabblog/lib/data";
 
-interface PostSxProps extends Post {
+interface PostProps extends Post {
   sx?: SxProps<Theme>;
 }
 
-export type { PostSxProps };
+export type { PostProps };

apps/techlabblog/components/Post/index.ts

@@ -0,0 +1,3 @@
+import type { PostProps } from "./PostProps";
+
+export type { PostProps };

apps/techlabblog/components/PostHeader/PostHeader.tsx

@@ -1,10 +1,10 @@
 import { Box, Typography } from "@mui/material";
 import React from "react";
 
-import type { PostSxProps } from "./PostSxProps";
+import type { PostProps } from "@/techlabblog/components/Post";
 
 const PostHeader = React.forwardRef(function ArticleHeader(
-  props: PostSxProps,
+  props: PostProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const { publishedDate, excerpt, sx, title } = props;

apps/techlabblog/components/PostHeader/index.ts

@@ -1,5 +1,3 @@
 import PostHeader from "./PostHeader";
-import type { PostSxProps } from "./PostSxProps";
 
-export type { PostSxProps as PostProps };
 export default PostHeader;

apps/techlabblog/components/PostList/PostCard.tsx

@@ -8,17 +8,12 @@ import {
   CardMedia,
   Typography,
 } from "@mui/material";
-import type { SxProps, Theme } from "@mui/material/styles";
 import React from "react";
 
-import { PostFrontMatterProps } from "@/techlabblog/lib/data";
-
-interface PostCardProps extends PostFrontMatterProps {
-  sx?: SxProps<Theme>;
-}
+import type { PostProps } from "@/techlabblog/components/Post";
 
 const PostCard = React.forwardRef(function ArticleCard(
-  props: PostCardProps,
+  props: PostProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const { title, publishedDate, featuredImage, slug, sx } = props;
@@ -65,5 +60,4 @@ const PostCard = React.forwardRef(function ArticleCard(
   );
 });
 
-export type { PostCardProps };
 export default PostCard;

apps/techlabblog/components/PostList/PostList.tsx

@@ -2,11 +2,12 @@ import { Grid } from "@mui/material";
 import type { SxProps, Theme } from "@mui/material/styles";
 import React from "react";
 
-import type { PostCardProps } from "./PostCard";
+import type { PostProps } from "@/techlabblog/components/Post";
+
 import PostCard from "./PostCard";
 
 interface PostListProps {
-  posts?: PostCardProps[];
+  posts?: PostProps[];
   sx?: SxProps<Theme>;
 }
 
@@ -36,4 +37,5 @@ const PostList = React.forwardRef(function PostList(
   );
 });
 
+export type { PostListProps };
 export default PostList;

apps/techlabblog/components/PostList/index.ts

@@ -1,5 +1,5 @@
-import type { PostCardProps } from "./PostCard";
+import type { PostListProps } from "./PostList";
 import PostList from "./PostList";
 
-export type { PostCardProps };
+export type { PostListProps };
 export default PostList;

apps/techlabblog/lib/data/index.ts

@@ -1,6 +1,6 @@
 import { compile, run } from "@mdx-js/mdx";
-import { promises as fs } from "fs";
 import type { PathLike } from "fs";
+import { promises as fs } from "fs";
 import type { MDXModule } from "mdx/types";
 import path from "path";
 import * as runtime from "react/jsx-runtime";
@@ -42,9 +42,11 @@ async function readMdFile<T>(
   const vfile = await compile(fileContent, {
     outputFormat: "function-body",
     providerImportSource: "../../mdx-components.tsx",
+    // @ts-ignore https://mdxjs.com/packages/mdx/#processoroptions
     rehypePlugins,
     remarkPlugins,
   });
+  // @ts-ignore https://mdxjs.com/packages/mdx/#examples-1
   return run(vfile, { ...runtime, useMDXComponents });
 }
 

apps/techlabblog/mdx-components.tsx

@@ -1,12 +1,15 @@
+import type { LinkProps, TypographyProps } from "@mui/material";
+// TODO(kilemensi): Switch to @cui/next/Link
 import { Link, Typography } from "@mui/material";
-import type { Variant } from "@mui/material/styles/createTypography";
 import type { MDXComponents } from "mdx/types";
 
-function createHeading(variant: Variant): HTMLHeadingElement {
-  return ({ children, ...others }) => (
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+function createHeading(level: HeadingLevel) {
+  const Heading = ({ children, ...others }: TypographyProps) => (
     <Typography
       {...others}
-      variant={variant}
+      variant={`h${level}`}
       sx={{
         scrollMarginTop: 48 + 16, // Toolbar height + 1M
         "&>a": {
@@ -15,42 +18,47 @@ function createHeading(variant: Variant): HTMLHeadingElement {
         "& .icon.icon-link": {
           display: "none",
           paddingLeft: 1,
-          // position: "relative"
         },
         "&:hover": {
           "& .icon.icon-link": {
             display: "initial",
           },
         },
         "& .icon.icon-link:before": {
-          // position: "absolute",
           content: '"#"',
         },
       }}
     >
       {children}
     </Typography>
   );
+  Heading.displayName = `Heading${level}`;
+
+  return Heading;
 }
 
-export function useMDXComponents(components?: MDXComponents): MDXComponents {
+const customComponents = {
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  h5: createHeading(5),
+  h6: createHeading(6),
+  p: ({ children, ...others }: TypographyProps) => (
+    <Typography variant="body1" {...others}>
+      {children}
+    </Typography>
+  ),
+  a: ({ children, ...others }: LinkProps) => (
+    <Link underline="none" color="inherit" {...others}>
+      {children}
+    </Link>
+  ),
+};
+
+export function useMDXComponents(components?: MDXComponents) {
   return {
-    h1: createHeading("h1"),
-    h2: createHeading("h2"),
-    h3: createHeading("h3"),
-    h4: createHeading("h4"),
-    h5: createHeading("h5"),
-    h6: createHeading("h6"),
-    p: ({ children, ...others }) => (
-      <Typography variant="body1" {...others}>
-        {children}
-      </Typography>
-    ),
-    a: ({ children, ...others }) => (
-      <Link underline="none" color="inherit" {...others}>
-        {children}
-      </Link>
-    ),
+    ...customComponents,
     ...components,
   };
 }