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>
+  )
+}