@starlightcms/react-sdk 0.8.0 → 0.10.0

package/dist/cjs/VisualContent/blocks/Paragraph.js

@@ -4,6 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+/**
+ * VisualContent renderer component that renders `paragraph` type blocks
+ * as `<p>` elements.
+ *
+ * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
+ * to learn how to customize block renderer components like this one.
+ *
+ * @param props VisualDataBlock object. See {@link ParagraphBlock} to learn the
+ * type of data this component receives.
+ * @group VisualContent Renderers
+ */
 const Paragraph = ({ data }) => {
     return (react_1.default.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
 };

package/dist/cjs/VisualContent/blocks/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,CACL,qCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  return (\n    <p\n      className=\"sl-content-block sl-paragraph\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Paragraph\n"]}
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,CACL,qCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\n/**\n * VisualContent renderer component that renders `paragraph` type blocks\n * as `<p>` elements.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link ParagraphBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  return (\n    <p\n      className=\"sl-content-block sl-paragraph\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Paragraph\n"]}

package/dist/cjs/VisualContent/blocks/Quote.d.ts

@@ -1,5 +1,16 @@
 import { FC } from 'react';
 import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+/**
+ * VisualContent renderer component that renders `quote` type blocks
+ * as `<blockquote>` elements.
+ *
+ * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
+ * to learn how to customize block renderer components like this one.
+ *
+ * @param props VisualDataBlock object. See {@link QuoteBlock} to learn the
+ * type of data this component receives.
+ * @group VisualContent Renderers
+ */
 declare const Quote: FC<VisualDataBlock<QuoteBlock>>;
 export default Quote;
 //# sourceMappingURL=Quote.d.ts.map

package/dist/cjs/VisualContent/blocks/Quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAI1C,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAI1C,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/cjs/VisualContent/blocks/Quote.js

@@ -4,6 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+/**
+ * VisualContent renderer component that renders `quote` type blocks
+ * as `<blockquote>` elements.
+ *
+ * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
+ * to learn how to customize block renderer components like this one.
+ *
+ * @param props VisualDataBlock object. See {@link QuoteBlock} to learn the
+ * type of data this component receives.
+ * @group VisualContent Renderers
+ */
 const Quote = ({ data }) => {
     return (react_1.default.createElement("blockquote", { className: "sl-content-block sl-quote" }, data.text));
 };

package/dist/cjs/VisualContent/blocks/Quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,8CAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <blockquote className=\"sl-content-block sl-quote\">{data.text}</blockquote>\n  )\n}\n\nexport default Quote\n"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,8CAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\n/**\n * VisualContent renderer component that renders `quote` type blocks\n * as `<blockquote>` elements.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link QuoteBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <blockquote className=\"sl-content-block sl-quote\">{data.text}</blockquote>\n  )\n}\n\nexport default Quote\n"]}

package/dist/cjs/VisualContent/index.d.ts

@@ -1,12 +1,64 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { VisualContentProps } from './types';
 import { VisualContentStyles } from './styles';
 import Paragraph from './blocks/Paragraph';
 import Header from './blocks/Header';
 import Quote from './blocks/Quote';
-import Image from './blocks/Image';
+import Image, { ImageOptions } from './blocks/Image';
 import HTML from './blocks/HTML';
 import List from './blocks/List';
-export declare const VisualContent: FC<VisualContentProps>;
+/**
+ * Renders HTML content from data returned by a Visual Editor field on Starlight.
+ *
+ * The only required prop is `content`, which is the data returned by a Visual
+ * Editor field. Additionally, you can provide custom components to render each
+ * data block type.
+ *
+ * You can also pass the `excerpt` boolean prop to only render a portion of the
+ * content, which is useful to summarize the content in lists.
+ *
+ * To learn how to customize the rendered content, take a look at the
+ * [Customizing the output](#) guide page.
+ *
+ * @example Requesting an entry and rendering its content.
+ *
+ * Assume we created a "Posts" model with a slug of `posts`, and placed a Visual
+ * Editor field with a key of `post_content` on it.
+ *
+ * ```jsx
+ * import Starlight, { VisualContent } from '@starlightcms/react-sdk'
+ *
+ * const EntryComponent = ({ slug }) => {
+ *   const [entry, setEntry] = useState(null)
+ *
+ *   // This is just an example, you could fetch
+ *   // the entry any way you want.
+ *   useEffect(async () => {
+ *     const response = await Starlight.posts.entries.get(slug)
+ *
+ *     setEntry(response.data)
+ *   }, [ slug ])
+ *
+ *   // After fetching, content will be on the `entry.data.post_content` property.
+ *   return (
+ *     entry ? (
+ *        <article>
+ *          <h1>{entry.title}</h1>
+ *          <VisualContent content={entry.data.post_content} />
+ *        </article>
+ *     ) : (
+ *       <div>Loading...</div>
+ *     )
+ *   )
+ * }
+ *
+ * ```
+ *
+ * @param props Component props. See {@link VisualContentProps} to see the
+ * available options.
+ * @group VisualContent
+ */
+export declare const VisualContent: ({ content, components, excerpt, excerptLength, }: VisualContentProps) => JSX.Element;
 export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
