		{
		"name": "astro-portabletext",
		"version": "0.2.0",
		"version": "0.2.1-next.0",
		"type": "module",
		"description": "Render Portable Text with Astro",
		"type": "module",
		"exports": {
		".": "./src/index.ts",
		"./types": "./src/types.ts"
		},
		"files": [
		"src",
		"index.ts",
		"README.md"
		],
		"workspaces": [
		"demo",
		"src"
		],
		"keywords": [
		"astro",
		"astro-component",
		"portable-text"
		"portable-text",
		"typescript"
		],
		"license": "ISC",
		"exports": {
		".": "./index.ts",
		"./types": "./types.ts"
		},
		"dependencies": {
		"@portabletext/toolkit": "^1.0.5",
		"@portabletext/types": "^1.0.3"
		},
		"scripts": {
		"launch-demo": "astro --root demo dev",
		"install:all": "pnpm recursive install",
		"format": "prettier -w */.{astro,ts,tsx,svelte}",
		"lint": "eslint . --ext .ts"
		},
		"author": "theisel",
		"repository": {
		"type": "git",
		"url": "git+https://github.com/theisel/astro-portabletext.git"
		},
		"bugs": {
		"url": "https://github.com/theisel/astro-portabletext/issues"
		},
		"homepage": "https://github.com/theisel/astro-portabletext#readme",
		"devDependencies": {
		"@typescript-eslint/eslint-plugin": "^5.22.0",
		"@typescript-eslint/parser": "^5.22.0",
		"astro": "1.0.0-beta.23",
		"eslint": "^8.14.0",
		"prettier": "^2.6.2",
		"prettier-plugin-astro": "0.1.0-next.4",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.48.0",
		"typescript": "^4.6.4"
		}
		}
		}

160

README.md

		@@ -1,163 +0,7 @@
		# astro-portabletext
		# `astro-portabletext` package

		[![License: ISC](https://img.shields.io/badge/License-ISC-green.svg)](https://opensource.org/licenses/ISC)
		This is published as a npm package with the main [README](https://github.com/theisel/astro-portabletext/blob/main/README.md).

		Render [Portable Text](https://portabletext.org/) with [Astro](https://astro.build/).

		We have [react-portabletext](https://github.com/portabletext/react-portabletext) and [svelte-portabletext](https://github.com/portabletext/svelte-portabletext) which can be used to output your [Portable Text](https://github.com/portabletext/portabletext) with [Astro](https://astro.build/). Like so...

		```js
		/* .astro file */
		---
		import { PortableText } from "@portabletext/react";
		---

		<PortableText
		/* client:{load\|idle\|visible\|media\|only} needed for hydration */
		value={[/* ... */]}
		components={/* ... */}
		/>
		```

		However, it will add bloat if _only_ one or some of the blocks need hydration.



		## Install
		```
		npm install astro-portabletext --save-dev
		```

		## Usage
		```js
		/* .astro file */
		---
		import { PortableText } from "astro-portabletext";
		---

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

		## Default Components
		astro-portabletext components will render the following
		```js
		{
		/* type: Must be defined by you! */,
		block: {
		h1: /* <h1 class="..."><slot /></h1> */,
		h2: /* <h2 class="..."><slot /></h2> */,
		h3: /* <h3 class="..."><slot /></h3> */,
		h4: /* <h4 class="..."><slot /></h4> */,
		h5: /* <h5 class="..."><slot /></h5> */,
		h6: /* <h6 class="..."><slot /></h6> */,
		blockquote: /* <blockquote class="..."><slot /></blockquote> */,
		normal: /* <p class="..."><slot /></p> */
		},
		list: /* <ul class="..."><slot /></ul> \| <ol class="..."><slot /></ol>*/,
		listItem: /* <li class="..."><slot /></li> */,
		mark: {
		code: /* <code class="..."><slot /></code> */,
		em: /* <em class="..."><slot /></em> */,
		link: /* <a href="..." class="..."><slot /></a> */,
		'strike-through': /* <del class="..."><slot /></del> */,
		strong: /* <strong class="..."><slot /></strong> */,
		underline: /* <span class="..." style="text-decoration: underline;"><slot /></span> */
		},
		hardBreak: /* <br /> */,
		}
		```

		## Merge Components

		Keep default components and add to them
		```js
		---
		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 */
		},
		}}
		/>
		```

		## With Handler

		Create a handler for better control
		```js
		/* .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
		```js
		/* .astro file */
		---
		import { PortableText } from "astro-portabletext";
		import { Unicorn } from "@component/Unicorn";
		---

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

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

		```js
		/* @component/Unicorn.tsx */
		import type { PtTypeComponentProps } from "astro-portabletext/types";

		export function Unicorn(props: PtTypeComponentProps) {
		const { astroClass = "" } = props;

		return (
		<div className={`unicorn ${astroClass}`}>
		/* ... */
		</div>
		)
		}
		```

src/components/Block.astro

src/components/HardBreak.astro

src/components/List.astro

src/components/ListItem.astro

src/components/Mark.astro

src/components/Raw.astro

src/components/UnknownBlockStyle.astro

src/components/UnknownList.astro

src/components/UnknownListItem.astro

src/components/UnknownMark.astro

src/components/UnknownType.astro

src/index.ts

src/NodeRenderer.astro

src/PortableText.astro

src/styles/unknown.css

src/types.ts

src/utils.ts

src/warnings.ts

astro-portabletext - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics