feat: StructuredData component

components/atomic/StructuredData/StructuredData.cy.tsx

@@ -0,0 +1,36 @@
+import { mount } from "cypress/react";
+import { ImageObject } from "schema-dts";
+import StructuredData from ".";
+
+const id = "schema";
+const imageObject: ImageObject = {
+  "@type": "ImageObject",
+  contentUrl:
+    "https://rubin.canto.com/direct/image/nj40jlebv120p4fm2ijat6345k/Z-ohDijmcrdn1UU-we9M3AqLzj8/original?content-type=image%2Fjpeg&name=Comet.jpg",
+  license: "https://www.hernanstockebrand.com/",
+  creditText: "RubinObs/NOIRLab/SLAC/DOE/NSF/AURA/H. Stockebrand",
+  creator: {
+    "@type": "Person",
+    name: "Hernan Stockebrand",
+  },
+  contentSize: "43.21MB",
+  dateCreated: "2024-10-16 20:58",
+  datePublished: "2024-10-17 05:47",
+  caption:
+    "Comet Tsuchinshan-ATLAS makes an appearance in the twilight sky next to Rubin Observatory on the night of October 16, 2024. The comet is currently headed away from the Sun on its 80,000-year orbit after making its closest approach on October 9.",
+};
+
+describe("<StructuredData>", () => {
+  it("renders to page", () => {
+    mount(<StructuredData jsonLd={imageObject} id={id} />);
+    cy.get(`#${id}`).should("exist");
+    cy.get(`#${id}`).invoke("attr", "type").should("eq", "application/ld+json");
+  });
+  it("attaches schema context", () => {
+    mount(<StructuredData jsonLd={imageObject} id={id} />);
+    cy.get(`#${id}`).should(
+      "have.text",
+      JSON.stringify({ "@context": "https://schema.org", ...imageObject })
+    );
+  });
+});

components/atomic/StructuredData/index.tsx

@@ -0,0 +1,38 @@
+import { Thing, WithContext } from "schema-dts";
+
+interface StructuredDataProps<T> {
+  id?: string;
+  jsonLd: T;
+}
+
+function StructuredData<T extends Thing>({
+  jsonLd,
+  id,
+}: StructuredDataProps<T>) {
+  if (typeof jsonLd !== "object") {
+    return (
+      <script
+        id={id}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: jsonLd }}
+      ></script>
+    );
+  }
+
+  const withContext: WithContext<T> = {
+    "@context": "https://schema.org",
+    ...jsonLd,
+  };
+
+  return (
+    <script
+      id={id}
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(withContext) }}
+    ></script>
+  );
+}
+
+StructuredData.displayName = "Atom.StructuredData";
+
+export default StructuredData;

package.json

@@ -94,6 +94,7 @@
     "react-player": "^2.12.0",
     "react-popper": "^2.3.0",
     "sanitize-html": "^2.13.1",
+    "schema-dts": "^1.1.2",
     "striptags": "^3.2.0",
     "styled-components": "^6.1.1",
     "swr": "^1.3.0",

tsconfig.json

@@ -41,7 +41,8 @@
       "@/helpers": ["helpers"],
       "@/helpers/*": ["helpers/*"],
       "@/hoc/*": ["components/hoc/*"]
-    }
+    },
+    "types": ["cypress", "node"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],

yarn.lock

@@ -11287,6 +11287,11 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
+schema-dts@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/schema-dts/-/schema-dts-1.1.2.tgz#82ccf71b5dcb80065a1cc5941888507a4ce1e44b"
+  integrity sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==
+
 schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"