astro-portabletext

astro-portabletext

Render Portable Text with Astro

Table of Contents

• Install
• Usage
• Documentation
• License

Install

npm install astro-portabletext

Usage

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 usage.
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> */,
  },
  listItem: {
    bullet: /* <li {...attrs}><slot /></li> */,
    number: /* <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 /> */,
}

Documentation

See documentation for advanced usage and examples.

License

ISC