vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add linting infrastructure (ESLint, Stylelint, HTMLHint, Prettier) and GitHub Action with auto-fix

Browse source
This commit is contained in:
Julien Maille 2026-01-10 16:07:27 +01:00
parent b0386a791d
commit caea2fc707
12 changed files with 2714 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/deploy.yml vendored
View file

@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
branches: [main]
jobs:
deploy:

53
.github/workflows/lint.yml vendored Normal file
View file

@ -0,0 +1,53 @@
name: Lint Codebase
on:
push:
branches: [main]
pull_request:
branches: [main]
permissions:
contents: write
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
if: github.event_name == 'pull_request'
with:
ref: ${{ github.head_ref }}
repository: ${{ github.event.pull_request.head.repo.full_name }}
- uses: actions/checkout@v4
if: github.event_name != 'pull_request'
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Fix JS Lint
run: npm run lint:js -- --fix
continue-on-error: true
- name: Fix CSS Lint
run: npm run lint:css -- --fix
continue-on-error: true
- name: Format with Prettier
run: npm run format
continue-on-error: true
- name: Commit and Push changes
uses: stefanzweifel/git-auto-commit-action@v5
with:
commit_message: 'style: auto-fix linting issues'
- name: Run HTML Lint
run: npm run lint:html

3
.htmlhintignore Normal file
View file

@ -0,0 +1,3 @@
dist/
node_modules/
legacy/

12
.htmlhintrc Normal file
View file

@ -0,0 +1,12 @@
{
"tag-pair": true,
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"doctype-first": true,
"id-unique": true,
"src-not-empty": true,
"alt-require": true,
"head-script-disabled": false,
"spec-char-escape": true
}

6
.prettierignore Normal file
View file

@ -0,0 +1,6 @@
dist/
node_modules/
legacy/
package-lock.json
*.min.js
.github/

8
.prettierrc Normal file
View file

@ -0,0 +1,8 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"printWidth": 120,
"endOfLine": "auto"
}

12
.stylelintrc.json Normal file
View file

@ -0,0 +1,12 @@
{
"extends": "stylelint-config-standard",
"rules": {
"no-empty-source": null,
"selector-class-pattern": null,
"media-feature-range-notation": null,
"declaration-block-no-redundant-longhand-properties": null,
"color-function-notation": null,
"alpha-value-notation": null
},
"ignoreFiles": ["dist/**/*.css", "node_modules/**/*.css", "legacy/**/*.css"]
}

19
CONTRIBUTE.md
View file

