This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new d37c9aab99f [doc](community) add the Community Badges page (EN +
zh-CN) and compact the phone header (#4149)
d37c9aab99f is described below
commit d37c9aab99ff61d1b3fa94722aa510016426b1ee
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Thu Sep 17 13:48:09 2026 +0800
[doc](community) add the Community Badges page (EN + zh-CN) and compact the
phone header (#4149)
## What
This PR carries everything on the `community-badges` branch: the
Community Badges page in English and Chinese, and the phone-header
rework plus two sidebar fixes that were made on the same branch.
### 1. Community Badges page (EN + zh-CN)
Adds `community/how-to-contribute/community-badges.mdx` and its Chinese
counterpart
`i18n/zh-CN/docusaurus-plugin-content-docs-community/current/how-to-contribute/community-badges.mdx`,
the announcement page for the Apache Doris Community Badge program, and
lists it in the "How to Contribute" sidebar right after the Community
Contribution Guide (`/community/how-to-contribute/community-badges`,
sidebar label "Community Badges" / "社区徽章").
The page is laid out so a developer can see the claim process at a
glance instead of reading the full announcement:
- Hero: the Contributor badge, the eligibility rule (one merged PR in
the Apache Doris project), the claim-form button, and a journey strip
showing that the physical badge comes after the digital one
- All five badges as cards (Contributor, Committer, PMC Member, Active
Contributor 2026, Community Champion 2026). Only Contributor is
claimable today; the other four show "Coming soon" and the MDX carries a
TODO for their criteria and process
- Digital badge, steps 1-4: add the `Apache Doris Community Badge`
passphrase to the GitHub profile README, fill in the claim form, claim
on Holopin, then show the badge on GitHub / LinkedIn / elsewhere (tabs)
- Physical badge, steps 5-6: LinkedIn post (must mention @Apache Doris
and #ApacheDorisCommunityBadge) and the shipping form, plus the shipping
caveat
- Questions go to the Doris Slack
Implementation follows `contribute-to-doris.mdx`: MDX with an inline
`<style>` block, Infima buttons, Docusaurus tabs, a code block and an
admonition; no new React components. Images (5 badge PNGs at 640px and 6
JPEG screenshots, 1.1 MB total) are under
`static/images/community-badges/`.
The zh-CN page shares the `<style>` block, the anchor ids (`#step-1` to
`#step-6`, `#digital-badge`, `#physical-badge`, `#questions`), the image
paths and the form links with the English page, so deep links work in
both languages. Badge names (Contributor, Committer, PMC Member, ...)
and the Holopin / LinkedIn UI labels stay in English with a Chinese
gloss where useful; the `Apache Doris Community Badge` passphrase is
unchanged because it is the string we check for.
### 2. Compact phone header (three rows instead of five)
On phones the docs header stacked five rows (logo / star / download,
hamburger, Summit banner, Ask Me, then the docs strip). It is now:
1. navbar: [menu] [logo] ... [★ 15.9k] [Ask] [DOWNLOAD] on one 56px row
2. docs strip: section picker + language switcher
3. docs strip: full-width search box
- `NavbarNext`: at ≤768px drop the word "Star" and the dividers from the
star pill, swap "Ask Me" for a robot glyph + "Ask", move the Summit link
into the hamburger panel, and hide the GitHub mark below 360px so the
row never wraps. Desktop is unchanged.
- Inline the horizontal logo with a viewBox cropped to the artwork
(`src/components/Icons/doris-logo-horizontal.tsx`); the brand SVG's
canvas margins made the `<img>` a third wider than the visible mark.
- `static/js/custom-script.js` syncs every `[data-kapa-label]` and
honours `data-kapa-loading/slow/error-label`, so the compact label shows
"…" / "N/A" instead of "Loading AI…" / "AI unavailable".
- `DocsDomainNav`: two-row layout at ≤768px, the search dropdown spans
the input, and `--docs-domain-nav-height` becomes 103px so the sticky
"Browse this section" strip still lands right underneath.
- Fixes a pre-existing bug where collapsed hamburger sections still
showed their links: the `display: grid` on the links list overrode the
`hidden` attribute.
### 3. Sidebar fixes
- zh-CN labels for the new top-level sidebar categories (Get Started /
Solutions / Operate & Maintain) on Dev and 4.x
(`i18n/zh-CN/docusaurus-plugin-content-docs/current.json` and
`version-4.x.json`).
- `src/theme/DocRoot/Layout/styles.module.css`: drop the `height: auto`
override on the sticky sidebar viewport. The inner `.sidebar` is
`height: 100%` and the `.menu` only scrolls when its container has a
resolved height, so long sections were cut off at the bottom of the
screen with no way to reach them.
## Verified
- Both badge pages compile with Docusaurus's MDX processor; the TOC
lists the same H2s and step anchors (`#step-1` to `#step-6`) in EN and
zh-CN, and the two files have identical tag structure, links and image
paths
- EN badge page rendered on a local dev server and checked at desktop
width: button text and hover colors (the site's `.markdown a` rule and
the blue `--ifm-color-primary-dark` would otherwise hide the text / turn
buttons blue), the tabs, and the step cards
- Phone header checked against a local dev server on the Dev docs pages;
the 4.x / 3.x doc pages have not been checked at phone width yet, and
desktop layout is untouched by the ≤768px rules
## Versions
- [x] dev
- [x] 4.x (sidebar category labels only)
- [ ] 3.x
- [ ] 2.1 or older (not covered by version/language sync gate)
## Languages
- [x] Chinese
- [x] English
## Docs Checklist
- [x] Checked by AI
- [ ] Test Cases Built
- [x] Updated required version and language counterparts, or explained
why not: community docs are unversioned; the EN and zh-CN badge pages
are both in this PR
- [x] If only one language changed, confirmed whether source/translation
counterparts need sync: both languages changed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01L1CgQWjpaZr6gL2RWtxSGn
---------
Co-authored-by: morningman <[email protected]>
Co-authored-by: Claude Opus 5 (1M context) <[email protected]>
---
community/how-to-contribute/community-badges.mdx | 857 +++++++++++++++++++++
.../current/how-to-contribute/community-badges.mdx | 857 +++++++++++++++++++++
.../docusaurus-plugin-content-docs/current.json | 12 +
.../version-4.x.json | 12 +
sidebarsCommunity.json | 1 +
src/components/Icons/doris-logo-horizontal.tsx | 35 +
.../docs-domain-nav/DocsDomainNav.module.scss | 52 +-
src/components/home-next/NavbarNext.scss | 183 +++--
src/components/home-next/NavbarNext.tsx | 74 +-
src/theme/DocItem/Layout/styles.module.css | 5 +-
src/theme/DocRoot/Layout/styles.module.css | 15 +-
.../badge-active-contributor-2026.png | Bin 0 -> 187815 bytes
static/images/community-badges/badge-committer.png | Bin 0 -> 175502 bytes
.../badge-community-champion-2026.png | Bin 0 -> 160861 bytes
.../images/community-badges/badge-contributor.png | Bin 0 -> 159320 bytes
.../images/community-badges/badge-pmc-member.png | Bin 0 -> 181633 bytes
.../community-badges/github-profile-badge.jpg | Bin 0 -> 57120 bytes
.../community-badges/holopin-board-embed-code.jpg | Bin 0 -> 70327 bytes
static/images/community-badges/holopin-claim.jpg | Bin 0 -> 48601 bytes
static/images/community-badges/holopin-share.jpg | Bin 0 -> 82643 bytes
.../community-badges/linkedin-certification.jpg | Bin 0 -> 26408 bytes
static/images/community-badges/linkedin-post.jpg | Bin 0 -> 33970 bytes
static/js/custom-script.js | 41 +-
23 files changed, 2018 insertions(+), 126 deletions(-)
diff --git a/community/how-to-contribute/community-badges.mdx
b/community/how-to-contribute/community-badges.mdx
new file mode 100644
index 00000000000..9e612cce0b8
--- /dev/null
+++ b/community/how-to-contribute/community-badges.mdx
@@ -0,0 +1,857 @@
+---
+title: Claim Your Apache Doris Community Badge
+sidebar_label: Community Badges
+language: en
+description: How Apache Doris contributors claim the digital Contributor Badge
on Holopin, show it on GitHub and LinkedIn, and apply for the physical badge.
Overview of all five Apache Doris community badges.
+keywords:
+ - Apache Doris
+ - community badge
+ - contributor badge
+ - Holopin
+ - physical badge
+ - contributor recognition
+ - open source contribution
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<style>{`
+/* ---------- hero ---------- */
+.badge-hero {
+ display: grid;
+ grid-template-columns: 230px minmax(0, 1fr);
+ gap: 8px 32px;
+ align-items: center;
+ margin: 8px 0 32px;
+ padding: 28px 32px 24px 28px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 12px;
+ background: linear-gradient(135deg, var(--brand-surface-soft, #F4FBF8),
var(--brand-surface-note, #E8FAF5));
+}
+
+.badge-hero-image {
+ width: 230px;
+ height: auto;
+ filter: drop-shadow(0 10px 18px rgba(6, 70, 50, 0.18));
+}
+
+.badge-hero-eyebrow {
+ margin: 0 0 8px;
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--brand-primary-deep, #0B7A58);
+}
+
+.badge-hero-lead {
+ margin: 0 0 10px;
+ font-size: 1.35rem;
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--ifm-font-color-base);
+}
+
+.badge-hero-desc {
+ margin: 0 0 16px;
+ max-width: 52ch;
+ line-height: 1.6;
+}
+
+.badge-eligibility {
+ display: flex;
+ gap: 12px;
+ align-items: flex-start;
+ margin: 0 0 18px;
+ padding: 12px 14px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 8px;
+ background: var(--ifm-background-surface-color);
+}
+
+.badge-eligibility-tick {
+ flex: none;
+ display: grid;
+ place-items: center;
+ width: 26px;
+ height: 26px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: #fff;
+ font-size: 0.95rem;
+ font-weight: 800;
+}
+
+.badge-eligibility strong {
+ display: block;
+ font-size: 0.95rem;
+}
+
+.badge-eligibility span:not(.badge-eligibility-tick) {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-hero-cta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 12px;
+}
+
+.badge-hero-note {
+ flex-basis: 100%;
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-journey {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px 10px;
+ margin-top: 18px;
+ padding-top: 16px;
+ border-top: 1px dashed var(--brand-border-soft, #D9EEE8);
+ font-size: 0.85rem;
+}
+
+.badge-journey-stage {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 5px 12px 5px 6px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 999px;
+ background: var(--ifm-background-surface-color);
+}
+
+.badge-journey-stage i {
+ padding: 2px 8px;
+ border-radius: 999px;
+ background: var(--brand-surface-note, #E8FAF5);
+ color: var(--brand-primary-deep, #0B7A58);
+ font-style: normal;
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+}
+
+.badge-journey-arrow {
+ color: var(--ifm-color-primary);
+ font-weight: 700;
+}
+
+.badge-journey-hint {
+ font-size: 0.75rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+/* ---------- badge family ---------- */
+.badge-family {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 12px;
+ margin: 18px 0 8px;
+}
+
+.badge-card {
+ display: grid;
+ grid-template-rows: auto auto 1fr auto;
+ gap: 6px;
+ justify-items: center;
+ padding: 16px 10px 14px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-font-color-base);
+ text-align: center;
+ text-decoration: none;
+}
+
+.markdown a.badge-card,
+.markdown a.badge-card:hover {
+ color: var(--ifm-font-color-base);
+ text-decoration: none;
+}
+
+a.badge-card:hover {
+ border-color: var(--ifm-color-primary);
+}
+
+.badge-card--open {
+ border-color: var(--ifm-color-primary);
+ box-shadow: 0 0 0 3px var(--brand-surface-note, #E8FAF5);
+}
+
+.badge-card img {
+ width: 104px;
+ height: 104px;
+}
+
+.badge-card strong {
+ font-size: 0.9rem;
+ line-height: 1.25;
+}
+
+.badge-card span {
+ font-size: 0.76rem;
+ line-height: 1.4;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-chip {
+ display: inline-block;
+ margin-top: 4px;
+ padding: 3px 9px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 999px;
+ background: var(--ifm-color-emphasis-100);
+ color: var(--ifm-color-emphasis-700);
+ font-style: normal;
+ font-size: 0.68rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+.badge-chip--open {
+ border-color: var(--ifm-color-primary);
+ background: var(--ifm-color-primary);
+ color: #fff;
+}
+
+/* ---------- step cards ---------- */
+.badge-steps {
+ display: grid;
+ margin: 8px 0 24px;
+}
+
+.badge-step {
+ position: relative;
+ display: grid;
+ grid-template-columns: 52px minmax(0, 1fr);
+ gap: 0 18px;
+ padding-bottom: 22px;
+}
+
+.badge-step::before {
+ content: "";
+ position: absolute;
+ left: 25px;
+ top: 52px;
+ bottom: 0;
+ width: 2px;
+ background: var(--ifm-color-emphasis-300);
+}
+
+.badge-step:last-child {
+ padding-bottom: 0;
+}
+
+.badge-step:last-child::before {
+ display: none;
+}
+
+.badge-step-number {
+ display: grid;
+ place-items: center;
+ width: 52px;
+ height: 52px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: #fff;
+ font-size: 1.2rem;
+ font-weight: 800;
+ box-shadow: 0 0 0 5px var(--ifm-background-color);
+}
+
+.badge-steps--optional .badge-step-number {
+ border: 3px solid var(--ifm-color-primary);
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-color-primary);
+}
+
+.badge-step-body {
+ padding: 18px 22px 20px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.markdown .badge-step-body h3 {
+ margin-top: 0;
+ margin-bottom: 0.5rem !important;
+ font-size: 1.1rem;
+}
+
+.markdown .badge-step-body > :last-child {
+ margin-bottom: 0 !important;
+}
+
+.badge-step-action {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 12px;
+ margin: 14px 0 0;
+}
+
+.badge-step-action span {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-step-why {
+ margin: 12px 0 0;
+ font-size: 0.875rem;
+ line-height: 1.55;
+ color: var(--ifm-color-emphasis-700);
+}
+
+/* checklist */
+.markdown .badge-checklist {
+ display: grid;
+ gap: 6px;
+ margin: 10px 0 0 !important;
+ padding: 12px 16px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 8px;
+ background: var(--brand-surface-soft, #F4FBF8);
+ list-style: none;
+}
+
+.markdown .badge-checklist li {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ font-size: 0.95rem;
+}
+
+.markdown .badge-checklist li::before {
+ content: "✓";
+ flex: none;
+ display: grid;
+ place-items: center;
+ width: 20px;
+ height: 20px;
+ margin-top: 3px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: #fff;
+ font-size: 0.75rem;
+ font-weight: 800;
+}
+
+.markdown .badge-checklist li.badge-checklist-label {
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--brand-primary-deep, #0B7A58);
+}
+
+.markdown .badge-checklist li.badge-checklist-label::before {
+ display: none;
+}
+
+.markdown .badge-linkedin {
+ color: #0A66C2;
+ font-weight: 600;
+}
+
+/* screenshots */
+.badge-shot {
+ margin: 14px 0 0;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 8px;
+ background: var(--ifm-background-surface-color);
+}
+
+.badge-shot img {
+ display: block;
+ width: 100%;
+}
+
+.badge-shot figcaption {
+ padding: 6px 10px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ font-size: 0.78rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-shot--narrow {
+ width: 360px;
+ max-width: 100%;
+}
+
+.badge-shots {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ margin: 14px 0 0;
+}
+
+.badge-shots .badge-shot {
+ margin: 0;
+}
+
+/* show-off tabs */
+.markdown .badge-ministeps ol {
+ display: grid;
+ gap: 8px;
+ padding-left: 0;
+ list-style: none;
+ counter-reset: badge-ministep;
+}
+
+.markdown .badge-ministeps li {
+ position: relative;
+ padding-left: 36px;
+ counter-increment: badge-ministep;
+}
+
+.markdown .badge-ministeps li::before {
+ content: counter(badge-ministep, lower-alpha);
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: grid;
+ place-items: center;
+ width: 26px;
+ height: 26px;
+ border: 2px solid var(--ifm-color-primary);
+ border-radius: 50%;
+ color: var(--ifm-color-primary);
+ font-size: 0.8rem;
+ font-weight: 700;
+}
+
+.markdown .badge-where {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin: 12px 0 0 !important;
+ padding: 0;
+ list-style: none;
+}
+
+.markdown .badge-where li {
+ padding: 4px 12px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 999px;
+ background: var(--ifm-background-surface-color);
+ font-size: 0.875rem;
+}
+
+/* questions */
+.badge-questions {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 16px;
+ align-items: center;
+ margin: 0 0 8px;
+ padding: 16px 20px;
+ border-radius: 10px;
+}
+
+.badge-questions {
+ border: 1px solid var(--ifm-color-emphasis-200);
+ background: var(--ifm-color-emphasis-100);
+}
+
+.badge-questions-title {
+ display: block;
+ margin: 0 0 4px;
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--ifm-font-color-base);
+}
+
+.badge-questions-text {
+ margin: 0;
+ font-size: 0.95rem;
+ line-height: 1.55;
+}
+
+/* buttons: the site's .markdown a rule (markdown.scss) outranks Infima's
.button color, so restate it */
+.markdown .badge-button,
+.markdown .badge-button:hover,
+.markdown .badge-button:active {
+ color: var(--ifm-button-color);
+}
+
+/* Infima's primary hover uses --ifm-color-primary-dark, which is a blue
leftover on this site */
+.badge-button.button--primary:not(.button--outline):hover,
+.badge-button.button--primary:not(.button--outline):active {
+ --ifm-button-background-color: var(--brand-primary-deep, #0B7A58);
+ --ifm-button-border-color: var(--brand-primary-deep, #0B7A58);
+}
+
+.markdown .badge-questions-text,
+.markdown .badge-closing-signature {
+ margin-bottom: 0 !important;
+}
+
+.markdown .badge-closing-text {
+ margin-bottom: 8px !important;
+}
+
+/* closing */
+.badge-closing {
+ margin: 40px 0 0;
+ padding: 6px 0 6px 22px;
+ border-left: 4px solid var(--ifm-color-primary);
+}
+
+.badge-closing-text {
+ margin: 0 0 8px;
+ font-size: 1.05rem;
+ line-height: 1.6;
+}
+
+.badge-closing-signature {
+ margin: 10px 0 0;
+ font-size: 0.95rem;
+ font-weight: 700;
+ color: var(--ifm-font-color-base);
+}
+
+@media (max-width: 996px) {
+ .badge-family {
+ display: flex;
+ overflow-x: auto;
+ padding-bottom: 6px;
+ scroll-snap-type: x mandatory;
+ }
+
+ .badge-card {
+ flex: 0 0 190px;
+ scroll-snap-align: start;
+ }
+}
+
+@media (max-width: 700px) {
+ .badge-hero {
+ grid-template-columns: 1fr;
+ justify-items: start;
+ padding: 22px 20px;
+ }
+
+ .badge-hero-image {
+ width: 170px;
+ }
+
+ .badge-step {
+ grid-template-columns: 40px minmax(0, 1fr);
+ gap: 0 12px;
+ }
+
+ .badge-step-number {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ }
+
+ .badge-step::before {
+ left: 19px;
+ top: 40px;
+ }
+
+ .badge-step-body {
+ padding: 14px 16px 16px;
+ }
+
+ .badge-shots,
+ .badge-questions {
+ grid-template-columns: 1fr;
+ }
+}
+`}</style>
+
+<div className="badge-hero">
+ <img className="badge-hero-image"
src="/images/community-badges/badge-contributor.png" alt="Apache Doris
Contributor badge" width="230" height="230" />
+ <div>
+ <div className="badge-hero-eyebrow">Apache Doris community badges · No
closing date</div>
+ <div className="badge-hero-lead">Merged a pull request into Apache Doris?
Claim your Contributor Badge.</div>
+ <div className="badge-hero-desc">A digital badge for people who have
contributed to Apache Doris. It lives on Holopin and costs nothing to claim.
Post about it on LinkedIn afterwards and we'll mail you the physical version as
well.</div>
+ <div className="badge-eligibility">
+ <span className="badge-eligibility-tick" aria-hidden="true">✓</span>
+ <div>
+ <strong>You qualify with a single merged pull request in the Apache
Doris project.</strong>
+ <span>It doesn't matter how many PRs you have or how long ago they
were merged. A docs fix from three years back counts.</span>
+ </div>
+ </div>
+ <div className="badge-hero-cta">
+ <a className="badge-button button button--primary button--lg"
href="#step-1">Claim your digital badge →</a>
+ <span className="badge-hero-note">Already received a Holopin invitation
from us? Jump straight to <a href="#step-3">step 3</a>.</span>
+ </div>
+ </div>
+ <div className="badge-journey" aria-label="How the program works">
+ <span className="badge-journey-stage"><i>Steps 1-3</i> Digital badge</span>
+ <span className="badge-journey-arrow" aria-hidden="true">→</span>
+ <span className="badge-journey-stage"><i>Step 4</i> Show it off</span>
+ <span className="badge-journey-arrow" aria-hidden="true">→</span>
+ <span className="badge-journey-stage"><i>Steps 5-6</i> Physical
badge</span>
+ <span className="badge-journey-hint">Steps 5 and 6 are optional and come
after you've claimed the digital badge.</span>
+ </div>
+</div>
+
+## The five community badges {#badges}
+
+Each badge recognizes a different kind of contribution. You can claim the
Contributor badge today. The community awards the other four, and we'll add the
criteria and the process for each one to this page once they're settled.
+
+<div className="badge-family">
+ <a className="badge-card badge-card--open" href="#digital-badge">
+ <img src="/images/community-badges/badge-contributor.png" alt="Apache
Doris Contributor badge" width="104" height="104" />
+ <strong>Contributor</strong>
+ <span>Code, docs, ideas or other work, with at least one PR merged.</span>
+ <em className="badge-chip badge-chip--open">Open now</em>
+ </a>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-committer.png" alt="Apache Doris
Committer badge" width="104" height="104" />
+ <strong>Committer</strong>
+ <span>Commit access, earned through sustained and trusted
contributions.</span>
+ <em className="badge-chip">Coming soon</em>
+ </div>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-pmc-member.png" alt="Apache Doris
PMC Member badge" width="104" height="104" />
+ <strong>PMC Member</strong>
+ <span>Guides the project's technical direction and community
governance.</span>
+ <em className="badge-chip">Coming soon</em>
+ </div>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-active-contributor-2026.png"
alt="Apache Doris Active Contributor 2026 badge" width="104" height="104" />
+ <strong>Active Contributor 2026</strong>
+ <span>Consistent and impactful contributions during the year.</span>
+ <em className="badge-chip">Coming soon</em>
+ </div>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-community-champion-2026.png"
alt="Apache Doris Community Champion 2026 badge" width="104" height="104" />
+ <strong>Community Champion 2026</strong>
+ <span>Major features, user stories, talks, events or other community
initiatives.</span>
+ <em className="badge-chip">Coming soon</em>
+ </div>
+</div>
+
+{/* TODO: publish the criteria and claim process for Active Contributor 2026,
Committer, Community Champion 2026 and PMC Member. Each badge gets its own
section; turn its card above into a link (like the Contributor card) once the
section exists. */}
+
+## Get your digital Contributor badge in 4 steps {#digital-badge}
+
+We check every claim by hand before Holopin sends the invitation, so the first
step is proving the GitHub account is yours.
+
+<div className="badge-steps">
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">1</span>
+<div className="badge-step-body">
+
+### Add the passphrase to your GitHub profile README {#step-1}
+
+Temporarily add this line anywhere in your profile README (the
`username/username` repository):
+
+```text
+Apache Doris Community Badge
+```
+
+<div className="badge-step-why"><strong>Why?</strong> Anyone can type a GitHub
ID into a form, so we need proof that the account is yours. Once you have your
badge, delete the line and put the badge there instead.</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">2</span>
+<div className="badge-step-body">
+
+### Fill out the claim form {#step-2}
+
+We need two things: your GitHub ID, so we can find the merged PR, and an email
address for the badge invitation.
+
+<div className="badge-step-action">
+ <a className="badge-button button button--primary"
href="https://forms.gle/xTcnWLqDuBeFfnAD8"; target="_blank" rel="noopener
noreferrer">Open the claim form →</a>
+ <span>Takes about a minute.</span>
+</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">3</span>
+<div className="badge-step-body">
+
+### Claim it on Holopin {#step-3}
+
+After we've checked your PR, Holopin will email you an invitation. Click
**Claim Badge** and sign in with GitHub. If you don't have a Holopin account
yet, creating one is free.
+
+<figure className="badge-shot badge-shot--narrow">
+ <img src="/images/community-badges/holopin-claim.jpg" alt="Holopin claim
screen showing the Apache Doris badge and a Claim button" />
+ <figcaption>The Holopin claim screen</figcaption>
+</figure>
+
+<div className="badge-step-why">The badge then sits on your Holopin credential
page, which anyone can open to check it, so you can link to it from wherever
you like.</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">4</span>
+<div className="badge-step-body">
+
+### Show off your badge {#step-4}
+
+The badge is the community's way of saying your work mattered. Put it wherever
you like.
+
+<Tabs groupId="badge-showoff">
+<TabItem value="github" label="GitHub profile" default>
+
+<div className="badge-ministeps">
+
+1. On Holopin, open **Your Profile**.
+2. Add the Apache Doris Contributor Badge to your **Board**. Move, resize, or
rotate it if you have several badges.
+3. Copy the code shown under your Board and paste it into your GitHub profile
README.
+
+</div>
+
+<div className="badge-shots">
+ <figure className="badge-shot">
+ <img src="/images/community-badges/holopin-board-embed-code.jpg"
alt="Holopin board with the embed code shown below it" />
+ <figcaption>Copy the embed code under your Board</figcaption>
+ </figure>
+ <figure className="badge-shot">
+ <img src="/images/community-badges/github-profile-badge.jpg" alt="GitHub
profile README showing the Apache Doris Contributor badge" />
+ <figcaption>The badge on a GitHub profile</figcaption>
+ </figure>
+</div>
+
+</TabItem>
+<TabItem value="linkedin" label="LinkedIn">
+
+Add it under **Licenses & Certifications** on your LinkedIn profile:
+
+- Name: Apache Doris Contributor
+- Issuing organization: Apache Doris
+- Credential URL: your Holopin badge link
+
+<figure className="badge-shot">
+ <img src="/images/community-badges/linkedin-certification.jpg" alt="LinkedIn
Licenses and Certifications entry for the Apache Doris Contributor badge" />
+ <figcaption>Licenses & Certifications on LinkedIn</figcaption>
+</figure>
+
+</TabItem>
+<TabItem value="anywhere" label="Anywhere else">
+
+Your Holopin credential page is a stable link that anyone can check. Add it
wherever a record of your contribution helps:
+
+<ul className="badge-where">
+ <li>Résumé / CV</li>
+ <li>Personal website or portfolio</li>
+ <li>Other developer & community profiles</li>
+ <li>Conference speaker bios</li>
+</ul>
+
+</TabItem>
+</Tabs>
+
+</div>
+</div>
+
+</div>
+
+## Want the physical badge too? Two more steps {#physical-badge}
+
+You can apply as soon as you've claimed your digital badge, since the LinkedIn
post in step 5 needs to show it. Everyone who holds a digital badge is eligible.
+
+<div className="badge-steps badge-steps--optional">
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">5</span>
+<div className="badge-step-body">
+
+### Share your badge on LinkedIn {#step-5}
+
+Write a LinkedIn post about your new badge. Say whatever you like: what you
built or fixed, or how you ended up in the community in the first place. The
only requirements are the three below.
+
+<ul className="badge-checklist">
+ <li className="badge-checklist-label">Your post must include</li>
+ <li><span>A mention of the official <a className="badge-linkedin"
href="https://www.linkedin.com/company/doris-apache";>@Apache Doris</a> LinkedIn
page</span></li>
+ <li><span>The hashtag <span
className="badge-linkedin">#ApacheDorisCommunityBadge</span></span></li>
+ <li><span>Your badge image or Holopin badge link</span></li>
+</ul>
+
+<div className="badge-shots">
+ <figure className="badge-shot">
+ <img src="/images/community-badges/holopin-share.jpg" alt="Holopin badge
page with a Share on LinkedIn button" />
+ <figcaption>Share straight from Holopin…</figcaption>
+ </figure>
+ <figure className="badge-shot">
+ <img src="/images/community-badges/linkedin-post.jpg" alt="LinkedIn post
composer with the badge attached" />
+ <figcaption>…or write your own post</figcaption>
+ </figure>
+</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">6</span>
+<div className="badge-step-body">
+
+### Submit your shipping details {#step-6}
+
+After publishing your post, fill in the physical badge form with the post link
and your shipping address.
+
+<div className="badge-step-action">
+ <a className="badge-button button button--primary"
href="https://forms.gle/cqG5SchErhoMDDB87"; target="_blank" rel="noopener
noreferrer">Apply for the physical badge →</a>
+</div>
+
+<div className="badge-step-why">We'll check the post, then email you when we
start preparing your shipment.</div>
+
+</div>
+</div>
+
+</div>
+
+:::info Shipping is worldwide, but not guaranteed
+
+Delivery times vary a lot by country, and in some places customs rules or
carrier restrictions can stop a package altogether. We'll do our best to get
the badge to you, but we can't promise it will reach every address.
+
+:::
+
+## Questions? {#questions}
+
+<div className="badge-questions">
+ <div>
+ <span className="badge-questions-title">Join the Apache Doris Slack and
ask us there.</span>
+ <p className="badge-questions-text">The community team answers badge
questions in Slack, including anything about the form or shipping.</p>
+ </div>
+ <a className="badge-button button button--primary"
href="https://doris.apache.org/slack?utm_source=website&utm_medium=docs&utm_content=community_badge";>Join
the Slack community →</a>
+</div>
+
+<div className="badge-closing">
+ <p className="badge-closing-text">Some contributions are large and visible.
Others are small fixes that quietly make someone's day a little easier. All of
them are part of open source, and these badges are our way of saying thank
you.</p>
+ <p className="badge-closing-text">The program has no end date. Contribute
whenever you like, and claim your badge once your pull request is merged.</p>
+ <p className="badge-closing-signature">The Apache Doris Community</p>
+</div>
diff --git
a/i18n/zh-CN/docusaurus-plugin-content-docs-community/current/how-to-contribute/community-badges.mdx
b/i18n/zh-CN/docusaurus-plugin-content-docs-community/current/how-to-contribute/community-badges.mdx
new file mode 100644
index 00000000000..1de8a97b881
--- /dev/null
+++
b/i18n/zh-CN/docusaurus-plugin-content-docs-community/current/how-to-contribute/community-badges.mdx
@@ -0,0 +1,857 @@
+---
+title: 领取你的 Apache Doris 社区徽章
+sidebar_label: 社区徽章
+language: zh-CN
+description: Apache Doris 贡献者如何在 Holopin 上领取数字 Contributor 徽章、在 GitHub 和
LinkedIn 上展示，以及如何申请实体徽章。同时介绍 Apache Doris 的五枚社区徽章。
+keywords:
+ - Apache Doris
+ - 社区徽章
+ - Contributor 徽章
+ - Holopin
+ - 实体徽章
+ - 贡献者激励
+ - 开源贡献
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<style>{`
+/* ---------- hero ---------- */
+.badge-hero {
+ display: grid;
+ grid-template-columns: 230px minmax(0, 1fr);
+ gap: 8px 32px;
+ align-items: center;
+ margin: 8px 0 32px;
+ padding: 28px 32px 24px 28px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 12px;
+ background: linear-gradient(135deg, var(--brand-surface-soft, #F4FBF8),
var(--brand-surface-note, #E8FAF5));
+}
+
+.badge-hero-image {
+ width: 230px;
+ height: auto;
+ filter: drop-shadow(0 10px 18px rgba(6, 70, 50, 0.18));
+}
+
+.badge-hero-eyebrow {
+ margin: 0 0 8px;
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--brand-primary-deep, #0B7A58);
+}
+
+.badge-hero-lead {
+ margin: 0 0 10px;
+ font-size: 1.35rem;
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--ifm-font-color-base);
+}
+
+.badge-hero-desc {
+ margin: 0 0 16px;
+ max-width: 52ch;
+ line-height: 1.6;
+}
+
+.badge-eligibility {
+ display: flex;
+ gap: 12px;
+ align-items: flex-start;
+ margin: 0 0 18px;
+ padding: 12px 14px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 8px;
+ background: var(--ifm-background-surface-color);
+}
+
+.badge-eligibility-tick {
+ flex: none;
+ display: grid;
+ place-items: center;
+ width: 26px;
+ height: 26px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: #fff;
+ font-size: 0.95rem;
+ font-weight: 800;
+}
+
+.badge-eligibility strong {
+ display: block;
+ font-size: 0.95rem;
+}
+
+.badge-eligibility span:not(.badge-eligibility-tick) {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-hero-cta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 12px;
+}
+
+.badge-hero-note {
+ flex-basis: 100%;
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-journey {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px 10px;
+ margin-top: 18px;
+ padding-top: 16px;
+ border-top: 1px dashed var(--brand-border-soft, #D9EEE8);
+ font-size: 0.85rem;
+}
+
+.badge-journey-stage {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 5px 12px 5px 6px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 999px;
+ background: var(--ifm-background-surface-color);
+}
+
+.badge-journey-stage i {
+ padding: 2px 8px;
+ border-radius: 999px;
+ background: var(--brand-surface-note, #E8FAF5);
+ color: var(--brand-primary-deep, #0B7A58);
+ font-style: normal;
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+}
+
+.badge-journey-arrow {
+ color: var(--ifm-color-primary);
+ font-weight: 700;
+}
+
+.badge-journey-hint {
+ font-size: 0.75rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+/* ---------- badge family ---------- */
+.badge-family {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 12px;
+ margin: 18px 0 8px;
+}
+
+.badge-card {
+ display: grid;
+ grid-template-rows: auto auto 1fr auto;
+ gap: 6px;
+ justify-items: center;
+ padding: 16px 10px 14px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-font-color-base);
+ text-align: center;
+ text-decoration: none;
+}
+
+.markdown a.badge-card,
+.markdown a.badge-card:hover {
+ color: var(--ifm-font-color-base);
+ text-decoration: none;
+}
+
+a.badge-card:hover {
+ border-color: var(--ifm-color-primary);
+}
+
+.badge-card--open {
+ border-color: var(--ifm-color-primary);
+ box-shadow: 0 0 0 3px var(--brand-surface-note, #E8FAF5);
+}
+
+.badge-card img {
+ width: 104px;
+ height: 104px;
+}
+
+.badge-card strong {
+ font-size: 0.9rem;
+ line-height: 1.25;
+}
+
+.badge-card span {
+ font-size: 0.76rem;
+ line-height: 1.4;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-chip {
+ display: inline-block;
+ margin-top: 4px;
+ padding: 3px 9px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 999px;
+ background: var(--ifm-color-emphasis-100);
+ color: var(--ifm-color-emphasis-700);
+ font-style: normal;
+ font-size: 0.68rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+.badge-chip--open {
+ border-color: var(--ifm-color-primary);
+ background: var(--ifm-color-primary);
+ color: #fff;
+}
+
+/* ---------- step cards ---------- */
+.badge-steps {
+ display: grid;
+ margin: 8px 0 24px;
+}
+
+.badge-step {
+ position: relative;
+ display: grid;
+ grid-template-columns: 52px minmax(0, 1fr);
+ gap: 0 18px;
+ padding-bottom: 22px;
+}
+
+.badge-step::before {
+ content: "";
+ position: absolute;
+ left: 25px;
+ top: 52px;
+ bottom: 0;
+ width: 2px;
+ background: var(--ifm-color-emphasis-300);
+}
+
+.badge-step:last-child {
+ padding-bottom: 0;
+}
+
+.badge-step:last-child::before {
+ display: none;
+}
+
+.badge-step-number {
+ display: grid;
+ place-items: center;
+ width: 52px;
+ height: 52px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: #fff;
+ font-size: 1.2rem;
+ font-weight: 800;
+ box-shadow: 0 0 0 5px var(--ifm-background-color);
+}
+
+.badge-steps--optional .badge-step-number {
+ border: 3px solid var(--ifm-color-primary);
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-color-primary);
+}
+
+.badge-step-body {
+ padding: 18px 22px 20px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.markdown .badge-step-body h3 {
+ margin-top: 0;
+ margin-bottom: 0.5rem !important;
+ font-size: 1.1rem;
+}
+
+.markdown .badge-step-body > :last-child {
+ margin-bottom: 0 !important;
+}
+
+.badge-step-action {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 12px;
+ margin: 14px 0 0;
+}
+
+.badge-step-action span {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-step-why {
+ margin: 12px 0 0;
+ font-size: 0.875rem;
+ line-height: 1.55;
+ color: var(--ifm-color-emphasis-700);
+}
+
+/* checklist */
+.markdown .badge-checklist {
+ display: grid;
+ gap: 6px;
+ margin: 10px 0 0 !important;
+ padding: 12px 16px;
+ border: 1px solid var(--brand-border-soft, #D9EEE8);
+ border-radius: 8px;
+ background: var(--brand-surface-soft, #F4FBF8);
+ list-style: none;
+}
+
+.markdown .badge-checklist li {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ font-size: 0.95rem;
+}
+
+.markdown .badge-checklist li::before {
+ content: "✓";
+ flex: none;
+ display: grid;
+ place-items: center;
+ width: 20px;
+ height: 20px;
+ margin-top: 3px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: #fff;
+ font-size: 0.75rem;
+ font-weight: 800;
+}
+
+.markdown .badge-checklist li.badge-checklist-label {
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--brand-primary-deep, #0B7A58);
+}
+
+.markdown .badge-checklist li.badge-checklist-label::before {
+ display: none;
+}
+
+.markdown .badge-linkedin {
+ color: #0A66C2;
+ font-weight: 600;
+}
+
+/* screenshots */
+.badge-shot {
+ margin: 14px 0 0;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 8px;
+ background: var(--ifm-background-surface-color);
+}
+
+.badge-shot img {
+ display: block;
+ width: 100%;
+}
+
+.badge-shot figcaption {
+ padding: 6px 10px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ font-size: 0.78rem;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.badge-shot--narrow {
+ width: 360px;
+ max-width: 100%;
+}
+
+.badge-shots {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ margin: 14px 0 0;
+}
+
+.badge-shots .badge-shot {
+ margin: 0;
+}
+
+/* show-off tabs */
+.markdown .badge-ministeps ol {
+ display: grid;
+ gap: 8px;
+ padding-left: 0;
+ list-style: none;
+ counter-reset: badge-ministep;
+}
+
+.markdown .badge-ministeps li {
+ position: relative;
+ padding-left: 36px;
+ counter-increment: badge-ministep;
+}
+
+.markdown .badge-ministeps li::before {
+ content: counter(badge-ministep, lower-alpha);
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: grid;
+ place-items: center;
+ width: 26px;
+ height: 26px;
+ border: 2px solid var(--ifm-color-primary);
+ border-radius: 50%;
+ color: var(--ifm-color-primary);
+ font-size: 0.8rem;
+ font-weight: 700;
+}
+
+.markdown .badge-where {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin: 12px 0 0 !important;
+ padding: 0;
+ list-style: none;
+}
+
+.markdown .badge-where li {
+ padding: 4px 12px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 999px;
+ background: var(--ifm-background-surface-color);
+ font-size: 0.875rem;
+}
+
+/* questions */
+.badge-questions {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 16px;
+ align-items: center;
+ margin: 0 0 8px;
+ padding: 16px 20px;
+ border-radius: 10px;
+}
+
+.badge-questions {
+ border: 1px solid var(--ifm-color-emphasis-200);
+ background: var(--ifm-color-emphasis-100);
+}
+
+.badge-questions-title {
+ display: block;
+ margin: 0 0 4px;
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--ifm-font-color-base);
+}
+
+.badge-questions-text {
+ margin: 0;
+ font-size: 0.95rem;
+ line-height: 1.55;
+}
+
+/* buttons: the site's .markdown a rule (markdown.scss) outranks Infima's
.button color, so restate it */
+.markdown .badge-button,
+.markdown .badge-button:hover,
+.markdown .badge-button:active {
+ color: var(--ifm-button-color);
+}
+
+/* Infima's primary hover uses --ifm-color-primary-dark, which is a blue
leftover on this site */
+.badge-button.button--primary:not(.button--outline):hover,
+.badge-button.button--primary:not(.button--outline):active {
+ --ifm-button-background-color: var(--brand-primary-deep, #0B7A58);
+ --ifm-button-border-color: var(--brand-primary-deep, #0B7A58);
+}
+
+.markdown .badge-questions-text,
+.markdown .badge-closing-signature {
+ margin-bottom: 0 !important;
+}
+
+.markdown .badge-closing-text {
+ margin-bottom: 8px !important;
+}
+
+/* closing */
+.badge-closing {
+ margin: 40px 0 0;
+ padding: 6px 0 6px 22px;
+ border-left: 4px solid var(--ifm-color-primary);
+}
+
+.badge-closing-text {
+ margin: 0 0 8px;
+ font-size: 1.05rem;
+ line-height: 1.6;
+}
+
+.badge-closing-signature {
+ margin: 10px 0 0;
+ font-size: 0.95rem;
+ font-weight: 700;
+ color: var(--ifm-font-color-base);
+}
+
+@media (max-width: 996px) {
+ .badge-family {
+ display: flex;
+ overflow-x: auto;
+ padding-bottom: 6px;
+ scroll-snap-type: x mandatory;
+ }
+
+ .badge-card {
+ flex: 0 0 190px;
+ scroll-snap-align: start;
+ }
+}
+
+@media (max-width: 700px) {
+ .badge-hero {
+ grid-template-columns: 1fr;
+ justify-items: start;
+ padding: 22px 20px;
+ }
+
+ .badge-hero-image {
+ width: 170px;
+ }
+
+ .badge-step {
+ grid-template-columns: 40px minmax(0, 1fr);
+ gap: 0 12px;
+ }
+
+ .badge-step-number {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ }
+
+ .badge-step::before {
+ left: 19px;
+ top: 40px;
+ }
+
+ .badge-step-body {
+ padding: 14px 16px 16px;
+ }
+
+ .badge-shots,
+ .badge-questions {
+ grid-template-columns: 1fr;
+ }
+}
+`}</style>
+
+<div className="badge-hero">
+ <img className="badge-hero-image"
src="/images/community-badges/badge-contributor.png" alt="Apache Doris
Contributor 徽章" width="230" height="230" />
+ <div>
+ <div className="badge-hero-eyebrow">Apache Doris 社区徽章 · 长期开放</div>
+ <div className="badge-hero-lead">在 Apache Doris 合入过 PR？来领你的 Contributor
徽章。</div>
+ <div className="badge-hero-desc">这是一枚颁给 Apache Doris 贡献者的数字徽章，托管在 Holopin
上，领取不花一分钱。领到之后在 LinkedIn 发一条动态，我们再把实体徽章寄给你。</div>
+ <div className="badge-eligibility">
+ <span className="badge-eligibility-tick" aria-hidden="true">✓</span>
+ <div>
+ <strong>只要在 Apache Doris 项目有一个被合入的 PR，就符合条件。</strong>
+ <span>PR 有几个、什么时候合入的，都不影响。三年前修过一处文档，也算。</span>
+ </div>
+ </div>
+ <div className="badge-hero-cta">
+ <a className="badge-button button button--primary button--lg"
href="#step-1">领取数字徽章 →</a>
+ <span className="badge-hero-note">已经收到我们发的 Holopin 邀请？直接跳到<a
href="#step-3">第 3 步</a>。</span>
+ </div>
+ </div>
+ <div className="badge-journey" aria-label="流程说明">
+ <span className="badge-journey-stage"><i>第 1–3 步</i> 数字徽章</span>
+ <span className="badge-journey-arrow" aria-hidden="true">→</span>
+ <span className="badge-journey-stage"><i>第 4 步</i> 展示徽章</span>
+ <span className="badge-journey-arrow" aria-hidden="true">→</span>
+ <span className="badge-journey-stage"><i>第 5–6 步</i> 实体徽章</span>
+ <span className="badge-journey-hint">第 5、6 步是可选的，领到数字徽章之后再做。</span>
+ </div>
+</div>
+
+## 五枚社区徽章 {#badges}
+
+每枚徽章对应一种贡献。Contributor 徽章现在就能领。另外四枚由社区评定，标准和领取流程定下来之后，我们会补充到这个页面。
+
+<div className="badge-family">
+ <a className="badge-card badge-card--open" href="#digital-badge">
+ <img src="/images/community-badges/badge-contributor.png" alt="Apache
Doris Contributor 徽章" width="104" height="104" />
+ <strong>Contributor</strong>
+ <span>代码、文档、想法或其他形式的贡献，至少有一个 PR 被合入。</span>
+ <em className="badge-chip badge-chip--open">现已开放</em>
+ </a>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-committer.png" alt="Apache Doris
Committer 徽章" width="104" height="104" />
+ <strong>Committer</strong>
+ <span>通过持续、可信赖的贡献获得的代码提交权限。</span>
+ <em className="badge-chip">即将推出</em>
+ </div>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-pmc-member.png" alt="Apache Doris
PMC Member 徽章" width="104" height="104" />
+ <strong>PMC Member</strong>
+ <span>把握项目的技术方向，参与社区治理。</span>
+ <em className="badge-chip">即将推出</em>
+ </div>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-active-contributor-2026.png"
alt="Apache Doris Active Contributor 2026 徽章" width="104" height="104" />
+ <strong>Active Contributor 2026</strong>
+ <span>这一年里持续、有分量的贡献。</span>
+ <em className="badge-chip">即将推出</em>
+ </div>
+ <div className="badge-card">
+ <img src="/images/community-badges/badge-community-champion-2026.png"
alt="Apache Doris Community Champion 2026 徽章" width="104" height="104" />
+ <strong>Community Champion 2026</strong>
+ <span>重要功能、用户案例、演讲、活动或其他社区工作。</span>
+ <em className="badge-chip">即将推出</em>
+ </div>
+</div>
+
+{/* TODO：补充 Active Contributor 2026、Committer、Community Champion 2026 和 PMC
Member 的评定标准与领取流程。每枚徽章单独成节；对应章节写好后，把上面的卡片改成链接（参考 Contributor 卡片）。 */}
+
+## 四步领取数字 Contributor 徽章 {#digital-badge}
+
+Holopin 发出邀请之前，每一份申请我们都会人工核对，所以第一步是证明这个 GitHub 账号是你的。
+
+<div className="badge-steps">
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">1</span>
+<div className="badge-step-body">
+
+### 在 GitHub 个人主页 README 里加一句口令 {#step-1}
+
+在你的个人主页 README（也就是 `username/username` 仓库）里，随便找个位置临时加上这一行：
+
+```text
+Apache Doris Community Badge
+```
+
+<div className="badge-step-why"><strong>为什么要这一步？</strong>任何人都能在表单里填一个 GitHub
ID，我们得确认这个账号真的是你的。拿到徽章之后，把这一行删掉，换成徽章就行。</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">2</span>
+<div className="badge-step-body">
+
+### 填写申领表单 {#step-2}
+
+我们只需要两样东西：你的 GitHub ID，用来查找被合入的 PR；还有一个邮箱，用来接收徽章邀请。
+
+<div className="badge-step-action">
+ <a className="badge-button button button--primary"
href="https://forms.gle/xTcnWLqDuBeFfnAD8"; target="_blank" rel="noopener
noreferrer">打开申领表单 →</a>
+ <span>大约一分钟就能填完。</span>
+</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">3</span>
+<div className="badge-step-body">
+
+### 在 Holopin 上领取 {#step-3}
+
+我们核对完你的 PR 之后，Holopin 会给你发一封邀请邮件。点击 **Claim Badge**，用 GitHub 账号登录即可。还没有
Holopin 账号的话，注册是免费的。
+
+<figure className="badge-shot badge-shot--narrow">
+ <img src="/images/community-badges/holopin-claim.jpg" alt="Holopin 领取页面，显示
Apache Doris 徽章和 Claim 按钮" />
+ <figcaption>Holopin 的领取页面</figcaption>
+</figure>
+
+<div className="badge-step-why">徽章随后会出现在你的 Holopin
凭证页上。这个页面谁都能打开核对，链接想贴在哪里都行。</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">4</span>
+<div className="badge-step-body">
+
+### 把徽章亮出来 {#step-4}
+
+这枚徽章是社区在对你说：你做的事有价值。想放在哪里，就放在哪里。
+
+<Tabs groupId="badge-showoff">
+<TabItem value="github" label="GitHub 个人主页" default>
+
+<div className="badge-ministeps">
+
+1. 在 Holopin 打开 **Your Profile**。
+2. 把 Apache Doris Contributor 徽章添加到你的 **Board**。如果有多枚徽章，可以拖动、缩放或旋转。
+3. 复制 Board 下方显示的代码，粘贴到你的 GitHub 个人主页 README 里。
+
+</div>
+
+<div className="badge-shots">
+ <figure className="badge-shot">
+ <img src="/images/community-badges/holopin-board-embed-code.jpg"
alt="Holopin Board 及其下方显示的嵌入代码" />
+ <figcaption>复制 Board 下方的嵌入代码</figcaption>
+ </figure>
+ <figure className="badge-shot">
+ <img src="/images/community-badges/github-profile-badge.jpg" alt="GitHub
个人主页 README 中显示的 Apache Doris Contributor 徽章" />
+ <figcaption>展示在 GitHub 个人主页上的徽章</figcaption>
+ </figure>
+</div>
+
+</TabItem>
+<TabItem value="linkedin" label="LinkedIn">
+
+在 LinkedIn 个人资料的 **Licenses & Certifications**（执照和证书）栏目下添加一条：
+
+- Name（名称）：Apache Doris Contributor
+- Issuing organization（颁发机构）：Apache Doris
+- Credential URL（证书链接）：你的 Holopin 徽章链接
+
+<figure className="badge-shot">
+ <img src="/images/community-badges/linkedin-certification.jpg" alt="LinkedIn
Licenses and Certifications 栏目中的 Apache Doris Contributor 徽章条目" />
+ <figcaption>LinkedIn 上的 Licenses & Certifications</figcaption>
+</figure>
+
+</TabItem>
+<TabItem value="anywhere" label="其他地方">
+
+你的 Holopin 凭证页是一个固定链接，任何人都能打开核对。凡是用得着贡献记录的地方，都可以放上去：
+
+<ul className="badge-where">
+ <li>简历</li>
+ <li>个人网站或作品集</li>
+ <li>其他开发者和社区平台的个人资料</li>
+ <li>会议演讲者简介</li>
+</ul>
+
+</TabItem>
+</Tabs>
+
+</div>
+</div>
+
+</div>
+
+## 还想要实体徽章？再加两步 {#physical-badge}
+
+数字徽章一到手就可以申请，因为第 5 步的 LinkedIn 动态里要带上它。持有数字徽章的人都有资格。
+
+<div className="badge-steps badge-steps--optional">
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">5</span>
+<div className="badge-step-body">
+
+### 在 LinkedIn 上分享你的徽章 {#step-5}
+
+在 LinkedIn 发一条动态，聊聊你新领到的徽章。内容随你：做了什么功能、修了什么问题，或者当初是怎么加入这个社区的。只有下面三点是必须包含的。
+
+<ul className="badge-checklist">
+ <li className="badge-checklist-label">动态里必须包含</li>
+ <li><span>提及 <a className="badge-linkedin"
href="https://www.linkedin.com/company/doris-apache";>@Apache Doris</a> 官方
LinkedIn 主页</span></li>
+ <li><span>话题标签 <span
className="badge-linkedin">#ApacheDorisCommunityBadge</span></span></li>
+ <li><span>你的徽章图片或 Holopin 徽章链接</span></li>
+</ul>
+
+<div className="badge-shots">
+ <figure className="badge-shot">
+ <img src="/images/community-badges/holopin-share.jpg" alt="Holopin 徽章页面上的
Share on LinkedIn 按钮" />
+ <figcaption>直接从 Holopin 分享……</figcaption>
+ </figure>
+ <figure className="badge-shot">
+ <img src="/images/community-badges/linkedin-post.jpg" alt="附上徽章图片的
LinkedIn 动态编辑框" />
+ <figcaption>……或者自己写一条</figcaption>
+ </figure>
+</div>
+
+</div>
+</div>
+
+<div className="badge-step">
+<span className="badge-step-number" aria-hidden="true">6</span>
+<div className="badge-step-body">
+
+### 提交邮寄信息 {#step-6}
+
+动态发出去之后，在实体徽章表单里填上动态链接和你的收件地址。
+
+<div className="badge-step-action">
+ <a className="badge-button button button--primary"
href="https://forms.gle/cqG5SchErhoMDDB87"; target="_blank" rel="noopener
noreferrer">申请实体徽章 →</a>
+</div>
+
+<div className="badge-step-why">我们会先核对动态，开始准备寄送时会邮件通知你。</div>
+
+</div>
+</div>
+
+</div>
+
+:::info 全球寄送，但不保证送达
+
+各国的投递时间差别很大，有些地方的海关规定或快递限制会让包裹根本进不去。我们会尽力把徽章寄到你手上，但没办法保证每个地址都能收到。
+
+:::
+
+## 有问题？ {#questions}
+
+<div className="badge-questions">
+ <div>
+ <span className="badge-questions-title">加入 Apache Doris
Slack，在那里问我们。</span>
+ <p className="badge-questions-text">社区团队会在 Slack
里回答徽章相关的问题，表单和寄送方面的疑问也可以问。</p>
+ </div>
+ <a className="badge-button button button--primary"
href="https://doris.apache.org/slack?utm_source=website&utm_medium=docs&utm_content=community_badge";>加入
Slack 社群 →</a>
+</div>
+
+<div className="badge-closing">
+ <p
className="badge-closing-text">有些贡献很大，人人都看得见。有些只是一处小修改，悄悄让别人的一天轻松了一点。它们都是开源的一部分，这些徽章是我们说谢谢的方式。</p>
+ <p className="badge-closing-text">这个计划没有截止日期。什么时候想贡献都可以，PR 合入之后就来领徽章。</p>
+ <p className="badge-closing-signature">Apache Doris 社区</p>
+</div>
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current.json
b/i18n/zh-CN/docusaurus-plugin-content-docs/current.json
index 3bd03320aeb..d0d61321851 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/current.json
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current.json
@@ -3,6 +3,18 @@
"message": "dev",
"description": "The label for version current"
},
+ "sidebar.docs.category.Get Started": {
+ "message": "快速入门",
+ "description": "The label for category Get Started in sidebar docs"
+ },
+ "sidebar.docs.category.Solutions": {
+ "message": "解决方案",
+ "description": "The label for category Solutions in sidebar docs"
+ },
+ "sidebar.docs.category.Operate & Maintain": {
+ "message": "运维管理",
+ "description": "The label for category Operate & Maintain in sidebar docs"
+ },
"sidebar.docs.category.Getting Started": {
"message": "快速开始",
"description": "The label for category Getting Started in sidebar docs"
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-4.x.json
b/i18n/zh-CN/docusaurus-plugin-content-docs/version-4.x.json
index 96a00ff1c68..e609218ba19 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/version-4.x.json
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/version-4.x.json
@@ -3,6 +3,18 @@
"message": "dev",
"description": "The label for version current"
},
+ "sidebar.docs.category.Get Started": {
+ "message": "快速入门",
+ "description": "The label for category Get Started in sidebar docs"
+ },
+ "sidebar.docs.category.Solutions": {
+ "message": "解决方案",
+ "description": "The label for category Solutions in sidebar docs"
+ },
+ "sidebar.docs.category.Operate & Maintain": {
+ "message": "运维管理",
+ "description": "The label for category Operate & Maintain in sidebar docs"
+ },
"sidebar.docs.category.Getting Started": {
"message": "快速开始",
"description": "The label for category Getting Started in sidebar docs"
diff --git a/sidebarsCommunity.json b/sidebarsCommunity.json
index f93b2c03cb2..6746616fe17 100644
--- a/sidebarsCommunity.json
+++ b/sidebarsCommunity.json
@@ -17,6 +17,7 @@
"label": "How to Contribute",
"items": [
"how-to-contribute/contribute-to-doris",
+ "how-to-contribute/community-badges",
"how-to-contribute/pull-request",
"how-to-contribute/review-and-ci",
{
diff --git a/src/components/Icons/doris-logo-horizontal.tsx
b/src/components/Icons/doris-logo-horizontal.tsx
new file mode 100644
index 00000000000..7cd81a205e0
--- /dev/null
+++ b/src/components/Icons/doris-logo-horizontal.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface DorisLogoHorizontalProps {
+ className?: string;
+}
+
+/**
+ * Inline copy of static/images/brand-assets/doris-logo-horizontal-white.svg.
+ *
+ * The brand file has a 318x193 canvas with ~40 units of empty margin on every
+ * side of the artwork, so an <img> box is a third wider than the visible logo.
+ * The viewBox here is cropped to the artwork (x 40-278, y 55-138) so the box
+ * hugs it, which is what lets the mobile navbar fit everything on one row.
+ */
+export function DorisLogoHorizontal({ className }: DorisLogoHorizontalProps) {
+ return (
+ <svg
+ className={className}
+ viewBox="40 55 238 83"
+ fill="#fff"
+ xmlns="http://www.w3.org/2000/svg";
+ aria-hidden="true"
+ focusable="false"
+ >
+ <path
d="M77.24,68.09l-8.85-8.85c-2.35-2.35-5.54-3.63-8.64-3.63-2.88,0-5.76,1.07-8,3.2-2.24,2.24-3.52,5.12-3.52,8.32s1.17,6.08,3.41,8.32l16.1,16.1c.64.64,1.81.64,2.56,0l6.93-6.93c.43-.53,7.78-8.85,0-16.53Z"
/>
+ <path
d="M91.85,82.27c-1.71-1.6-3.41-3.31-5.01-5.22l-.11-.11c0,.11-.11.32-.11.53-.64,3.84-2.45,7.25-5.44,10.24-9.38,9.28-18.87,18.87-28.04,28.04l-1.17,1.17c-2.13,2.13-3.31,4.37-3.63,6.61-.43,3.41.75,7.25,3.31,10.02,2.24,2.45,5.22,3.73,8.42,3.62,3.63.11,5.44-.43,8.1-2.98,10.66-10.45,21.32-21,29.43-29,3.84-3.84,4.69-10.02,2.03-14.29-2.24-3.31-5.01-5.97-7.78-8.64Z"
/>
+ <path
d="M40.25,76.73v39.34c0,1.07.75,1.71,1.39,2.03.64.32,1.6.32,2.35-.43l19.83-19.83c.75-.75.75-2.03,0-2.88l-19.83-19.83c-.43-.43-1.07-.64-1.49-.64-.32,0-.64.11-.85.21-.64.32-1.39.96-1.39,2.03Z"
/>
+ <path
d="M126.61,113.08v-33.37h9.92c10.87,0,17.59,6.4,17.59,16.63s-6.72,16.63-17.59,16.63h-9.92v.11ZM131.94,108.29h4.8c7.36,0,12.05-4.69,12.05-11.83s-4.69-11.83-12.05-11.83h-4.8v23.67Z"
/>
+ <path
d="M177.89,113.62c-9.6,0-17.38-7.78-17.38-17.27s7.78-17.17,17.38-17.17,17.38,7.57,17.38,17.17c.11,9.7-7.57,17.27-17.38,17.27ZM177.89,84.08c-6.61,0-12.05,5.44-12.05,12.26s5.44,12.37,12.05,12.37,12.15-5.65,12.15-12.37-5.44-12.26-12.15-12.26Z"
/>
+ <path d="M244.42,79.71h-5.44v33.37h5.44v-33.37Z" />
+ <path
d="M264.57,113.62c-4.69,0-8.53-1.39-10.24-2.24v-4.9c2.35,1.07,6.08,2.35,10.24,2.35s7.14-1.92,7.14-4.8c0-3.2-3.52-4.58-7.14-5.86-5.76-2.13-10.13-4.16-10.13-9.7,0-6.82,6.18-9.28,11.52-9.28,4.05,0,7.25,1.07,8.74,1.6v4.8c-2.13-.85-5.33-1.81-8.85-1.81-4.05,0-5.97,2.13-5.97,4.26,0,2.88,3.09,3.94,6.72,5.22,6.29,2.24,11.09,4.48,11.09,10.45-.11,5.86-5.44,9.92-13.11,9.92Z"
/>
+ <path
d="M219.9,99.54l2.03-.85c2.77-1.17,5.97-4.26,5.97-9.06,0-5.97-4.37-9.92-10.98-9.92h-12.69v33.37h5.33v-28.68h6.72c4.05,0,6.18,2.99,6.18,5.86s-2.13,5.86-6.18,5.86h-2.88c-1.28.21-.64,1.28-.64,1.28l10.77,15.57h5.97l-9.6-13.43Z"
/>
+ </svg>
+ );
+}
diff --git a/src/components/docs-domain-nav/DocsDomainNav.module.scss
b/src/components/docs-domain-nav/DocsDomainNav.module.scss
index 8979bdf1442..4da74fa4c2a 100644
--- a/src/components/docs-domain-nav/DocsDomainNav.module.scss
+++ b/src/components/docs-domain-nav/DocsDomainNav.module.scss
@@ -316,9 +316,31 @@
}
}
-@media (max-width: 420px) {
+// Phones: two rows — [Solutions ▾ … 🌐 ▾] on top, then a full-width search
+// box. `--docs-domain-nav-height` in DocRoot/Layout/styles.module.css mirrors
+// the resulting 103px (8 + 38 + 6 + 42 + 8 padding/rows + 1px border; the
+// search box is 42px because SearchBar.module.css forces its input to 2.5rem)
+// so the sticky "Browse this section" strip lands right underneath.
+@media (max-width: 768px) {
+ .root,
+ .inner {
+ min-height: 0;
+ }
+
+ .inner {
+ flex-wrap: wrap;
+ align-items: center;
+ padding: 8px 12px;
+ row-gap: 6px;
+ column-gap: 8px;
+ }
+
.mobileDomainPicker {
- flex-basis: 128px;
+ order: 1;
+ flex: 0 1 auto;
+ min-width: 0;
+ // Always leave room for the locale button on the same row.
+ max-width: calc(100% - 56px);
}
.mobileDomainPicker summary {
@@ -330,18 +352,32 @@
text-overflow: ellipsis;
}
+ // Lift search and locale out of their wrapper so they can take different
+ // rows: locale stays on the first row, search gets the second.
+ .utilities {
+ display: contents;
+ }
+
+ .locale {
+ order: 2;
+ margin-left: auto;
+ }
+
.search {
- width: 40px;
+ order: 3;
+ flex: 0 0 100%;
+ width: 100%;
margin-right: 0;
}
.search :global(.navbar__search-input) {
- padding-right: 0;
- color: transparent;
- caret-color: var(--brand-primary-deep);
+ padding-right: 0.75rem;
}
- .search :global(.navbar__search-input)::placeholder {
- color: transparent;
+ .root .search :global([class*='dropdownMenu']) {
+ left: 0 !important;
+ right: 0 !important;
+ width: auto !important;
+ max-width: none !important;
}
}
diff --git a/src/components/home-next/NavbarNext.scss
b/src/components/home-next/NavbarNext.scss
index 5abe8000eb6..c14a1abe9cf 100644
--- a/src/components/home-next/NavbarNext.scss
+++ b/src/components/home-next/NavbarNext.scss
@@ -49,18 +49,15 @@
&__logo {
display: flex;
align-items: center;
+ justify-content: center;
gap: 10px;
+ // Same 100px slot the old <img> box occupied; the cropped inline mark
+ // (see DorisLogoHorizontal) is ~75px wide and centres inside it.
+ width: 100px;
text-decoration: none !important;
flex-shrink: 0;
color: var(--nb-cream-light) !important;
- img {
- width: 100px;
- height: 36px;
- object-fit: cover;
- object-position: center;
- }
-
span {
@include type.mono-text(17px, 700, 1.2, 0.01em);
color: var(--nb-cream-light);
@@ -260,6 +257,11 @@
}
}
+ // The robot glyph is stroke-based; keep its paths unfilled.
+ .navbar-next__ask-ai-icon--compact path {
+ fill: none;
+ }
+
&:hover {
border-color: rgba(245, 239, 228, 0.45);
background: rgba(245, 239, 228, 0.06);
@@ -272,6 +274,16 @@
}
}
+ &__ask-ai-icon--full {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ &__ask-ai-icon--compact,
+ &__ask-ai-label--compact {
+ display: none;
+ }
+
&__summit {
position: relative;
isolation: isolate;
@@ -352,12 +364,17 @@
}
}
+ // Both nested under .navbar-next on purpose: the legacy
+ // src/scss/components/navbar.scss ships `.navbar a svg { display: none }`,
+ // which these need to out-rank.
.navbar-next__star-link svg {
display: inline-block;
}
- .navbar-next__logo img {
+ .navbar-next__logo-mark {
display: block;
+ width: auto;
+ height: 26px;
}
&__star-divider {
@@ -469,6 +486,12 @@
display: grid;
gap: 4px;
padding: 0 0 12px;
+
+ // `display: grid` would otherwise override the UA rule for the
+ // `hidden` attribute and keep every collapsed section expanded.
+ &[hidden] {
+ display: none;
+ }
}
&__mobile-link {
@@ -582,129 +605,127 @@
}
}
-// Tablet and phone layouts keep the utility controls on row 1, then give
-// Summit and Ask Me a dedicated full-width row each.
+// Phones: one 56px row — [menu] [logo] … [★ 15.9k gh] [AI Ask] [DOWNLOAD].
+// The Summit banner leaves the bar (it lives in the menu panel instead), the
+// star pill drops the word "Star", and Ask Me becomes a robot icon + "Ask".
@media (max-width: 768px) {
.navbar-next {
&.navbar {
height: auto;
- min-height: 64px;
+ min-height: 56px;
}
&__inner {
+ // Wrap only as a safety net for unexpectedly wide content (custom
+ // fonts, huge star counts); the sizes below fit 360px in one row.
flex-wrap: wrap;
- height: auto;
- column-gap: 5px;
- row-gap: 0;
align-items: center;
+ height: auto;
+ min-height: 56px;
+ padding: 11px 12px;
+ column-gap: 6px;
+ row-gap: 8px;
}
- &__logo {
- height: 64px;
- }
-
- // Expose the action children to the wrapping navbar layout.
+ // Expose the action children to the navbar row so they can be ordered
+ // individually.
&__actions {
display: contents;
}
- &__star-link {
- margin-left: auto;
+ &__menu-button {
+ order: 0;
+ width: 34px;
+ height: 34px;
+ flex: 0 0 34px;
}
- &__menu-button {
- margin-left: 0;
+ &__logo {
+ order: 1;
+ width: auto;
+ height: 34px;
}
- &__summit,
- &__ask-ai {
- flex: 0 0 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 38px;
- margin-left: 0;
- margin-bottom: 10px;
- padding: 0 12px;
+ // Nested for specificity, see the desktop rule.
+ .navbar-next__logo-mark {
+ height: 22px;
}
- &__summit {
- order: 9;
+ &__star-link {
+ order: 2;
+ margin-left: auto;
+ gap: 6px;
+ padding: 0 7px 0 6px;
+ font-size: 11px;
}
- &__ask-ai {
- order: 10;
+ &__star-text,
+ &__star-divider {
+ display: none;
}
- &__mobile-panel {
- max-height: calc(100vh - 160px);
+ &__ask-ai {
+ order: 3;
+ gap: 4px;
+ padding: 0 8px;
+ font-size: 11px;
}
- }
-}
-@media (max-width: 640px) {
- .navbar-next {
- &__inner {
- padding: 0 20px;
- gap: 10px;
+ &__ask-ai-icon--full,
+ &__ask-ai-label--full {
+ display: none;
}
- &__logo img {
- height: 27px;
+ &__ask-ai-icon--compact {
+ display: inline-block;
}
- &__actions {
- gap: 8px;
+ &__ask-ai-label--compact {
+ display: inline;
}
&__cta {
- padding: 0.45rem 0.8rem;
- font-size: 12px;
+ order: 4;
+ display: inline-flex;
+ align-items: center;
+ box-sizing: border-box;
+ height: 32px;
+ padding: 0 8px;
+ font-size: 11px;
+ }
+
+ &__actions > &__summit {
+ display: none;
}
&__mobile-panel {
- padding: 10px 20px 18px;
+ max-height: calc(100vh - 56px);
}
&__mobile-actions {
display: grid;
grid-template-columns: 1fr;
+ }
- .navbar-next__star-link,
- .navbar-next__cta {
- justify-content: center;
- width: 100%;
- }
+ &__mobile-actions &__summit {
+ width: 100%;
+ height: 40px;
}
}
}
-// On narrow phones, trim row-1 spacing while preserving the two full-width
-// campaign rows established at the 768px breakpoint.
-@media (max-width: 480px) {
- .navbar-next {
- &__inner {
- padding: 0 10px;
- }
-
- &__logo img {
- height: 24px;
- }
-
- // Trim star-link horizontal padding (only change needed to make
everything fit).
- &__star-link {
- padding: 0 8px 0 6px;
- }
+// Small phones: tighten the side padding (≤400px) and, at 360px, drop the
+// GitHub mark from the star pill so the row keeps a few px of slack — the
+// star and count still read as "GitHub stars".
+@media (max-width: 400px) {
+ .navbar-next__inner {
+ padding-inline: 10px;
}
}
-@media (max-width: 390px) {
- .navbar-next {
- &__mobile-actions {
- display: grid;
- gap: 10px;
- }
+@media (max-width: 360px) {
+ .navbar-next__star-link > svg:last-child {
+ display: none;
}
}
diff --git a/src/components/home-next/NavbarNext.tsx
b/src/components/home-next/NavbarNext.tsx
index adb90e659b2..0654ebbb536 100644
--- a/src/components/home-next/NavbarNext.tsx
+++ b/src/components/home-next/NavbarNext.tsx
@@ -4,6 +4,7 @@ import useDocusaurusContext from
'@docusaurus/useDocusaurusContext';
import { getLocalePrefix } from '@site/src/utils/locale';
import { STAR_COUNT } from '@site/src/constant/github.data';
import { StarGreenIcon } from '@site/src/components/Icons/star-green-icon';
+import { DorisLogoHorizontal } from
'@site/src/components/Icons/doris-logo-horizontal';
import { BrandThemeSwitcher } from
'@site/src/components/brand-theme/BrandThemeSwitcher';
import './NavbarNext.scss';
@@ -105,6 +106,28 @@ function GitHubIcon(): JSX.Element {
);
}
+// Robot-head glyph shown instead of the sparkle on phones, where the label
+// shrinks to "Ask" and the icon has to carry the "AI" meaning on its own.
+function AiIcon(): JSX.Element {
+ return (
+ <svg
+ className="navbar-next__ask-ai-icon
navbar-next__ask-ai-icon--compact"
+ width="15"
+ height="15"
+ viewBox="0 0 16 16"
+ fill="none"
+ aria-hidden="true"
+ >
+ <path d="M8 2v2.25" stroke="currentColor" strokeWidth="1.5"
strokeLinecap="round" />
+ <circle cx="8" cy="1.5" r="1.1" fill="currentColor" />
+ <rect x="2.75" y="4.5" width="10.5" height="8.5" rx="2.25"
stroke="currentColor" strokeWidth="1.5" />
+ <circle cx="6" cy="8.75" r="1.15" fill="currentColor" />
+ <circle cx="10" cy="8.75" r="1.15" fill="currentColor" />
+ <path d="M.75 7.75v2.5M15.25 7.75v2.5" stroke="currentColor"
strokeWidth="1.5" strokeLinecap="round" />
+ </svg>
+ );
+}
+
function MenuIcon({ open }: { open: boolean }): JSX.Element {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
aria-hidden="true">
@@ -187,10 +210,7 @@ export function NavbarNext(): JSX.Element {
>
<div className="navbar-next__inner">
<Link to={homeHref} className="navbar-next__logo"
aria-label="Apache Doris">
- <img
-
src="/images/brand-assets/doris-logo-horizontal-white.svg"
- alt=""
- />
+ <DorisLogoHorizontal className="navbar-next__logo-mark" />
</Link>
<div className="navbar-next__nav">
@@ -237,10 +257,31 @@ export function NavbarNext(): JSX.Element {
data-kapa-trigger
suppressHydrationWarning
>
- <StarGreenIcon />
- <span data-kapa-label aria-live="polite"
suppressHydrationWarning>
+ <span className="navbar-next__ask-ai-icon
navbar-next__ask-ai-icon--full">
+ <StarGreenIcon />
+ </span>
+ <AiIcon />
+ {/* static/js/custom-script.js swaps every
[data-kapa-label] to a
+ loading/error text; the compact copy declares
short variants so
+ the one-row phone navbar never has to fit "Loading
AI…". */}
+ <span
+ data-kapa-label
+ className="navbar-next__ask-ai-label
navbar-next__ask-ai-label--full"
+ aria-live="polite"
+ suppressHydrationWarning
+ >
Ask Me
</span>
+ <span
+ data-kapa-label
+ data-kapa-loading-label="…"
+ data-kapa-error-label="N/A"
+ className="navbar-next__ask-ai-label
navbar-next__ask-ai-label--compact"
+ aria-live="polite"
+ suppressHydrationWarning
+ >
+ Ask
+ </span>
</button>
<a
href={`https://github.com/${GITHUB_REPO}`}
@@ -250,7 +291,7 @@ export function NavbarNext(): JSX.Element {
aria-label={`Star Apache Doris on GitHub
(${STAR_DISPLAY} stars)`}
>
<StarIcon />
- <span>Star</span>
+ <span className="navbar-next__star-text">Star</span>
<span className="navbar-next__star-divider" />
<span
className="navbar-next__star-count">{STAR_DISPLAY}</span>
<span className="navbar-next__star-divider" />
@@ -311,24 +352,19 @@ export function NavbarNext(): JSX.Element {
<BrandThemeSwitcher mobile />
+ {/* Phones drop the Summit banner from the bar to keep it one
row; it
+ stays reachable from the menu instead. */}
<div className="navbar-next__mobile-actions">
<a
- href={`https://github.com/${GITHUB_REPO}`}
+ href={DORIS_SUMMIT_URL}
target="_blank"
rel="noopener noreferrer"
- className="navbar-next__star-link"
- aria-label={`Star Apache Doris on GitHub
(${STAR_DISPLAY} stars)`}
+ className="navbar-next__summit"
+ aria-label="Visit Doris Summit 2026 (opens in a new
tab)"
+ onClick={() => setMobileOpen(false)}
>
- <StarIcon />
- <span>Star</span>
- <span className="navbar-next__star-divider" />
- <span
className="navbar-next__star-count">{STAR_DISPLAY}</span>
- <span className="navbar-next__star-divider" />
- <GitHubIcon />
+ <span>Doris Summit 26</span>
</a>
- <Link to="/download" className="navbar-next__cta"
onClick={() => setMobileOpen(false)}>
- DOWNLOAD
- </Link>
</div>
</div>
</nav>
diff --git a/src/theme/DocItem/Layout/styles.module.css
b/src/theme/DocItem/Layout/styles.module.css
index ddb3734caa8..aecc1ecf9b1 100644
--- a/src/theme/DocItem/Layout/styles.module.css
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -31,8 +31,9 @@
/* Freeze the search/locale/menu toolbar + breadcrumb at the top on mobile
so they remain reachable while scrolling. Sits just below the sticky
- green NavbarNext (64px tall; 160px when Summit and Ask Me wrap to their
- own rows at ≤768px). z-index stays under the navbar (300) but above
content. */
+ green NavbarNext (64px tall; 56px on phones at ≤768px) and, on Dev/4.x
+ docs, the two-row domain strip. z-index stays under the navbar (300) but
+ above content. */
@media (max-width: 996px) {
.mobileStickyHeader {
position: sticky;
diff --git a/src/theme/DocRoot/Layout/styles.module.css
b/src/theme/DocRoot/Layout/styles.module.css
index 84143bb5447..20643640df5 100644
--- a/src/theme/DocRoot/Layout/styles.module.css
+++ b/src/theme/DocRoot/Layout/styles.module.css
@@ -30,9 +30,13 @@
margin-top: 0;
}
+ /* Keep the stock `height: 100%` on the sticky sidebar viewport: the inner
+ * `.sidebar` is `height: 100%` and the `.menu` is a flex child that only
+ * scrolls when its container has a resolved height. `height: auto` here
+ * made the menu grow to its full content height, so long sections were
+ * cut off at the bottom of the screen with no way to scroll them. */
.docsWithDomainNav :global(.theme-doc-sidebar-container) > div {
top: var(--docs-navigation-offset);
- height: auto;
max-height: calc(100vh - var(--docs-navigation-offset));
}
}
@@ -43,6 +47,15 @@
}
}
+/* Phones stack the domain strip into two rows (section picker + locale, then
+ a full-width search box): 8px padding + 38px row + 6px gap + 42px search
+ box + 8px padding + 1px border. Keep in step with
DocsDomainNav.module.scss. */
+@media (max-width: 768px) {
+ .docsWithDomainNav {
+ --docs-domain-nav-height: 103px;
+ }
+}
+
.courseMain {
width: 100%;
diff --git a/static/images/community-badges/badge-active-contributor-2026.png
b/static/images/community-badges/badge-active-contributor-2026.png
new file mode 100644
index 00000000000..dd907ea6180
Binary files /dev/null and
b/static/images/community-badges/badge-active-contributor-2026.png differ
diff --git a/static/images/community-badges/badge-committer.png
b/static/images/community-badges/badge-committer.png
new file mode 100644
index 00000000000..46ce22443a3
Binary files /dev/null and b/static/images/community-badges/badge-committer.png
differ
diff --git a/static/images/community-badges/badge-community-champion-2026.png
b/static/images/community-badges/badge-community-champion-2026.png
new file mode 100644
index 00000000000..89ad8fa7d26
Binary files /dev/null and
b/static/images/community-badges/badge-community-champion-2026.png differ
diff --git a/static/images/community-badges/badge-contributor.png
b/static/images/community-badges/badge-contributor.png
new file mode 100644
index 00000000000..1ce18e27778
Binary files /dev/null and
b/static/images/community-badges/badge-contributor.png differ
diff --git a/static/images/community-badges/badge-pmc-member.png
b/static/images/community-badges/badge-pmc-member.png
new file mode 100644
index 00000000000..f99d52326b4
Binary files /dev/null and
b/static/images/community-badges/badge-pmc-member.png differ
diff --git a/static/images/community-badges/github-profile-badge.jpg
b/static/images/community-badges/github-profile-badge.jpg
new file mode 100644
index 00000000000..038eb32b27e
Binary files /dev/null and
b/static/images/community-badges/github-profile-badge.jpg differ
diff --git a/static/images/community-badges/holopin-board-embed-code.jpg
b/static/images/community-badges/holopin-board-embed-code.jpg
new file mode 100644
index 00000000000..82c0ac1a4ef
Binary files /dev/null and
b/static/images/community-badges/holopin-board-embed-code.jpg differ
diff --git a/static/images/community-badges/holopin-claim.jpg
b/static/images/community-badges/holopin-claim.jpg
new file mode 100644
index 00000000000..d07f4c126ee
Binary files /dev/null and b/static/images/community-badges/holopin-claim.jpg
differ
diff --git a/static/images/community-badges/holopin-share.jpg
b/static/images/community-badges/holopin-share.jpg
new file mode 100644
index 00000000000..22c800cef37
Binary files /dev/null and b/static/images/community-badges/holopin-share.jpg
differ
diff --git a/static/images/community-badges/linkedin-certification.jpg
b/static/images/community-badges/linkedin-certification.jpg
new file mode 100644
index 00000000000..c31015a3200
Binary files /dev/null and
b/static/images/community-badges/linkedin-certification.jpg differ
diff --git a/static/images/community-badges/linkedin-post.jpg
b/static/images/community-badges/linkedin-post.jpg
new file mode 100644
index 00000000000..ef63b961fee
Binary files /dev/null and b/static/images/community-badges/linkedin-post.jpg
differ
diff --git a/static/js/custom-script.js b/static/js/custom-script.js
index 9de27bc3f4b..fbc6d2c5074 100644
--- a/static/js/custom-script.js
+++ b/static/js/custom-script.js
@@ -32,27 +32,38 @@
return host && host.shadowRoot ? host : null;
}
+ // A label may carry data-kapa-loading-label / data-kapa-slow-label /
+ // data-kapa-error-label to override the default texts (the navbar's
compact
+ // phone label uses these so it never grows past one row).
+ function labelText(label, kind, fallback) {
+ return label.getAttribute('data-kapa-' + kind + '-label') || fallback;
+ }
+
function syncTriggers() {
document.querySelectorAll(TRIGGER_SELECTOR).forEach(function (trigger)
{
- var label = trigger.querySelector('[data-kapa-label]');
- if (label && !label.getAttribute('data-kapa-default-label')) {
- label.setAttribute('data-kapa-default-label',
label.textContent || 'Ask Me');
- }
-
var waiting = pendingOpen && state === 'loading';
trigger.setAttribute('aria-busy', waiting ? 'true' : 'false');
trigger.setAttribute('aria-disabled', state === 'error' ? 'true' :
'false');
- if (!label) return;
- var nextLabel;
- if (waiting) {
- nextLabel = slow ? 'Still loading…' : 'Loading AI…';
- } else if (state === 'error') {
- nextLabel = 'AI unavailable';
- } else {
- nextLabel = label.getAttribute('data-kapa-default-label') ||
'Ask Me';
- }
- if (label.textContent !== nextLabel) label.textContent = nextLabel;
+ // A trigger can hold several labels (e.g. a full and a compact
copy
+ // toggled by CSS breakpoints); keep every one of them in sync.
+ trigger.querySelectorAll('[data-kapa-label]').forEach(function
(label) {
+ if (!label.getAttribute('data-kapa-default-label')) {
+ label.setAttribute('data-kapa-default-label',
label.textContent || 'Ask Me');
+ }
+
+ var nextLabel;
+ if (waiting) {
+ nextLabel = slow
+ ? labelText(label, 'slow', labelText(label, 'loading',
'Still loading…'))
+ : labelText(label, 'loading', 'Loading AI…');
+ } else if (state === 'error') {
+ nextLabel = labelText(label, 'error', 'AI unavailable');
+ } else {
+ nextLabel = label.getAttribute('data-kapa-default-label')
|| 'Ask Me';
+ }
+ if (label.textContent !== nextLabel) label.textContent =
nextLabel;
+ });
});
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
