Merge pull request #148 from deco-sites/feat/improve-perf

feat: 90+ page speed 🚀 ⚡ 🎉

components/footer/Footer.tsx

@@ -1,5 +1,4 @@
 import BackToTop from "$store/components/footer/BackToTop.tsx";
-import ColorClasses from "$store/components/footer/ColorClasses.tsx";
 import Divider from "$store/components/footer/Divider.tsx";
 import ExtraLinks from "$store/components/footer/ExtraLinks.tsx";
 import FooterItems from "$store/components/footer/FooterItems.tsx";
@@ -9,6 +8,7 @@ import PaymentMethods from "$store/components/footer/PaymentMethods.tsx";
 import RegionSelector from "$store/components/footer/RegionSelector.tsx";
 import Social from "$store/components/footer/Social.tsx";
 import Newsletter from "$store/islands/Newsletter.tsx";
+import { clx } from "$store/sdk/clx.ts";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import PoweredByDeco from "apps/website/components/PoweredByDeco.tsx";
 
@@ -111,6 +111,14 @@ export interface Props {
   layout?: Layout;
 }
 
+const LAYOUT = {
+  "Primary": "bg-primary text-primary-content",
+  "Secondary": "bg-secondary text-secondary-content",
+  "Accent": "bg-accent text-accent-content",
+  "Base 100": "bg-base-100 text-base-content",
+  "Base 100 inverted": "bg-base-content text-base-100",
+};
+
 function Footer({
   logo,
   newsletter = {
@@ -214,9 +222,10 @@ function Footer({
 
   return (
     <footer
-      class={`w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10 ${
-        ColorClasses(layout)
-      }`}
+      class={clx(
+        "w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10",
+        LAYOUT[layout?.backgroundColor ?? "Primary"],
+      )}
     >
       <div class="lg:container mx-6 lg:mx-auto">
         {(!layout?.variation || layout?.variation == "Variation 1") && (

components/footer/Newsletter.tsx

@@ -1,5 +1,6 @@
-import { useSignal } from "@preact/signals";
 import { invoke } from "$store/runtime.ts";
+import { clx } from "$store/sdk/clx.ts";
+import { useSignal } from "@preact/signals";
 import type { JSX } from "preact";
 
 export interface Form {
@@ -44,11 +45,10 @@ function Newsletter(
 
   return (
     <div
-      class={`flex ${
-        tiled
-          ? "flex-col gap-4 lg:flex-row lg:w-full lg:justify-between"
-          : "flex-col gap-4"
-      }`}
+      class={clx(
+        "flex flex-col gap-4",
+        tiled && "lg:flex-row lg:w-full lg:justify-between",
+      )}
     >
       <div class="flex flex-col gap-4">
         {content?.title && (

components/ui/Button.tsx

@@ -21,7 +21,7 @@ const Button = forwardRef<HTMLButtonElement, Props>(({
     {...props}
     className={`btn no-animation ${_class}`}
     disabled={disabled || loading}
-    aria-label={ariaLabel}
+    aria-label={ariaLabel || props["aria-label"]}
     type={type}
     ref={ref}
   >

components/ui/SectionHeader.tsx

@@ -1,3 +1,5 @@
+import { clx } from "$store/sdk/clx.ts";
+
 export interface Props {
   title?: string;
   fontSize?: "Small" | "Normal" | "Large";
@@ -25,30 +27,27 @@ function Header(props: Props) {
             {props.title &&
               (
                 <h1
-                  class={`text-2xl font-light leading-8 lg:leading-10
-                  ${
+                  class={clx(
+                    "text-2xl font-light leading-8 lg:leading-10",
                     props.colorReverse
                       ? "text-primary-content"
-                      : "text-base-content"
-                  }
-                  ${fontSizeClasses[props.fontSize || "Normal"]}
-                `}
+                      : "text-base-content",
+                    fontSizeClasses[props.fontSize || "Normal"],
+                  )}
                 >
                   {props.title}
                 </h1>
               )}
             {props.description &&
               (
                 <h2
-                  class={`
-                  leading-6 lg:leading-8
-                  ${
+                  class={clx(
+                    "leading-6 lg:leading-8",
                     props.colorReverse
                       ? "text-primary-content"
-                      : "text-base-content"
-                  }
-                  ${fontSizeClasses[props.fontSize || "Normal"]}
-                `}
+                      : "text-base-content",
+                    fontSizeClasses[props.fontSize || "Normal"],
+                  )}
                 >
                   {props.description}
                 </h2>

deno.json

@@ -1,8 +1,8 @@
 {
   "imports": {
     "$store/": "./",
-    "deco/": "https://denopkg.com/deco-cx/deco@1.54.0/",
-    "apps/": "https://denopkg.com/deco-cx/apps@0.33.0/",
+    "deco/": "https://denopkg.com/deco-cx/deco@1.55.0/",
+    "apps/": "https://denopkg.com/deco-cx/apps@0.34.0/",
     "$fresh/": "https://deno.land/x/fresh@1.6.3/",
     "preact": "https://esm.sh/preact@10.19.2",
     "preact/": "https://esm.sh/preact@10.19.2/",