Skip to content

Commit

Permalink
Merge pull request #128 from VisActor/chore/vite-config
Browse files Browse the repository at this point in the history 
Chore/vite config
  • Loading branch information
@neuqzxy
neuqzxy authored Dec 3, 2024
2 parents 2b5f4dc + c1342f9 commit b108cf1
Show file tree
Hide file tree
Showing 14 changed files with 336 additions and 264 deletions.
29 changes: 14 additions & 15 deletions docs/assets/contributing/en/1-Setting-Up-the-Development-Environment.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: 1. Setting up Development Environment

key words: VisActor, VChart, VTable, VStrory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
key words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
---

# Github

## 1.1 Register an Account
Expand All @@ -15,15 +16,11 @@ If, due to special circumstances, you are unable to access the Github site, plea

First, you need to fork this project. Go to the [VStory project page](https://github.com/VisActor/VStory) and click the Fork button in the upper right corner.



<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/LQbyb5XWgoV8w2x3D5uc8bIkn1c.gif' alt='' width='1000' height='auto'>


<img src='https://cdn.jsdelivr.net/gh/xiaoluoHe/articles/visactor/img/SCR-20241202-oosd.png' alt='' width='1000' height='auto'>

Your github account will show the project xxxx(your github username)/vstory

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/OuwMbtoyPof0S8xrisscWJ3Hneb.gif' alt='' width='849' height='auto'>
<img src='https://cdn.jsdelivr.net/gh/xiaoluoHe/articles/visactor/img/SCR-20241202-okqc.png' alt='' width='600' height='auto'>

# Local Development Environment

Expand All @@ -33,19 +30,20 @@ Since the code is hosted on Github, we use git for version control.

Git is a version control system used to track and manage code changes in software development projects. It helps developers record and manage the history of code, facilitating team collaboration, code version control, code merging, and other operations. With Git, you can track every version of each file and easily switch and compare between different versions. Git also provides branch management functionality, allowing multiple parallel development tasks to be carried out simultaneously.

* Visit the Git official website: [https://git-scm.com/](https://git-scm.com/)
- Visit the Git official website: [https://git-scm.com/](https://git-scm.com/)

* Download the latest version of the Git installer.
- Download the latest version of the Git installer.

* Run the downloaded installer and follow the installation wizard instructions.
- Run the downloaded installer and follow the installation wizard instructions.

* After installation, you can confirm the successful installation by using the `git version` command in the command line.
- After installation, you can confirm the successful installation by using the `git version` command in the command line.

```
HM4G2J09L6:~ xuanhun$ git version
git version
**git version 2.39.2 (Apple Git-143)**
```

## 2.2 Install Development Tools (Recommended: VSCode)

VisActor is mainly based on the front-end technology stack, and there are many tools available for front-end development. We recommend using VSCode. Of course, you can also use your preferred development tool.
Expand All @@ -64,8 +62,6 @@ With Marscode, VisActor developers can easily perform tasks such as code underst

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/BQeib7E2gonoOaxLPqjcRtAYngh.gif' alt='' width='1000' height='auto'>



## 2.4 Clone the Code to Local

Navigate to the VStory folder and add the remote address of VStory.
Expand All @@ -74,12 +70,14 @@ Navigate to the VStory folder and add the remote address of VStory.
git remote add upstream https://github.com/VisActor/VStory.git
```

Get the latest source code of VStory.

```
git pull upstream develop
```

# Initialize the Project

First, globally install [<u>@microsoft/rush</u>](https://rushjs.io/pages/intro/get_started/)
Expand All @@ -88,6 +86,7 @@ First, globally install [<u>@microsoft/rush</u>](https://rushjs.io/pages/intro/g
$ npm i --global @microsoft/rush
```

Next, run the command to view the demo.

```
Expand All @@ -99,6 +98,7 @@ $ rush start
$ rush docs
```

# Next Steps

By now, you have prepared for developing the code. Please continue reading the next section of the tutorial to start different types of tasks.
Expand All @@ -117,7 +117,6 @@ Feishu Group:

Discord: [https://discord.com/invite/3wPyxVyH6m](https://discord.com/invite/3wPyxVyH6m)


# This document is contributed by the following individuals

[玄魂](https://github.com/xuanhun)
2 changes: 1 addition & 1 deletion docs/assets/contributing/en/2-Howto Submit an Issue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: 2. How to Raise an Issue

key words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
---

Under the issues section of each project, you can create and search for issues.

For example, in the VStory project: [VStory issues](https://github.com/VisActor/VStory/issues)
Expand Down Expand Up @@ -55,7 +56,6 @@ Feishu Group:

Discord: [https://discord.com/invite/3wPyxVyH6m](https://discord.com/invite/3wPyxVyH6m)


# Contributors to this Document

[玄魂](https://github.com/xuanhun)
2 changes: 1 addition & 1 deletion docs/assets/contributing/en/3-How to Contribute Documentation.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 3. How to Contribute to Documentation
key words: VisActor, VChart, VTable, VStrory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
key words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
---

# Create a Branch
Expand Down
36 changes: 21 additions & 15 deletions docs/assets/contributing/en/4-How to Contribute to a Demo.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 4. How to Contribute Demo

key words: VisActor, VChart, VTable, VStrory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
key words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
---

# Create Branch
Expand Down Expand Up @@ -53,32 +53,38 @@ For example:

The location of VStory documents and demos in the project is as follows (examples):

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/ObSbbLIPio1un5xZGv7cZ7m8nrh.gif' alt='' width='1000' height='auto'>
<img src='https://cdn.jsdelivr.net/gh/xiaoluoHe/articles/visactor/img/SCR-20241202-oujh.png' alt='' width='500' height='auto'>

Taking the example document of the bar leap animation as an example (currently one example contains both Chinese and English versions, located in the zh & en paths):

<img src='https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vstory-contributing-bar-leap.png' alt='' width='1000' height='auto'>

The example Markdown content is divided into several parts:

* Metadata: Defines the attributes of the example content, including chart category, cover image, keywords, etc.
* Title: The content under the first-level title corresponds to the description of the example.
* Key Configurations: Key configuration explanations included in the example, which will be displayed on the right side of the example page under "Key Configurations".
* Code Demo: The specific code content executed in the example, currently only supports native JavaScript code.
- Metadata: Defines the attributes of the example content, including chart category, cover image, keywords, etc.
- Title: The content under the first-level title corresponds to the description of the example.
- Key Configurations: Key configuration explanations included in the example, which will be displayed on the right side of the example page under "Key Configurations".
- Code Demo: The specific code content executed in the example, currently only supports native JavaScript code.

The metadata fields in Markdown are defined as follows:

* group: The category information of the example, describing what chart category the current example belongs to.
* title: The title of the example.
* keywords: Keywords of the example.
* order: The sorting basis of the example under the same group.
* cover: The cover image of the example.
* tutorial: Link to the tutorial (the default example tutorial will jump to the tutorial corresponding to the example group).
- group: The category information of the example, describing what chart category the current example belongs to.
- title: The title of the example.
- keywords: Keywords of the example.
- order: The sorting basis of the example under the same group.
- cover: The cover image of the example.
- tutorial: Link to the tutorial (the default example tutorial will jump to the tutorial corresponding to the example group).

Currently, the group of chart examples contains multiple categories, such as animate, works-show, etc., corresponding to the categories under all charts in the VStory example gallery. You can refer to existing example documents to fill in specific category fields.

<img src='https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vstory-contributing-examples-page.png' alt='' width='1000' height='auto'>

After completing the new demo, you can add the demo path and title in the `docs/assets/examples/menu.json` file:

<img src='https://cdn.jsdelivr.net/gh/xiaoluoHe/articles/visactor/img/SCR-20241202-skwm.png' alt='' width='800' height='auto'>

> For image resources needed during the demo creation process, please refer to [6. How to Upload Image](./6-How%20to%20upload%20image) chapter.
# Use Marscode AI Programming Assistant for Demo Writing

With the help of the [Marscode AI Programming Assistant](https://www.marscode.cn/home?utm_source=developer&utm_medium=oss&utm_campaign=visactor_a), you can provide comprehensive assistance throughout the document creation process.
Expand Down Expand Up @@ -199,15 +205,15 @@ Or create one through the `contribute` button:

Fill in the modifications for this submission according to the template:

* Check the type of modification.
- Check the type of modification.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/V7xpbJhhEoSoCExC31WcyKvHnDe.gif' alt='' width='692' height='auto'>

* Fill in the associated issue.
- Fill in the associated issue.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/O6YqbpdxgodBjfxHXEpcwob4n5E.gif' alt='' width='470' height='auto'>

* If there are complex changes, explain the background and solution.
- If there are complex changes, explain the background and solution.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/QsnYbfLCio4u3MxK2uIc8epKnXh.gif' alt='' width='1000' height='auto'>

Expand Down
35 changes: 11 additions & 24 deletions docs/assets/contributing/en/5-How to Contribute Code.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: 5. How to Contribute Code

key words: VisActor, VChart, VTable, VStrory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
key words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
---

# Create a Branch

The default branch for VStory is the develop branch. Whether it's for feature development, bug fixes, or documentation writing, please create a new branch and then merge it into the develop branch. Use the following code to create a branch:
Expand All @@ -13,7 +14,6 @@ git checkout -b docs/add-funnel-demo
```


# Find or Create an Issue

In principle, we require that every PR has a corresponding issue. Before starting development, please make sure there is a corresponding issue that has not been claimed.
Expand Down Expand Up @@ -42,8 +42,6 @@ For example:

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/MMCpb9MvEomle4xYIe1cauFUnCe.gif' alt='' width='988' height='auto>



# Write Code

All components in the VStory ecosystem are split by package name in the same directory. Developers need to develop code on their own code branch and then submit it.
Expand Down Expand Up @@ -74,8 +72,6 @@ Search and select functions or classes in the code repository as context.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/FDTHbZ2Hko9WrSx2JqWcJRRnnUf.gif' alt='' width='1000' height='auto>



Below are examples of how to use the [Marscode AI Programming Assistant](https://www.marscode.cn/home?utm_source=developer&utm_medium=oss&utm_campaign=visactor_a) for code writing.

## 5.1 Quickly Familiarize Yourself with the Entire Repository
Expand Down Expand Up @@ -106,20 +102,14 @@ You can also use the #Code context mentioned above to combine Explain with your

Explain can be used in conjunction with Context or Files commands to generate explanations for the entire file.



<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/HyeabsSvjoHYZ9xAbLRc55j8nDg.gif' alt='' width='1000' height='auto'>



## 5.3 Content Retrieval

Usually, each Q&A session with [Marscode](https://www.marscode.cn/home?utm_source=developer&utm_medium=oss&utm_campaign=visactor_a) will provide reference documents, which can provide more context for further analysis.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/OeF0bP4jPoUZWGxqDqScyHzhnvf.gif' alt='' width='1000' height='auto'>



You can also directly search for files:

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/SFvjbKHzOokvkPxFGH0cZKRanpc.gif' alt='' width='1000' height='auto'>
Expand All @@ -136,26 +126,20 @@ Use the "/doc" command to generate code comments.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/KAS2bRAVWo1K5ixXvfDceiZinEh.gif' alt='' width='1000' height='auto>



## 5.6 Generate Unit Tests

The VStory unit test code is located in the "__**tests__" directory of each package.
The VStory unit test code is located in the "**\*\*tests**" directory of each package.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/DHbGbulZ5onHbtx3KFscOLgXnFg.gif' alt='' width='1000' height='auto'>

Using [Marscode](https://www.marscode.cn/home?utm_source=developer&utm_medium=oss&utm_campaign=visactor_a) "/test" command can quickly generate unit test code.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/OnTDbxBAzoQ9h7xEk6vcpYjAnNd.gif' alt='' width='1000' height='auto>



## 5.7 Intelligent Suggestions

During the writing process, intelligent code suggestions are a standard feature of the programming assistant. Feel free to experience it yourself.



# Submit Code

After completing the documentation, push the code to your remote branch. For example:
Expand All @@ -165,7 +149,6 @@ git commit -a -m "docs: add custom funnel demo and related docs"
```


VisActor's commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification, with "docs" used for demos.

`<type>[optional scope]: <description>`
Expand All @@ -182,30 +165,35 @@ A common issue is when the upstream (@visactor/vstroy) has been updated, which m
git checkout develop
```

Pull the latest code from the remote:

```
git pull upstream develop
```

Switch back to your development branch:

```
git checkout docs/add-funnel-demo
```

Merge the commits from develop into your branch:

```
git rebase develop
```

Push the updated code to your branch:

```
git push origin docs/add-funnel-demo
```

# Submit a PR

You can click on the `Compare & pull request` button on your GitHub repository page.
Expand All @@ -216,15 +204,15 @@ Or create one through the `contribute` button:

Fill in the modifications for this submission according to the template:

* Check the type of modification
- Check the type of modification

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/AgIOb5bRAo7UUVxS52AcNZCanad.gif' alt='' width='692' height='auto'>

* Fill in the associated issue
- Fill in the associated issue

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/VGonbJeFJoc68XxDzkOc7j8Lnjd.gif' alt='' width='470' height='auto'>

* If there are complex changes, explain the background and solution
- If there are complex changes, explain the background and solution

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/HYy2bLtuCopGfxxdeKkc2pt0n4e.gif' alt='' width='1000' height='auto'>

Expand Down Expand Up @@ -252,7 +240,6 @@ Feishu Group:

Discord: https://discord.com/invite/3wPyxVyH6m


# This Document is Contributed by the Following Individuals

[玄魂](https://github.com/xuanhun)
Loading

0 comments on commit b108cf1

Please sign in to comment.