docs: improve English translations

src/.vuepress/components/ExternalLinkIcon.ts

@@ -0,0 +1,44 @@
+import { useRouteLocale } from "@vuepress/client";
+import { defineComponent, h } from "vue";
+
+const localeText: Record<string, string> = {
+  "/": "(opens in new tab)",
+  "/en/": "(opens in new tab)",
+  "/ja/": "新しいウィンドウで開く",
+};
+
+const svg = h(
+  "svg",
+  {
+    class: "external-link-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    viewBox: "0 0 100 100",
+    width: "15",
+    height: "15",
+  },
+  [
+    h("path", {
+      fill: "currentColor",
+      d: "M18.8,85.1h56c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32c-2.2,0-4,1.8-4,4v56c0,2.2,1.8,4,4,4z",
+    }),
+    h("polygon", {
+      fill: "currentColor",
+      points: "45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9",
+    }),
+  ],
+);
+
+export const ExternalLinkIcon = defineComponent({
+  name: "ExternalLinkIcon",
+  setup() {
+    const routeLocale = useRouteLocale();
+
+    return () =>
+      h("span", [
+        svg,
+        h("span", { class: "external-link-icon-sr-only" }, localeText[routeLocale.value] ?? localeText["/"]),
+      ]);
+  },
+});

src/.vuepress/config.ts

@@ -2,10 +2,30 @@ import { defineUserConfig } from "vuepress";
 import theme from "./theme.js";
 import { searchPlugin } from "@vuepress/plugin-search";
 import { shikiPlugin } from "@vuepress/plugin-shiki";
