Common copmponents compilation

In this post, I'll share the MDX components I frequently use in my projects and how they render visually. From interactive buttons and code blocks to custom alert messages and image components, I'll walk you through the design and usage of each one.

Heading 2:

Heading 3...

Heading 4...

Heading 5...

Heading 6...

Paragraphs:

Lorem ipsum odor amet, consectetuer adipiscing elit.

Lorem ipsum odor amet, consectetuer adipiscing elit.

Lorem ipsum odor amet, consectetuer adipiscing elit.

Lorem ipsum odor amet, consectetuer adipiscing elit.

Lorem ipsum odor amet, consectetuer adipiscing elit.

~~Lorem ipsum odor amet, consectetuer adipiscing elit.~~

Blockquotes:

Lorem ipsum odor amet, consectetuer adipiscing elit. Lorem ipsum odor amet, consectetuer adipiscing elit. Lorem ipsum odor amet, consectetuer adipiscing elit.

The problem is not the problem. The problem is your attitude about the problem

Captain Jack Sparrow 🐦

-Pirates of the Caribbean-

Bullet list:

First item
Second item
Third item
1. Indented item
2. Indented item
Fourth item

First item
Second item
Third item
- Indented item
- Indented item
Fourth item

Code block:

component.tsx

export default async function BlogDetailPageView({ params }: PostPageProps) {
	const post = await getPostFromParams(params)
 
	if (!post || !post.published) {
		notFound()
	}
 
	return (
		<div className="relative flex justify-between gap-10">
			<article className="prose max-w-full dark:prose-invert lg:max-w-[calc(100%-220px)]">
				<MDXContent code={post.body} />
			</article>
 
			<aside className="hidden lg:block lg:w-[220px]">
				<div className="sticky top-16 z-10 flex flex-col gap-4">
					<TableOfContent post={post} />
					<PostLikeButton post={post} />
				</div>
			</aside>
		</div>
	)
}

Formatting Links:

I love supporting the EFF.

This is the Markdown Guide.

See the section on code.

Next js

https://nextjs.org/docs

Images:

image-alt

Cloudinary image

Tree view:

page.tsx

layout.tsx

heading.tsx

mdx.tsx

hello-world.mdx

...velite auto genarating json files

blog.json

package.json

next.config.mjs

velite.config.ts

Image list:

Lorem ipsum odor amet, consectetuer adipiscing elit. Nibh ipsum nostra ultricies montes curabitur conubia orci aliquam. Ridiculus venenatis tempor placerat urna turpis sagittis at. Enim nunc adipiscing ridiculus tortor, placerat malesuada metus