Merge pull request #39 from mirumirumi/main

fix: issues of updating

.env.development

@@ -1,3 +1,14 @@
-VUE_APP_API_ENDPOINT="https://kkqe8obe2i.execute-api.ap-northeast-1.amazonaws.com/yourcat-dev-apis/"
-VUE_APP_API_KEY="Ba2Qog5qH79IdNDxt0JvuaX1hs3YYYRy9LVN5xpP"
-VUE_APP_S3_BUCKET_URL="https://yourcat-dev-image.s3.ap-northeast-1.amazonaws.com/"
+# 現状の説明：
+# Rust に書き換えたとき、何も差分がないと言ってもよい微細な変更をもって手動ビルド→デプロイを行ったが、
+# 何をやっても解決できない謎のエラーが発生。ところが、全く同じ環境で development でビルドすると成果物の構造が変わり（以前と同じものだった）、
+# これでデプロイしたら普通に動いた。
+# そんなわけで、いまここに書いてある環境変数は production にあるものであり、本番ビルド用のコマンドも npm run build-dev である。
+# 唯一の問題は serve して開発するときに /apps/yourcat/ がついてしまうことなので、開発中のみ適当に対処する必要がある。
+
+VUE_APP_API_ENDPOINT="https://q3tgqwjh65.execute-api.ap-northeast-1.amazonaws.com/yourcat-prd-apis/"
+VUE_APP_API_KEY="MRegtSePvl4w8Da8Az1GP9ZRp9i77Qdf5K68fH4Y"
+VUE_APP_S3_BUCKET_URL="https://yourcat-prd-image.s3.ap-northeast-1.amazonaws.com/"
+
+# VUE_APP_API_ENDPOINT="https://kkqe8obe2i.execute-api.ap-northeast-1.amazonaws.com/yourcat-dev-apis/"
+# VUE_APP_API_KEY="Ba2Qog5qH79IdNDxt0JvuaX1hs3YYYRy9LVN5xpP"
+# VUE_APP_S3_BUCKET_URL="https://yourcat-dev-image.s3.ap-northeast-1.amazonaws.com/"

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

js.config.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-      "target": "es2015",
+      "target": "esnext",
       "module": "esnext",
       "baseUrl": "./",
       "paths": {

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "your-cat",
+    "name": "yourcat",
     "version": "1.1.0",
     "private": true,
     "scripts": {
@@ -10,17 +10,25 @@
     },
     "dependencies": {
         "axios": "^1.3.4",
+        "core-js": "^3.30.0",
         "spotlight.js": "^0.7.8",
         "vue": "^3.2.47",
         "vue-axios": "^3.5.2",
         "vue-router": "^4.1.6",
         "vuex": "^4.1.0"
     },
     "devDependencies": {
+        "@vue/cli-plugin-babel": "^5.0.8",
         "@vue/cli-plugin-router": "^5.0.8",
         "@vue/cli-service": "^5.0.8",
+        "@vue/compiler-sfc": "^3.2.47",
         "sass": "^1.59.3",
         "sass-loader": "^13.2.1",
         "webpack": "^5.76.2"
-    }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead"
+    ]
 }

src/utils/util.js

@@ -1,121 +1,123 @@
-import axios from "axios"
+import axios from "axios";
 
 export const shuffle = ([...array]) => {
   for (let i = array.length - 1; i >= 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1))
-    ;[array[i], array[j]] = [array[j], array[i]]
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
   }
