From 21f1961ee2a10984796a0538383c9bf2ef0e0dcb Mon Sep 17 00:00:00 2001
From: Ilyas Amezouar <ilyasa@uniform.dev>
Date: Tue, 18 Apr 2023 17:41:53 +0200
Subject: [PATCH 1/2] feat: use UniformText

---
 components/canvas-components/Hero.tsx         | 27 +++++++++++++++----
 components/canvas-components/RegisterForm.tsx | 20 +++++++-------
 components/canvas-components/Talk.tsx         | 16 +++++------
 components/canvas-components/TalkList.tsx     |  8 +++---
 components/canvas-components/WhyAttend.tsx    | 25 +++++++++--------
 package.json                                  | 20 +++++++-------
 styles/style.css                              |  8 ++++++
 7 files changed, 76 insertions(+), 48 deletions(-)

diff --git a/components/canvas-components/Hero.tsx b/components/canvas-components/Hero.tsx
index 0f1fe59..2dd704f 100644
--- a/components/canvas-components/Hero.tsx
+++ b/components/canvas-components/Hero.tsx
@@ -2,9 +2,21 @@ import Link from "next/link";
 import {
   registerUniformComponent,
   ComponentProps,
+  UniformText,
 } from "@uniformdev/canvas-react";
 import Splitter from "../atoms/Splitter";
 
