Add GitHub issue link and template

Author: josh-wong

src/components/Support/SupportDropdownMenu.tsx

@@ -1,17 +1,21 @@
 import React, { useState, useEffect, useRef } from 'react';
-import styles from '@site/src/css/SupportDropdownMenu.module.css';
 import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
 import ContactSupportLink from "./ContactSupportLink"; // Import the Enterprise support link.
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
 
 const DropdownMenu: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  // Get document metadata from Docusaurus.
+  const { metadata } = useDoc();
+  const docTitle = metadata?.title || "Issue with documentation page"; // Use document title or fallback.
+
   // Detect the language based on the URL path.
-  const isJapanese = window.location.pathname.startsWith("/ja-jp");
+  const isJapanese = typeof window !== "undefined" && window.location.pathname.startsWith("/ja-jp");
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
@@ -27,6 +31,58 @@ const DropdownMenu: React.FC = () => {
     setIsModalOpen(false);
   };
 
+  // Generate GitHub issue URL dynamically.
+  const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
+
+  // Define issue title dynamically based on language.
+  const issueTitle = encodeURIComponent(
+    isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
+  );
+
+  // Define issue body dynamically based on language.
+  const issueBody = encodeURIComponent(
+    isJapanese
+      ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
+
+## 期待される動作
+
+どのような動作を期待しましたか？
+
+## 問題の説明
+
+問題の内容をわかりやすく説明してください。
+
+### 再現手順 (該当する場合)
+
+問題を再現できる場合、手順を記載してください。
+
+### スクリーンショット (該当する場合)
+
+該当する場合は、スクリーンショットを添付してください。
+`
+    : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+
+## Expected behavior
+
+What did you expect to happen?
+
+## Describe the problem
+
+Please provide a clear and concise description of what the issue is.
+
+### Steps to reproduce (if applicable)
+
+If the issue is reproducible, please list the steps to reproduce it.
+
+### Screenshots (if applicable)
+
+If applicable, add screenshots to help explain your problem.
+`
+);
+
+  // Construct the GitHub issue URL.
+  const githubIssueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+
   // Close the dropdown when clicking outside of the content container.
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -45,21 +101,24 @@ const DropdownMenu: React.FC = () => {
   }, [isOpen]);
 
   return (
-    <div className={styles.supportDropdown} ref={dropdownRef}>
       <button className={styles.supportDropBtn} onClick={toggleDropdown}>
         {isJapanese ? "サポート" : "Support"} <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
       </button>
 
       {isOpen && (
-        <div className={styles.supportDropdownContent}>
           <ContactSupportLink />
+          <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
-            <b>Stack Overflow</b><br />{isJapanese ? "コミュニティ向けの質問" : "For questions to the community"}
           </a>
+          <hr />
           <a href="#" onClick={openModal}>
-            <b>{isJapanese ? "AI アシスタント（実験的）" : "AI assistant (experimental)"}</b><br />
             {isJapanese ? "Scalar メンバーシッププログラム向け" : "For Scalar Membership Program members"}
           </a>
+          <hr />
+          <a href={githubIssueUrl} target="_blank" rel="noopener noreferrer">
+            <b>{isJapanese ? "ドキュメントの問題を報告" : "Report doc issue"}</b><br />
+            {isJapanese ? "このページに関する問題を報告" : "For reporting an issue on this page"}
+          </a>
         </div>
       )}