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 73460a68c5d [feature] Add Doris Summit 26 promotion (#4007)
73460a68c5d is described below
commit 73460a68c5d4c01abff75b3a40b686ee1624d04c
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Wed Jul 22 19:37:03 2026 +0800
[feature] Add Doris Summit 26 promotion (#4007)
## Summary
- add a Doris Summit 26 navbar action that opens the official event site
in a new tab
- add responsive mobile presentation, subtle shimmer motion, and
reduced-motion support
- add a Doris Summit 26 section below Join Slack in the community nudge,
while keeping the docs issue section last on documentation pages
- update mobile sticky offsets and the Ask Me modal clearance for the
taller navbar
## Validation
- `node --test
src/components/home-next/SlackCommunityNudge.logic.test.js`
- `git diff --check`
- full build not run
---------
Co-authored-by: morningman <[email protected]>
---
src/components/home-next/NavbarNext.scss | 214 ++++++++++++++++------
src/components/home-next/NavbarNext.tsx | 10 +
src/components/home-next/SlackCommunityNudge.scss | 29 ++-
src/components/home-next/SlackCommunityNudge.tsx | 37 +++-
src/theme/DocItem/Layout/styles.module.css | 8 +-
static/js/custom-script.js | 10 +-
6 files changed, 240 insertions(+), 68 deletions(-)
diff --git a/src/components/home-next/NavbarNext.scss
b/src/components/home-next/NavbarNext.scss
index dbfc93c5dab..58b711c40b9 100644
--- a/src/components/home-next/NavbarNext.scss
+++ b/src/components/home-next/NavbarNext.scss
@@ -9,6 +9,7 @@
--nb-cream-light: #FAF6EE;
--nb-yellow: #FFD23F;
--nb-ink: #0F1A14;
+ --nb-summit-cyan: #00F0FF;
position: sticky;
top: var(--home-next-banner-height, 0px);
@@ -261,6 +262,60 @@
}
}
+ &__summit {
+ position: relative;
+ isolation: isolate;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ height: 32px;
+ overflow: hidden;
+ padding: 0 14px;
+ border: 1px solid rgba(17, 166, 121, 0.55);
+ border-radius: 4px;
+ background: rgba(17, 166, 121, 0.18);
+ color: var(--nb-cream-light) !important;
+ text-decoration: none !important;
+ white-space: nowrap;
+ @include type.mono-text(12px, 700, 1.2, 0.02em);
+ animation: navbar-next-summit-breathe 2.8s ease-in-out infinite;
+ transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s,
color 0.2s, transform 0.2s;
+
+ span {
+ position: relative;
+ z-index: 1;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ z-index: 0;
+ top: -2px;
+ bottom: -2px;
+ left: -45%;
+ width: 32%;
+ transform: skewX(-18deg);
+ background: linear-gradient(90deg, transparent, rgba(0, 240, 255,
0.62), transparent);
+ animation: navbar-next-summit-sweep 3.6s ease-in-out infinite;
+ will-change: transform;
+ pointer-events: none;
+ }
+
+ &:hover {
+ border-color: rgba(17, 166, 121, 0.85);
+ background: rgba(17, 166, 121, 0.28);
+ color: var(--nb-cream-light) !important;
+ text-decoration: none !important;
+ transform: translateY(-1px);
+ }
+
+ &:focus-visible {
+ outline: 2px solid rgba(17, 166, 121, 0.85);
+ outline-offset: 2px;
+ }
+ }
+
&__star-link {
display: inline-flex;
align-items: center;
@@ -440,6 +495,20 @@
padding: 0.5rem 0.55rem;
font-size: 12px;
}
+
+ // The extra Summit action needs more horizontal room than the old
+ // action group, so switch to the menu before controls can collide.
+ &__nav {
+ display: none;
+ }
+
+ &__menu-button {
+ display: inline-flex;
+ }
+
+ &--mobile-open &__mobile-panel {
+ display: block;
+ }
}
}
@@ -450,16 +519,66 @@
gap: 14px;
}
- &__nav {
- display: none;
+ }
+}
+
+// Tablet and phone layouts keep the utility controls on row 1, then give
+// Summit and Ask Me a dedicated full-width row each.
+@media (max-width: 768px) {
+ .navbar-next {
+ &.navbar {
+ height: auto;
+ min-height: 64px;
+ }
+
+ &__inner {
+ flex-wrap: wrap;
+ height: auto;
+ column-gap: 5px;
+ row-gap: 0;
+ align-items: center;
+ }
+
+ &__logo {
+ height: 64px;
+ }
+
+ // Expose the action children to the wrapping navbar layout.
+ &__actions {
+ display: contents;
+ }
+
+ &__star-link {
+ margin-left: auto;
}
&__menu-button {
- display: inline-flex;
+ margin-left: 0;
}
- &--mobile-open &__mobile-panel {
- display: block;
+ &__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;
+ }
+
+ &__summit {
+ order: 9;
+ }
+
+ &__ask-ai {
+ order: 10;
+ }
+
+ &__mobile-panel {
+ max-height: calc(100vh - 160px);
}
}
}
@@ -501,28 +620,12 @@
}
}
-// On narrow phones (≤480px): row 1 = Logo (left) + Star + Download + ☰
(right, as a group),
-// row 2 = Ask AI full-width centered.
-// Only minimal padding trimming — no font-size or height overrides.
+// 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 {
- &.navbar {
- height: auto;
- min-height: 64px;
- }
-
&__inner {
- flex-wrap: wrap;
- height: auto;
padding: 0 10px;
- column-gap: 5px;
- row-gap: 0;
- align-items: center;
- }
-
- // Logo link spans the full row-1 height; image slightly smaller to
reclaim space.
- &__logo {
- height: 64px;
}
&__logo img {
@@ -532,37 +635,6 @@
// Trim star-link horizontal padding (only change needed to make
everything fit).
&__star-link {
padding: 0 8px 0 6px;
- // Right-anchor the Star+Download+☰ group. Since `__actions`
collapses
- // to `display: contents` below, Star is the first member of the
- // right-side group and inherits the auto-margin job from
__actions.
- margin-left: auto;
- }
-
- // Collapse `__actions` so its children (Ask Me, Star, Download) become
- // flex children of `__inner` directly. This lets Ask Me wrap to its
own
- // full-width second row via `flex: 0 0 100%; order: 10` below — which
- // is impossible while it's nested inside a non-wrapping flex
container.
- &__actions {
- display: contents;
- }
-
- // Hamburger follows actions naturally — no extra margin needed.
- &__menu-button {
- margin-left: 0;
- }
-
- // Ask Me: full-width second row, icon + text centered both axes.
- &__ask-ai {
- order: 10;
- 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;
}
}
}
@@ -575,3 +647,37 @@
}
}
}
+
+@keyframes navbar-next-summit-breathe {
+ 0%,
+ 100% {
+ scale: 1;
+ }
+
+ 50% {
+ scale: 1.018;
+ }
+}
+
+@keyframes navbar-next-summit-sweep {
+ 0%,
+ 45% {
+ transform: translateX(0) skewX(-18deg);
+ }
+
+ 75%,
+ 100% {
+ transform: translateX(520%) skewX(-18deg);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .navbar-next__summit,
+ .navbar-next__summit::after {
+ animation: none;
+ }
+
+ .navbar-next__summit:hover {
+ transform: none;
+ }
+}
diff --git a/src/components/home-next/NavbarNext.tsx
b/src/components/home-next/NavbarNext.tsx
index 95dd70cf37d..ad658a03cd1 100644
--- a/src/components/home-next/NavbarNext.tsx
+++ b/src/components/home-next/NavbarNext.tsx
@@ -8,6 +8,7 @@ import './NavbarNext.scss';
const GITHUB_REPO = 'apache/doris';
const STAR_DISPLAY = `${STAR_COUNT}k`;
+const DORIS_SUMMIT_URL = 'https://apache-doris-summit.org/';
interface DropdownItem {
label: string;
@@ -181,6 +182,15 @@ export function NavbarNext(): JSX.Element {
</div>
<div className="navbar-next__actions">
+ <a
+ href={DORIS_SUMMIT_URL}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="navbar-next__summit"
+ aria-label="Visit Doris Summit 2026 (opens in a new
tab)"
+ >
+ <span>Doris Summit 26</span>
+ </a>
<button
type="button"
id="navbar-ask-ai-btn"
diff --git a/src/components/home-next/SlackCommunityNudge.scss
b/src/components/home-next/SlackCommunityNudge.scss
index 5d8dd000ae6..55c227551f2 100644
--- a/src/components/home-next/SlackCommunityNudge.scss
+++ b/src/components/home-next/SlackCommunityNudge.scss
@@ -185,7 +185,8 @@
outline-offset: 3px;
}
- &--feedback {
+ &--feedback,
+ &--summit {
min-height: 36px;
border-color: rgba(6, 128, 95, 0.32);
background: rgba(255, 255, 255, 0.56);
@@ -201,6 +202,28 @@
}
}
+ &__summit {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-top: 16px;
+ padding-top: 14px;
+ border-top: 1px solid rgba(6, 128, 95, 0.16);
+ }
+
+ &__summit-title {
+ margin: 0 0 4px;
+ color: var(--sn-ink);
+ @include type.mono-text(14px, 800, 1.25, 0);
+ }
+
+ &__summit-meta {
+ margin: 0;
+ color: rgba(15, 26, 20, 0.68);
+ @include type.sans-text(12.5px, 400, 1.35);
+ }
+
&__docs-feedback {
margin-top: 16px;
padding-top: 14px;
@@ -323,6 +346,10 @@
font-size: 12.5px;
}
+ &__summit {
+ align-items: flex-start;
+ }
+
&__benefits {
gap: 6px;
margin-bottom: 13px;
diff --git a/src/components/home-next/SlackCommunityNudge.tsx
b/src/components/home-next/SlackCommunityNudge.tsx
index 4af2a0ecf3a..22a9102aa5a 100644
--- a/src/components/home-next/SlackCommunityNudge.tsx
+++ b/src/components/home-next/SlackCommunityNudge.tsx
@@ -11,6 +11,7 @@ import {
import './SlackCommunityNudge.scss';
const SLACK_URL = 'https://doris.apache.org/slack';
+const DORIS_SUMMIT_URL = 'https://apache-doris-summit.org/';
const DOCS_FEEDBACK_URL = 'https://github.com/apache/doris-website/issues/364';
const STORAGE_KEY = 'doris-home-slack-nudge-dismissed';
const ECOSYSTEM_TARGET_ID = 'home-next-ecosystem';
@@ -220,16 +221,16 @@ export function SlackCommunityNudge(): JSX.Element {
<aside
className={`slack-community-nudge${isOpen ? '
slack-community-nudge--open' : ''}`}
aria-label={showDocsFeedback
- ? 'Apache Doris community and documentation resources'
- : 'Apache Doris Slack community invitation'}
+ ? 'Apache Doris community, Summit, and documentation resources'
+ : 'Apache Doris community and Summit resources'}
>
<div className="slack-community-nudge__bubble"
aria-hidden={!isOpen}>
<button
type="button"
className="slack-community-nudge__close"
aria-label={showDocsFeedback
- ? 'Dismiss community and documentation prompt'
- : 'Dismiss Slack invitation'}
+ ? 'Dismiss community, Summit, and documentation prompt'
+ : 'Dismiss community and Summit prompt'}
onClick={dismissAutoPrompt}
tabIndex={isOpen ? undefined : -1}
>
@@ -262,6 +263,30 @@ export function SlackCommunityNudge(): JSX.Element {
<SlackGlyph />
Join Slack
</a>
+ <section
+ className="slack-community-nudge__summit"
+ aria-labelledby="slack-community-nudge-summit-title"
+ >
+ <div>
+ <p id="slack-community-nudge-summit-title"
className="slack-community-nudge__summit-title">
+ Doris Summit 26
+ </p>
+ <p className="slack-community-nudge__summit-meta">
+ October 21–22 · Virtual event
+ </p>
+ </div>
+ <a
+ className="slack-community-nudge__cta
slack-community-nudge__cta--summit"
+ href={DORIS_SUMMIT_URL}
+ target="_blank"
+ rel="noopener noreferrer"
+ onClick={dismissAutoPrompt}
+ tabIndex={isOpen ? undefined : -1}
+ >
+ Explore Summit
+ <span aria-hidden="true">↗</span>
+ </a>
+ </section>
{showDocsFeedback && (
<section
className="slack-community-nudge__docs-feedback"
@@ -297,8 +322,8 @@ export function SlackCommunityNudge(): JSX.Element {
ref={mascotRef}
aria-expanded={isOpen}
aria-label={showDocsFeedback
- ? `${isOpen ? 'Hide' : 'Open'} community and documentation
resources`
- : `${isOpen ? 'Hide' : 'Open'} Slack invitation`}
+ ? `${isOpen ? 'Hide' : 'Open'} community, Summit, and
documentation resources`
+ : `${isOpen ? 'Hide' : 'Open'} community and Summit
resources`}
onClick={() => setIsOpen(open => !open)}
>
<img
diff --git a/src/theme/DocItem/Layout/styles.module.css
b/src/theme/DocItem/Layout/styles.module.css
index e4b1d8fe267..49a67db70ae 100644
--- a/src/theme/DocItem/Layout/styles.module.css
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -31,8 +31,8 @@
/* 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; ~112px when Ask AI wraps to a second row
- at ≤480px). z-index stays under the navbar (300) but above content. */
+ 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. */
@media (max-width: 996px) {
.mobileStickyHeader {
position: sticky;
@@ -51,8 +51,8 @@
}
}
-@media (max-width: 480px) {
+@media (max-width: 768px) {
.mobileStickyHeader {
- top: 112px;
+ top: 160px;
}
}
diff --git a/static/js/custom-script.js b/static/js/custom-script.js
index f98227d45e5..a89d8790168 100644
--- a/static/js/custom-script.js
+++ b/static/js/custom-script.js
@@ -11,7 +11,7 @@
y.parentNode.insertBefore(t, y);
})(window, document, 'clarity', 'script', 'kfyqejiz0g');
-// Position the Kapa Ask Me modal below the sticky NavbarNext (64px tall).
+// Position the Kapa Ask Me modal below the sticky NavbarNext.
// Kapa renders inside a Shadow DOM on `#kapa-widget-container`, so light-DOM
// CSS can't reach it. We inject a <style> into the shadow root and re-inject
// if Kapa rebuilds it.
@@ -22,8 +22,8 @@
// `align-items: center` once content exceeds the viewport.
(function centerKapaModal() {
var STYLE_ID = 'doris-kapa-center-modal';
- // Top padding clears the 64px sticky NavbarNext + 16px gap so the modal
- // header is never tucked under the navbar when content fills the screen.
+ // Top padding clears the sticky NavbarNext + 16px gap so the modal header
+ // is never tucked under the navbar when content fills the screen.
var CSS_TEXT =
'.mantine-Modal-inner{' +
'align-items:flex-start !important;' +
@@ -46,6 +46,10 @@
'flex:1 1 auto !important;' +
'min-height:0 !important;' +
'overflow-y:auto !important;' +
+ '}' +
+ '@media(max-width:768px){' +
+ '.mantine-Modal-inner{padding-top:176px !important;}' +
+ '.mantine-Modal-content{max-height:calc(100vh - 176px - 2rem)
!important;}' +
'}';
function inject() {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
