From 3a6b0f9f112b8a11e812543fbfa3042757c44e70 Mon Sep 17 00:00:00 2001
From: Alfonsina <alfonsina.l@gmail.com>
Date: Wed, 5 Jun 2024 17:52:35 -0400
Subject: [PATCH 1/4] feat: enhance Footer component with dynamic links coming
 from sanity in dynamic pages

---
 sanity/schemas/basics/link.ts     | 59 +++++++++++++++---------
 src/api/types.ts                  |  4 +-
 src/app/[slug]/client-page.tsx    |  6 +++
 src/app/[slug]/getPageDetails.gql |  2 +
 src/components/Footer/Footer.tsx  | 76 +++++++++++++++++++++++--------
 src/components/Link.tsx           |  2 +
 6 files changed, 107 insertions(+), 42 deletions(-)

diff --git a/sanity/schemas/basics/link.ts b/sanity/schemas/basics/link.ts
index 58c2ad3..d7f82cc 100644
--- a/sanity/schemas/basics/link.ts
+++ b/sanity/schemas/basics/link.ts
@@ -1,35 +1,50 @@
-import { defineField, defineType } from 'sanity'
+import { defineField, defineType } from "sanity";
 
 const targets = [
-  { title: 'Self', value: '_self' },
-  { title: 'Blank', value: '_blank' },
-  { title: 'Parent', value: '_parent' },
-  { title: 'Top', value: '_top' },
-]
+  { title: "Self", value: "_self" },
+  { title: "Blank", value: "_blank" },
+  { title: "Parent", value: "_parent" },
+  { title: "Top", value: "_top" },
+];
 
 const icons = [
-  { title: 'External', value: 'external' },
-]
+  { title: "External", value: "external" },
+  { title: "Github", value: "github" },
+  { title: "LinkedIn", value: "linkedin" },
+  { title: "Instagram", value: "instagram" },
+  { title: "Twitter", value: "twitter" },
+  { title: "Facebook", value: "facebook" },
+];
 
 const styles = [
-  { title: 'Link', value: 'link' },
-  { title: 'button', value: 'button' },
-]
+  { title: "Link", value: "link" },
+  { title: "button", value: "button" },
+];
 
 const link = defineType({
-  name: 'link',
-  type: 'document',
-  title: 'Link',
+  name: "link",
+  type: "document",
+  title: "Link",
   initialValue: {
-    target: '_self'
+    target: "_self",
   },
   fields: [
-    defineField({ name: 'url', type: 'string', }),
-    defineField({ name: 'text', type: 'string', }),
-    defineField({ name: 'target', type: 'string', options: { list: targets } }),
-    defineField({ name: 'icon', title: 'Icon', type: 'string', options: { list: icons } }),
-    defineField({ name: 'style', title: 'Style', type: 'string', options: { list: styles } }),
+    defineField({ name: "text", type: "string" }),
+    defineField({ name: "url", type: "string" }),
+    defineField({ name: "target", type: "string", options: { list: targets } }),
+    defineField({
+      name: "icon",
+      title: "Icon",
+      type: "string",
+      options: { list: icons },
+    }),
+    defineField({
+      name: "style",
+      title: "Style",
+      type: "string",
+      options: { list: styles },
+    }),
   ],
-})
+});
 
-export default link;
\ No newline at end of file
+export default link;
diff --git a/src/api/types.ts b/src/api/types.ts
index a4d92bb..f5cb134 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -1530,7 +1530,7 @@ export type GetPageDetailsQueryVariables = Exact<{
 }>;
 
 
