react-datocms 3.0.10 → 3.0.13

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

@@ -0,0 +1,309 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+import { renderMetaTags, renderMetaTagsToString, toRemixMeta } from "..";
+import { TitleMetaLinkTag } from "../types";
+
+const metaTags: TitleMetaLinkTag[] = [
+  {
+    "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"
+  }
+];
+
+describe("renderMetaTags", () => {
+  it("generates an array of meta tags", () => {
+    const wrapper = shallow(
+      <head>
+        {renderMetaTags(metaTags)}
+      </head>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("renderMetaTagsToString", () => {
+  it("generates an array of meta tags", () => {
+    expect(renderMetaTagsToString(metaTags)).toMatchSnapshot();
+  });
+});
+
+describe("toRemixMeta", () => {
+  it("generates a meta descriptor", () => {
+    expect(toRemixMeta(metaTags)).toMatchSnapshot();
+  });
+});

package/src/Seo/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './remixUtils';
+export * from './renderMetaTags';
+export * from './renderMetaTagsToString';

package/src/Seo/remixUtils.ts

@@ -0,0 +1,34 @@
+import { TitleMetaLinkTag } from './types';
+
+interface RemixHtmlMetaDescriptor {
+  [name: string]: string | string[];
+}
+
+export function toRemixMeta(
+  metaTags: null | TitleMetaLinkTag[],
+): RemixHtmlMetaDescriptor {
+  if (!metaTags) {
+    return {};
+  }
+
+  return metaTags.reduce((acc, tag) => {
+    if (tag.tag === 'title') {
+      return tag.content ? { ...acc, title: tag.content } : acc;
+    }
+
+    if (tag.tag === 'link') {
+      return acc;
+    }
+
+    if (!tag.attributes) {
+      return acc;
+    }
+
+    return {
+      ...acc,
+      ['property' in tag.attributes
+        ? tag.attributes.property
+        : tag.attributes.name]: tag.attributes.content,
+    };
+  }, {} as RemixHtmlMetaDescriptor);
+}

package/src/Seo/renderMetaTags.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TitleMetaLinkTag } from './types';
+
+export function renderMetaTags(data: TitleMetaLinkTag[]): JSX.Element[] {
+  return data.map(({ tag, attributes, content }) => {
+    let key: string[] = [tag];
+
+    if (attributes && 'property' in attributes) {
+      key.push(attributes.property);
+    }
+
+    if (attributes && 'name' in attributes) {
+      key.push(attributes.name);
+    }
+
+    if (attributes && 'rel' in attributes) {
+      key.push(attributes.rel);
+    }
+
+    if (attributes && 'sizes' in attributes) {
+      key.push(attributes.sizes);
+    }
+
+    const Tag = tag as 'meta' | 'title' | 'link';
+
+    return (
+      <Tag key={key.join('-')} {...attributes}>
+        {content}
+      </Tag>
+    );
+  });
+}

package/src/Seo/renderMetaTagsToString.tsx

@@ -0,0 +1,21 @@
+import { TitleMetaLinkTag } from "./types";
+
+export function renderMetaTagsToString(data: TitleMetaLinkTag[]): string {
+  return data
+    .map((tag) => {
+      if (tag.tag === 'title') {
+        return `<title>${tag.content}</title>`;
+      }
+
+      const serializedAttrs = [];
+
+      for (const key in tag.attributes) {
+        if (Object.prototype.hasOwnProperty.call(tag.attributes, key)) {
+          serializedAttrs.push(`${key}="${(tag.attributes as any)[key]}"`);
+        }
+      }
+
+      return `<${tag.tag} ${serializedAttrs.join(' ')} />`;
+    })
+    .join('\n');
+};

package/src/Seo/types.tsx

@@ -0,0 +1,53 @@
+export interface TitleMetaLinkTag {
+  /** the tag for the meta information */
+  tag: string;
+  /** the inner content of the meta tag */
+  content: string | null | undefined;
+  /** the HTML attributes to attach to the meta tag */
+  attributes: Record<string, string> | null | undefined;
+}
+
+export interface SeoTitleTag {
+  tag: 'title';
+  content: string | null;
+  attributes?: null;
+}
+
+export interface RegularMetaAttributes {
+  name: string;
+  content: string;
+}
+
+export interface OgMetaAttributes {
+  property: string;
+  content: string;
+}
+
+export interface SeoMetaTag {
+  tag: 'meta';
+  content?: null;
+  attributes: RegularMetaAttributes | OgMetaAttributes;
+}
+
+export interface FaviconAttributes {
+  sizes: string;
+  type: string;
+  rel: string;
+  href: string;
+}
+
+export interface AppleTouchIconAttributes {
+  sizes: string;
+  rel: 'apple-touch-icon';
+  href: string;
+}
+
+export interface SeoLinkTag {
+  tag: 'link';
+  content?: null;
+  attributes: FaviconAttributes | AppleTouchIconAttributes;
+}
+
+export type SeoTag = SeoTitleTag | SeoMetaTag;
+export type FaviconTag = SeoMetaTag | SeoLinkTag;
+export type SeoOrFaviconTag = SeoTag | FaviconTag;