import { useMemo } from "react";
import dynamic from "next/dynamic";
import Head from "next/head";
import { NextSeo, ArticleJsonLd } from "next-seo";
import { escape } from "html-escaper";
import { getMDXComponent } from "mdx-bundler/client";
import Content from "../../components/Content";
import Meta from "../../components/notes/Meta";
import CustomLink from "../../components/embeds/Link";
import CustomCode from "../../components/embeds/Code";
import { getNote, getNoteSlugs } from "../../lib/parse-notes";
import * as config from "../../lib/config";
import type { GetStaticProps, GetStaticPaths } from "next";
import type { NoteType } from "../../types";
const Comments = dynamic(() => import("../../components/notes/Comments"), { ssr: false });
const Note = ({ frontMatter, mdxSource }: NoteType) => {
const customComponents = {
a: CustomLink,
code: CustomCode,
};
const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
return (
<>
{/* preload here instead of Comments.tsx -- by the time it's loaded dynamically, there's no real point anymore */}
{frontMatter.noComments !== true && (
)}
{/* @ts-ignore */}
{frontMatter.noComments !== true && }
);
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { frontMatter, mdxSource } = await getNote(params.slug as string);
return {
props: {
frontMatter,
mdxSource,
},
};
};
export const getStaticPaths: GetStaticPaths = async () => {
const paths = getNoteSlugs().map((slug) => ({ params: { slug } }));
return {
paths,
fallback: false,
};
};
export default Note;