feat: Add ESLint and Prettier for code quality

.eslintrc

@@ -1,5 +1,6 @@
 {
     "extends": [
-      "plugin:nuxt/recommended"
+      "plugin:nuxt/recommended",
+      "plugin:prettier/recommended"
     ]
   }

.github/FUNDING.YML

@@ -1,6 +1,3 @@
 liberapay: vishnuraghavb
 custom:
-  [
-    'https://www.vishnuraghav.com/donate',
-    'https://paypal.me/vishnuraghav'
-  ]
+  ['https://www.vishnuraghav.com/donate', 'https://paypal.me/vishnuraghav']

.prettierignore

@@ -0,0 +1,15 @@
+# Ignore directories
+node_modules/
+dist/
+build/
+coverage/
+.nuxt/
+static/
+
+# Ignore specific vendored libraries
+assets/scripts/pdfjs-dist/
+
+# Ignore other specific files or patterns if needed
+# e.g., specific minified files if not covered by directory ignores
+*.min.css
+*.min.js

.prettierrc

@@ -1,4 +1,5 @@
 {
-  "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
 }

README.md

@@ -45,6 +45,20 @@ Check out the [roadmap](https://github.com/vishnuraghavb/EnBizCard/projects/1) t
 
 Your feedback and suggestions are very important. If you have an idea to improve Digital Business Card Generator, [do let me know](#having-issues-suggestions-and-feedback). I'm always open to ideas ;)
 
+## Code Quality
+
+This project uses ESLint and Prettier to ensure code quality and consistent formatting.
+
+- **ESLint**: Helps to find and fix problems in JavaScript and Vue.js code.
+- **Prettier**: An opinionated code formatter that enforces a consistent style.
+
+You can use the following npm scripts to manage code quality:
+
+- `npm run lint`: Checks the codebase for linting issues using ESLint.
+- `npm run format`: Automatically formats the code using Prettier.
+
+It's recommended to run these scripts before committing changes.
+
 ## Having issues, suggestions and feedback?
 
 You can,

assets/scripts/main.js

@@ -7,7 +7,7 @@ let m = document.getElementById('modal'),
   qr = document.getElementById('qr'),
   s = document.getElementById('share'),
   sqr = document.getElementById('showQR'),
-  sk = document.getElementById('showKey')
+  sk = document.getElementById('showKey');
 
 function tC(e) {
   '2rem' == e.style.top
@@ -17,51 +17,51 @@ function tC(e) {
     : ((e.style.top = '2rem'),
       (e.style.opacity = 0),
       setTimeout(() => {
-        e.style.visibility = 'hidden'
-      }, 200))
+        e.style.visibility = 'hidden';
+      }, 200));
 }
 function dN(value) {
-  value.style.display = 'none'
+  value.style.display = 'none';
 }
 window.addEventListener('load', () => {
-  ;(document.querySelector('#topActions').style.display = 'flex'),
+  (document.querySelector('#topActions').style.display = 'flex'),
     (qr.innerHTML = new QRCode({
       content: window.location.href,
       container: 'svg-viewbox',
       join: !0,
       ecl: 'L',
       padding: 0,
-    }).svg())
-})
+    }).svg());
+});
 navigator.canShare
   ? s.addEventListener('click', () => {
       navigator.share({
         title: document.title,
         text: 'You can view my Digital Business Card here:',
         url: window.location.href,
-      })
+      });
     })
   : s.addEventListener('click', () => {
-      tC(m), (cv.style.display = 'flex'), dN(qrv), ki ? dN(ki) : null
-    })
+      tC(m), (cv.style.display = 'flex'), dN(qrv), ki ? dN(ki) : null;
+    });
 
 sqr.addEventListener('click', () => {
-  tC(m), (qrv.style.display = 'block'), dN(cv), ki ? dN(ki) : null
-})
+  tC(m), (qrv.style.display = 'block'), dN(cv), ki ? dN(ki) : null;
+});
 
 if (sk) {
   sk.addEventListener('click', () => {
-    tC(m), ki ? (ki.style.display = 'flex') : null, dN(cv), dN(qrv)
-  })
+    tC(m), ki ? (ki.style.display = 'flex') : null, dN(cv), dN(qrv);
+  });
 }
 
 c.addEventListener('click', () => tC(m)),
   curl.addEventListener('click', async () => {
-    let action = curl.querySelectorAll('.iconColor')[1]
+    let action = curl.querySelectorAll('.iconColor')[1];
     await navigator.clipboard.writeText(window.location.href).then((e) => {
-      action.innerText = 'Copied'
+      action.innerText = 'Copied';
       setTimeout(() => {
-        action.innerText = 'Copy URL'
-      }, 1e3)
-    })
-  })
+        action.innerText = 'Copy URL';
+      }, 1e3);
+    });
+  });

assets/scripts/media.js

@@ -1,48 +1,48 @@
 let pC = document.querySelectorAll('.pCtrl'),
   pP = document.querySelectorAll('.playPause'),
