Skip to content

[feature] Add Doris Summit 26 promotion #4007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
morningman merged 2 commits into from
Jul 22, 2026
Merged

[feature] Add Doris Summit 26 promotion #4007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1491b15
feat: add Doris Summit navbar link
Jul 22, 2026
d7aa268
feat: promote Doris Summit in community nudge
Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 160 additions & 54 deletions src/components/home-next/NavbarNext.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
}

Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
}
Expand All @@ -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;
}
}
10 changes: 10 additions & 0 deletions src/components/home-next/NavbarNext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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"
Expand Down
29 changes: 28 additions & 1 deletion src/components/home-next/SlackCommunityNudge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -323,6 +346,10 @@
font-size: 12.5px;
}

&__summit {
align-items: flex-start;
}

&__benefits {
gap: 6px;
margin-bottom: 13px;
Expand Down
Loading
Loading