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 f502ced9416 feat: add documentation feedback to Slack nudge (#3993)
f502ced9416 is described below
commit f502ced941620b8a5e10d5d918b0802316058d7d
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Fri Jul 17 14:43:39 2026 +0800
feat: add documentation feedback to Slack nudge (#3993)
## Summary
- Show a documentation feedback section in the Slack community nudge on
docs and community routes.
- Link feedback to apache/doris-website#364 while preserving Slack-only
content on other pages.
- Add responsive styling, accessible labels, and route coverage.
## Test Plan
- [x] node --test
src/components/home-next/SlackCommunityNudge.logic.test.js
- [x] Compile SlackCommunityNudge.scss with Sass.
- [x] Verify /docs, /community, and / at 1440x900, plus /docs at
390x844, in the local development site.
- [x] git diff --check
## Notes
- yarn typecheck is currently blocked by existing repository-wide
TypeScript errors unrelated to this change.
- The production build reached the English bundle emit stage, then
stopped because the local disk ran out of space. The English development
build completed successfully.
---
.../home-next/SlackCommunityNudge.logic.d.ts | 2 +
.../home-next/SlackCommunityNudge.logic.js | 10 +++++
.../home-next/SlackCommunityNudge.logic.test.js | 18 ++++++++
src/components/home-next/SlackCommunityNudge.scss | 37 ++++++++++++++++
src/components/home-next/SlackCommunityNudge.tsx | 50 ++++++++++++++++++++--
5 files changed, 114 insertions(+), 3 deletions(-)
diff --git a/src/components/home-next/SlackCommunityNudge.logic.d.ts
b/src/components/home-next/SlackCommunityNudge.logic.d.ts
index c92e311e634..72508778ff6 100644
--- a/src/components/home-next/SlackCommunityNudge.logic.d.ts
+++ b/src/components/home-next/SlackCommunityNudge.logic.d.ts
@@ -24,4 +24,6 @@ export function computeMascotPupilOffset(input:
MascotPupilOffsetInput): MascotP
export function getSlackNudgeBenefits(): string[];
+export function isDocumentationFeedbackPath(pathname: string): boolean;
+
export function shouldOpenSlackNudge(state: SlackNudgeTriggerState): boolean;
diff --git a/src/components/home-next/SlackCommunityNudge.logic.js
b/src/components/home-next/SlackCommunityNudge.logic.js
index 3fd25063406..7cf0193a013 100644
--- a/src/components/home-next/SlackCommunityNudge.logic.js
+++ b/src/components/home-next/SlackCommunityNudge.logic.js
@@ -41,8 +41,18 @@ function getSlackNudgeBenefits() {
];
}
+function isDocumentationFeedbackPath(pathname) {
+ return (
+ pathname === '/docs' ||
+ pathname.startsWith('/docs/') ||
+ pathname === '/community' ||
+ pathname.startsWith('/community/')
+ );
+}
+
module.exports = {
computeMascotPupilOffset,
getSlackNudgeBenefits,
+ isDocumentationFeedbackPath,
shouldOpenSlackNudge,
};
diff --git a/src/components/home-next/SlackCommunityNudge.logic.test.js
b/src/components/home-next/SlackCommunityNudge.logic.test.js
index 8514215f2b5..c5f25378ca2 100644
--- a/src/components/home-next/SlackCommunityNudge.logic.test.js
+++ b/src/components/home-next/SlackCommunityNudge.logic.test.js
@@ -4,6 +4,7 @@ const test = require('node:test');
const {
computeMascotPupilOffset,
getSlackNudgeBenefits,
+ isDocumentationFeedbackPath,
shouldOpenSlackNudge,
} = require('./SlackCommunityNudge.logic');
@@ -117,3 +118,20 @@ test('returns the Slack community benefits shown in the
nudge', () => {
'Join community building, feature discussions, and PR reviews.',
]);
});
+
+test('shows documentation feedback on docs and community pages', () => {
+ [
+ '/docs',
+ '/docs/4.x/gettingStarted/what-is-apache-doris',
+ '/community',
+ '/community/how-to-contribute/contribute-to-doris',
+ ].forEach(pathname => {
+ assert.equal(isDocumentationFeedbackPath(pathname), true, pathname);
+ });
+});
+
+test('does not show documentation feedback outside docs and community pages',
() => {
+ ['/', '/blog', '/docs-old', '/community-events'].forEach(pathname => {
+ assert.equal(isDocumentationFeedbackPath(pathname), false, pathname);
+ });
+});
diff --git a/src/components/home-next/SlackCommunityNudge.scss
b/src/components/home-next/SlackCommunityNudge.scss
index 22e0300cfe8..5d8dd000ae6 100644
--- a/src/components/home-next/SlackCommunityNudge.scss
+++ b/src/components/home-next/SlackCommunityNudge.scss
@@ -184,6 +184,39 @@
outline: 2px solid var(--sn-green-deep);
outline-offset: 3px;
}
+
+ &--feedback {
+ min-height: 36px;
+ border-color: rgba(6, 128, 95, 0.32);
+ background: rgba(255, 255, 255, 0.56);
+ color: var(--sn-green-deep) !important;
+ box-shadow: none;
+
+ &:hover {
+ border-color: var(--sn-green);
+ background: var(--sn-green);
+ color: #fff !important;
+ box-shadow: 0 16px 30px -22px rgba(5, 76, 57, 0.66);
+ }
+ }
+ }
+
+ &__docs-feedback {
+ margin-top: 16px;
+ padding-top: 14px;
+ border-top: 1px solid rgba(6, 128, 95, 0.16);
+ }
+
+ &__docs-feedback-title {
+ margin: 0 0 5px;
+ color: var(--sn-ink);
+ @include type.mono-text(14px, 800, 1.25, 0);
+ }
+
+ &__docs-feedback-copy {
+ margin: 0 0 11px;
+ color: rgba(15, 26, 20, 0.68);
+ @include type.sans-text(13px, 400, 1.42);
}
&__mascot {
@@ -286,6 +319,10 @@
font-size: 13px;
}
+ &__docs-feedback-copy {
+ font-size: 12.5px;
+ }
+
&__benefits {
gap: 6px;
margin-bottom: 13px;
diff --git a/src/components/home-next/SlackCommunityNudge.tsx
b/src/components/home-next/SlackCommunityNudge.tsx
index 74a52b6dd62..4af2a0ecf3a 100644
--- a/src/components/home-next/SlackCommunityNudge.tsx
+++ b/src/components/home-next/SlackCommunityNudge.tsx
@@ -1,12 +1,17 @@
import React, { JSX, useCallback, useEffect, useRef, useState } from 'react';
+import { useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { normalizePathname } from '@site/src/utils/locale';
import {
computeMascotPupilOffset,
getSlackNudgeBenefits,
+ isDocumentationFeedbackPath,
shouldOpenSlackNudge,
} from './SlackCommunityNudge.logic';
import './SlackCommunityNudge.scss';
const SLACK_URL = 'https://doris.apache.org/slack';
+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';
const OPEN_DELAY_MS = 5000;
@@ -48,6 +53,10 @@ function storeDismissal(): void {
}
export function SlackCommunityNudge(): JSX.Element {
+ const { pathname } = useLocation();
+ const {
+ i18n: { locales },
+ } = useDocusaurusContext();
const [isOpen, setIsOpen] = useState(false);
const [eyeTrackingEnabled, setEyeTrackingEnabled] = useState(false);
const autoDismissedRef = useRef(false);
@@ -56,6 +65,8 @@ export function SlackCommunityNudge(): JSX.Element {
const mascotRef = useRef<HTMLButtonElement>(null);
const pupilRefs = useRef<Array<HTMLSpanElement | null>>([]);
const lastPointerRef = useRef<{ x: number; y: number } | null>(null);
+ const normalizedPathname = normalizePathname(pathname, locales);
+ const showDocsFeedback = isDocumentationFeedbackPath(normalizedPathname);
const openAutomatically = useCallback((ecosystemVisible: boolean) => {
const mountedAt = mountedAtRef.current ?? Date.now();
@@ -208,13 +219,17 @@ export function SlackCommunityNudge(): JSX.Element {
return (
<aside
className={`slack-community-nudge${isOpen ? '
slack-community-nudge--open' : ''}`}
- aria-label="Apache Doris Slack community invitation"
+ aria-label={showDocsFeedback
+ ? 'Apache Doris community and documentation resources'
+ : 'Apache Doris Slack community invitation'}
>
<div className="slack-community-nudge__bubble"
aria-hidden={!isOpen}>
<button
type="button"
className="slack-community-nudge__close"
- aria-label="Dismiss Slack invitation"
+ aria-label={showDocsFeedback
+ ? 'Dismiss community and documentation prompt'
+ : 'Dismiss Slack invitation'}
onClick={dismissAutoPrompt}
tabIndex={isOpen ? undefined : -1}
>
@@ -247,6 +262,33 @@ export function SlackCommunityNudge(): JSX.Element {
<SlackGlyph />
Join Slack
</a>
+ {showDocsFeedback && (
+ <section
+ className="slack-community-nudge__docs-feedback"
+
aria-labelledby="slack-community-nudge-docs-feedback-title"
+ >
+ <p
+ id="slack-community-nudge-docs-feedback-title"
+
className="slack-community-nudge__docs-feedback-title"
+ >
+ Found a documentation issue?
+ </p>
+ <p
className="slack-community-nudge__docs-feedback-copy">
+ Share your feedback and help us improve the
quality of the Apache Doris documentation.
+ </p>
+ <a
+ className="slack-community-nudge__cta
slack-community-nudge__cta--feedback"
+ href={DOCS_FEEDBACK_URL}
+ target="_blank"
+ rel="noopener noreferrer"
+ onClick={dismissAutoPrompt}
+ tabIndex={isOpen ? undefined : -1}
+ >
+ Report a docs issue
+ <span aria-hidden="true">↗</span>
+ </a>
+ </section>
+ )}
</div>
<button
@@ -254,7 +296,9 @@ export function SlackCommunityNudge(): JSX.Element {
className="slack-community-nudge__mascot"
ref={mascotRef}
aria-expanded={isOpen}
- aria-label={isOpen ? 'Hide Slack invitation' : 'Open Slack
invitation'}
+ aria-label={showDocsFeedback
+ ? `${isOpen ? 'Hide' : 'Open'} community and documentation
resources`
+ : `${isOpen ? 'Hide' : 'Open'} Slack invitation`}
onClick={() => setIsOpen(open => !open)}
>
<img
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
