Skip to content

feat(site): article navigation (ToC) and Ask AI sidebar - #7873

Open
jstirnaman wants to merge 10 commits into
masterfrom
docs/site-wide-toc-ask-ai-spec-2026-10-10
Open

jstirnaman wants to merge 10 commits into
masterfrom
docs/site-wide-toc-ask-ai-spec-2026-10-10

Conversation

@jstirnaman

@jstirnaman jstirnaman commented Oct 10, 2026 •

Copy link
Copy Markdown
Contributor

Related: #7706. This PR does not close the issue.

Screenshots

image image image

What changed

  • Share section navigation across regular articles and API pages.
  • Keep the table of contents and chat in separate columns at widths of at least 1280px. Use a navigation drawer and one right-side overlay on narrower screens.
  • Replace the footer Ask AI launcher with a composer and header button that use one Kapa Website Widget instance.
  • Add a scoped desktop focus adapter, theme-aware drawer styling, and a fix for the header button stretching when the product menu opens.
  • Replace the implementation plans with a brief ADR. Keep the product spec as the behavior reference.

Why

Readers need consistent section navigation and access to chat without losing their place in an article. The shared layout preserves both controls on desktop while keeping narrow screens usable.

Impact

Readers can navigate sections while desktop chat stays open. API navigation retains operation order, anchors, and method badges. Failed submissions preserve drafts.

The adapter depends on vendor shadow DOM and needs live regression checks when the widget changes. Cross-page conversation persistence and a Chat SDK migration remain outside this change.

Verification

Recorded implementation validation includes a production Hugo build, 15 Cypress checks across ask-ai.cy.js, ask-ai-sidebar.cy.js, and page-toc.cy.js, three native browser tests, TypeScript, and targeted ESLint checks. The repository runs end-to-end tests through yarn test:e2e.

Recent preview fixes passed a testing Hugo build and Chromium checks in both themes at phone, tablet, and desktop widths. The ADR update passes formatting, relative file link, whitespace, and commit-hook checks.

Live query acknowledgment passes. Completed-answer and retained conversation history checks remain pending because the environment blocks required reCAPTCHA resources. Network policy changes require a new session.

The dependency audit reports 65 findings in the unchanged dependency tree under the repository's warning-only policy for non-default branches.

Preview pages

  • /influxdb/v2/get-started/process/
    Expected: Section links follow rendered headings. The narrow-screen drawer uses theme colors. At desktop widths, navigation remains beside chat.

  • /influxdb3/core/get-started/write/
    Expected: Shared-content headings appear in the table of contents. The composer submits the question once and hands off to chat.

  • /
    Expected: No table of contents. The Ask AI button keeps its normal height when the product menu opens.

jstirnaman and others added 5 commits October 10, 2026 06:17
What changed: Add the product spec, reviewed implementation plan, and decision record for site-wide article navigation and the Ask AI composer/sidebar. Collapse the ToC at 1280px and below and define exclusive right-side ownership.

Why: Extend the API ToC pattern to articles and ground issue #7706 in current code and documented Kapa behavior.

Impact: Documentation only. Feature implementation and browser acceptance remain pending. Store the plan outside the root ephemeral filenames so it can merge.

Verification: Relative documentation links and whitespace checks pass. The changed-file verifier selects no checks for these documentation paths. Runtime checks were not run.
What changed: Link the spec, implementation plan, and decision record to draft PR #7873.

Why: Keep the review location available from the checked-in documents.

Impact: Documentation links only. Issue #7706 stays open for implementation.

Verification: All documents reference the created draft PR; the feature remains unimplemented.
What changed: Refine the product spec, implementation plan, and decision record for separate desktop ToC and chat columns at 1280px and above. Add a compact width budget, narrower-screen drawer coordination, and screenshot-based acceptance cases.

Why: The supplied ChatGPT documentation captures retain both panels at 1280px and 1920px. The previous exclusive-rail plan would hide navigation during chat.

Impact: Documentation only. Feature implementation remains pending. Preserve the existing planning commits and leave issue #7706 open.

Verification: Relative links and anchors resolve; whitespace checks and the 1280px budget pass. The changed-file verifier selects no manual checks for these documentation paths. No production files or checked-in tests changed; browser and live Kapa validation remain implementation requirements.
What changed: add shared rendered-heading navigation, narrow ToC drawer, scoped sizing, focused browser coverage, and an explicit implementation checkpoint.

