You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@opendal.apache.org by xu...@apache.org on 2026/05/29 17:57:05 UTC
(opendal) 02/05: feat(website): add adopter logo wall
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 <gi...@xuanwo.io>
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