+export type { VisualContentProps, ImageOptions };
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/VisualContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,GACtB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,WAkDvB,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,GACtB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}

package/dist/cjs/VisualContent/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -46,6 +50,57 @@ const defaultComponents = {
     raw: HTML_1.default,
     list: List_1.default,
 };
+/**
+ * Renders HTML content from data returned by a Visual Editor field on Starlight.
+ *
+ * The only required prop is `content`, which is the data returned by a Visual
+ * Editor field. Additionally, you can provide custom components to render each
+ * data block type.
+ *
+ * You can also pass the `excerpt` boolean prop to only render a portion of the
+ * content, which is useful to summarize the content in lists.
+ *
+ * To learn how to customize the rendered content, take a look at the
+ * [Customizing the output](#) guide page.
+ *
+ * @example Requesting an entry and rendering its content.
+ *
+ * Assume we created a "Posts" model with a slug of `posts`, and placed a Visual
+ * Editor field with a key of `post_content` on it.
+ *
+ * ```jsx
+ * import Starlight, { VisualContent } from '@starlightcms/react-sdk'
+ *
+ * const EntryComponent = ({ slug }) => {
+ *   const [entry, setEntry] = useState(null)
+ *
+ *   // This is just an example, you could fetch
+ *   // the entry any way you want.
+ *   useEffect(async () => {
+ *     const response = await Starlight.posts.entries.get(slug)
+ *
+ *     setEntry(response.data)
+ *   }, [ slug ])
+ *
+ *   // After fetching, content will be on the `entry.data.post_content` property.
+ *   return (
+ *     entry ? (
+ *        <article>
+ *          <h1>{entry.title}</h1>
+ *          <VisualContent content={entry.data.post_content} />
+ *        </article>
+ *     ) : (
+ *       <div>Loading...</div>
+ *     )
+ *   )
+ * }
+ *
+ * ```
+ *
+ * @param props Component props. See {@link VisualContentProps} to see the
+ * available options.
+ * @group VisualContent
+ */
 const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
     const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
     if (!content) {

package/dist/cjs/VisualContent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,qCAA8C;AA2E5C,oGA3EO,4BAAmB,OA2EP;AA1ErB,mEAA0C;AA2E3B,6BA3ER,mBAAS,CA2EiB;AA1EjC,6DAAoC;AA2ExB,0BA3EL,gBAAM,CA2Ec;AA1E3B,2DAAkC;AA2EvB,yBA3EJ,eAAK,CA2Ea;AA1EzB,2DAAkC;AA2EvB,yBA3EJ,eAAK,CA2Ea;AA1EzB,yDAAgC;AA2EtB,wBA3EH,cAAI,CA2EY;AA1EvB,yDAAgC;AA2EtB,wBA3EH,cAAI,CA2EY;AAzEvB,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,GAAG,EAAE,cAAI;IACT,IAAI,EAAE,cAAI;CACX,CAAA;AAEM,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QAExE,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAEvB,MAAM,IAAI,GAAI,KAAyC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5E,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAC3B,CACH,CAAA;KACF;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAvDY,QAAA,aAAa,iBAuDzB","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport { VisualContentStyles } from './styles'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nexport const VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}) => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null\n  }\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph')\n\n    if (!block) return null\n\n    const text = (block as VisualDataBlock<ParagraphBlock>).data.text.split(' ')\n    const excerptText =\n      text.length > excerptLength\n        ? text.splice(0, excerptLength).join(' ') + '...'\n        : text.join(' ')\n    const Component = componentList.paragraph\n\n    return (\n      <Component\n        key={block.id}\n        id={block.id}\n        type={block.type}\n        data={{ text: excerptText }}\n      />\n    )\n  }\n\n  return (\n    <div className=\"sl-visual-content\">\n      {content.blocks.map((block) => {\n        const Component = componentList[block.type]\n\n        if (!Component) return null\n\n        return (\n          <Component\n            key={block.id}\n            id={block.id}\n            type={block.type}\n            data={block.data as never}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport {\n  VisualContentStyles,\n  Paragraph as ParagraphComponent,\n  Header as HeaderComponent,\n  Quote as QuoteComponent,\n  Image as ImageComponent,\n  HTML as HTMLComponent,\n  List as ListComponent,\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsC;AAGtC,qCAA8C;AA8H5C,oGA9HO,4BAAmB,OA8HP;AA7HrB,mEAA0C;AA8H3B,6BA9HR,mBAAS,CA8HiB;AA7HjC,6DAAoC;AA8HxB,0BA9HL,gBAAM,CA8Hc;AA7H3B,2DAAkC;AA8HvB,yBA9HJ,eAAK,CA8Ha;AA7HzB,2DAAoD;AA8HzC,yBA9HJ,eAAK,CA8Ha;AA7HzB,yDAAgC;AA8HtB,wBA9HH,cAAI,CA8HY;AA7HvB,yDAAgC;AA8HtB,wBA9HH,cAAI,CA8HY;AA5HvB,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,GAAG,EAAE,cAAI;IACT,IAAI,EAAE,cAAI;CACX,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAA8B,CAAA;KACtC;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QAExE,IAAI,CAAC,KAAK;YAAE,OAAO,IAA8B,CAAA;QAEjD,MAAM,IAAI,GAAI,KAAyC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5E,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAC3B,CACH,CAAA;KACF;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAvDY,QAAA,aAAa,iBAuDzB","sourcesContent":["import React, { useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport { VisualContentStyles } from './styles'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image, { ImageOptions } from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\n/**\n * Renders HTML content from data returned by a Visual Editor field on Starlight.\n *\n * The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n *\n * You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n *\n * To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n *\n * @example Requesting an entry and rendering its content.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n *\n * ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   // This is just an example, you could fetch\n *   // the entry any way you want.\n *   useEffect(async () => {\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, content will be on the `entry.data.post_content` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <VisualContent content={entry.data.post_content} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null as unknown as JSX.Element\n  }\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph')\n\n    if (!block) return null as unknown as JSX.Element\n\n    const text = (block as VisualDataBlock<ParagraphBlock>).data.text.split(' ')\n    const excerptText =\n      text.length > excerptLength\n        ? text.splice(0, excerptLength).join(' ') + '...'\n        : text.join(' ')\n    const Component = componentList.paragraph\n\n    return (\n      <Component\n        key={block.id}\n        id={block.id}\n        type={block.type}\n        data={{ text: excerptText }}\n      />\n    )\n  }\n\n  return (\n    <div className=\"sl-visual-content\">\n      {content.blocks.map((block) => {\n        const Component = componentList[block.type]\n\n        if (!Component) return null\n\n        return (\n          <Component\n            key={block.id}\n            id={block.id}\n            type={block.type}\n            data={block.data as never}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport {\n  VisualContentStyles,\n  Paragraph as ParagraphComponent,\n  Header as HeaderComponent,\n  Quote as QuoteComponent,\n  Image as ImageComponent,\n  HTML as HTMLComponent,\n  List as ListComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}

package/dist/cjs/VisualContent/styles.d.ts

@@ -1,3 +1,14 @@
 /// <reference types="react" />
+/**
+ * Renders a `<style>` tag with rules that style the rendered
+ * {@link VisualContent} HTML. While not required for VisualContent to work,
+ * using these rules is a quick way to make the content look the same way as it
+ * does on the Starlight content editor.
+ *
+ * You only need to render this component once in your application,
+ * preferably in the `<head>` section.
+ *
+ * @group VisualContent
+ */
 export declare const VisualContentStyles: () => JSX.Element;
 //# sourceMappingURL=styles.d.ts.map

package/dist/cjs/VisualContent/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}

