Skip to content

Commit

Permalink
docs: pull dev messages
Browse files Browse the repository at this point in the history
  • Loading branch information
lihbr committed Dec 5, 2024
1 parent b5881f2 commit 48bc62e
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 0 deletions.
28 changes: 28 additions & 0 deletions messages/alt-must-be-an-empty-string.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# `alt` must be an empty string

`<PrismicImage>` allows the `alt` HTML attribute to be configured using two props: `alt` and `fallbackAlt`.

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
<!-- Will render `alt` using the Image field's `alt` property. -->
<PrismicImage :field="doc.data.imageField" />

<!-- Will always render `alt=""`. -->
<PrismicImage :field="doc.data.imageField" alt="" />

<!-- Will render `alt=""` only if the Image field's alt property is empty. -->
<PrismicImage :field="doc.data.imageField" fallbackAlt="" />
```

All images should have an alt value. `<PrismicImage>` 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 `<img>` 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.

`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
65 changes: 65 additions & 0 deletions messages/missing-link-properties.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# Missing Link properties

`<PrismicLink>` requires specific properties in the provided field or document to render properly. This requirement extends to [Link][link-fields], [Link to Media][link-fields], and [Content Relationship][link-fields] fields.

If the required properties are missing, `<PrismicLink>` will not render the link.

**Note**: When using Prismic's [Rest API][rest-api] (the default when using `@prismicio/client`), the required fields are automatically included. When using Prismic's [GraphQL API][graphql-api], you must include these fields in your query.

## Required Properties

### With the `field` prop

The following properties are requried when using the `field` prop with a Link, Link to Media, or Content Relationship field:

- `link_type` (or `_linkType` when using Prismic's [GraphQL API][graphql-api])
- `id`
- `url`
- `uid` (only if your website uses a [Link Resolver][link-resolver] that uses a document's UID field)

The following properties are not required, but are recommended:

- `target`

**Example**:

```html
<PrismicLink :field="doc.data.linkField">Click me</PrismicLink>
```

### With the `document` prop

The following properties are requried when using the `document` prop with a Prismic document:

- `id`
- `url`
- `uid` (only if your website uses a [Link Resolver][link-resolver] that uses a document's UID field)

**Example**:

```html
<PrismicLink :document="doc">Click me</PrismicLink>
```

## GraphQL Example

When using Prismic's [GraphQL API][graphql-api], Link fields must be queried with at least the following properties:

```diff
{
page(uid: "home", lang: "en-us") {
linkField {
+ _linkType
+ id
+ url
+ uid # only required if your website uses a Link Resolver that uses a document's UID field.
+ target # not required, but recommended for automatic `target` handling
}
}
}
```

[link-fields]: https://prismic.io/docs/content-relationship
[link-resolver]: https://prismic.io/docs/route-resolver#link-resolver
[rest-api]: https://prismic.io/docs/rest-api-technical-reference
[graphql-api]: https://prismic.io/docs/graphql-technical-reference
24 changes: 24 additions & 0 deletions messages/prismictext-works-only-with-rich-text-and-title-fields.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# `<PrismicText>` works only with Rich Text and Title fields

`<PrismicText>` 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
<!-- Will render a plain text version of the Rich Text field's value. -->
<PrismicText :field="doc.data.richTextField" />
```

Other text-based field types, such as [Key Text][key-text-field] and [Select][select-field], cannot be rendered using `<PrismicText>`.

Since Key Text and Select field values are already plain text, you can render them inline without a special component.

```html
<!-- Will render the Key Text field's value. -->
<span>{doc.data.keyTextField}</span>

<!-- Will render the Select field's value. -->
<span>{doc.data.selectField}</span>
```

[rich-text-title-field]: https://prismic.io/docs/rich-text
[key-text-field]: https://prismic.io/docs/field#key-text
[select-field]: https://prismic.io/docs/field#select

0 comments on commit 48bc62e

Please sign in to comment.