Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.vitepress/cache
21 changes: 21 additions & 0 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { defineConfig } from 'vitepress'
import SideBarConfiguration from './sidebars/index.mjs'

// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "KasugaLib",
description: "A universal Minecraft Forge Mod Development Framework",
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' }
],

sidebar: SideBarConfiguration,

socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
]
}
})
29 changes: 29 additions & 0 deletions docs/.vitepress/sidebars/guide.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import {DefaultTheme} from "vitepress";
export const GuideSideBar : DefaultTheme.SidebarItem[] = [
{
text: '起步指南',
items:[
{
text: "介绍",
link: "/guide/"
}
]
},
{
text: 'Javascript Addons 开发',
items:[
{
text: "介绍",
link: "/guide/addons/"
},
{
text: "初始化开发环境",
link: "/guide/addons/initialization"
},
{
text: "编写你的第一个 Addon",
}
]
}
]
export default GuideSideBar;
7 changes: 7 additions & 0 deletions docs/.vitepress/sidebars/index.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {DefaultTheme} from "vitepress/theme";
import GuideSideBar from './guide.mjs'
export const sidebars: DefaultTheme.Config['sidebar'] = {
"/guide/": GuideSideBar
}

export default sidebars;
17 changes: 17 additions & 0 deletions docs/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'

export default {
extends: DefaultTheme,
Layout: () => {
return h(DefaultTheme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
})
},
enhanceApp({ app, router, siteData }) {
// ...
}
} satisfies Theme
139 changes: 139 additions & 0 deletions docs/.vitepress/theme/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/

/**
* Colors
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
*
* - `default`: The color used purely for subtle indication without any
* special meanings attched to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */

:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);

--vp-c-brand-1: var(--vp-c-indigo-1);
--vp-c-brand-2: var(--vp-c-indigo-2);
--vp-c-brand-3: var(--vp-c-indigo-3);
--vp-c-brand-soft: var(--vp-c-indigo-soft);

--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);

--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);

--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);
}

/**
* Component: Button
* -------------------------------------------------------------------------- */

:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
}

/**
* Component: Home
* -------------------------------------------------------------------------- */

:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
120deg,
#b9d959 30%,
#41d1ff
);

--vp-home-hero-image-background-image: linear-gradient(
-45deg,
#e9cc5d 50%,
#b9d959 50%
);
--vp-home-hero-image-filter: blur(22px);
}

@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(44px);
}
}

@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}

/**
* Component: Custom Block
* -------------------------------------------------------------------------- */

:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}

/**
* Component: Algolia
* -------------------------------------------------------------------------- */

.DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}

49 changes: 49 additions & 0 deletions docs/api-examples.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
outline: deep
---

# Runtime API Examples

This page demonstrates usage of some of the runtime APIs provided by VitePress.

The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:

```md
<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```

<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

## More

Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
25 changes: 25 additions & 0 deletions docs/guide/addons/first-addon.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# 编写你的第一个 Addon
在本节中,我们将会教你如何编写你的第一个 Addon。

在上一个章节中,我们已经创建了一个新的项目目录,并且初始化了一个新的 KasugaLib 项目。

接下来,我们将会创建一个简单的 Addon,这个 Addon 将会在启动时向控制台输出一段文字。

```typescript
// src/index.ts
import { EventBus } from '@kasugalib/core';
EventBus.on('start', () => {
console.log('Hello, Kasuga!');
});
```

然后使用以下命令编译你的代码并生成一个 Addon Pack。

```bash
yarn build --pack
```

生成的 Addon Pack 将会被保存在 `build/index.zip`,将其复制到`.minecraft/addons`目录下,
然后启动游戏,你将会在游戏日志中看到`Hello, Kasuga!`的输出。

恭喜你,你已经成功编写了你的第一个 Addon!
1 change: 1 addition & 0 deletions docs/guide/addons/gui.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## 教程: 开发GUI
5 changes: 5 additions & 0 deletions docs/guide/addons/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# JavaScript Addon 开发系统介绍
为了让开发者能更加方便的为 Minecraft 增加新的功能(如GUI,模型渲染等),
我们提供了一套具有扩展性的 JavaScript Addons 套件给开发者使用,
通过遵循 Javascript Addons 的开发规范,您不仅能享受到快速且便捷的开发体验,
同时您也可以调用其他 Addons 提供的 API ,实现更加丰富的功能。
83 changes: 83 additions & 0 deletions docs/guide/addons/initialization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
# 初始化 Javascript Addons 开发环境
对于 Kasuga Javascript Addons,我们使用 Node JS 的 yarn(npm) 包管理器来管理项目依赖,同时使用 `package.json` 文件来描述项目的基本信息和依赖。

在开始开发 Javascript Addons 之前,我们强烈建议您安装 Node JS 和 yarn 包管理器,
在接下来的示例中,我们将使用`yarn`作为管理您的开发环境的工具,
您可以在 [Node JS 官网](https://nodejs.org/) 下载安装 Node JS。

如果您不想使用这么笨重的开发环境,我们也提供了一种轻量的方式开始您的开发,但请注意,这种方式存在一定的限制
(如:其他 Addons 不能调用您的 Addons 提供的 API,且您无法追踪对其他接口的调用)

您可以查看 [单文件Addons开发](./sfa.md) 了解更多信息。

## 下载模板项目

我们提供了一个模板项目,您可以直接下载并开始开发。

```bash
git clone https://github.com/KasugaLibGroup/AddonsTemplate.git
cd AddonsTemplate
yarn
```

## 从命令行初始化项目

首先,我们需要创建一个新的项目目录,然后在项目目录中初始化一个新的 Node JS 项目。

```bash
mkdir my-addon
cd my-addon
yarn init
```

在初始化项目时,您需要填写一些基本信息,如项目名称,版本,描述等。
```bash
yarn init v1.22.10
question name (my-addon): my-addon
question version (1.0.0): 1.0.0
question description: My first Kasuga Addon
question entry point (index.js):
question repository url:
question author: Your Name
question license (MIT):
question private:
success Saved package.json
Done in 20.41s.
```

接着我们需要创建基本项目架构
```bash
mkdir src # 存储编译前的源代码文件
mkdir lib # 存储编译后的代码文件
mkdir client # 存储客户端代码
mkdir server # 存储服务端代码
mkdir assets # 存储资源文件
mkdir dist
mkdir dist/client # 存储客户端编译后的代码
mkdir dist/server # 存储服务端编译后的代码
touch src/index.ts # 创建一个入口文件
touch client/index.ts # 创建客户端入口文件
```

然后你需要在package.json中添加一些基本的配置
```json5
{
// ... names 等信息
"minecraft": {
"server": ["server/index.js"],
"client": ["client/index.js"],
"assets": "assets/"
}
}
```

## 安装依赖

接着我们需要安装用于开发的基本依赖项
```bash
yarn add -D @kasugalib/core # 导入 KasugaLib 核心库
# 如果您需要使用 TypeScript 开发,您还需要安装 TypeScript, ESBuild 和 TypeScript 的类型定义,并配置tsconfig.json
yarn add -D typescript esbuild @types/node
```

并参照模板项目的`tsconfig.json`,`tsconfig.client.json`,`tsconfig.server.json`文件配置合适的TypeScript配置。
Loading