Skip to content

Commit

Permalink
Merge pull request #710 from genedna/main
Browse files Browse the repository at this point in the history 
Modify doc and blog of website
  • Loading branch information
@genedna
genedna authored Dec 2, 2024
2 parents ed9c93c + 6fcc612 commit fbb24c7
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 253 deletions.
96 changes: 3 additions & 93 deletions aria/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,10 @@
## AriaDocs - Documentation Template
## Aria - GitMega Website

This feature-packed documentation template, built with Next.js, offers a sleek and responsive design, perfect for all your project documentation needs.

<img src="./public/public-og.png" />

<br/>

Here are all versions of the AriaDocs template, each crafted for specific use cases:


- **Advanced Docs:** A comprehensive template offering extensive features for in-depth documentation needs. Perfect for larger projects that require detailed explanations and advanced configurations.
[Explore the Advanced Docs](https://github.com/nisabmohd/Aria-Docs/tree/master)

- **Lite Version:** A streamlined, no-frills template perfect for straightforward documentation needs.
[Explore the Lite Version](https://github.com/nisabmohd/Aria-Docs/tree/minimal-docs)

- **Version with Versioning:** A powerful option for projects that require historical documentation tracking. Manage multiple versions of your docs effortlessly.
[Check out the Versioning Feature](https://github.com/nisabmohd/Aria-Docs/tree/version_docs)

- **i18n Support Version (WIP):** Designed for international audiences, this version will offer comprehensive multilingual support.
[Preview the i18n Support](https://github.com/nisabmohd/Aria-Docs/tree/i18n-support)
The website of GitMega fork from [AriaDocs](https://github.com/nisabmohd/Aria-Docs/tree/master) template, and deployed on Vercel.

### Quick Start

You can create a new Ariadocs project using the command:

```plaintext
npx create-aria-doc <project-directory>
```

### Expected Output

When you run the CLI, you can expect an output similar to this:

```
Creating a new Ariadocs project in /path/to/your/project from the master branch...
Cloning Master (Full Documentation)...
Ariadocs project successfully created in /path/to/your/project!
Next steps:
1. Navigate to your project directory:
cd <project-directory>
2. Install dependencies:
// To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is already in progress.
npm install --force
3. Start the development server:
npm run dev
```

## Getting Started

First, run the development server:

```plaintext
npm install --force
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```


## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/nisabmohd/Aria-Docs)

## Key Features

| **Feature** | **Description** |
|-------------------------------|----------------------------------------------------------|
| MDX Support | Write interactive documentation with MDX. |
| Nested Pages | Organize content in a nested, hierarchical structure. |
| Blog Section | Include a dedicated blog section. |
| Table of Contents | Auto-generated TOC for easy navigation. |
| Pagination | Split content across multiple pages. |
| Syntax Highlighting | Highlight code for better readability. |
| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles. |
| Interactive Code Blocks | Language-specific and interactive code display. |
| Custom Components | Embed custom, reusable components in your docs. |
| Light & Dark Mode | Toggle between light and dark themes. |
| Search Functionality | Quickly find content with a built-in search. |
| Code Switcher | Switch between code languages or variations. |
| Code Copy | Copy code blocks with a single click. |
| TOC Observer Highlight | Highlight active sections in the TOC as you scroll. |
| Static Site Generation | Generate a static, high-performance site. |
| SEO-Optimized | Structured for optimal search engine indexing. |


## Additional Themes

<img src="./public/halloween.png" alt="halloween" />
<img src="./public/nebula.png" alt="halloween" />
<img src="./public/ocean.png" alt="halloween" />
108 changes: 3 additions & 105 deletions aria/contents/blogs/why-rewrite-git-host-service-with-rust-language.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Why Rewrite Git Host Service with Rust Language"
description: ""
description: "Mega is a monolithic codebase management system, and it is an unofficial open source implementation of Google Piper. Mega is designed to manage large-scale codebases, streamline development, and foster collaboration."
date: 24-12-2024
authors:
- avatar: "https://avatars.githubusercontent.com/u/76467?v=4&size=64"
Expand All @@ -10,108 +10,6 @@ authors:
cover: "contents/blogs/why-rewrite-git-host-service-with-rust-language/cover.jpg"
---

## Introduction: Enhancing Next.js with React Server Components
## Introduction: Monolithic and Decentralized

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!

🚀✨
Mega is a monolithic codebase management system, and it is an unofficial open source implementation of Google Piper. Mega is designed to manage large-scale codebases, streamline development, and foster collaboration.
48 changes: 6 additions & 42 deletions aria/contents/docs/getting-started/introduction/index.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,22 @@
---
title: Introduction
description: This section provides an overview of AriaDocs.
description: Mega is an unofficial open source implementation of Google Piper. It is a monorepo & monolithic codebase management system that supports Git. Mega is designed to manage large-scale codebases, streamline development, and foster collaboration.
---

Welcome to **AriaDocs**! This template provides a modern, flexible, and user-friendly foundation for creating engaging documentation. Whether you're building a knowledge base, project docs, or a personal blog, AriaDocs makes it easy to set up and scale.

Welcome to **Mega**! Mega is an unofficial open source implementation of Google Piper. It is a monorepo & monolithic codebase management system that supports Git. Mega is designed to manage large-scale codebases, streamline development, and foster collaboration.

## Open Source Philosophy

AriaDocs is proudly **open-source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.
Mega is proudly **Open Source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.

<Note title="Contribute">
Interested in helping us improve? Check out our [GitHub repository](https://github.com/your-repo) to get started! From feature suggestions to bug fixes, all contributions are welcome.
<Note title="Contribute">
Interested in helping us improve? Check out our [Mega](https://github.com/web3infra-foundation/megao) to get started! From feature suggestions to bug fixes, all contributions are welcome.
</Note>

## Project Overview

**AriaDocs** is more than just a documentation template. It's a **complete toolkit** designed for modern web development. Key features include:

- **Markdown & MDX Support:** Easily write documentation in Markdown, with the option to include interactive components via MDX.
- **Customizable Themes:** Designed with a minimalist ShadCN-inspired theme that’s easy to style.
- **SEO-Optimized:** Each page is SEO-ready, ensuring search engines can find and rank your content.
- **Interactive Code Blocks:** Beautifully styled, language-specific code blocks for an enhanced reading experience.

### Key Features

| **Feature** | **Description** |
|-------------------------------|----------------------------------------------------------|
| MDX Support | Write interactive documentation with MDX. |
| Nested Pages | Organize content in a nested, hierarchical structure. |
| Blog Section | Include a dedicated blog section. |
| Pagination | Split content across multiple pages. |
| Syntax Highlighting | Highlight code for better readability. |
| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles. |
| Interactive Code Blocks | Language-specific and interactive code display. |
| Custom Markdown Components | Embed custom, reusable components in your docs. |
| Static Site Generation | Generate a static, high-performance site. |
| SEO-Optimized | Structured for optimal search engine indexing. |


## Technology & Libraries

AriaDocs leverages cutting-edge technologies to ensure performance and flexibility:

- **Next.js 14** - The powerful React framework optimized for production.
- **Tailwind CSS** - Utility-first styling for quick, clean designs.
- **Shadcn-UI** - Elegant, accessible components for a polished look.
- **next-mdx-remote** - Enables MDX support for dynamic, interactive Markdown content.


## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

You can deploy your project by clicking [Deploy with Vercel](https://vercel.com/new/clone?repository-url=https://github.com/nisabmohd/Aria-Docs)
| Git Compatible | |
14 changes: 1 addition & 13 deletions aria/next.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,5 @@
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
/* config options here */
images: {
remotePatterns: [
{
protocol: "https",
hostname: "img.freepik.com/**",
},
],
},
// if used turbopack
// transpilePackages: ["next-mdx-remote"],
};
const nextConfig: NextConfig = {};

export default nextConfig;
Binary file removed aria/public/public-og.png
View file
Binary file not shown.

1 comment on commit fbb24c7

@vercel
Copy link

@vercel vercel bot commented on fbb24c7 Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mega – ./

mega-gitmono.vercel.app
mega-git-main-gitmono.vercel.app
gitmega.dev
www.gitmega.dev

Please sign in to comment.