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

kris70lesgo · 2025-01-12T10:05:17Z

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

My pull request has a descriptive title (not a vague title like Update index.md).
My pull request targets the default branch of the repository (main or master).
My commit messages follow best practices.
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).
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.

- Created ErrorPage component for 404 handling. - Configured Vue Router to redirect to ErrorPage for undefined routes. - Verified 404 error page layout and functionality.

netlify · 2025-01-12T10:05:36Z

✅ Deploy Preview for creativecommons-chooser ready!

Name	Link
🔨 Latest commit	`7eae2a5`
🔍 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 · 2025-01-13T03:22:16Z

@TimidRobot @Shafiya-Heena @possumbilities pls review this pr for issue [Feature] Style and Theme Error Pages #532 (#532)

src/components/ErrorPage.vue

Co-authored-by: Olga Bulat <obulat@gmail.com>

possumbilities · 2025-01-13T17:39:05Z

@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 · 2025-01-15T15:21:09Z

src/components/ErrorPage.vue

+    margin-top: -50px;
+  }
+  </style>
+


missing End of File

possumbilities · 2025-01-15T15:22:12Z

src/components/ErrorPage.vue

+                <h1 class="text-center">404</h1>
+              </div>
+
+              <div class="contant_box_404">


spelling error contant should be content

possumbilities · 2025-01-15T15:23:02Z

src/components/ErrorPage.vue

+  }
+
+  .four_zero_four_bg {
+    background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);


We would not want to pull in assets like this from a third-party. Please remove.

possumbilities · 2025-01-15T15:24:57Z

@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.

Set up router with 404 error page

9251a9c

- Created ErrorPage component for 404 handling. - Configured Vue Router to redirect to ErrorPage for undefined routes. - Verified 404 error page layout and functionality.

kris70lesgo requested review from a team as code owners January 12, 2025 10:05

kris70lesgo requested review from TimidRobot, Shafiya-Heena and obulat and removed request for a team January 12, 2025 10:05

obulat reviewed Jan 13, 2025

View reviewed changes

src/components/ErrorPage.vue Outdated Show resolved Hide resolved

Update src/components/ErrorPage.vue

7eae2a5

Co-authored-by: Olga Bulat <obulat@gmail.com>

possumbilities linked an issue Jan 15, 2025 that may be closed by this pull request

[Feature] Error pages are not styled/themed #532

Open

1 task

possumbilities reviewed Jan 15, 2025

View reviewed changes

src/components/ErrorPage.vue

margin-top: -50px;

}

</style>

Copy link

Contributor

possumbilities Jan 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing End of File

possumbilities reviewed Jan 15, 2025

View reviewed changes

kris70lesgo changed the title ~~Set up router with 404 error page #532~~ Implement and Style 404 Error Page with Vue Router Integration #532 Jan 16, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kris70lesgo commented Jan 12, 2025 •

edited

Loading

netlify bot commented Jan 12, 2025 •

edited

Loading

kris70lesgo commented Jan 13, 2025

possumbilities commented Jan 13, 2025

possumbilities Jan 15, 2025

possumbilities Jan 15, 2025

possumbilities Jan 15, 2025

possumbilities commented Jan 15, 2025

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

Are you sure you want to change the base?

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

Conversation

kris70lesgo commented Jan 12, 2025 • edited Loading

Fixes

Description

Technical details

Tests

Screenshots

Checklist

Developer Certificate of Origin

netlify bot commented Jan 12, 2025 • edited Loading

✅ Deploy Preview for creativecommons-chooser ready!

kris70lesgo commented Jan 13, 2025

possumbilities commented Jan 13, 2025

possumbilities Jan 15, 2025

Choose a reason for hiding this comment

possumbilities Jan 15, 2025

Choose a reason for hiding this comment

possumbilities Jan 15, 2025

Choose a reason for hiding this comment

possumbilities commented Jan 15, 2025

kris70lesgo commented Jan 12, 2025 •

edited

Loading

netlify bot commented Jan 12, 2025 •

edited

Loading