wip

Author: LeadcodeDev

astro.config.mjs

@@ -15,16 +15,13 @@ import tailwindcss from "@tailwindcss/vite";
 import icon from "astro-icon";
 import rehypeCallouts from "rehype-callouts";
 import rehypeMermaid from "rehype-mermaid";
-import rehypeCodeGroupReact from "./src/lib/plugins/code-group/plugin";
-import rehypeReadMoreReact from "./src/lib/plugins/read-more/plugin";
 import rehypeBlogListReact from "./src/lib/plugins/blog-list/plugin";
-import rehypeBlock from "./src/lib/plugins/parser/plugin";
-import {
-  default as remarkDirective,
-  default as remarkReadMoreDirective,
-} from "./src/lib/plugins/read-more/remark-directive";
+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";
 
 export default defineConfig({
   site: "https://example.com",
@@ -45,15 +42,19 @@ export default defineConfig({
         transformerNotationFocus(),
         transformerNotationErrorLevel(),
         transformerMetaHighlight(),
+        transformerMetaLabel(),
       ],
     },
     syntaxHighlight: {
       type: "shiki",
       excludeLangs: ["mermaid"],
     },
-    remarkPlugins: [remarkDirective, remarkReadMoreDirective],
+    remarkPlugins: [
+      remarkDirectivePkg,
+      remarkBlockParser,
+      remarkReadMoreDirective,
+    ],
     rehypePlugins: [
-      rehypeBlock,
       rehypeMermaid,
       [
         rehypeCallouts,
@@ -65,8 +66,6 @@ export default defineConfig({
           },
         },
       ],
-      rehypeCodeGroupReact,
-      rehypeReadMoreReact,
       rehypeBlogListReact,
     ],
   },

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

@@ -10,26 +10,27 @@ icon: lucide:grid-2x2
 This component allows you to group text elements while providing visual impact.
 
 ```
-:::card-group
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-:::
+::::
 ```
 
-:::card-group {cols=2}
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group{cols=2}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::
+::::
 
 ---
 
@@ -43,57 +44,57 @@ You can customize the number of elements per line by setting the `cols` prop.
 > Default card per line was fixed to 2
 
 ```
-:::card-group {cols=4}
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group{cols=4}
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-:::
+::::
 ```
 
-:::card-group {cols=4}
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group{cols=4}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::
+::::
 
 If the elements cannot be aligned horizontally, they will be moved to the next line.
 
 ```
-:::card-group {cols=2}
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group{cols=2}
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-:::
+::::
 ```
 
-:::card-group {cols=2}
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group{cols=2}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::
+::::
 
 ### Card item
 
@@ -106,23 +107,23 @@ Vous pouvez personaliser chacune de vos cartes en utilisant les props suivantes
 > The cards use the [`iconify`](https://icon-sets.iconify.design/) library to display icons.
 
 ```
-:::card-group
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-  :::card {label="Lorem ipsum dolor sit amet", icon="lucide:user"}
+  :::card{label="Lorem ipsum dolor sit amet" icon="lucide:user"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   :::
-:::
+::::
 ```
 
-:::card-group {cols=2}
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:bell"}
+::::card-group{cols=2}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::card {label="Lorem ipsum dolor sit amet", icon="lucide:user"}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:user"}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
-:::
+::::

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

@@ -110,39 +110,44 @@ impl User {
 
 ## Group code blocks
 
-Group code blocks can be done with the `:::codegroup labels=[...labels]` syntax.
-
 > [!warning] This is a **collapsible** callout
 > Only code blocks can be used in a group.
 
-:::codegroup labels=[Without labels, With labels]
+:::codegroup
 
-```
-:::codegroup auto
-// Code block without labels
-:::
+```rs [foo]
+pub struct User {
+  pub firstname: String,
+  pub lastname: String,
+}
 ```
 
-```
-:::codegroup labels=[first,, third]
-// First code block (named)
-// Second code block
-// Third code block (named)
-:::
+```rs [bar]
+pub struct User {
+  pub firstname: String,
+  pub lastname: String,
+}
+
+impl User {
+  pub fn new(firstname: String, lastname: String) -> Self {
+    Self { firstname, lastname }
+  }
+}
 ```
 
 :::
 
-:::codegroup labels=[struct, impl]
+````md
+:::codegroup
 
-```rust
+```rs [foo]
 pub struct User {
-  pub firstname: String, // [!code highlight]
+  pub firstname: String,
   pub lastname: String,
 }
 ```
 
-```rust
+```rs [bar]
 pub struct User {
   pub firstname: String,
   pub lastname: String,
@@ -156,3 +161,4 @@ impl User {
 ```
 
 :::
+````

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

@@ -13,15 +13,15 @@ Markdown is a lightweight markup language that you can use to add formatting ele
 
 You can create ordered and unordered lists:
 
-:::codegroup labels=[Ordered, Unordered]
+:::codegroup
 
-```mdx
+```mdx [ordered]
 1. First item
 2. Second item
 3. Third item
 ```
 
-```mdx
+```mdx [unordered]
 - First item
 - Second item
 - Third item
@@ -73,19 +73,3 @@ You can create tables using the `|` syntax:
 | -------- | -------- | -------- |
 | Cell 1   | Cell 2   | Cell 3   |
 | Cell 4   | Cell 5   | Cell 6   |
-
-## Read More
-
-You can add a read more link using the `:read-more` syntax:
-
-:::codegroup labels=[Base, With title]
-
-```mdx
-dd
-```
-
-```mdx
-ff
-```
-
-:::

content/index.mdx

@@ -150,12 +150,9 @@ import { Badge } from "@/components/ui/badge";
         Follow our blog for updates and news
       </h2>
       <p class="mt-2 max-w-lg text-pretty text-2xl font-semibold tracking-tight text-muted-foreground">
-        Learn more about our latest developments.
-        We share tips and tricks to help you succeed.og posts and follow us
+        Learn more about our latest developments. We share tips and tricks to
+        help you succeed.og posts and follow us
       </p>
     </div>
   </div>
-
-:::blog-list
-
 </div>

explainer.config.ts

@@ -1,3 +1,6 @@
+import CardGroup from "@/components/content/card-group/card-group.astro";
+import Card from "@/components/content/card-group/card.astro";
+import CodeGroup from "@/components/content/code-group/code-group.astro";
 import { defineExplainerConfig } from "@/utils";
 
 export default defineExplainerConfig({
@@ -38,4 +41,12 @@ export default defineExplainerConfig({
       href: "/blog",
     },
   ],
+  content: {
+    components: {
+      "card-group": CardGroup,
+      card: Card,
+      codegroup: CodeGroup,
+      "code-group": CodeGroup,
+    },
+  },
 });

src/assets/css/markdown.css

@@ -220,11 +220,11 @@ h6 {
     border-spacing: 0;
     border-style: hidden;
     border-radius: 0.5rem !important;
-    border: 1px solid var(--color-border-tab);
+    border: 1px solid var(--color-border) !important;
   }
 
   thead {
-    border: 1px solid var(--color-border-tab);
+    border: 1px solid var(--color-border);
     border-radius: 0.5rem !important;
     background-color: var(--tab-container);
   }
@@ -234,23 +234,23 @@ h6 {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     text-align: left;
-    border-right: 1px solid var(--ui-border-muted);
-    border-bottom: 1px solid var(--ui-border-muted);
-    border-top: 1px solid var(--ui-border-muted);
+    border-right: 1px solid var(--ui-border);
+    border-bottom: 1px solid var(--ui-border);
+    border-top: 1px solid var(--ui-border);
   }
 
   tbody tr {
-    border: 1px solid var(--color-border-tab);
+    border: 1px solid var(--color-border);
   }
 
   tbody td {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     text-align: left;
     vertical-align: top;
-    border-right: 1px solid var(--ui-border-muted);
-    border-bottom: 1px solid var(--ui-border-muted);
-    border-left: 1px solid var(--ui-border-muted);
+    border-right: 1px solid var(--ui-border);
+    border-bottom: 1px solid var(--ui-border);
+    border-left: 1px solid var(--ui-border);
   }
 
   img {
@@ -295,7 +295,7 @@ html.dark .prose > .astro-code {
   border-radius: 0.5rem;
   font-size: 0.875rem;
   position: relative;
-  border: 1px solid var(--color-border-tab) !important;
+  border: 1px solid var(--color-border) !important;
 
   .line {
     padding-left: 1.5rem !important;