docu v 1.11.0
This commit is contained in:
Wildan Nursahidan
@@ -1,133 +0,0 @@
|
||||
---
|
||||
title: "Getting Started with DocuBook Components"
|
||||
description: "Learn how to leverage the power of DocuBook components to create dynamic and interactive documentation. This guide explores the key components available and how to integrate them into your documentation workflow."
|
||||
date: 31-12-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: mywildancloud
|
||||
username: Wildan nrs
|
||||
handleUrl: "https://github.com/mywildancloud"
|
||||
cover: "https://img.freepik.com/free-vector/spring-landscape-scene_23-2148860692.jpg?t=st=1735654206~exp=1735657806~hmac=b65033387b5519b48c72a87333cf1a5d2462de255865104c612500161b248a8a&w=2000"
|
||||
---
|
||||
|
||||
## Introduction to DocuBook Components
|
||||
|
||||
DocuBook provides a robust set of components that enable developers to build dynamic, user-friendly, and visually appealing documentation. These components are designed to enhance the user experience, making it easier for readers to navigate, understand, and interact with the content.
|
||||
|
||||
In this guide, we’ll explore the core components available in DocuBook and how you can integrate them into your documentation projects. For a complete list of components, visit the [official documentation](https://www.docubook.pro/docs/getting-started/components).
|
||||
|
||||
## Key Components and Their Usage
|
||||
|
||||
### 1. **Stepper**
|
||||
|
||||
#### Preview
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook 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>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook 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>
|
||||
```
|
||||
|
||||
### 2. **Note**
|
||||
|
||||
#### Preview
|
||||
|
||||
<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>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<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>
|
||||
```
|
||||
|
||||
### 3. **Code Block**
|
||||
|
||||
#### Preview
|
||||
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Code
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}```
|
||||
````
|
||||
|
||||
## How to Integrate Components into Your Workflow
|
||||
|
||||
1. **Install DocuBook**: Ensure you have DocuBook set up in your project. Refer to the [installation guide](https://www.docubook.pro/docs/getting-started).
|
||||
2. **Import Components**: Import the required components into your MDX files.
|
||||
3. **Customize**: Tailor the components to fit your documentation needs using props and styles.
|
||||
4. **Test and Deploy**: Preview your documentation locally and deploy it to your preferred hosting platform.
|
||||
|
||||
## Conclusion
|
||||
|
||||
DocuBook components are powerful tools for creating engaging and functional documentation. By incorporating these components, you can provide a seamless and intuitive experience for your users.
|
||||
|
||||
Ready to get started? Explore the full range of components in the [DocuBook documentation](https://www.docubook.pro/docs/getting-started/components) and elevate your documentation today!
|
||||
|
||||
🚀📚
|
||||
@@ -1,170 +0,0 @@
|
||||
---
|
||||
title: "Building a Recursive File System with React: A Deep Dive"
|
||||
description: "Explore how to create a recursive file system in React. This blog post provides a comprehensive guide on building a file system where folders and files can be nested, added, renamed, and deleted."
|
||||
date: 02-09-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: nisabmohd
|
||||
username: Nisab Mohd
|
||||
handleUrl: "https://github.com/nisabmohd"
|
||||
cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-84.jpg?w=826"
|
||||
---
|
||||
|
||||
## Introduction: Crafting a Recursive File System in React
|
||||
|
||||
In modern web development, creating interactive and dynamic file systems is a common requirement. Whether for managing documents, organizing projects, or building complex data structures, having a robust file system is crucial. In this blog post, we’ll explore how to build a recursive file system in React, focusing on nested folders and files that can be added, renamed, or deleted.
|
||||
|
||||
Check out the project on [GitHub](https://github.com/nisabmohd/recursive-file-system-react) for a complete implementation.
|
||||
|
||||
## Project Overview
|
||||
|
||||
The Recursive File System project is designed to simulate a file management system where users can interact with folders and files dynamically. It supports the following features:
|
||||
|
||||
- **Adding New Folders and Files**: Create new folders and files within any existing folder.
|
||||
- **Renaming Items**: Change the name of folders and files.
|
||||
- **Deleting Items**: Remove folders and files from the file system.
|
||||
- **Nested Structure**: Handle nested folders and files to create a hierarchical view.
|
||||
|
||||
## Key Features and Implementation
|
||||
|
||||
### 1. Recursive Data Structure
|
||||
|
||||
The core of the project is a recursive data structure that represents the file system. Each folder can contain other folders or files, and each file or folder has properties such as `id`, `name`, and `children` (for folders).
|
||||
|
||||
Here’s a basic structure for a folder:
|
||||
|
||||
```jsx
|
||||
const folder = {
|
||||
id: "1",
|
||||
name: "Documents",
|
||||
type: "folder",
|
||||
children: [
|
||||
{ id: "2", name: "Resume.pdf", type: "file" },
|
||||
{ id: "3", name: "CoverLetter.docx", type: "file" },
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Components
|
||||
|
||||
The project includes several key components to handle different aspects of the file system:
|
||||
|
||||
- **FileExplorer**: Displays the entire file system and handles rendering folders and files.
|
||||
|
||||
```jsx
|
||||
// src/components/FileExplorer.js
|
||||
import React, { useState } from "react";
|
||||
import Folder from "./Folder";
|
||||
import File from "./File";
|
||||
|
||||
const FileExplorer = () => {
|
||||
const [files, setFiles] = useState(initialData); // initialData is your recursive data structure
|
||||
|
||||
const addItem = (parentId, type) => {
|
||||
// Logic to add a folder or file
|
||||
};
|
||||
|
||||
const renameItem = (id, newName) => {
|
||||
// Logic to rename a folder or file
|
||||
};
|
||||
|
||||
const deleteItem = (id) => {
|
||||
// Logic to delete a folder or file
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{files.map((file) =>
|
||||
file.type === "folder" ? (
|
||||
<Folder
|
||||
key={file.id}
|
||||
folder={file}
|
||||
onAdd={addItem}
|
||||
onRename={renameItem}
|
||||
onDelete={deleteItem}
|
||||
/>
|
||||
) : (
|
||||
<File
|
||||
key={file.id}
|
||||
file={file}
|
||||
onRename={renameItem}
|
||||
onDelete={deleteItem}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileExplorer;
|
||||
```
|
||||
|
||||
- **Folder**: Renders folders and handles nested items.
|
||||
|
||||
```jsx
|
||||
// src/components/Folder.js
|
||||
import React from "react";
|
||||
import FileExplorer from "./FileExplorer";
|
||||
|
||||
const Folder = ({ folder, onAdd, onRename, onDelete }) => {
|
||||
return (
|
||||
<div>
|
||||
<h3>{folder.name}</h3>
|
||||
<button onClick={() => onAdd(folder.id, "folder")}>Add Folder</button>
|
||||
<button onClick={() => onAdd(folder.id, "file")}>Add File</button>
|
||||
<button onClick={() => onRename(folder.id, "New Name")}>Rename</button>
|
||||
<button onClick={() => onDelete(folder.id)}>Delete</button>
|
||||
{folder.children && <FileExplorer files={folder.children} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Folder;
|
||||
```
|
||||
|
||||
- **File**: Renders individual files with options to rename and delete.
|
||||
|
||||
```jsx
|
||||
// src/components/File.js
|
||||
import React from "react";
|
||||
|
||||
const File = ({ file, onRename, onDelete }) => {
|
||||
return (
|
||||
<div>
|
||||
<p>{file.name}</p>
|
||||
<button onClick={() => onRename(file.id, "New Name")}>Rename</button>
|
||||
<button onClick={() => onDelete(file.id)}>Delete</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default File;
|
||||
```
|
||||
|
||||
### 3. Handling State and Actions
|
||||
|
||||
State management is handled using React hooks like `useState` to manage the file system data. Actions such as adding, renaming, and deleting items update the state accordingly.
|
||||
|
||||
```jsx
|
||||
const [files, setFiles] = useState(initialData);
|
||||
|
||||
const addItem = (parentId, type) => {
|
||||
// Logic to add a new item to the file system
|
||||
};
|
||||
|
||||
const renameItem = (id, newName) => {
|
||||
// Logic to rename an existing item
|
||||
};
|
||||
|
||||
const deleteItem = (id) => {
|
||||
// Logic to delete an item
|
||||
};
|
||||
```
|
||||
|
||||
## Conclusion: Building a Dynamic File System with React
|
||||
|
||||
Creating a recursive file system in React is a powerful way to manage hierarchical data and provide a dynamic user experience. By leveraging React's component-based architecture and state management, you can build interactive file systems that handle complex nested structures efficiently.
|
||||
|
||||
Check out the full implementation on [GitHub](https://github.com/nisabmohd/recursive-file-system-react) and explore how these concepts can be applied to your own projects. Happy coding!
|
||||
|
||||
🚀📁
|
||||
@@ -1,98 +0,0 @@
|
||||
---
|
||||
title: "Building a Dynamic Documentation Platform with DocuBook: A Deep Dive"
|
||||
description: "Explore how DocuBook simplifies the creation of interactive and dynamic documentation platforms. This blog post provides insights into its features, changelog updates, and how it enhances the documentation experience."
|
||||
date: 31-12-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: mywildancloud
|
||||
username: Wildan nrs
|
||||
handleUrl: "https://github.com/mywildancloud"
|
||||
cover: "https://img.freepik.com/free-photo/high-angle-designer-working-floor_23-2149930985.jpg?t=st=1735654027~exp=1735657627~hmac=2cd2d48f845d1691a28992aec65a3bc11b8e28680d06eeff218e8a773fffc36e&w=2000"
|
||||
---
|
||||
|
||||
## Introduction: Why DocuBook Stands Out in Documentation Platforms
|
||||
|
||||
In the fast-evolving world of web development, creating and maintaining well-structured documentation is crucial. Whether you're working on open-source projects, internal tools, or client deliverables, a robust documentation platform can make all the difference. Enter **DocuBook**—a modern, interactive, and dynamic platform designed to streamline the documentation process.
|
||||
|
||||
In this blog post, we’ll explore the key features of DocuBook, highlight recent updates from its [changelog](https://www.docubook.pro/changelog), and discuss why it’s an essential tool for developers and teams.
|
||||
|
||||
## Key Features of DocuBook
|
||||
|
||||
### 1. Interactive Documentation
|
||||
|
||||
DocuBook offers a seamless user experience with interactive elements such as expandable sections, live code previews, and integrated search functionality. This ensures that users can quickly find and engage with the content they need.
|
||||
|
||||
### 2. Dynamic Changelog Management
|
||||
|
||||
The changelog feature in DocuBook allows teams to document updates, bug fixes, and feature rollouts in a structured format. This helps maintain transparency and keeps users informed about the latest developments.
|
||||
|
||||
### 3. Customizable Themes
|
||||
|
||||
DocuBook supports theme customization, enabling you to align the documentation's appearance with your brand identity. From color schemes to typography, you have full control over the design.
|
||||
|
||||
### 4. Built-in Versioning
|
||||
|
||||
With built-in versioning, DocuBook makes it easy to manage multiple versions of your documentation. This is particularly useful for projects that evolve over time or have distinct releases.
|
||||
|
||||
### 5. Markdown and MDX Support
|
||||
|
||||
Leverage the simplicity of Markdown and the flexibility of MDX to create rich, component-based documentation. DocuBook seamlessly integrates with modern frameworks like React for a smooth development experience.
|
||||
|
||||
## Recent Updates: Highlights from the Changelog
|
||||
|
||||
## [v1.3.0] - 2024-12-31
|
||||
|
||||
> Release Note Feature to Make it Easier to Write Changelogs
|
||||
|
||||
|
||||
|
||||
### Added
|
||||
|
||||
- New Release Note Feature
|
||||
- New Layout for Changelog page
|
||||
- New Changelog page
|
||||
- Add Release Note Component
|
||||
- Easily write release notes directly from the CHANGELOG.md file
|
||||
- TOC for versioning
|
||||
- Write with the markdown tag
|
||||
- Add lib / changelog.ts
|
||||
|
||||
### Improved
|
||||
|
||||
- Improvement Responsive feature image for Version Entry
|
||||
- Improvement Layout for changelog page
|
||||
- Improvement Padding on mobile devices
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix og:image not showing on Page.tsx
|
||||
|
||||
### Removed
|
||||
|
||||
- Remove excessive padding
|
||||
- Only use containers of md size
|
||||
- Remove Logo on Footer
|
||||
|
||||
For a full list of updates, visit the [changelog](https://www.docubook.pro/changelog).
|
||||
|
||||
## Why Choose DocuBook?
|
||||
|
||||
### Streamlined Collaboration
|
||||
|
||||
DocuBook enables teams to collaborate effectively by providing tools for inline comments, suggestions, and version control. This ensures that everyone stays on the same page.
|
||||
|
||||
### Developer-Friendly
|
||||
|
||||
With support for modern frameworks, DocuBook simplifies the integration process. Whether you’re using React, Next.js, or plain HTML, DocuBook adapts to your workflow.
|
||||
|
||||
### Scalability
|
||||
|
||||
Designed to handle projects of any size, DocuBook scales effortlessly, making it ideal for both small teams and enterprise-level organizations.
|
||||
|
||||
## Conclusion: Elevate Your Documentation Game with DocuBook
|
||||
|
||||
DocuBook is more than just a documentation tool; it’s a platform that empowers developers and teams to create, manage, and maintain high-quality documentation with ease. Its rich feature set, combined with regular updates, makes it a must-have for any project.
|
||||
|
||||
Ready to transform your documentation experience? Explore more at [DocuBook](https://www.docubook.pro) and start building documentation that stands out.
|
||||
|
||||
🚀📚
|
||||
@@ -1,121 +0,0 @@
|
||||
---
|
||||
title: "Using React Server Components and Server Actions in Next.js"
|
||||
description: "Explore how to leverage React Server Components and Server Actions in Next.js to build modern, efficient web applications. Learn how these features enhance performance and simplify server-side logic."
|
||||
date: 05-09-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: reactdev
|
||||
username: React Dev
|
||||
handleUrl: "https://github.com/reactdev"
|
||||
- avatar: "https://ui.shadcn.com/avatars/01.png"
|
||||
handle: nextjsguru
|
||||
username: Next.js Guru
|
||||
handleUrl: "https://github.com/nextjsguru"
|
||||
cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-85.jpg?w=826"
|
||||
---
|
||||
|
||||
## Introduction: Enhancing Next.js with React Server Components
|
||||
|
||||
Next.js has evolved to include powerful features like React Server Components and Server Actions, which offer a new way to handle server-side rendering and logic. These features provide a more efficient and streamlined approach to building web applications, allowing you to fetch data and render components on the server without compromising performance.
|
||||
|
||||
In this blog post, we'll explore how to use React Server Components and Server Actions in Next.js with practical examples and code snippets.
|
||||
|
||||
## What Are React Server Components?
|
||||
|
||||
React Server Components (RSC) are a new type of component introduced by React that allows you to render components on the server. This approach helps reduce the amount of JavaScript sent to the client and enhances performance by offloading rendering work to the server.
|
||||
|
||||
### Benefits of React Server Components
|
||||
|
||||
- **Improved Performance**: By rendering on the server, you reduce the amount of client-side JavaScript and improve load times.
|
||||
- **Enhanced User Experience**: Faster initial page loads and smoother interactions.
|
||||
- **Simplified Data Fetching**: Fetch data on the server and pass it directly to components.
|
||||
|
||||
### Example: Creating a Server Component
|
||||
|
||||
Here’s a basic example of a React Server Component in a Next.js application:
|
||||
|
||||
```jsx
|
||||
// app/components/UserProfile.server.js
|
||||
import { getUserData } from "../lib/api";
|
||||
|
||||
export default async function UserProfile() {
|
||||
const user = await getUserData();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{user.name}</h1>
|
||||
<p>{user.email}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `UserProfile` is a server component that fetches user data on the server and renders it.
|
||||
|
||||
## What Are Server Actions?
|
||||
|
||||
Server Actions are functions that run on the server in response to user interactions or other events. They allow you to handle server-side logic, such as form submissions or API requests, directly from your React components.
|
||||
|
||||
### Benefits of Server Actions
|
||||
|
||||
- **Simplified Server Logic**: Write server-side code directly in your components.
|
||||
- **Enhanced Security**: Handle sensitive operations on the server rather than the client.
|
||||
- **Improved Performance**: Reduce client-side JavaScript and offload tasks to the server.
|
||||
|
||||
### Example: Using Server Actions
|
||||
|
||||
Here’s how you can use Server Actions in a Next.js application to handle form submissions:
|
||||
|
||||
```jsx
|
||||
// app/actions/submitForm.js
|
||||
import { saveFormData } from "../lib/api";
|
||||
|
||||
export async function submitForm(data) {
|
||||
await saveFormData(data);
|
||||
return { success: true };
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
// app/components/ContactForm.js
|
||||
"use client";
|
||||
|
||||
import { submitForm } from "../actions/submitForm";
|
||||
|
||||
export default function ContactForm() {
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.target);
|
||||
const result = await submitForm(Object.fromEntries(formData));
|
||||
if (result.success) {
|
||||
alert("Form submitted successfully!");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" name="name" required />
|
||||
</label>
|
||||
<label>
|
||||
Email:
|
||||
<input type="email" name="email" required />
|
||||
</label>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `submitForm` is a server action that processes form data on the server, and `ContactForm` is a client component that uses this action to handle form submissions.
|
||||
|
||||
## Conclusion: Leveraging Modern Features for Better Web Apps
|
||||
|
||||
React Server Components and Server Actions in Next.js provide powerful tools for building efficient, modern web applications. By leveraging these features, you can improve performance, simplify server-side logic, and create a more responsive user experience.
|
||||
|
||||
As you build your Next.js applications, consider incorporating React Server Components and Server Actions to take full advantage of the latest advancements in web development.
|
||||
|
||||
Happy coding!
|
||||
|
||||
🚀✨
|
||||
Reference in New Issue
Block a user