feat: implement callout

Author: LeadcodeDev

astro.config.mjs

@@ -18,7 +18,6 @@ import rehypeMermaid from "rehype-mermaid";
 import rehypeBlogListReact from "./src/lib/plugins/blog-list/plugin";
 import remarkBlockParser from "./src/lib/plugins/parser/plugin";
 import remarkDirectivePkg from "remark-directive";
-import remarkReadMoreDirective from "./src/lib/plugins/read-more/remark-directive";
 import sitemap from "@astrojs/sitemap";
 import { buildDocIntegration } from "./src/hooks/build-doc";
 import transformerMetaLabel from "./src/lib/plugins/shiki/transformer-meta-label";
@@ -49,11 +48,7 @@ export default defineConfig({
       type: "shiki",
       excludeLangs: ["mermaid"],
     },
-    remarkPlugins: [
-      remarkDirectivePkg,
-      remarkBlockParser,
-      remarkReadMoreDirective,
-    ],
+    remarkPlugins: [remarkDirectivePkg, remarkBlockParser],
     rehypePlugins: [
       rehypeMermaid,
       [

content/docs/documentation/foundamentals/components/_default.mdx

@@ -10,4 +10,5 @@ collection:
   - markdown
   - text
   - card
+  - callout
 ---

content/docs/documentation/foundamentals/components/alert.mdx

@@ -0,0 +1,96 @@
+---
+title: Callout
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+permalink: callout
+icon: lucide:tag
+---
+
+# Callouts
+
+## Basic callouts
+
+### Info
+
+:::callout{variant="info"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+
+```
+:::callout{variant="info"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+```
+
+---
+
+### Success
+
+:::callout{variant="success"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+
+```
+:::callout{variant="success"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+```
+
+---
+
+### Warning
+
+:::callout{variant="warning"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+
+```
+:::callout{variant="warning"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+```
+
+---
+
+### Danger
+
+:::callout{variant="danger"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+
+```
+:::callout{variant="danger"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+```
+
+---
+
+## Children
+
+:::callout
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```rs [main.rs]
+pub fn main() {
+    println!("Hello, world!");
+}
+```
+
+:::
+
+````
+:::callout
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```rs [main.rs]
+pub fn main() {
+    println!("Hello, world!");
+}
+```
+
+:::
+````

content/docs/documentation/foundamentals/components/callout.mdx

@@ -86,6 +86,24 @@ pub struct User {
 }
 ```
 
+## Include embedded code blocks
+
+```rs [entities/user.rs]
+pub struct User {
+  pub firstname: String,
+  pub lastname: String,
+}
+```
+
+````
+```rs [entities/user.rs]
+pub struct User {
+  pub firstname: String,
+  pub lastname: String,
+}
+```
+````
+
 ---
 
 ## Line modifiers

content/docs/documentation/foundamentals/components/code-block.mdx

@@ -33,36 +33,27 @@ You can create ordered and unordered lists:
 
 You can create links using the `[text](url)` syntax:
 
-```mdx
+```mdx [Simple link]
 [Google](https://www.google.com)
 ```
 
 ## Images
 
 You can add images using the `![alt text](image.png)` syntax:
 
-```mdx
+```mdx [Simple image]
 ![Explainer Logo](https://placehold.co/600x400)
 ```
 
 ![Explainer Logo](https://placehold.co/600x400)
 
-## Code Blocks
-
-You can add code blocks using the ``` syntax:
-
-```dart
-print("Hello, World!")
-```
-
-> [!NOTE]
-> See more about [code blocks](/docs/syntax/code-blocks)
+---
 
 ## Tables
 
 You can create tables using the `|` syntax:
 
-```mdx
+```mdx [Simple table]
 | Header 1 | Header 2 | Header 3 |
 | -------- | -------- | -------- |
 | Cell 1   | Cell 2   | Cell 3   |

content/docs/documentation/foundamentals/components/markdown.mdx

@@ -24,12 +24,26 @@ Markdown supports various text formatting options:
 
 You can create headers from level 1 (largest) to level 6 (smallest):
 
-```mdx
+```mdx [h1]
 # Header 1
+```
+
+# Header 1
+
+```mdx [h2]
+## Header 2
+```
 
 ## Header 2
 
+```mdx [h3]
+### Header 3
+```
+
 ### Header 3
 
+```mdx [h4]
 #### Header 4
 ```
+
+#### Header 4

content/docs/documentation/foundamentals/components/text.mdx

@@ -23,9 +23,7 @@ To organise the documentation, each section or complete documentation must be co
 
 Each documentation folder must contain a configuration file named `_default.md`. This file defines the metadata for the section, and its front matter must follow the following structure :
 
-:::codegroup labels=[Tree]
-
-```
+```plain [Tree]
 ├── content/
 │  ├── [...page]
 │  └── docs/
@@ -35,13 +33,11 @@ Each documentation folder must contain a configuration file named `_default.md`.
 │        └── second_file.mdx
 ```
 
-:::
-
 The configuration file is structured in the form of standardised `frontmatter`, which allows various information to be defined.
 
-:::codegroup labels=[_example.mdx, Collection]
+:::codegroup
 
-```mdx
+```mdx [example]
 ---
 label: My documentation
 directory: my_doc
@@ -54,7 +50,7 @@ collection:
 ---
 ```
 
-```ts
+```ts [Collection]
 export const docDefaultSchema = z.object({
   label: z.string(),
   description: z.string(),
@@ -82,9 +78,9 @@ export const docDefaultSchema = z.object({
 
 The other Markdown files (`.md` or `.mdx`) in the same folder represent the individual pages of the documentation. The front matter of each of these files must comply with the following schema :
 
-:::codegroup labels=[first_file.mdx, Collection]
+:::codegroup
 
-```mdx
+```mdx [first_file.mdx]
 ---
 title: First file
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -95,7 +91,7 @@ visibility:
 ---
 ```
 
-```typescript
+```typescript [Collection]
 export const docSchema = z.object({
   title: z.string(),
   description: z.string(),

content/docs/documentation/foundamentals/docs.mdx

@@ -9,25 +9,29 @@ icon: lucide:signpost
 
 Routing is an important part of any content-driven website, allowing you to create dynamic or static pages for your site.
 
-> [!important]
-> The `blog` and `docs` folders are special collections; they should be considered separate from routing.
+:::callout{variant="info"}
+The `blog` and `docs` folders are special collections; they should be considered separate from routing.
+:::
 
 ---
 
 ## Routing Basics
 
 All of your routes must be defined within the `content/` folder.
 
-> [!note]
-> Each file representing a new page must be written in markdown format `md` or `mdx`.
+:::callout{variant="info"}
+Each file representing a new page must be written in markdown format `md` or `mdx`.
+:::
 
 Let us consider the desire to create a new `/about` page within our site, we should create an `about` markdown file in the `content/` folder.
 
-:::codegroup labels=[about.mdx]
+:::codegroup
 
-```
+```plain [Url]
 https://{hostname}/about
+```
 
+```plain [Tree]
 ├── content/
 │ └── about.mdx
 ```
@@ -41,15 +45,15 @@ https://{hostname}/about
 It is possible to create nested routes by creating a folder with the same name as the route in the `content/` folder.
 In this example we will create two nested routes `/about` and `/hello/world`.
 
-:::codegroup labels=[about.mdx, world.mdx]
+:::codegroup
 
-```
+```plain [about.mdx]
 ├── content/
 │   └── about/
 │      └── index.mdx
 ```
 
-```
+```plain [world.mdx]
 ├── content/
 │   └── hello/
 │      └── world.mdx