Use team logos for various meta icons

[rjackson]

What does this PR do?

We're changing all of our meta icons (favicons, apple touch icons, android chrome icons, mstile icons) over to use api/logo to ensure the correct images are displayed for teams that are using custom branding.

For this first draft, I am resolving all of the different types of icons to the existing Team.appLogo or Team.appIconLogo. There is currently no UI for setting those logos, so I don't know what expectations – if any – we have for the size requirements of either.

(Update: 2023-05-18) Our various meta icons expect to be served in varying sizes. With this PR, the logo endpoint now uses the Next.js built-in image processing to resize team logos down to appropriate sizes.

The image processing is only invoked on custom team icons, and only for icons that have specific size requirements (all the meta icons).

Requests for the type "logo" or "icon" are passed through without processing. If we ever fall back to Cal.com default icons (non-team pages, or teams without custom logos) then the fallback icons are also served without any additional processing.

Fixes #8441 (issue)

Environment: Staging(main branch) / Production

Type of change

• Chore (refactoring code, technical debt, workflow improvements)

How should this be tested?

We must test both the team-specific and fallback behaviour of this change, for each type of icon.

To test original, or fallback, behaviour we can just use the regular development environment on localhost:3000.

To test team-specific logos, I had:

1. Created a team cool-team via Cal.com
2. Edited the team in the database, copying the data from its logo column into appLogo and appIconLogo
3. Set my machine up to resolve cool-team.example.test to 127.0.0.1
4. And then I'm able to access the team-branded version of the site via cool-team.example.test:3000.

When visiting each domain we see either custom or regular favicons:

Scenario	Screenshot
Team with custom logos
Team without logos
Non-team domain
Localhost domain

And finally, the api/logo endpoint resizes images appropriately for the different types of image supported:

Type	Team output	Default output
unspecified
logo
icon
favicon-16
favicon-32
apple-touch-icon
mstile
android-chrome-192
android-chrome-256

Checklist

• I haven't added tests that prove my fix is effective or that my feature works

/claim #8441

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2023 3:15pm
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2023 3:15pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
api	⬜️ Ignored (Inspect)			May 30, 2023 3:15pm

[vercel[bot]]

@rjackson is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Ten Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/[user]/book	255.79 KB	406.75 KB	116.21% (🟢 -0.14%)
/apps/[slug]/[...pages]	458.93 KB	609.89 KB	174.25% (🟡 +0.25%)
/auth/setup	174.84 KB	325.79 KB	93.08% (🟡 +0.16%)
/d/[link]/book	255.44 KB	406.39 KB	116.11% (🟢 -0.14%)
/event-types/[type]	480.18 KB	631.14 KB	180.32% (🟡 +0.19%)
/getting-started/[[...step]]	426.21 KB	577.16 KB	164.90% (🟢 -0.22%)
/new-booker/[user]/[type]	291.05 KB	442.01 KB	126.29% (🟢 -0.14%)
/new-booker/team/[slug]/[type]	291.06 KB	442.01 KB	126.29% (🟢 -0.14%)
/settings/my-account/calendars	252.3 KB	403.25 KB	115.21% (🟢 -0.23%)
/team/[slug]/book	255.44 KB	406.39 KB	116.11% (🟢 -0.14%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[rjackson]

The goal is to generate the different icons automatically based on an icon. So for the favicon here a 16x16 and a 32x32 image must be generated.

Gotcha. I've updated the PR accordingly :)

[servusrene]

@rjackson i'll test your code tomorrow and give you feedback 😊

[rjackson]

@zomars Good suggestion, I've tried it locally and it works – so PR's updated with it :) Thanks

@rene-mueller Thanks! One thing I forgot to mention in the PR description is I'd had to change packages/lib/constants.ts to force IS_SELF_HOSTED=false in order to enable custom team logos in my development environment. I'm not sure if that's something you'll have to do, or if your local domains are already set up as the project expects?

[servusrene]

@rjackson my goal is to provide custom logos/icons for company.cal.com and for Selfhosted. Thus, it should be tested whether this works. I have not been able to test it today. I will try to do it at the beginning of next week.

[PeerRich]

hey @rjackson there seems to be a merge conflict in apps/web/pages/api/logo.ts, sorry about the delay. we had some issues with our lint pipeline, would you mind giving this a look?

[rjackson]

@PeerRich Conflict resolved :) Re-tested and its still working as documented above.