Skip to content

with UniformText #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: stable
Choose a base branch
from
Draft

with UniformText #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21f1961
feat: use UniformText
ilyasmez Apr 18, 2023
a4c0218
chore: update alpha
ilyasmez Apr 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions components/canvas-components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}
Expand Down
20 changes: 11 additions & 9 deletions components/canvas-components/RegisterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useUniformContext } from "@uniformdev/context-react";
import {
registerUniformComponent,
ComponentProps,
UniformText,
} from "@uniformdev/canvas-react";
import Splitter from "../atoms/Splitter";

Expand All @@ -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/)
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions components/canvas-components/Talk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
registerUniformComponent,
ComponentProps,
UniformText,
} from "@uniformdev/canvas-react";

export type TalkProps = ComponentProps<{
Expand All @@ -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>
);
Expand Down
8 changes: 5 additions & 3 deletions components/canvas-components/TalkList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
Expand Down
25 changes: 12 additions & 13 deletions components/canvas-components/WhyAttend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import {
registerUniformComponent,
ComponentProps,
UniformText,
} from "@uniformdev/canvas-react";

export const WhyAttendLoading = () => {
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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,
});
20 changes: 10 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.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",
Expand All @@ -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.18",
"autoprefixer": "^10.4.2",
"dotenv": "^10.0.0",
"npm-run-all": "^4.1.5",
Expand Down
8 changes: 8 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}