Add canonical header

Signed-off-by: Marcos Candeia <[email protected]>
deco-sites · May 18, 2023 · dace577 · dace577
1 parent ed4b378
commit dace577
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 25 deletions.
diff --git a/.frsh/main.js b/.frsh/main.js
diff --git a/commerce/types.tsx b/commerce/types.tsx
@@ -0,0 +1,19 @@
+import type { ComponentFunc } from "$live/engine/block.ts";
+
+/**
+ * @title The canonical props of a component.
+ */
+export type CanonicalProps<T> = T & {
+  Layout: ComponentFunc<T>;
+};
+
+/**
+ * The default implementation of a canonical component.
+ * @param the canonical props
+ */
+export function Canonical<TProps>(
+  props: CanonicalProps<TProps>,
+) {
+  const { Layout } = props;
+  return <Layout {...props} />;
+}
diff --git a/import_map.json b/import_map.json
@@ -1,7 +1,7 @@
 {
   "imports": {
     "deco-sites/std/": "./",
-    "$live/": "https://denopkg.com/deco-cx/live@1.4.4/",
+    "$live/": "https://denopkg.com/deco-cx/live@acd4cddd20437b64c4253d3c4c84face77718347/",
     "partytown/": "https://deno.land/x/[email protected]/",
     "$fresh/": "https://denopkg.com/deco-cx/[email protected]/",
     "preact": "https://esm.sh/[email protected]",

diff --git a/live.gen.ts b/live.gen.ts
@@ -41,13 +41,14 @@ import * as $$$1 from "./loaders/vtex/legacy/productDetailsPage.ts";
 import * as $$$2 from "./loaders/vtex/legacy/productListingPage.ts";
 import * as $$$3 from "./loaders/vtex/legacy/relatedProductsLoader.ts";
 import * as $$$4 from "./loaders/vtex/wishlist.ts";
-import * as $$$5 from "./loaders/vtex/navbar.ts";
-import * as $$$6 from "./loaders/vtex/intelligentSearch/productList.ts";
-import * as $$$7 from "./loaders/vtex/intelligentSearch/productDetailsPage.ts";
-import * as $$$8 from "./loaders/vtex/intelligentSearch/productListingPage.ts";
-import * as $$$9 from "./loaders/vtex/intelligentSearch/suggestions.ts";
-import * as $$$10 from "./loaders/vtex/cart.ts";
-import * as $$$11 from "./loaders/vtex/user.ts";
+import * as $$$5 from "./loaders/vtex/components/myHeader.tsx";
+import * as $$$6 from "./loaders/vtex/navbar.ts";
+import * as $$$7 from "./loaders/vtex/intelligentSearch/productList.ts";
+import * as $$$8 from "./loaders/vtex/intelligentSearch/productDetailsPage.ts";
+import * as $$$9 from "./loaders/vtex/intelligentSearch/productListingPage.ts";
+import * as $$$10 from "./loaders/vtex/intelligentSearch/suggestions.ts";
+import * as $$$11 from "./loaders/vtex/cart.ts";
+import * as $$$12 from "./loaders/vtex/user.ts";
 import * as $$$$0 from "./routes/404.tsx";
 import * as $$$$1 from "./routes/_app.tsx";
 import * as $$$$$$$$0 from "./sections/configYourViews.global.tsx";
@@ -57,9 +58,10 @@ import * as $$$$$$$$3 from "./sections/SEOPLP.tsx";
 import * as $$$$$$$$4 from "./sections/configOCC.global.tsx";
 import * as $$$$$$$$5 from "./sections/Analytics.tsx";
 import * as $$$$$$$$6 from "./sections/configShopify.global.tsx";
-import * as $$$$$$$$7 from "./sections/configVNDA.global.tsx";
-import * as $$$$$$$$8 from "./sections/configVTEX.global.tsx";
-import * as $$$$$$$$9 from "./sections/SEOPDP.tsx";
+import * as $$$$$$$$7 from "./sections/Header.tsx";
+import * as $$$$$$$$8 from "./sections/configVNDA.global.tsx";
+import * as $$$$$$$$9 from "./sections/configVTEX.global.tsx";
+import * as $$$$$$$$10 from "./sections/SEOPDP.tsx";
 import * as $$$$$$$$$$$0 from "./actions/vtex/notifyme.ts";
 import * as $$$$$$$$$$$1 from "./actions/vtex/cart/updateCoupons.ts";
 import * as $$$$$$$$$$$2 from "./actions/vtex/cart/updateAttachment.ts";
@@ -153,17 +155,18 @@ const manifest = {
   "loaders": {
     "$live/loaders/workflows/events.ts": i1$0,
     "$live/loaders/workflows/get.ts": i1$1,
-    "deco-sites/std/loaders/vtex/cart.ts": $$$10,
-    "deco-sites/std/loaders/vtex/intelligentSearch/productDetailsPage.ts": $$$7,
-    "deco-sites/std/loaders/vtex/intelligentSearch/productList.ts": $$$6,
-    "deco-sites/std/loaders/vtex/intelligentSearch/productListingPage.ts": $$$8,
-    "deco-sites/std/loaders/vtex/intelligentSearch/suggestions.ts": $$$9,
+    "deco-sites/std/loaders/vtex/cart.ts": $$$11,
+    "deco-sites/std/loaders/vtex/components/myHeader.tsx": $$$5,
+    "deco-sites/std/loaders/vtex/intelligentSearch/productDetailsPage.ts": $$$8,
+    "deco-sites/std/loaders/vtex/intelligentSearch/productList.ts": $$$7,
+    "deco-sites/std/loaders/vtex/intelligentSearch/productListingPage.ts": $$$9,
+    "deco-sites/std/loaders/vtex/intelligentSearch/suggestions.ts": $$$10,
     "deco-sites/std/loaders/vtex/legacy/productDetailsPage.ts": $$$1,
     "deco-sites/std/loaders/vtex/legacy/productList.ts": $$$0,
     "deco-sites/std/loaders/vtex/legacy/productListingPage.ts": $$$2,
     "deco-sites/std/loaders/vtex/legacy/relatedProductsLoader.ts": $$$3,
-    "deco-sites/std/loaders/vtex/navbar.ts": $$$5,
-    "deco-sites/std/loaders/vtex/user.ts": $$$11,
+    "deco-sites/std/loaders/vtex/navbar.ts": $$$6,
+    "deco-sites/std/loaders/vtex/user.ts": $$$12,
     "deco-sites/std/loaders/vtex/wishlist.ts": $$$4,
   },
   "routes": {
@@ -188,11 +191,12 @@ const manifest = {
     "deco-sites/std/sections/configButterCMS.global.tsx": $$$$$$$$1,
     "deco-sites/std/sections/configOCC.global.tsx": $$$$$$$$4,
     "deco-sites/std/sections/configShopify.global.tsx": $$$$$$$$6,
-    "deco-sites/std/sections/configVNDA.global.tsx": $$$$$$$$7,
-    "deco-sites/std/sections/configVTEX.global.tsx": $$$$$$$$8,
+    "deco-sites/std/sections/configVNDA.global.tsx": $$$$$$$$8,
+    "deco-sites/std/sections/configVTEX.global.tsx": $$$$$$$$9,
     "deco-sites/std/sections/configYourViews.global.tsx": $$$$$$$$0,
+    "deco-sites/std/sections/Header.tsx": $$$$$$$$7,
     "deco-sites/std/sections/SEO.tsx": $$$$$$$$2,
-    "deco-sites/std/sections/SEOPDP.tsx": $$$$$$$$9,
+    "deco-sites/std/sections/SEOPDP.tsx": $$$$$$$$10,
     "deco-sites/std/sections/SEOPLP.tsx": $$$$$$$$3,
   },
   "actions": {

diff --git a/loaders/vtex/components/myHeader.tsx b/loaders/vtex/components/myHeader.tsx
@@ -0,0 +1,12 @@
+import {
+  Layout,
+  Props as HeaderProps,
+} from "deco-sites/std/sections/Header.tsx";
+
+function MyHeaderLayout({ logo }: HeaderProps) {
+  return <div>This is a {logo}</div>;
+}
+
+export default function MyHeader(): Layout {
+  return MyHeaderLayout;
+}
diff --git a/schemas.gen.json b/schemas.gen.json
@@ -47,6 +47,7 @@
               "$live/loaders/workflows/events.ts",
               "$live/loaders/workflows/get.ts",
               "deco-sites/std/loaders/vtex/cart.ts",
+              "deco-sites/std/loaders/vtex/components/myHeader.tsx",
               "deco-sites/std/loaders/vtex/intelligentSearch/productDetailsPage.ts",
               "deco-sites/std/loaders/vtex/intelligentSearch/productList.ts",
               "deco-sites/std/loaders/vtex/intelligentSearch/productListingPage.ts",
@@ -76,6 +77,7 @@
               "deco-sites/std/sections/configVNDA.global.tsx",
               "deco-sites/std/sections/configVTEX.global.tsx",
               "deco-sites/std/sections/configYourViews.global.tsx",
+              "deco-sites/std/sections/Header.tsx",
               "deco-sites/std/sections/SEO.tsx",
               "deco-sites/std/sections/SEOPDP.tsx",
               "deco-sites/std/sections/SEOPLP.tsx",
@@ -5969,6 +5971,32 @@
         }
       ]
     },
+    "ZGVjby1jeC9saXZlL2VuZ2luZS9ibG9jay50cw==@ComponentFunc": {
+      "anyOf": [
+        {
+          "$ref": "#/definitions/Resolvable"
+        },
+        {
+          "title": "deco-cx/live/engine/block.ts@ComponentFunc"
+        },
+        {
+          "title": "deco-sites/std/loaders/vtex/components/myHeader.tsx",
+          "type": "object",
+          "required": [
+            "__resolveType"
+          ],
+          "properties": {
+            "__resolveType": {
+              "type": "string",
+              "enum": [
+                "deco-sites/std/loaders/vtex/components/myHeader.tsx"
+              ],
+              "default": "deco-sites/std/loaders/vtex/components/myHeader.tsx"
+            }
+          }
+        }
+      ]
+    },
     "ZGVjby1zaXRlcy9zdGQvcGFja3MvdnRleC9sb2FkZXJzL2ludGVsbGlnZW50U2VhcmNoL3Byb2R1Y3REZXRhaWxzUGFnZS50cw==@Props": {
       "type": "object",
       "properties": {
@@ -6937,6 +6965,24 @@
       ],
       "title": "deco-sites/std/commerce/butterCMS/client.ts@ConfigButterCMS"
     },
+    "ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvSGVhZGVyLnRzeA==@Props": {
+      "type": "object",
+      "properties": {
+        "logo": {
+          "type": "string",
+          "title": "Logo"
+        },
+        "Layout": {
+          "$ref": "#/definitions/ZGVjby1jeC9saXZlL2VuZ2luZS9ibG9jay50cw==@ComponentFunc",
+          "title": " Layout"
+        }
+      },
+      "required": [
+        "logo",
+        "Layout"
+      ],
+      "title": "deco-sites/std/sections/Header.tsx@Props"
+    },
     "ZGVjby1zaXRlcy9zdGQvY29tcG9uZW50cy9zZW8vU0VPQmFzZS50c3g=@Props": {
       "type": "object",
       "properties": {
@@ -7366,7 +7412,7 @@
       ],
       "title": "WorkflowRef"
     },
-    "ZGVjby1jeC9saXZlL2FjdGlvbnMvd29ya2Zsb3dzL3N0YXJ0LnRz@WorkflowRef|ce8a781f5f6005ca66fa5203d86e259e": {
+    "ZGVjby1jeC9saXZlL2FjdGlvbnMvd29ya2Zsb3dzL3N0YXJ0LnRz@WorkflowRef|ef3f4b831bfbc970ac13921b6e55c842": {
       "anyOf": [
         {
           "$ref": "#/definitions/ZGVjby1jeC9saXZlL2FjdGlvbnMvd29ya2Zsb3dzL3N0YXJ0LnRz@WorkflowRef"
@@ -7384,13 +7430,13 @@
           ]
         }
       ],
-      "title": "WorkflowRef|ce8a781f5f6005ca66fa5203d86e259e"
+      "title": "WorkflowRef|ef3f4b831bfbc970ac13921b6e55c842"
     },
     "ZGVjby1jeC9saXZlL2FjdGlvbnMvd29ya2Zsb3dzL3N0YXJ0LnRz@Props": {
       "type": "object",
       "properties": {
         "workflow": {
-          "$ref": "#/definitions/ZGVjby1jeC9saXZlL2FjdGlvbnMvd29ya2Zsb3dzL3N0YXJ0LnRz@WorkflowRef|ce8a781f5f6005ca66fa5203d86e259e",
+          "$ref": "#/definitions/ZGVjby1jeC9saXZlL2FjdGlvbnMvd29ya2Zsb3dzL3N0YXJ0LnRz@WorkflowRef|ef3f4b831bfbc970ac13921b6e55c842",
           "title": "Workflow"
         },
         "id": {
@@ -8548,6 +8594,22 @@
         }
       }
     },
+    "ZGVjby1zaXRlcy9zdGQvbG9hZGVycy92dGV4L2NvbXBvbmVudHMvbXlIZWFkZXIudHN4": {
+      "title": "deco-sites/std/loaders/vtex/components/myHeader.tsx",
+      "type": "object",
+      "required": [
+        "__resolveType"
+      ],
+      "properties": {
+        "__resolveType": {
+          "type": "string",
+          "enum": [
+            "deco-sites/std/loaders/vtex/components/myHeader.tsx"
+          ],
+          "default": "deco-sites/std/loaders/vtex/components/myHeader.tsx"
+        }
+      }
+    },
     "ZGVjby1zaXRlcy9zdGQvbG9hZGVycy92dGV4L2ludGVsbGlnZW50U2VhcmNoL3Byb2R1Y3REZXRhaWxzUGFnZS50cw==": {
       "title": "VTEX product details page - Intelligent Search",
       "description": "Works on routes of type /:slug/p",
@@ -9163,6 +9225,27 @@
         }
       }
     },