-  return array
-}
+  return array;
+};
 
 export function getImagesAPI() {
   return new Promise(async (resolve, reject) => {
-    let result = []
+    let result = [];
     try {
-      const res = await axios.get(process.env.VUE_APP_API_ENDPOINT + "get-image", {
-        headers: {
-          "x-api-key": process.env.VUE_APP_API_KEY,
+      const res = await axios.get(
+        process.env.VUE_APP_API_ENDPOINT + "get-image", {
+          headers: {
+            "x-api-key": process.env.VUE_APP_API_KEY,
+          }
         },
-      })
-      result = res.data
+      );
+      result = res.data;
     } catch (e) {
-      reject(e)
+      reject(e);
     }
-    resolve(result)
-  })
+    resolve(result);
+  });
 }
 
 export function toggleTimelineCurrentClass(newItem) {
   const classes = document.getElementsByClassName("progress")
   for (let c of classes) {
-    c.classList.remove("current")
+    c.classList.remove("current");
   }
-  document.getElementsByClassName(newItem)[0].classList.add("current")
+  document.getElementsByClassName(newItem)[0].classList.add("current");
 }
 
 export function delay(n, m = null) {
-  let sec = n
+  let sec = n;
   if (m !== null) {
-    sec = Math.floor(Math.random() * (m - n + 1) + n)
+    sec = Math.floor(Math.random() * (m - n + 1) + n);
   }
   return new Promise((resolve) => {
-    setTimeout(resolve, sec)
-  })
+    setTimeout(resolve, sec);
+  });
 }
 
 export function removeExif(file) {
   return new Promise((resolve) => {
-    let fr = new FileReader()
-    fr.readAsArrayBuffer(file)
+    let fr = new FileReader();
+    fr.readAsArrayBuffer(file);
     fr.onload = () => {
-      let dv = new DataView(fr.result)
-      let offset = 0
-      let recess = 0
-      let pieces = []
-      let i = 0
+      let dv = new DataView(fr.result);
+      let offset = 0;
+      let recess = 0;
+      let pieces = [];
+      let i = 0;
       if (dv.getUint16(offset) == 0xffd8) {
-        offset += 2
-        let app1 = dv.getUint16(offset)
-        offset += 2
+        offset += 2;
+        let app1 = dv.getUint16(offset);
+        offset += 2;
         while (offset < dv.byteLength) {
           if (app1 == 0xffe1) {
-            pieces[i] = { recess: recess, offset: offset - 2 }
-            recess = offset + dv.getUint16(offset)
-            i++
+            pieces[i] = { recess: recess, offset: offset - 2 };
+            recess = offset + dv.getUint16(offset);
+            i++;
           } else if (app1 == 0xffda) {
-            break
+            break;
           }
-          offset += dv.getUint16(offset)
-          app1 = dv.getUint16(offset)
-          offset += 2
+          offset += dv.getUint16(offset);
+          app1 = dv.getUint16(offset);
+          offset += 2;
         }
         if (pieces.length > 0) {
-          let newPieces = []
+          let newPieces = [];
           pieces.forEach(function (v) {
-            newPieces.push(fr.result.slice(v.recess, v.offset))
-          }, fr)
-          newPieces.push(fr.result.slice(recess))
-          let br = new Blob(newPieces, { type: "image/jpeg" })
-          resolve(br)
+            newPieces.push(fr.result.slice(v.recess, v.offset));
+          }, fr);
+          newPieces.push(fr.result.slice(recess));
+          let br = new Blob(newPieces, { type: "image/jpeg" });
+          resolve(br);
         } else {
-          resolve(file)
+          resolve(file);
         }
       } else {
         // non JPG?
       }
-    }
-  })
+    };
+  });
 }
 
 export function getImageFileType(blob) {
   return new Promise(async (resolve) => {
-    const arrayBuffer = await getArrayBuffer(blob)
+    const arrayBuffer = await getArrayBuffer(blob);
 
     function getArrayBuffer(blob) {
       return new Promise((resolve) => {
-        const fr = new FileReader()
-        fr.readAsArrayBuffer(blob)
-        fr.onload = () => resolve(fr.result)
-      })
+        const fr = new FileReader();
+        fr.readAsArrayBuffer(blob);
+        fr.onload = () => resolve(fr.result);
+      });
     }
 
-    let ba = new Uint8Array(arrayBuffer)
-    let headerStr = ""
-    let headerHex = ""
+    let ba = new Uint8Array(arrayBuffer);
+    let headerStr = "";
+    let headerHex = "";
     for (let i = 0; i < 10; i++) {
-      headerHex += ba[i].toString(16)
-      headerStr += String.fromCharCode(ba[i])
+      headerHex += ba[i].toString(16);
+      headerStr += String.fromCharCode(ba[i]);
     }
-    let fileType = "unknown"
+    let fileType = "unknown";
     if (headerHex.indexOf("ffd8") != -1) {
-      fileType = "JPG"
+      fileType = "JPG";
     } else if (headerStr.indexOf("PNG") != -1) {
-      fileType = "PNG"
+      fileType = "PNG";
     } else if (headerStr.indexOf("GIF") != -1) {
-      fileType = "GIF"
+      fileType = "GIF";
     } else if (headerStr.indexOf("BM") != -1) {
-      fileType = "BMP"
+      fileType = "BMP";
     }
-    resolve(fileType)
-  })
+    resolve(fileType);
+  });
 }

vue.config.js

@@ -6,7 +6,7 @@ module.exports = {
       },
     },
   },
-  publicPath: process.env.NODE_ENV === "production"
+  publicPath: process.env.NODE_ENV === "production" || process.env.NODE_ENV === "development"
     ? "/apps/yourcat/"
     : "/",
 };