Back to blog

Thursday, September 5, 2024

Blog de prueba

cover

este es un articulo de prueba

codigo

```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
    // Check if the rocket is stable
    if (!isStable()) {
        NoCrash(); // Prevent the crash
    }
}
```
main.js
function isRocketAboutToCrash() {
    // Check if the rocket is stable
    if (!isStable()) {
        NoCrash(); // Prevent the crash
    }
}

###Note

Note:

This is a general note to convey information to the user.

Danger:

This is a danger alert to notify the user of a critical issue.

Warning:

This is a warning alert for issues that require attention.

Success:

This is a success message to inform the user of successful actions.

<Note type="note" title="Note">
  This is a general note to convey information to the user.
</Note>
<Note type="danger" title="Danger">
  This is a danger alert to notify the user of a critical issue.
</Note>
<Note type="warning" title="Warning">
  This is a warning alert for issues that require attention.
</Note>
<Note type="success" title="Success">
  This is a success message to inform the user of successful actions.
</Note>

Preview

1
Step 1: Clone the AriaDocs Repository

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.

2
Step 2: Access the Project Directory

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.

3
Step 3: Install Required Dependencies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.

Code

// In markdown directly use this
<Stepper>
  <StepperItem title="Step 1: Clone the AriaDocs Repository">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
    felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
    dolor in lorem.
  </StepperItem>
  <StepperItem title="Step 2: Access the Project Directory">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
    eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
  </StepperItem>
  <StepperItem title="Step 3: Install Required Dependencies">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
    ipsum nec nulla ultricies porttitor et non justo.
  </StepperItem>
</Stepper>

Preview

// HelloWorld.java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Props

PropTypeDefaultDescription
defaultValuestringnullThe value of the tab that is selected by default.
classNamestring""Additional CSS classes for styling the Tabs component.

Code

<Tabs defaultValue="java" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="java">Java</TabsTrigger>
    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
  </TabsList>
  <TabsContent value="java">
    ```java
    // HelloWorld.java
    public class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```</TabsContent>
  <TabsContent value="typescript">
    ```typescript
    // helloWorld.ts
    function helloWorld(): void {
        console.log("Hello, World!");
    }
    helloWorld();
    ```</TabsContent>
</Tabs>
app
page.tsx
layout.tsx
blog
docs

components

This folder contains all reusable components used throughout the project. It’s structured to categorize components, making it easy to locate and manage UI elements, Markdown customizations, and navigation.

components
ui
markdown
note.tsx
image.tsx
table.tsx
navbar.tsx

styles

This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.

styles
globals.css
syntax.css
overrides.css

contents

This folder stores all Markdown content for the documentation and blog sections, with clear organization by content type. Each Markdown file represents a single piece of content, with frontmatter used for metadata.

contents
docs
getting-started.md
api-reference.md
tutorials
tutorial-1.md
blogs
intro-to-project.md
dev-updates.md

public

This folder holds all static assets, such as images, videos, fonts, and icons. These files are directly accessible via URL, so it’s important to avoid sensitive or private content here.

public
images
logo.png
banner.jpg
icons
videos

lib

This folder contains helper functions and utilities used across the application, such as Markdown parsing and routing logic. These utilities help keep the codebase clean and organized by separating out common functionality.

lib
markdown.ts
routes-config.ts
utils.tsx