+    "ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvSGVhZGVyLnRzeA==": {
+      "title": "deco-sites/std/sections/Header.tsx",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvSGVhZGVyLnRzeA==@Props"
+        }
+      ],
+      "required": [
+        "__resolveType"
+      ],
+      "properties": {
+        "__resolveType": {
+          "type": "string",
+          "enum": [
+            "deco-sites/std/sections/Header.tsx"
+          ],
+          "default": "deco-sites/std/sections/Header.tsx"
+        }
+      }
+    },
     "ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvU0VPLnRzeA==": {
       "title": "deco-sites/std/sections/SEO.tsx",
       "type": "object",
@@ -10005,6 +10088,9 @@
         {
           "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvbG9hZGVycy92dGV4L2NhcnQudHM="
         },
+        {
+          "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvbG9hZGVycy92dGV4L2NvbXBvbmVudHMvbXlIZWFkZXIudHN4"
+        },
         {
           "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvbG9hZGVycy92dGV4L2ludGVsbGlnZW50U2VhcmNoL3Byb2R1Y3REZXRhaWxzUGFnZS50cw=="
         },
@@ -10124,6 +10210,9 @@
         {
           "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvY29uZmlnWW91clZpZXdzLmdsb2JhbC50c3g="
         },
+        {
+          "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvSGVhZGVyLnRzeA=="
+        },
         {
           "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvU0VPLnRzeA=="
         },

diff --git a/sections/Header.tsx b/sections/Header.tsx
@@ -0,0 +1,13 @@
+import type { ComponentFunc } from "$live/engine/block.ts";
+import { Canonical } from "deco-sites/std/commerce/types.tsx";
+
+export type Layout = ComponentFunc<Props>;
+
+export interface Props {
+  logo: string;
+  Layout: Layout;
+}
+
+export default function Header(props: Props) {
+  return <Canonical {...props} />;
+}