add bug report redirecter

Author: CodeShellDev

docusaurus.config.js

@@ -47,6 +47,11 @@ const config = {
 
 	onBrokenLinks: "warn",
 
+	customFields: {
+		bug_report:
+			"https://raw.githubusercontent.com/CodeShellDev/secured-signal-api/refs/heads/main/.github/ISSUE_TEMPLATE/external.bug_report.md",
+	},
+
 	i18n: {
 		defaultLocale: "en",
 		locales: ["en"],

src/components/HomepageFeatures/index.js

@@ -58,6 +58,7 @@ function Feature({ title, description, Svg }) {
 		</div>
 	)
 }
+
 export default function HomepageFeatures() {
 	return (
 		<section className={styles.features}>

src/components/IssueReport/index.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+
+export default function IssueReport({ templateUrl, labels = [], title = "" }) {
+	const { siteConfig } = useDocusaurusContext()
+	const { organizationName, projectName } = siteConfig
+
+	const REPO_ISSUE_URL = `https://github.com/${organizationName}/${projectName}/issues/new`
+
+	useEffect(() => {
+		async function buildIssue() {
+			let template = await fetch(templateUrl).then((r) => r.text())
+
+			const params = new URLSearchParams(window.location.search)
+
+			const version = params.get("version")
+
+			if (version) {
+				labels.push(version)
+			}
+
+			params.forEach((value, key) => {
+				template = template.replaceAll(`\${[{${key.toUpperCase()}}]}`, value)
+			})
+
+			const regex = /\$\{\[\{[A-Z0-9_]+\}\]\}/g
+
+			template = template.replaceAll(regex, "")
+
+			const body = encodeURIComponent(template)
+
+			const labelString = Array.isArray(labels) ? labels.join(",") : labels
+
+			const url = `${REPO_ISSUE_URL}?labels=${encodeURIComponent(
+				labelString,
+			)}&title=${title}&body=${body}${version ? `&milestone=${version}` : ""}`
+
+			window.location.href = url
+		}
+
+		buildIssue()
+	}, [templateUrl, REPO_ISSUE_URL, labels])
+
+	return ""
+}

src/pages/report/bug.js

@@ -0,0 +1,29 @@
+import React from "react"
+import Heading from "@theme/Heading"
+import Layout from "@theme/Layout"
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+
+import IssueReport from "@site/src/components/IssueReport"
+
+import styles from "./index.module.css"
+
+export default function ReportBugPage() {
+	const { siteConfig } = useDocusaurusContext()
+
+	return (
+		<Layout
+			title={`${siteConfig.title}`}
+			description="Official Secured Signal API Documentation"
+		>
+			<IssueReport
+				templateUrl={siteConfig.customFields.bug_report}
+				labels={["bug"]}
+			/>
+			<div className={styles.centered}>
+				<Heading as="h3">Creating Issue</Heading>
+				<Heading as="h4">preparing bug report…</Heading>
+			</div>
+		</Layout>
+	)
+}

src/pages/report/index.module.css

@@ -0,0 +1,9 @@
+.centered {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: 70vh;
+
+	flex-direction: column;
+}