Add record fields

Author: nojaf

docs/components/record.astro

@@ -0,0 +1,48 @@
+---
+import { micromark } from "micromark";
+const { name, items, typesInOwnModule } = Astro.props;
+---
+
+<h4>Record fields</h4>
+{
+  items.map((item) => {
+    const documentation =
+      item.docstrings && micromark(item.docstrings.join("\n"));
+
+    return (
+      <div class="record_field">
+        <h5 id={`${name}_${item.name}`}>{item.name}</h5>
+        <div class="type">
+          {typesInOwnModule.has(item.signature) ? (
+            <a href={`#${item.signature}`}>{item.signature}</a>
+          ) : (
+            item.signature
+          )}
+        </div>
+        {documentation && <div class="doc" set:html={documentation} />}
+      </div>
+    );
+  })
+}
+
+<style>
+  .record_field {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+
+    border-bottom: 1px solid var(--sl-color-gray-7);
+
+    & .type {
+      justify-self: end;
+      color: var(--sl-color-accent-low);
+    }
+
+    & .doc {
+      padding-bottom: 0.5rem;
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+  }
+</style>

docs/pages/apidocs/[API].astro

@@ -3,6 +3,7 @@ import { apiModules, getDoc } from "./utils";
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { Code } from "@astrojs/starlight/components";
 import { micromark } from "micromark";
+import Record from "../../components/record.astro";
 
 export async function getStaticPaths() {
   return apiModules.map((apiModule) => {
@@ -15,6 +16,10 @@ export async function getStaticPaths() {
   });
 }
 
+function showRecord(details) {
+  return details && details.kind === "record" && details.items.length > 0;
+}
+
 const { moduleName, filePath } = Astro.props;
 
 const docInfo = await getDoc(filePath);
@@ -29,9 +34,12 @@ const types = docInfo.items
       name: type.name,
       documentation,
       signature: type.signature,
+      detail: type.detail,
     };
   });
 
+const typesInOwnModule = new Set(types.map((t) => t.name));
+
 const typeHeadings = types.map((type) => ({
   depth: 3,
   slug: type.name,
@@ -61,6 +69,13 @@ const headings = [
           <h3 id={type.name}>{type.name}</h3>
           <div set:html={type.documentation} />
           <Code lang="ReScript" code={type.signature} />
+          {showRecord(type.detail) ? (
+            <Record
+              name={type.name}
+              typesInOwnModule={typesInOwnModule}
+              {...type.detail}
+            />
+          ) : null}
         </div>
       ))
     }

docs/styles/theme.css

@@ -8,6 +8,12 @@ https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.
 https://github.com/rescript-lang/rescript-lang.org/blob/4e4f9520f6fc7a0376db82a0a6db52211e8a8187/tailwind.config.mjs#L13
 */
 
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth; /* Enables smooth scrolling for users without motion sensitivity */
+  }
+}
+
 :root[data-theme="light"],
 [data-theme="light"] ::backdrop {
   --sl-color-accent-low: #4a0f14;