Merge pull request #91 from wangchristine/feature/image

Feature/image

.eslintrc.cjs

@@ -1,24 +1,23 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
 module.exports = {
   root: true,
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    // this tool sucks...
-    // "@vue/eslint-config-prettier",
-  ],
   env: {
+    browser: true,
+    es2023: true,
     "vue/setup-compiler-macros": true,
   },
-  // seems useless
+  plugins: ["vue", "import"],
+  extends: ["plugin:vue/vue3-strongly-recommended", "plugin:prettier/recommended"],
+  parserOptions: {
+    ecmaVersion: 2023,
+    sourceType: "module",
+  },
   rules: {
-    "vue/max-attributes-per-line": [
+    "import/order": [
       "error",
       {
-        singleline: 6,
-        multiline: 6,
+        alphabetize: {
+          order: "asc",
+        },
       },
     ],
   },

.github/workflows/cd.yml

@@ -1,49 +1,49 @@
-name: Dev Tools CD
-
-# Controls when the workflow will run
-on:
-  # Triggers the workflow on push or pull request events but only for the master branch
-  push:
-    branches: [ master ]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          check-latest: true
-
-      # Runs a single command using the runners shell
-      - name: NPM Install
-        run: |
-          npm install
-
-      - name: Build
-        run: |
-          npm run build
-
-      - name: Set SPA route
-        run: |
-          cp ./dist/index.html ./dist/404.html
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v4
-        with:
-          # 這裡的 GITHUB_TOKEN 不用另外設定
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+name: Dev Tools CD
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [master]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          check-latest: true
+
+      # Runs a single command using the runners shell
+      - name: NPM Install
+        run: |
+          npm install
+
+      - name: Build
+        run: |
+          npm run build
+
+      - name: Set SPA route
+        run: |
+          cp ./dist/index.html ./dist/404.html
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          # 這裡的 GITHUB_TOKEN 不用另外設定
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

.github/workflows/ci.yml

@@ -1,38 +1,38 @@
-name: Dev Tools CI
-
-# Controls when the workflow will run
-on:
-  # Triggers the workflow on push or pull request events but only for the master branch
-  pull_request:
-    branches: [ master ]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  # This workflow contains a single job called "check"
-  check:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          check-latest: true
-
-      # Runs a single command using the runners shell
-      - name: NPM Install
-        run: |
-          npm install
-
-      - name: Lint
-        run: |
-          npm run lint
+name: Dev Tools CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  pull_request:
+    branches: [master]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "check"
+  check:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          check-latest: true
+
+      # Runs a single command using the runners shell
+      - name: NPM Install
+        run: |
+          npm install
+
+      - name: Lint
+        run: |
+          npm run lint

.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  semi: true,
+  trailingComma: "all",
+  bracketSpacing: true,
+  arrowParens: "always",
+};

README.md

@@ -18,5 +18,4 @@ Go to [Dev Tools](https://wangchristine.github.io/dev-tools/) and have fun!
 
 (Alphabetical order)
 
-Alice, Helio, Kris, Tommy 
-
+Alice, Helio, Kris, Tommy

index.html

@@ -1,19 +1,28 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Free online web developer tools, including JSON parser with prettify tree viewer; Base64 encode/decode that supports UTF-8 encoding, URL encode/decode; Image editor that can resize, add watermark, change image type. And more." />
-      <script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1560209977522592" async crossorigin="anonymous"></script>
-      <script async src="https://www.googletagmanager.com/gtag/js?id=G-XZ673F78W9"></script>
-      <script>
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
+    <meta
+      name="description"
+      content="Free online web developer tools, including JSON parser with prettify tree viewer; Base64 encode/decode that supports UTF-8 encoding, URL encode/decode; Image editor that can resize, add watermark, change image type. And more."
+    />
+    <script
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1560209977522592"
+      async
+      crossorigin="anonymous"
+    ></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XZ673F78W9"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-          gtag('config', 'G-XZ673F78W9');
-      </script>
+      gtag("config", "G-XZ673F78W9");
+    </script>
     <title>Dev Tools</title>
   </head>
   <body>