gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: improve typescript docs, update preview useMediaAsset usage

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-02-02 10:40:54 -05:00
parent 0806236dec
commit f1d16f1260
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/docs/content/docs/custom-previews.mdx
View File

@ -43,8 +43,9 @@ The following parameters will be passed to your `react_component` during render:
<CodeTabs>
```js
const PostPreview = ({ widgetFor, entry, collection, field }) => {
const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
const PostPreview = ({ widgetFor, entry, collection, fields }) => {
const imageField = fields.find((field) => field.name === 'image');
const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
return h(
'div',
@ -61,8 +62,9 @@ CMS.registerPreviewTemplate('posts', PostPreview);
```jsx
import CMS, { useMediaAsset } from '@staticcms/core';
const PostPreview = ({ widgetFor, entry, collection, field }) => {
const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
const PostPreview = ({ widgetFor, entry, collection, fields }) => {
const imageField = fields.find((field) => field.name === 'image');
const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
return (
<div>
@ -94,9 +96,10 @@ const PostPreview = ({
widgetFor,
entry,
collection,
field,
fields,
}: TemplatePreviewProps<Post>) => {
const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
const imageField = fields.find((field) => field.name === 'image');
const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
return (
<div>

12
packages/docs/content/docs/typescript.mdx
View File

@ -57,7 +57,7 @@ import type { HtmlField } from '../config';
const EditorControl: FC<WidgetControlProps<string, HtmlField>> = ({
field, // Typed as a HtmlField
value, // Typed as string | null | undefined
onChange,
onChange, // Typed to accept string | null | undefined
openMediaLibrary,
mediaPaths
}) => {
@ -101,10 +101,16 @@ interface PostPreviewData {
tags?: string[];
}
const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({ entry, widgetFor, collection, field }) => {
const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({
entry, // Typed as PostPreviewData
widgetFor, // Typed to accept only the keys of PostPreviewData (body, date, title, image, slug, tags)
collection,
fields
}) => {
const dateString = useMemo(() => entry.data.date, [entry.data.date]);
const image = useMediaAsset(entry.data.image ?? '', collection, field, entry);
const imageField = fields.find((field) => field.name === 'image');
const image = useMediaAsset(entry.data.image ?? '', collection, imageField, entry);
return (
<div>