Merge pull request #4 from miru-project/dev

Feat english translation

astro.config.mjs

@@ -1,55 +1,60 @@
-import { defineConfig } from "astro/config";
+import {defineConfig} from "astro/config";
 import starlight from "@astrojs/starlight";
 import react from "@astrojs/react";
 
+export const locales = {
+    root: {
+        label: '简体中文',
+        lang: 'zh-CN',
+    },
+    en: {
+        label: 'English',
+        lang: 'en',
+    }
+}
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [
-    starlight({
-      title: "Miru",
-      social: {
-        github: "https://github.com/miru-project/miru-app",
-      },
-      customCss: [
-        // Relative path to your custom CSS file
-        "./src/assets/landing.css",
-      ],
-      sidebar: [
-        // {
-        //   label: "Guides",
-        //   items: [
-        //     // Each item here is one entry in the navigation menu.
-        //     {
-        //       label: "Example Guide",
-        //       link: "/guides/example/",
-        //     },
-        //   ],
-        // },
-        {
-          label: "开发指南",
-          autogenerate: {
-            directory: "developer",
-          },
-        },
-      ],
-      defaultLocale: 'root',
-      locales: {
-        root: {
-          label: '简体中文',
-          lang: 'zh-CN',
+    integrations: [
+        starlight({
+            title: "Miru",
+            social: {
+                github: "https://github.com/miru-project/miru-app",
+            },
+            customCss: [
+                // Relative path to your custom CSS file
+                "./src/assets/landing.css",
+            ],
+            sidebar: [
+                // {
+                //   label: "Guides",
+                //   items: [
+                //     // Each item here is one entry in the navigation menu.
+                //     {
+                //       label: "Example Guide",
+                //       link: "/guides/example/",
+                //     },
+                //   ],
+                // },
+                {
+                    label: "开发指南",
+                    autogenerate: {
+                        directory: "developer",
+                    },
+                    translations: {
+                        'en': 'Developer Guide'
+                    }
+                },
+            ],
+            defaultLocale: 'root',
+            locales: locales
+        }),
+        react(),
+    ],
+    // Process images with sharp: https://docs.astro.build/en/guides/assets/#using-sharp
+    image: {
+        service: {
+            entrypoint: "astro/assets/services/sharp",
         },
-        en: {
-          label: 'English',
-           lang: 'en',
-        }
-      }
-    }),
-    react(),
-  ],
-  // Process images with sharp: https://docs.astro.build/en/guides/assets/#using-sharp
-  image: {
-    service: {
-      entrypoint: "astro/assets/services/sharp",
     },
-  },
 });

src/components/en/DownloadView/index.tsx

@@ -0,0 +1,46 @@
+import {useEffect, useState} from "react";
+import {marked} from "marked";
+import style from '@components/DownloadView/styles.module.css';
+
+export default function DownloadView() {
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [data, setData] = useState<any>({});
+
+    async function getLatestVersion() {
+        const json = await fetch(
+            "https://api.github.com/repos/miru-project/miru-app/releases/latest",
+        ).then((res) => res.json());
+        setData(json);
+        setIsLoading(false);
+    }
+
+    useEffect(() => {
+        getLatestVersion();
+    }, []);
+
+    return (
+        <div className={style["download-view"]}>
+            <h6>The latest stable version： {data.name ?? "loading..."}</h6>
+            {isLoading ? null : (
+                <>
+                    <div className={style["button-container"]}>
+                        {data.assets.map((asset: any) => (
+                            <a
+                                className={style["button"]}
+                                href={asset.browser_download_url}
+                                target="_blank"
+                            >
+                                {asset.name}
+                            </a>
+                        ))}
+                    </div>
+                    <h6 className={style["new"]}>What's new in this version?</h6>
+                    <div
+                        className={style["markdown-body"]}
+                        dangerouslySetInnerHTML={{__html: marked.parse(data.body)}}
+                    ></div>
+                </>
+            )}
+        </div>
+    );
+}

src/content/docs/en/developer/1-environment.mdx

