feat: add broken link reporting workflow to 404 page

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;

src/sections/404/index.js

@@ -76,13 +76,47 @@ 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)];
   };
 
   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" +
+          '<img src="https://raw.githubusercontent.com/layer5io/layer5/master/.github/assets/images/layer5/5-light-small.svg" width="24px" align="left" /><h2>Contributor Resources and <a href="https://layer5.io/community/handbook">Handbook</a></h2>\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" +
+          '<img src="https://raw.githubusercontent.com/layer5io/layer5/master/.github/assets/images/buttons/community.webp" height="22px" align="left" />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 = () => {
@@ -116,6 +150,16 @@ const L404 = () => {
           >
             Show another message
           </Button>
+
+          <Button
+            id="report-broken-link"
+            aria-label="report-broken-link-button"
+            $secondary
+            $url={reportUrl}
+            $external={true}
+          >
+            Report Broken Link
+          </Button>
         </div>
       </Container>
     </L404SectionWrapper>