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

components/Current/Aside.tsx

@@ -1,9 +1,34 @@
+import { Fragment } from "react"
+
+import Puff from "./Asides/Puff"
+
+import { AsideTypenameEnum } from "@/types/requests/utils/typename"
 import type { AsideProps } from "@/types/components/current/aside"
 
-export default function Aside({ }: AsideProps) {
-  return (
-    <>
+export default function Aside({ blocks }: AsideProps) {
+  if (!blocks?.length) {
+    return null
+  }
 
-    </>
+  return (
+    <aside>
+      {blocks.map((block, idx) => {
+        const type = block.__typename
+        switch (type) {
+          case AsideTypenameEnum.CurrentBlocksPageAsideContact:
+            return null
+          case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
+            return (
+              <Fragment key={`puff-${idx}`}>
+                {block.puff.puffConnection.edges.map(puff => (
+                  <Puff key={puff.node.system.uid} {...puff.node} />
+                ))}
+              </Fragment>
+            )
+          default:
+            return null
+        }
+      })}
+    </aside>
   )
 }

components/Current/Asides/Puff/index.tsx

@@ -0,0 +1,60 @@
+import { renderOptions } from "./renderOptions"
+
+import Image from "next/image"
+import JsonToHtml from "@/components/JsonToHtml"
+import Link from "next/link"
+
+import styles from "./puff.module.css"
+
+import type { PuffProps } from "@/types/components/current/asides/puff"
+
+export default function Puff({ imageConnection, is_internal, link, link_text, pageConnection, system, text, title }: PuffProps) {
+  return is_internal ? (
+    <Link className={styles.link} href={link.href}>
+      <PuffContent
+        imageConnection={imageConnection}
+        text={text}
+        title={title}
+      />
+    </Link>
+  ) : (
+    <a className={styles.link} href={link.href} target="_blank">
+      <PuffContent
+        imageConnection={imageConnection}
+        text={text}
+        title={title}
+      />
+    </a>
+  )
+}
+
+
+function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageConnection" | "text" | "title">) {
+  return (
+    <article>
+      {imageConnection.edges.map(image => (
+        <Image
+          alt={image.node.title}
+          className={styles.image}
+          height={image.node.dimension.height}
+          key={image.node.system.uid}
+          src={image.node.url}
+          unoptimized
+          width={image.node.dimension.width}
+        />
+      ))}
+      <section className={styles.content}>
+        <header className="content-teaser__body-wrapper">
+          <h3 className={styles.heading}>
+            {title}
+          </h3>
+        </header>
+        <JsonToHtml
+          embeds={text.embedded_itemsConnection.edges}
+          nodes={text.json.children}
+          renderOptions={renderOptions}
+        />
+      </section>
+    </article>
+  )
+}

components/Current/Asides/Puff/puff.module.css

@@ -0,0 +1,47 @@
+.link {
+  display: inline-block;
+  transition: 200ms ease;
+}
+
+.link:hover {
+  text-decoration: none;
+  transform: scale(1.01);
+}
+
+.image {
+  height: auto;
+  object-fit: contain;
+  object-position: center;
+}
+
+.content {
+  padding: 20px 0px;
+}
+
+.heading {
+  color: #00838e;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 0;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.link:hover .heading {
+  text-decoration: underline;
+}
+
+.p {
+  color: #333;
+  line-height: 1.3;
+  margin-bottom: 0;
+  padding-top: 7px;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 950px) {
+  .heading {
+    font-size: 1.375rem;
+  }
+}

components/Current/Asides/Puff/renderOptions.tsx

@@ -0,0 +1,13 @@
+import styles from "./puff.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.p}>{next(node.children, embeds, fullRenderOptions)}</p>
+  },
+}

components/Current/Blocks.tsx

@@ -1,5 +1,4 @@
 import List from "./Blocks/List"
-import Preamble from "./Blocks/Preamble"
 import Puffs from "./Blocks/Puffs"
 import Text from "./Blocks/Text"
 
@@ -12,14 +11,12 @@ export default function Blocks({ blocks }: BlocksProps) {
   }
 
   return (
-    <>
+    <section id="mainbody_personalized">
       {blocks.map(block => {
         const type = block.__typename
         switch (type) {
           case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
             return <List key={block.__typename} {...block} />
-          case BlocksTypenameEnum.CurrentBlocksPageBlocksPreamble:
-            return <Preamble key={block.__typename} {...block} />
           case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
             return <Puffs key={block.__typename} {...block} />
           case BlocksTypenameEnum.CurrentBlocksPageBlocksText:
@@ -29,6 +26,7 @@ export default function Blocks({ blocks }: BlocksProps) {
             return null
         }
       })}
-    </>
+      <div id="mainarea_personalized"></div>
+    </section>
   )
 }

components/Current/Blocks/Preamble.tsx

@@ -1,7 +0,0 @@
-export default function Preamble() {
-  return (
-    <>
-
-    </>
-  )
-}

