search

open-sauced / landing-page

This is the new landing page for open sauced
https://opensauced.pizza
32 stars 29 forks source link

Improve SEO, accessibility, and performance, and optimize codebase #203

Closed dev-phantom closed 6 months ago

dev-phantom commented 8 months ago

Description

This PR improves SEO, accessibility, and performance, and optimizes the codebase.

What type of PR is this? (check all applicable)

Related Tickets & Documents

Fixes #87

Mobile & Desktop Screenshots/Recordings

Old image

new microsoft edge lighthouse image new chrome image

Summary Of Changes Made:

  1. Added 'api.producthunt.com' to the next.config.js to enable communication with the Product Hunt API for fetching data.
  2. Changed link tags from to in multiple components and pages to improve SEO and accessibility.
  3. Deleted StarTheRepo.tsx file as it was not in use, which also helps improve Lighthouse score by reducing unnecessary code.
  4. Removed link stylesheet in Head in SEO file and added it to the _Document.tsx for better performance and organization.
  5. Changed <a> tag to <Image> component for embedding Product Hunt image, enhancing SEO and accessibility.
  6. Increased text opacity in the Footer.jsx to improve readability and accessibility, thus enhancing Lighthouse score.
  7. Removed unnecessary hidden <div> element from subscribe components to optimize code and improve accessibility.
  8. Changed <Image> component properties to use fill and inline styling for better rendering control and performance.
  9. Added a robots.txt file for SEO optimization.
  10. Changed from single quotes ('') to HTML entity for single quote (') for necessary escaping.

Reasons for Changes:

  • These changes aim to improve performance, SEO, accessibility, and code cleanliness, ultimately enhancing the overall quality of the project.

Added to documentation?

  • [ ] 📜 README.md
  • [ ] 📓 docs.opensauced.pizza
  • [ ] 🍕 dev.to/opensauced
  • [ ] 📕 storybook
  • [x] 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

Carefully review this PR as a lot of changes were made to a lot of file Thanks

[optional] What gif best describes this PR or how it makes you feel?

netlify[bot] commented 8 months ago

Deploy Preview for opensauced-landing ready!

Name Link
Latest commit ad849dddfdca5cfe0ba5dec14d1c02cca2cc303b
Latest deploy log https://app.netlify.com/sites/opensauced-landing/deploys/65e1f4bbc4a7df000819abcc
Deploy Preview https://deploy-preview-203--opensauced-landing.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

bdougie commented 8 months ago

Thanks for exploring this @dev-phantom

Not sure if the screen shot is a before or after. Can you add both?

dev-phantom commented 8 months ago

Thanks for exploring this @dev-phantom

Not sure if the screen shot is a before or after. Can you add both?

I've added a screenshot for both

dev-phantom commented 8 months ago

I noticed the lighthouse score changes on different browser, development and deployment stage Also my last 2 commit was not deployed by netlify has this SEO issue has been resolved

bdougie commented 7 months ago

@dev-phantom this PR might be doing to much to give it a proper review. My recommendation would be providing context on the approach in the issue. You commented take and then opened this PR. Take us on the journey to get here.

suggestion

4 separate PRs on the following

dev-phantom commented 7 months ago

@dev-phantom this PR might be doing to much to give it a proper review. My recommendation would be providing context on the approach in the issue. You commented take and then opened this PR. Take us on the journey to get here.

suggestion

4 separate PRs on the following

  • SEO
  • accessibility
  • performance
  • codebase optimizations.

ah! please how do i split the this pr? because i didn't break it into commits giphy

bdougie commented 7 months ago

ah! please how do i split the this pr? because i didn't break it into commits

The only option to split is starting over, but hold on that. I didn't see this section in the description. This actually make sit easier to review, but keep in mind you commits tell the story of how you got here. If that is not the case, the PR description can assist.

Summary Of Changes Made:

  1. Added 'api.producthunt.com' to the next.config.js to enable communication with the Product Hunt API for fetching data.
  2. Changed link tags from to in multiple components and pages to improve SEO and accessibility.
  3. Deleted StarTheRepo.tsx file as it was not in use, which also helps improve Lighthouse score by reducing unnecessary code.
  4. Removed link stylesheet in Head in SEO file and added it to the _Document.tsx for better performance and organization.
  5. Changed <a> tag to <Image> component for embedding Product Hunt image, enhancing SEO and accessibility.
  6. Increased text opacity in the Footer.jsx to improve readability and accessibility, thus enhancing Lighthouse score.
  7. Removed unnecessary hidden <div> element from subscribe components to optimize code and improve accessibility.
  8. Changed <Image> component properties to use fill and inline styling for better rendering control and performance.
  9. Added a robots.txt file for SEO optimization.
  10. Changed from single quotes ('') to HTML entity for single quote (') for necessary escaping.

My confusion here is the issue addresses accessibility, but the PR covers an array of things. That is outlined above, but I missed that.

Suggestion

  1. Leave this PR as-is
  2. Create a second PR that only addresses the accessibility fixes. Include a before and after screenshot.

We merge the accessibility PR first and all changes relating to accessibility in this PR will either go away or create a merge conflict, which will be manageable.

bdougie commented 6 months ago

This PR is not obtainable at this point. The path forward is smaller PRs that solve one or two problems at a time. My latest PR #260 addresses next steps.

If you have bandwidth let me know @dev-phantom, otherwise I can pick this up on Friday.

dev-phantom commented 6 months ago

This PR is not obtainable at this point. The path forward is smaller PRs that solve one or two problems at a time. My latest PR #260 addresses next steps.

If you have bandwidth let me know @dev-phantom, otherwise I can pick this up on Friday.

Oops so sorry about this I totally forgot I have some issues to be fixed here I've been caught up lately with exams and stuff

I'd try to resolve this today if I'm unable to do so I'd unassign myself so you can pick it up

Sorry for the delay