@datocms/svelte 3.0.0 → 3.0.2
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 +2 -6
- package/package/components/Head/Head.svelte.d.ts +1 -1
- package/package/components/Head/README.md +1 -1
- package/package/components/Image/README.md +5 -3
- package/package/components/NakedImage/NakedImage.svelte +7 -6
- package/package/components/NakedImage/NakedImage.svelte.d.ts +4 -2
- package/package/components/StructuredText/README.md +2 -2
- package/package/components/VideoPlayer/README.md +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -63,9 +63,8 @@ npm run build
|
|
|
63
63
|
```
|
|
64
64
|
|
|
65
65
|
<!--datocms-autoinclude-footer start-->
|
|
66
|
-
|
|
66
|
+
-----------------
|
|
67
67
|
# What is DatoCMS?
|
|
68
|
-
|
|
69
68
|
<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
|
|
70
69
|
|
|
71
70
|
[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
|
|
@@ -80,14 +79,11 @@ Trusted by over 25,000 enterprise businesses, agency partners, and individuals a
|
|
|
80
79
|
- 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)
|
|
81
80
|
|
|
82
81
|
**Our featured repos:**
|
|
83
|
-
|
|
84
82
|
- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
|
|
85
83
|
- [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
|
|
86
84
|
- [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
|
|
87
85
|
- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
|
|
88
|
-
- [
|
|
89
|
-
- Frontend examples in different frameworks: [Next.js](https://github.com/datocms/nextjs-demo), [Vue](https://github.com/datocms/vue-datocms) and [Nuxt](https://github.com/datocms/nuxtjs-demo), [Svelte](https://github.com/datocms/datocms-svelte) and [SvelteKit](https://github.com/datocms/sveltekit-demo), [Astro](https://github.com/datocms/datocms-astro-blog-demo), [Remix](https://github.com/datocms/remix-example). See [all our starter templates](https://www.datocms.com/marketplace/starters).
|
|
86
|
+
- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks
|
|
90
87
|
|
|
91
88
|
Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
|
|
92
|
-
|
|
93
89
|
<!--datocms-autoinclude-footer end-->
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
export interface TitleMetaLinkTag {
|
|
3
3
|
/** the tag for the meta information */
|
|
4
|
-
tag:
|
|
4
|
+
tag: string;
|
|
5
5
|
/** the inner content of the meta tag */
|
|
6
6
|
content?: string | null | undefined;
|
|
7
7
|
/** the HTML attributes to attach to the meta tag */
|
|
@@ -104,7 +104,7 @@ onMount(async () => {
|
|
|
104
104
|
method: 'POST',
|
|
105
105
|
headers: {
|
|
106
106
|
'Content-Type': 'application/json',
|
|
107
|
-
Authorization: "Bearer
|
|
107
|
+
Authorization: "Bearer AN_API_TOKEN",
|
|
108
108
|
},
|
|
109
109
|
body: JSON.stringify({ query })
|
|
110
110
|
})
|
|
@@ -156,8 +156,10 @@ Here's a complete recap of what `responsiveImage` offers:
|
|
|
156
156
|
| prop | type | default | required | description |
|
|
157
157
|
| ---------------- | ------------------------ | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
158
158
|
| data | `ResponsiveImage` object | | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query \*\*\*\* |
|
|
159
|
-
|
|
|
160
|
-
|
|
|
159
|
+
| pictureClass | string | null | :x: | Additional CSS class for the root `<picture>` tag |
|
|
160
|
+
| pictureStyle | CSS properties | null | :x: | Additional CSS rules to add to the root `<picture>` tag |
|
|
161
|
+
| imgClass | string | null | :x: | Additional CSS class for the `<img>` tag |
|
|
162
|
+
| imgCtyle | CSS properties | null | :x: | Additional CSS rules to add to the `<img>` tag |
|
|
161
163
|
| priority | Boolean | false | :x: | Disables lazy loading, and sets the image [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) to "high" |
|
|
162
164
|
| sizes | string | undefined | :x: | The HTML5 [`sizes`](https://web.dev/learn/design/responsive-images/#sizes) attribute for the image (will be used `data.sizes` as a fallback) |
|
|
163
165
|
| usePlaceholder | Boolean | true | :x: | Whether the image should use a blurred image placeholder |
|
|
@@ -6,9 +6,10 @@ import {
|
|
|
6
6
|
parseStyleAttributes
|
|
7
7
|
} from "./utils";
|
|
8
8
|
export let data;
|
|
9
|
-
let
|
|
10
|
-
export
|
|
11
|
-
export let
|
|
9
|
+
export let pictureClass = null;
|
|
10
|
+
export let pictureStyle = null;
|
|
11
|
+
export let imgClass = null;
|
|
12
|
+
export let imgStyle = null;
|
|
12
13
|
export let usePlaceholder = true;
|
|
13
14
|
export let sizes = null;
|
|
14
15
|
export let priority = false;
|
|
@@ -38,7 +39,7 @@ $:
|
|
|
38
39
|
};
|
|
39
40
|
</script>
|
|
40
41
|
|
|
41
|
-
<picture data-testid="picture">
|
|
42
|
+
<picture data-testid="picture" class={pictureClass} {pictureStyle}>
|
|
42
43
|
{#if data.webpSrcSet}
|
|
43
44
|
<source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
|
|
44
45
|
{/if}
|
|
@@ -59,11 +60,11 @@ $:
|
|
|
59
60
|
fetchpriority: priority ? 'high' : undefined
|
|
60
61
|
})}
|
|
61
62
|
loading={priority ? undefined : 'lazy'}
|
|
62
|
-
class={
|
|
63
|
+
class={imgClass}
|
|
63
64
|
style={dumpStyleAttributes({
|
|
64
65
|
...placeholderStyle,
|
|
65
66
|
...sizingStyle,
|
|
66
|
-
...parseStyleAttributes(
|
|
67
|
+
...parseStyleAttributes(imgStyle)
|
|
67
68
|
})}
|
|
68
69
|
data-testid="img"
|
|
69
70
|
/>
|
|
@@ -3,8 +3,10 @@ import { type ResponsiveImageType } from './utils';
|
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ data: ResponsiveImageType;
|
|
6
|
-
/** Additional CSS className for root
|
|
7
|
-
/** Additional CSS rules to add to the root
|
|
6
|
+
/** Additional CSS className for the root <picture> tag */ pictureClass?: string | null | undefined;
|
|
7
|
+
/** Additional CSS rules to add to the root <picture> tag */ pictureStyle?: string | null | undefined;
|
|
8
|
+
/** Additional CSS className for the <img> tag */ imgClass?: string | null | undefined;
|
|
9
|
+
/** Additional CSS rules to add to the <img> tag */ imgStyle?: string | null | undefined;
|
|
8
10
|
/** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean | undefined;
|
|
9
11
|
/**
|
|
10
12
|
* The HTML5 `sizes` attribute for the image
|
|
@@ -51,7 +51,7 @@ onMount(async () => {
|
|
|
51
51
|
method: 'POST',
|
|
52
52
|
headers: {
|
|
53
53
|
'Content-Type': 'application/json',
|
|
54
|
-
Authorization: "Bearer
|
|
54
|
+
Authorization: "Bearer AN_API_TOKEN",
|
|
55
55
|
},
|
|
56
56
|
body: JSON.stringify({ query })
|
|
57
57
|
})
|
|
@@ -145,7 +145,7 @@ onMount(async () => {
|
|
|
145
145
|
method: 'POST',
|
|
146
146
|
headers: {
|
|
147
147
|
'Content-Type': 'application/json',
|
|
148
|
-
Authorization: "Bearer
|
|
148
|
+
Authorization: "Bearer AN_API_TOKEN",
|
|
149
149
|
},
|
|
150
150
|
body: JSON.stringify({ query })
|
|
151
151
|
})
|
|
@@ -93,7 +93,7 @@ onMount(async () => {
|
|
|
93
93
|
method: 'POST',
|
|
94
94
|
headers: {
|
|
95
95
|
'Content-Type': 'application/json',
|
|
96
|
-
Authorization: "Bearer
|
|
96
|
+
Authorization: "Bearer AN_API_TOKEN",
|
|
97
97
|
},
|
|
98
98
|
body: JSON.stringify({ query })
|
|
99
99
|
})
|