components/Current/Blocks/Text.tsx

@@ -1,32 +1,12 @@
-import { rteType } from "@/types/rte";
-
-import Image from "next/image";
+import JsonToHtml from "@/components/JsonToHtml";
 
 import type { TextProps } from "@/types/components/current/blocks/text"
 
 export default function Text({ text }: TextProps) {
-
   return (
-    <>
-      <pre>{JSON.stringify(text.content.json, null, 2)}</pre>
-      {text.content.json.children.map(block => {
-        switch (block.type) {
-          case rteType.reference: {
-            if (block.attrs.type === rteType.asset) {
-              // return (
-              //   <Image
-              //     alt={block.attrs.alt}
-              //     src={block.attrs["asset-link"]}
-              //   />
-              // )
-            }
-
-            return null
-          }
-          default:
-            break;
-        }
-      })}
-    </>
+    <JsonToHtml
+      embeds={text.content.embedded_itemsConnection.edges}
+      nodes={text.content.json.children}
+    />
   )
 }

components/Current/Footer/index.tsx

@@ -18,12 +18,13 @@ export default async function Footer({ lang }: LangParams) {
       <div className="global-footer__content">
         <h2 className="global-footer__content__heading">
           <Image
-            src={footerData.logoConnection.edges[0].node.url}
-            data-js="scandiclogoimg"
             alt={footerData.logoConnection.edges[0].node.title}
-            height="22"
-            width="102"
+            data-js="scandiclogoimg"
             data-nosvgsrc="/Static/img/scandic-logotype-white.png" // what here?
+            height="22"
+            src={footerData.logoConnection.edges[0].node.url}
+            unoptimized
+            width="102"
           />
           <span className="hidden--accessible">Scandic</span>
         </h2>
@@ -72,12 +73,13 @@ export default async function Footer({ lang }: LangParams) {
                         rel="noopener"
                       >
                         <Image
-                          height={45}
-                          width={135}
-                          src={footerData.app_downloads.app_store.imageConnection.edges[0].node.url}
                           alt={
                             footerData.app_downloads.app_store.imageConnection.edges[0].node.title
                           }
+                          height={45}
+                          src={footerData.app_downloads.app_store.imageConnection.edges[0].node.url}
+                          unoptimized
+                          width={135}
                         />
                       </a>
                     </td>
@@ -95,14 +97,15 @@ export default async function Footer({ lang }: LangParams) {
                         rel="noopener"
                       >
                         <Image
-                          height={45}
-                          width={135}
-                          src={
-                            footerData.app_downloads.google_play.imageConnection.edges[0].node.url
-                          }
                           alt={
                             footerData.app_downloads.google_play.imageConnection.edges[0].node.title
                           }
+                          height={45}
+                          src={
+                            footerData.app_downloads.google_play.imageConnection.edges[0].node.url
+                          }
+                          unoptimized
+                          width={135}
                         />
                       </a>
                     </td>
@@ -215,10 +218,11 @@ display: none;
           <div className="global-footer__trip-advisor">
             <h3 className="heading-5 u-uppercase">{footerData.trip_advisor.title}</h3>
             <Image
-              width={160}
+              alt="Trip Advisor logotype"
               height={24}
               src={footerData.trip_advisor.logoConnection.edges[0].node.url}
-              alt="Trip Advisor logotype"
+              unoptimized
+              width={160}
             />
           </div>
         </div>

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

components/Current/Section/index.tsx

@@ -0,0 +1,11 @@
+import styles from "./section.module.css"
+
+export default function Section({ children }: React.PropsWithChildren) {
+  return (
+    <div className={styles.wrapper}>
+      <section className={styles.section}>
+        {children}
+      </section>
+    </div>
+  )
+}

components/Current/Section/section.module.css

@@ -0,0 +1,25 @@
+.wrapper {
+  background-color: #fff;
+}
+
+.section {
+  box-sizing: content-box;
+  display: grid;
+  gap: 70px;
+  grid-template-columns: 2fr 1fr;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 20px 10px 5px;
+}
+
+@media screen and (min-width: 740px) {
+  .section {
+    padding: 30px 30px 15px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .section {
+    padding: 50px 30px 35px;
+  }
+}

components/Current/SubnavMobile.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link"
+
+import type { SubnavMobileProps } from "@/types/components/current/subnavMobile"
+
+export default async function SubnavMobile({ breadcrumbs, parent, title }: SubnavMobileProps) {
+  return (
+    <div className="subnav-mobile hidden-small hidden-medium hidden-large">
+      <nav className="u-flex">
+        <ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
+          {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="breadcrumb-list__body" key={breadcrumb.node.url}>
+              <Link href={breadcrumb.node.url}>
+                {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
+              </Link>
+            </li>
+          ))}
+          <li className="breadcrumb-list__body">
+            <span>{title}</span>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}