Not terrible pure CSS implementation

Author: nebrius

packages/docs-md/src/components/Property/docusaurus/Property.tsx

@@ -1,10 +1,64 @@
+import clsx from "clsx";
+
+import type { TypeInfo } from "../../../renderers/base/base.ts";
 import type { PropertyProps } from "../common/types.ts";
+import styles from "./styles.module.css";
+
+function TypeSegment({ typeInfo }: { typeInfo: TypeInfo }) {
+  switch (typeInfo.label) {
+    case "array":
+    case "map":
+    case "set": {
+      return (
+        <span className={styles.typeSegment}>
+          <span>{typeInfo.label}&lt;</span>
+          <span>
+            {typeInfo.children.map((childTypeInfo, i) => (
+              <span
+                key={i}
+                className={clsx(styles.typeSegment, styles.unionSegment)}
+              >
+                <TypeSegment typeInfo={childTypeInfo} />
+              </span>
+            ))}
+          </span>
+          <span>&gt;</span>
+        </span>
+      );
+    }
+    case "union":
+    case "enum": {
+      return (
+        <span className={styles.typeSegment}>
+          {typeInfo.children.map((childTypeInfo, i) => (
+            <span
+              key={i}
+              className={clsx(styles.typeSegment, styles.unionSegment)}
+            >
+              <TypeSegment typeInfo={childTypeInfo} />
+            </span>
+          ))}
+        </span>
+      );
+    }
+    default: {
+      return (
+        <span
+          className={styles.typeSegment}
+          dangerouslySetInnerHTML={{ __html: typeInfo.linkedLabel }}
+        />
+      );
+    }
+  }
+}
 
 export function DocusaurusProperty({ children, typeInfo }: PropertyProps) {
   return (
-    <div>
-      {children}
-      {typeInfo.label}
+    <div className={styles.container}>
+      <div>{children}</div>
+      <div>
+        <TypeSegment typeInfo={typeInfo} />
+      </div>
     </div>
   );
 }

packages/docs-md/src/components/Property/docusaurus/styles.module.css

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  align-items: center;
+  row-gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.container h1,
+.container h2,
+.container h3,
+.container h4,
+.container h5,
+.container h6 {
+  margin: 0;
+}
+
+.typeSegment {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.unionSegment:not(:first-child)::before {
+  content: "\00a0|\00a0";
+}

packages/docs-md/src/renderers/base/mdx.ts

@@ -1,12 +1,14 @@
 import { dirname, relative } from "node:path";
 
 import type { TryItNowProps } from "../../components/TryItNow/common/types.ts";
+import { HEADINGS } from "../../pages/content/constants.ts";
 import type {
   RendererAppendSidebarLinkArgs,
   RendererAppendTryItNowArgs,
   RendererCreateAppendCodeArgs,
   RendererCreateExpandableSectionArgs,
   RendererCreatePillArgs,
+  RendererCreatePropertyArgs,
   RendererCreateSectionContentArgs,
   RendererCreateSectionTitleArgs,
   RendererCreateTabbedSectionTabArgs,
@@ -190,6 +192,17 @@ export abstract class MdxRenderer extends MarkdownRenderer {
     return "</SectionTab>";
   }
 
+  public override createProperty(
+    ...[typeInfo, id, cb]: RendererCreatePropertyArgs
+  ) {
+    this.insertComponentImport("Property");
+    return `<Property typeInfo={${JSON.stringify(typeInfo)}}>
+
+${this.createHeading(HEADINGS.PROPERTY_HEADING_LEVEL, cb(), { escape: "mdx", id })}
+
+</Property>`;
+  }
+
   public override appendSidebarLink(
     ...[{ title, embedName }]: RendererAppendSidebarLinkArgs
   ) {