Skip to content
Merged
4 changes: 2 additions & 2 deletions src/content/docs/en/guides/integrations-guide/cloudflare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -391,12 +391,12 @@ All module types export a single default value. Modules can be imported both fro

The following is an example of importing a Wasm module that then responds to requests by adding the request's number parameters together.

```js title="pages/add/[a]/[b].js"
```js title="src/pages/add/[a]/[b].js"
// Import the WebAssembly module
import mod from '../util/add.wasm';

// Instantiate first in order to use it
const addModule: any = new WebAssembly.Instance(mod);
const addModule = new WebAssembly.Instance(mod);

export async function GET(context) {
const a = Number.parseInt(context.params.a);
Expand Down
24 changes: 20 additions & 4 deletions src/content/docs/en/guides/integrations-guide/markdoc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,12 @@ Then, [query and display your posts and collections](/en/guides/content-collecti

```astro title="src/pages/why-markdoc.astro"
---
import { getEntry, render } from 'astro:content';
import { getEntry, render } from "astro:content";

const entry = await getEntry('docs', 'why-markdoc');
const entry = await getEntry("docs", "why-markdoc");
if (!entry) {
throw new Error("Entry not found");
}
const { Content } = await render(entry);
---

Expand All @@ -142,6 +145,9 @@ Variables can be passed as props via the `Content` component:
import { getEntry, render } from 'astro:content';

const entry = await getEntry('docs', 'why-markdoc');
if (!entry) {
throw new Error("Entry not found");
}
const { Content } = await render(entry);
---

Expand Down Expand Up @@ -180,6 +186,9 @@ To access frontmatter, you can pass the entry `data` property as a variable wher
import { getEntry, render } from 'astro:content';

const entry = await getEntry('docs', 'why-markdoc');
if (!entry) {
throw new Error("Entry not found");
}
const { Content } = await render(entry);
---

Expand Down Expand Up @@ -499,9 +508,16 @@ The following steps will create a custom Markdoc image tag to display a `<figure

const { src, alt, width, height, caption } = Astro.props;
---

<figure>
<Image {src} {alt} {width} {height} />
{caption && <figcaption>{caption}</figcaption>}
{
typeof src === "string" ? (
<img {src} {alt} {width} {height} />
) : (
<Image {src} {alt} {width} {height} />
)
}
{caption && <figcaption>{caption}</figcaption>}
</figure>
```

Expand Down
35 changes: 21 additions & 14 deletions src/content/docs/en/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,11 @@ Or you can use that exported `title` in your page using `import` and `import.met

```astro title="src/pages/index.astro"
---
const matches = import.meta.glob('./posts/*.mdx', { eager: true });
const matches = import.meta.glob("./posts/*.mdx", { eager: true });
const posts = Object.values(matches);
---

{posts.map(post => <p>{post.title}</p>)}
{posts.map((post: any) => <p>{post.title}</p>)}
```

#### Exported Properties
Expand Down Expand Up @@ -240,11 +240,15 @@ The following example passes a custom heading to the `<Content />` component via

```astro title="src/pages/blog/post-1.astro" ins="components={{ h1: CustomHeading }}"
---
import { getEntry, render } from 'astro:content';
import CustomHeading from '../../components/CustomHeading.astro';
const entry = await getEntry('blog', 'post-1');
import { getEntry, render } from "astro:content";
import CustomHeading from "../../components/CustomHeading.astro";
const entry = await getEntry("blog", "post-1");
if (!entry) {
throw new Error("Entry not found");
}
const { Content } = await render(entry);
---

<Content components={{ h1: CustomHeading }} />
```

Expand Down Expand Up @@ -358,20 +362,22 @@ For example, say you need a different syntax highlighter and a different set of

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import { satteri } from '@astrojs/markdown-satteri';
import mdx from '@astrojs/mdx';
import { satteri } from "@astrojs/markdown-satteri";
import mdx from "@astrojs/mdx";
import mdastPlugin1 from "./src/mdast-plugin-1";
import mdastPlugin2 from "./src/mdast-plugin-2";

export default defineConfig({
// ...
markdown: {
syntaxHighlight: 'prism',
syntaxHighlight: "prism",
processor: satteri({ mdastPlugins: [mdastPlugin1] }),
},
integrations: [
mdx({
// Markdown `syntaxHighlight` overridden,
// `.mdx` files use Shiki instead.
syntaxHighlight: 'shiki',
syntaxHighlight: "shiki",

// `markdown.processor` gets overridden for `.mdx` files by this option
processor: satteri({ mdastPlugins: [mdastPlugin2] }),
Expand All @@ -384,8 +390,9 @@ You may also need to disable `markdown` config extension in MDX. For this, set `

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import { satteri } from '@astrojs/markdown-satteri';
import mdx from '@astrojs/mdx';
import { satteri } from "@astrojs/markdown-satteri";
import mdx from "@astrojs/mdx";
import mdastPlugin from "./src/mdast-plugin";

export default defineConfig({
// ...
Expand Down Expand Up @@ -466,10 +473,10 @@ You will need to exclude these components from optimization as the optimizer eag

For example, the intended MDX output of the following is `<Heading>...</Heading>` in place of every `"<h1>...</h1>"`:

```astro
```astro title="src/pages/any-page.astro"
---
import { Content, components } from '../content.mdx';
import Heading from '../Heading.astro';
import { Content, components } from "../content.mdx";
import Heading from "../components/Heading.astro";
---

<Content components={{ ...components, h1: Heading }} />
Expand Down
14 changes: 8 additions & 6 deletions src/content/docs/en/guides/integrations-guide/partytown.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -154,21 +154,23 @@ export default defineConfig({

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:

```js title="astro.config.mjs" {7-13}
```js title="astro.config.mjs" {10-15}
import { defineConfig } from 'astro/config';
import partytown from "@astrojs/partytown";

export default defineConfig({
// ...
integrations: [
partytown({
// Example: proxy Facebook's analytics script
config: {
resolveUrl: (url) => {
const proxyMap = {
"connect.facebook.net": "my-proxy.com"
}
url.hostname = proxyMap[url.hostname] || url.hostname;
const proxyMap = new Map([["connect.facebook.net", "my-proxy.com"]]);
const proxiedHost = proxyMap.get(url.hostname);
if (proxiedHost) url.hostname = proxiedHost;
return url;
},
}
},
}),
],
});
Expand Down
Loading