📚 docs: open details section when linking items on it (#42402)

docusaurus/src/components/Details.jsx

@@ -0,0 +1,49 @@
+import { useLocation } from "@docusaurus/router";
+import classNames from "classnames";
+import React from "react";
+import styles from "./Details.module.css";
+
+export const Details = ({ className, children, ...rest }) => {
+  const location = useLocation();
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+
+  const items = React.Children.toArray(children);
+  const summary = items.find((item) => React.isValidElement(item) && item.type === "summary");
+  const content = items.filter((item) => React.isValidElement(item) && item.type !== "summary");
+
+
+  React.useEffect(() => {
+    const detailsHeaderId = ref.current?.previousElementSibling?.id
+    const contentIds = content
+      .map((element) => {
+        if (element.props.id) {
+          return `#${element.props.id}`;
+        }
+      })
+      .filter(Boolean);
+
+    if (contentIds.includes(location.hash) || location.hash === `#${detailsHeaderId}`) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [location.hash, content, summary, ref.current]);
+
+  return (
+    <details
+      open={open}
+      ref={ref}
+      className={classNames(
+        className,
+        "alert",
+        "alert--info",
+        styles.details
+      )}
+      {...rest}
+    >
+      {summary}
+      <div className={classNames(styles.detailsContent)}>{content}</div>
+    </details>
+  );
+};

docusaurus/src/components/Details.module.css

@@ -0,0 +1,41 @@
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-color-info-dark);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  border: 1px solid var(--ifm-color-info-dark);
+  margin: 0 0 var(--ifm-spacing-vertical);
+  --docusaurus-details-summary-arrow-size: 0.38rem;
+}
+
+.details > summary {
+  cursor: pointer;
+  list-style: none;
+  padding-left: 1rem;
+  position: relative;
+  display: flex;
+}
+
+.details>summary > p {
+  margin-bottom: 0;
+}
+
+.details > summary::before {
+  border-color: #0000 #0000 #0000 var(--docusaurus-details-decoration-color);
+  border-style: solid;
+  border-width: var(--docusaurus-details-summary-arrow-size);
+  content: "";
+  left: 0;
+  position: absolute;
+  top: 0.45rem;
+  transform: rotate(0);
+  transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
+  transition: var(--docusaurus-details-transition);
+}
+
+.details[open] > summary::before {
+  transform: rotate(90deg);
+}
+.detailsContent {
+  border-top: 1px solid var(--docusaurus-details-decoration-color);
+  margin-top: 1rem;
+  padding-top: 1rem;
+}

docusaurus/src/theme/MDXComponents/index.js

@@ -1,14 +1,14 @@
-import React from "react";
 // Import the original mapper
-import MDXComponents from "@theme-original/MDXComponents";
 import { AppliesTo } from "@site/src/components/AppliesTo";
+import { Arcade } from "@site/src/components/Arcade";
 import { FieldAnchor } from "@site/src/components/FieldAnchor";
-import { HideInUI } from "@site/src/components/HideInUI";
 import { HeaderDecoration } from "@site/src/components/HeaderDecoration";
-import { SpecSchema } from "@site/src/components/SpecSchema";
-import { PyAirbyteExample } from "@site/src/components/PyAirbyteExample";
+import { HideInUI } from "@site/src/components/HideInUI";
 import { ProductInformation } from "@site/src/components/ProductInformation";
-import { Arcade } from "@site/src/components/Arcade";
+import { PyAirbyteExample } from "@site/src/components/PyAirbyteExample";
+import { SpecSchema } from "@site/src/components/SpecSchema";
+import MDXComponents from "@theme-original/MDXComponents";
+import { Details } from "../../components/Details";
 
 export default {
   // Re-use the default mapping
@@ -21,4 +21,5 @@ export default {
   SpecSchema,
   PyAirbyteExample,
   ProductInformation,
+  Details,
 };