Implement and Style 404 Error Page with Vue Router Integration #532

[kris70lesgo]

Fixes

• Related to #[532] by @[TimidRobot]

Description

-Ensures error pages do not break the flow of the user by preventing navigation disruption as well as ensuring the application's consistency. -It designs error pages to be as light as possible, thereby optimizing performance and reducing resource usage for faster load times. -It develops a dedicated ErrorPage.vue component with a clean and minimal aesthetic, styled and themed to fit into the overall design without being too heavy. -Proper routing is set up through Vue Router to correctly catch 404s, meaning implementation does not use Legacy (Vue) Vocabulary components.

Technical details

The ErrorPage.vue component was built to show a styled 404 error page using semantic HTML and scoped CSS for a minimal and responsive design. The Vue Router was set up in index.js to forward all unmatched routes (*) to this component so that any invalid URLs were handled seamlessly. The lightweight layout of the error page keeps design consistency and loads fast, with a temporary external background image that could be replaced with a local asset later for more reliability.

Tests

• Verified that the error page appears when accessing non-existent routes.
• Confirmed that the page is styled properly and responsive across different screen sizes.
• Checked that the page is lightweight and does not negatively impact the app’s performance.

Screenshots

Checklist

• [x] My pull request has a descriptive title (not a vague title like Update index.md).
• [x] My pull request targets the default branch of the repository (main or master).
• [x] My commit messages follow best practices.
• [x] My code follows the established code style of the repository.
• [ ] I added or updated tests for the changes I made (if applicable).
• [ ] I added or updated documentation (if applicable).
• [x] I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

For the purposes of this DCO, "license" is equivalent to "license or public domain dedication," and "open source license" is equivalent to "open content license or public domain dedication."

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[netlify[bot]]

✅ Deploy Preview for creativecommons-chooser ready!

Name	Link
🔨 Latest commit	7eae2a5e74c228d0d642d164dcb854a3efc0c2e5
🔍 Latest deploy log	https://app.netlify.com/sites/creativecommons-chooser/deploys/6784f5d81ab87d0008a06d02
😎 Deploy Preview	https://deploy-preview-561--creativecommons-chooser.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[kris70lesgo]

@TimidRobot @Shafiya-Heena @possumbilities pls review this pr for issue [Feature] Style and Theme Error Pages #532 (https://github.com/creativecommons/chooser/issues/532)

[possumbilities]

@kris70lesgo Hi, and thanks for this!

This PR would also need to build out its changes to /docs (which adds proper preview to the Netlify deploy, and also would ensure the project is deployed correctly on post merger).

[possumbilities]

@kris70lesgo Thanks for this, can you please (while not losing all your descriptive content within the PR's content) re-add all the things you deleted from the PR template and fill it out fully (as relevant)? It is now missing pieces that need to be present to be merged.

[possumbilities]

Rendered obsolete by the new Chooser:

• https://github.com/creativecommons/chooser/pull/570

Closing.