package/dist/cjs/VisualContent/styles.js

@@ -31,6 +31,17 @@ const styles = `
   .sl__color__text--brown{color:rgb(159,107,83)}
   .sl__color__text--gray{color:rgb(120,119,116)}
 `;
+/**
+ * Renders a `<style>` tag with rules that style the rendered
+ * {@link VisualContent} HTML. While not required for VisualContent to work,
+ * using these rules is a quick way to make the content look the same way as it
+ * does on the Starlight content editor.
+ *
+ * You only need to render this component once in your application,
+ * preferably in the `<head>` section.
+ *
+ * @group VisualContent
+ */
 const VisualContentStyles = () => {
     return react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
 };

package/dist/cjs/VisualContent/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAEM,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,yCAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA;AAFY,QAAA,mBAAmB,uBAE/B","sourcesContent":["import React from 'react'\n\nconst styles = `\n  .sl-visual-content *{max-width:100%}\n  .sl-visual-content>figure{margin:1em 0}\n  .sl-list{list-style:none;padding-left:1em}\n  .sl-list>li{margin:.5em 0}\n  .sl-list>li::before{content: \"•\";margin-right:.5em}\n  .sl__color{padding:2px 0;border-radius:4px}\n  .sl__color__bg--red{background-color:rgb(253,235,236)}\n  .sl__color__bg--pink{background-color:rgb(253,235,236)}\n  .sl__color__bg--purple{background-color:rgb(244,240,247)}\n  .sl__color__bg--blue{background-color:rgb(231,243,248)}\n  .sl__color__bg--green{background-color:rgb(237,243,236)}\n  .sl__color__bg--yellow{background-color:rgb(251,243,219)}\n  .sl__color__bg--orange{background-color:rgb(251,236,221)}\n  .sl__color__bg--brown{background-color:rgb(244,238,238)}\n  .sl__color__bg--gray{background-color:rgb(241,241,239)}\n  .sl__color__text--red{color:rgb(212,76,71)}\n  .sl__color__text--pink{color:rgb(193,76,138)}\n  .sl__color__text--purple{color:rgb(144,101,176)}\n  .sl__color__text--blue{color:rgb(51,126,169)}\n  .sl__color__text--green{color:rgb(68,131,97)}\n  .sl__color__text--yellow{color:rgb(203,145,47)}\n  .sl__color__text--orange{color:rgb(217,115,13)}\n  .sl__color__text--brown{color:rgb(159,107,83)}\n  .sl__color__text--gray{color:rgb(120,119,116)}\n`\n\nexport const VisualContentStyles = (): JSX.Element => {\n  return <style dangerouslySetInnerHTML={{ __html: styles }} />\n}\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAED;;;;;;;;;;GAUG;AACI,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,yCAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA;AAFY,QAAA,mBAAmB,uBAE/B","sourcesContent":["import React from 'react'\n\nconst styles = `\n  .sl-visual-content *{max-width:100%}\n  .sl-visual-content>figure{margin:1em 0}\n  .sl-list{list-style:none;padding-left:1em}\n  .sl-list>li{margin:.5em 0}\n  .sl-list>li::before{content: \"•\";margin-right:.5em}\n  .sl__color{padding:2px 0;border-radius:4px}\n  .sl__color__bg--red{background-color:rgb(253,235,236)}\n  .sl__color__bg--pink{background-color:rgb(253,235,236)}\n  .sl__color__bg--purple{background-color:rgb(244,240,247)}\n  .sl__color__bg--blue{background-color:rgb(231,243,248)}\n  .sl__color__bg--green{background-color:rgb(237,243,236)}\n  .sl__color__bg--yellow{background-color:rgb(251,243,219)}\n  .sl__color__bg--orange{background-color:rgb(251,236,221)}\n  .sl__color__bg--brown{background-color:rgb(244,238,238)}\n  .sl__color__bg--gray{background-color:rgb(241,241,239)}\n  .sl__color__text--red{color:rgb(212,76,71)}\n  .sl__color__text--pink{color:rgb(193,76,138)}\n  .sl__color__text--purple{color:rgb(144,101,176)}\n  .sl__color__text--blue{color:rgb(51,126,169)}\n  .sl__color__text--green{color:rgb(68,131,97)}\n  .sl__color__text--yellow{color:rgb(203,145,47)}\n  .sl__color__text--orange{color:rgb(217,115,13)}\n  .sl__color__text--brown{color:rgb(159,107,83)}\n  .sl__color__text--gray{color:rgb(120,119,116)}\n`\n\n/**\n * Renders a `<style>` tag with rules that style the rendered\n * {@link VisualContent} HTML. While not required for VisualContent to work,\n * using these rules is a quick way to make the content look the same way as it\n * does on the Starlight content editor.\n *\n * You only need to render this component once in your application,\n * preferably in the `<head>` section.\n *\n * @group VisualContent\n */\nexport const VisualContentStyles = (): JSX.Element => {\n  return <style dangerouslySetInnerHTML={{ __html: styles }} />\n}\n"]}

