added title tags

app/[lang]/posts/[slug]/page.tsx

@@ -1,21 +1,19 @@
 import { useMDXComponent } from "next-contentlayer/hooks";
-import Head from "next/head";
 import PostLayout, {
-  PostForPostLayout,
   RelatedPostForPostLayout,
 } from "../../../components/postLayout";
 import { allPostsNewToOld } from "../../../components/contentLayerAdapter";
 import { Metadata, ResolvingMetadata } from "next";
 import { NoSsr } from "@mui/material";
 import { Locale } from "i18n-config";
-
-type PostForPostPage = PostForPostLayout & {
-  title: string;
-  description: string;
-  body: {
-    code: string;
-  };
-};
+import {
+  MdxH1,
+  MdxH2,
+  MdxH3,
+  MdxH4,
+  MdxH5,
+  MdxH6,
+} from "app/components/mdxHeadings";
 
 export function generateStaticParams({ params }: { params: { lang: Locale } }) {
   const arr = allPostsNewToOld
@@ -49,6 +47,15 @@ export function generateMetadata(
   };
 }
 
+const mdxComponents = {
+  h1: MdxH1,
+  h2: MdxH2,
+  h3: MdxH3,
+  h4: MdxH4,
+  h5: MdxH5,
+  h6: MdxH6,
+};
+
 export default function PostSlugPage({ params }: TProps) {
   const { post, lang, prevPost, nextPost, notFound } = buildProps(
     params.slug,
@@ -71,7 +78,7 @@ export default function PostSlugPage({ params }: TProps) {
               nextPost={nextPost}
               locale={lang}
             >
-              <MDXContent />
+              <MDXContent components={mdxComponents} />
             </PostLayout>
           )}
         </main>
@@ -89,7 +96,7 @@ const buildProps = (slug: string, lang: Locale) => {
     };
   }
   const postFull = filteredPosts[postIndex];
-  const post: PostForPostPage = {
+  const post = {
     title: postFull.title,
     date: postFull.date,
     description: postFull.description,

app/components/mdxHeadings/index.tsx

@@ -0,0 +1,34 @@
+"use client";
+import Link from "next/link";
+import styles from "./mdxheadings.module.scss";
+import { useState, useEffect } from "react";
+
+const MdxHeading = ({ h, id, children }) => {
+  const [hasMounted, setHasMounted] = useState(false);
+  const Header = h;
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  if (!hasMounted) {
+    return undefined;
+  }
+  if (id) {
+    return (
+      <Link className="heading-link" href={`#${id}`}>
+        <Header className={styles.mdx_heading}>
+          <a className="anchor" id={id}></a>
+          {children}
+        </Header>
+      </Link>
+    );
+  }
+  return <h1>{children}</h1>;
+};
+
+// cycle through and make H1 - H6 heading tags to use
+export const MdxH1 = (props) => <MdxHeading h="h1" {...props} />;
+export const MdxH2 = (props) => <MdxHeading h="h2" {...props} />;
+export const MdxH3 = (props) => <MdxHeading h="h3" {...props} />;
+export const MdxH4 = (props) => <MdxHeading h="h4" {...props} />;
+export const MdxH5 = (props) => <MdxHeading h="h5" {...props} />;
+export const MdxH6 = (props) => <MdxHeading h="h6" {...props} />;

app/components/mdxHeadings/mdxheadings.module.scss

@@ -0,0 +1,9 @@
+.mdx_heading:hover::before {
+  content: "#";
+  position: absolute;
+  margin-left: -1.6ch;
+  padding-right: 0.2ch;
+  display: inline;
+  color: #505363;
+  font-size: 100%;
+}

app/components/postBody/PostBody.module.scss

@@ -33,8 +33,13 @@
   }
 
   a {
+    @apply no-underline;
+  }
+
+  a:not(:has(h1, h2, h3, h4, h5, h6)) {
     @apply text-blue-500 dark:text-blue-400 underline hover:no-underline;
   }
+
   code {
     @apply font-mono font-normal;
   }

app/styles/globals.scss

@@ -79,7 +79,7 @@ code {
 a.anchor {
   display: flex;
   position: relative;
-  top: -250px;
+  top: -200px;
   visibility: hidden;
 }
 

contentlayer.config.ts

@@ -1,7 +1,9 @@
 import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeCodeTitles from "rehype-code-titles";
 import rehypeKatex from "rehype-katex";
 import rehypePrism from "rehype-prism-plus";
+import rehypeSlug from "rehype-slug";
 import remarkMath from "remark-math";
 
 export const Post = defineDocumentType(() => ({
@@ -51,6 +53,7 @@ export default makeSource({
   mdx: {
     remarkPlugins: [remarkMath],
     rehypePlugins: [
+      rehypeSlug,
       rehypeCodeTitles,
       [rehypePrism, { ignoreMissing: true }],
       rehypeKatex,

package.json

@@ -32,6 +32,7 @@
     "rehype-code-titles": "^1.2.0",
     "rehype-katex": "^7.0.0",
     "rehype-prism-plus": "^2.0.0",
+    "rehype-slug": "^6.0.0",
     "remark-math": "^6.0.0",
     "sass": "^1.71.1",
     "serve": "^14.2.1",