[frontend] add recursive gql-node-renderer (#847)

* resolve merge conflicts

change fallback to blocking

* modify layout on article pages, add revalidate to article pages

* content spans 7 colummns, image spans 5 columns

---------

Co-authored-by: Jordan Willis <[email protected]>
Co-authored-by: Jordan <[email protected]>

components/gql_node_renderer/Recur.jsx

@@ -0,0 +1,50 @@
+import { v4 as uuid } from "uuid";
+
+import Header from "./nodes/Header";
+import LineBreak from "./nodes/LineBreak";
+import ListItem from "./nodes/ListItem";
+import OrderedList from "./nodes/OrderedList";
+import Paragraph from "./nodes/Paragraph";
+import Text from "./nodes/Text";
+import UnorderedList from "./nodes/UnorderedList";
+import Link from "./nodes/Link";
+
+// todo: more components will like need to be added, but for now, these are the only ones returned in the aem json response
+const NODES = {
+  header: Header,
+  paragraph: Paragraph,
+  link: Link,
+  text: Text,
+  "unordered-list": UnorderedList,
+  "ordered-list": OrderedList,
+  "list-item": ListItem,
+  "line-break": LineBreak,
+};
+
+export default function Recur(props) {
+  const Node = NODES[props.node?.nodeType];
+  let content = props.node?.content;
+
+  if (
+    !Node ||
+    (props.excludeH1 &&
+      props.node?.nodeType === "header" &&
+      props.node?.style === "h1")
+  ) {
+    return;
+  }
+
+  return (
+    <>
+      {content && content.length ? (
+        <Node key={uuid()} node={props.node}>
+          {content.map((node) => (
+            <Recur key={uuid()} node={node} />
+          ))}
+        </Node>
+      ) : (
+        <Node key={uuid()} node={props.node}></Node>
+      )}
+    </>
+  );
+}

components/gql_node_renderer/Render.jsx

@@ -0,0 +1,12 @@
+import Recur from "./Recur";
+import { v4 as uuid } from "uuid";
+
+export default function Render(props) {
+  return (
+    <>
+      {props.data.map((node) => (
+        <Recur key={uuid()} node={node} excludeH1={props.excludeH1} />
+      ))}
+    </>
+  );
+}

components/gql_node_renderer/nodes/Header.jsx

@@ -0,0 +1,16 @@
+export default function Header(props) {
+  switch (props.node.style) {
+    case "h1":
+      return <h1>{props.children}</h1>;
+    case "h2":
+      return <h2>{props.children}</h2>;
+    case "h3":
+      return <h3>{props.children}</h3>;
+    case "h4":
+      return <h4>{props.children}</h4>;
+    case "h5":
+      return <h5>{props.children}</h5>;
+    default:
+      return <h6>{props.children}</h6>;
+  }
+}

components/gql_node_renderer/nodes/LineBreak.jsx

@@ -0,0 +1,3 @@
+export default function LineBreak() {
+  return <br />;
+}

components/gql_node_renderer/nodes/Link.jsx

@@ -0,0 +1,7 @@
+export default function Link(props) {
+  return (
+    <a href={props.node.data.href} className="underline">
+      {props.node.value}
+    </a>
+  );
+}

components/gql_node_renderer/nodes/ListItem.jsx

@@ -0,0 +1,3 @@
+export default function ListItem(props) {
+  return <li>{props.children}</li>;
+}

components/gql_node_renderer/nodes/OrderedList.jsx

@@ -0,0 +1,3 @@
+export default function UnorderedList(props) {
+  return <ol>{props.children}</ol>;
+}

components/gql_node_renderer/nodes/Paragraph.jsx

@@ -0,0 +1,3 @@
+export default function Paragraph(props) {
+  return <p>{props.children}</p>;
+}

components/gql_node_renderer/nodes/Text.jsx

@@ -0,0 +1,11 @@
+export default function Text(props) {
+  // todo: guessing on italic since I didn't see it, but I'm assuming it exists and will need to be updated
+  switch (props.node?.format?.variants?.[0]) {
+    case "strong":
+      return <strong>{props.node.value}</strong>;
+    case "emphasis":
+      return <em>{props.node.value}</em>;
+    default:
+      return <>{props.node.value}</>;
+  }
+}

components/gql_node_renderer/nodes/UnorderedList.jsx

@@ -0,0 +1,3 @@
+export default function UnorderedList(props) {
+  return <ul>{props.children}</ul>;
+}

package.json

@@ -36,7 +36,8 @@
     "remark-breaks": "^3.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.2",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "dev": "next dev",