package/dist/cjs/VisualContent/types.d.ts

@@ -9,11 +9,31 @@ export interface BlockComponents extends Implements<Record<BlockType, unknown>,
     raw: ComponentType<VisualDataBlock<HTMLBlock>>;
     list: ComponentType<VisualDataBlock<ListBlock>>;
 }
-export declare type VisualContentProps = {
+/**
+ * Props accepted by the {@link VisualContent} component.
+ * @group VisualContent
+ */
+export interface VisualContentProps {
+    /**
+     * The content to render. It should be the object returned by
+     * Starlight on a Visual Editor field. Required.
+     */
     content?: VisualData;
+    /**
+     * An optional object of React components. You can pass any
+     * number of replacement components that will render blocks of a given type.
+     */
     components?: Partial<BlockComponents>;
+    /**
+     * If true, only a small portion of the content will be rendered,
+     * and block types other than text paragraphs will be ignored. Defaults to false.
+     */
     excerpt?: boolean;
+    /**
+     * Defines the maximum number of words to render when
+     * excerpt is true. Defaults to 40.
+     */
     excerptLength?: number;
-};
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/cjs/VisualContent/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,GAAG,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;CAChD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,GAAG,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;CAChD;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB"}

package/dist/cjs/VisualContent/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n  excerpt?: boolean\n  excerptLength?: number\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\n/**\n * Props accepted by the {@link VisualContent} component.\n * @group VisualContent\n */\nexport interface VisualContentProps {\n  /**\n   * The content to render. It should be the object returned by\n   * Starlight on a Visual Editor field. Required.\n   */\n  content?: VisualData\n  /**\n   * An optional object of React components. You can pass any\n   * number of replacement components that will render blocks of a given type.\n   */\n  components?: Partial<BlockComponents>\n  /**\n   * If true, only a small portion of the content will be rendered,\n   * and block types other than text paragraphs will be ignored. Defaults to false.\n   */\n  excerpt?: boolean\n  /**\n   * Defines the maximum number of words to render when\n   * excerpt is true. Defaults to 40.\n   */\n  excerptLength?: number\n}\n"]}

package/dist/cjs/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kEAA4C;AAC5C,uDAAoC;AAEpC,kDAA+B;AAC/B,oDAAiC;AAEjC,kBAAe,gBAAS,CAAA","sourcesContent":["import Starlight from '@starlightcms/js-sdk'\nexport * from '@starlightcms/js-sdk'\n\nexport * from './VisualContent'\nexport * from './ResponsiveImage'\n\nexport default Starlight\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,kEAA4C;AAC5C,uDAAoC;AAEpC,kDAA+B;AAC/B,oDAAiC;AAEjC,kBAAe,gBAAS,CAAA","sourcesContent":["import Starlight from '@starlightcms/js-sdk'\nexport * from '@starlightcms/js-sdk'\n\nexport * from './VisualContent'\nexport * from './ResponsiveImage'\n\nexport default Starlight\n"]}

package/dist/esm/ResponsiveImage/index.d.ts

@@ -1,16 +1,64 @@
-import { ReactNode, RefObject } from 'react';
-import { MediaObject } from '@starlightcms/js-sdk';
+import { ReactNode } from 'react';
+import { ResponsiveImageProps } from './types';
+/**
+ * Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript
+ * is disabled in the browser. This is useful to web crawlers that don't run
+ * JS files, which is important for SEO.
+ *
+ * You only need to render this component once in your application,
+ * preferably in the `<head>` section.
+ *
+ * @group ResponsiveImage
+ */
 export declare const GlobalLazyloadStyles: () => ReactNode;
-declare type ResponsiveImageProps = {
-    className?: string;
-    image: MediaObject | string;
-    sizes?: string;
-    alt?: string;
-    variation?: string;
-    background?: string;
-    lazyRoot?: RefObject<HTMLElement> | null;
-    lazyRootMargin?: string;
-};
+/**
+ * Renders an image from a given Starlight media object. The Starlight
+ * optimized image will be rendered by default if no `variation` prop is passed.
+ *
+ * If the `sizes` prop is passed, a responsive image will be rendered by
+ * generating a "src-set" property.
+ *
+ * The image will be lazy-loaded, which means that it should only load
+ * when the browser viewport gets near the image.
+ *
+ * @example Requesting an entry and rendering an image.
+ *
+ * Assume we created a "Posts" model with a slug of `posts`, and placed a Media
+ * File field with a key of `featured_image` on it.
+ *
+ * ```jsx
+ * import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'
+ *
+ * const EntryComponent = ({ slug }) => {
+ *   const [entry, setEntry] = useState(null)
+ *
+ *   useEffect(async () => {
+ *     // This is just an example, you could fetch
+ *     // the entry any way you want.
+ *     const response = await Starlight.posts.entries.get(slug)
+ *
+ *     setEntry(response.data)
+ *   }, [ slug ])
+ *
+ *   // After fetching, the image will be on the `entry.data.featured_image` property.
+ *   return (
+ *     entry ? (
+ *        <article>
+ *          <h1>{entry.title}</h1>
+ *          <ResponsiveImage image={entry.data.featured_image} />
+ *        </article>
+ *     ) : (
+ *       <div>Loading...</div>
+ *     )
+ *   )
+ * }
+ *
+ * ```
+ *
+ * @param props Component props. See {@link ResponsiveImageProps} to see the
+ * available options.
+ * @group ResponsiveImage
+ */
 export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, lazyRoot, lazyRootMargin, }: ResponsiveImageProps) => JSX.Element;
-export {};
+export type { ResponsiveImageProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/ResponsiveImage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,SAAS,EACT,SAAS,EAKV,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAKlD,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,uFASzB,oBAAoB,KAAG,WA2GzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK9C;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,eAAe,uFASzB,oBAAoB,KAAG,WA2GzB,CAAA;AAED,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/esm/ResponsiveImage/index.js

@@ -1,9 +1,67 @@
-import React, { useEffect, useMemo, useRef, useState, } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+/**
+ * Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript
+ * is disabled in the browser. This is useful to web crawlers that don't run
+ * JS files, which is important for SEO.
+ *
+ * You only need to render this component once in your application,
+ * preferably in the `<head>` section.
+ *
+ * @group ResponsiveImage
+ */
 export const GlobalLazyloadStyles = () => {
     return (React.createElement("noscript", null,
         React.createElement("style", null, 'img.sl-lazyload{display: none;}')));
 };
+/**
+ * Renders an image from a given Starlight media object. The Starlight
+ * optimized image will be rendered by default if no `variation` prop is passed.
+ *
+ * If the `sizes` prop is passed, a responsive image will be rendered by
+ * generating a "src-set" property.
+ *
+ * The image will be lazy-loaded, which means that it should only load
+ * when the browser viewport gets near the image.
+ *
+ * @example Requesting an entry and rendering an image.
+ *
+ * Assume we created a "Posts" model with a slug of `posts`, and placed a Media
+ * File field with a key of `featured_image` on it.
+ *
+ * ```jsx
+ * import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'
+ *
+ * const EntryComponent = ({ slug }) => {
+ *   const [entry, setEntry] = useState(null)
+ *
+ *   useEffect(async () => {
+ *     // This is just an example, you could fetch
+ *     // the entry any way you want.
+ *     const response = await Starlight.posts.entries.get(slug)
+ *
+ *     setEntry(response.data)
+ *   }, [ slug ])
+ *
+ *   // After fetching, the image will be on the `entry.data.featured_image` property.
+ *   return (
+ *     entry ? (
+ *        <article>
+ *          <h1>{entry.title}</h1>
+ *          <ResponsiveImage image={entry.data.featured_image} />
+ *        </article>
+ *     ) : (
+ *       <div>Loading...</div>
+ *     )
+ *   )
+ * }
+ *
+ * ```
+ *
+ * @param props Component props. See {@link ResponsiveImageProps} to see the
+ * available options.
+ * @group ResponsiveImage
+ */
 export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', lazyRoot, lazyRootMargin = '200px', }) => {
     const imageRef = useRef(null);
     // When true, the image may load normally

package/dist/esm/ResponsiveImage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  ReactNode,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { MediaObject } from '@starlightcms/js-sdk'\n\nconst transparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\nexport const GlobalLazyloadStyles = (): ReactNode => {\n  return (\n    <noscript>\n      <style>{'img.sl-lazyload{display: none;}'}</style>\n    </noscript>\n  )\n}\n\ntype ResponsiveImageProps = {\n  className?: string\n  image: MediaObject | string\n  sizes?: string\n  alt?: string\n  variation?: string\n  background?: string\n  lazyRoot?: RefObject<HTMLElement> | null\n  lazyRootMargin?: string\n}\n\nexport const ResponsiveImage = ({\n  className = '',\n  image,\n  sizes = '',\n  alt = typeof image === 'string' ? '' : image.alt,\n  variation = 'optimized',\n  background = '',\n  lazyRoot,\n  lazyRootMargin = '200px',\n}: ResponsiveImageProps): JSX.Element => {\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  // When true, the image may load normally\n  const [canLoad, setCanLoad] = useState(false)\n\n  // When true, the image has been successfully loaded by the browser\n  const [hasLoaded, setHasLoaded] = useState(false)\n\n  // Get the optimized variation if available\n  const source = useMemo(() => {\n    // If the given image was a string, simply return it\n    if (typeof image === 'string' || !image.files) return\n\n    const chosenVariation = image.files.find(\n      (file) => file.variation === variation\n    )\n\n    return chosenVariation\n      ? chosenVariation\n      : image.files.find((file) => file.variation === 'original')\n  }, [image, variation])\n\n  // Create a srcset\n  const sourceSet = useMemo(() => {\n    if (!source) return\n\n    // source is only defined if image is a MediaObject, so we assert it as one\n    const img = image as MediaObject\n\n    const sets = []\n    const large = img.files.find((file) => file.variation === 'large')\n    const medium = img.files.find((file) => file.variation === 'medium')\n    const thumbnail = img.files.find((file) => file.variation === 'thumbnail')\n\n    if (thumbnail)\n      sets.push(`${encodeURI(thumbnail.path)} ${thumbnail.meta?.width}w`)\n    if (medium) sets.push(`${encodeURI(medium.path)} 600w`)\n    if (large) sets.push(`${encodeURI(large.path)} 1200w`)\n    sets.push(`${encodeURI(source.path)} ${source.meta?.width}w`)\n\n    return sets.join(',')\n  }, [source, image])\n\n  const imageStyle = useMemo(() => {\n    return {\n      backgroundColor:\n        background || hasLoaded || typeof image === 'string'\n          ? 'transparent'\n          : `#${source?.background_color ?? 'transparent'}`,\n    }\n  }, [background, source, hasLoaded, image])\n\n  useEffect(() => {\n    let ref: HTMLImageElement | null = null\n    const observer = new IntersectionObserver(\n      (entries, observer) => {\n        if (entries[0].intersectionRatio > 0) {\n          // Image entered the viewport, set it as loadable\n          setCanLoad(true)\n\n          // Stop observing the image\n          observer.unobserve(ref as HTMLImageElement)\n        }\n      },\n      {\n        root: lazyRoot?.current,\n        rootMargin: lazyRootMargin,\n      }\n    )\n\n    if (imageRef.current) {\n      ref = imageRef.current\n      observer.observe(ref)\n    }\n\n    const loadHandler = () => {\n      // After loading the image, the \"hasLoaded\" flag is used to hide the background color\n      setHasLoaded(true)\n    }\n\n    ref?.addEventListener('load', loadHandler)\n\n    return () => {\n      if (ref) {\n        observer.unobserve(ref)\n        ref.removeEventListener('load', loadHandler)\n      }\n    }\n  }, [source])\n\n  return (\n    <>\n      <img\n        ref={imageRef}\n        className={'sl-lazyload ' + className}\n        style={imageStyle}\n        src={canLoad ? source?.path || (image as string) : transparentImage}\n        srcSet={canLoad ? (sourceSet ? sourceSet : undefined) : undefined}\n        sizes={canLoad ? (sourceSet ? sizes : undefined) : undefined}\n        alt={alt}\n      />\n      <noscript>\n        <img src={(source && source.path) || (image as string)} alt={alt} />\n      </noscript>\n    </>\n  )\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { MediaObject } from '@starlightcms/js-sdk'\nimport { ResponsiveImageProps } from './types'\n\nconst transparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\n/**\n * Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript\n * is disabled in the browser. This is useful to web crawlers that don't run\n * JS files, which is important for SEO.\n *\n * You only need to render this component once in your application,\n * preferably in the `<head>` section.\n *\n * @group ResponsiveImage\n */\nexport const GlobalLazyloadStyles = (): ReactNode => {\n  return (\n    <noscript>\n      <style>{'img.sl-lazyload{display: none;}'}</style>\n    </noscript>\n  )\n}\n\n/**\n * Renders an image from a given Starlight media object. The Starlight\n * optimized image will be rendered by default if no `variation` prop is passed.\n *\n * If the `sizes` prop is passed, a responsive image will be rendered by\n * generating a \"src-set\" property.\n *\n * The image will be lazy-loaded, which means that it should only load\n * when the browser viewport gets near the image.\n *\n * @example Requesting an entry and rendering an image.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Media\n * File field with a key of `featured_image` on it.\n *\n * ```jsx\n * import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   useEffect(async () => {\n *     // This is just an example, you could fetch\n *     // the entry any way you want.\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, the image will be on the `entry.data.featured_image` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <ResponsiveImage image={entry.data.featured_image} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link ResponsiveImageProps} to see the\n * available options.\n * @group ResponsiveImage\n */\nexport const ResponsiveImage = ({\n  className = '',\n  image,\n  sizes = '',\n  alt = typeof image === 'string' ? '' : image.alt,\n  variation = 'optimized',\n  background = '',\n  lazyRoot,\n  lazyRootMargin = '200px',\n}: ResponsiveImageProps): JSX.Element => {\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  // When true, the image may load normally\n  const [canLoad, setCanLoad] = useState(false)\n\n  // When true, the image has been successfully loaded by the browser\n  const [hasLoaded, setHasLoaded] = useState(false)\n\n  // Get the optimized variation if available\n  const source = useMemo(() => {\n    // If the given image was a string, simply return it\n    if (typeof image === 'string' || !image.files) return\n\n    const chosenVariation = image.files.find(\n      (file) => file.variation === variation\n    )\n\n    return chosenVariation\n      ? chosenVariation\n      : image.files.find((file) => file.variation === 'original')\n  }, [image, variation])\n\n  // Create a srcset\n  const sourceSet = useMemo(() => {\n    if (!source) return\n\n    // source is only defined if image is a MediaObject, so we assert it as one\n    const img = image as MediaObject\n\n    const sets = []\n    const large = img.files.find((file) => file.variation === 'large')\n    const medium = img.files.find((file) => file.variation === 'medium')\n    const thumbnail = img.files.find((file) => file.variation === 'thumbnail')\n\n    if (thumbnail)\n      sets.push(`${encodeURI(thumbnail.path)} ${thumbnail.meta?.width}w`)\n    if (medium) sets.push(`${encodeURI(medium.path)} 600w`)\n    if (large) sets.push(`${encodeURI(large.path)} 1200w`)\n    sets.push(`${encodeURI(source.path)} ${source.meta?.width}w`)\n\n    return sets.join(',')\n  }, [source, image])\n\n  const imageStyle = useMemo(() => {\n    return {\n      backgroundColor:\n        background || hasLoaded || typeof image === 'string'\n          ? 'transparent'\n          : `#${source?.background_color ?? 'transparent'}`,\n    }\n  }, [background, source, hasLoaded, image])\n\n  useEffect(() => {\n    let ref: HTMLImageElement | null = null\n    const observer = new IntersectionObserver(\n      (entries, observer) => {\n        if (entries[0].intersectionRatio > 0) {\n          // Image entered the viewport, set it as loadable\n          setCanLoad(true)\n\n          // Stop observing the image\n          observer.unobserve(ref as HTMLImageElement)\n        }\n      },\n      {\n        root: lazyRoot?.current,\n        rootMargin: lazyRootMargin,\n      }\n    )\n\n    if (imageRef.current) {\n      ref = imageRef.current\n      observer.observe(ref)\n    }\n\n    const loadHandler = () => {\n      // After loading the image, the \"hasLoaded\" flag is used to hide the background color\n      setHasLoaded(true)\n    }\n\n    ref?.addEventListener('load', loadHandler)\n\n    return () => {\n      if (ref) {\n        observer.unobserve(ref)\n        ref.removeEventListener('load', loadHandler)\n      }\n    }\n  }, [source])\n\n  return (\n    <>\n      <img\n        ref={imageRef}\n        className={'sl-lazyload ' + className}\n        style={imageStyle}\n        src={canLoad ? source?.path || (image as string) : transparentImage}\n        srcSet={canLoad ? (sourceSet ? sourceSet : undefined) : undefined}\n        sizes={canLoad ? (sourceSet ? sizes : undefined) : undefined}\n        alt={alt}\n      />\n      <noscript>\n        <img src={(source && source.path) || (image as string)} alt={alt} />\n      </noscript>\n    </>\n  )\n}\n\nexport type { ResponsiveImageProps }\n"]}

package/dist/esm/ResponsiveImage/types.d.ts

@@ -0,0 +1,52 @@
+import { MediaObject } from '@starlightcms/js-sdk';
+import { RefObject } from 'react';
+/**
+ * Props accepted by the {@link ResponsiveImage} component.
+ * @group ResponsiveImage
+ */
+export interface ResponsiveImageProps {
+    className?: string;
+    /**
+     * The image to render. It should be a URI string or the object returned by
+     * Starlight on a Media File field. Required.
+     */
+    image: MediaObject | string;
+    /**
+     * An HTML <img> `sizes` attribute. If provided, the browser will render the
+     * best fit image size variation to the current viewport size. See
+     * [the MDN documentation on the sizes property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
+     * to learn how to configure this attribute.
+     */
+    sizes?: string;
+    /**
+     * Alternate text description of the image. If set and the given image is a
+     * Starlight media object, it will overwrite this image's alternative text
+     * set in Starlight.
+     */
+    alt?: string;
+    /**
+     * Defines which image variation will be rendered. Defaults to `optimized`.
+     */
+    variation?: string;
+    /**
+     * Defines the background color of the image while it loads. It accepts any
+     * CSS color, including `transparent`. Defaults to the color generated by
+     * Starlight when the image was uploaded, or transparent when the given image
+     * is a URI string.
+     */
+    background?: string;
+    /**
+     * Defines the scrollable parent of the image. Set this to the nearest
+     * scrollable HTMLElement parent of this image if lazy-loading is not working.
+     * See [the MDN documentation on IntersectionObserver.root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root)
+     * to learn more.
+     */
+    lazyRoot?: RefObject<HTMLElement> | null;
+    /**
+     * Defines how close to the viewport an image has to be to start loading.
+     * See [the MDN documentation on IntersectionObserver.rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
+     * to learn more. Defaults to 200px.
+     */
+    lazyRootMargin?: string;
+}
+//# sourceMappingURL=types.d.ts.map