-  srcs = document.querySelectorAll('.source')
+  srcs = document.querySelectorAll('.source');
 srcs.forEach((e) => {
-  ;(e.style.pointerEvents = 'none'), e.removeAttribute('controls')
+  (e.style.pointerEvents = 'none'), e.removeAttribute('controls');
 }),
   pC.forEach((e, l) => {
-    e.style.display = 'flex'
+    e.style.display = 'flex';
     let r = e.querySelector('.currentTime'),
       s = e.querySelector('.seekBar'),
       t = e.querySelector('.playPause'),
       o = t.querySelector('.play'),
-      a = t.querySelector('.pause')
+      a = t.querySelector('.pause');
     srcs[l].addEventListener('timeupdate', () => {
       let e = srcs[l].currentTime,
-        t = (100 / srcs[l].duration) * e
-      ;(s.value = t),
+        t = (100 / srcs[l].duration) * e;
+      (s.value = t),
         100 == t &&
           ((s.value = 0),
           (o.style.display = 'block'),
-          (a.style.display = 'none'))
+          (a.style.display = 'none'));
       let u = Math.floor(e / 60),
-        c = Math.floor(e % 60)
+        c = Math.floor(e % 60);
       u.toString().length < 2 && (u = '0' + u),
         c.toString().length < 2 && (c = '0' + c),
-        (r.value = u + ':' + c)
+        (r.value = u + ':' + c);
     }),
       s.addEventListener('change', () => {
-        srcs[l].currentTime = srcs[l].duration * (parseInt(s.value) / 100)
+        srcs[l].currentTime = srcs[l].duration * (parseInt(s.value) / 100);
       }),
       t.addEventListener('click', () => {
         srcs[l].paused
           ? (srcs.forEach((e, r) => {
-              l != r && (e.paused || e.pause())
+              l != r && (e.paused || e.pause());
             }),
             pP.forEach((e, l) => {
               let r = e.querySelector('.play'),
-                s = e.querySelector('.pause')
-              ;(r.style.display = 'block'), (s.style.display = 'none')
+                s = e.querySelector('.pause');
+              (r.style.display = 'block'), (s.style.display = 'none');
             }),
             srcs[l].play(),
             (o.style.display = 'none'),
             (a.style.display = 'block'))
           : (srcs[l].pause(),
             (a.style.display = 'none'),
-            (o.style.display = 'block'))
-      })
-  })
+            (o.style.display = 'block'));
+      });
+  });

assets/styles/T1.scss

@@ -32,7 +32,9 @@ a {
   z-index: 1;
   width: 100%;
   bottom: 0;
-  transition: top 0.2s ease-out, opacity 0.1s ease-out;
+  transition:
+    top 0.2s ease-out,
+    opacity 0.1s ease-out;
   transform: translateZ(0);
 }
 #close {

assets/styles/T2.scss

@@ -32,7 +32,9 @@ a {
   z-index: 1;
   width: 100%;
   bottom: 0;
-  transition: top 0.2s ease-out, opacity 0.1s ease-out;
+  transition:
+    top 0.2s ease-out,
+    opacity 0.1s ease-out;
   transform: translateZ(0);
 }
 #close {

assets/styles/T3.scss

@@ -32,7 +32,9 @@ a {
   z-index: 1;
   width: 100%;
   bottom: 0;
-  transition: top 0.2s ease-out, opacity 0.1s ease-out;
+  transition:
+    top 0.2s ease-out,
+    opacity 0.1s ease-out;
   transform: translateZ(0);
 }
 #close {

components/Action.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="stepC flex mt-6">
-    <button class="py-1 pr-1 shrink-0 focus:outline-none drag cursor-move" tabindex="-1">
-      <div class="w-6 h-6" v-html="require(`~/assets/icons/drag.svg?include`)"></div>
+    <button
+      class="py-1 pr-1 shrink-0 focus:outline-none drag cursor-move"
+      tabindex="-1"
+    >
+      <div
+        class="w-6 h-6"
+        v-html="require(`~/assets/icons/drag.svg?include`)"
+      ></div>
     </button>
     <div
       class="p-3 shrink-0 rounded-l"
       :style="{
-        background: `${name == 'secondaryActions' ? item.color : buttonBg
-          }`,
+        background: `${name == 'secondaryActions' ? item.color : buttonBg}`,
       }"
       :title="item.name"
     >
@@ -35,18 +40,21 @@
       :aria-label="'Remove ' + item.label"
       title="Remove field"
     >
-      <div class="w-6 h-6" v-html="require(`~/assets/icons/x.svg?include`)"></div>
+      <div
+        class="w-6 h-6"
+        v-html="require(`~/assets/icons/x.svg?include`)"
+      ></div>
     </button>
   </div>
 </template>
 
 <script>
-import utils from '@/mixins/utils'
+import utils from '@/mixins/utils';
 export default {
   props: ['name', 'item', 'index', 'type', 'buttonBg', 'removeAction'],
   mixins: [utils],
   mounted() {
-    this.$refs.input.focus()
+    this.$refs.input.focus();
   },
-}
+};
 </script>