astro-portabletext

astro-portabletext

Render Portable Text with Astro

Install

npm install astro-portabletext --save-dev

Usage

/* .astro file */
---
import { PortableText } from "astro-portabletext";
---

<PortableText
  value={[/* portable text blocks */]}
  components={/* custom components */}
/>

Default Components

astro-portabletext components will render the following

{
  type: {
    /* custom types go here */
  },
  block: {
    h1: /* <h1 class={astroClass}><slot /></h1> */,
    h2: /* <h2 class={astroClass}><slot /></h2> */,
    h3: /* <h3 class={astroClass}><slot /></h3> */,
    h4: /* <h4 class={astroClass}><slot /></h4> */,
    h5: /* <h5 class={astroClass}><slot /></h5> */,
    h6: /* <h6 class={astroClass}><slot /></h6> */,
    blockquote: /* <blockquote class={astroClass}><slot /></blockquote> */,
    normal: /* <p class={astroClass}><slot /></p> */
  },
  list: {
    bullet: /* <ul class={astroClass}><slot /></ul> */,
    number: /* <ol class={astroClass}><slot /></ol> */,
  },
  listItem: {
    bullet: /* <li class={astroClass}><slot /></li> */,
    number: /* <li class={astroClass}><slot /></li> */,
  },
  mark: {
    code: /* <code class={astroClass}><slot /></code> */,
    em: /* <em class={astroClass}><slot /></em> */,
    link: /* <a href="..." class={astroClass}><slot /></a> */,
    'strike-through': /* <del class={astroClass}><slot /></del> */,
    strong: /* <strong class={astroClass}><slot /></strong> */,
    underline: /* <span class={astroClass} style="text-decoration: underline;"><slot /></span> */
  },
  hardBreak: /* <br /> */,
}

/* astroClass; see `Using <style> in Astro component` */

Merge/Override Components

---
import { PortableText } from "astro-portabletext";
import { Unicorn } from "@component/Unicorn";
import { Dinosaur } from "@component/Dinosaur";
import { Sunny } from "@component/Sunny";
import { Highlight } from "@component/Highlight";
import { PageHeading } from "@component/PageHeading";
import { Bold } from "@component/Bold";
---

<PortableText
  value={[/* portable text blocks */]}
  components={{
    type: {
      unicorn: Unicorn,
      dinosaur: Dinosaur,
    },
    block: {
      h1: PageHeading, /* Override default `h1` block style */
      sunny: Sunny, /* Custom block style */
    },
    mark: {
      strong: Bold, /* Override default `strong` mark */
      highlight: Highlight, /* Custom mark */
    },
  }}
/>

Custom Handler

/* .astro file */
---
import { PortableText } from "astro-portabletext";
import { Type } from "@handler/Type"
import { Block } from "@handler/Block"
import { Mark } from "@handler/Mark"
---

<PortableText
  value={[/* portable text blocks */]}
  components={{
    type: Type,
    block: Block,
    mark: Mark
  }}
/>

Using <style> in Astro component

/* .astro file */
---
import { PortableText } from "astro-portabletext";
import { Unicorn } from "@component/Unicorn.astro";
---

<PortableText
  value={[/* portable text blocks */]}
  components={{
    type: {
      unicorn: Unicorn
    }
  }}
/>

<style>
  .unicorn {/* some values */}
</style>

/* @component/Unicorn.astro */
---
const { astroClass = "" } = Astro.props;
---

<div class={`unicorn ${astroClass}`}>
  <!-- more html -->
</div>

Typescript

components.type

/* @component/Greeting.tsx */
---
import type { TypedObject, Props } from "astro-portabletext";

interface Greet extends TypedObject {
  message: string;
}
/* OR */
type Greet = { message: string };

const { node } = Astro.props as Props<Greet>;
---

<h1>{node.message}</h1>

components.mark

/* @component/Greeting.tsx */
---
import type { Mark, Props } from "astro-portabletext";

type Greet = Mark<{ message: string }>;

const { node } = Astro.props as Props<Greet>;
---

<p>{node.markDef.message}</p>

Alternatives

@portabletext/react

@portabletext/svelte