From 55ee4c71d2d789d4ed938d6a92244db35dc88cda Mon Sep 17 00:00:00 2001 From: lihbr Date: Thu, 12 Dec 2024 14:24:40 +0100 Subject: [PATCH] docs: wording --- messages/alt-must-be-an-empty-string.md | 10 +++++----- ...rialization-is-deprecated-with-prismic-rich-text.md | 4 ++-- ...ctext-works-only-with-rich-text-and-title-fields.md | 6 +++--- src/PrismicImage.vue | 10 +++++----- src/PrismicRichText/getRichTextComponentProps.ts | 2 +- src/PrismicRichText/types.ts | 4 ++-- src/PrismicText.vue | 4 ++-- src/types.ts | 10 +++++----- test/components-PrismicText.test.ts | 2 +- 9 files changed, 26 insertions(+), 26 deletions(-) diff --git a/messages/alt-must-be-an-empty-string.md b/messages/alt-must-be-an-empty-string.md index 8c5dc9a..8491f61 100644 --- a/messages/alt-must-be-an-empty-string.md +++ b/messages/alt-must-be-an-empty-string.md @@ -5,24 +5,24 @@ Both `alt` and `fallbackAlt` can only be used to [declare an image as decorative][mdn-alt-decorative-image] by pasing an empty string. You may not pass arbitrary alternative text to the `alt` prop. ```html - + - + ``` -All images should have an alt value. `` will automatically use the Image field's `alt` property written in the Prismic Editor. If the Image field's `alt` property is empty, the `alt` HTML attribute will not be included _unless_ one of `alt` or `fallbackAlt` is used. +All images should have an alt value. `` will automatically use the image field's `alt` property written in the Prismic Editor. If the image field's `alt` property is empty, the `alt` HTML attribute will not be included _unless_ one of `alt` or `fallbackAlt` is used. For more details on decorative images, [see the MDN article on the `` HTML element's `alt` attribute][mdn-alt-decorative-image]. ## Deciding between `alt=""` and `fallbackAlt=""` -`alt=""` will always mark the image as decorative, ignoring the provied Image field's `alt` property. Use this when the image is always used for decorative or presentational purposes. +`alt=""` will always mark the image as decorative, ignoring the provied image field's `alt` property. Use this when the image is always used for decorative or presentational purposes. -`fallbackAlt=""` will only mark the image as decorative if the provided Image field's `alt` property is empty. Use this when you want to mark the image as decorative _unless_ alternative text is provided in the Prismic Editor. **Generally speaking, this is discouraged**; prefer marking the image as decorative intentionally. +`fallbackAlt=""` will only mark the image as decorative if the provided image field's `alt` property is empty. Use this when you want to mark the image as decorative _unless_ alternative text is provided in the Prismic Editor. **Generally speaking, this is discouraged**; prefer marking the image as decorative intentionally. [mdn-alt-decorative-image]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images diff --git a/messages/html-serialization-is-deprecated-with-prismic-rich-text.md b/messages/html-serialization-is-deprecated-with-prismic-rich-text.md index cdbfb0d..d29012b 100644 --- a/messages/html-serialization-is-deprecated-with-prismic-rich-text.md +++ b/messages/html-serialization-is-deprecated-with-prismic-rich-text.md @@ -35,7 +35,7 @@ The above snippet relies on an `Heading2.vue` component. Here's an example of th ```html @@ -45,7 +45,7 @@ defineProps(getRichTextComponentProps()) ``` -Learn more about the new component serializer on [`@prismicio/vue` technical references][prismic-vue-rich-text]. +Learn more about the new component serializer on the [`@prismicio/vue` technical reference][prismic-vue-rich-text]. [prismic-vue]: https://prismic.io/docs/technical-reference/prismicio-vue [prismic-vue-rich-text]: https://prismic.io/docs/technical-reference/prismicio-vue#prismicrichtext diff --git a/messages/prismictext-works-only-with-rich-text-and-title-fields.md b/messages/prismictext-works-only-with-rich-text-and-title-fields.md index c9bf8a0..7bab731 100644 --- a/messages/prismictext-works-only-with-rich-text-and-title-fields.md +++ b/messages/prismictext-works-only-with-rich-text-and-title-fields.md @@ -1,9 +1,9 @@ -# `` works only with Rich Text and Title fields +# `` works only with Rich Text and title fields -`` works only with [Rich Text and Title fields][rich-text-title-field]. It renders the field's value as plain text (i.e. with no formatting, paragraphs, or headings). +`` works only with [Rich Text and title fields][rich-text-title-field]. It renders the field's value as plain text (i.e. with no formatting, paragraphs, or headings). ```html - + ``` diff --git a/src/PrismicImage.vue b/src/PrismicImage.vue index 992eeb4..bb03144 100644 --- a/src/PrismicImage.vue +++ b/src/PrismicImage.vue @@ -17,7 +17,7 @@ import { usePrismic } from "./usePrismic" */ export type PrismicImageProps = { /** - * The Prismic Image field or thumbnail to render. + * The Prismic image field or thumbnail to render. */ field: ImageField | ImageField @@ -37,7 +37,7 @@ export type PrismicImageProps = { alt?: "" /** - * Declare an image as decorative only if the Image field does not have + * Declare an image as decorative only if the image field does not have * alternative text by providing `fallbackAlt=""`. * * See: @@ -47,13 +47,13 @@ export type PrismicImageProps = { } & ( | { /** - * Widths used to build a `srcset` value for the Image field. + * Widths used to build a `srcset` value for the image field. * * If a `widths` prop is not given or `"defaults"` is passed, the * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048, * 3840. * - * If the Image field contains responsive views, each responsive view can + * If the image field contains responsive views, each responsive view can * be used as a width in the resulting `srcset` by passing `"thumbnails"` * as the `widths` prop. */ @@ -72,7 +72,7 @@ export type PrismicImageProps = { */ widths?: never /** - * Pixel densities used to build a `srcset` value for the Image field. + * Pixel densities used to build a `srcset` value for the image field. * * If a `pixelDensities` prop is passed `"defaults"`, the following pixel * densities will be used: 1, 2, 3. diff --git a/src/PrismicRichText/getRichTextComponentProps.ts b/src/PrismicRichText/getRichTextComponentProps.ts index 2dcad98..7cfda4c 100644 --- a/src/PrismicRichText/getRichTextComponentProps.ts +++ b/src/PrismicRichText/getRichTextComponentProps.ts @@ -37,7 +37,7 @@ type DefineComponentRichTextComponentProps< * * ```typescript * // Defining a new rich text component for a specific node type - * import { getSliceComponentProps } from "@prismicio/vue" + * import { getRichTextComponentProps } from "@prismicio/vue" * * defineProps(getRichTextComponentProps("heading1")) * ``` diff --git a/src/PrismicRichText/types.ts b/src/PrismicRichText/types.ts index a7b20b1..11c810d 100644 --- a/src/PrismicRichText/types.ts +++ b/src/PrismicRichText/types.ts @@ -7,9 +7,9 @@ import type { /** * A map of Rich Text block types to Vue Components. It is used to render Rich - * Text or Title fields. + * Text or title fields. * - * @see Templating Rich Text and Title fields from Prismic {@link https://prismic.io/docs/rich-text} + * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text} */ export type VueRichTextSerializer = Partial< Record diff --git a/src/PrismicText.vue b/src/PrismicText.vue index d5f441d..f806b5c 100644 --- a/src/PrismicText.vue +++ b/src/PrismicText.vue @@ -14,7 +14,7 @@ import type { ComponentOrTagName } from "./types" */ export type PrismicTextProps = { /** - * The Prismic Rich Text field to render. + * The Prismic rich text field to render. */ field: RichTextField | null | undefined @@ -47,7 +47,7 @@ if (DEV) { watchEffect(() => { if (typeof props.field === "string") { throw new Error( - `[PrismicText] The "field" prop only accepts a Rich Text or Title field's value but was provided a different type of field instead (e.g. a Key Text or Select field). You can resolve this error by rendering the field value inline without . For more details, see ${devMsg( + `[PrismicText] The "field" prop only accepts a Rich Text or title field's value but was provided a different type of field instead (e.g. a Key Text or Select field). You can resolve this error by rendering the field value inline without . For more details, see ${devMsg( "prismictext-works-only-with-rich-text-and-title-fields", )}`, ) diff --git a/src/types.ts b/src/types.ts index 25bec44..d696555 100644 --- a/src/types.ts +++ b/src/types.ts @@ -97,9 +97,9 @@ type PrismicPluginComponentsOptions = { /** * An optional map of Rich Text block types to Vue Components. It is used to - * render Rich Text or Title fields. + * render Rich Text or title fields. * - * @see Templating Rich Text and Title fields from Prismic {@link https://prismic.io/docs/rich-text} + * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text} */ richTextComponents?: VueRichTextSerializer @@ -356,21 +356,21 @@ export type PrismicPluginHelpers = { asDate: typeof asDate /** - * Returns the URL of an Image field with optional image transformations (via + * Returns the URL of an image field with optional image transformations (via * Imgix URL parameters). This is `@prismicio/client` {@link asImageSrc} * function. */ asImageSrc: typeof asImageSrc /** - * Creates a width-based `srcset` from an Image field with optional image + * Creates a width-based `srcset` from an image field with optional image * transformations (via Imgix URL parameters). This is `@prismicio/client` * {@link asImageWidthSrcSet} function. */ asImageWidthSrcSet: typeof asImageWidthSrcSet /** - * Creates a pixel-density-based `srcset` from an Image field with optional + * Creates a pixel-density-based `srcset` from an image field with optional * image transformations (via Imgix URL parameters). This is * `@prismicio/client` {@link asImagePixelDensitySrcSet} function. */ diff --git a/test/components-PrismicText.test.ts b/test/components-PrismicText.test.ts index f488be3..75858cd 100644 --- a/test/components-PrismicText.test.ts +++ b/test/components-PrismicText.test.ts @@ -133,7 +133,7 @@ it("throws error if passed a string-based field (e.g. Key Text or Select)", () = mount(PrismicText, { props: { // @ts-expect-error - We are purposely not providing a correct field. - field: "not a Rich Text field", + field: "not a rich text field", wrapper: markRaw(WrapperComponent), }, }),