#6708 - how to use images in code #6731
Conversation
thnaylor
requested review from
preschian and
daiagi
and removed request for
a team
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
AI-Generated Summary: This pull request addresses issue #6708, regarding the use of images in the code. It introduces changes to both the .eslintrc.js and STYLE_GUIDE.md files. In .eslintrc.js, imports have been restricted and rules updated to include components in various formats (JS, TS, VUE). Additionally, the 'no-restricted-imports' rule has been added, with a warning message advising against directly importing image files using JavaScript. Instead, the use of HTML tags and URL paths is recommended. This change has also been reflected in the STYLE_GUIDE.md, which now includes a new section on how to work with images, mandates kebab-case for image file naming and recommends the .webp format. Example codes for bad and good practice were added as well. As such, this pull request aims to enforce better practices for using images in code, enhancing readability and maintainability. |
|
Reviewpad Report
|
|
exactly
|
.eslintrc.js
Outdated
| ], | ||
| rules: { | ||
| 'no-restricted-imports': [ | ||
| 'warn', |
There was a problem hiding this comment.
Cool. Can we force it as an 'error'? Haha 🤣
There was a problem hiding this comment.
Thanks, I have updated the rule to an 'error'.
The linter will now 'ELIFECYCLE Command failed with exit code 1" if an image import is found.
| files: [ | ||
| 'layouts/**/*.{js,ts,vue}', | ||
| 'pages/**/*.vue', | ||
| 'components/**/*.{js,ts,vue}', |
There was a problem hiding this comment.
oh, need more folders, just in case
utils, stores, services, plugins, composables
There was a problem hiding this comment.
The following suggested directories have been added.
…rectories for image import check
|
Code Climate has analyzed commit c76b01a and detected 0 issues on this pull request. View more on Code Climate. |
|
Kudos, SonarCloud Quality Gate passed!
|
|
pay 50 usd |
|
😍 Perfect, I’ve sent the payout 🪅 Let’s grab another issue and get rewarded! |
Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.
👇 __ Let's make a quick check before the contribution.
PR Type
Context
Did your issue had any of the "$" label on it?
Screenshot
Added lint warning when importing common image file types in page, layouts & component directories.
Updated STYLE_GUIDE.md with new conventions as mentioned in build: reduce manifest size #6707 & Style guide: how to use images in the code #6708
Copilot Summary
🤖 Generated by Copilot at 50d178b
This pull request enhances the style guide for image handling and adds a linting rule to enforce it. It aims to improve the performance and accessibility of the NFT gallery website by using HTML tags and URL paths for images instead of JavaScript imports.
🤖 Generated by Copilot at 50d178b