feat: json rich text editor, blocks, asides, general structure

components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,32 @@
+.nav {
+  padding-bottom: 8px;
+}
+
+.list {
+  align-items: center;
+  display: grid;
+  gap: 7px;
+  grid-auto-flow: column;
+  justify-content: flex-start;
+}
+
+.link {
+  color: #333;
+}
+
+.currentPage {
+  color: #7f7369;
+  margin-bottom: 0px;
+}
+
+.currentPage,
+.li {
+  font-size: .875rem;
+  line-height: 1.4em;
+}
+
+.li::before,
+.currentPage::before {
+  content: "›";
+  margin-right: 4px;
+}

components/Current/Preamble/Breadcrumbs/index.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/current/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs, parent, title }: BreadcrumbsProps) {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.list}>
+        {parent ? (
+          <li className="breadcrumb-list__parent hidden-medium hidden-large">
+            <Link href={parent.node.url}>
+              {parent.node.breadcrumbs?.title ?? parent.node.title}
+            </Link>
+          </li>
+        ) : null}
+        {breadcrumbs.edges.map(breadcrumb => (
+          <li className={styles.li} itemProp="breadcrumb" key={breadcrumb.node.title}>
+            <Link className={styles.link} href={breadcrumb.node.url}>
+              {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
+            </Link>
+          </li>
+        ))}
+        <li className={styles.currentPage}>
+          <span>{title}</span>
+        </li>
+      </ul>
+    </nav>
+  )
+}

components/Current/Preamble/index.tsx

@@ -0,0 +1,26 @@
+import { renderOptions } from "./renderOptions"
+
+import Breadcrumbs from "./Breadcrumbs"
+import JsonToHtml from "@/components/JsonToHtml"
+
+import styles from "./preamble.module.css"
+
+import type { PreambleProps } from "@/types/components/current/preamble"
+
+export default function Preamble({ breadcrumbs, breadcrumbParent, breadcrumbTitle, preamble, title }: PreambleProps) {
+  return (
+    <section className={styles.container}>
+      <section>
+        <Breadcrumbs breadcrumbs={breadcrumbs} parent={breadcrumbParent} title={breadcrumbTitle} />
+        <h1>{title}</h1>
+        {preamble?.text ? (
+          <JsonToHtml
+            embeds={preamble.text.embedded_itemsConnection.edges}
+            nodes={preamble.text.json.children}
+            renderOptions={renderOptions}
+          />
+        ) : null}
+      </section>
+    </section>
+  )
+}

components/Current/Preamble/preamble.module.css

@@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  gap: 60px;
+  grid-template-columns: 2fr 1fr;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 30px 0px 45px;
+}
+
+.preamble {
+  color: #333;
+  font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 300;
+  line-height: normal;
+  margin-bottom: 0px;
+  text-transform: none;
+}
+
+@media screen and (min-width: 950px) {
+  .preamble {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+}

components/Current/Preamble/renderOptions.tsx

@@ -0,0 +1,13 @@
+import styles from "./preamble.module.css"
+
+import { RTETypeEnum } from "@/types/rte/enums"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <p className={styles.preamble}>{next(node.children, embeds, fullRenderOptions)}</p>
+  },
+}