Add rotating banner of logos of Knative project end users on knative.dev site

[nainaz]

Description I would like to request adding a rotating banner of logos of people using knative project to the homepage. This would be a great way to:

• Showcase the diversity of users who are using the project
• Provide social proof to potential users
• Encourage more people to use the project

Proposed Solution The rotating banner would be implemented as a simple carousel of images. The images contains the logos and names of the users. The carousel would rotate automatically at a fixed interval.

Example from CNCF site (porject logos keep rotating) https://www.cncf.io/

List of end users could be found in https://github.com/knative/community/blob/main/ADOPTERS.MD

[aliok]

Related: https://github.com/knative/docs/issues/5388

cc @nainaz

[aliok]

For any newcomers to Knative community:

• This is not a task that involves changing Knative's Serving or Eventing code
• It is a Javascript+HTML+CSS work; not Golang

Asked feature:

• You need to update the Knative website https://knative.dev/docs/
• Logos of the vendors should be collected manually
• They should be then shown in the home page, rotating similar to the rotating logos of projects in https://www.cncf.io/

Techical details:

• Source code of the home page: https://github.com/knative/docs/blob/main/overrides/home.html
• Ideally, the logos should be put in a directory like <root>/docs/images/adopters/
• Logos should all have the same height (width can vary)
• Instead of embedding the logo images in the HTML, if possible, put the adopter information (logo image path, link to the website, name) in a separate file. In a partial/template, iterate over the adopter information, and render the images.
• The whole website is generated using Material for MkDocs. This means, although it would be super easy to implement, fetching the adopter information using XHR and rendering on the client-side is undesirable. We use static rendering in the website.

Contribution guide for Knative docs is here: https://github.com/knative/docs/blob/main/contribute-to-docs/README.md

[xiangpingjiang]

/assign

[satyampsoni]

I'll try to add the feature. /assign

[aliok]

@cjyabraham https://github.com/cncf/cncf.io is a large repo :)

Any pointers to the rotating logos here?

[cjyabraham]

I believe we use this library: https://github.com/kenwheeler/slick And here's our config for it.

(@thetwopct correct me if I'm wrong...)

[thetwopct]

That is correct 👍 For a slider that is not dependent on jQuery, I can also recommend Swiper https://swiperjs.com config and styling almost the same.

[prajjwalyd]

Hello @aliok,

I've been working on implementing the sliding animation for the adopters' logos.

scrnli_2_19_2024_1-16-44 AM.webm

I haven't used any external libraries for this... Also, the logos along with their links are dynamically rendered as per instruction.

public preview link: https://prajjwalyd.github.io/docs/

Please take a look and let me know if it meets the criteria or if any changes are required.

[prajjwalyd]

/assign

[aliok]

We are almost there I think...

https://github.com/knative/docs/pull/5878#issuecomment-1979333835

We only miss some logos and there are some improvements to be done.

@prajjwalyd Can you create a ticket (or multiple tickets) for the remaining stuff?

[prajjwalyd]

Sure @aliok! Also, could you please briefly explain the remaining improvements needed for this (besides some missing logos)?

[evankanderson]

Is this done enough to close?

[prajjwalyd]

I've completed the main logic of the sliding animation and have added most of the logos, but now I need to update it with a new design as specified recently by the UX group...

Also, I referred to the list (https://github.com/knative/community/blob/main/ADOPTERS.MD) but have some confusion about the logos of three specific 'adopters':

1. EASE lab @ University of Edinburgh*: I'm not sure which logo to use for this.
2. SVA System Vertrieb Alexander GmbH*: I couldn't access their website (https://sva.de/en).
3. vorteil pty ltd*: I couldn't access their website as well (http://vorteil.io/).

Once I receive some clarification on these three entries, I'll be able to create a new pull request and add them with the updated design (using a stroke instead of a drop shadow).

I'm also uncertain about which repository I should use to create an issue for this matter.

The updated design from the UX team:

[aliok]

@prajjwalyd

I'm also uncertain about which repository I should use to create an issue for this matter. This whole work is cross-repo IMO.

Can you create a separate ticket for the remaining work? (or, link them here if there are already issues)

• Missing logos (please use this repo)
• Updated design (the border vs shadow around the logos) (this can go in to knative/ux repo)

[prajjwalyd]

https://github.com/knative/community/issues/1561 https://github.com/knative/ux/issues/133

cc @aliok

[aliok]

Thanks @prajjwalyd

We can now close this one

[aliok]

/close

[knative-prow[bot]]

@aliok: Closing this issue.

In response to this:

/close

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-sigs/prow repository.