fix(integrations-guide): add/format API references blocks (#12319)

ArmandPhilippot · sarah11918 · Adammatthiesen · web-flow · commit a725c783fec7 · 2025-09-23T18:59:55.000+02:00
Co-authored-by: Sarah Rainsberger &lt;5098874+sarah11918@users.noreply.github.com&gt;
Co-authored-by: Adammatthiesen &lt;30383579+Adammatthiesen@users.noreply.github.com&gt;
diff --git a/src/content/docs/en/guides/integrations-guide/alpinejs.mdx b/src/content/docs/en/guides/integrations-guide/alpinejs.mdx
@@ -8,7 +8,8 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: renderer
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Since from '~/components/Since.astro';
 
 This **[Astro integration][astro-integration]** adds [Alpine.js](https://alpinejs.dev/) to your project so that you can use Alpine.js anywhere on your page.
 
@@ -96,6 +97,12 @@ export default defineConfig({
 
 ### `entrypoint`
 
+<p>
+
+**Type:** `string`<br />
+<Since v="0.4.0" pkg="@astrojs/alpinejs" />
+</p>
+
 You can extend Alpine by setting the `entrypoint` option to a root-relative import specifier (e.g. `entrypoint: "/src/entrypoint"`).
 
 The default export of this file should be a function that accepts an Alpine instance prior to starting. This allows the use of custom directives, plugins and other customizations for advanced use cases.
diff --git a/src/content/docs/en/guides/integrations-guide/db.mdx b/src/content/docs/en/guides/integrations-guide/db.mdx
@@ -129,6 +129,11 @@ export default defineConfig({
 
 ### `columns`
 
+<p>
+
+**Type:** `ColumnsConfig`
+</p>
+
 Table columns are configured using the `columns` object:
 
 ```ts
@@ -184,6 +189,11 @@ type UserTableInferInsert = {
 
 ### `indexes`
 
+<p>
+
+**Type:** `{ on: string | string[]; unique?: boolean | undefined; name?: string | undefined; }[]`
+</p>
+
 Table indexes are used to improve lookup speeds on a given column or combination of columns. The `indexes` property accepts an array of configuration objects specifying the columns to index:
 
 ```ts title="db/config.ts" {9-11}
@@ -205,12 +215,17 @@ This will generate a unique index on the `authorId` and `published` columns with
 
 The following configuration options are available for each index:
 
-- `on`: `string | string[]` - A single column or array of column names to index.
-- `unique`: `boolean` - Set to `true` to enforce unique values across the indexed columns.
-- `name`: `string` (optional) - A custom name for the unique index. This will override Astro's generated name based on the table and column names being indexed (e.g. `Comment_authorId_published_idx`). Custom names are global, so ensure index names do not conflict between tables.
+- `on` - A single column or array of column names to index.
+- `unique` (optional) - Set to `true` to enforce unique values across the indexed columns.
+- `name` (optional) - A custom name for the unique index. This will override Astro's generated name based on the table and column names being indexed (e.g. `Comment_authorId_published_idx`). Custom names are global, so ensure index names do not conflict between tables.
 
 ### `foreignKeys`
 
+<p>
+
+**Type:** `{ columns: string | string[]; references: () => Column | Column[]; }[]`
+</p>
+
 :::tip
 
 `foreignKeys` is an advanced API for relating multiple table columns. If you only need to reference a single column, try using [the column `references` property.](#columns)
@@ -246,8 +261,8 @@ const Comment = defineTable({
 
 Each foreign key configuration object accepts the following properties:
 
-- `columns`: `string[]` - An array of column names to relate to the referenced table.
-- `references`: `() => Column[]` - A function that returns an array of columns from the referenced table.
+- `columns` - A single column or array of column names to relate to the referenced table.
+- `references` - A function that returns a single column or an array of columns from the referenced table.
 
 ## Astro DB CLI reference
 
@@ -288,6 +303,12 @@ Execute a raw SQL query against your database. Use the `--remote` flag to run ag
 
 ### `isDbError()`
 
+<p>
+
+**Type:** `(err: unknown) => boolean`<br />
+<Since v="0.9.1" pkg="@astrojs/db" />
+</p>
+
 The `isDbError()` function checks if an error is a libSQL database exception. This may include a foreign key constraint error when using references, or missing fields when inserting data. You can combine `isDbError()` with a try / catch block to handle database errors in your application:
 
 ```ts title="src/pages/api/comment/[id].ts" "idDbError"
diff --git a/src/content/docs/en/guides/integrations-guide/markdoc.mdx b/src/content/docs/en/guides/integrations-guide/markdoc.mdx
@@ -8,10 +8,10 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: other
 i18nReady: true
 ---
-import { FileTree } from '@astrojs/starlight/components';
+import { FileTree, Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
-import { Steps } from '@astrojs/starlight/components';
 import ReadMore from '~/components/ReadMore.astro';
+import Since from '~/components/Since.astro';
 
 This **[Astro integration][astro-integration]** enables the usage of [Markdoc](https://markdoc.dev/) to create components, pages, and content collection entries.
 
@@ -593,6 +593,13 @@ The Astro Markdoc integration handles configuring Markdoc options and capabiliti
 
 ### `allowHTML`
 
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `false`<br />
+<Since v="0.4.4" pkg="@astrojs/markdoc" />
+</p>
+
 Enables writing HTML markup alongside Markdoc tags and nodes.
 
 By default, Markdoc will not recognize HTML markup as semantic content.
@@ -615,6 +622,13 @@ When `allowHTML` is enabled, HTML markup inside Markdoc documents will be render
 
 ### `ignoreIndentation`
 
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `false`<br />
+<Since v="0.7.0" pkg="@astrojs/markdoc" />
+</p>
+
 By default, any content that is indented by four spaces is treated as a code block. Unfortunately, this behavior makes it difficult to use arbitrary levels of indentation to improve the readability of documents with complex structure.
 
 When using nested tags in Markdoc, it can be helpful to indent the content inside of tags so that the level of depth is clear. To support arbitrary indentation, we have to disable the indent-based code blocks and modify several other markdown-it parsing rules that account for indent-based code blocks. These changes can be applied by enabling the ignoreIndentation option.
diff --git a/src/content/docs/en/guides/integrations-guide/mdx.mdx b/src/content/docs/en/guides/integrations-guide/mdx.mdx
@@ -271,8 +271,12 @@ MDX does not support passing remark and rehype plugins as a string. You should i
 
 ### `extendMarkdownConfig`
 
-* **Type:** `boolean`
-* **Default:** `true`
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `true`<br />
+<Since v="0.15.0" pkg="@astrojs/mdx" />
+</p>
 
 MDX will extend [your project's existing Markdown configuration](/en/reference/configuration-reference/#markdown-options) by default. To override individual options, you can specify their equivalent in your MDX configuration.
 
@@ -326,13 +330,25 @@ export default defineConfig({
 
 ### `recmaPlugins`
 
+<p>
+
+**Type:** `PluggableList`<br />
+**Default:** `[]`<br />
+<Since v="0.11.5" pkg="@astrojs/mdx" />
+</p>
+
 These are plugins that modify the output [estree](https://github.com/estree/estree) directly. This is useful for modifying or injecting JavaScript variables in your MDX files.
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
 ### `optimize`
 
-* **Type:** `boolean | { ignoreElementNames?: string[] }`
+<p>
+
+**Type:** `boolean | { ignoreElementNames?: string[] }`<br />
+**Default:** `false`<br />
+<Since v="0.19.5" pkg="@astrojs/mdx" />
+</p>
 
 This is an optional configuration setting to optimize the MDX output for faster builds and rendering via an internal rehype plugin. This may be useful if you have many MDX files and notice slow builds. However, this option may generate some unescaped HTML, so make sure your site's interactive parts still work correctly after enabling it.
 
@@ -354,9 +370,12 @@ export default defineConfig({
 
 #### `ignoreElementNames`
 
-* **Type:** `string[]`
+<p>
+
+**Type:** `string[]`<br />
+<Since v="3.0.0" pkg="@astrojs/mdx" />
+</p>
 
-<p><Since pkg="@astrojs/mdx" v="3.0.0" /></p>
 Previously known as `customComponentNames`.
 
 An optional property of `optimize` to prevent the MDX optimizer from handling certain element names, like [custom components passed to imported MDX content via the components prop](/en/guides/integrations-guide/mdx/#custom-components-with-imported-mdx).
diff --git a/src/content/docs/en/guides/integrations-guide/partytown.mdx b/src/content/docs/en/guides/integrations-guide/partytown.mdx
@@ -107,10 +107,10 @@ export default defineConfig({
 });
 ```
 
-This mirrors the [Partytown config object](https://partytown.qwik.dev/configuration/).
+This mirrors the [Partytown config object](https://partytown.qwik.dev/configuration/) and all options can be set in `partytown.config`. Some common configuration options for Astro projects are described on this page. 
 
 
-### config.debug
+### Enabling debug mode
 
 Partytown ships with a `debug` mode; enable or disable it by passing `true` or `false` to `config.debug`. If [`debug` mode](https://partytown.qwik.dev/debugging) is enabled, it will output detailed logs to the browser console.
 
@@ -128,7 +128,7 @@ export default defineConfig({
 });
 ```
 
-### config.forward
+### Forwarding variables
 
 Third-party scripts typically add variables to the `window` object so that you can communicate with them throughout your site. But when a script is loaded in a web-worker, it doesn't have access to that global `window` object.
 
@@ -150,7 +150,7 @@ export default defineConfig({
 });
 ```
 
-### config.resolveUrl
+### Proxying requests
 
 Some third-party scripts may require [proxying](https://partytown.qwik.dev/proxying-requests/) through `config.resolveUrl()`, which runs inside the service worker. You can set this configuration option to check for a specific URL, and optionally return a proxied URL instead:
 
@@ -211,4 +211,3 @@ Note that the integration config will override `window.partytown` if you set a p
 * [Optimise Google Analytics using Partytown in Astro](https://ricostacruz.com/posts/google-analytics-in-astro)
 
 [astro-integration]: /en/guides/integrations-guide/
-
diff --git a/src/content/docs/en/guides/integrations-guide/preact.mdx b/src/content/docs/en/guides/integrations-guide/preact.mdx
@@ -133,7 +133,13 @@ The Astro Preact integration handles how Preact components are rendered and it h
 
 For basic usage, you do not need to configure the Preact integration.
 
-### compat
+### `compat`
+
+<p>
+
+**Type:** `boolean`<br />
+<Since pkg="@astrojs/preact" v="0.3.0" />
+</p>
 
 You can enable `preact/compat`, Preact’s compatibility layer for rendering React components without needing to install or ship React’s larger libraries to your users’ web browsers.
 
@@ -167,9 +173,13 @@ Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and
 Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
 :::
 
-### devtools
+### `devtools`
+
+<p>
 
-<p><Since pkg="@astrojs/preact" v="3.3.0" /></p>
+**Type:** `boolean`<br />
+<Since pkg="@astrojs/preact" v="3.3.0" />
+</p>
 
 You can enable [Preact devtools](https://preactjs.github.io/preact-devtools/) in development by passing an object with `devtools: true` to your `preact()` integration config:
 
diff --git a/src/content/docs/en/guides/integrations-guide/solid-js.mdx b/src/content/docs/en/guides/integrations-guide/solid-js.mdx
@@ -117,9 +117,13 @@ To use your first SolidJS component in Astro, head to our [UI framework document
 
 ## Configuration
 
-### devtools
+### `devtools`
 
-<p><Since pkg="@astrojs/solid-js" v="4.2.0" /></p>
+<p>
+
+**Type:** `boolean`<br />
+<Since pkg="@astrojs/solid-js" v="4.2.0" />
+</p>
 
 You can enable [Solid DevTools](https://github.com/thetarnav/solid-devtools) in development by passing an object with `devtools: true` to your `solid()` integration config and adding `solid-devtools` to your project dependencies:
 
@@ -232,4 +236,3 @@ Feel free to add additional Suspense boundaries according to your preference.
 [solid-create-resource]: https://www.solidjs.com/docs/latest/api#createresource
 
 [solid-lazy-components]: https://www.solidjs.com/docs/latest/api#lazy
-
diff --git a/src/content/docs/en/guides/integrations-guide/vercel.mdx b/src/content/docs/en/guides/integrations-guide/vercel.mdx
diff --git a/src/content/docs/en/guides/integrations-guide/vue.mdx b/src/content/docs/en/guides/integrations-guide/vue.mdx
