UI Kit Migration: Bulma -> Vue + TailwindCSS

.eslintrc.json

@@ -1,26 +1,41 @@
 {
     "env": {
         "browser": true,
-        "es2021": true
+        "es2021": true,
+        "node": true
     },
-    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/strict-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+        "plugin:vue/vue3-recommended"
+    ],
     "overrides": [
     ],
     "parserOptions": {
         "ecmaVersion": "latest",
-        "sourceType": "module"
+        "sourceType": "module",
+        "project": true,
+        "extraFileExtensions": [".vue"],
+        "parser": "@typescript-eslint/parser"
     },
+    "parser": "vue-eslint-parser",
     "plugins": ["@typescript-eslint"],
-    "parser": "@typescript-eslint/parser",
     "rules": {
         "no-unused-vars": "off",
+        "no-undef": "off",
         "@typescript-eslint/no-empty-function": "off",
         "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
+        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+        "@typescript-eslint/no-misused-promises": "off",
+        "vue/html-indent": ["warn", 4],
+        "vue/max-attributes-per-line": "off",
+        "vue/singleline-html-element-content-newline": "off",
+        "vue/multi-word-component-names": "off",
+        "vue/v-on-event-hyphenation": "off"
     },
     "globals": {
-        "process": true,
-        "setHue": true
+        "process": true
     }
 }

.firebaserc

@@ -10,9 +10,6 @@
         ],
         "vocabustudy": [
           "vocabustudyonline"
-        ],
-        "nightly": [
-            "vocabustudyonline--nightly-q9kbiq6r"
         ]
       }
     }

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,44 @@
+name: Build and Deploy
+on:
+  workflow_call:
+    inputs:
+      artifact-retention-days:
+        description: 'Number of days to retain build artifacts'
+        required: false
+        default: 1
+        type: number
+      expires:
+        required: false
+        default: "7d"
+        type: string
+      channelId:
+        required: false
+        type: string
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        name: Cache node modules
+        id: cache-npm
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-npm-cache-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-npm-cache-
+      - run: npm ci
+        name: Install dependencies
+      - run: npm run build
+        name: Build
+        env:
+          CF_API_TOKEN: '${{ secrets.CF_API_TOKEN }}'
+          CF_ZONE_ID: '${{ secrets.CF_ZONE_ID }}'
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VOCAB_U_STUDY }}'
+          projectId: vocab-u-study
+          target: "vocabustudy"
+          expires: ${{ inputs.expires }}
+          channelId: ${{ inputs.channelId }}

.github/workflows/firebase-hosting-manual.yml

@@ -1,21 +1,9 @@
 name: Manual Deploy
-'on':
-  workflow_dispatch
+on: workflow_dispatch
 jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.16.0
-          cache: "npm"
-      - run: npm ci && npm run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VOCAB_U_STUDY }}'
-          channelId: preview
-          expires: 1d
-          projectId: vocab-u-study
-          target: "vocabustudy"
+  build-and-deploy:
+    uses: ./.github/workflows/build-and-deploy.yml
+    secrets: inherit
+    with:
+      channelId: preview
+      expires: "1d"

.github/workflows/firebase-hosting-pull-request.yml

@@ -1,21 +1,7 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
 name: PR Hosting Preview
-'on': pull_request
+on: pull_request
 jobs:
-  build_and_preview:
+  build-and-deploy:
+    uses: ./.github/workflows/build-and-deploy.yml
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.16.0
-      - run: npm ci && npm run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VOCAB_U_STUDY }}'
-          projectId: vocab-u-study
-          target: "vocabustudy"
+    secrets: inherit

.github/workflows/firebase-hosting-release-stable.yml

@@ -1,32 +1,11 @@
 name: Deploy Stable
-'on':
+on:
   release:
     types: [released]
 jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.16.0