@ -21,6 +21,25 @@ This project uses [Vite](https://vitejs.dev/) for local development and optimize
- **Dependency Management**: No more manual path tracking or broken internal imports.
- **Automated PWA**: Service Worker generation and asset hashing are handled automatically.
## Code Quality & Linting
We use a standard stack to ensure code quality and consistency:
- **JS**: [ESLint](https://eslint.org/)
- **CSS**: [Stylelint](https://stylelint.io/)
- **HTML**: [HTMLHint](https://htmlhint.com/)
- **Formatting**: [Prettier](https://prettier.io/)
### Commands
- **Check everything:** `npm run lint`
- **Auto-format code:** `npm run format` (Runs Prettier)
- **Fix JS issues:** `npm run lint:js -- --fix`
- **Fix CSS issues:** `npm run lint:css -- --fix`
> [!IMPORTANT]
> A GitHub Action automatically runs these checks on every push and pull request. Please ensure `npm run lint` passes before committing.
## Project Structure
- `/js`: Application source code.
- `/public`: Static assets (images, manifest, instances.json) that are copied directly to the build folder.

25
eslint.config.js Normal file
View file

@ -0,0 +1,25 @@
import js from "@eslint/js";
import globals from "globals";
import prettierConfig from "eslint-config-prettier";
export default [
{
ignores: ["dist/", "node_modules/", "legacy/", "sw.js"]
},
js.configs.recommended,
prettierConfig,
{
languageOptions: {
ecmaVersion: 2022,
sourceType: "module",
globals: {
...globals.browser,
...globals.node
}
},
rules: {
"no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
"no-console": ["warn", { "allow": ["warn", "error"] }]
}
}
];

22
index.html
View file

@ -55,7 +55,7 @@
</svg>
</button>
<div class="fullscreen-main-view">
<img id="fullscreen-cover-image" src="" alt="Album Cover">
<img id="fullscreen-cover-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Album Cover">
<div class="fullscreen-track-info">
<h2 id="fullscreen-track-title"></h2>
<h3 id="fullscreen-track-artist"></h3>
@ -279,13 +279,13 @@
</li>
<li class="nav-item">
<a href="#account">
<svg viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:1.9200000000000004;}</style></defs><circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle><path class="cls-1" d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"></path></g></svg>
<svg viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:1.9200000000000004;}</style></defs><circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle><path class="cls-1" d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"></path></g></svg>
<span>Account</span>
</a>
</li>
<li class="nav-item">
<a href="https://monochrome.samidy.com/discord" target="_blank">
<svg width="64px" height="64px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#8E8E96" fill-rule="nonzero"> </path> </g> </g></svg>
<svg width="64px" height="64px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <g> <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#8E8E96" fill-rule="nonzero"> </path> </g> </g></svg>
<span>Discord</span>
</a>
</li>
@ -397,7 +397,7 @@
<div id="page-album" class="page">
<header class="detail-header">
<img id="album-detail-image" src="" alt="" class="detail-header-image">
<img id="album-detail-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="detail-header-image">
<div class="detail-header-info">
<h1 class="title" id="album-detail-title"></h1>
<div class="meta" id="album-detail-meta"></div>
@ -492,7 +492,7 @@
<div id="page-artist" class="page">
<header class="detail-header">
<img id="artist-detail-image" src="" alt="Artist" class="detail-header-image artist">
<img id="artist-detail-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Artist" class="detail-header-image artist">
<div class="detail-header-info">
<h1 class="title" id="artist-detail-name"></h1>
<div class="meta" id="artist-detail-meta"></div>
@ -644,7 +644,7 @@
<div class="firebase-settings-wrapper">
<div id="custom-firebase-config-container" class="custom-firebase-config">
<p class="config-help-text">Default shared instance is active. <a href="https://github.com/SamidyFR/monochrome/blob/main/firebase-setup.md" target="_blank" class="text-link">Override below only if needed.</a></p>
<textarea id="firebase-config-input" class="template-input" rows="5" placeholder='{ "apiKey": "...", "authDomain": "...", ... }'></textarea>
<textarea id="firebase-config-input" class="template-input" rows="5" placeholder="{ &quot;apiKey&quot;: &quot;...&quot;, &quot;authDomain&quot;: &quot;...&quot;, ... }"></textarea>
<div class="firebase-controls-container">
<button id="save-firebase-config-btn" class="btn-secondary">Save & Reload</button>
<button id="share-firebase-config-btn" class="btn-secondary">Share</button>
@ -920,7 +920,7 @@
</script>
<p style="padding-top: 50px; text-align: center; color: #8B8B93;">We only store music data and a randomized ID to find out which Google account is which. <br> All data is anonymous. We do not store anything like emails, usernames, or anything sensitive. <br> <br> However, if you want complete control over your data, we allow you to use your own firebase configuration.</p>
<div style="display: flex; gap: 50px; align-items: center; justify-content: center; padding-top: 25px;">
<a id="toggle-firebase-config-btn" class="btn-secondary" href="#settings">Advanced: Custom Configuration</a>
<a id="advanced-config-link" class="btn-secondary" href="#settings">Advanced: Custom Configuration</a>
</div>
</div>
</div>
@ -928,7 +928,9 @@
<h2 class="section-title" style="text-align: center;">Donate to Monochrome</h2>
<div class="donate-content">
<p style="text-align: center;" class="donate-description">If Monochrome has been useful to you and you're able to, consider making a donation. <br> It helps pay for the domain, and you get to support us :)</p>
<button id="donate-btn" class="btn-secondary">Donate to Monochrome</button>
<button id="donate-btn-page" class="btn-secondary">Donate to Monochrome</button>
</div>
</div>
</main>
@ -1036,7 +1038,3 @@
<script type="module" src="js/app.js"></script>
</body>
</html>
</div>
</html>
</div>
</div>

2528
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

13
package.json
View file

@ -8,6 +8,11 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint:js": "eslint .",
"lint:css": "stylelint \"**/*.css\"",
"lint:html": "htmlhint \"**/*.html\" --ignore=\"dist/**,legacy/**,node_modules/**\"",
"lint": "npm run lint:js && npm run lint:css && npm run lint:html",
"format": "prettier --write .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@ -22,6 +27,14 @@
},
"homepage": "https://github.com/SamidyFR/monochrome#readme",
"devDependencies": {
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
"globals": "^17.0.0",
"htmlhint": "^1.8.0",
"prettier": "^3.7.4",
"stylelint": "^16.26.1",
"stylelint-config-standard": "^39.0.1",
"stylelint-config-standard-scss": "^16.0.0",
"vite": "^7.3.0",
"vite-plugin-pwa": "^1.2.0"
},