Update client version to match kernel ouroboros (#24)

Author: gabesullice

src/component/cards/cards.jsx

@@ -1,22 +1,20 @@
 import React from "react";
-import './cards.pcss';
+import "./cards.pcss";
 
-const Cards = ({ cards }) => {
-  return (
-    <div className="cards">
-      {cards.map(({ title, teaserIcon, teaserText, links }, i) => (
-        <a href={links.canonical.href}>
-          <div className="card">
-            <div className={`card-icon ${teaserIcon}`}></div>
-            <div className="card-content">
-              <div className="card-title">{title}</div>
-              <div className="card-description">{teaserText}</div>
-            </div>
+const Cards = ({ cards }) => (
+  <div className="cards">
+    {cards.map(({ id, title, teaserIcon, teaserText, links }) => (
+      <a key={id} href={links.canonical.href}>
+        <div className="card">
+          <div className={`card-icon ${teaserIcon}`}></div>
+          <div className="card-content">
+            <div className="card-title">{title}</div>
+            <div className="card-description">{teaserText}</div>
           </div>
-        </a>
-      ))}
-    </div>
-  );
-};
+        </div>
+      </a>
+    ))}
+  </div>
+);
 
 export default Cards;

src/component/nav/nav.jsx

@@ -11,11 +11,13 @@ const Nav = ({ menu }) => {
     <div className="navigation">
       <ul className="menu">
         {menu.items.map(({ href, title }, i) => (
-          <li key={i}><a href={ href }>{ title }</a></li>
+          <li key={i}>
+            <a href={href}>{title}</a>
+          </li>
         ))}
       </ul>
     </div>
-  )
+  );
 };
 
 export default Nav;

src/component/short-cards/short-cards.jsx

@@ -4,26 +4,22 @@ import "./short-cards.pcss";
 /**
  * Nav renders a navigation resource.
  */
-const ShortCards = ({ cards }) => {
-  return (
-    <div className="short-cards">
-      {cards.map(({ id, title, teaserIcon, teaserText, links }, i) => {
-        return (
-          <a
-            key={id}
-            className={`short-card-link`}
-            title={title}
-            href={links.canonical.href}
-          >
-            <div className="short-card">
-              <div className={`short-card-icon ${teaserIcon}`}></div>
-              <div className="short-card-title">{title}</div>
-            </div>
-          </a>
-        );
-      })}
-    </div>
-  );
-};
+const ShortCards = ({ cards }) => (
+  <div className="short-cards">
+    {cards.map(({ id, title, teaserIcon, links }) => (
+      <a
+        key={id}
+        className={`short-card-link`}
+        title={title}
+        href={links.canonical.href}
+      >
+        <div className="short-card">
+          <div className={`short-card-icon ${teaserIcon}`}></div>
+          <div className="short-card-title">{title}</div>
+        </div>
+      </a>
+    ))}
+  </div>
+);
 
 export default ShortCards;

src/index.html

@@ -8,12 +8,12 @@
     <script type="importmap">
       {
         "imports": {
-          "@applura/client": "https://cdn.applura.com/dist/js/client/v2.js"
+          "@applura/client": "https://cdn.applura.com/dist/js/client/v4.js"
         }
       }
     </script>
     <!-- Preload the official Applura client module for increased performance. -->
-    <link rel="preload" as="script" href="https://cdn.applura.com/dist/js/client/v2.js" crossorigin/>
+    <link rel="preload" as="script" href="https://cdn.applura.com/dist/js/client/v4.js" crossorigin/>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

src/page/basic-page/basic-page.jsx

@@ -14,17 +14,16 @@ import "./basic-page.pcss";
 const BasicPage = ({ fields }) => {
   // Extract the required fields from the resource fields.
   const { mainMenu, title, created, relatedLinks, body, links } = fields;
-  const cards = relatedLinks ? Object.values(relatedLinks) : [];
 
   return (
     <div id="basic-page">
       <Header menu={mainMenu} links={links}></Header>
       <main>
         <section className="basic-page-content">
-          {cards && cards.length > 0 ? (
+          {relatedLinks && relatedLinks.length > 0 ? (
             <div className="sidebar">
               <div className="sidebar-title">Dive Deeper</div>
-              <ShortCards cards={cards}></ShortCards>
+              <ShortCards cards={relatedLinks}></ShortCards>
             </div>
           ) : null}
           <div className="content">