add functionality to share faq item (#112)

* add functionality to share faq item

* clean hash from url after close of faq item

* simplify hashes

* refactor

* use id instead of summary

* stop unnecessary rerendering

* use hash

* update condition to set/remove hash

* remove unused condition

* rebase improvements

* scroll to opened faq

* on click scroll to

* apply faq scroll to every page

faq.mdx

@@ -1,10 +1,10 @@
-<AccordionItem summary="What is OpenTofu?" open highlight>
+<AccordionItem id="what-is-opentofu" summary="What is OpenTofu?" open highlight>
 
 OpenTofu is a Terraform fork, created as an initiative of Gruntwork, Spacelift, Harness, Env0, Scalr, and others, in response to HashiCorp’s switch from an open-source license to the BUSL. The initiative has many supporters, all of whom are listed [here](/supporters).
 
 </AccordionItem>
 
-<AccordionItem summary="Why was OpenTofu created?" highlight>
+<AccordionItem id="why-was-opentofu-created" summary="Why was OpenTofu created?" highlight>
 
 The BUSL and the additional use grant outlined by the HashiCorp team are ambiguous, which makes it challenging for companies, vendors, and developers using Terraform to decide whether their actions could be interpreted as being outside the permitted scope of use.
 
@@ -14,13 +14,13 @@ We firmly believe that Terraform should remain open-source because it is a proje
 
 </AccordionItem>
 
-<AccordionItem summary="What are the differences between OpenTofu and Terraform?" highlight>
+<AccordionItem id="opentofu-terraform-differences" summary="What are the differences between OpenTofu and Terraform?" highlight>
 
 There will be no differences between Terraform (versions prior to 1.5.x) and OpenTofu. As new versions are released, this will change.
 
 </AccordionItem>
 
-<AccordionItem summary="Why should you use OpenTofu instead of Terraform?" highlight>
+<AccordionItem id="why-use-opentofu" summary="Why should you use OpenTofu instead of Terraform?" highlight>
 
 #### Personal use
 
@@ -36,40 +36,40 @@ Companies will encounter more difficulties with the situation. Switching to a ne
 
 </AccordionItem>
 
-<AccordionItem summary="Will OpenTofu be compatible with future Terraform releases?" highlight>
+<AccordionItem id="opentofu-compatibility" summary="Will OpenTofu be compatible with future Terraform releases?" highlight>
 
 The community will decide what features OpenTofu will have. Some long-awaited Terraform features will be publicly available soon.
 
 Some companies have pledged to pay for full-time engineers to work on OpenTofu. We have 19 such engineers involved already — and many other individuals, companies, projects, and foundations are prepared to contribute.
 
 </AccordionItem>
 
-<AccordionItem summary="Can I use OpenTofu as a drop-in replacement for Terraform?  Is OpenTofu suitable for production use?" highlight>
+<AccordionItem id="terraform-replacement" summary="Can I use OpenTofu as a drop-in replacement for Terraform?  Is OpenTofu suitable for production use?" highlight>
 
 Initially, OpenTofu will be a drop-in replacement for Terraform, as it will be compatible with Terraform versions 1.5.x. You won’t need to make any changes to your code to ensure compatibility.
 OpenTofu is suitable for production use cases without any exception.
 
 </AccordionItem>
 
-<AccordionItem summary="Will OpenTofu work with my existing state file?">
+<AccordionItem id="state-file" summary="Will OpenTofu work with my existing state file?">
 
 OpenTofu will work with existing state files up to those created with a version prior to Terraform’s 1.5.x.
 
 </AccordionItem>
 
-<AccordionItem summary="Does OpenTofu work with all the providers Terraform works with?">
+<AccordionItem id="providers" summary="Does OpenTofu work with all the providers Terraform works with?">
 
 OpenTofu will not have its own providers. Terraform providers have not altered their licenses, and the potential for such a change is virtually zero. OpenTofu will work with the current Terraform providers, but it will use a separate registry.
 
 </AccordionItem>
 
-<AccordionItem summary="How are new features, bug fixes, and other development decisions made in OpenTofu?">
+<AccordionItem id="decisions" summary="How are new features, bug fixes, and other development decisions made in OpenTofu?">
 
 The steering committee and the community determine the most important features and bug fixes. The large number of developers pledging their resources to help develop OpenTofu will speed up the development of features and enable faster releases than Terraform managed previously.
 
 </AccordionItem>
 
-<AccordionItem summary="How can I contribute to OpenTofu?">
+<AccordionItem id="contribution" summary="How can I contribute to OpenTofu?">
 
 The best way to show practical support for the OpenTofu initiative is to contribute. We recommend you start by [opening an issue](https://github.com/opentofu/opentofu/blob/main/CONTRIBUTING.md) for bug reports, broken compatibility reports, feature requests, old issue reposts, and quality RFCs.
 
@@ -79,7 +79,7 @@ This [contribution guide](https://github.com/opentofu/opentofu/blob/main/CONTRIB
 
 </AccordionItem>
 
-<AccordionItem summary="How can I pledge support?">
+<AccordionItem id="pledge" summary="How can I pledge support?">
 
 The pledge is open to all individuals and companies who care about the future of Terraform. You can also support this initiative by starring the manifesto repository on GitHub and spreading the word via share buttons.
 

src/components/Accordion/Item.tsx

@@ -1,11 +1,15 @@
 import clsx from "clsx";
-import React, { useRef } from "react";
+import { useLocation } from "@docusaurus/router";
+
+import React, { useEffect, useRef } from "react";
 
 type AccordionItemProps = {
   children: React.ReactNode;
   summary: string;
   open?: boolean;
   highlight?: boolean;
+  id: string;
+  isHashEnabled?: boolean;
 };
 
 const classNames = [
@@ -30,17 +34,61 @@ const classNames = [
   "font-normal",
 ];
 
-const AccordionItem = ({ summary, open, children }: AccordionItemProps) => {
+const AccordionItem = ({
+  summary,
+  open,
+  children,
+  id,
+  isHashEnabled,
+}: AccordionItemProps) => {
   const detailsRef = useRef(null);
+  const location = useLocation();
 
   const handleItemClick = () => {
     document.querySelectorAll("details.accordion-item").forEach((item) => {
       if (item !== detailsRef.current) {
         item.removeAttribute("open");
       }
     });
+
+    if (!detailsRef.current.hasAttribute("open")) {
+      // Push to end of queue to read updated position and scroll to it
+      setTimeout(() => {
+        detailsRef.current.scrollIntoView({ behavior: "smooth" });
+      });
+    }
+
+    if (!isHashEnabled) {
+      return;
+    }
+
+    if (detailsRef.current.hasAttribute("open")) {
+      window.history.replaceState({ hash: undefined }, "", location.pathname);
+    } else {
+      window.history.replaceState(
+        { hash: id },
+        "",
+        `${location.pathname}#${encodeURI(id)}`
+      );
+    }
   };
 
+  useEffect(() => {
+    if (decodeURI(location.hash) === `#${id}` && isHashEnabled) {
+      document.querySelectorAll("details.accordion-item").forEach((item) => {
+        if (item !== detailsRef.current) {
+          item.removeAttribute("open");
+        } else {
+          window.scrollTo({
+            top: detailsRef.current.offsetTop,
+            behavior: "smooth",
+          });
+          item.setAttribute("open", "true");
+        }
+      });
+    }
+  }, []);
+
   return (
     <details
       ref={detailsRef}

src/pages/faq.tsx

@@ -19,7 +19,9 @@ export default function FAQ() {
         <Accordion>
           <MDXProvider
             components={{
-              AccordionItem,
+              AccordionItem: (props) => (
+                <AccordionItem isHashEnabled {...props} />
+              ),
               a: (props) => (
                 <Link className="text-inherit underline" {...props} />
               ),