update

examples/demo-section-blog/src/pages/_app.mdx

@@ -1,5 +1,5 @@
-import "@/styles/globals.css";
-import "section-blog-theme/styles.css";
+import "section-blog-theme/styles.css"
+import '@/styles/globals.css'
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }

examples/demo-section-blog/src/pages/index.mdx

@@ -38,8 +38,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis eros vit
 
 Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis dolor, quis lacinia purus enim sed mauris. Nam viverra justo lectus, sit amet ultrices odio sodales eu.
 
+<Space h={"sm"} />
+
+
 ## Icons
 
+
 <div className="flex flex-row justify-between">
   <AlertTriangle />
   <Ban />
@@ -54,6 +58,7 @@ Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis d
   <Braces />
 </div>
 
+
 ## Alert
 
 <Alert>
@@ -65,9 +70,11 @@ Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis d
   </AlertDescription>
 </Alert>
 
+
 ## Tabs
 
 <Tabs defaultValue="npm" className="w-full md:w-[624px]">
+
   <TabsList>
     <TabsTrigger className="mx-1" value="npm">NPM</TabsTrigger>
     <TabsTrigger className="mx-1" value="yarn">Yarn</TabsTrigger>
@@ -91,14 +98,15 @@ Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis d
 
 </Tabs>
 
+<Space h={"sm"} />
+
 ## Code Block
 
 ```js filename="example.js"
 function MyButton() {
   return <button>I'm a button</button>;
 }
 ```
-
 ## Space
 
 <Space h={"sm"} />
@@ -107,6 +115,8 @@ function MyButton() {
 
 <Separator />
 
+<Space h={"sm"} />
+
 ## Follow me
 
 <div className="flex justify-between" id="badges">

examples/demo-section-blog/src/pages/posts/makdown.mdx

@@ -77,37 +77,45 @@ Superscript: X<sub>2</sub>Subscript: O<sup>2</sup>
 2. Item B
 3. Item C
 
-### Tables
+## Tables
 
 First table
+
+First Header  | Second Header
+------------- | -------------
+Content Cell  | Content Cell
+Content Cell  | Content Cell 
 
-| First Header | Second Header |
-| ------------ | ------------- |
-| Content Cell | Content Cell  |
-| Content Cell | Content Cell  |
 
-Second table
+### Second table
 
-| Function name | Description                |
-| ------------- | -------------------------- |
-| `help()`      | Display the help window.   |
-| `destroy()`   | **Destroy your computer!** |
 
-Third table
+| Function name | Description                    |
+| ------------- | ------------------------------ |
+| `help()`      | Display the help window.       |
+| `destroy()`   | **Destroy your computer!**     |
+
+
+### Third table
+
+
+| Item      | Value |
+| --------- | -----:|
+| Computer  | $1600 |
+| Phone     |   $12 |
+| Pipe      |    $1 |
 
-| Item     | Value |
-| -------- | ----: |
-| Computer | $1600 |
-| Phone    |   $12 |
-| Pipe     |    $1 |
 
 Four table
 
+
 | Left-Aligned  | Center Aligned  | Right Aligned |
-| :------------ | :-------------: | ------------: |
-| col 3 is      | some wordy text |         $1600 |
-| col 2 is      |    centered     |           $12 |
-| zebra stripes |    are neat     |            $1 |
+| :------------ |:---------------:| -----:|
+| col 3 is      | some wordy text | $1600 |
+| col 2 is      | centered        |   $12 |
+| zebra stripes | are neat        |    $1 |
+
+
 
 ### GFM task list
 

packages/section-blog-theme/components/ui/alert.tsx

@@ -1,23 +1,23 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/utility/utils";
+import { cn } from "@/utility/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "nx-relative nx-w-full nx-rounded-lg nx-border nx-px-4 nx-py-3 nx-text-sm [&>svg+div]:nx-translate-y-[-3px] [&>svg]:nx-absolute [&>svg]:nx-left-4 [&>svg]:nx-top-4 [&>svg]:nx-text-foreground [&>svg~*]:nx-pl-7",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "nx-bg-background nx-text-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "nx-border-destructive/50 nx-text-destructive dark:nx-border-destructive [&>svg]:nx-text-destructive",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,31 +29,31 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-));
-Alert.displayName = "Alert";
+))
+Alert.displayName = "Alert"
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    className={cn("nx-mb-1 nx-font-medium nx-leading-none nx-tracking-tight", className)}
     {...props}
   />
-));
-AlertTitle.displayName = "AlertTitle";
+))
+AlertTitle.displayName = "AlertTitle"
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    className={cn("nx-text-sm [&_p]:nx-leading-relaxed", className)}
     {...props}
   />
-));
-AlertDescription.displayName = "AlertDescription";
+))
+AlertDescription.displayName = "AlertDescription"
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription }

packages/section-blog-theme/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/utility/utils";
+import { cn } from "@/utility/utils"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -10,25 +10,25 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className,
+      "nx-relative nx-flex nx-h-10 nx-w-10 nx-shrink-0 nx-overflow-hidden nx-rounded-full",
+      className
     )}
     {...props}
   />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("nx-aspect-square nx-h-full nx-w-full", className)}
     {...props}
   />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -37,12 +37,12 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className,
+      "nx-flex nx-h-full nx-w-full nx-items-center nx-justify-center nx-rounded-full nx-bg-muted",
+      className
     )}
     {...props}
   />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarImage, AvatarFallback }

packages/section-blog-theme/components/ui/button.tsx

@@ -1,56 +1,57 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/utility/utils";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/utility/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "nx-inline-flex nx-items-center nx-justify-center nx-whitespace-nowrap nx-rounded-md nx-text-sm nx-font-medium nx-transition-colors focus-visible:nx-outline-none focus-visible:nx-ring-1 focus-visible:nx-ring-ring disabled:nx-pointer-events-none disabled:nx-opacity-50",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "nx-bg-primary nx-text-primary-foreground nx-shadow hover:nx-bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "nx-bg-destructive nx-text-destructive-foreground nx-shadow-sm hover:nx-bg-destructive/90",
         outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "nx-border nx-border-input nx-bg-background nx-shadow-sm hover:nx-bg-accent hover:nx-text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "nx-bg-secondary nx-text-secondary-foreground nx-shadow-sm hover:nx-bg-secondary/80",
+        ghost: "hover:nx-bg-accent hover:nx-text-accent-foreground",
+        link: "nx-text-primary nx-underline-offset-4 hover:nx-underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "nx-h-9 nx-px-4 nx-py-2",
+        sm: "nx-h-8 nx-rounded-md nx-px-3 nx-text-xs",
+        lg: "nx-h-10 nx-rounded-md nx-px-8",
+        icon: "nx-h-9 nx-w-9",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    );
-  },
-);
-Button.displayName = "Button";
+    )
+  }
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }