feat: implement read-more functionality and enhance code group component

Author: LeadcodeDev

.astro/content-modules.mjs

@@ -1,14 +1,15 @@
 
 export default new Map([
-["src/content/blog/welcome.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fblog%2Fwelcome.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/blog.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fblog.mdx&astroContentModuleFlag=true")],
+["src/content/docs/framework/docs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fdocs.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/configuration.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fconfiguration.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/getting-started.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fgetting-started.mdx&astroContentModuleFlag=true")],
-["src/content/docs/framework/docs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fdocs.mdx&astroContentModuleFlag=true")],
-["src/content/docs/framework/project-structure.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fproject-structure.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/installation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Finstallation.mdx&astroContentModuleFlag=true")],
-["src/content/docs/syntax/alert.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Falert.mdx&astroContentModuleFlag=true")],
+["src/content/docs/framework/project-structure.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fproject-structure.mdx&astroContentModuleFlag=true")],
+["src/content/blog/code-tabs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fblog%2Fcode-tabs.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/syntax/code-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fcode-block.mdx&astroContentModuleFlag=true")],
-["src/content/docs/syntax/markdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fmarkdown.mdx&astroContentModuleFlag=true")],
-["src/content/docs/syntax/text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Ftext.mdx&astroContentModuleFlag=true")]]);
+["src/content/blog/welcome.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fblog%2Fwelcome.mdx&astroContentModuleFlag=true")],
+["src/content/docs/syntax/alert.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Falert.mdx&astroContentModuleFlag=true")],
+["src/content/docs/syntax/text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Ftext.mdx&astroContentModuleFlag=true")],
+["src/content/docs/syntax/markdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fmarkdown.mdx&astroContentModuleFlag=true")]]);
 

.astro/data-store.json

@@ -15,12 +15,19 @@ import tailwindcss from '@tailwindcss/vite';
 import icon from "astro-icon";
 import rehypeCallouts from 'rehype-callouts';
 import rehypeMermaid from 'rehype-mermaid';
+import remarkDirective from 'remark-directive';
 import rehypeCodeGroupReact from './src/lib/plugins/code-group/plugin';
+import rehypeReadMoreReact from './src/lib/plugins/read-more/plugin';
+import remarkReadMoreDirective from './src/lib/plugins/read-more/remark-directive';
 
 // https://astro.build/config
 export default defineConfig({
   output: 'static',
-  integrations: [react(), mdx(), icon()],
+  integrations: [
+    react(),
+    mdx(),
+    icon()
+  ],
 
   markdown: {
     shikiConfig: {
@@ -41,17 +48,21 @@ export default defineConfig({
       type: 'shiki',
       excludeLangs: ['mermaid'],
     },
+    remarkPlugins: [
+      remarkDirective,
+      remarkReadMoreDirective
+    ],
     rehypePlugins: [
       rehypeMermaid,
       [rehypeCallouts, {
         customClassNames: {
-
           calloutClass: "callout",
           calloutTitleClass: "callout-title",
           calloutContentClass: "callout-content",
         }
       }],
-      rehypeCodeGroupReact
+      rehypeCodeGroupReact,
+      rehypeReadMoreReact
     ],
   },
 

astro.config.mjs

@@ -22,6 +22,7 @@
     "@tailwindcss/vite": "^4.0.17",
     "@types/hast": "^3.0.4",
     "@types/luxon": "^3.6.2",
+    "@types/mdast": "^4.0.4",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "astro": "^5.5.5",
@@ -31,8 +32,10 @@
     "clsx": "^2.1.1",
     "hast": "^1.0.0",
     "hast-util-to-html": "^9.0.5",
+    "hastscript": "^9.0.1",
     "lucide-react": "^0.485.0",
     "luxon": "^3.6.1",
+    "mdast": "^3.0.0",
     "mermaid": "^11.6.0",
     "motion": "^12.6.3",
     "playwright": "^1.51.1",
@@ -42,6 +45,7 @@
     "rehype-callouts": "^2.0.2",
     "rehype-code-group": "^0.2.4",
     "rehype-mermaid": "^3.0.0",
+    "remark-directive": "^4.0.0",
     "remark-toc": "^9.0.0",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.17",

package.json

@@ -0,0 +1,24 @@
+import { CodeGroup } from "../lib/plugins/code-group/code-group-component";
+
+interface Props {
+  labels: string;
+  languages: string;
+  codes: string;
+}
+
+const { labels, languages, codes } = Astro.props;
+
+<div class="code-group-wrapper">
+  <CodeGroup 
+    client:idle
+    labels={labels}
+    languages={languages}
+    codes={codes}
+  />
+</div>
+
+<style>
+  .code-group-wrapper {
+    margin-bottom: 1.5rem;
+  }
+</style> 

pnpm-lock.yaml

@@ -0,0 +1,7 @@
+import CodeGroupWrapper from './CodeGroupWrapper.astro';
+
+export const components = {
+  CodeGroupWrapper,
+};
+
+export default components; 

src/components/CodeGroupWrapper.astro

@@ -0,0 +1,23 @@
+import { components } from './MDXComponents';
+
+interface Props {
+  components?: Record<string, any>;
+}
+
+const { components: propComponents } = Astro.props;
+const allComponents = { ...components, ...propComponents };
+
+<div class="mdx-content">
+  <slot />
+</div>
+
+<style>
+  .mdx-content {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+</style>
+
+<script>
+  // Add any client-side initialization for MDX components if needed
+</script> 

src/components/MDXComponents.tsx

@@ -0,0 +1,96 @@
+---
+title: "Code Tabs"
+description: "Utiliser les onglets de gestionnaires de paquets dans vos documentations"
+permalink: "code-tabs"
+authors:
+  - leadcode_dev
+---
+
+Les onglets de code sont un excellent moyen de présenter différentes versions du même code, comme des commandes pour différents gestionnaires de paquets ou des implémentations dans différents langages de programmation.
+
+## Exemple simple
+
+Voici comment installer un package avec différents gestionnaires de paquets :
+
+:::code-group labels=[npm,pnpm,yarn,bun]
+```bash
+npm install astro
+```
+
+```bash
+pnpm add astro
+```
+
+```bash
+yarn add astro
+```
+
+```bash
+bun add astro
+```
+:::
+
+## Exemple avec différents langages
+
+Voici comment définir une classe dans différents langages :
+
+:read-more{to="/docs/guide/code-tabs"}
+
+:::code-group labels=[javascript,typescript,python,rust]
+```javascript
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+  
+  greet() {
+    return `Hello, my name is ${this.name}`;
+  }
+}
+```
+
+```typescript
+class Person {
+  constructor(
+    private name: string, 
+    private age: number
+  ) {}
+  
+  greet(): string {
+    return `Hello, my name is ${this.name}`;
+  }
+}
+```
+
+```python
+class Person:
+    def __init__(self, name, age):
+        self.name = name
+        self.age = age
+    
+    def greet(self):
+        return f"Hello, my name is {self.name}"
+```
+
+```rust
+struct Person {
+    name: String,
+    age: u32,
+}
+
+impl Person {
+    fn new(name: String, age: u32) -> Self {
+        Person { name, age }
+    }
+    
+    fn greet(&self) -> String {
+        format!("Hello, my name is {}", self.name)
+    }
+}
+```
+:::
+
+## Conclusion
+
+L'utilisation des onglets de code rend votre documentation plus propre et plus facile à lire, permettant aux utilisateurs de choisir la version qui correspond à leur environnement.