Why: preserve verified progress and the next red chat handoff test for continuation in a new environment.

Impact: API layout integration and the composer lifecycle remain pending. This draft checkpoint is not mergeable; the handoff test intentionally fails until its implementation exists.

Verification: two ToC Cypress tests and the Chromium component test passed; TypeScript compilation and diff whitespace checks passed. Live Kapa sidebar verification is blocked by the runtime network policy.
What changed: apply repository formatting to the resumable ToC checkpoint and pending handoff test.

Why: retain formatter output in the pushed branch.

Impact: behavior and pending verification remain unchanged.

Verification: Markdown formatting checked with the pinned Remark tool; staged hooks run on this commit.
@jstirnaman jstirnaman changed the title docs(site): specify article ToC and Ask AI sidebar feat(site): checkpoint shared ToC and Ask AI implementation plan Oct 10, 2026
What changed: Add shared article/API navigation, the composer and unified widget lifecycle, and a scoped nonmodal desktop adapter.

Why: Keep article navigation usable beside chat and preserve drafts across widget failures.

Impact: Desktop chat reserves a separate column; narrow layouts retain modal behavior. Preserve widget configuration and API anchors.

Verification: Production Hugo build, 15 Cypress tests, three native browser tests, TypeScript, and targeted ESLint pass. Real answer and retained history checks are deferred to a new environment session.
@jstirnaman
jstirnaman marked this pull request as ready for review October 11, 2026 04:25
@jstirnaman
jstirnaman requested a review from a team as a code owner October 11, 2026 04:25
@jstirnaman
jstirnaman requested review from sanderson and removed request for a team October 11, 2026 04:25
@jstirnaman
jstirnaman marked this pull request as draft October 11, 2026 04:25
@github-actions

github-actions Bot commented Oct 11, 2026 •

Copy link
Copy Markdown
Contributor

📦 PR Preview — Preview Bot

Status Details
Result ✅ DEPLOYED (full site)
Preview View preview
Build time 91s
Last updated 2026-10-11 05:27:51 UTC

Preview auto-deploys on push. Will be cleaned up when PR closes.
The preview's deployed-commit meta tag names GitHub's temporary merge commit for this PR, not a commit on the PR branch.

What changed: Add theme colors, rounded corners, a chevron, hover and focus
states, and a subtle drawer border and shadow.

Why: The default browser button and uncolored border clash with the site UI.

Impact: Styles only; heading navigation and responsive behavior stay intact.

Verification: Hugo testing build passed. Chromium checks passed in light and
dark themes for hover, keyboard focus, toggle, Escape, narrow-screen overflow,
and desktop visibility. Screenshots reviewed at the reported tablet width.
@jstirnaman
jstirnaman removed the request for review from sanderson October 11, 2026 04:58
What changed: Give the header Ask AI button independent flex alignment.
Preserve right alignment in the narrow-screen column layout.

Why: Opening the product selector stretched the button to the menu height.

Impact: Header alignment only; product selection and chat behavior are unchanged.

Verification: Reproduced 32px to 800px growth before the fix. Hugo rebuilt
successfully. Chromium checks passed on home and article pages at 375px,
1032px, and 1440px in both themes; button height stays 27px or 32px.
@jstirnaman
jstirnaman marked this pull request as ready for review October 11, 2026 04:59
What changed: Replace the two navigation and Ask AI plan files with ADR 0008.
Update the product spec status and decision-record link.

Why: Preserve the major decisions and turning points without stale execution
steps, checkpoint logs, or duplicated plans.

Impact: Documentation only; the product spec remains the behavior reference.

Verification: Prettier, relative file links, and whitespace checks pass.
Vale reports no errors and one spelling warning for the vendor name Kapa.
@jstirnaman jstirnaman changed the title feat(site): checkpoint shared ToC and Ask AI implementation plan feat(site): share article navigation and Ask AI sidebar Oct 11, 2026
@jstirnaman
jstirnaman requested a review from sanderson October 11, 2026 05:25
@jstirnaman jstirnaman changed the title feat(site): share article navigation and Ask AI sidebar feat(site): article navigation (ToC) and Ask AI sidebar Oct 12, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant