@starlightcms/react-sdk 0.4.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ResponsiveImage/index.d.ts +4 -2
- package/dist/cjs/ResponsiveImage/index.d.ts.map +1 -1
- package/dist/cjs/ResponsiveImage/index.js +4 -1
- package/dist/cjs/ResponsiveImage/index.js.map +1 -1
- package/dist/cjs/VisualContent/index.d.ts +2 -1
- package/dist/cjs/VisualContent/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/index.js +4 -2
- package/dist/cjs/VisualContent/index.js.map +1 -1
- package/dist/cjs/VisualContent/styles.d.ts +3 -0
- package/dist/cjs/VisualContent/styles.d.ts.map +1 -0
- package/dist/cjs/VisualContent/styles.js +38 -0
- package/dist/cjs/VisualContent/styles.js.map +1 -0
- package/dist/esm/ResponsiveImage/index.d.ts +4 -2
- package/dist/esm/ResponsiveImage/index.d.ts.map +1 -1
- package/dist/esm/ResponsiveImage/index.js +5 -2
- package/dist/esm/ResponsiveImage/index.js.map +1 -1
- package/dist/esm/VisualContent/index.d.ts +2 -1
- package/dist/esm/VisualContent/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/index.js +3 -2
- package/dist/esm/VisualContent/index.js.map +1 -1
- package/dist/esm/VisualContent/styles.d.ts +3 -0
- package/dist/esm/VisualContent/styles.d.ts.map +1 -0
- package/dist/esm/VisualContent/styles.js +31 -0
- package/dist/esm/VisualContent/styles.js.map +1 -0
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { MediaObject } from '@starlightcms/js-sdk';
|
|
3
3
|
export declare const GlobalLazyloadStyles: () => ReactNode;
|
|
4
4
|
declare type ResponsiveImageProps = {
|
|
@@ -8,7 +8,9 @@ declare type ResponsiveImageProps = {
|
|
|
8
8
|
alt?: string;
|
|
9
9
|
variation?: string;
|
|
10
10
|
background?: string;
|
|
11
|
+
lazyRoot?: RefObject<HTMLElement> | null;
|
|
12
|
+
lazyRootMargin?: string;
|
|
11
13
|
};
|
|
12
|
-
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, }: ResponsiveImageProps) => JSX.Element;
|
|
14
|
+
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, lazyRoot, lazyRootMargin, }: ResponsiveImageProps) => JSX.Element;
|
|
13
15
|
export {};
|
|
14
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,
|
|
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"}
|
|
@@ -27,7 +27,7 @@ const GlobalLazyloadStyles = () => {
|
|
|
27
27
|
react_1.default.createElement("style", null, 'img.sl-lazyload{display: none;}')));
|
|
28
28
|
};
|
|
29
29
|
exports.GlobalLazyloadStyles = GlobalLazyloadStyles;
|
|
30
|
-
const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', }) => {
|
|
30
|
+
const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', lazyRoot, lazyRootMargin = '200px', }) => {
|
|
31
31
|
const imageRef = (0, react_1.useRef)(null);
|
|
32
32
|
// When true, the image may load normally
|
|
33
33
|
const [canLoad, setCanLoad] = (0, react_1.useState)(false);
|
|
@@ -80,6 +80,9 @@ const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image
|
|
|
80
80
|
// Stop observing the image
|
|
81
81
|
observer.unobserve(ref);
|
|
82
82
|
}
|
|
83
|
+
}, {
|
|
84
|
+
root: lazyRoot === null || lazyRoot === void 0 ? void 0 : lazyRoot.current,
|
|
85
|
+
rootMargin: lazyRootMargin,
|
|
83
86
|
});
|
|
84
87
|
if (imageRef.current) {
|
|
85
88
|
ref = imageRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
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"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { VisualContentProps } from './types';
|
|
3
|
+
import { VisualContentStyles } from './styles';
|
|
3
4
|
import Paragraph from './blocks/Paragraph';
|
|
4
5
|
import Header from './blocks/Header';
|
|
5
6
|
import Quote from './blocks/Quote';
|
|
@@ -7,5 +8,5 @@ import Image from './blocks/Image';
|
|
|
7
8
|
import HTML from './blocks/HTML';
|
|
8
9
|
import List from './blocks/List';
|
|
9
10
|
export declare const VisualContent: FC<VisualContentProps>;
|
|
10
|
-
export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
|
+
export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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,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,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"}
|
|
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"}
|
|
@@ -22,8 +22,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
22
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContent = void 0;
|
|
25
|
+
exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContentStyles = exports.VisualContent = void 0;
|
|
26
26
|
const react_1 = __importStar(require("react"));
|
|
27
|
+
const styles_1 = require("./styles");
|
|
28
|
+
Object.defineProperty(exports, "VisualContentStyles", { enumerable: true, get: function () { return styles_1.VisualContentStyles; } });
|
|
27
29
|
const Paragraph_1 = __importDefault(require("./blocks/Paragraph"));
|
|
28
30
|
exports.ParagraphComponent = Paragraph_1.default;
|
|
29
31
|
const Header_1 = __importDefault(require("./blocks/Header"));
|
|
@@ -45,10 +47,10 @@ const defaultComponents = {
|
|
|
45
47
|
list: List_1.default,
|
|
46
48
|
};
|
|
47
49
|
const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
|
|
50
|
+
const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
48
51
|
if (!content) {
|
|
49
52
|
return null;
|
|
50
53
|
}
|
|
51
|
-
const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
52
54
|
if (excerpt) {
|
|
53
55
|
const block = content.blocks.find((block) => block.type === 'paragraph');
|
|
54
56
|
if (!block)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,mEAA0C;
|
|
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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VisualContentStyles = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const styles = `
|
|
9
|
+
.sl-visual-content *{max-width:100%}
|
|
10
|
+
.sl-visual-content>figure{margin:1em 0}
|
|
11
|
+
.sl-list{list-style:none;padding-left:1em}
|
|
12
|
+
.sl-list>li{margin:.5em 0}
|
|
13
|
+
.sl-list>li::before{content: "•";margin-right:.5em}
|
|
14
|
+
.sl__color{padding:2px 0;border-radius:4px}
|
|
15
|
+
.sl__color__bg--red{background-color:rgb(253,235,236)}
|
|
16
|
+
.sl__color__bg--pink{background-color:rgb(253,235,236)}
|
|
17
|
+
.sl__color__bg--purple{background-color:rgb(244,240,247)}
|
|
18
|
+
.sl__color__bg--blue{background-color:rgb(231,243,248)}
|
|
19
|
+
.sl__color__bg--green{background-color:rgb(237,243,236)}
|
|
20
|
+
.sl__color__bg--yellow{background-color:rgb(251,243,219)}
|
|
21
|
+
.sl__color__bg--orange{background-color:rgb(251,236,221)}
|
|
22
|
+
.sl__color__bg--brown{background-color:rgb(244,238,238)}
|
|
23
|
+
.sl__color__bg--gray{background-color:rgb(241,241,239)}
|
|
24
|
+
.sl__color__text--red{color:rgb(212,76,71)}
|
|
25
|
+
.sl__color__text--pink{color:rgb(193,76,138)}
|
|
26
|
+
.sl__color__text--purple{color:rgb(144,101,176)}
|
|
27
|
+
.sl__color__text--blue{color:rgb(51,126,169)}
|
|
28
|
+
.sl__color__text--green{color:rgb(68,131,97)}
|
|
29
|
+
.sl__color__text--yellow{color:rgb(203,145,47)}
|
|
30
|
+
.sl__color__text--orange{color:rgb(217,115,13)}
|
|
31
|
+
.sl__color__text--brown{color:rgb(159,107,83)}
|
|
32
|
+
.sl__color__text--gray{color:rgb(120,119,116)}
|
|
33
|
+
`;
|
|
34
|
+
const VisualContentStyles = () => {
|
|
35
|
+
return react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
|
|
36
|
+
};
|
|
37
|
+
exports.VisualContentStyles = VisualContentStyles;
|
|
38
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +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"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { MediaObject } from '@starlightcms/js-sdk';
|
|
3
3
|
export declare const GlobalLazyloadStyles: () => ReactNode;
|
|
4
4
|
declare type ResponsiveImageProps = {
|
|
@@ -8,7 +8,9 @@ declare type ResponsiveImageProps = {
|
|
|
8
8
|
alt?: string;
|
|
9
9
|
variation?: string;
|
|
10
10
|
background?: string;
|
|
11
|
+
lazyRoot?: RefObject<HTMLElement> | null;
|
|
12
|
+
lazyRootMargin?: string;
|
|
11
13
|
};
|
|
12
|
-
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, }: ResponsiveImageProps) => JSX.Element;
|
|
14
|
+
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, lazyRoot, lazyRootMargin, }: ResponsiveImageProps) => JSX.Element;
|
|
13
15
|
export {};
|
|
14
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,
|
|
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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useRef, useState, } from 'react';
|
|
2
2
|
const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
|
|
3
3
|
export const GlobalLazyloadStyles = () => {
|
|
4
4
|
return (React.createElement("noscript", null,
|
|
5
5
|
React.createElement("style", null, 'img.sl-lazyload{display: none;}')));
|
|
6
6
|
};
|
|
7
|
-
export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', }) => {
|
|
7
|
+
export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', lazyRoot, lazyRootMargin = '200px', }) => {
|
|
8
8
|
const imageRef = useRef(null);
|
|
9
9
|
// When true, the image may load normally
|
|
10
10
|
const [canLoad, setCanLoad] = useState(false);
|
|
@@ -57,6 +57,9 @@ export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeo
|
|
|
57
57
|
// Stop observing the image
|
|
58
58
|
observer.unobserve(ref);
|
|
59
59
|
}
|
|
60
|
+
}, {
|
|
61
|
+
root: lazyRoot === null || lazyRoot === void 0 ? void 0 : lazyRoot.current,
|
|
62
|
+
rootMargin: lazyRootMargin,
|
|
60
63
|
});
|
|
61
64
|
if (imageRef.current) {
|
|
62
65
|
ref = imageRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
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"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { VisualContentProps } from './types';
|
|
3
|
+
import { VisualContentStyles } from './styles';
|
|
3
4
|
import Paragraph from './blocks/Paragraph';
|
|
4
5
|
import Header from './blocks/Header';
|
|
5
6
|
import Quote from './blocks/Quote';
|
|
@@ -7,5 +8,5 @@ import Image from './blocks/Image';
|
|
|
7
8
|
import HTML from './blocks/HTML';
|
|
8
9
|
import List from './blocks/List';
|
|
9
10
|
export declare const VisualContent: FC<VisualContentProps>;
|
|
10
|
-
export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
|
+
export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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,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,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"}
|
|
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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
+
import { VisualContentStyles } from './styles';
|
|
2
3
|
import Paragraph from './blocks/Paragraph';
|
|
3
4
|
import Header from './blocks/Header';
|
|
4
5
|
import Quote from './blocks/Quote';
|
|
@@ -14,10 +15,10 @@ const defaultComponents = {
|
|
|
14
15
|
list: List,
|
|
15
16
|
};
|
|
16
17
|
export const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
|
|
18
|
+
const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
17
19
|
if (!content) {
|
|
18
20
|
return null;
|
|
19
21
|
}
|
|
20
|
-
const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
21
22
|
if (excerpt) {
|
|
22
23
|
const block = content.blocks.find((block) => block.type === 'paragraph');
|
|
23
24
|
if (!block)
|
|
@@ -36,5 +37,5 @@ export const VisualContent = ({ content, components = {}, excerpt = false, excer
|
|
|
36
37
|
return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
|
|
37
38
|
})));
|
|
38
39
|
};
|
|
39
|
-
export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
40
|
+
export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
40
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAG1C,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;AAEhC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAG1C,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;AAEhC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,CAAC,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,OAAO,CAC3B,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,oBAAC,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,6BAAK,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,oBAAC,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;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","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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
const styles = `
|
|
3
|
+
.sl-visual-content *{max-width:100%}
|
|
4
|
+
.sl-visual-content>figure{margin:1em 0}
|
|
5
|
+
.sl-list{list-style:none;padding-left:1em}
|
|
6
|
+
.sl-list>li{margin:.5em 0}
|
|
7
|
+
.sl-list>li::before{content: "•";margin-right:.5em}
|
|
8
|
+
.sl__color{padding:2px 0;border-radius:4px}
|
|
9
|
+
.sl__color__bg--red{background-color:rgb(253,235,236)}
|
|
10
|
+
.sl__color__bg--pink{background-color:rgb(253,235,236)}
|
|
11
|
+
.sl__color__bg--purple{background-color:rgb(244,240,247)}
|
|
12
|
+
.sl__color__bg--blue{background-color:rgb(231,243,248)}
|
|
13
|
+
.sl__color__bg--green{background-color:rgb(237,243,236)}
|
|
14
|
+
.sl__color__bg--yellow{background-color:rgb(251,243,219)}
|
|
15
|
+
.sl__color__bg--orange{background-color:rgb(251,236,221)}
|
|
16
|
+
.sl__color__bg--brown{background-color:rgb(244,238,238)}
|
|
17
|
+
.sl__color__bg--gray{background-color:rgb(241,241,239)}
|
|
18
|
+
.sl__color__text--red{color:rgb(212,76,71)}
|
|
19
|
+
.sl__color__text--pink{color:rgb(193,76,138)}
|
|
20
|
+
.sl__color__text--purple{color:rgb(144,101,176)}
|
|
21
|
+
.sl__color__text--blue{color:rgb(51,126,169)}
|
|
22
|
+
.sl__color__text--green{color:rgb(68,131,97)}
|
|
23
|
+
.sl__color__text--yellow{color:rgb(203,145,47)}
|
|
24
|
+
.sl__color__text--orange{color:rgb(217,115,13)}
|
|
25
|
+
.sl__color__text--brown{color:rgb(159,107,83)}
|
|
26
|
+
.sl__color__text--gray{color:rgb(120,119,116)}
|
|
27
|
+
`;
|
|
28
|
+
export const VisualContentStyles = () => {
|
|
29
|
+
return React.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,+BAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA","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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starlightcms/react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "The Starlight SDK for React",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
]
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@starlightcms/js-sdk": "^0.
|
|
57
|
+
"@starlightcms/js-sdk": "^0.8.0"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"react": ">=16.0.0"
|