+const highlightUniform = (value = "") => (
+  <span
+    dangerouslySetInnerHTML={{
+      __html: value.replace(
+        "Uniform",
+        '<span class="highlighted">Uniform</span>'
+      ),
+    }}
+  />
+);
+
 type HeroProps = ComponentProps<{
   title: string;
   text: string;
@@ -28,18 +40,23 @@ export function Hero({
             <p className="uppercase tracking-loose w-full">
               This is Uniform demo
             </p>
-            <h1
+            <UniformText
+              as="h1"
+              parameterId="title"
               className="my-4 text-5xl font-bold leading-tight"
-              dangerouslySetInnerHTML={{ __html: title }}
+              render={highlightUniform}
             />
-            <p
+            <UniformText
+              as="p"
+              parameterId="text"
+              isMultiline
               className="leading-normal text-2xl mb-8"
-              dangerouslySetInnerHTML={{ __html: text }}
             />
+
             {buttonText ? (
               <Link prefetch={false} href={buttonLink ? buttonLink : "#"}>
                 <button className="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg">
-                  {buttonText}
+                  <UniformText parameterId="buttonText" />
                 </button>
               </Link>
             ) : null}
diff --git a/components/canvas-components/RegisterForm.tsx b/components/canvas-components/RegisterForm.tsx
index 317210e..472c31d 100644
--- a/components/canvas-components/RegisterForm.tsx
+++ b/components/canvas-components/RegisterForm.tsx
@@ -5,6 +5,7 @@ import { useUniformContext } from "@uniformdev/context-react";
 import {
   registerUniformComponent,
   ComponentProps,
+  UniformText,
 } from "@uniformdev/canvas-react";
 import Splitter from "../atoms/Splitter";
 
@@ -24,11 +25,7 @@ export type RegisterProps = ComponentProps<{
   buttonText: string;
 }>;
 
-export function RegisterForm({
-  heading,
-  registeredText,
-  buttonText,
-}: RegisterProps) {
+export function RegisterForm({}: RegisterProps) {
   const [registered, setRegistered] = useState(
     typeof document !== "undefined"
       ? !!document.cookie.match(/unfrmconf_registered/)
@@ -59,15 +56,20 @@ export function RegisterForm({
                 }}
               />
             ) : (
-              <h1
+              <UniformText
+                as="h1"
+                parameterId="heading"
                 className="my-4 text-5xl font-bold leading-tight"
-                dangerouslySetInnerHTML={{ __html: heading }}
               />
             )}
             <form>
               {registered ? (
                 <>
-                  <p className="pb-16">{registeredText}</p>
+                  <UniformText
+                    as="p"
+                    parameterId="registeredText"
+                    className="pb-16"
+                  />
                   <Link
                     href="/"
                     className="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg"
@@ -81,7 +83,7 @@ export function RegisterForm({
                   onClick={onRegister}
                   className="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg"
                 >
-                  {buttonText}
+                  <UniformText parameterId="buttonText" />
                 </button>
               )}
             </form>
diff --git a/components/canvas-components/Talk.tsx b/components/canvas-components/Talk.tsx
index 225859b..18dc6e1 100644
--- a/components/canvas-components/Talk.tsx
+++ b/components/canvas-components/Talk.tsx
@@ -1,6 +1,7 @@
 import {
   registerUniformComponent,
   ComponentProps,
+  UniformText,
 } from "@uniformdev/canvas-react";
 
 export type TalkProps = ComponentProps<{
@@ -17,18 +18,17 @@ export const Talk = ({ title, description, audience }: TalkProps) => (
       </div>
     </div>
     <a href="#" className="flex flex-wrap no-underline hover:no-underline">
-      <div
+      <UniformText
+        as="div"
+        parameterId="title"
         className="w-full font-bold text-xl text-gray-800 px-6"
-        dangerouslySetInnerHTML={{
-          __html: title,
-        }}
       />
     </a>
-    <div
+    <UniformText
+      as="div"
+      parameterId="description"
+      isMultiline
       className="text-gray-800 px-6 pb-6 text-sm"
-      dangerouslySetInnerHTML={{
-        __html: description,
-      }}
     />
   </div>
 );
diff --git a/components/canvas-components/TalkList.tsx b/components/canvas-components/TalkList.tsx
index c318651..755c6d6 100644
--- a/components/canvas-components/TalkList.tsx
+++ b/components/canvas-components/TalkList.tsx
@@ -3,20 +3,22 @@ import {
   registerUniformComponent,
   ComponentProps,
   UniformSlot,
+  UniformText,
 } from "@uniformdev/canvas-react";
 
 export type TalkListProps = ComponentProps<{
   title: string;
 }>;
 
-function TalkList({ title }: TalkListProps) {
+function TalkList({}: TalkListProps) {
   return (
     <fieldset>
       <section className="bg-white border-b py-8">
         <div className="container mx-auto flex flex-wrap pt-4 pb-12">
-          <h1
+          <UniformText
+            as="h1"
+            parameterId="title"
             className="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800"
-            dangerouslySetInnerHTML={{ __html: title }}
           />
           <UniformSlot name="talks">
             {({ child, key }) => (
diff --git a/components/canvas-components/WhyAttend.tsx b/components/canvas-components/WhyAttend.tsx
index 4fdf799..2003308 100644
--- a/components/canvas-components/WhyAttend.tsx
+++ b/components/canvas-components/WhyAttend.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {
   registerUniformComponent,
   ComponentProps,
+  UniformText,
 } from "@uniformdev/canvas-react";
 
 export const WhyAttendLoading = () => {
@@ -19,12 +20,7 @@ export type WhyAttendProps = ComponentProps<{
   image: string;
 }>;
 
-export const WhyAttend = ({
-  title,
-  text,
-  image,
-  component,
-}: WhyAttendProps) => (
+export const WhyAttend = ({ image, component }: WhyAttendProps) => (
   <section className="bg-white border-b py-8">
     <div
       className="container mx-auto flex flex-wrap pt-4 pb-12"
@@ -37,7 +33,7 @@ export const WhyAttend = ({
         <div className="w-1/2">
           <img
             src={image}
-            alt={title}
+            alt="Conference audience"
             width={400}
             height={400}
             loading="lazy"
@@ -47,14 +43,17 @@ export const WhyAttend = ({
       ) : null}
       <div className="w-1/2">
         <div className="p-10">
-          <h2
+          <UniformText
+            as="h2"
+            parameterId="title"
             className="w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800"
-            dangerouslySetInnerHTML={{ __html: title }}
           />
           <hr />
-          <p
+          <UniformText
+            as="p"
+            parameterId="text"
+            isMultiline
             className="text-gray-800 p-10 whitespace-pre-line"
-            dangerouslySetInnerHTML={{ __html: text }}
           />
         </div>
       </div>
@@ -64,12 +63,12 @@ export const WhyAttend = ({
 
 registerUniformComponent({
   type: "whyattend",
-  variantId: 'whyattendleft',
+  variantId: "whyattendleft",
   component: WhyAttend,
 });
 
 registerUniformComponent({
   type: "whyattend",
-  variantId: 'whyattendright',
+  variantId: "whyattendright",
   component: WhyAttend,
 });
diff --git a/package.json b/package.json
index 7098fb5..cfbbbe8 100644
--- a/package.json
+++ b/package.json
@@ -42,15 +42,15 @@
   "dependencies": {
     "@analytics/google-analytics": "^1.0.5",
     "@react-hook/window-scroll": "^1.3.0",
-    "@uniformdev/canvas": "18.34.0",
-    "@uniformdev/canvas-next": "18.34.0",
-    "@uniformdev/canvas-react": "18.34.0",
-    "@uniformdev/context": "18.34.0",
-    "@uniformdev/context-devtools": "18.34.0",
-    "@uniformdev/context-gtag": "18.34.0",
-    "@uniformdev/context-next": "18.34.0",
-    "@uniformdev/context-react": "18.34.0",
-    "@uniformdev/project-map": "18.34.0",
+    "@uniformdev/canvas": "18.35.1-alpha.17",
+    "@uniformdev/canvas-next": "18.35.1-alpha.17",
+    "@uniformdev/canvas-react": "18.35.1-alpha.17",
+    "@uniformdev/context": "18.35.1-alpha.17",
+    "@uniformdev/context-devtools": "18.35.1-alpha.17",
+    "@uniformdev/context-gtag": "18.35.1-alpha.17",
+    "@uniformdev/context-next": "18.35.1-alpha.17",
+    "@uniformdev/context-react": "18.35.1-alpha.17",
+    "@uniformdev/project-map": "18.35.1-alpha.17",
     "analytics": "^0.8.1",
     "cookie": "^0.5.0",
     "next": "^13.1.6",
@@ -61,7 +61,7 @@
     "@types/cookie": "^0.4.1",
     "@types/node": "^16.3.3",
     "@types/react": "^18.0.26",
-    "@uniformdev/cli": "18.34.0",
+    "@uniformdev/cli": "18.35.1-alpha.17",
     "autoprefixer": "^10.4.2",
     "dotenv": "^10.0.0",
     "npm-run-all": "^4.1.5",
diff --git a/styles/style.css b/styles/style.css
index 6739242..8bccb75 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -9,3 +9,11 @@ body {
 .gradient {
   background: linear-gradient(90deg, #1d3557 0%, #7ad7da 100%);
 }
+
+.highlighted {
+  font-size: bold;
+  background: -webkit-linear-gradient(45deg, #00aaff, #a5c1ff, #adaeff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 1px #b2ddff;
+}

From a4c0218599e68909debea90b46879905153e6d52 Mon Sep 17 00:00:00 2001
From: Ilyas Amezouar <ilyasa@uniform.dev>
Date: Tue, 18 Apr 2023 18:09:31 +0200
Subject: [PATCH 2/2] chore: update alpha

---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index cfbbbe8..facd169 100644
--- a/package.json
+++ b/package.json
@@ -42,15 +42,15 @@
   "dependencies": {
     "@analytics/google-analytics": "^1.0.5",
     "@react-hook/window-scroll": "^1.3.0",
-    "@uniformdev/canvas": "18.35.1-alpha.17",
-    "@uniformdev/canvas-next": "18.35.1-alpha.17",
-    "@uniformdev/canvas-react": "18.35.1-alpha.17",
-    "@uniformdev/context": "18.35.1-alpha.17",
-    "@uniformdev/context-devtools": "18.35.1-alpha.17",
-    "@uniformdev/context-gtag": "18.35.1-alpha.17",
-    "@uniformdev/context-next": "18.35.1-alpha.17",
-    "@uniformdev/context-react": "18.35.1-alpha.17",
-    "@uniformdev/project-map": "18.35.1-alpha.17",
+    "@uniformdev/canvas": "18.35.1-alpha.18",
+    "@uniformdev/canvas-next": "18.35.1-alpha.18",
+    "@uniformdev/canvas-react": "18.35.1-alpha.18",
+    "@uniformdev/context": "18.35.1-alpha.18",
+    "@uniformdev/context-devtools": "18.35.1-alpha.18",
+    "@uniformdev/context-gtag": "18.35.1-alpha.18",
+    "@uniformdev/context-next": "18.35.1-alpha.18",
+    "@uniformdev/context-react": "18.35.1-alpha.18",
+    "@uniformdev/project-map": "18.35.1-alpha.18",
     "analytics": "^0.8.1",
     "cookie": "^0.5.0",
     "next": "^13.1.6",
@@ -61,7 +61,7 @@
     "@types/cookie": "^0.4.1",
     "@types/node": "^16.3.3",
     "@types/react": "^18.0.26",
-    "@uniformdev/cli": "18.35.1-alpha.17",
+    "@uniformdev/cli": "18.35.1-alpha.18",
     "autoprefixer": "^10.4.2",
     "dotenv": "^10.0.0",
     "npm-run-all": "^4.1.5",