@@ -0,0 +1,6 @@
+---
+title: Environment Setup
+---
+
+To develop extensions for Miru, you only need to have the Miru [Windows](/en/download/) client installed. However, it is also possible to develop on the Android platform, although it may be challenging to debug without being able to view extension output logs.
+It is recommended to use [VsCode](https://code.visualstudio.com/) for code editing.

src/content/docs/en/developer/2-extension.mdx

@@ -0,0 +1,104 @@
+---
+title: Getting Started
+description: Getting Started with Miru
+---
+
+To develop extensions, you need to have a good understanding of JavaScript and regular expressions. If you are not familiar with regular expressions, you can start by learning "[Regular Expressions and String Methods](https://zh.javascript.info/regexp-methods)" and "[Regular Expressions in 30 Minutes](https://deerchao.net/tutorials/regex/regex.htm)".
+
+This documentation assumes that you have already set up the development environment as described in the [Environment Setup](/en/developer/1-environment/) section.
+
+## Quick Start
+
+### Create Extension File
+
+Please create a JavaScript file with the same name as your package name in the extension loading directory on Windows.
+
+:::tip
+You can navigate to the extension page by clicking on the extension loading directory:
+![Extension Loading Directory](./images/1689866233139.png)
+Then click the import button in the upper right corne:
+![Extension Loading Directory](./images/1689866249425.png)
+This will quickly locate the extension directory.
+:::
+
+### Write Metadata
+
+The metadata contains basic information about the extension, such as the package name, version, author, description, etc. Write the metadata in the extension file, and it must be enclosed between `// ==MiruExtension==` comments.
+
+Metadata example:
+
+```text
+
+// ==MiruExtension==
+// @name  Extension Name
+// @version v0.0.1
+// @author Xxxx
+// @lang zh-cn
+// @icon https://xxx.xxx.xxx/xxx.png
+// @package xxx.xxx.xxx
+// @type bangumi
+// @webSite https://xxx.xxx.xxx/
+// ==/MiruExtension==
+
+```
+
+:::tip
+The `@name`, `@version`, `@webSite`, `@package`, `@type` are required fields, while others are optional.
+The `@webSite` is the target address of the extension, and the `@package`  must match the extension file name.
+
+The `@type` is a required field used to indicate the type of the extension.
+| @type | | |
+| :-: | :-: | :-: |
+| | bangumi | Animation |
+| | manga| Manga |
+| | fikushon | Novel |
+:::
+
+### Extends Extension Class
+
+In the extension file, export a class that extends the `Extension` class. For example:
+
+```javascript
+export default class extends Extension {}
+```
+
+### Override Methods in the Extension
+
+In the extension class, override the methods from the `Extension` class. For example:
+
+```javascript
+export default class extends Extension {
+  async latest() {
+    // Latest updates
+  }
+  async search() {
+    // Search
+  }
+  async detail() {
+    // Details
+  }
+  async watch() {
+    // Watch
+  }
+}
+```
+
+The returned data should follow the [data format](/en/developer/3-data/).
+You can use the `this.request` method to make requests, for example:
+
+```javascript
+const res = await this.request({
+  url: "/xxx",
+  method: "GET",
+});
+```
+
+`this.request`  is a proxy request. If you don't use `this.request`, you may encounter cross-origin errors (Web only).
+
+### Submit to the `Miru Extension Repository`
+
+Please submit your extension to the `Miru Extension Repository` using `PR`. The submitted `PR` needs to contain your extension file and **does not need** the `index.json` file.
+
+## Example
+
+You can visit the [Miru Official Repository](https://miru-repo.0n0.dev) for examples.

src/content/docs/en/developer/3-data.mdx

@@ -0,0 +1,84 @@
+---
+title: Data Formats
+---
+
+## Data Parameters for Methods
+
+```javascript
+// Recently Updated
+latest(page: number)
+
+// Search
+search(kw: string, page: number)
+
+// Get Details
+detail(url: string)
+
+// Watch
+watch(url: string)
+
+// Check for Updates for Episodes/Chapters (returns string)
+checkUpdate(url: string)
+
+// Called when unloading
+unload() { }
+
+// Called when loading
+load(){}
+```
+
+## Data Returned by Methods
+
+```javascript
+
+// Data returned by search and latest methods
+export interface ListItem {
+  title: string;
+  url: string;
+  cover: string;
+  desc?: string;
+  update?: string;
+}
+
+// Data returned by detail method
+export interface Detail {
+  title: string;
+  cover: string;
+  desc?: string;
+  metadata?: {
+    [key: string]: string;
+  };
+  // Episodes
+  episodes?: Episode[];
+}
+
+// Episode data
+export interface Episode {
+  title: string;
+  urls: {
+    name: string;
+    url: string;
+  }[]
+}
+
+// Data returned by watch method for video extensions
+export interface BangumiWatch {
+  type: "hls" | "mp4";
+  url: string;
+}
+
+// Data returned by watch method for manga extensions
+export interface MangaWatch {
+  urls: string[];
+}
+
+// Data returned by watch method for novel extensions
+export interface FikushonWatch {
+  // Paragraph
+  content: string[]
+  title: string
+  // Subtitle
+  subtitle: string
+}
+
+```

src/content/docs/en/developer/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Introduction
+description: Getting Started with Miru
+---
+
+Welcome to the Miru extension development! This documentation will help you quickly understand the methods and considerations for developing extensions for Miru, enabling you to easily add new extension sources to Miru.
+
+This documentation is intended for contributors who want to participate in Miru extension development. You should have a basic understanding of JavaScript and familiarity with Miru. The documentation is divided based on the development process, and each section contains the following:
+
+- Development Environment: Explains how to set up the Miru extension development environment, including cloning the source code and running the service.
+- Development Methods: Describes how to use Miru's interfaces to implement extension development, including adding new extension sources.
+- Development Examples: Provides code examples and comments for extension development to help you understand it more intuitively.
+- Development Considerations: Offers some considerations and recommendations for extension development to help you avoid common errors and issues.
+- This documentation uses formal language and includes visual aids to facilitate your understanding of Miru's extension development methods quickly, accurately, and clearly. The documentation follows a linear sequence, so you should read each section in order.