[website] Add URL to GitHub issue link on 404 page (#4344)

Author: HalvorHaugan

aksel.nav.no/website/app/_ui/github-issue-link.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Link } from "@navikt/ds-react";
+
+interface Props {
+  labels: string;
+  template: "bug-report.md";
+  title: string;
+  includeUrlInBody?: boolean;
+  children: React.ReactNode;
+}
+
+export default function GitHubIssueLink({
+  labels,
+  template,
+  title,
+  includeUrlInBody,
+  children,
+}: Props) {
+  const url = typeof window === "undefined" ? "" : window.location.href;
+
+  const href =
+    "https://github.com/navikt/aksel/issues/new?" +
+    `labels=${encodeURIComponent(labels)}` +
+    `&template=${template}` +
+    `&title=${encodeURIComponent(title)}` +
+    `${includeUrlInBody ? `&body=${encodeURIComponent(`URL: ${url}`)}` : ""}`;
+
+  return <Link href={href}>{children}</Link>;
+}

aksel.nav.no/website/app/not-found.tsx

@@ -5,6 +5,7 @@ import Footer from "@/app/_ui/footer/Footer";
 import { Header } from "@/app/_ui/header/Header";
 import { WebsiteList, WebsiteListItem } from "@/app/_ui/typography/WebsiteList";
 import { UmamiNotFoundPageLog } from "@/app/_ui/umami/Umami.log";
+import GitHubIssueLink from "./_ui/github-issue-link";
 
 export default function NotFound() {
   return (
@@ -37,10 +38,15 @@ export default function NotFound() {
                   </WebsiteListItem>
                 </WebsiteList>
               </div>
-              <Link href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20404]">
+              <GitHubIssueLink
+                labels="bug 🐛"
+                template="bug-report.md"
+                title="[Aksel.nav.no - 404]"
+                includeUrlInBody
+              >
                 <BugIcon aria-hidden />
                 Meld gjerne fra om at lenken ikke virker
-              </Link>
+              </GitHubIssueLink>
             </VStack>
 
             <div>