+import { externalLinkIconPlugin } from "@vuepress/plugin-external-link-icon";
 import path from "path";
 export default defineUserConfig({
   base: "/",
   plugins: [
+    externalLinkIconPlugin({
+      locales: {
+        "/": {
+          openInNewWindow: "(opens in new tab)",
+        },
+        "/en/": {
+          openInNewWindow: "(opens in new tab)",
+        },
+        "/ja/": {
+          openInNewWindow: "新しいウィンドウで開く",
+        },
+      },
+    }),
+    {
+      name: "localized-external-link-icon",
+      alias: {
+        "@vuepress/plugin-external-link-icon/client": path.resolve(__dirname, "./components/ExternalLinkIcon.ts"),
+      },
+    },
     searchPlugin({
       locales: {
         "/": {

src/.vuepress/theme.ts

@@ -93,6 +93,8 @@ export default hopeTheme({
 
   //插件选项
   plugins: {
+    externalLinkIcon: false,
+
     // You should generate and use your own comment service
     // comment: {
     //   provider: "Giscus",
@@ -104,6 +106,11 @@ export default hopeTheme({
 
     // All features are enabled for demo, only preserve features you need here
     mdEnhance: {
+      locales: {
+        "/en/": {
+          tip: "Tip:",
+        },
+      },
       align: true,
       attrs: true,
       chart: true,

src/en/getting-started.md

@@ -1,9 +1,9 @@
 # How to start making a WebGAL?
 
 ::: warning
-No matter which way you choose to make a WebGAL game, you should spend some time reading through the entirety of the development guide. It won't take long, and it will save you from running into problems due to improper operation.
+No matter which way you choose to make a WebGAL game, you should spend some time reading through the entirety of the development guide. It won't take long, and it will help you avoid issues caused by incorrect operations.
 
-You know, most of the questions you are wondering about can be found in the documentation. If you firmly believe that you have encountered a bug, please raise an issue at [issues](https://github.com/OpenWebGAL/WebGAL/issues) or send an email to <contact@openwebgal.com>, you can also find a way to join the WebGAL discussion community in the "More" column at the top right corner of the website.
+Note: most questions are already answered in the documentation. If you are confident that you have encountered a bug, please submit an issue on [GitHub](https://github.com/OpenWebGAL/WebGAL/issues) or email <contact@openwebgal.com>. You can also find links to the WebGAL community under "More" in the top-right corner of the website.
 :::
 
 ::: danger
@@ -40,13 +40,13 @@ npm install yarn -g
 yarn
 ```
 
-WebGAL uses vite as a packaging and debugging tool, you can start the development server by running the following script
+WebGAL uses Vite as its build and development tool. Start the dev server with the following command:
 
 ``` bash
 yarn dev
 ```
 
-It is recommended to use VS Code for development, and use plugins to achieve syntax highlighting:
+We recommend using VS Code with an extension that enables syntax highlighting:
 
 [Marketplace address of syntax highlighting plugin](https://marketplace.visualstudio.com/items?itemName=c6h5-no2.webgal-script-basics)
 

src/en/webgal-script/animation.md

@@ -1,6 +1,6 @@
 # Animation Effects
 
-## Setting Animations for Backgrounds or Sprites
+## Setting Animations for Backgrounds or Character Sprites
 
 Use the statement `setAnimation:animation name -target=target;`
 
@@ -11,17 +11,17 @@ Use the statement `setAnimation:animation name -target=target;`
 setAnimation:enter-from-bottom -target=fig-center -next;
 ```
 
-Currently, the following preset animations are available:
+The following built-in animations are available:
 
 | Animation Effect | Animation Name | Duration (ms) |
 | :--- | :--- | :--- |
 | Fade in | enter | 300 |
 | Fade out | exit | 300 |
-| Shake once | shake | 1000 |
+| Single Shake | shake | 1000 |
 | Enter from bottom | enter-from-bottom | 500 |
 | Enter from left | enter-from-left | 500 |
 | Enter from right | enter-from-right | 500 |
-| Move front and back once | move-front-and-back | 1000 |
+| Single Front-Back Movement | move-front-and-back | 1000 |
 | Blur in | blur | 300 |
 | Old film filter | oldFilm | 0 |
 | Dot film filter | dotFilm | 0 |
@@ -129,7 +129,7 @@ Then, you can call it in the script:
 setAnimation:enter-from-left -target=fig-left -next;
 ```
 
-### Omitting Some Properties
+### Omitting Properties
 
 If your animation only needs to manipulate some properties, you can leave the other properties that are not involved in the animation empty to keep them as default.
 

src/en/webgal-script/base.md

@@ -81,11 +81,11 @@ When writing CSS in text extension syntax, semicolons also need to be written as
 
 ## `none` Keyword
 
-When setting **resources** such as立ち絵, BGM, backgrounds, you can turn off this object by setting it to `none`.
+When setting **resources** such as character sprites, BGM, and backgrounds, you can disable the element by setting it to `none`.
 
 ## `-next` Parameter
 
-You can add the parameter `-next` after any statement. This will cause the next statement to be executed immediately after this statement is executed. This is very useful when you need to perform multiple operations at the same time.
+You can add the parameter `-next` after any statement. This causes the next statement to execute immediately after the current statement. This is particularly helpful when you need to perform multiple operations at the same time.
 
 Example:
 
@@ -102,7 +102,7 @@ At this time, you can use the `-notend` `-concat` parameters to insert any state
 
 `-notend` means that this dialogue is not over, and there may be 演出 or dialogue connected later.
 
-An example is given below: This is a demonstration of switching 立ち絵 in the middle of a dialogue.
+Example: switch character sprites in the middle of a dialogue.
 
 ``` webgal
 WebGAL:Test statement insert 演出！Switch 立ち絵 immediately...... -notend;

src/en/webgal-script/special-effect.md

@@ -1,4 +1,4 @@
-# Effects
+# Special Effects
 
 Currently, WebGAL's effect system is powered by PixiJS.
 
@@ -26,9 +26,9 @@ Add effects using `pixiPerform`.
 pixiPerform:rain; // Add a rain effect
 ```
 
-Note: After the effect takes effect, if it is not re initialized, the effect will continue to run.
+Note: Once a special effect is applied, it will continue running until reinitialized.
 
-### List of Built-in Effects
+### Built-in Special Effects
 
 | Effect | Command |
 | :--- | :--- |
@@ -95,4 +95,4 @@ This way, you can call your effects in the script
 
 ``` webgal
 pixiPerform:myPerform;
-```
+```