This is an automated email from the ASF dual-hosted git repository. Xuanwo pushed a commit to branch xuanwo/website-redesign in repository https://gitbox.apache.org/repos/asf/opendal.git
commit 8628c070e15c49e039d72545f940b6a129546cd8 Author: Xuanwo <[email protected]> AuthorDate: Fri May 29 22:03:30 2026 +0800 feat(website): add adopter logo wall Add a "Used by" logo wall of real OpenDAL adopters taken from the core and binding users lists, ordered by GitHub star count and rendered as grayscale org logos (self-hosted under static/img/users/) that colorize on hover. The wall shows a responsive count by viewport (4/6/8) and an "+ add your logo" link to the users list. Also show the Java quickstart dependency as a plain Maven coordinate instead of a Gradle-specific implementation(...) line. --- website/src/components/landing/data.js | 27 +++++--- website/src/components/landing/sections.jsx | 32 +++++++-- website/src/components/landing/styles.module.css | 82 +++++++++++++++++++---- website/static/img/users/databend.png | Bin 0 -> 13146 bytes website/static/img/users/dify.png | Bin 0 -> 7467 bytes website/static/img/users/filecodebox.png | Bin 0 -> 53339 bytes website/static/img/users/milvus.png | Bin 0 -> 15620 bytes website/static/img/users/questdb.png | Bin 0 -> 26479 bytes website/static/img/users/risingwave.png | Bin 0 -> 6252 bytes website/static/img/users/sccache.png | Bin 0 -> 4701 bytes website/static/img/users/vector.png | Bin 0 -> 48196 bytes 11 files changed, 111 insertions(+), 30 deletions(-) diff --git a/website/src/components/landing/data.js b/website/src/components/landing/data.js index 78c82c455..dbd7e0588 100644 --- a/website/src/components/landing/data.js +++ b/website/src/components/landing/data.js @@ -142,18 +142,25 @@ export const valueProps = [ }, ]; -// Real adopters, drawn from the project vision. Rendered as a wordmark wall. -export const adopters = [ - { name: "Databend", href: "https://github.com/databendlabs/databend"; }, - { name: "RisingWave", href: "https://github.com/risingwavelabs/risingwave"; }, - { name: "GreptimeDB", href: "https://github.com/GreptimeTeam/greptimedb"; }, - { name: "Apache Iceberg Rust", href: "https://github.com/apache/iceberg-rust"; }, - { name: "Vector", href: "https://github.com/vectordotdev/vector"; }, - { name: "sccache", href: "https://github.com/mozilla/sccache"; }, - { name: "Pants", href: "https://github.com/pantsbuild/pants"; }, - { name: "Shuttle", href: "https://github.com/shuttle-hq/shuttle"; }, +// Real adopters from the project's users lists (core + bindings), ordered by +// GitHub star count (highest first). Logos are the projects' GitHub org +// avatars, self-hosted under static/img/users/. Refresh with scripts as the +// ecosystem grows. The logo wall shows a responsive subset by viewport width. +export const usedBy = [ + { name: "Dify", icon: "/img/users/dify.png", href: "https://github.com/langgenius/dify"; }, + { name: "Milvus", icon: "/img/users/milvus.png", href: "https://github.com/milvus-io/milvus"; }, + { name: "Vector", icon: "/img/users/vector.png", href: "https://github.com/vectordotdev/vector"; }, + { name: "QuestDB", icon: "/img/users/questdb.png", href: "https://github.com/questdb/questdb"; }, + { name: "Databend", icon: "/img/users/databend.png", href: "https://github.com/databendlabs/databend"; }, + { name: "RisingWave", icon: "/img/users/risingwave.png", href: "https://github.com/risingwavelabs/risingwave"; }, + { name: "FileCodeBox", icon: "/img/users/filecodebox.png", href: "https://github.com/vastsa/FileCodeBox"; }, + { name: "sccache", icon: "/img/users/sccache.png", href: "https://github.com/mozilla/sccache"; }, ]; +// Where people add their own project (PR to the users list). +export const USERS_LIST_URL = + "https://github.com/apache/opendal/blob/main/core/users.md";; + // Curated, icon-backed slice of the 50+ supported services, grouped by family. export const serviceGroups = [ { diff --git a/website/src/components/landing/sections.jsx b/website/src/components/landing/sections.jsx index f553ca2f7..c506c1d49 100644 --- a/website/src/components/landing/sections.jsx +++ b/website/src/components/landing/sections.jsx @@ -29,7 +29,8 @@ import { heroStats, codeSamples, valueProps, - adopters, + usedBy, + USERS_LIST_URL, serviceGroups, bindings, layers, @@ -99,16 +100,33 @@ export function Hero() { } export function UsedBy() { + const { withBaseUrl } = useBaseUrlUtils(); return ( <section className={styles.usedBy}> <div className="odl-container"> - <div className={styles.usedByLabel}> - <span className="odl-eyebrow">Trusted in production by</span> + <div className={styles.usedByHead}> + <span className="odl-eyebrow">Used by</span> + <Link className={styles.addLogo} to={USERS_LIST_URL}> + + add your logo + </Link> </div> - <div className={styles.usedByTrack}> - {adopters.map((a) => ( - <Link key={a.name} className={styles.adopter} to={a.href}> - {a.name} + <div className={styles.logoWall}> + {usedBy.map((u) => ( + <Link + key={u.name} + className={styles.logoItem} + to={u.href} + title={u.name} + > + <img + className={styles.logoMark} + src={withBaseUrl(u.icon)} + alt="" + width="24" + height="24" + loading="lazy" + /> + <span className={styles.logoName}>{u.name}</span> </Link> ))} </div> diff --git a/website/src/components/landing/styles.module.css b/website/src/components/landing/styles.module.css index edf7b5d05..d50ef2ee0 100644 --- a/website/src/components/landing/styles.module.css +++ b/website/src/components/landing/styles.module.css @@ -277,29 +277,85 @@ padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); border-top: 1px solid var(--odl-border); } -.usedByLabel { - text-align: center; - margin-bottom: var(--odl-space-5); +/* Top row: "Used by" eyebrow (left) + "+ add your logo" (right) over a rule */ +.usedByHead { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--odl-space-4); + padding-bottom: var(--odl-space-4); + border-bottom: 1px solid var(--odl-border); } -.usedByTrack { +.addLogo { + font-family: var(--odl-font-mono); + font-size: var(--odl-text-xs); + letter-spacing: 0.04em; + color: var(--odl-fg-subtle); + text-decoration: none; + white-space: nowrap; + transition: color var(--odl-dur) var(--odl-ease); +} +.addLogo:hover { + color: var(--odl-accent); + text-decoration: none; +} +/* Logo wall: grayscale adopter logos that color on hover. Logos are sorted by + GitHub stars; the count shown adapts to viewport width via the nth-child + rules below (4 → 6 → 8). */ +.logoWall { display: flex; flex-wrap: wrap; align-items: center; - justify-content: center; - gap: var(--odl-space-4) var(--odl-space-7); + justify-content: space-between; + gap: var(--odl-space-5) var(--odl-space-6); + margin-top: var(--odl-space-6); } -.adopter { +.logoItem { + display: inline-flex; + align-items: center; + gap: var(--odl-space-3); + text-decoration: none; + filter: grayscale(1); + opacity: 0.62; + transition: opacity var(--odl-dur) var(--odl-ease), + filter var(--odl-dur) var(--odl-ease); +} +.logoItem:hover { + filter: grayscale(0); + opacity: 1; + text-decoration: none; +} +.logoMark { + width: 26px; + height: 26px; + object-fit: contain; + border-radius: var(--odl-radius-sm); + flex: none; +} +.logoName { font-family: var(--odl-font-mono); - font-size: var(--odl-text-md); + font-size: var(--odl-text-sm); font-weight: 500; color: var(--odl-fg-muted); - text-decoration: none; - transition: color var(--odl-dur) var(--odl-ease); white-space: nowrap; } -.adopter:hover { - color: var(--odl-fg-strong); - text-decoration: none; + +/* Responsive count: 4 on mobile, 6 on tablet, 8 on desktop. */ +.logoItem:nth-child(n + 5) { + display: none; +} +@media (min-width: 600px) { + .logoItem:nth-child(n + 5) { + display: inline-flex; + } + .logoItem:nth-child(n + 7) { + display: none; + } +} +@media (min-width: 980px) { + .logoItem:nth-child(n + 7) { + display: inline-flex; + } } /* ===== Value props ====================================================== */ diff --git a/website/static/img/users/databend.png b/website/static/img/users/databend.png new file mode 100644 index 000000000..27fface5c Binary files /dev/null and b/website/static/img/users/databend.png differ diff --git a/website/static/img/users/dify.png b/website/static/img/users/dify.png new file mode 100644 index 000000000..d08be7198 Binary files /dev/null and b/website/static/img/users/dify.png differ diff --git a/website/static/img/users/filecodebox.png b/website/static/img/users/filecodebox.png new file mode 100644 index 000000000..ba251b3d8 Binary files /dev/null and b/website/static/img/users/filecodebox.png differ diff --git a/website/static/img/users/milvus.png b/website/static/img/users/milvus.png new file mode 100644 index 000000000..8e3e38be8 Binary files /dev/null and b/website/static/img/users/milvus.png differ diff --git a/website/static/img/users/questdb.png b/website/static/img/users/questdb.png new file mode 100644 index 000000000..1ae55a66a Binary files /dev/null and b/website/static/img/users/questdb.png differ diff --git a/website/static/img/users/risingwave.png b/website/static/img/users/risingwave.png new file mode 100644 index 000000000..aed6574ee Binary files /dev/null and b/website/static/img/users/risingwave.png differ diff --git a/website/static/img/users/sccache.png b/website/static/img/users/sccache.png new file mode 100644 index 000000000..070e3df52 Binary files /dev/null and b/website/static/img/users/sccache.png differ diff --git a/website/static/img/users/vector.png b/website/static/img/users/vector.png new file mode 100644 index 000000000..8420ae221 Binary files /dev/null and b/website/static/img/users/vector.png differ
