Last active
May 3, 2023 16:12
-
-
Save ManishBisht777/c35d2c02b2c4ad80769fe8c72ed6559c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default makeSource({ | |
contentDirPath: "blogs", | |
documentTypes: [Post], | |
mdx: { | |
remarkPlugins: [remarkGfm], | |
rehypePlugins: [ | |
rehypeSlug, | |
[ | |
rehypePrettyCode, | |
{ | |
theme: "github-dark", | |
onVisitLine(node) { | |
// Prevent lines from collapsing in `display: grid` mode, and allow empty | |
if (node.children.length === 0) { | |
node.children = [{ type: "text", value: " " }] | |
} | |
}, | |
onVisitHighlightedLine(node) { | |
node.properties.className.push("line--highlighted") | |
}, | |
onVisitHighlightedWord(node) { | |
node.properties.className = ["word--highlighted"] | |
}, | |
}, | |
], | |
[ | |
rehypeAutolinkHeadings, | |
{ | |
properties: { | |
className: ["subheading-anchor"], | |
ariaLabel: "Link to section", | |
}, | |
}, | |
], | |
], | |
}, | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[data-rehype-pretty-code-fragment] code { | |
@apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black; | |
counter-reset: line; | |
box-decoration-break: clone; | |
} | |
[data-rehype-pretty-code-fragment] .line { | |
@apply px-4 py-1; | |
} | |
[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before { | |
counter-increment: line; | |
content: counter(line); | |
display: inline-block; | |
width: 1rem; | |
margin-right: 1rem; | |
text-align: right; | |
color: gray; | |
} | |
[data-rehype-pretty-code-fragment] .line--highlighted { | |
@apply bg-slate-300 bg-opacity-10; | |
} | |
[data-rehype-pretty-code-fragment] .line-highlighted span { | |
@apply relative; | |
} | |
[data-rehype-pretty-code-fragment] .word--highlighted { | |
@apply rounded-md bg-slate-300 bg-opacity-10 p-1; | |
} | |
[data-rehype-pretty-code-title] { | |
@apply mt-4 py-2 px-4 text-sm font-medium; | |
} | |
[data-rehype-pretty-code-title] + pre { | |
@apply mt-0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import Image from "next/image"; | |
import { useMDXComponent } from "next-contentlayer/hooks"; | |
import { twMerge } from "tailwind-merge"; | |
function cn(...inputs: ClassValue[]) { | |
return twMerge(clsx(inputs)); | |
} | |
const components = { | |
h1: ({ className, ...props }) => ( | |
<h1 | |
className={cn( | |
"mt-2 scroll-m-20 text-4xl font-bold tracking-tight", | |
className | |
)} | |
{...props} | |
/> | |
), | |
h2: ({ className, ...props }) => ( | |
<h2 | |
className={cn( | |
"mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0", | |
className | |
)} | |
{...props} | |
/> | |
), | |
h3: ({ className, ...props }) => ( | |
<h3 | |
className={cn( | |
"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight", | |
className | |
)} | |
{...props} | |
/> | |
), | |
h4: ({ className, ...props }) => ( | |
<h4 | |
className={cn( | |
"mt-8 scroll-m-20 text-xl font-semibold tracking-tight", | |
className | |
)} | |
{...props} | |
/> | |
), | |
h5: ({ className, ...props }) => ( | |
<h5 | |
className={cn( | |
"mt-8 scroll-m-20 text-lg font-semibold tracking-tight", | |
className | |
)} | |
{...props} | |
/> | |
), | |
h6: ({ className, ...props }) => ( | |
<h6 | |
className={cn( | |
"mt-8 scroll-m-20 text-base font-semibold tracking-tight", | |
className | |
)} | |
{...props} | |
/> | |
), | |
a: ({ className, ...props }) => ( | |
<a | |
className={cn("font-medium underline underline-offset-4", className)} | |
{...props} | |
/> | |
), | |
p: ({ className, ...props }) => ( | |
<p | |
className={cn("leading-7 [&:not(:first-child)]:mt-6", className)} | |
{...props} | |
/> | |
), | |
ul: ({ className, ...props }) => ( | |
<ul className={cn("my-6 ml-6 list-disc", className)} {...props} /> | |
), | |
ol: ({ className, ...props }) => ( | |
<ol className={cn("my-6 ml-6 list-decimal", className)} {...props} /> | |
), | |
li: ({ className, ...props }) => ( | |
<li className={cn("mt-2", className)} {...props} /> | |
), | |
blockquote: ({ className, ...props }) => ( | |
<blockquote | |
className={cn( | |
"mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground", | |
className | |
)} | |
{...props} | |
/> | |
), | |
img: ({ | |
className, | |
alt, | |
...props | |
}: React.ImgHTMLAttributes<HTMLImageElement>) => ( | |
// eslint-disable-next-line @next/next/no-img-element | |
<img className={cn("rounded-md border", className)} alt={alt} {...props} /> | |
), | |
hr: ({ ...props }) => <hr className="my-4 md:my-8" {...props} />, | |
table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => ( | |
<div className="my-6 w-full overflow-y-auto"> | |
<table className={cn("w-full", className)} {...props} /> | |
</div> | |
), | |
tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => ( | |
<tr | |
className={cn("m-0 border-t p-0 even:bg-muted", className)} | |
{...props} | |
/> | |
), | |
th: ({ className, ...props }) => ( | |
<th | |
className={cn( | |
"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right", | |
className | |
)} | |
{...props} | |
/> | |
), | |
td: ({ className, ...props }) => ( | |
<td | |
className={cn( | |
"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right", | |
className | |
)} | |
{...props} | |
/> | |
), | |
pre: ({ className, ...props }) => ( | |
<pre | |
className={cn( | |
"mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4", | |
className | |
)} | |
{...props} | |
/> | |
), | |
code: ({ className, ...props }) => ( | |
<code | |
className={cn( | |
"relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm", | |
className | |
)} | |
{...props} | |
/> | |
), | |
Image, | |
}; | |
interface MdxProps { | |
code: string; | |
} | |
export function Mdx({ code }: MdxProps) { | |
const Component = useMDXComponent(code); | |
return ( | |
<div className="mdx"> | |
<Component components={components} /> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment