website: include adopter logos on homepage

[Dylannni]

Checklist:

• [x] You have signed off your commits
• [x] Ensure you follow best practices from our guide. Contributing.
• [x] You have included screenshots when changing the website style or adding a new page.

Description of your changes: Added - Companies Name/Logo, a case studies markdown file under /docs/about Edited - Front page layout (_index.html)

Issue

Closes: #4036

Labels

/area website

---

[google-oss-prow[bot]]

Hi @Dylannni. Thanks for your PR.

I'm waiting for a kubeflow member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[Dylannni]

@andreyvelich Just realised everything from last time is ready for PR. Please continue confirming the companies so I can replace the placeholders I have right now. Also, what are your thoughts on case study page? I could make something fancier than this tomorrow if needed.

cc @chasecadet @castrojo

[Dylannni]

When should I replace the palceholder?

[andreyvelich]

I could make something fancier than this tomorrow if needed.

@Dylannni What do you have in mind for the Case Studies section ?

[Dylannni]

@andreyvelich We could have a case study board (logo with a short description) for each company, instead of just listing out the case studies. What do you think?

[andreyvelich]

Yeah, or maybe we can learn something from CNCF Case Study page: https://www.cncf.io/case-studies/ We can do that in the followup PR.

[thesuperzapper]

/hold

We haven't got approval from the CNCF to use trademarks, or confirmation about which trademarks we can use, please continue that discussion on:

• https://github.com/kubeflow/website/issues/4036

Also, please rebase after the dark-mode PR to ensure it looks good in both.

I want to take a look at the styles again once you rebase, so please tag me.

[thesuperzapper]

@castrojo ccing you for legal discussion about what is required to include these logos on the Kubeflow homepage.

But feel free to respond on the issue instead, incase we dont end up using this specific PR:

• https://github.com/kubeflow/website/issues/4036

[Dylannni]

@thesuperzapper Rebased onto latest master branch, have a look! I noticed that the Amazon/RedHat logos look faint in dark mode as their name are in Black, any suggestion on how I could deal with it?

[castrojo]

LGTM

[google-oss-prow[bot]]

@andreyvelich: GitHub didn't allow me to request PR reviews from the following users: kubeflow/release-team, kubeflow/kubeflow-steering-committee.

Note that only kubeflow members and repo collaborators can review this PR, and authors cannot review their own PRs.

In response to this:

Given that @castrojo gave /lgtm for this PR, I think we can move forward. /lgtm /hold for others review /cc @kubeflow/kubeflow-steering-committee @rimolive @varodrig @kubeflow/release-team @StefanoFioravanzo

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[franciscojavierarceo]

/approve

[thesuperzapper]

@castrojo just to clarify, what criteria are required for including a logo on the homepage?

Is it only CNCF member organizations?

[thesuperzapper]

@andreyvelich there are still a few things that are blocking this:

• define the processes to be included as a homepage logo:

  • for example, is it just a KSC decision
  • @castrojo can confirm if there are other requirements (e.g. CNCF membership)
  • I am a little concerned that we have not got express approval from some of the companies who's logos are in this PR

• I think the styling can be improved:

  • some of the logos look stretched
  • they don't work in dark mode, and most trademark guidelines require a special logo for a dark background (e.g. white inverted)
  • should we have a "carousel" or ticker tape scrolling effect, to have more logos than can fit

• this PR introduces a "case studies" page:

  • there are no case studies on it, just a link to a random YouTube video, lol
  • is this a page we want?
  • if so, what case studies will be included, the page suggests raising a PR, but I think we should be more planned than that.

[andreyvelich]

Do we want to work on this after KubeCon to improve it ?

[thesuperzapper]

Also @castrojo in case it was unclear, none of the listed companies in this PR have given their specific consent to have their logos included on the homepage (at least not publicly).

Its also not clear why these specific companies were included by @Dylannni in this PR:

• Amazon
• ByteDance
• Microsoft
• RedHat
• Google

While some of them are historical contributors to the project (and might be listed in some OWNERS files), I think its reasonable to have a requirement that the company is in ADOPTERS.md and is a CNCF member organization, which none of the above meet. If the company really does not want to be included in ADOPTERS.md, we do at least need a public record somewhere.

Alternatively, we could simply only include logos of those we have done formal case studies for, like what the Kubernetes homepage does.

[Dylannni]

@thesuperzapper I agree — these were just placeholders using big tech companies, based on our discussion #4036. Totally makes sense to follow a clearer inclusion policy. I am happy to update the logos accordingly — should only take a few minutes.

[varodrig]

@Dylannni I see that you have checked " You have included screenshots when changing the website style or adding a new page." but I do not see any screenshots on the PR can you include a screenshot about how the page will look like? I need to send it to RH for approval.

[Dylannni]

@varodrig No problem at all! I had included a video in the related issue (#4036), but I’ve added a screenshot here as well just in case you need it.

[thesuperzapper]

@Dylannni I see that you have checked " You have included screenshots when changing the website style or adding a new page." but I do not see any screenshots on the PR can you include a screenshot about how the page will look like? I need to send it to RH for approval.

@varodrig while I agree with the screenshots, don't forget you can look at the deploy preview (find the link in the "successful PR checks"), because screenshots can become out of date.

For this PR its: https://deploy-preview-4065--competent-brattain-de2d6d.netlify.app/

Also, for very visible changes like this (on to the front page or root styles) we should ask people to show dark/light and mobile/laptop.

[andreyvelich]

We've got /lgtm from Amazon and RedHat. Can we get someone from Google, Microsoft, and ByteDance to move this forward. @Jeffwan Would you mind approving it from the ByteDance point of view ?

For Google, @james-jwu please can you help us with the approval ?

@chasecadet Who we can reach out for Microsoft approval ?

[andreyvelich]

cc @chensun for the Google approval.

[thesuperzapper]

@andreyvelich as I was saying in https://github.com/kubeflow/website/pull/4065#issuecomment-2766723742, to establish a process we should:

1. Have the organization first add themselves to ADOPTERS.md (so we know who to contact)
2. Ensure the organization is a Member of the CNCF Foundation (which prevents most trademark lawsuit risk)
3. Have the KSC vote to approve adding the organization to the front page
4. Get approval from the organization in a specific PR which adds their logo

Notes:

• Regarding requirement 2, ByteDance is not a CNCF member, so should be removed.
• Regarding requirement 3 and 4, we can do them in bulk for the initial batch.

[thesuperzapper]

Additionally for this PR to be mergable, there are a few things we need to fix.

Changes:

1. Fix the styling of the logos on dark mode, as this is currently not compliant with trademark guidelines (or easy to read):

   • 
   • My suggestion for is that we use the "white" version of these logos in dark mode, and color versions in light mode.
   • Add show_light-only or show_dark-only CSS class to an element to hide it on one theme or the other.

2. Lets remove the "case studies" page and link for now, as we have none:

   • We can replace the "Read our User Stories" link on the homepage with a "See Our Adopters" button which links to ADOPTERS.md

3. Discuss if we should say "Trusted By" or "Adopted By":

   • Since they will all be listed on ADOPTERS.md, this might be more appropriate.
   • Also, saying "Adopted By" might be less controversial for organizations.

[andreyvelich]

@Dylannni Please would you help updating this PR to incorporate @thesuperzapper feedback:

1. Fix the styling of the logos on dark mode,
2. Remove the "case studies", and redirect to our ADOPTERS page.

Trusted By vs Adopted By, maybe Trusted By make sense looking at what others are doing:

1. Istio: https://istio.io/
2. Argo: https://argoproj.github.io/

@castrojo @kubeflow/kubeflow-steering-committee thoughts ?

[Dylannni]

@andreyvelich @thesuperzapper Thank you for the feedback — I’ve made some changes accordingly. As I aiming to refine the logos properly this time, would it be more appropriate to use the specific branding for cloud engineering teams, such as AWS/Google Cloud, instead of Amazon/Google?

Apologies for any confusion — I initially thought this PR was meant to be a mock-up.

[thesuperzapper]

@franciscojavierarceo can you /approve cancel for now so we can finalize this with a specific KSC vote?

I think you ended up "approving" in the eyes of Prow because of the old GitHub review being treated as a prow approval issue.

[franciscojavierarceo]

/approve cancel /hold

[Dylannni]

@thesuperzapper I’ve made some changes accordingly, but I’m still facing one issue that I’m not sure how to resolve. Could you kindly help me?

I’ve added both color logos and white logos in the HTML, and assigned them trusted-logo-light and trusted-logo-dark classes respectively, defined in /scss/_styles_project.scss.

I want to switch to the white logo when dark theme is selected. I tried adding the following:

html[data-theme='dark'] .show_dark-only {
  display: block !important;
}
html[data-theme='dark'] .show_light-only {
  display: none !important;
}

But it doesn’t seem to work as expected. Could you advise me on the correct way to implement this logo switching behavior based on the selected theme?

Thank you very much!

[andreyvelich]

@thesuperzapper @kubeflow/kubeflow-steering-committee @Dylannni @castrojo What is blocking us to move this forward?