jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

next-mdx-remote -> mdx-bundler (#729)

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-09 13:45:38 -05:00
committed by GitHub
parent b7313985db
commit 65416fcc1f
35 changed files with 1624 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/birthday.tsx
View File

@ -1,7 +1,7 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import Video from "../components/video/Video";
import Video from "../components/embeds/Video";
import { TapeIcon } from "../components/icons";
import thumbnail from "../public/static/images/birthday/thumb.png";

2
pages/hillary.tsx
View File

@ -1,7 +1,7 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import Video from "../components/video/Video";
import Video from "../components/embeds/Video";
import thumbnail from "../public/static/images/hillary/thumb.png";

2
pages/leo.tsx
View File

@ -1,7 +1,7 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import Video from "../components/video/Video";
import Video from "../components/embeds/Video";
import thumbnail from "../public/static/images/leo/thumb.png";

126
pages/notes/[slug].tsx
View File

@ -1,90 +1,76 @@
import { MDXRemote } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import { useMemo } from "react";
import dynamic from "next/dynamic";
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 Comments from "../../components/notes/Comments";
import mdxComponents from "../../components/mdxComponents";
import { getNoteData, getNoteSlugs } from "../../lib/parse-notes";
import { getNote, getNoteSlugs } from "../../lib/parse-notes";
import * as config from "../../lib/config";
import type { GetStaticProps, GetStaticPaths } from "next";
// mdx plugins
import rehypeHighlight from "rehype-highlight";
import rehypeExternalLinks from "rehype-external-links";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
const Comments = dynamic(() => import("../../components/notes/Comments"), { ssr: false });
const Note = ({ frontMatter, source }) => (
<>
<NextSeo
title={frontMatter.title}
description={frontMatter.description}
canonical={frontMatter.permalink}
openGraph={{
title: frontMatter.title,
url: frontMatter.permalink,
type: "article",
article: {
authors: [config.authorName],
tags: frontMatter.tags,
publishedTime: frontMatter.date,
modifiedTime: frontMatter.date,
},
images: frontMatter.image && [
{
url: `${config.baseUrl}${frontMatter.image}`,
alt: frontMatter.title,
const Note = ({ frontMatter, mdxSource }) => {
const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
return (
<>
<NextSeo
title={frontMatter.title}
description={frontMatter.description}
canonical={frontMatter.permalink}
openGraph={{
title: frontMatter.title,
url: frontMatter.permalink,
type: "article",
article: {
authors: [config.authorName],
tags: frontMatter.tags,
publishedTime: frontMatter.date,
modifiedTime: frontMatter.date,
},
],
}}
twitter={{
cardType: "summary_large_image",
}}
/>
<ArticleJsonLd
url={frontMatter.permalink}
title={escape(frontMatter.title)}
description={escape(frontMatter.description)}
datePublished={frontMatter.date}
dateModified={frontMatter.date}
images={frontMatter.image && [`${config.baseUrl}${frontMatter.image}`]}
authorName={[config.authorName]}
publisherName={config.siteName}
publisherLogo={`${config.baseUrl}/static/images/me.jpg`}
/>
images: frontMatter.image && [
{
url: `${config.baseUrl}${frontMatter.image}`,
alt: frontMatter.title,
},
],
}}
twitter={{
cardType: "summary_large_image",
}}
/>
<ArticleJsonLd
url={frontMatter.permalink}
title={escape(frontMatter.title)}
description={escape(frontMatter.description)}
datePublished={frontMatter.date}
dateModified={frontMatter.date}
images={frontMatter.image && [`${config.baseUrl}${frontMatter.image}`]}
authorName={[config.authorName]}
publisherName={config.siteName}
publisherLogo={`${config.baseUrl}/static/images/me.jpg`}
/>
<Meta {...frontMatter} />
<Content>
<MDXRemote {...source} components={mdxComponents} />
</Content>
<Comments slug={frontMatter.slug} />
</>
);
<Meta {...frontMatter} />
<Content>
{/* @ts-ignore */}
<MDXComponent components={mdxComponents} />
</Content>
<Comments slug={frontMatter.slug} />
</>
);
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { frontMatter, content } = getNoteData(params.slug as string);
const source = await serialize(content, {
mdxOptions: {
// remarkPlugins: [],
rehypePlugins: [
[rehypeExternalLinks, { target: "_blank", rel: ["noopener", "noreferrer"] }],
[rehypeSlug, {}],
[
rehypeAutolinkHeadings,
{ behavior: "append", properties: { className: "h-anchor" }, content: [], test: ["h2", "h3"] },
],
[rehypeHighlight, {}],
],
},
});
const { frontMatter, mdxSource } = await getNote(params.slug as string);
return {
props: {
frontMatter,
source,
mdxSource,
},
};
};