Render Portable Text with Astro.
$ npm install astro-portabletext
# $ pnpm add astro-portabletext
# $ yarn add astro-portabletext| Import | Description |
|---|---|
astro-portabletext |
For PortableText component. See PortableText Component for details. |
astro-portabletext/components |
For Block, List, ListItem and Mark components. See Extending Components for details. |
astro-portabletext/types |
For Typescript types |
astro-portabletext/utils |
For utility functions |
/* .astro file */
---
import { PortableText } from "astro-portabletext";
---
<PortableText
value=/* Required */
components=/* Optional */
onMissingComponent=/* Optional */
listNestingMode=/* Optional */
/>astro-portabletext components will render the following:
{
type: {
/* custom types go here */
},
block: {
h1: /* <h1 {...attrs}><slot /></h1> */,
h2: /* <h2 {...attrs}><slot /></h2> */,
h3: /* <h3 {...attrs}><slot /></h3> */,
h4: /* <h4 {...attrs}><slot /></h4> */,
h5: /* <h5 {...attrs}><slot /></h5> */,
h6: /* <h6 {...attrs}><slot /></h6> */,
blockquote: /* <blockquote {...attrs}><slot /></blockquote> */,
normal: /* <p {...attrs}><slot /></p> */
},
list: {
bullet: /* <ul {...attrs}><slot /></ul> */,
number: /* <ol {...attrs}><slot /></ol> */,
menu: /* <menu {...attrs}><slot /></menu> */,
},
listItem: {
bullet: /* <li {...attrs}><slot /></li> */,
number: /* <li {...attrs}><slot /></li> */,
menu: /* <li {...attrs}><slot /></li> */,
},
mark: {
code: /* <code {...attrs}><slot /></code> */,
em: /* <em {...attrs}><slot /></em> */,
link: /* <a {...attrs} href="..."><slot /></a> */,
'strike-through': /* <del {...attrs}><slot /></del> */,
strong: /* <strong {...attrs}><slot /></strong> */,
underline: /* <span {...attrs} style="text-decoration: underline;"><slot /></span> */
},
hardBreak: /* <br /> */,
}
Refer to docs page for advanced usage and examples, including implementation with Sanity.
ISC