-      - run: npm ci && npm run build
-      # - name: Create Sentry Release
-      #   uses: getsentry/action-release@v1
-      #   env:
-      #     SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_RELEASES_TOKEN }}
-      #     SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-      #     SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-      #   with:
-      #     environment: 'production'
-      #     sourcemaps: './dist'
-      #     version: ${{ github.event.release.tag_name }}
-      #     version_prefix: vocabustudy@
-      # - run: npm run delete-maps
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VOCAB_U_STUDY }}'
-          channelId: live
-          projectId: vocab-u-study
-          target: "vocabustudy"
+  build-and-deploy:
+    uses: ./.github/workflows/build-and-deploy.yml
+    secrets: inherit
+    with:
+      artifact-retention-days: 7
+      channelId: live

.github/workflows/lint.yml

@@ -17,14 +17,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.16.0
+          node-version: 18
       - run: npm ci
       - name: Run Linters
         uses: wearerequired/lint-action@v2
         with:
           eslint: true
-          eslint_extensions: js
-          stylelint: true
-          stylelint_extensions: scss,css
-      - name: Lint Pug
-        run: npx pug-lint src/*.pug
+          eslint_extensions: ts,vue

.gitignore

@@ -74,4 +74,9 @@ rd/
 parcel-bundle-reports/
 .replit
 replit.nix
-.postcssrc.json
+.postcssrc.json
+.env*.local
+
+# rollup-plugin-visualizer output
+stats.html
+stats.yml

.gitpod.yml

@@ -1,6 +1,19 @@
 tasks:
   - init: npm ci && npm i -g firebase-tools
-    command: npm run build
+    command: npm run dev
+
+ports:
+  - name: Vite
+    port: 5173
+    onOpen: "open-browser"
+  - name: Firestore Emulator
+    port: 8080
+    visibility: public
+    onOpen: ignore
+  - name: Auth Emulator
+    port: 9099
+    visibility: public
+    onOpen: ignore
 
 additionalRepositories:
   - url: https://github.com/For-0/vocabustudy-internals

README.md

@@ -5,7 +5,7 @@
 <a href="https://vocabustudy.org/"><img src="https://raw.githubusercontent.com/For-0/vocabustudy/main/src/icons/icon-192.png" align="center"></a>
 </p>
 <h1 align="center">Vocabustudy - Study Vocab, For Free.</h1>
-<div align="center">
+<div align="center" >
     <a href="https://vocabustudy.org/"><img src="https://img.shields.io/github/v/release/for-0/vocabustudy?label=latest%20version&amp;style=for-the-badge" alt="GitHub  release (latest by date)"></a>
     <a href="https://nightly.vocabustudy.org/"><img src="https://img.shields.io/github/v/release/for-0/vocabustudy?include_prereleases&amp;label=latest%20nightly&amp;style=for-the-badge" alt="GitHub release (latest by date including pre-releases)"></a>
     <img alt="GitHub Workflow Status (with event)" src="https://img.shields.io/github/actions/workflow/status/for-0/vocabustudy/lint.yml?event=push&label=lint&logo=eslint&style=for-the-badge">
@@ -15,7 +15,7 @@
     <img src="https://img.shields.io/badge/Offline-In%20Progress-yellow?style=for-the-badge" alt="Editable on Chromebooks">
     <br>
     <br>
-<p>Vocabustudy is a <b>simplistic tool</b> for <b>studying Vocabulary</b>. Vocabustudy is created <b>by students, for students</b>.</p>
+<p>Vocabustudy is a <b>simplistic tool</b> for <b>studying Vocabulary</b>. Vocabustudy is created <b>by students, for students</b>.</p>    
     <p>No Ads - Always Free - No Account Needed - Feedback is Welcome!</p>
 </div>
 <h2>What is Nightly?</h2>
@@ -29,7 +29,7 @@
     </li>
     <li>Install NPM packages: <code>npm install</code> (Make sure you have <a href="https://nodejs.org/en/">Node.JS</a> installed)</li>
     <li>Install <code>firebase-tools</code> <strong>globally</strong>: <code>npm install -g firebase-tools</code></li>
-    <li>Start <a href="https://parceljs.org">Parcel</a>: <code>npm run watch</code></li>
+    <li>Start <a href="https://vitejs.dev/">Vite</a>: <code>npm run dev</code></li>
     <li>Start the Firebase Emulator (Make sure you have Java installed and on your path): <code>npm run emulator</code></li>
 </ol>
 </body>