From d800a64d6abc01d0db58944fb4065546e436a4da Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 1 Jun 2025 15:19:51 +0000 Subject: [PATCH] feat: Add ESLint and Prettier for code quality This commit introduces ESLint and Prettier to the project to enforce consistent code style and identify potential errors. Key changes: - Added ESLint, Prettier, eslint-plugin-prettier, eslint-config-prettier, and eslint-plugin-nuxt to devDependencies. - Configured ESLint (in .eslintrc) to use nuxt/recommended and prettier/recommended. - Created a .prettierrc file with project-specific formatting rules (single quotes, trailing commas). - Added .prettierignore to exclude third-party libraries and build artifacts. - Added `lint` and `format` npm scripts to package.json. - Formatted the existing codebase with Prettier. - Fixed linting issues with ESLint. - Updated README.md to include a "Code Quality" section explaining the new tools and scripts. --- .eslintrc | 3 +- .github/FUNDING.YML | 5 +- .prettierignore | 15 + .prettierrc | 5 +- README.md | 14 + assets/scripts/main.js | 40 +- assets/scripts/media.js | 32 +- assets/styles/T1.scss | 4 +- assets/styles/T2.scss | 4 +- assets/styles/T3.scss | 4 +- components/Action.vue | 24 +- components/Attachment.vue | 52 +- components/Check.vue | 2 +- components/Colour.vue | 10 +- components/Cropper.vue | 30 +- components/DocumentDownloader.vue | 8 +- components/Download.vue | 6 +- components/Featured.vue | 264 +- components/Footer.vue | 5 +- components/Help.vue | 2 +- components/MediaPlayer.vue | 42 +- components/Modal.vue | 4 +- components/Preview.vue | 120 +- components/ProductCard.vue | 42 +- components/ProductShowcase.vue | 4 +- components/Vcard.vue | 16 +- layouts/default.vue | 10 +- mixins/utils.js | 22 +- nuxt.config.js | 4 +- package-lock.json | 5230 +++++++++++------------------ package.json | 9 +- pages/hosting-guide/index.vue | 8 +- pages/index.vue | 820 ++--- store/index.js | 10 +- tailwind.config.js | 4 +- 35 files changed, 2576 insertions(+), 4298 deletions(-) create mode 100644 .prettierignore diff --git a/.eslintrc b/.eslintrc index 7428a96..05dd920 100755 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,6 @@ { "extends": [ - "plugin:nuxt/recommended" + "plugin:nuxt/recommended", + "plugin:prettier/recommended" ] } \ No newline at end of file diff --git a/.github/FUNDING.YML b/.github/FUNDING.YML index 800986e..658efcb 100755 --- a/.github/FUNDING.YML +++ b/.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'] diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..76abd3a --- /dev/null +++ b/.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 diff --git a/.prettierrc b/.prettierrc index b2095be..5a05ecb 100755 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { - "semi": false, - "singleQuote": true + "singleQuote": true, + "semi": true, + "trailingComma": "es5" } diff --git a/README.md b/README.md index 8b308c9..2f7bae8 100755 --- a/README.md +++ b/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, diff --git a/assets/scripts/main.js b/assets/scripts/main.js index 24a9b9e..c9d0b70 100755 --- a/assets/scripts/main.js +++ b/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); + }); + }); diff --git a/assets/scripts/media.js b/assets/scripts/media.js index 46a361f..6590278 100755 --- a/assets/scripts/media.js +++ b/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')); + }); + }); diff --git a/assets/styles/T1.scss b/assets/styles/T1.scss index 980f31f..e7300ad 100755 --- a/assets/styles/T1.scss +++ b/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 { diff --git a/assets/styles/T2.scss b/assets/styles/T2.scss index 87a08b2..56fc6ba 100755 --- a/assets/styles/T2.scss +++ b/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 { diff --git a/assets/styles/T3.scss b/assets/styles/T3.scss index 58c43d4..2bc5f09 100755 --- a/assets/styles/T3.scss +++ b/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 { diff --git a/components/Action.vue b/components/Action.vue index 51ba65c..9d6e77e 100755 --- a/components/Action.vue +++ b/components/Action.vue @@ -1,13 +1,18 @@ diff --git a/components/Attachment.vue b/components/Attachment.vue index 07cd1cc..ec22006 100755 --- a/components/Attachment.vue +++ b/components/Attachment.vue @@ -20,8 +20,8 @@ type == 'logo' ? 'Brand logo' : type == 'photo' - ? 'Card holder\'s photo' - : 'Cover image' + ? 'Card holder\'s photo' + : 'Cover image' }`" />