feat: update blog content and enhance markdown styling

Author: LeadcodeDev

.astro/content-modules.mjs

@@ -1,15 +1,15 @@
 
 export default new Map([
+["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/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/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/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/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/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/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/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/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")]]);
+["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")]]);
 

.astro/data-store.json

@@ -313,6 +313,14 @@ html.dark .prose>.astro-code {
   border-radius: 0.5rem;
 }
 
+.prose p {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: justify;
+  hyphens: auto;
+}
+
+
 .astro-code code {
   display: flex;
   flex-direction: column;

src/assets/css/markdown.css

@@ -8,42 +8,15 @@ authors:
 publishedAt: 2024-01-01:23:00:00
 ---
 
-:read-more{to="/docs/guide/directory-structure/pages/#page-metadata"}
+# Welcome to Explainer
 
-:::code-group labels=[pnpm,,app.dart]
-```bash
-npm install rehype-code-group
-```
+Explainer is a documentation boilerplate designed to help you create beautiful, responsive, and accessible web documentation using [Astro](https://astro.build). This project combines the power of Astro with [Tailwind CSS](https://tailwindcss.com) and [TypeScript](https://www.typescriptlang.org) to provide a smooth development experience.
 
-```rs
-pub struct Foo {
-  pub name: String,
-}
+## Why Explainer?
 
-impl Foo {
-  pub fn new(name: String) -> Self {
-    Self { name }
-  }
-}
-```
-:::
+Documentation is often overlooked, but it's essential for the adoption and effective use of your project.
+Explainer fills an important gap in the technical documentation ecosystem. While Vue has robust solutions like Vitepress, the React ecosystem suffers from a lack of alternatives that don't depend on Next.js. Most documentation frameworks for React are closely tied to Next.js, which can be limiting for many projects.
 
-:read-more{to="/docs/guide/directory-structure/pages/#page-metadata"}
+This is where Astro, and by extension Explainer, particularly shines. Astro offers remarkable flexibility by allowing you to integrate any technological component related to your business. You can easily incorporate React, Vue, Svelte components, or even standard web elements according to your specific needs.
 
-:::code-group labels=[pnpm,app.dart]
-```bash
-npm install rehype-code-group
-```
-
-```rs
-pub struct Foo {
-  pub name: String,
-}
-
-impl Foo {
-  pub fn new(name: String) -> Self {
-    Self { name }
-  }
-}
-```
-:::
+This agnostic approach allows you to create documentation that perfectly aligns with your existing technology stack, without forcing you to adopt a particular ecosystem. Whether you work with React, Vue, or other frameworks, Explainer adapts to your needs rather than the other way around.

src/content/blog/code-tabs.mdx

@@ -9,7 +9,8 @@ const rehypeCodeGroupReact: Plugin<[], Root> = () => {
       parent: any;
       index: number;
       endIndex: number;
-      labels: string[];
+      labels: string[] | null;
+      languages: string[]
     }[] = [];
 
     // First pass: identify code groups
@@ -22,15 +23,24 @@ const rehypeCodeGroupReact: Plugin<[], Root> = () => {
         node.children[0].type === 'text'
       ) {
         const textContent = node.children[0].value;
-        const match = textContent.match(/^:::code-group\s+labels=\[(.*?)\]$/);
 
-        if (match && parent && typeof index === 'number') {
-          // Found a code-group start, now find the end
-          const labels = match[1].split(',').map(label => label.trim());
+        const matchWithoutLabels = textContent.match(/^:::code-group auto$/);
+        const matchWithLabels = textContent.match(/^:::code-group\s+labels=\[(.*?)\]$/);
 
+        if ((matchWithLabels || matchWithoutLabels) && parent && typeof index === 'number') {
           let endIndex = -1;
+
+          let labels = []
+          let languages: string[] = []
           for (let i = index + 1; i < parent.children.length; i++) {
-            const child = parent.children[i];
+            const child = parent.children[i]
+
+            if (child.type === 'element' && child.tagName === 'pre' &&
+              'properties' in child && child.properties?.dataLanguage) {
+              labels.push(child.properties!.dataLanguage as string)
+              languages.push(child.properties!.dataLanguage as string)
+            }
+
             if (
               child.type === 'element' &&
               child.tagName === 'p' &&
@@ -45,74 +55,62 @@ const rehypeCodeGroupReact: Plugin<[], Root> = () => {
           }
 
           if (endIndex !== -1) {
+            if (matchWithLabels) {
+              matchWithLabels[1].split(',').forEach((label, index) => {
+                if (label.length) {
+                  labels[index] = label.trim()
+                }
+              })
+            }
+
             codeGroups.push({
               parent,
               index,
               endIndex,
-              labels
+              labels,
+              languages
             });
           }
         }
       }
     });
 
-    // Second pass: process code groups
     for (let i = codeGroups.length - 1; i >= 0; i--) {
-      const { parent, index, endIndex, labels } = codeGroups[i];
+      const { parent, index, endIndex, labels: providedLabels, languages: providedLanguages } = codeGroups[i];
 
-      // Extract code blocks
       const codeBlocks = parent.children.slice(index + 1, endIndex)
         .filter((node: any) => node.type === 'element' && node.tagName === 'pre');
 
-      const languages: string[] = [];
       const codes: string[] = [];
+      const extractedLabels: string[] = [];
 
       codeBlocks.forEach((codeBlock: Element) => {
         const codeElement = codeBlock.children[0] as Element;
 
         if (codeElement && codeElement.type === 'element' && codeElement.tagName === 'code') {
-          // Get language from class (e.g., "language-js" -> "js")
-          const className = codeElement.properties?.className as string[] || [];
-          const langClass = className.find(cls => cls.startsWith('language-'));
-          const language = langClass ? langClass.replace('language-', '') : '';
-
-          languages.push(language);
-
-          // Preserve the entire HTML output from Shiki including syntax highlighting
           const codeHtml = toHtml(codeBlock);
           codes.push(codeHtml);
         }
       });
 
-      // Create the MDX JSX element
-      if (languages.length > 0 && codes.length > 0) {
+      const finalLabels = providedLabels || extractedLabels;
+      if (providedLanguages.length > 0 && codes.length > 0) {
         const newNode = {
           type: 'mdxJsxFlowElement',
           name: 'CodeGroupWrapper',
           attributes: [
-            { type: 'mdxJsxAttribute', name: 'labels', value: JSON.stringify(labels) },
-            { type: 'mdxJsxAttribute', name: 'languages', value: JSON.stringify(languages) },
+            { type: 'mdxJsxAttribute', name: 'labels', value: JSON.stringify(finalLabels) },
+            { type: 'mdxJsxAttribute', name: 'languages', value: JSON.stringify(providedLanguages) },
             { type: 'mdxJsxAttribute', name: 'codes', value: JSON.stringify(codes) }
           ],
           children: [],
           data: { _mdxExplicitJsx: true }
         };
 
-        // Replace all nodes from start to end with the new component
         parent.children.splice(index, endIndex - index + 1, newNode);
       }
     }
   };
 };
 
-// Helper function to get text content from a node
-function getTextContent(node: any): string {
-  if (node.type === 'text') {
-    return node.value;
-  } else if (node.children) {
-    return node.children.map(getTextContent).join('');
-  }
-  return '';
-}
-
 export default rehypeCodeGroupReact;

src/content/blog/welcome.mdx

@@ -166,8 +166,8 @@ const headingTree = buildHeadingTree(availableHeadings);
 			</div>
 		</div>
 
-		<div class="flex gap-10 w-full">
-			<div class="w-full">
+		<div class="flex justify-between gap-10 w-full">
+			<div class="w-full max-w-4xl">
 				<div class="prose">
 					<Content components={{ CodeGroupWrapper, ReadMoreWrapper }} />
 				</div>