From 9cfa3ccea8fe7dc7e5ce2c1c12772bbe3a8e7e3b Mon Sep 17 00:00:00 2001
From: RDW <rdw-software@proton.me>
Date: Thu, 20 Feb 2025 17:56:59 +0100
Subject: [PATCH 1/2] API: Create a new Description MDX component

Inline MDX on its own would be fine, but without control over the CSS there's no way to render the description at full width.
---
 src/components/API/API.jsx           | 23 +++++++++++++++++++++++
 src/components/API/styles.module.css | 11 ++++++++++-
 src/theme/MDXComponents/index.js     |  2 ++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/API/API.jsx b/src/components/API/API.jsx
index 85595fa3..f5641e40 100644
--- a/src/components/API/API.jsx
+++ b/src/components/API/API.jsx
@@ -2,6 +2,28 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
+class Description extends React.Component {
+  render() {
+    const item = this.props.for || "Whoops";
+    const placeholderTitle = `${item}: There's nothing here yet :(`;
+    const fallback = <Placeholder title={placeholderTitle} />;
+
+    const children = this.props.childre;
+    if (!this.props.children) return fallback;
+    if (this.props.children) return fallback;
+
+    const hasMultipleChildren = children instanceof Array;
+    const content = hasMultipleChildren ? children : [children];
+
+    const description = (
+      <>
+        <div className={styles.descriptionBox}>{content}</div>
+      </>
+    );
+    return description;
+  }
+}
+
 class Function extends React.Component {
   render() {
     const since = this.props.since;
@@ -394,4 +416,5 @@ export {
   FFI,
   Placeholder,
   Blocking,
+  Description,
 };
diff --git a/src/components/API/styles.module.css b/src/components/API/styles.module.css
index 2cb12db0..ecda88f1 100644
--- a/src/components/API/styles.module.css
+++ b/src/components/API/styles.module.css
@@ -1,5 +1,11 @@
-.function {
+.flexRow {
   display: flex;
+  flex-direction: row;
+}
+
+.flexColumn {
+  display: flex;
+  flex-direction: column;
 }
 
 .functionParametersTable,
@@ -129,6 +135,9 @@ body {
   font-weight: 600;
 }
 
+.descriptionBox {
+  padding: 1rem 1rem;
+}
 .sinceBlock {
   border: 1px solid var(--ifm-color-primary-darkest);
   border-radius: 15px;
diff --git a/src/theme/MDXComponents/index.js b/src/theme/MDXComponents/index.js
index dbdd5fef..ae4e4f34 100644
--- a/src/theme/MDXComponents/index.js
+++ b/src/theme/MDXComponents/index.js
@@ -26,6 +26,7 @@ import {
   FFI,
   Placeholder,
   Blocking,
+  Description,
 } from "@site/src/components/API/API";
 
 import Admonition from "@theme/Admonition";
@@ -65,5 +66,6 @@ const MDXComponents = {
   FFI: FFI,
   Placeholder: Placeholder,
   Blocking: Blocking,
+  Description: Description,
 };
 export default MDXComponents;

From 946d516250480186656f5bb5ee051927ce435c42 Mon Sep 17 00:00:00 2001
From: RDW <rdw-software@proton.me>
Date: Thu, 20 Feb 2025 19:21:23 +0100
Subject: [PATCH 2/2] API: Enable MDX descriptions inside Function tags

This is surely going to fail in some edge cases, but I'd rather not mess with it any more than necessary right now.
---
 src/components/API/API.jsx           | 53 +++++++++++++++++++++++-----
 src/components/API/styles.module.css |  3 +-
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/API/API.jsx b/src/components/API/API.jsx
index f5641e40..f43324b2 100644
--- a/src/components/API/API.jsx
+++ b/src/components/API/API.jsx
@@ -4,17 +4,18 @@ import styles from "./styles.module.css";
 
 class Description extends React.Component {
   render() {
-    const item = this.props.for || "Whoops";
-    const placeholderTitle = `${item}: There's nothing here yet :(`;
-    const fallback = <Placeholder title={placeholderTitle} />;
+    const fallback = (
+      <>
+        <div className={styles.descriptionBox}></div>
+      </>
+    );
 
-    const children = this.props.childre;
+    const children = this.props.children;
     if (!this.props.children) return fallback;
-    if (this.props.children) return fallback;
 
-    const hasMultipleChildren = children instanceof Array;
+    const hasMultipleChildren =
+      children instanceof Array && children.length > 0;
     const content = hasMultipleChildren ? children : [children];
-
     const description = (
       <>
         <div className={styles.descriptionBox}>{content}</div>
@@ -25,9 +26,28 @@ class Description extends React.Component {
 }
 
 class Function extends React.Component {
+  mdxTypeToPlaceholderComponent(mdxType) {
+    const placeholdersByType = {
+      Description: <Description for={mdxType} />,
+      Parameters: <Description for={mdxType} />,
+      Returns: <Description for={mdxType} />,
+      Structures: <Description for={mdxType} />,
+    };
+    return placeholdersByType[mdxType];
+  }
+  findFirstChildByType(mdxType) {
+    const fallback = this.mdxTypeToPlaceholderComponent(mdxType);
+    const children =
+      this.props.children instanceof Array ? this.props.children : [];
+    if (!children || children.length === 0) return fallback;
+    return children.find((child) => child.props.mdxType == mdxType) || fallback;
+  }
   render() {
     const since = this.props.since;
-    const children = this.props.children;
+    const description = this.findFirstChildByType("Description");
+    const parameters = this.findFirstChildByType("Parameters");
+    const returnValues = this.findFirstChildByType("Returns");
+    const structs = this.findFirstChildByType("Structures");
 
     const isRunningInDevelopmentMode = process.env.NODE_ENV !== "production";
     if (isRunningInDevelopmentMode) {
@@ -57,12 +77,26 @@ class Function extends React.Component {
     return (
       <>
         {sinceBlock}
-        <div className={styles.function}>{children}</div>
+        <div className={styles.flexColumn}>
+          <div className={styles.flexRow}>{description}</div>
+          <div className={styles.flexRow}>
+            {parameters}
+            {returnValues}
+          </div>
+          {structs}
+        </div>
+        <hr />
       </>
     );
   }
 }
 
+class Structures extends React.Component {
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
+
 class NilableInfo extends React.Component {
   render() {
     return <>?</>;
@@ -417,4 +451,5 @@ export {
   Placeholder,
   Blocking,
   Description,
+  Structures,
 };
diff --git a/src/components/API/styles.module.css b/src/components/API/styles.module.css
index ecda88f1..aa74c1b2 100644
--- a/src/components/API/styles.module.css
+++ b/src/components/API/styles.module.css
@@ -136,7 +136,8 @@ body {
 }
 
 .descriptionBox {
-  padding: 1rem 1rem;
+  padding: 0rem 1rem;
+  margin-top: 1rem;
 }
 .sinceBlock {
   border: 1px solid var(--ifm-color-primary-darkest);