astro-portabletext

Render Portable Text with Astro.

Table of Contents

• Getting Started
• Documentation
• License

Getting Started

Install

$ npm install astro-portabletext
# $ pnpm add astro-portabletext
# $ yarn add 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 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 /> */,
}

Documentation

Refer to docs page for advanced usage and examples, including implementation with Sanity.

License

ISC