-export type GetPageDetailsQuery = { __typename?: 'RootQuery', allPage: Array<{ __typename?: 'Page', _id: string | null, name: string | null, seoTitle: string | null, seoKeywords: string | null, seoDescription: string | null, slug: { __typename?: 'Slug', current: string | null } | null, seoImage: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, navbar: { __typename?: 'Navbar', links: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, footer: { __typename?: 'Footer', followLinks: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, sectionLinks: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, sections: Array<{ __typename: 'Card' } | { __typename: 'CustomInfo', slug: string | null, name: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null } | { __typename: 'Hero', heading: string | null, tagline: string | null, icon: string | null, actions: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, _key: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, customAttributes: Array<{ __typename?: 'CustomAttributes', name: string | null, value: string | null } | null> | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | { __typename: 'Row', rowType: string | null, title: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, children: Array<{ __typename: 'Card', title: string | null, showType: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null } | { __typename: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null> | null } | null> | null }> };
+export type GetPageDetailsQuery = { __typename?: 'RootQuery', allPage: Array<{ __typename?: 'Page', _id: string | null, name: string | null, seoTitle: string | null, seoKeywords: string | null, seoDescription: string | null, slug: { __typename?: 'Slug', current: string | null } | null, seoImage: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, navbar: { __typename?: 'Navbar', links: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, footer: { __typename?: 'Footer', followLinks: Array<{ __typename?: 'Link', _key: string | null, url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, sectionLinks: Array<{ __typename?: 'Link', _key: string | null, url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, sections: Array<{ __typename: 'Card' } | { __typename: 'CustomInfo', slug: string | null, name: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null } | { __typename: 'Hero', heading: string | null, tagline: string | null, icon: string | null, actions: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, _key: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, customAttributes: Array<{ __typename?: 'CustomAttributes', name: string | null, value: string | null } | null> | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | { __typename: 'Row', rowType: string | null, title: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, children: Array<{ __typename: 'Card', title: string | null, showType: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null } | { __typename: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null> | null } | null> | null }> };
 
 
 export const GetAllPagesDocument = gql`
@@ -1575,6 +1575,7 @@ export const GetPageDetailsDocument = gql`
     }
     footer {
       followLinks {
+        _key
         url
         text
         target
@@ -1582,6 +1583,7 @@ export const GetPageDetailsDocument = gql`
         style
       }
       sectionLinks {
+        _key
         url
         text
         target
diff --git a/src/app/[slug]/client-page.tsx b/src/app/[slug]/client-page.tsx
index f8e4db9..32b7b31 100644
--- a/src/app/[slug]/client-page.tsx
+++ b/src/app/[slug]/client-page.tsx
@@ -3,6 +3,7 @@ import { urlForImage } from "@/sanity/lib/image";
 import type { Image } from "sanity";
 
 import { Hero } from "@/sections/Hero/Hero";
+import { Footer } from "@/components/Footer/Footer";
 import { getMetaData, getViewports } from "@/lib/metadata";
 
 export const generateMetadata = () => getMetaData({});
@@ -10,6 +11,7 @@ export const generateMetadata = () => getMetaData({});
 export const generateViewport = getViewports;
 
 export default function Page({ page }: { page: PageType }) {
+  const footerData = page.footer;
   return (
     <div>
       {page.sections?.map((section, idx) => {
@@ -42,6 +44,10 @@ export default function Page({ page }: { page: PageType }) {
           );
         }
       })}
+      <Footer
+        followLinks={footerData?.followLinks}
+        sectionLinks={footerData?.sectionLinks}
+      />
     </div>
   );
 }
diff --git a/src/app/[slug]/getPageDetails.gql b/src/app/[slug]/getPageDetails.gql
index c81aab8..44f7c0d 100644
--- a/src/app/[slug]/getPageDetails.gql
+++ b/src/app/[slug]/getPageDetails.gql
@@ -28,6 +28,7 @@ query getPageDetails($input: String!) {
     }
     footer {
       followLinks {
+        _key
         url
         text
         target
@@ -35,6 +36,7 @@ query getPageDetails($input: String!) {
         style
       }
       sectionLinks {
+        _key
         url
         text
         target
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 6f24457..0ba1115 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,15 +1,38 @@
-import { ExternalLink } from "lucide-react";
+import { Link as LinkType } from "@/api/types";
+import { Maybe } from "graphql/jsutils/Maybe";
+import {
+  ExternalLink,
+  Facebook,
+  Github,
+  Instagram,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
 
-import { HeaderLink } from "@/components/Header/HeaderLink";
 import { Logo } from "@/components/Icons/Logo";
 import { Title } from "@/components/Icons/Title";
 import { Link } from "@/components/Link";
-import { footer, links } from "@/lib/data";
 import { theme } from "@/lib/theme";
 
-export function Footer() {
+interface FooterProps {
+  followLinks?: Maybe<Maybe<LinkType>[]>;
+  sectionLinks?: Maybe<Maybe<LinkType>[]>;
+}
+
+const socialMediaIcons: { [key: string]: React.ReactNode } = {
+  linkedin: <Linkedin strokeWidth={1} />,
+  instagram: <Instagram strokeWidth={1} />,
+  twitter: <Twitter strokeWidth={1} />,
+  facebook: <Facebook strokeWidth={1} />,
+  github: <Github strokeWidth={1} />,
+};
+
+export function Footer({ followLinks, sectionLinks }: FooterProps) {
+  console.log("followlinks", followLinks);
+  console.log("sectionLinks", sectionLinks);
   return (
-    <footer className="relative z-10 font-barlow text-white before:absolute before:inset-0 before:z-10 before:w-[80%] before:bg-gradient-to-r before:from-jsconf-yellow before:via-jsconf-yellow before:to-transparent before:opacity-10 before:content-[''] before:md:w-[60%] before:md:from-transparent before:md:via-jsconf-yellow">
+    <footer className="relative z-10 font-barlow text-white">
+      <div className="absolute inset-0 -z-10 w-[80%] bg-gradient-to-r from-jsconf-yellow via-jsconf-yellow to-transparent opacity-10 content-[''] md:w-[60%] md:from-transparent md:via-jsconf-yellow" />
       <div className="mx-6 flex flex-col before:top-0 before:h-0.5 before:w-full before:bg-gradient-to-r before:from-transparent before:from-10% before:via-jsconf-yellow before:via-50% before:to-transparent before:to-90% before:content-[''] lg:mx-auto lg:w-11/12 xl:w-8/12">
         <div className="flex w-full flex-col gap-8 py-14">
           <div className="grid grid-cols-1 gap-6 px-6 lg:grid-cols-8 lg:gap-8 lg:px-0">
@@ -23,25 +46,40 @@ export function Footer() {
               <div className="flex items-center text-jsconf-yellow">
                 <span>Siguenos: </span>
                 <div className="ml-2 flex items-center gap-1">
-                  {links.map((link) => (
-                    <HeaderLink key={link.id} link={link} />
-                  ))}
+                  {followLinks &&
+                    followLinks.map(
+                      (link) =>
+                        link && (
+                          <Link
+                            key={link._key}
+                            href={link.url || ""}
+                            target={link.target || "_blank"}
+                            variant={"transparent"}
+                          >
+                            {link.icon &&
+                              socialMediaIcons[link.icon?.toLowerCase()]}
+                          </Link>
+                        ),
+                    )}
                 </div>
               </div>
             </div>
             <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-2 lg:items-start">
               <p className="text-xl text-gray-400">Información</p>
-              {footer.map((link) => (
-                <a
-                  key={link.id}
-                  href={link.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="hover:text-jsconf-yellow"
-                >
-                  {link.name}
-                </a>
-              ))}
+              {sectionLinks &&
+                sectionLinks.map(
+                  (link) =>
+                    link && (
+                      <Link
+                        key={link._key}
+                        href={link.url || ""}
+                        target={link.target || "_blank"}
+                        variant={"link"}
+                      >
+                        {link.text && link.text}
+                      </Link>
+                    ),
+                )}
             </div>
             <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-4 lg:items-end">
               <div className="flex flex-col justify-end gap-2">
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 0d3d0d1..3148918 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -14,6 +14,8 @@ const linkVariants = cva(
         default: "bg-jsconf-yellow text-black hover:bg-[#C8BC4F]",
         outline:
           "border border-jsconf-yellow bg-stone-950 text-white hover:bg-stone-900",
+        link: "mb-0 w-auto p-0 text-base font-normal hover:text-jsconf-yellow",
+        transparent: "rounded-full p-2 hover:bg-[#EDE06033]",
       },
     },
     defaultVariants: {

From 87f0cbff7306f092687019ad3c6777e9f7ae0911 Mon Sep 17 00:00:00 2001
From: Alfonsina <alfonsina.l@gmail.com>
Date: Wed, 5 Jun 2024 18:05:18 -0400
Subject: [PATCH 2/4] chore(husky): add commitizen for easier creation of
 commit messages

---
 .husky/prepare-commit-msg |   1 +
 package-lock.json         | 547 ++++++++++++++++++++++++++++++++++++++
 package.json              |  10 +-
 3 files changed, 557 insertions(+), 1 deletion(-)
 create mode 100644 .husky/prepare-commit-msg

diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
new file mode 100644
index 0000000..1815ce3
--- /dev/null
+++ b/.husky/prepare-commit-msg
@@ -0,0 +1 @@
+exec < /dev/tty && npx cz --hook || true
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 17ba400..cfa4e9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,8 @@
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "autoprefixer": "^10.0.1",
+        "commitizen": "^4.3.0",
+        "cz-conventional-changelog": "^3.3.0",
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
         "eslint-config-prettier": "^9.1.0",
@@ -7497,6 +7499,15 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/auto-bind": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz",
@@ -7866,6 +7877,15 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/cachedir": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.3.0.tgz",
+      "integrity": "sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -8399,6 +8419,221 @@
         "node": ">=16"
       }
     },
+    "node_modules/commitizen": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/commitizen/-/commitizen-4.3.0.tgz",
+      "integrity": "sha512-H0iNtClNEhT0fotHvGV3E9tDejDeS04sN1veIebsKYGMuGscFaswRoYJKmT3eW85eIJAs0F28bG2+a/9wCOfPw==",
+      "dev": true,
+      "dependencies": {
+        "cachedir": "2.3.0",
+        "cz-conventional-changelog": "3.3.0",
+        "dedent": "0.7.0",
+        "detect-indent": "6.1.0",
+        "find-node-modules": "^2.1.2",
+        "find-root": "1.1.0",
+        "fs-extra": "9.1.0",
+        "glob": "7.2.3",
+        "inquirer": "8.2.5",
+        "is-utf8": "^0.2.1",
+        "lodash": "4.17.21",
+        "minimist": "1.2.7",
+        "strip-bom": "4.0.0",
+        "strip-json-comments": "3.1.1"
+      },
+      "bin": {
+        "commitizen": "bin/commitizen",
+        "cz": "bin/git-cz",
+        "git-cz": "bin/git-cz"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/commitizen/node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/commitizen/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/commitizen/node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/commitizen/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/commitizen/node_modules/inquirer": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.5.tgz",
+      "integrity": "sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.1",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.21",
+        "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
+        "run-async": "^2.4.0",
+        "rxjs": "^7.5.5",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/commitizen/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/commitizen/node_modules/minimist": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/commitizen/node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/commitizen/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/common-tags": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
@@ -8589,6 +8824,12 @@
         "node": ">=16"
       }
     },
+    "node_modules/conventional-commit-types": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-commit-types/-/conventional-commit-types-3.0.0.tgz",
+      "integrity": "sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==",
+      "dev": true
+    },
     "node_modules/conventional-commits-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz",
@@ -8858,6 +9099,97 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
       "integrity": "sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA=="
     },
+    "node_modules/cz-conventional-changelog": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz",
+      "integrity": "sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "commitizen": "^4.0.3",
+        "conventional-commit-types": "^3.0.0",
+        "lodash.map": "^4.5.1",
+        "longest": "^2.0.1",
+        "word-wrap": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@commitlint/load": ">6.1.1"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/cz-conventional-changelog/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9199,6 +9531,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+      "dev": true
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -9284,6 +9622,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/detect-indent": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -10361,6 +10708,18 @@
       "resolved": "https://registry.npmjs.org/exif-component/-/exif-component-1.0.1.tgz",
       "integrity": "sha512-FXnmK9yJYTa3V3G7DE9BRjUJ0pwXMICAxfbsAuKPTuSlFzMZhQbcvvwx0I8ofNJHxz3tfjze+whxcGpfklAWOQ=="
     },
+    "node_modules/expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+      "dev": true,
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -10696,6 +11055,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/find-node-modules": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/find-node-modules/-/find-node-modules-2.1.3.tgz",
+      "integrity": "sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==",
+      "dev": true,
+      "dependencies": {
+        "findup-sync": "^4.0.0",
+        "merge": "^2.1.1"
+      }
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -10711,6 +11086,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/findup-sync": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
+      "dev": true,
+      "dependencies": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^4.0.2",
+        "resolve-dir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -10900,6 +11290,30 @@
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
     },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fs-extra/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -11295,6 +11709,48 @@
         "node": ">=4"
       }
     },
+    "node_modules/global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "dev": true,
+      "dependencies": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -11672,6 +12128,18 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "node_modules/homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "dependencies": {
+        "parse-passwd": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -12638,6 +13106,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
+      "dev": true
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -12905,6 +13379,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonfile/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/jsonparse": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
@@ -13394,6 +13889,12 @@
       "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
       "dev": true
     },
+    "node_modules/lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -13640,6 +14141,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/longest": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz",
+      "integrity": "sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -13788,6 +14298,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/merge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz",
+      "integrity": "sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==",
+      "dev": true
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -14777,6 +15293,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -16116,6 +16641,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -18976,6 +19514,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
diff --git a/package.json b/package.json
index 9d32fae..6eedf99 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "lint:fix": "eslint ./src --cache --fix",
     "prettier": "prettier ./src --cache --check",
     "prettier:fix": "prettier ./src --cache --write",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "commit": "cz"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -60,6 +61,8 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.0.1",
+    "commitizen": "^4.3.0",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -79,5 +82,10 @@
   "lint-staged": {
     "src/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
     "src/*.{js,jsx,ts,tsx,css,md}": "prettier --write"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

From fbaab62acc70ff7b0371fbcc67ebc2a63cebe879 Mon Sep 17 00:00:00 2001
From: Alfonsina <alfonsina.l@gmail.com>
Date: Wed, 5 Jun 2024 18:36:15 -0400
Subject: [PATCH 3/4] feat(header): dinamically render header content from
 sanity

---
 src/app/[slug]/client-page.tsx       |  3 +++
 src/app/[slug]/getPageDetails.gql    |  1 +
 src/components/Footer/Footer.tsx     | 11 ++++++---
 src/components/Header/Header.tsx     | 17 ++++++++-----
 src/components/Header/HeaderLink.tsx | 37 ++++++++++++++--------------
 5 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/app/[slug]/client-page.tsx b/src/app/[slug]/client-page.tsx
index 32b7b31..b7aa917 100644
--- a/src/app/[slug]/client-page.tsx
+++ b/src/app/[slug]/client-page.tsx
@@ -4,6 +4,7 @@ import type { Image } from "sanity";
 
 import { Hero } from "@/sections/Hero/Hero";
 import { Footer } from "@/components/Footer/Footer";
+import { Header } from "@/components/Header/Header";
 import { getMetaData, getViewports } from "@/lib/metadata";
 
 export const generateMetadata = () => getMetaData({});
@@ -12,8 +13,10 @@ export const generateViewport = getViewports;
 
 export default function Page({ page }: { page: PageType }) {
   const footerData = page.footer;
+  const headerData = page.navbar;
   return (
     <div>
+      <Header links={headerData?.links} />
       {page.sections?.map((section, idx) => {
         if (section?.__typename == "Hero") {
           console.log("ATTRIBUTES", section.customAttributes);
diff --git a/src/app/[slug]/getPageDetails.gql b/src/app/[slug]/getPageDetails.gql
index 44f7c0d..eb4e4a1 100644
--- a/src/app/[slug]/getPageDetails.gql
+++ b/src/app/[slug]/getPageDetails.gql
@@ -19,6 +19,7 @@ query getPageDetails($input: String!) {
     }
     navbar {
       links {
+        _key
         url
         text
         target
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 0ba1115..f7a1b6d 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,5 +1,4 @@
-import { Link as LinkType } from "@/api/types";
-import { Maybe } from "graphql/jsutils/Maybe";
+import { Link as LinkType, Maybe } from "@/api/types";
 import {
   ExternalLink,
   Facebook,
@@ -54,7 +53,9 @@ export function Footer({ followLinks, sectionLinks }: FooterProps) {
                             key={link._key}
                             href={link.url || ""}
                             target={link.target || "_blank"}
-                            variant={"transparent"}
+                            variant={
+                              link.style === "button" ? "transparent" : "link"
+                            }
                           >
                             {link.icon &&
                               socialMediaIcons[link.icon?.toLowerCase()]}
@@ -74,7 +75,9 @@ export function Footer({ followLinks, sectionLinks }: FooterProps) {
                         key={link._key}
                         href={link.url || ""}
                         target={link.target || "_blank"}
-                        variant={"link"}
+                        variant={
+                          link.style === "button" ? "transparent" : "link"
+                        }
                       >
                         {link.text && link.text}
                       </Link>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 4653f29..7aee68d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,20 +1,25 @@
 import Link from "next/link";
+import { Link as LinkType, Maybe } from "@/api/types";
 
 import { HeaderLink } from "@/components/Header/HeaderLink";
 import { Logo } from "@/components/Icons/Logo";
-import { links } from "@/lib/data";
 import { theme } from "@/lib/theme";
 
-export function Header() {
+interface HeaderProps {
+  links?: Maybe<Maybe<LinkType>[]>;
+}
+
+export function Header({ links }: HeaderProps) {
   return (
-    <header className="container relative z-10 mx-auto flex h-20 max-w-[1136px] items-center justify-between p-4 text-jsconf-yellow">
+    <header className="container relative z-10 mx-auto flex h-20 max-w-[1136px] items-center justify-between p-4">
       <Link href="/">
         <Logo color={theme?.colors?.jsconfYellow} size="36" />
       </Link>
       <div className="flex items-center gap-6">
-        {links.map((link) => (
-          <HeaderLink key={link.id} link={link} />
-        ))}
+        {links &&
+          links.map(
+            (link) => link && <HeaderLink key={link._key} link={link} />,
+          )}
       </div>
     </header>
   );
diff --git a/src/components/Header/HeaderLink.tsx b/src/components/Header/HeaderLink.tsx
index 7b35f08..f18e7bc 100644
--- a/src/components/Header/HeaderLink.tsx
+++ b/src/components/Header/HeaderLink.tsx
@@ -1,23 +1,22 @@
-import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
+import { Link as LinkType, Maybe } from "@/api/types";
 
-export function HeaderLink({
-  link: { id, url },
-}: {
-  link: { id: string; url: string };
-}) {
+import { Link } from "../Link";
+
+interface HeaderLinkProps {
+  link: Maybe<Maybe<LinkType>>;
+}
+
+export function HeaderLink({ link }: HeaderLinkProps) {
   return (
-    <a
-      key={id}
-      id={id}
-      href={url}
-      className="rounded-full p-2 hover:bg-[#EDE06033]"
-      target="_blank"
-      rel="noreferrer"
-    >
-      {id == "linkedin" ? <Linkedin strokeWidth={1} /> : null}
-      {id == "instagram" ? <Instagram strokeWidth={1} /> : null}
-      {id == "twitter" ? <Twitter strokeWidth={1} /> : null}
-      {id == "facebook" ? <Facebook strokeWidth={1} /> : null}
-    </a>
+    link && (
+      <Link
+        href={link.url || ""}
+        target={link.target || "_blank"}
+        rel="noreferrer"
+        variant="link"
+      >
+        {link.text && link.text}
+      </Link>
+    )
   );
 }

From ce18a59d54d8551516ffcd02489a9c213ee95c6f Mon Sep 17 00:00:00 2001
From: Alfonsina <alfonsina.l@gmail.com>
Date: Thu, 6 Jun 2024 13:05:27 -0400
Subject: [PATCH 4/4] fix(footer): show static footer data in case followLinks
 and sectionLinks props don't exist

---
 src/components/Footer/Footer.tsx | 83 +++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index cc8cca1..334f864 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -11,8 +11,11 @@ import {
 import { Logo } from "@/components/Icons/Logo";
 import { Title } from "@/components/Icons/Title";
 import { Link } from "@/components/Link";
+import { footer, links } from "@/lib/data";
 import { theme } from "@/lib/theme";
 
+import { SocialLink } from "../SocialLink/SocialLink";
+
 interface FooterProps {
   followLinks?: Maybe<Maybe<LinkType>[]>;
   sectionLinks?: Maybe<Maybe<LinkType>[]>;
@@ -43,44 +46,58 @@ export function Footer({ followLinks, sectionLinks }: FooterProps) {
               <div className="flex items-center text-jsconf-yellow">
                 <span>Siguenos: </span>
                 <div className="ml-2 flex items-center gap-1">
-                  {followLinks &&
-                    followLinks.map(
-                      (link) =>
-                        link && (
-                          <Link
-                            key={link._key}
-                            href={link.url || ""}
-                            target={link.target || "_blank"}
-                            variant={
-                              link.style === "button" ? "transparent" : "link"
-                            }
-                          >
-                            {link.icon &&
-                              socialMediaIcons[link.icon?.toLowerCase()]}
-                          </Link>
-                        ),
-                    )}
+                  {followLinks
+                    ? followLinks.map(
+                        (link) =>
+                          link && (
+                            <Link
+                              key={link._key}
+                              href={link.url || ""}
+                              target={link.target || "_blank"}
+                              variant={
+                                link.style === "button" ? "transparent" : "link"
+                              }
+                            >
+                              {link.icon &&
+                                socialMediaIcons[link.icon?.toLowerCase()]}
+                            </Link>
+                          ),
+                      )
+                    : links.map((link) => (
+                        <SocialLink key={link.id} link={link} />
+                      ))}
                 </div>
               </div>
             </div>
             <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-2 lg:items-start">
               <p className="text-xl text-gray-400">Información</p>
-              {sectionLinks &&
-                sectionLinks.map(
-                  (link) =>
-                    link && (
-                      <Link
-                        key={link._key}
-                        href={link.url || ""}
-                        target={link.target || "_blank"}
-                        variant={
-                          link.style === "button" ? "transparent" : "link"
-                        }
-                      >
-                        {link.text && link.text}
-                      </Link>
-                    ),
-                )}
+              {sectionLinks
+                ? sectionLinks.map(
+                    (link) =>
+                      link && (
+                        <Link
+                          key={link._key}
+                          href={link.url || ""}
+                          target={link.target || "_blank"}
+                          variant={
+                            link.style === "button" ? "transparent" : "link"
+                          }
+                        >
+                          {link.text && link.text}
+                        </Link>
+                      ),
+                  )
+                : footer.map((item) => (
+                    <a
+                      key={item.id}
+                      href={item.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="hover:text-jsconf-yellow"
+                    >
+                      {item.name}
+                    </a>
+                  ))}
             </div>
             <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-4 lg:items-end">
               <div className="flex flex-col justify-end gap-2">