@datocms/svelte 1.2.1 → 1.3.0

package/components/Head/__tests__/__fixtures__/head.js

@@ -1,280 +0,0 @@
-export const metaTags = [
-    {
-        content: 'Remix CMS - The easiest way to manage content with Remix',
-        attributes: null,
-        tag: 'title'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:title',
-            content: 'Remix CMS - The easiest way to manage content with Remix'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            name: 'twitter:title',
-            content: 'Remix CMS - The easiest way to manage content with Remix'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            name: 'description',
-            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:description',
-            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            name: 'twitter:description',
-            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:image',
-            content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:image:width',
-            content: '746'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:image:height',
-            content: '186'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            name: 'twitter:image',
-            content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:locale',
-            content: 'en'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:type',
-            content: 'article'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'og:site_name',
-            content: 'DatoCMS'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            property: 'article:modified_time',
-            content: '2022-01-18T14:02:47Z'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            name: 'twitter:card',
-            content: 'summary_large_image'
-        },
-        tag: 'meta'
-    },
-    {
-        content: null,
-        attributes: {
-            name: 'twitter:site',
-            content: '@datocms'
-        },
-        tag: 'meta'
-    },
-    {
-        attributes: {
-            sizes: '16x16',
-            type: 'image/png',
-            rel: 'icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '32x32',
-            type: 'image/png',
-            rel: 'icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '96x96',
-            type: 'image/png',
-            rel: 'icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '192x192',
-            type: 'image/png',
-            rel: 'icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '57x57',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '60x60',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '72x72',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '76x76',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '114x114',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '120x120',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '144x144',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '152x152',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            sizes: '180x180',
-            rel: 'apple-touch-icon',
-            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180'
-        },
-        content: null,
-        tag: 'link'
-    },
-    {
-        attributes: {
-            name: 'msapplication-square70x70logo',
-            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70'
-        },
-        content: null,
-        tag: 'meta'
-    },
-    {
-        attributes: {
-            name: 'msapplication-square150x150logo',
-            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150'
-        },
-        content: null,
-        tag: 'meta'
-    },
-    {
-        attributes: {
-            name: 'msapplication-square310x310logo',
-            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310'
-        },
-        content: null,
-        tag: 'meta'
-    },
-    {
-        attributes: {
-            name: 'msapplication-square310x150logo',
-            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310'
-        },
-        content: null,
-        tag: 'meta'
-    }
-];

package/components/Head/__tests__/__snapshots__/Head.test.ts.snap

@@ -1,221 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`Head > renders meta tags 1`] = `
-<head>
-  <title>
-    Remix CMS - The easiest way to manage content with Remix
-  </title>
-  
-  
-  <meta
-    content="Remix CMS - The easiest way to manage content with Remix"
-    property="og:title"
-  />
-  
-  
-  <meta
-    content="Remix CMS - The easiest way to manage content with Remix"
-    name="twitter:title"
-  />
-  
-  
-  <meta
-    content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
-    name="description"
-  />
-  
-  
-  <meta
-    content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
-    property="og:description"
-  />
-  
-  
-  <meta
-    content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
-    name="twitter:description"
-  />
-  
-  
-  <meta
-    content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
-    property="og:image"
-  />
-  
-  
-  <meta
-    content="746"
-    property="og:image:width"
-  />
-  
-  
-  <meta
-    content="186"
-    property="og:image:height"
-  />
-  
-  
-  <meta
-    content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
-    name="twitter:image"
-  />
-  
-  
-  <meta
-    content="en"
-    property="og:locale"
-  />
-  
-  
-  <meta
-    content="article"
-    property="og:type"
-  />
-  
-  
-  <meta
-    content="DatoCMS"
-    property="og:site_name"
-  />
-  
-  
-  <meta
-    content="2022-01-18T14:02:47Z"
-    property="article:modified_time"
-  />
-  
-  
-  <meta
-    content="summary_large_image"
-    name="twitter:card"
-  />
-  
-  
-  <meta
-    content="@datocms"
-    name="twitter:site"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
-    rel="icon"
-    sizes="16x16"
-    type="image/png"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
-    rel="icon"
-    sizes="32x32"
-    type="image/png"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
-    rel="icon"
-    sizes="96x96"
-    type="image/png"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
-    rel="icon"
-    sizes="192x192"
-    type="image/png"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
-    rel="apple-touch-icon"
-    sizes="57x57"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
-    rel="apple-touch-icon"
-    sizes="60x60"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
-    rel="apple-touch-icon"
-    sizes="72x72"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
-    rel="apple-touch-icon"
-    sizes="76x76"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
-    rel="apple-touch-icon"
-    sizes="114x114"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
-    rel="apple-touch-icon"
-    sizes="120x120"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
-    rel="apple-touch-icon"
-    sizes="144x144"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
-    rel="apple-touch-icon"
-    sizes="152x152"
-  />
-  
-  
-  <link
-    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
-    rel="apple-touch-icon"
-    sizes="180x180"
-  />
-  
-  
-  <meta
-    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
-    name="msapplication-square70x70logo"
-  />
-  
-  
-  <meta
-    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
-    name="msapplication-square150x150logo"
-  />
-  
-  
-  <meta
-    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
-    name="msapplication-square310x310logo"
-  />
-  
-  
-  <meta
-    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
-    name="msapplication-square310x150logo"
-  />
-  
-  
-  
-</head>
-`;

package/components/Image/__tests__/Image.svelte.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/components/Image/__tests__/Image.svelte.test.js

