[Devlog 3] Admonitions
Nathan Luong | May 9, 2023 |15
đ¤ What's new?
The blogs will now support Admonitions and Callouts.
đ
Success
Like this one
â ī¸
Or this Contentless warning callout
Regular quotes are still supported with ">"
Regular quotes will have a lower visual hierachy.
Quotes can also be nested like Admonitions
đ Examples
âšī¸
Default Information Callout
This is a default Information callout
đââī¸
Themeless Callout
Themeless with custom icons
đ
Contentless Notes Callout
â
Recursive Rendering within Admonitions
This AI code will destroy humanity:
def dogOrBagel():
return random.choice(["Dog", "Bagel"])
â
Nested Admonitions
âšī¸
Nested Adminition 1
đ
Nested Adminition 2
Pretty neat huh!
đ¤ How was the feature developed?
Custom Remark Plugin
A custom remark plugin was implemented with contingent usage of remarkDirective.
export function remarkDirectiveHelper() {
return (tree) => {
visit(tree, (node) => {
if (
node.type === "textDirective" ||
node.type === "leafDirective" ||
node.type === "containerDirective"
) {
const data = node.data || (node.data = {});
const hast = h(node.name, node.attributes);
data.hName = hast.tagName;
data.hProperties = hast.properties;
}
});
};
}
The custom plugin transforms the following markdown, into the following HTML element:
:::info{title="Information Tag"}
This is a callout
:::
<info>
<p>This is a callout</p>
</info>
The MarkdownComponent.tsx component can then pick up the parsed HTML element and transform it into native div components that are widely supported across browsers.
info: ({
node,
className,
children,
title = "Info",
icon = "âšī¸",
}: CallOutProps) => {
return (
<div
className={`success border-l-[#5d74f9] bg-[#5d74f933] ${className} border-l-[5px]`}
>
<div className="flex w-full">
<h1 className="text-white text-xl">{icon}</h1>
<h1 className="text-xl text-[#addaff]">{title}</h1>
</div>
<div className="indent-5">{children}</div>
</div>
);
},
Metadata such as title, icon, className can be passed as parameters and parsed into the following UI element.
âšī¸
Information Tag
This is a callout