270 lines
10 KiB
TypeScript
270 lines
10 KiB
TypeScript
import React from "react";
|
|
|
|
import { CAL_URL, LOGO } from "./constants";
|
|
|
|
// Ensures tw prop is typed.
|
|
declare module "react" {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
interface HTMLAttributes<T> {
|
|
tw?: string;
|
|
}
|
|
}
|
|
|
|
export interface MeetingImageProps {
|
|
title: string;
|
|
profile: { name: string; image?: string | null };
|
|
users?: { name: string; username: string }[];
|
|
}
|
|
|
|
export interface AppImageProps {
|
|
name: string;
|
|
description: string;
|
|
slug: string;
|
|
}
|
|
|
|
export interface GenericImageProps {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export interface ScreenshotImageProps {
|
|
image: string;
|
|
/**
|
|
* Fallback image to use if the image prop fails to load.
|
|
*/
|
|
fallbackImage: string;
|
|
}
|
|
|
|
interface WrapperProps {
|
|
children: React.ReactNode;
|
|
variant?: "light" | "dark";
|
|
rotateBackground?: boolean;
|
|
}
|
|
|
|
const joinMultipleNames = (names: string[] = []) => {
|
|
const lastName = names.pop();
|
|
return `${names.length > 0 ? `${names.join(", ")} & ${lastName}` : lastName}`;
|
|
};
|
|
|
|
/**
|
|
* Test urls:
|
|
* 1. 1 user http://localhost:3000/api/social/og/image?type=meeting&title=super%20long%20event%20title%20for%20testing%20purposes&meetingProfileName=Pro%20Example&meetingImage=http://localhost:3000/pro/avatar.png&names=Pro%20Example&usernames=pro
|
|
* 2. Team event (collection), lot's of people, long title http://localhost:3000/api/social/og/image?type=meeting&title=Getting%20to%20know%20us%20and%20have%20a%20beer%20together&meetingProfileName=Seeded%20Team&names=Team%20Pro%20Example%202&names=Team%20Pro%20Example%203&names=Team%20Pro%20Example%204&names=Team%20Free%20Example&names=Team%20Pro%20Example&usernames=teampro2&usernames=teampro3&usernames=teampro4&usernames=teamfree&usernames=teampro
|
|
* 3. Team event of 2 (collection), http://localhost:3000/api/social/og/image?type=meeting&title=Getting%20to%20know%20each%20other&meetingProfileName=Seeded%20Team&names=Team%20Pro%20Example%202&names=Team%20Pro%20Example%203&usernames=teampro2&usernames=teampro3
|
|
* 4. Team event (round robin) http://localhost:3000/api/social/og/image?type=meeting&title=Round%20Robin%20Seeded%20Team%20Event&meetingProfileName=Seeded%20Team
|
|
* 5. Dynamic collective (2 persons) http://localhost:3000/api/social/og/image?type=meeting&title=15min&meetingProfileName=Team%20Pro%20Example,%20Pro%20Example&names=Team%20Pro%20Example&names=Pro%20Example&usernames=teampro&usernames=pro
|
|
*/
|
|
export const constructMeetingImage = (
|
|
{ title, users = [], profile }: MeetingImageProps,
|
|
encodeUri = true
|
|
): string => {
|
|
const url = [
|
|
`?type=meeting`,
|
|
`&title=${encodeURIComponent(title)}`,
|
|
`&meetingProfileName=${encodeURIComponent(profile.name)}`,
|
|
profile.image && `&meetingImage=${encodeURIComponent(CAL_URL + profile.image)}`,
|
|
`${users.map((user) => `&names=${encodeURIComponent(user.name)}`).join("")}`,
|
|
`${users.map((user) => `&usernames=${encodeURIComponent(user.username)}`).join("")}`,
|
|
// Joining a multiline string for readability.
|
|
].join("");
|
|
|
|
return encodeUri ? encodeURIComponent(url) : url;
|
|
};
|
|
|
|
/**
|
|
* Test url:
|
|
* http://localhost:3000/api/social/og/image?type=app&name=Huddle01&slug=/api/app-store/huddle01video/icon.svg&description=Huddle01%20is%20a%20new%20video%20conferencing%20software%20native%20to%20Web3%20and%20is%20comparable%20to%20a%20decentralized%20version%20of%20Zoom.%20It%20supports%20conversations%20for...
|
|
*/
|
|
export const constructAppImage = ({ name, slug, description }: AppImageProps, encodeUri = true): string => {
|
|
const url = [
|
|
`?type=app`,
|
|
`&name=${encodeURIComponent(name)}`,
|
|
`&slug=${encodeURIComponent(slug)}`,
|
|
`&description=${encodeURIComponent(description)}`,
|
|
// Joining a multiline string for readability.
|
|
].join("");
|
|
|
|
return encodeUri ? encodeURIComponent(url) : url;
|
|
};
|
|
|
|
export const constructGenericImage = ({ title, description }: GenericImageProps, encodeUri = true) => {
|
|
const url = [
|
|
`?type=generic`,
|
|
`&title=${encodeURIComponent(title)}`,
|
|
`&description=${encodeURIComponent(description)}`,
|
|
// Joining a multiline string for readability.
|
|
].join("");
|
|
|
|
return encodeUri ? encodeURIComponent(url) : url;
|
|
};
|
|
|
|
const Wrapper = ({ children, variant = "light", rotateBackground }: WrapperProps) => (
|
|
<div tw="flex w-full h-full">
|
|
<img
|
|
tw="flex absolute left-0 top-0 w-full h-[110%]"
|
|
style={rotateBackground ? { transform: "rotate(180deg)" } : undefined}
|
|
src={`${CAL_URL}/social-bg-${variant}-lines.jpg`}
|
|
alt="background"
|
|
width="1200"
|
|
height="600"
|
|
/>
|
|
<div tw="flex flex-col w-full h-full px-[80px] py-[70px] items-start justify-center">{children}</div>
|
|
</div>
|
|
);
|
|
|
|
export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
|
|
// We filter attendees here based on whether they have an image and filter duplicates.
|
|
// Users ALWAYS have an image (albeit a gray empty person avatar), so this mainly filters out
|
|
// any non existing images for dynamic collectives, while at the same time removing them from
|
|
// the names list, because the profile name of that event is a concatenation of all names.
|
|
const attendees = (profile?.image ? [profile, ...users] : users).filter(
|
|
(value, index, self) => self.findIndex((v) => v.name === value.name) == index
|
|
);
|
|
|
|
// Construct list of avatar urls, removes duplicates and empty profile images
|
|
const avatars = attendees
|
|
.map((user) => {
|
|
if ("image" in user && user?.image) return user.image;
|
|
if ("username" in user && user?.username) return `${CAL_URL}/${user.username}/avatar.png`;
|
|
return null;
|
|
})
|
|
.filter(Boolean) as string[];
|
|
|
|
// In case there is NO other attendee than the single meeting profile without an image, we add
|
|
// that name back in here, since the event probably is a round robin event.
|
|
const names = attendees.length > 0 ? attendees.map((user) => user.name) : [profile.name];
|
|
|
|
return (
|
|
<Wrapper variant="dark">
|
|
<div tw="h-full flex flex-col justify-start">
|
|
<div tw="flex items-center justify-center" style={{ fontFamily: "cal", fontWeight: 300 }}>
|
|
<img src={`${CAL_URL}/${LOGO}`} width="350" alt="Logo" />
|
|
{avatars.length > 0 && (
|
|
<div style={{ color: "#111827" }} tw="font-bold text-[92px] mx-8 bottom-2">
|
|
/
|
|
</div>
|
|
)}
|
|
<div tw="flex flex-row">
|
|
{avatars.slice(0, 3).map((avatar) => (
|
|
<img
|
|
tw="rounded-full mr-[-36px] border-[6px] border-[#CDCED2]"
|
|
key={avatar}
|
|
src={avatar}
|
|
alt="Profile picture"
|
|
width="160"
|
|
/>
|
|
))}
|
|
{avatars.length > 3 && (
|
|
<div tw="flex items-center justify-center w-[160px] h-[160px] rounded-full bg-black text-inverted text-[54px] font-bold">
|
|
<span tw="flex top-[-5px] left-[-5px]">+{avatars.length - 3}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div style={{ color: "#111827" }} tw="relative flex text-[54px] w-full flex-col mt-auto">
|
|
<div
|
|
tw="flex w-[1040px] overflow-hidden"
|
|
style={{ whiteSpace: "nowrap", fontFamily: "cal", textOverflow: "ellipsis" }}>
|
|
Meet {joinMultipleNames(names)}
|
|
</div>
|
|
<div
|
|
tw="flex mt-3 w-[1040px] overflow-hidden"
|
|
style={{ whiteSpace: "nowrap", fontFamily: "inter", textOverflow: "ellipsis" }}>
|
|
{title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
const VisualBlur = ({ visualSlug }: { visualSlug: string }) => {
|
|
// Making a blur of a dark logo is very ugly. We use the filename to indicate,
|
|
// when we don't want to render these blurry blob backgrounds.
|
|
if (visualSlug.indexOf("dark") > -1) return null;
|
|
|
|
return (
|
|
<div tw="flex relative">
|
|
{/* Blob top left */}
|
|
<div
|
|
tw="flex absolute top-[-100px] left-[-100px] w-[400px] h-[400px] opacity-80"
|
|
style={{
|
|
filter: "blur(98px)",
|
|
backgroundColor: "rgba(255, 255, 255, 0.7)",
|
|
backgroundImage: `url(${CAL_URL}${visualSlug})`,
|
|
backgroundSize: "400px 400px",
|
|
}}
|
|
/>
|
|
|
|
{/* Blob bottom right */}
|
|
<div
|
|
tw="flex absolute top-[230px] left-[660px] w-[630px] h-[630px] opacity-80"
|
|
style={{
|
|
filter: "blur(150px)",
|
|
backgroundColor: "rgba(255, 255, 255, 0.7)",
|
|
backgroundImage: `url(${CAL_URL}${visualSlug})`,
|
|
backgroundSize: "630px 630px",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const App = ({ name, description, slug }: AppImageProps) => (
|
|
<Wrapper>
|
|
<img src={`${CAL_URL}/${LOGO}`} width="150" alt="Logo" tw="absolute right-[48px] top-[48px]" />
|
|
|
|
<VisualBlur visualSlug={slug} />
|
|
|
|
<div tw="flex items-center w-full">
|
|
<div tw="flex">
|
|
<img src={`${CAL_URL}${slug}`} alt="App icon" width="172" />
|
|
</div>
|
|
</div>
|
|
<div style={{ color: "#111827" }} tw="flex mt-auto w-full flex-col">
|
|
<div tw="flex text-[64px] mb-7" style={{ fontFamily: "cal", fontWeight: 600 }}>
|
|
{name}
|
|
</div>
|
|
<div tw="flex text-[36px]" style={{ fontFamily: "inter" }}>
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</Wrapper>
|
|
);
|
|
|
|
export const Generic = ({ title, description }: GenericImageProps) => (
|
|
<Wrapper>
|
|
<div tw="h-full flex flex-col justify-start">
|
|
<div tw="flex items-center justify-center" style={{ fontFamily: "cal", fontWeight: 300 }}>
|
|
<img src={`${CAL_URL}/cal-logo-word-black.svg`} width="350" alt="Logo" />
|
|
</div>
|
|
|
|
<div style={{ color: "#111827" }} tw="relative flex text-[54px] w-full flex-col mt-auto">
|
|
<div tw="flex w-[1040px]" style={{ fontFamily: "cal" }}>
|
|
{title}
|
|
</div>
|
|
<div tw="flex mt-3 w-[1040px]" style={{ fontFamily: "inter" }}>
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Wrapper>
|
|
);
|
|
|
|
export const ScreenShot = ({ image, fallbackImage }: ScreenshotImageProps) => (
|
|
<Wrapper rotateBackground>
|
|
<div tw="relative h-full w-full flex flex-col justify-center items-center">
|
|
<div tw="relative mt-[140px] flex rounded-2xl" style={{ boxShadow: "0 0 45px -3px rgba(0,0,0,.3)" }}>
|
|
<img
|
|
src={fallbackImage}
|
|
tw="absolute inset-0 rounded-2xl"
|
|
width="1024"
|
|
height="576"
|
|
alt="screenshot"
|
|
/>
|
|
<img src={image} width="1024" height="576" tw="rounded-2xl" alt="screenshot" />
|
|
</div>
|
|
</div>
|
|
</Wrapper>
|
|
);
|