react-datocms 3.0.10 → 3.0.13

package/src/Image/__tests__/index.test.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import 'intersection-observer';
+import { Image } from '../index';
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
+
+const data = {
+  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,
+};
+
+describe('Image', () => {
+  // intersectionThreshold is an hack to make tests work
+  // we need the library to generate a different IntersectionObserver for each test
+  // otherwise the IntersectionObserver mocking won't work
+
+  (['intrinsic', 'fixed', 'responsive', 'fill'] as const).forEach((layout) => {
+    describe(`layout=${layout}`, () => {
+      describe('not visible', () => {
+        it('renders the blur-up thumb', () => {
+          const wrapper = mount(
+            <Image data={data} layout={layout} intersectionThreshold={0.1} />,
+          );
+          expect(wrapper).toMatchSnapshot();
+        });
+      });
+
+      describe('visible', () => {
+        it('renders the image', () => {
+          const wrapper = mount(
+            <Image data={data} layout={layout} intersectionThreshold={0.2} />,
+          );
+          mockAllIsIntersecting(true);
+          wrapper.update();
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        describe('image loaded', () => {
+          it('shows the image', () => {
+            const wrapper = mount(
+              <Image data={data} layout={layout} intersectionThreshold={0.3} />,
+            );
+            mockAllIsIntersecting(true);
+            wrapper.update();
+            wrapper.find('img').last().simulate('load');
+            wrapper.update();
+            expect(wrapper).toMatchSnapshot();
+          });
+        });
+      });
+    });
+  });
+});

package/src/Image/index.tsx

@@ -0,0 +1,294 @@
+import React, { useState, forwardRef, useCallback, CSSProperties } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { encode } from 'universal-base64';
+
+const isSsr = typeof window === 'undefined';
+
+const isIntersectionObserverAvailable = isSsr
+  ? false
+  : !!(window as any).IntersectionObserver;
+
+type Maybe<T> = T | null;
+
+export type ResponsiveImageType = {
+  /** The aspect ratio (width/height) of the image */
+  aspectRatio: number;
+  /** A base64-encoded thumbnail to offer during image loading */
+  base64?: Maybe<string>;
+  /** The height of the image */
+  height?: Maybe<number>;
+  /** The width of the image */
+  width: number;
+  /** The HTML5 `sizes` attribute for the image */
+  sizes?: Maybe<string>;
+  /** The fallback `src` attribute for the image */
+  src?: Maybe<string>;
+  /** The HTML5 `srcSet` attribute for the image */
+  srcSet?: Maybe<string>;
+  /** The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format */
+  webpSrcSet?: Maybe<string>;
+  /** The background color for the image placeholder */
+  bgColor?: Maybe<string>;
+  /** Alternate text (`alt`) for the image */
+  alt?: Maybe<string>;
+  /** Title attribute (`title`) for the image */
+  title?: Maybe<string>;
+};
+
+type ImagePropTypes = {
+  /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
+  data: ResponsiveImageType;
+  /** Additional CSS className for root node */
+  className?: string;
+  /** Additional CSS class for the image inside the `<picture />` tag */
+  pictureClassName?: string;
+  /** Duration (in ms) of the fade-in transition effect upoad image loading */
+  fadeInDuration?: number;
+  /** @deprecated Use the intersectionThreshold prop */
+  intersectionTreshold?: number;
+  /** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */
+  intersectionThreshold?: number;
+  /** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */
+  intersectionMargin?: string;
+  /** Whether enable lazy loading or not */
+  lazyLoad?: boolean;
+  /** Additional CSS rules to add to the root node */
+  style?: React.CSSProperties;
+  /** Additional CSS rules to add to the image inside the `<picture />` tag */
+  pictureStyle?: React.CSSProperties;
+  /**
+   * The layout behavior of the image as the viewport changes size
+   *
+   * Possible values:
+   *
+   * * `intrinsic` (default): the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+   * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+   * * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
+   * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
+   * */
+  layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
+  /** Defines how the image will fit into its parent container when using layout="fill" */
+  objectFit?: CSSProperties['objectFit'];
+  /** Defines how the image is positioned within its parent element when using layout="fill". */
+  objectPosition?: CSSProperties['objectPosition'];
+  /** Triggered when the image finishes loading */
+  onLoad?(): void;
+  /** Whether the component should use a blurred image placeholder */
+  usePlaceholder?: boolean;
+};
+
+type State = {
+  lazyLoad: boolean;
+  inView: boolean;
+  loaded: boolean;
+};
+
+const imageAddStrategy = ({ lazyLoad, inView, loaded }: State) => {
+  if (!lazyLoad) {
+    return true;
+  }
+
+  if (isSsr) {
+    return false;
+  }
+
+  if (isIntersectionObserverAvailable) {
+    return inView || loaded;
+  }
+
+  return true;
+};
+
+const imageShowStrategy = ({ lazyLoad, loaded }: State) => {
+  if (!lazyLoad) {
+    return true;
+  }
+
+  if (isSsr) {
+    return false;
+  }
+
+  if (isIntersectionObserverAvailable) {
+    return loaded;
+  }
+
+  return true;
+};
+
+export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
+  (
+    {
+      className,
+      fadeInDuration = 500,
+      intersectionTreshold,
+      intersectionThreshold,
+      intersectionMargin,
+      pictureClassName,
+      lazyLoad = true,
+      style,
+      pictureStyle,
+      layout = 'intrinsic',
+      objectFit,
+      objectPosition,
+      data,
+      onLoad,
+      usePlaceholder = true,
+    },
+    ref,
+  ) => {
+    const [loaded, setLoaded] = useState(false);
+
+    const handleLoad = () => {
+      onLoad?.();
+      setLoaded(true);
+    };
+
+    const [viewRef, inView] = useInView({
+      threshold: intersectionThreshold || intersectionTreshold || 0,
+      rootMargin: intersectionMargin || '0px 0px 0px 0px',
+      triggerOnce: true,
+      fallbackInView: true,
+    });
+
+    const callbackRef = useCallback(
+      (_ref: HTMLDivElement) => {
+        viewRef(_ref);
+        if (ref) (ref as React.MutableRefObject<HTMLDivElement>).current = _ref;
+      },
+      [viewRef],
+    );
+
+    const absolutePositioning: React.CSSProperties = {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+    };
+
+    const addImage = imageAddStrategy({
+      lazyLoad,
+      inView,
+      loaded,
+    });
+    const showImage = imageShowStrategy({
+      lazyLoad,
+      inView,
+      loaded,
+    });
+
+    const webpSource = data.webpSrcSet && (
+      <source
+        srcSet={data.webpSrcSet}
+        sizes={data.sizes ?? undefined}
+        type="image/webp"
+      />
+    );
+
+    const regularSource = data.srcSet && (
+      <source srcSet={data.srcSet} sizes={data.sizes ?? undefined} />
+    );
+
+    const transition =
+      fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : undefined;
+
+    const placeholder = usePlaceholder ? (
+      <img
+        role="presentation"
+        aria-hidden="true"
+        alt=""
+        src={data.base64 ?? undefined}
+        style={{
+          backgroundColor: data.bgColor ?? undefined,
+          opacity: showImage ? 0 : 1,
+          transition,
+          objectFit,
+          objectPosition,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: '100%',
+        }}
+      />
+    ) : null;
+
+    const { width, aspectRatio } = data;
+    const height = data.height || width / aspectRatio;
+
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
+
+    const sizer =
+      layout !== 'fill' ? (
+        <img
+          className={pictureClassName}
+          style={{
+            display: 'block',
+            width: '100%',
+          }}
+          src={`data:image/svg+xml;base64,${encode(svg)}`}
+          aria-hidden="true"
+          alt=""
+        />
+      ) : null;
+
+    return (
+      <div
+        ref={callbackRef}
+        className={className}
+        style={{
+          overflow: 'hidden',
+          ...(layout === 'fill'
+            ? absolutePositioning
+            : layout === 'intrinsic'
+            ? { position: 'relative', width: '100%', maxWidth: width }
+            : layout === 'fixed'
+            ? { position: 'relative', width }
+            : { position: 'relative', width: '100%' }),
+          ...style,
+        }}
+      >
+        {sizer}
+        {placeholder}
+        {addImage && (
+          <picture>
+            {webpSource}
+            {regularSource}
+            {data.src && (
+              <img
+                src={data.src}
+                alt={data.alt ?? ''}
+                title={data.title ?? undefined}
+                onLoad={handleLoad}
+                className={pictureClassName}
+                style={{
+                  opacity: showImage ? 1 : 0,
+                  transition,
+                  ...absolutePositioning,
+                  objectFit,
+                  objectPosition,
+                  ...pictureStyle,
+                }}
+              />
+            )}
+          </picture>
+        )}
+        <noscript>
+          <picture>
+            {webpSource}
+            {regularSource}
+            {data.src && (
+              <img
+                src={data.src}
+                alt={data.alt ?? ''}
+                title={data.title ?? undefined}
+                className={pictureClassName}
+                style={{ ...absolutePositioning, ...pictureStyle }}
+                loading="lazy"
+              />
+            )}
+          </picture>
+        </noscript>
+      </div>
+    );
+  },
+);

package/src/Seo/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,249 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderMetaTags generates an array of meta tags 1`] = `
+<head>
+  <title
+    key="title"
+  >
+    Remix CMS - The easiest way to manage content with Remix
+  </title>
+  <meta
+    content="Remix CMS - The easiest way to manage content with Remix"
+    key="meta-og:title"
+    property="og:title"
+  />
+  <meta
+    content="Remix CMS - The easiest way to manage content with Remix"
+    key="meta-twitter:title"
+    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."
+    key="meta-description"
+    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."
+    key="meta-og:description"
+    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."
+    key="meta-twitter:description"
+    name="twitter:description"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+    key="meta-og:image"
+    property="og:image"
+  />
+  <meta
+    content="746"
+    key="meta-og:image:width"
+    property="og:image:width"
+  />
+  <meta
+    content="186"
+    key="meta-og:image:height"
+    property="og:image:height"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+    key="meta-twitter:image"
+    name="twitter:image"
+  />
+  <meta
+    content="en"
+    key="meta-og:locale"
+    property="og:locale"
+  />
+  <meta
+    content="article"
+    key="meta-og:type"
+    property="og:type"
+  />
+  <meta
+    content="DatoCMS"
+    key="meta-og:site_name"
+    property="og:site_name"
+  />
+  <meta
+    content="2022-01-18T14:02:47Z"
+    key="meta-article:modified_time"
+    property="article:modified_time"
+  />
+  <meta
+    content="summary_large_image"
+    key="meta-twitter:card"
+    name="twitter:card"
+  />
+  <meta
+    content="@datocms"
+    key="meta-twitter:site"
+    name="twitter:site"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
+    key="link-icon-16x16"
+    rel="icon"
+    sizes="16x16"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
+    key="link-icon-32x32"
+    rel="icon"
+    sizes="32x32"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
+    key="link-icon-96x96"
+    rel="icon"
+    sizes="96x96"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
+    key="link-icon-192x192"
+    rel="icon"
+    sizes="192x192"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
+    key="link-apple-touch-icon-57x57"
+    rel="apple-touch-icon"
+    sizes="57x57"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
+    key="link-apple-touch-icon-60x60"
+    rel="apple-touch-icon"
+    sizes="60x60"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
+    key="link-apple-touch-icon-72x72"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
+    key="link-apple-touch-icon-76x76"
+    rel="apple-touch-icon"
+    sizes="76x76"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
+    key="link-apple-touch-icon-114x114"
+    rel="apple-touch-icon"
+    sizes="114x114"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
+    key="link-apple-touch-icon-120x120"
+    rel="apple-touch-icon"
+    sizes="120x120"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
+    key="link-apple-touch-icon-144x144"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
+    key="link-apple-touch-icon-152x152"
+    rel="apple-touch-icon"
+    sizes="152x152"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
+    key="link-apple-touch-icon-180x180"
+    rel="apple-touch-icon"
+    sizes="180x180"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
+    key="meta-msapplication-square70x70logo"
+    name="msapplication-square70x70logo"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
+    key="meta-msapplication-square150x150logo"
+    name="msapplication-square150x150logo"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
+    key="meta-msapplication-square310x310logo"
+    name="msapplication-square310x310logo"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
+    key="meta-msapplication-square310x150logo"
+    name="msapplication-square310x150logo"
+  />
+</head>
+`;
+
+exports[`renderMetaTagsToString generates an array of meta tags 1`] = `
+"<title>Remix CMS - The easiest way to manage content with Remix</title>
+<meta property=\\"og:title\\" content=\\"Remix CMS - The easiest way to manage content with Remix\\" />
+<meta name=\\"twitter:title\\" content=\\"Remix CMS - The easiest way to manage content with Remix\\" />
+<meta 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.\\" />
+<meta 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.\\" />
+<meta 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.\\" />
+<meta property=\\"og:image\\" content=\\"https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000\\" />
+<meta property=\\"og:image:width\\" content=\\"746\\" />
+<meta property=\\"og:image:height\\" content=\\"186\\" />
+<meta name=\\"twitter:image\\" content=\\"https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000\\" />
+<meta property=\\"og:locale\\" content=\\"en\\" />
+<meta property=\\"og:type\\" content=\\"article\\" />
+<meta property=\\"og:site_name\\" content=\\"DatoCMS\\" />
+<meta property=\\"article:modified_time\\" content=\\"2022-01-18T14:02:47Z\\" />
+<meta name=\\"twitter:card\\" content=\\"summary_large_image\\" />
+<meta name=\\"twitter:site\\" content=\\"@datocms\\" />
+<link sizes=\\"16x16\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16\\" />
+<link sizes=\\"32x32\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32\\" />
+<link sizes=\\"96x96\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96\\" />
+<link sizes=\\"192x192\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192\\" />
+<link sizes=\\"57x57\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57\\" />
+<link sizes=\\"60x60\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60\\" />
+<link sizes=\\"72x72\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72\\" />
+<link sizes=\\"76x76\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76\\" />
+<link sizes=\\"114x114\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114\\" />
+<link sizes=\\"120x120\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120\\" />
+<link sizes=\\"144x144\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144\\" />
+<link sizes=\\"152x152\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152\\" />
+<link sizes=\\"180x180\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180\\" />
+<meta name=\\"msapplication-square70x70logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70\\" />
+<meta name=\\"msapplication-square150x150logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150\\" />
+<meta name=\\"msapplication-square310x310logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310\\" />
+<meta name=\\"msapplication-square310x150logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310\\" />"
+`;
+
+exports[`toRemixMeta generates a meta descriptor 1`] = `
+Object {
+  "article:modified_time": "2022-01-18T14:02:47Z",
+  "description": "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.",
+  "msapplication-square150x150logo": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150",
+  "msapplication-square310x150logo": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310",
+  "msapplication-square310x310logo": "https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310",
+  "msapplication-square70x70logo": "https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70",
+  "og:description": "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.",
+  "og:image": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000",
+  "og:image:height": "186",
+  "og:image:width": "746",
+  "og:locale": "en",
+  "og:site_name": "DatoCMS",
+  "og:title": "Remix CMS - The easiest way to manage content with Remix",
+  "og:type": "article",
+  "title": "Remix CMS - The easiest way to manage content with Remix",
+  "twitter:card": "summary_large_image",
+  "twitter:description": "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.",
+  "twitter:image": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000",
+  "twitter:site": "@datocms",
+  "twitter:title": "Remix CMS - The easiest way to manage content with Remix",
+}
+`;