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" + + '

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}`, + ); + } }, []); 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 + +