@docubook/create 2.0.0-beta.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",

package/src/dist/app/page.tsx

@@ -1,6 +1,6 @@
 import { buttonVariants } from "@/components/ui/button";
 import { page_routes } from "@/lib/routes-config";
-import { ArrowRightIcon, FileJson, GitCommitHorizontal, SquarePlay } from "lucide-react";
+import { ArrowRightIcon, Terminal, AppWindow, FileText } from "lucide-react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import AnimatedShinyText from "@/components/ui/animated-shiny-text";
@@ -25,7 +25,7 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 Release v2.0.0-beta.2</span>
+              <span>🚀 Release v2.0.0</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>
@@ -65,29 +65,29 @@ export default function Home() {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
         <Card className="px-2 py-6">
           <CardHeader className="flex flex-row justify-center items-center gap-3">
-            <FileJson className="size-6 text-primary" />
-            <CardTitle className="text-xl">docu.json</CardTitle>
+            <Terminal className="size-6 text-primary" />
+            <CardTitle className="text-xl">Advanced Code Blocks</CardTitle>
           </CardHeader>
           <CardContent>
-            <p>Edit the docu.json file to change the content in the header, footer and sidebar.</p>
+            <p>Write amazing code blocks with syntax highlighting, line numbers, and line highlighting.</p>
           </CardContent>
         </Card>
         <Card className="px-2 py-6">
           <CardHeader className="flex flex-row justify-center items-center gap-3">
-            <GitCommitHorizontal className="size-6 text-primary" />
-            <CardTitle className="text-xl">CHANGELOG.md</CardTitle>
+            <AppWindow className="size-6 text-primary" />
+            <CardTitle className="text-xl">Custom Components</CardTitle>
           </CardHeader>
           <CardContent>
-            <p>Manage changes to each version of your application in the CHANGELOG.md file.</p>
+            <p>Enhance your docs with custom components like Notes, Accordions, and Tabs.</p>
           </CardContent>
         </Card>
         <Card className="px-2 py-6">
           <CardHeader className="flex flex-row justify-center items-center gap-3">
-            <SquarePlay className="size-6 text-primary" />
-            <CardTitle className="text-xl">Docu Play</CardTitle>
+            <FileText className="size-6 text-primary" />
+            <CardTitle className="text-xl">Markdown Excellence</CardTitle>
           </CardHeader>
           <CardContent>
-            <p>Easy to write interactive markdown content with a playground.</p>
+            <p>Full support for GFM including tables, lists, and images for rich documentation.</p>
           </CardContent>
         </Card>
       </div>

package/src/dist/components/markdown/AccordionMdx.tsx

@@ -38,7 +38,7 @@ const Accordion: React.FC<AccordionProps> = ({
             <button
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center gap-2 w-full px-4 h-12 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 cursor-pointer"
+                className="flex items-center gap-2 w-full px-4 py-3 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 cursor-pointer text-start"
             >
                 <ChevronRight
                     className={cn(
@@ -47,7 +47,7 @@ const Accordion: React.FC<AccordionProps> = ({
                     )}
                 />
                 {Icon && <Icon className="text-foreground w-4 h-4 flex-shrink-0" />}
-                <h3 className="font-medium text-base text-foreground !m-0 leading-none">{title}</h3>
+                <h3 className="font-medium text-base text-foreground !m-0">{title}</h3>
             </button>
 
             {isOpen && (

package/src/dist/components/ui/table.tsx

@@ -6,10 +6,10 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="relative w-full overflow-auto border border-border rounded-lg">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm !my-0", className)}
       {...props}
     />
   </div>
@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b bg-muted", className)} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 

package/src/dist/contents/docs/getting-started/development/index.mdx

@@ -19,6 +19,7 @@ example of ordered list format :
 
 #### Heading 4
 
+## Code Block
 Below is an example of how to write a code block :
 
 ````plaintext
@@ -32,6 +33,18 @@ function isRocketAboutToCrash() {
 ```
 ````
 
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+
+## Note
 example note :
 ```plaintext
 <Note type="note" title="Note">
@@ -39,6 +52,19 @@ example note :
 </Note>
 ```
 
+<Note type="warning" title="Warning">
+  every page that is indexed in a folder will have an `index.mdx` file with metadata :
+  ```plaintext
+---
+title : Introduction
+description : overview or synopsis of a project
+date : 10-12-2024
+image : example-img.png
+---
+  ```
+</Note>
+
+## Image
 displaying an image in markdown format :
 
 ```plaintext
@@ -50,14 +76,17 @@ render as :
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 
-<Note type="warning" title="Warning">
-  every page that is indexed in a folder will have an `index.mdx` file with metadata :
-  ```plaintext
----
-title : Introduction
-description : overview or synopsis of a project
-date : 10-12-2024
-image : example-img.png
----
-  ```
-</Note>
+## Table
+
+### Default Table
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `title` | The title of the table | `string` | - |
+| `description` | The description of the table | `string` | - |
+
+### Table with Alignment
+| Left | Center | Right |
+| :--- | :---: | ---: |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+| Left-aligned text | Center-aligned text | Right-aligned text |

package/src/dist/contents/docs/getting-started/introduction/index.mdx

@@ -19,6 +19,7 @@ example of ordered list format :
 
 #### Heading 4
 
+## Code Block
 Below is an example of how to write a code block :
 
 ````plaintext
@@ -32,6 +33,18 @@ function isRocketAboutToCrash() {
 ```
 ````
 
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+
+## Note
 example note :
 ```plaintext
 <Note type="note" title="Note">
@@ -39,17 +52,6 @@ example note :
 </Note>
 ```
 
-displaying an image in markdown format :
-
-```plaintext
-![Alt text for the image](/images/example-img.png)
-```
-
-render as :
-![Alt text for the image](/images/example-img.png)
-
-For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
-
 <Note type="warning" title="Warning">
   every page that is indexed in a folder will have an `index.mdx` file with metadata :
   ```plaintext
@@ -62,13 +64,29 @@ image : example-img.png
   ```
 </Note>
 
-<Accordion title="Code Block" defaultOpen={true} icon="Code">
-    ```javascript:main.js showLineNumbers {3-4}
-    function isRocketAboutToCrash() {
-        // Check if the rocket is stable
-        if (!isStable()) {
-            NoCrash(); // Prevent the crash
-        }
-    }
-    ```
-</Accordion>
+## Image
+displaying an image in markdown format :
+
+```plaintext
+![Alt text for the image](/images/example-img.png)
+```
+
+render as :
+![Alt text for the image](/images/example-img.png)
+
+For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
+
+## Table
+
+### Default Table
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `title` | The title of the table | `string` | - |
+| `description` | The description of the table | `string` | - |
+
+### Table with Alignment
+| Left | Center | Right |
+| :--- | :---: | ---: |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+| Left-aligned text | Center-aligned text | Right-aligned text |

package/src/dist/contents/docs/getting-started/quick-start-guide/index.mdx

@@ -19,6 +19,7 @@ example of ordered list format :
 
 #### Heading 4
 
+## Code Block
 Below is an example of how to write a code block :
 
 ````plaintext
@@ -32,6 +33,18 @@ function isRocketAboutToCrash() {
 ```
 ````
 
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+
+## Note
 example note :
 ```plaintext
 <Note type="note" title="Note">
@@ -39,6 +52,19 @@ example note :
 </Note>
 ```
 
+<Note type="warning" title="Warning">
+  every page that is indexed in a folder will have an `index.mdx` file with metadata :
+  ```plaintext
+---
+title : Introduction
+description : overview or synopsis of a project
+date : 10-12-2024
+image : example-img.png
+---
+  ```
+</Note>
+
+## Image
 displaying an image in markdown format :
 
 ```plaintext
@@ -50,14 +76,17 @@ render as :
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 
-<Note type="warning" title="Warning">
-  every page that is indexed in a folder will have an `index.mdx` file with metadata :
-  ```plaintext
----
-title : Introduction
-description : overview or synopsis of a project
-date : 10-12-2024
-image : example-img.png
----
-  ```
-</Note>
+## Table
+
+### Default Table
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `title` | The title of the table | `string` | - |
+| `description` | The description of the table | `string` | - |
+
+### Table with Alignment
+| Left | Center | Right |
+| :--- | :---: | ---: |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+| Left-aligned text | Center-aligned text | Right-aligned text |

package/src/dist/lib/markdown.ts

@@ -31,6 +31,7 @@ interface TextNode extends Node {
 
 // custom components imports
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell } from "@/components/ui/table";
 import Pre from "@/components/markdown/PreMdx";
 import Note from "@/components/markdown/NoteMdx";
 import { Stepper, StepperItem } from "@/components/markdown/StepperMdx";
@@ -54,20 +55,22 @@ const components = {
   TabsContent,
   TabsList,
   TabsTrigger,
-  pre: Pre,
-  Note,
-  Stepper,
-  StepperItem,
-  img: Image,
-  a: Link,
-  Outlet,
   Youtube,
   Tooltip,
   Card,
   Button,
   Accordion,
+  AccordionGroup,
   CardGroup,
   Kbd,
+  // Table Components
+  table: Table,
+  thead: TableHeader,
+  tbody: TableBody,
+  tfoot: TableFooter,
+  tr: TableRow,
+  th: TableHead,
+  td: TableCell,
   // Release Note Components
   Release,
   Changes,
@@ -75,7 +78,13 @@ const components = {
   File,
   Files,
   Folder,
-  AccordionGroup
+  pre: Pre,
+  Note,
+  Stepper,
+  StepperItem,
+  img: Image,
+  a: Link,
+  Outlet,
 };
 
 // helper function to handle rehype code titles, since by default we can't inject into the className of rehype-code-titles
@@ -110,12 +119,12 @@ const handleCodeTitles = () => (tree: Node) => {
           nextElement.properties = {};
         }
         nextElement.properties['data-title'] = titleNode.value;
-        
+
         // Remove the original title div
         parent.children.splice(index, 1);
-        
+
         // Return the same index to continue visiting from the correct position
-        return index; 
+        return index;
       }
     }
   });
@@ -241,7 +250,7 @@ const preProcess = () => (tree: Node) => {
     if (element?.type === "element" && element?.tagName === "pre" && element.children) {
       const [codeEl] = element.children as Element[];
       if (codeEl.tagName !== "code" || !codeEl.children?.[0]) return;
-      
+
       const textNode = codeEl.children[0] as TextNode;
       if (textNode.type === 'text' && textNode.value) {
         element.raw = textNode.value;

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",