Enhancement: Replace <img> tags with Next.js Image Component #824 #985
Conversation
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
29deepanshutyagi
changed the title
|
Hey could you please link the related issue number in your description. |
|
issue #824 , @DarhkVoyd |
There was a problem hiding this comment.
Hey! thanks for working on this issue.
- I just left a few comments on some individual changes, please consider those.
- More importantly, many of these changes will actually cause errors on pages, not limited to
/docsand/toolswhich are two important pages, due the the fact that thenext/imagecomponent expectswidthandheightattributes which is missing from most of the instances.
Note: The errors are suppressed in the production build so you will have to check/debug them in development.
| @@ -53,7 +56,8 @@ module.exports = { | |||
| 'keyword-spacing': ['error', { before: true, after: true }], | |||
| 'comma-spacing': ['error', { before: false, after: true }], | |||
| 'key-spacing': ['error', { beforeColon: false, afterColon: true }], | |||
| '@next/next/no-img-element': 'off', | |||
| // Change this rule from 'off' to 'error' | |||
There was a problem hiding this comment.
What is the need of this comment? This PR does change it to 'error'.
There was a problem hiding this comment.
I do not understand the changes made to this component. Could you please explain how is this relevant to this PR?
| src='/logo-white.svg' | ||
| alt=' logo-white' | ||
| className='h-4 mr-1.5' | ||
| />{' '} |
There was a problem hiding this comment.
I believe {' '} is a unwanted spacing added by your formatter.
| @@ -10,6 +10,8 @@ import { useTheme } from 'next-themes'; | |||
| import DarkModeToggle from './DarkModeToggle'; | |||
| import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment'; | |||
| import ScrollButton from './ScrollButton'; | |||
| import Image from 'next/image'; | |||
| import { title } from 'process'; | |||
There was a problem hiding this comment.
Why are we importing process.title, seems like a mistake?
There was a problem hiding this comment.
We probably don't need much of these simple comments.
| @@ -8,7 +8,7 @@ import { SegmentHeadline } from './Layout'; | |||
| import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment'; | |||
| import CarbonAds from './CarbonsAds'; | |||
| import { useTheme } from 'next-themes'; | |||
| import ExternalLinkIcon from '../public/icons/external-link-black.svg'; | |||
| @@ -206,7 +207,7 @@ const Home = (props: any) => { | |||
| const [airbnb_logo, setAirbnb_logo] = useState(''); | |||
| const [postman_logo, setPostman_logo] = useState(''); | |||
| const [itflashcards_logo, setItflashcards_logo] = useState(''); | |||
| const [route4me_logo, setRoute4me_logo] = useState(''); | |||
There was a problem hiding this comment.
Why do we no longer need this?
There was a problem hiding this comment.
sure , i will resolve these issues and will raise pr soon
There was a problem hiding this comment.
You don't have to close this PR, you can continue adding commits to this.
Replaced all img HTML tags with the Image component across the codebase for better optimization and consistency.
Removed certain unnecessary configurations and added the error level to the ESLint configuration to enforce stricter code quality.
Ensured the changes pass linting and the build process before submission.
Removed outdated drafts and unnecessary files to streamline the project structure.
Changes are pushed through the img branch.