From 1d06836945683708080a86bf485273c36aa2765d Mon Sep 17 00:00:00 2001 From: ananyaa Date: Wed, 1 Jul 2026 23:25:45 +0530 Subject: [PATCH 1/4] feat: add broken link reporting workflow to 404 page Signed-off-by: ananyaa --- src/sections/404/404.style.js | 70 ++++++++++++++++++----------------- src/sections/404/index.js | 30 +++++++++++++++ 2 files changed, 67 insertions(+), 33 deletions(-) diff --git a/src/sections/404/404.style.js b/src/sections/404/404.style.js index f5997e283a1c2..d756f8263d94d 100644 --- a/src/sections/404/404.style.js +++ b/src/sections/404/404.style.js @@ -1,42 +1,46 @@ 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: row; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; + margin-top: 2.5rem; + + 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 { + color: black; } + } `; export default L404SectionWrapper; diff --git a/src/sections/404/index.js b/src/sections/404/index.js index 0908b765bfb54..5054a539a9573 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,6 +86,23 @@ const L404 = () => { useEffect(() => { setMessage(getRandomMessage()); + + if (typeof window !== "undefined") { + const brokenUrl = window.location.href; + const referrer = document.referrer || "Direct / Bookmark"; + const userAgent = navigator.userAgent; + const issueTitle = encodeURIComponent("[404] Broken Link Found"); + const issueBody = encodeURIComponent( + "### 404 Broken Link Report\n\n" + + `- **Broken URL:** ${brokenUrl}\n` + + `- **Referrer:** ${referrer}\n` + + `- **User Agent:** ${userAgent}\n\n` + + "*Reported automatically by the 404 Page.*", + ); + setReportUrl( + `https://github.com/layer5io/layer5/issues/new?template=bug_report.md&title=${issueTitle}&body=${issueBody}`, + ); + } }, []); const handleNewMessage = () => { @@ -116,6 +136,16 @@ const L404 = () => { > Show another message + + From f7302489ddb73404f6425976e4c63bbb10a525fb Mon Sep 17 00:00:00 2001 From: ananyaa Date: Sat, 4 Jul 2026 21:05:06 +0530 Subject: [PATCH 2/4] feat: update 404 page styling and enhance broken link reporting details Signed-off-by: ananyaa --- src/sections/404/404.style.js | 7 ++----- src/sections/404/index.js | 24 +++++++++++++++++++----- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/sections/404/404.style.js b/src/sections/404/404.style.js index d756f8263d94d..3df6be1519425 100644 --- a/src/sections/404/404.style.js +++ b/src/sections/404/404.style.js @@ -21,11 +21,7 @@ const L404SectionWrapper = styled.section` } .button-row { display: flex; - flex-direction: row; - justify-content: center; - gap: 1.5rem; - flex-wrap: wrap; - margin-top: 2.5rem; + flex-direction: column; img { display: block; @@ -38,6 +34,7 @@ const L404SectionWrapper = styled.section` } button { + margin-top: 2.5rem; color: black; } } diff --git a/src/sections/404/index.js b/src/sections/404/index.js index 5054a539a9573..17b8463c5269e 100644 --- a/src/sections/404/index.js +++ b/src/sections/404/index.js @@ -90,14 +90,28 @@ const L404 = () => { 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( - "### 404 Broken Link Report\n\n" + - `- **Broken URL:** ${brokenUrl}\n` + - `- **Referrer:** ${referrer}\n` + - `- **User Agent:** ${userAgent}\n\n` + - "*Reported automatically by the 404 Page.*", + "### 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" + + '

Contributor Resources and Handbook

\n\n' + + "The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master).\n" + + "- πŸ“š See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md).\n" + + "- 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/GvB8SudhEOoq3JOvoLaoMs)\n" + + "- πŸ™‹πŸΎπŸ™‹πŸΌ Questions: [Discussion Forum](https://discuss.meshery.io) and [Community Slack](https://slack.layer5.io).\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}`, From eb70808d85ac8dc6a663ab7a2e1aa6a0984b13e9 Mon Sep 17 00:00:00 2001 From: ananyaa Date: Sun, 5 Jul 2026 20:17:11 +0530 Subject: [PATCH 3/4] fix: standardize 404 page action button sizing Signed-off-by: ananyaa --- src/sections/404/404.style.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/sections/404/404.style.js b/src/sections/404/404.style.js index 3df6be1519425..23277ae8e28a1 100644 --- a/src/sections/404/404.style.js +++ b/src/sections/404/404.style.js @@ -22,6 +22,9 @@ const L404SectionWrapper = styled.section` .button-row { display: flex; flex-direction: column; + align-items: center; + margin-top: 2.5rem; + gap: 1.2rem; img { display: block; @@ -33,8 +36,11 @@ const L404SectionWrapper = styled.section` } } - button { - margin-top: 2.5rem; + button, + a { + width: 100%; + max-width: 280px; + margin: 0; color: black; } } From e792cfb7677cf13ecd2b0e4e42f08ad455c3a7d3 Mon Sep 17 00:00:00 2001 From: ananyaa Date: Sat, 11 Jul 2026 08:57:33 +0530 Subject: [PATCH 4/4] fix: add confirmation before reporting broken links Signed-off-by: ananyaa --- src/sections/404/index.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/sections/404/index.js b/src/sections/404/index.js index 17b8463c5269e..6f17cc347ddec 100644 --- a/src/sections/404/index.js +++ b/src/sections/404/index.js @@ -123,6 +123,24 @@ const L404 = () => { 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 ( @@ -155,8 +173,7 @@ const L404 = () => { id="report-broken-link" aria-label="report-broken-link-button" $secondary - $url={reportUrl} - $external={true} + onClick={handleReportBrokenLink} > Report Broken Link