diff --git a/src/sections/404/404.style.js b/src/sections/404/404.style.js
index f5997e283a1c2..23277ae8e28a1 100644
--- a/src/sections/404/404.style.js
+++ b/src/sections/404/404.style.js
@@ -1,42 +1,49 @@
import styled from "styled-components";
const L404SectionWrapper = styled.section`
- padding: 150px 0 100px 0;
- position: relative;
- overflow: hidden;
- text-align: center;
+ padding: 150px 0 100px 0;
+ position: relative;
+ overflow: hidden;
+ text-align: center;
- h1.message {
- font-size: 2rem;
- line-height: 2rem;
- transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
- }
- h2.subtitle {
- font-weight: 400;
- font-size: 1.5rem;
- color: ${props => props.theme.greyDEE3DEToGrey363636};
- font-style: italic;
- margin-top: 2.5rem;
- transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ h1.message {
+ font-size: 2rem;
+ line-height: 2rem;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ h2.subtitle {
+ font-weight: 400;
+ font-size: 1.5rem;
+ color: ${(props) => props.theme.greyDEE3DEToGrey363636};
+ font-style: italic;
+ margin-top: 2.5rem;
+ transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+ .button-row {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 2.5rem;
+ gap: 1.2rem;
+
+ img {
+ display: block;
+ margin: auto;
+ margin-top: 3.125rem;
+ max-width: 50%;
+ @media only screen and (max-width: 700px) {
+ max-width: 100%;
+ }
}
- .button-row{
- display: flex;
- flex-direction: column;
- img{
- display:block;
- margin:auto;
- margin-top: 3.125rem;
- max-width: 50%;
- @media only screen and (max-width:700px){
- max-width: 100%;
- }
- }
-
- button{
- margin-top: 2.5rem;
- color: black;
- }
+
+ button,
+ a {
+ width: 100%;
+ max-width: 280px;
+ margin: 0;
+ color: black;
}
+ }
`;
export default L404SectionWrapper;
diff --git a/src/sections/404/index.js b/src/sections/404/index.js
index 0908b765bfb54..6f17cc347ddec 100644
--- a/src/sections/404/index.js
+++ b/src/sections/404/index.js
@@ -76,6 +76,9 @@ const messages = [
const L404 = () => {
const [message, setMessage] = useState(null);
+ const [reportUrl, setReportUrl] = useState(
+ "https://github.com/layer5io/layer5/issues/new?template=bug_report.md",
+ );
const getRandomMessage = () => {
return messages[Math.floor(Math.random() * messages.length)];
@@ -83,12 +86,61 @@ const L404 = () => {
useEffect(() => {
setMessage(getRandomMessage());
+
+ if (typeof window !== "undefined") {
+ const brokenUrl = window.location.href;
+ const referrer = document.referrer || "Direct / Bookmark";
+ const platform = navigator.platform || "Unknown OS";
+ const userAgent = navigator.userAgent;
+ const issueTitle = encodeURIComponent("[404] Broken Link Found");
+ const issueBody = encodeURIComponent(
+ "### Description\n\n" +
+ "Broken link encountered on the Layer5 website.\n\n" +
+ `- Broken URL: ${brokenUrl}\n` +
+ `- Referrer: ${referrer}\n\n` +
+ "### Expected Behavior\n\n" +
+ "The requested page should resolve successfully instead of returning a 404 page.\n\n" +
+ "### Screenshots\n\n" +
+ "N/A\n\n" +
+ "### Environment:\n" +
+ `- Host OS: ${platform}\n` +
+ `- Browser: ${userAgent}\n\n` +
+ "---\n\n" +
+ '
Join the Layer5 Community by submitting your [community member form](https://layer5.io/newcomer).',
+ );
+ setReportUrl(
+ `https://github.com/layer5io/layer5/issues/new?template=bug_report.md&title=${issueTitle}&body=${issueBody}`,
+ );
+ }
}, []);
const handleNewMessage = () => {
setMessage(getRandomMessage());
};
+ const handleReportBrokenLink = (e) => {
+ if (e) {
+ e.preventDefault();
+ }
+ if (typeof window !== "undefined") {
+ const referrer = document.referrer;
+ if (!referrer) {
+ const confirmReport = window.confirm(
+ "It looks like you may have accessed this page directly. If you manually entered the URL, please double-check it before reporting a broken link.\n\nDo you still want to continue?",
+ );
+ if (!confirmReport) {
+ return;
+ }
+ }
+ window.open(reportUrl, "_blank", "noopener,noreferrer");
+ }
+ };
+
if (!message) return null; // Prevents flash before random message loads
return (
@@ -116,6 +168,15 @@ const L404 = () => {
>
Show another message
+
+