@starlightcms/react-sdk 0.7.0 → 0.9.0
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/README.md +57 -0
- package/dist/cjs/ResponsiveImage/index.d.ts +61 -13
- package/dist/cjs/ResponsiveImage/index.d.ts.map +1 -1
- package/dist/cjs/ResponsiveImage/index.js +63 -1
- package/dist/cjs/ResponsiveImage/index.js.map +1 -1
- package/dist/cjs/ResponsiveImage/types.d.ts +52 -0
- package/dist/cjs/ResponsiveImage/types.d.ts.map +1 -0
- package/dist/cjs/ResponsiveImage/types.js +3 -0
- package/dist/cjs/ResponsiveImage/types.js.map +1 -0
- package/dist/cjs/VisualContent/blocks/HTML.d.ts +11 -0
- package/dist/cjs/VisualContent/blocks/HTML.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/HTML.js +11 -0
- package/dist/cjs/VisualContent/blocks/HTML.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Header.d.ts +13 -2
- package/dist/cjs/VisualContent/blocks/Header.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Header.js +11 -0
- package/dist/cjs/VisualContent/blocks/Header.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image.d.ts +21 -1
- package/dist/cjs/VisualContent/blocks/Image.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image.js +22 -1
- package/dist/cjs/VisualContent/blocks/Image.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/List.d.ts +11 -0
- package/dist/cjs/VisualContent/blocks/List.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/List.js +11 -0
- package/dist/cjs/VisualContent/blocks/List.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.d.ts +11 -0
- package/dist/cjs/VisualContent/blocks/Paragraph.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.js +11 -0
- package/dist/cjs/VisualContent/blocks/Paragraph.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Quote.d.ts +11 -0
- package/dist/cjs/VisualContent/blocks/Quote.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Quote.js +11 -0
- package/dist/cjs/VisualContent/blocks/Quote.js.map +1 -1
- package/dist/cjs/VisualContent/index.d.ts +55 -3
- package/dist/cjs/VisualContent/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/index.js +56 -1
- package/dist/cjs/VisualContent/index.js.map +1 -1
- package/dist/cjs/VisualContent/styles.d.ts +11 -0
- package/dist/cjs/VisualContent/styles.d.ts.map +1 -1
- package/dist/cjs/VisualContent/styles.js +11 -0
- package/dist/cjs/VisualContent/styles.js.map +1 -1
- package/dist/cjs/VisualContent/types.d.ts +22 -2
- package/dist/cjs/VisualContent/types.d.ts.map +1 -1
- package/dist/cjs/VisualContent/types.js.map +1 -1
- package/dist/cjs/index.js +5 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/ResponsiveImage/index.d.ts +61 -13
- package/dist/esm/ResponsiveImage/index.d.ts.map +1 -1
- package/dist/esm/ResponsiveImage/index.js +59 -1
- package/dist/esm/ResponsiveImage/index.js.map +1 -1
- package/dist/esm/ResponsiveImage/types.d.ts +52 -0
- package/dist/esm/ResponsiveImage/types.d.ts.map +1 -0
- package/dist/esm/ResponsiveImage/types.js +2 -0
- package/dist/esm/ResponsiveImage/types.js.map +1 -0
- package/dist/esm/VisualContent/blocks/HTML.d.ts +11 -0
- package/dist/esm/VisualContent/blocks/HTML.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/HTML.js +11 -0
- package/dist/esm/VisualContent/blocks/HTML.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Header.d.ts +13 -2
- package/dist/esm/VisualContent/blocks/Header.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Header.js +11 -0
- package/dist/esm/VisualContent/blocks/Header.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Image.d.ts +21 -1
- package/dist/esm/VisualContent/blocks/Image.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Image.js +17 -0
- package/dist/esm/VisualContent/blocks/Image.js.map +1 -1
- package/dist/esm/VisualContent/blocks/List.d.ts +11 -0
- package/dist/esm/VisualContent/blocks/List.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/List.js +11 -0
- package/dist/esm/VisualContent/blocks/List.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Paragraph.d.ts +11 -0
- package/dist/esm/VisualContent/blocks/Paragraph.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Paragraph.js +11 -0
- package/dist/esm/VisualContent/blocks/Paragraph.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Quote.d.ts +11 -0
- package/dist/esm/VisualContent/blocks/Quote.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Quote.js +11 -0
- package/dist/esm/VisualContent/blocks/Quote.js.map +1 -1
- package/dist/esm/VisualContent/index.d.ts +55 -3
- package/dist/esm/VisualContent/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/index.js +51 -0
- package/dist/esm/VisualContent/index.js.map +1 -1
- package/dist/esm/VisualContent/styles.d.ts +11 -0
- package/dist/esm/VisualContent/styles.d.ts.map +1 -1
- package/dist/esm/VisualContent/styles.js +11 -0
- package/dist/esm/VisualContent/styles.js.map +1 -1
- package/dist/esm/VisualContent/types.d.ts +22 -2
- package/dist/esm/VisualContent/types.d.ts.map +1 -1
- package/dist/esm/VisualContent/types.js.map +1 -1
- package/package.json +8 -2
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<picture>
|
|
2
|
+
<source media="(prefers-color-scheme: dark)" srcset="/website/static/img/sdk-header-dark.svg">
|
|
3
|
+
<source media="(prefers-color-scheme: light)" srcset="/website/static/img/sdk-header.svg">
|
|
4
|
+
<img alt="Starlight React SDK logo" src="/website/static/img/sdk-header.svg">
|
|
5
|
+
</picture>
|
|
6
|
+
|
|
7
|
+
# Starlight React SDK
|
|
8
|
+
|
|
9
|
+
This is the official Starlight SDK for React applications, which makes integrating Starlight
|
|
10
|
+
content into your apps a real breeze.
|
|
11
|
+
|
|
12
|
+
You can read the usage guide and the API reference in [its documentation page](https://react.sdk.starlight.sh).
|
|
13
|
+
|
|
14
|
+
## Quick Start
|
|
15
|
+
|
|
16
|
+
To quickly start using the React SDK, install it into your project:
|
|
17
|
+
|
|
18
|
+
```shell
|
|
19
|
+
npm install @starlightcms/react-sdk
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Then, import the SDK and configure which Starlight workspace it should request data from:
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import Starlight from '@starlightcms/react-sdk'
|
|
26
|
+
|
|
27
|
+
Starlight.configure({
|
|
28
|
+
workspace: '1234567890'
|
|
29
|
+
})
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
And, finally, start requesting data and rendering content:
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
import Starlight, { VisualContent } from '@starlightcms/react-sdk'
|
|
36
|
+
|
|
37
|
+
// Listing all entries from the 'posts' model.
|
|
38
|
+
const response = Starlight.posts.entries.list()
|
|
39
|
+
|
|
40
|
+
// Getting content from the 'hello-world' entry.
|
|
41
|
+
const response = Starlight.posts.entries.get('hello-world')
|
|
42
|
+
|
|
43
|
+
// Rendering visual editor content:
|
|
44
|
+
<VisualContent content={respnse.data.data.content} />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
The SDK is capable of requesting a myriad of different content from your workspaces. Check out
|
|
48
|
+
[the documentation](https://react.sdk.starlight.sh/docs/intro) to learn more.
|
|
49
|
+
|
|
50
|
+
## JavaScript SDK
|
|
51
|
+
|
|
52
|
+
If you don't use React, take a look at [the Starlight JavaScript SDK](https://github.com/starlightcms/js-sdk). It
|
|
53
|
+
provides most of React SDK's functionality, and you can use it with vanilla JavaScript or any JS framework.
|
|
54
|
+
|
|
55
|
+
## Issues
|
|
56
|
+
|
|
57
|
+
If you have any questions or you're facing any issues with the SDK, feel free to [open an issue](https://github.com/starlightcms/react-sdk/issues).
|
|
@@ -1,16 +1,64 @@
|
|
|
1
|
-
import { ReactNode
|
|
2
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ResponsiveImageProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript
|
|
5
|
+
* is disabled in the browser. This is useful to web crawlers that don't run
|
|
6
|
+
* JS files, which is important for SEO.
|
|
7
|
+
*
|
|
8
|
+
* You only need to render this component once in your application,
|
|
9
|
+
* preferably in the `<head>` section.
|
|
10
|
+
*
|
|
11
|
+
* @group ResponsiveImage
|
|
12
|
+
*/
|
|
3
13
|
export declare const GlobalLazyloadStyles: () => ReactNode;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Renders an image from a given Starlight media object. The Starlight
|
|
16
|
+
* optimized image will be rendered by default if no `variation` prop is passed.
|
|
17
|
+
*
|
|
18
|
+
* If the `sizes` prop is passed, a responsive image will be rendered by
|
|
19
|
+
* generating a "src-set" property.
|
|
20
|
+
*
|
|
21
|
+
* The image will be lazy-loaded, which means that it should only load
|
|
22
|
+
* when the browser viewport gets near the image.
|
|
23
|
+
*
|
|
24
|
+
* @example Requesting an entry and rendering an image.
|
|
25
|
+
*
|
|
26
|
+
* Assume we created a "Posts" model with a slug of `posts`, and placed a Media
|
|
27
|
+
* File field with a key of `featured_image` on it.
|
|
28
|
+
*
|
|
29
|
+
* ```jsx
|
|
30
|
+
* import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'
|
|
31
|
+
*
|
|
32
|
+
* const EntryComponent = ({ slug }) => {
|
|
33
|
+
* const [entry, setEntry] = useState(null)
|
|
34
|
+
*
|
|
35
|
+
* useEffect(async () => {
|
|
36
|
+
* // This is just an example, you could fetch
|
|
37
|
+
* // the entry any way you want.
|
|
38
|
+
* const response = await Starlight.posts.entries.get(slug)
|
|
39
|
+
*
|
|
40
|
+
* setEntry(response.data)
|
|
41
|
+
* }, [ slug ])
|
|
42
|
+
*
|
|
43
|
+
* // After fetching, the image will be on the `entry.data.featured_image` property.
|
|
44
|
+
* return (
|
|
45
|
+
* entry ? (
|
|
46
|
+
* <article>
|
|
47
|
+
* <h1>{entry.title}</h1>
|
|
48
|
+
* <ResponsiveImage image={entry.data.featured_image} />
|
|
49
|
+
* </article>
|
|
50
|
+
* ) : (
|
|
51
|
+
* <div>Loading...</div>
|
|
52
|
+
* )
|
|
53
|
+
* )
|
|
54
|
+
* }
|
|
55
|
+
*
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @param props Component props. See {@link ResponsiveImageProps} to see the
|
|
59
|
+
* available options.
|
|
60
|
+
* @group ResponsiveImage
|
|
61
|
+
*/
|
|
14
62
|
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, lazyRoot, lazyRootMargin, }: ResponsiveImageProps) => JSX.Element;
|
|
15
|
-
export {};
|
|
63
|
+
export type { ResponsiveImageProps };
|
|
16
64
|
//# 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,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"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
3
|
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
5
9
|
}) : (function(o, m, k, k2) {
|
|
6
10
|
if (k2 === undefined) k2 = k;
|
|
7
11
|
o[k2] = m[k];
|
|
@@ -22,11 +26,69 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
22
26
|
exports.ResponsiveImage = exports.GlobalLazyloadStyles = void 0;
|
|
23
27
|
const react_1 = __importStar(require("react"));
|
|
24
28
|
const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
|
|
29
|
+
/**
|
|
30
|
+
* Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript
|
|
31
|
+
* is disabled in the browser. This is useful to web crawlers that don't run
|
|
32
|
+
* JS files, which is important for SEO.
|
|
33
|
+
*
|
|
34
|
+
* You only need to render this component once in your application,
|
|
35
|
+
* preferably in the `<head>` section.
|
|
36
|
+
*
|
|
37
|
+
* @group ResponsiveImage
|
|
38
|
+
*/
|
|
25
39
|
const GlobalLazyloadStyles = () => {
|
|
26
40
|
return (react_1.default.createElement("noscript", null,
|
|
27
41
|
react_1.default.createElement("style", null, 'img.sl-lazyload{display: none;}')));
|
|
28
42
|
};
|
|
29
43
|
exports.GlobalLazyloadStyles = GlobalLazyloadStyles;
|
|
44
|
+
/**
|
|
45
|
+
* Renders an image from a given Starlight media object. The Starlight
|
|
46
|
+
* optimized image will be rendered by default if no `variation` prop is passed.
|
|
47
|
+
*
|
|
48
|
+
* If the `sizes` prop is passed, a responsive image will be rendered by
|
|
49
|
+
* generating a "src-set" property.
|
|
50
|
+
*
|
|
51
|
+
* The image will be lazy-loaded, which means that it should only load
|
|
52
|
+
* when the browser viewport gets near the image.
|
|
53
|
+
*
|
|
54
|
+
* @example Requesting an entry and rendering an image.
|
|
55
|
+
*
|
|
56
|
+
* Assume we created a "Posts" model with a slug of `posts`, and placed a Media
|
|
57
|
+
* File field with a key of `featured_image` on it.
|
|
58
|
+
*
|
|
59
|
+
* ```jsx
|
|
60
|
+
* import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'
|
|
61
|
+
*
|
|
62
|
+
* const EntryComponent = ({ slug }) => {
|
|
63
|
+
* const [entry, setEntry] = useState(null)
|
|
64
|
+
*
|
|
65
|
+
* useEffect(async () => {
|
|
66
|
+
* // This is just an example, you could fetch
|
|
67
|
+
* // the entry any way you want.
|
|
68
|
+
* const response = await Starlight.posts.entries.get(slug)
|
|
69
|
+
*
|
|
70
|
+
* setEntry(response.data)
|
|
71
|
+
* }, [ slug ])
|
|
72
|
+
*
|
|
73
|
+
* // After fetching, the image will be on the `entry.data.featured_image` property.
|
|
74
|
+
* return (
|
|
75
|
+
* entry ? (
|
|
76
|
+
* <article>
|
|
77
|
+
* <h1>{entry.title}</h1>
|
|
78
|
+
* <ResponsiveImage image={entry.data.featured_image} />
|
|
79
|
+
* </article>
|
|
80
|
+
* ) : (
|
|
81
|
+
* <div>Loading...</div>
|
|
82
|
+
* )
|
|
83
|
+
* )
|
|
84
|
+
* }
|
|
85
|
+
*
|
|
86
|
+
* ```
|
|
87
|
+
*
|
|
88
|
+
* @param props Component props. See {@link ResponsiveImageProps} to see the
|
|
89
|
+
* available options.
|
|
90
|
+
* @group ResponsiveImage
|
|
91
|
+
*/
|
|
30
92
|
const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', lazyRoot, lazyRootMargin = '200px', }) => {
|
|
31
93
|
const imageRef = (0, react_1.useRef)(null);
|
|
32
94
|
// When true, the image may load normally
|
|
@@ -1 +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"]}
|
|
1
|
+
{"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"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { MediaObject } from '@starlightcms/js-sdk';
|
|
2
|
+
import { RefObject } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Props accepted by the {@link ResponsiveImage} component.
|
|
5
|
+
* @group ResponsiveImage
|
|
6
|
+
*/
|
|
7
|
+
export interface ResponsiveImageProps {
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* The image to render. It should be a URI string or the object returned by
|
|
11
|
+
* Starlight on a Media File field. Required.
|
|
12
|
+
*/
|
|
13
|
+
image: MediaObject | string;
|
|
14
|
+
/**
|
|
15
|
+
* An HTML <img> `sizes` attribute. If provided, the browser will render the
|
|
16
|
+
* best fit image size variation to the current viewport size. See
|
|
17
|
+
* [the MDN documentation on the sizes property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
|
|
18
|
+
* to learn how to configure this attribute.
|
|
19
|
+
*/
|
|
20
|
+
sizes?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Alternate text description of the image. If set and the given image is a
|
|
23
|
+
* Starlight media object, it will overwrite this image's alternative text
|
|
24
|
+
* set in Starlight.
|
|
25
|
+
*/
|
|
26
|
+
alt?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Defines which image variation will be rendered. Defaults to `optimized`.
|
|
29
|
+
*/
|
|
30
|
+
variation?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Defines the background color of the image while it loads. It accepts any
|
|
33
|
+
* CSS color, including `transparent`. Defaults to the color generated by
|
|
34
|
+
* Starlight when the image was uploaded, or transparent when the given image
|
|
35
|
+
* is a URI string.
|
|
36
|
+
*/
|
|
37
|
+
background?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Defines the scrollable parent of the image. Set this to the nearest
|
|
40
|
+
* scrollable HTMLElement parent of this image if lazy-loading is not working.
|
|
41
|
+
* See [the MDN documentation on IntersectionObserver.root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root)
|
|
42
|
+
* to learn more.
|
|
43
|
+
*/
|
|
44
|
+
lazyRoot?: RefObject<HTMLElement> | null;
|
|
45
|
+
/**
|
|
46
|
+
* Defines how close to the viewport an image has to be to start loading.
|
|
47
|
+
* See [the MDN documentation on IntersectionObserver.rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
|
|
48
|
+
* to learn more. Defaults to 200px.
|
|
49
|
+
*/
|
|
50
|
+
lazyRootMargin?: string;
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,KAAK,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACxC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/types.ts"],"names":[],"mappings":"","sourcesContent":["import { MediaObject } from '@starlightcms/js-sdk'\nimport { RefObject } from 'react'\n\n/**\n * Props accepted by the {@link ResponsiveImage} component.\n * @group ResponsiveImage\n */\nexport interface ResponsiveImageProps {\n className?: string\n /**\n * The image to render. It should be a URI string or the object returned by\n * Starlight on a Media File field. Required.\n */\n image: MediaObject | string\n /**\n * An HTML <img> `sizes` attribute. If provided, the browser will render the\n * best fit image size variation to the current viewport size. See\n * [the MDN documentation on the sizes property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)\n * to learn how to configure this attribute.\n */\n sizes?: string\n /**\n * Alternate text description of the image. If set and the given image is a\n * Starlight media object, it will overwrite this image's alternative text\n * set in Starlight.\n */\n alt?: string\n /**\n * Defines which image variation will be rendered. Defaults to `optimized`.\n */\n variation?: string\n /**\n * Defines the background color of the image while it loads. It accepts any\n * CSS color, including `transparent`. Defaults to the color generated by\n * Starlight when the image was uploaded, or transparent when the given image\n * is a URI string.\n */\n background?: string\n /**\n * Defines the scrollable parent of the image. Set this to the nearest\n * scrollable HTMLElement parent of this image if lazy-loading is not working.\n * See [the MDN documentation on IntersectionObserver.root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root)\n * to learn more.\n */\n lazyRoot?: RefObject<HTMLElement> | null\n /**\n * Defines how close to the viewport an image has to be to start loading.\n * See [the MDN documentation on IntersectionObserver.rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)\n * to learn more. Defaults to 200px.\n */\n lazyRootMargin?: string\n}\n"]}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
|
+
/**
|
|
4
|
+
* VisualContent renderer component that renders `raw` type blocks
|
|
5
|
+
* as inline HTML inside a `div` element.
|
|
6
|
+
*
|
|
7
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
8
|
+
* to learn how to customize block renderer components like this one.
|
|
9
|
+
*
|
|
10
|
+
* @param props VisualDataBlock object. See {@link HTMLBlock} to learn the
|
|
11
|
+
* type of data this component receives.
|
|
12
|
+
* @group VisualContent Renderers
|
|
13
|
+
*/
|
|
3
14
|
declare const HTML: FC<VisualDataBlock<HTMLBlock>>;
|
|
4
15
|
export default HTML;
|
|
5
16
|
//# sourceMappingURL=HTML.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEjE,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAOxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
1
|
+
{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEjE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAOxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -4,6 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
+
/**
|
|
8
|
+
* VisualContent renderer component that renders `raw` type blocks
|
|
9
|
+
* as inline HTML inside a `div` element.
|
|
10
|
+
*
|
|
11
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
12
|
+
* to learn how to customize block renderer components like this one.
|
|
13
|
+
*
|
|
14
|
+
* @param props VisualDataBlock object. See {@link HTMLBlock} to learn the
|
|
15
|
+
* type of data this component receives.
|
|
16
|
+
* @group VisualContent Renderers
|
|
17
|
+
*/
|
|
7
18
|
const HTML = ({ data }) => {
|
|
8
19
|
return (react_1.default.createElement("div", { className: "sl-content-block sl-html test", dangerouslySetInnerHTML: { __html: data.html } }));
|
|
9
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,uCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => {\n return (\n <div\n className=\"sl-content-block sl-html test\"\n dangerouslySetInnerHTML={{ __html: data.html }}\n />\n )\n}\n\nexport default HTML\n"]}
|
|
1
|
+
{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,uCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\n/**\n * VisualContent renderer component that renders `raw` type blocks\n * as inline HTML inside a `div` element.\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 HTMLBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => {\n return (\n <div\n className=\"sl-content-block sl-html test\"\n dangerouslySetInnerHTML={{ __html: data.html }}\n />\n )\n}\n\nexport default HTML\n"]}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* VisualContent renderer component that renders `header` type blocks
|
|
5
|
+
* as HTML heading elements, like `<h1>`, `<h2>`, and so on.
|
|
6
|
+
*
|
|
7
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
8
|
+
* to learn how to customize block renderer components like this one.
|
|
9
|
+
*
|
|
10
|
+
* @param props VisualDataBlock object. See {@link HeaderBlock} to learn the
|
|
11
|
+
* type of data this component receives.
|
|
12
|
+
* @group VisualContent Renderers
|
|
13
|
+
*/
|
|
14
|
+
declare const Header: ({ data }: VisualDataBlock<HeaderBlock>) => JSX.Element;
|
|
4
15
|
export default Header;
|
|
5
16
|
//# sourceMappingURL=Header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,aAAc,gBAAgB,WAAW,CAAC,KAAG,WASxD,CAAA;AAED,eAAe,MAAM,CAAA"}
|
|
@@ -4,6 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
+
/**
|
|
8
|
+
* VisualContent renderer component that renders `header` type blocks
|
|
9
|
+
* as HTML heading elements, like `<h1>`, `<h2>`, and so on.
|
|
10
|
+
*
|
|
11
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
12
|
+
* to learn how to customize block renderer components like this one.
|
|
13
|
+
*
|
|
14
|
+
* @param props VisualDataBlock object. See {@link HeaderBlock} to learn the
|
|
15
|
+
* type of data this component receives.
|
|
16
|
+
* @group VisualContent Renderers
|
|
17
|
+
*/
|
|
7
18
|
const Header = ({ data }) => {
|
|
8
19
|
const HeaderComponent = `h${data.level}`;
|
|
9
20
|
return (react_1.default.createElement(HeaderComponent, { className: "sl-content-block sl-header", dangerouslySetInnerHTML: { __html: data.text } }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,8BAAC,eAAe,IACd,SAAS,EAAC,4BAA4B,EACtC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,MAAM,CAAA","sourcesContent":["import React from 'react'\nimport { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\n/**\n * VisualContent renderer component that renders `header` type blocks\n * as HTML heading elements, like `<h1>`, `<h2>`, and so on.\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 HeaderBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Header = ({ data }: VisualDataBlock<HeaderBlock>): JSX.Element => {\n const HeaderComponent = `h${data.level}` as 'h1'\n\n return (\n <HeaderComponent\n className=\"sl-content-block sl-header\"\n dangerouslySetInnerHTML={{ __html: data.text }}\n />\n )\n}\n\nexport default Header\n"]}
|
|
@@ -1,8 +1,28 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Type used by {@link ImageComponent} to accept a `sizes` prop.
|
|
5
|
+
*/
|
|
6
|
+
export declare type ImageOptions = {
|
|
4
7
|
sizes?: string;
|
|
5
8
|
};
|
|
9
|
+
/**
|
|
10
|
+
* VisualContent renderer component that renders `image` type blocks
|
|
11
|
+
* as a responsive image along with its caption (if defined). Optionally
|
|
12
|
+
* wraps the image in an anchor if a link is defined in the content.
|
|
13
|
+
*
|
|
14
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
15
|
+
* to learn how to customize block renderer components like this one.
|
|
16
|
+
*
|
|
17
|
+
* This component also supports an optional `sizes` prop to provide better image
|
|
18
|
+
* responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}
|
|
19
|
+
* to learn more.
|
|
20
|
+
*
|
|
21
|
+
* @param props VisualDataBlock object. See {@link ImageBlock} to learn the
|
|
22
|
+
* type of data this component receives. Also accepts
|
|
23
|
+
* an optional `sizes` string prop.
|
|
24
|
+
* @group VisualContent Renderers
|
|
25
|
+
*/
|
|
6
26
|
declare const Image: FC<VisualDataBlock<ImageBlock> & ImageOptions>;
|
|
7
27
|
export default Image;
|
|
8
28
|
//# sourceMappingURL=Image.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,
|
|
1
|
+
{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE;;GAEG;AACH,oBAAY,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA8CzD,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
3
|
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
5
9
|
}) : (function(o, m, k, k2) {
|
|
6
10
|
if (k2 === undefined) k2 = k;
|
|
7
11
|
o[k2] = m[k];
|
|
@@ -20,6 +24,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
20
24
|
};
|
|
21
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
26
|
const react_1 = __importStar(require("react"));
|
|
27
|
+
/**
|
|
28
|
+
* VisualContent renderer component that renders `image` type blocks
|
|
29
|
+
* as a responsive image along with its caption (if defined). Optionally
|
|
30
|
+
* wraps the image in an anchor if a link is defined in the content.
|
|
31
|
+
*
|
|
32
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
33
|
+
* to learn how to customize block renderer components like this one.
|
|
34
|
+
*
|
|
35
|
+
* This component also supports an optional `sizes` prop to provide better image
|
|
36
|
+
* responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}
|
|
37
|
+
* to learn more.
|
|
38
|
+
*
|
|
39
|
+
* @param props VisualDataBlock object. See {@link ImageBlock} to learn the
|
|
40
|
+
* type of data this component receives. Also accepts
|
|
41
|
+
* an optional `sizes` string prop.
|
|
42
|
+
* @group VisualContent Renderers
|
|
43
|
+
*/
|
|
23
44
|
const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
24
45
|
const { url, files, alt = '', caption, href } = data;
|
|
25
46
|
const [target, setTarget] = (0, react_1.useState)('_self');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AAUtD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,KAAK,GAAmD,CAAC,EAC7D,IAAI,EACJ,KAAK,GAAG,+BAA+B,GACxC,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAA;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,SAAS,CACP,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CACrE,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAM;QAEnC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL;QACG,IAAI,CAAC,CAAC,CAAC,CACN,qCAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;YAC3B,uCACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACjC,CACA,CACL,CAAC,CAAC,CAAC,CACF,uCACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACjC,CACH;QACA,OAAO,IAAI,8CAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CACjE,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\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 * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n data,\n sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n const { url, files, alt = '', caption, href } = data\n const [target, setTarget] = useState('_self')\n const [srcSet, setSrcSet] = useState('')\n\n useEffect(() => {\n if (!href) return\n\n setTarget(\n new URL(href).origin === window.location.origin ? '_self' : '_blank'\n )\n }, [href])\n\n useEffect(() => {\n if (!files || !files.length) return\n\n setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '))\n }, [files])\n\n return (\n <figure>\n {href ? (\n <a href={href} target={target}>\n <img\n className=\"sl-content-block sl-image\"\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={srcSet ? sizes : undefined}\n />\n </a>\n ) : (\n <img\n className=\"sl-content-block sl-image\"\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={srcSet ? sizes : undefined}\n />\n )}\n {caption && <figcaption dangerouslySetInnerHTML={{ __html: caption }} />}\n </figure>\n )\n}\n\nexport default Image\n"]}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ListBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
|
+
/**
|
|
4
|
+
* VisualContent renderer component that renders `list` type blocks
|
|
5
|
+
* as `<ul>` or `<ol>` elements, depending on the list style.
|
|
6
|
+
*
|
|
7
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
8
|
+
* to learn how to customize block renderer components like this one.
|
|
9
|
+
*
|
|
10
|
+
* @param props VisualDataBlock object. See {@link ListBlock} to learn the
|
|
11
|
+
* type of data this component receives.
|
|
12
|
+
* @group VisualContent Renderers
|
|
13
|
+
*/
|
|
3
14
|
declare const List: FC<VisualDataBlock<ListBlock>>;
|
|
4
15
|
export default List;
|
|
5
16
|
//# sourceMappingURL=List.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAuB3E,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAUxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAuB3E;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAUxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -10,6 +10,17 @@ const SubList = ({ item, Wrapper }) => {
|
|
|
10
10
|
item.items && item.items.length ? (react_1.default.createElement(Wrapper, null, item.items &&
|
|
11
11
|
item.items.map((subItem, index) => (react_1.default.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
|
|
12
12
|
};
|
|
13
|
+
/**
|
|
14
|
+
* VisualContent renderer component that renders `list` type blocks
|
|
15
|
+
* as `<ul>` or `<ol>` elements, depending on the list style.
|
|
16
|
+
*
|
|
17
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
18
|
+
* to learn how to customize block renderer components like this one.
|
|
19
|
+
*
|
|
20
|
+
* @param props VisualDataBlock object. See {@link ListBlock} to learn the
|
|
21
|
+
* type of data this component receives.
|
|
22
|
+
* @group VisualContent Renderers
|
|
23
|
+
*/
|
|
13
24
|
const List = ({ data }) => {
|
|
14
25
|
const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
|
|
15
26
|
return (react_1.default.createElement(ListWrapper, { className: "sl-content-block sl-list sl-list__root" }, data.items.map((item, index) => (react_1.default.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper })))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAQjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACtD,OAAO,CACL;QACE,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;QAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,8BAAC,OAAO,QACL,IAAI,CAAC,KAAK;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,8BAAC,WAAW,IAAC,SAAS,EAAC,wCAAwC,IAC5D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\n\ntype SubListProps = {\n item: ListItem\n Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => {\n return (\n <li>\n <span dangerouslySetInnerHTML={{ __html: item.content }} />\n {item.items && item.items.length ? (\n <Wrapper>\n {item.items &&\n item.items.map((subItem, index) => (\n <SubList key={index} item={subItem} Wrapper={Wrapper} />\n ))}\n </Wrapper>\n ) : null}\n </li>\n )\n}\n\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n return (\n <ListWrapper className=\"sl-content-block sl-list sl-list__root\">\n {data.items.map((item, index) => (\n <SubList key={index} item={item} Wrapper={ListWrapper} />\n ))}\n </ListWrapper>\n )\n}\n\nexport default List\n"]}
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAQjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACtD,OAAO,CACL;QACE,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;QAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,8BAAC,OAAO,QACL,IAAI,CAAC,KAAK;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,8BAAC,WAAW,IAAC,SAAS,EAAC,wCAAwC,IAC5D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\n\ntype SubListProps = {\n item: ListItem\n Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => {\n return (\n <li>\n <span dangerouslySetInnerHTML={{ __html: item.content }} />\n {item.items && item.items.length ? (\n <Wrapper>\n {item.items &&\n item.items.map((subItem, index) => (\n <SubList key={index} item={subItem} Wrapper={Wrapper} />\n ))}\n </Wrapper>\n ) : null}\n </li>\n )\n}\n\n/**\n * VisualContent renderer component that renders `list` type blocks\n * as `<ul>` or `<ol>` elements, depending on the list style.\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 ListBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n return (\n <ListWrapper className=\"sl-content-block sl-list sl-list__root\">\n {data.items.map((item, index) => (\n <SubList key={index} item={item} Wrapper={ListWrapper} />\n ))}\n </ListWrapper>\n )\n}\n\nexport default List\n"]}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
|
+
/**
|
|
4
|
+
* VisualContent renderer component that renders `paragraph` type blocks
|
|
5
|
+
* as `<p>` elements.
|
|
6
|
+
*
|
|
7
|
+
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
8
|
+
* to learn how to customize block renderer components like this one.
|
|
9
|
+
*
|
|
10
|
+
* @param props VisualDataBlock object. See {@link ParagraphBlock} to learn the
|
|
11
|
+
* type of data this component receives.
|
|
12
|
+
* @group VisualContent Renderers
|
|
13
|
+
*/
|
|
3
14
|
declare const Paragraph: FC<VisualDataBlock<ParagraphBlock>>;
|
|
4
15
|
export default Paragraph;
|
|
5
16
|
//# sourceMappingURL=Paragraph.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAOlD,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
1
|
+
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAOlD,CAAA;AAED,eAAe,SAAS,CAAA"}
|