@@ -1,44 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { act, fireEvent, render, screen } from '@testing-library/svelte';
-import { mockIntersectionObserver } from 'jsdom-testing-mocks';
-import { completeData, minimalData, minimalDataWithRelativeUrl } from './__fixtures__/image';
-import { Image } from '../../..';
-const io = mockIntersectionObserver();
-describe('Image', () => {
-    ['intrinsic', 'fixed', 'responsive', 'fill'].forEach((layout) => {
-        Object.entries({ completeData, minimalData, minimalDataWithRelativeUrl }).forEach(([name, data]) => {
-            describe(`layout=${layout}`, () => {
-                describe(`data=${name}`, () => {
-                    describe("when the component doesn't intersect the viewport", () => {
-                        it('only renders the placeholder elements ', () => {
-                            const onLoad = vi.fn();
-                            const { container, component } = render(Image, { props: { data, layout } });
-                            component.$on('load', onLoad);
-                            const picture = screen.queryByTestId('picture');
-                            expect(picture).not.toBeInTheDocument();
-                            expect(onLoad).not.toHaveBeenCalled();
-                            expect(container).toMatchSnapshot();
-                        });
-                    });
-                    describe('when the component intersects the viewport', () => {
-                        it('shows the image ', async () => {
-                            const onLoad = vi.fn();
-                            const { container, component } = render(Image, { props: { data, layout } });
-                            component.$on('load', onLoad);
-                            await act(async () => {
-                                io.enterNode(await screen.findByTestId('image'));
-                            });
-                            const picture = screen.getByTestId('picture');
-                            const img = screen.getByTestId('img');
-                            fireEvent.load(img);
-                            expect(picture).toBeInTheDocument();
-                            expect(onLoad).toHaveBeenCalled();
-                            expect(container).toMatchSnapshot();
-                        });
-                    });
-                });
-            });
-        });
-    });
-});

package/components/Image/__tests__/__fixtures__/image.d.ts

@@ -1,40 +0,0 @@
-export declare const completeData: {
-    alt: string;
-    aspectRatio: number;
-    base64: string;
-    height: number;
-    sizes: string;
-    src: string;
-    srcSet: string;
-    title: string;
-    width: number;
-};
-export declare const minimalData: {
-    base64: string;
-    height: number;
-    src: string;
-    width: number;
-};
-export declare const minimalDataWithRelativeUrl: {
-    base64: string;
-    height: number;
-    src: string;
-    width: number;
-};
-export declare const completeData2: {
-    alt: null;
-    base64: string;
-    aspectRatio: number;
-    height: number;
-    sizes: string;
-    src: string;
-    srcSet: string;
-    title: null;
-    width: number;
-};
-export declare const minimalData2: {
-    base64: string;
-    height: number;
-    src: string;
-    width: number;
-};

package/components/Image/__tests__/__fixtures__/image.js

@@ -1,40 +0,0 @@
-export const completeData = {
-    alt: 'DatoCMS swag',
-    aspectRatio: 1.7777777777777777,
-    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
-    height: 421,
-    sizes: '(max-width: 750px) 100vw, 750px',
-    src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
-    srcSet: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w',
-    title: 'These are awesome, we know that.',
-    width: 750
-};
-export const minimalData = {
-    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
-    height: 421,
-    src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
-    width: 750
-};
-export const minimalDataWithRelativeUrl = {
-    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
-    height: 421,
-    src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
-    width: 750
-};
-export const completeData2 = {
-    alt: null,
-    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIFAgLChEXDg0VDg0NGRUVDREVFxMZHRYVFiEaHysjGh0oHRUWJDUlKC0vMjIyHSI4PTcwPCsxMi8BCgsLDg0OFRAQHC8cIigvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAABQEDBv/EAB0QAAEEAgMAAAAAAAAAAAAAAAQAAQIDETEFEhP/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/EABoRAAICAwAAAAAAAAAAAAAAAAABAgMSEzH/2gAMAwEAAhEDEQA/AN2QdCbbVNRUYvtJOXukFX2yo4Ilz3zlVzZFTHrHt17WMhBA3lDKEc5C1Vn/2Q==',
-    aspectRatio: 1.5,
-    height: 3456,
-    sizes: '(max-width: 5184px) 100vw, 5184px',
-    src: 'https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg',
-    srcSet: 'https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg?dpr=0.25 1296w,https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg?dpr=0.5 2592w,https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg?dpr=0.75 3888w,https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg 5184w',
-    title: null,
-    width: 5184
-};
-export const minimalData2 = {
-    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICBELERULDg8VDg0NDxUOFhEPFxgrGRYfFiEaHysjJh0oKRcWJDUxKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDslIig7Ozs7NTs7Ly81Lzw7Ozs7Ly8vLy8vLy8vLy8vLy8vLy8vLy8vLy81Ly8vLy8vLy8vL//AABEIABgAGAMBIgACEQEDEQH/xAAaAAACAgMAAAAAAAAAAAAAAAAABQEHAwQG/8QAHxAAAgEEAgMAAAAAAAAAAAAAAAEDAgQFEVFxEiFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/xAAbEQEAAgMBAQAAAAAAAAAAAAABAAIREiETA//aAAwDAQACEQMRAD8Ap1LdQ/sIW4kJKqfCVHT41JwroNztH4kUZdOOjtgbGfibjTXxgKNoCA8ii79NMe4m43Et8EAM1G8mtdr8xJmv0pVokAH1JB6WXM//2Q==',
-    height: 1994,
-    src: 'https://www.datocms-assets.com/23796/1583844698-gift-habeshaw-pgxxjrtfnjq-unsplash-edited.png',
-    width: 1994
-};