Loading...
Content coming right up. Please wait a moment.
Back
Hello, World!
Proof of concept post to verify the integrity of the content layer and components within notes.
🥳
I'm officially building a blog!
This first post is a test to verify the integrity of components and overall framework of the blog's content layer.
Below, I've included a handful of Components and general example content to be used within the Blog. These serve as a test to verify the integrity and demonstrate the flexibility of the framework and components used to build the blog.
Testing Components
Quote
Styling is done with a mix of custom
CSS, ContentLayer, and TailwindCSS.
Content within all blog posts is being parsed and converted from MDX to HTML and React components via ContentLayer.
Code Blocks
Below is an example of a code block in
mdxand then my customCodecomponent.
This is an inline code block in markdown.
I wrapped the markdown code block with a
<span>and some CSS styling to make it easier to read.
js const example = 'Hello, World!'; console.log(example);
This is an example with my custom Code component.
I built a custom component that's able to render code and add styling by language. It also includes a custom copy button to copy the code to the clipboard.
Copy
1const example = 'Hello, World!';
2console.log(example);Callout
Below is an example of a
Calloutcomponent. You may have noticed its debut at the TOP of this post.
📣
This is a
Callout component!It can be customized with children, styles and an emoji.
Pros and Cons Cards
Pros In a ProsCard...
Lorem ipsum dolor sit amet consectetur!
Lorem ipsum dolor sit amet!
Lorem ipsum adipisicing.
Cons in a ConsCard...
Lorem ipsum dolor sit amet consectetur!
Lorem ipsum amet set fleur!
Lorem ipsum adipisicing.
Example image: RoundedImage
