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> <CodeTabs>
```js ```js
const PostPreview = ({ widgetFor, entry, collection, field }) => { const PostPreview = ({ widgetFor, entry, collection, fields }) => {
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 h( return h(
'div', 'div',
@ -61,8 +62,9 @@ CMS.registerPreviewTemplate('posts', PostPreview);
```jsx ```jsx
import CMS, { useMediaAsset } from '@staticcms/core'; import CMS, { useMediaAsset } from '@staticcms/core';
const PostPreview = ({ widgetFor, entry, collection, field }) => { const PostPreview = ({ widgetFor, entry, collection, fields }) => {
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 ( return (
<div> <div>
@ -94,9 +96,10 @@ const PostPreview = ({
widgetFor, widgetFor,
entry, entry,
collection, collection,
field, fields,
}: TemplatePreviewProps<Post>) => { }: 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 ( return (
<div> <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>> = ({ const EditorControl: FC<WidgetControlProps<string, HtmlField>> = ({
field, // Typed as a HtmlField field, // Typed as a HtmlField
value, // Typed as string | null | undefined value, // Typed as string | null | undefined
onChange, onChange, // Typed to accept string | null | undefined
openMediaLibrary, openMediaLibrary,
mediaPaths mediaPaths
}) => { }) => {
@ -101,10 +101,16 @@ interface PostPreviewData {
tags?: string[]; 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 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 ( return (
<div> <div>