feat: i18n

1 year ago · d3e1c81a1f
parent 1ed31c1acf
commit d3e1c81a1f
11 changed files with 67 additions and 22 deletions
--- a/index.html
+++ b/index.html
@ -11,18 +11,18 @@
 </head>

 <body>
-  <h1 class="title">blue archive</h1>
-  <div class="flex justify-center">
-    <canvas id="canvas" height="200" width="800"></canvas>
+  <h1 class="i18n mt-16 mb-12 text-center" data-i18n="title">BlueArchive-Style Logo Generater</h1>
+  <div class="flex justify-center items-center h-[250px]">
+    <canvas id="canvas" height="250" width="900"></canvas>
  </div>
-  <div class="w-[32rem] mx-auto my-8 flex flex-col">
-    <label class="swap">
+  <div class="w-screen mx-auto my-8 flex flex-col sm:w-[32rem]">
+    <!-- <label class="swap">
      <input type="checkbox" disabled id="loading-switch" />
      <div class="alert alert-info swap-on w-96 mx-auto">
        <span class="loading loading-spinner loading-md"></span>
        <span>loading assets...</span>
      </div>
-    </label>
+    </label> -->
    <div class="flex justify-center my-4">
      <span><input id="textL" type="text" placeholder="Type here" value="Blue"
          class="input input-bordered input-md input-primary mr-1" /></span>
@ -34,8 +34,8 @@
        <span><input type="number" placeholder="Type here" value="Archive" class="input input-bordered input-sm input-primary ml-1" /></span>
      </div> -->
    <div class="flex justify-evenly my-4">
-      <span><button class="btn btn-primary" id="save">Save</button></span>
-      <span><button class="btn btn-primary" id="copy">Copy</button></span>
+      <span><button class="i18n btn btn-primary" id="save" data-i18n="save">Save</button></span>
+      <span><button class="i18n btn btn-primary" id="copy" data-i18n="copy">Copy</button></span>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "vite": "^4.4.5"
  },
  "dependencies": {
+    "i18next": "^23.5.1",
    "lodash-es": "^4.17.21"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -5,6 +5,9 @@ settings:
  excludeLinksFromLockfile: false

 dependencies:
+  i18next:
+    specifier: ^23.5.1
+    version: 23.5.1
  lodash-es:
    specifier: ^4.17.21
    version: 4.17.21
@ -39,6 +42,13 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /@babel/runtime@7.23.1:
+    resolution: {integrity: sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
+
  /@esbuild/android-arm64@0.18.20:
    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
    engines: {node: '>=12'}
@ -548,6 +558,12 @@ packages:
    engines: {node: '>= 0.4.0'}
    dev: true

+  /i18next@23.5.1:
+    resolution: {integrity: sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==}
+    dependencies:
+      '@babel/runtime': 7.23.1
+    dev: false
+
  /inflight@1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    dependencies:
@ -785,6 +801,10 @@ packages:
      picomatch: 2.3.1
    dev: true

+  /regenerator-runtime@0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: false
+
  /resolve@1.22.6:
    resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
    hasBin: true
--- a/src/canvas.ts
+++ b/src/canvas.ts
@ -131,10 +131,6 @@ export default class LogoCanvas {
      this.canvasWidthR = canvasWidth / 2;
    }
    this.canvas.width = this.canvasWidthL + this.canvasWidthR;
-    console.log(
-      '🚀 ~ file: canvas.ts:134 ~ LogoCanvas ~ setWidth ~ this.canvas.width:',
-      this.canvas.width
-    );
  }
  generateImg() {
    if (this.canvasWidthL < canvasWidth / 2 || this.canvasWidthR < canvasWidth / 2) {
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -0,0 +1,21 @@
+import i18next from 'i18next';
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+const lang = ['zh', 'zh-CN', 'zh-TW'].includes(navigator.language) ? 'zh' : 'en';
+i18next.init({
+  lng: lang,
+  resources: {
+    en: {
+      translation: en,
+    },
+    zh: {
+      translation: zh,
+    },
+  },
+});
+
+document.querySelectorAll('.i18n').forEach((el) => {
+  const key = el.getAttribute('data-i18n')!;
+  el.textContent = i18next.t(key);
+});
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,5 @@
+{
+  "title": "BlueArchive-Style Logo Generater",
+  "save": "SAVE",
+  "copy": "COPY"
+}
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@ -0,0 +1,5 @@
+{
+  "title": "碧蓝档案风 logo 生成器",
+  "save": "保存",
+  "copy": "复制"
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,7 @@
 import './style.css';
 import LogoCanvas from './canvas';
 import loadImages from './utils/loadImages';
+import './i18n';

 (async function () {
  // await loadFont();
--- a/src/settings.ts
+++ b/src/settings.ts
@ -1,5 +1,5 @@
 export default {
-  canvasHeight: 200,
+  canvasHeight: 250,
  canvasWidth: 900,
  fontSize: 85,
  textBaseLine: 0.68,
--- a/src/style.css
+++ b/src/style.css
@ -32,7 +32,7 @@ body {
 }

 h1 {
-  font-size: 3.2em;
+  font-size: 2em;
  line-height: 1.1;
 }

@ -46,9 +46,5 @@ h1 {
 #canvas {
  border-radius: 8px;
  border: 1px solid #ccc;
-}
-
-.title {
-  margin-top: 2em;
-  text-align: center;
+  max-width: 100%;
 }
--- a/src/utils/loadFont.ts
+++ b/src/utils/loadFont.ts
@ -6,11 +6,11 @@ export default async (content: string = 'A') => {
  // await Promise.all([G2B.load() /*, GSH.load()*/]).then((fonts) =>
  //   fonts.map((font) => document.fonts.add(font))
  // );
-  const loadingSwitch = document.querySelector('#loading-switch') as HTMLInputElement;
-  loadingSwitch.checked = true;
+  // const loadingSwitch = document.querySelector('#loading-switch') as HTMLInputElement;
+  // loadingSwitch.checked = true;
  await document.fonts.load(
    `${settings.fontSize}px RoGSanSrfStd-Bd, GlowSansSC-Normal-Heavy_diff`,
    content
  );
-  loadingSwitch.checked = false;
+  // loadingSwitch.checked = false;
 };