feat(docs): documentation portal UI improvements#947
Conversation
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughRenames "LFX Self Serve Documentation" to "LFX Documentation" across all page titles and branding strings, reorders the docs taxonomy, restructures the article page into a two-column layout with a sticky top bar and browser-history back button, adds per-topic icon/color visuals to topic cards, enhances docs search with a ChangesLFX Docs UI Overhaul
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Comment |
There was a problem hiding this comment.
Pull request overview
This pull request updates the public /docs portal UI to better align with the main app’s visual language and improve navigation/discoverability (layout constraints, search prominence, topic tile visuals, and article-page structure).
Changes:
- Standardize docs layout spacing with a 1024px max width, consistent padding, and an app footer across docs pages.
- Improve docs landing + topic tiles (typography, full-width search option, icon/color system, topic label rename “My Groups” → “Groups”).
- Refine article pages (sticky breadcrumb+search top bar with back button, sticky “More in this topic” rail) and make search topic chips show sentence-cased topic names.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/shared/src/constants/docs.constant.ts | Reorders DOCS_TAXONOMY_ORDER to match the updated landing-page topic priority. |
| docs/user/committees/index.md | Renames topic title from “My Groups” to “Groups”. |
| apps/lfx-one/tailwind.config.js | Adjusts typography styling for rendered markdown h2 section headings (visual scale + margins). |
| apps/lfx-one/src/app/shared/components/lens-switcher/lens-switcher.component.html | Prevents lens buttons from appearing active while on docs pages; uses solid docs icon when docs is active. |
| apps/lfx-one/src/app/modules/docs/pages/docs-not-found/docs-not-found.component.ts | Updates docs page title branding to “LFX Documentation”. |
| apps/lfx-one/src/app/modules/docs/pages/docs-landing/docs-landing.component.ts | Updates landing page title branding to “LFX Documentation”. |
| apps/lfx-one/src/app/modules/docs/pages/docs-landing/docs-landing.component.html | Applies new max-width/padding/typography and enables full-width search layout. |
| apps/lfx-one/src/app/modules/docs/pages/docs-article/docs-article.component.ts | Adds back-navigation via Location.back() and updates page-title branding. |
| apps/lfx-one/src/app/modules/docs/pages/docs-article/docs-article.component.html | Introduces sticky top bar (breadcrumb + search + back button) and sticky right rail for siblings. |
| apps/lfx-one/src/app/modules/docs/components/docs-topic-card/docs-topic-card.component.ts | Adds per-topic visual mapping (icons + container color classes) and computed bindings. |
| apps/lfx-one/src/app/modules/docs/components/docs-topic-card/docs-topic-card.component.html | Updates topic-card layout and chevron icon; uses computed icon/container classes. |
| apps/lfx-one/src/app/modules/docs/components/docs-sidebar-nav/docs-sidebar-nav.component.html | Updates docs branding aria-label and uses solid icon when docs is active. |
| apps/lfx-one/src/app/modules/docs/components/docs-search/docs-search.component.ts | Adds fullWidth input and resolves topic slugs to display names for result chips. |
| apps/lfx-one/src/app/modules/docs/components/docs-search/docs-search.component.html | Makes max-width optional and renders sentence-cased topic labels in result chips. |
| apps/lfx-one/src/app/layouts/docs-layout/docs-layout.component.ts | Adds CUSTOM_ELEMENTS_SCHEMA to support custom elements in the docs layout. |
| apps/lfx-one/src/app/layouts/docs-layout/docs-layout.component.html | Applies consistent padding, adds constrained app footer, and updates docs shell spacing. |
| apps/lfx-one/scripts/lib/build-manifest.mjs | Keeps taxonomy order + “LFX Documentation” root title in sync with UI changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/user/committees/index.md`:
- Line 2: Update Line 14 in the body copy to maintain terminology consistency
with the page title changed on Line 2. The sentence currently references "My
Groups" but should use consistent terminology with the "Groups" title
established at the top of the page. Review Line 14 and adjust the phrasing to
align with the new "Groups" terminology throughout the document.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5d23ebac-417f-44c6-a770-a73f7b03bca7
📒 Files selected for processing (17)
apps/lfx-one/scripts/lib/build-manifest.mjsapps/lfx-one/src/app/layouts/docs-layout/docs-layout.component.htmlapps/lfx-one/src/app/layouts/docs-layout/docs-layout.component.tsapps/lfx-one/src/app/modules/docs/components/docs-search/docs-search.component.htmlapps/lfx-one/src/app/modules/docs/components/docs-search/docs-search.component.tsapps/lfx-one/src/app/modules/docs/components/docs-sidebar-nav/docs-sidebar-nav.component.htmlapps/lfx-one/src/app/modules/docs/components/docs-topic-card/docs-topic-card.component.htmlapps/lfx-one/src/app/modules/docs/components/docs-topic-card/docs-topic-card.component.tsapps/lfx-one/src/app/modules/docs/pages/docs-article/docs-article.component.htmlapps/lfx-one/src/app/modules/docs/pages/docs-article/docs-article.component.tsapps/lfx-one/src/app/modules/docs/pages/docs-landing/docs-landing.component.htmlapps/lfx-one/src/app/modules/docs/pages/docs-landing/docs-landing.component.tsapps/lfx-one/src/app/modules/docs/pages/docs-not-found/docs-not-found.component.tsapps/lfx-one/src/app/shared/components/lens-switcher/lens-switcher.component.htmlapps/lfx-one/tailwind.config.jsdocs/user/committees/index.mdpackages/shared/src/constants/docs.constant.ts
🚀 Deployment StatusYour branch has been deployed to: https://ui-pr-947.dev.v2.cluster.linuxfound.info Deployment Details:
The deployment will be automatically removed when this PR is closed. |
MRashad26
left a comment
MRashad26
left a comment
There was a problem hiding this comment.
Automated review + code-standards-enforcer audit (report-only). 22 commits (20 feature + 2 merge commits from rebasing onto main), all signed off by Nuno Eufrásio. No Claude or Cursor co-author trailers. ✅
🔒 Secrets / critical-constants check
Pure UI polish — no auth, API, or data changes. No secrets. ✅
Overview
Polishes the /docs portal: 1024px max-width containers, 32px padding, Roboto Slab Light headers, per-topic icon tiles with importance-tiered colors, sticky top bar (breadcrumb + back + search) on article pages, sticky right rail for "More in this topic", full-width landing search, sentence-cased topic chips in search results, solid docs icon when active, lens buttons cleared on docs pages, taxonomy reordered and ## Test plan — the PR body uses ## Verification (browser-verified, no checklist), which is not a test plan. ✅
Correctness — verified ✅
containerClassandiconClassarecomputed()signals; calling them in templates is correct patterntopicVisualsRecord is a plain constant; accessed insidecomputed()via property lookup — correctisDocsActive()gate inlens-switchercorrectly prevents the active-lens highlight from firing while on docs pagesLocation.back()ingoBack()is the Angular-idiomatic browser-history navigation; injectingLocationfrom@angular/commonis correctCUSTOM_ELEMENTS_SCHEMAindocs-layoutis the correct approach for consuming<lfx-footer>as an external web component (not an Angular component)DOCS_TAXONOMY_ORDERupdated in sync in bothpackages/shared/src/constants/docs.constant.ts(Angular runtime) andapps/lfx-one/scripts/lib/build-manifest.mjs(build-time Node script that can't import the TS package) — duplication is pre-existing and intentional[innerHTML]="a.bodyHtml"pre-existing; Angular'sDomSanitizersanitizesinnerHTMLbindings by default
Code Standards Audit (~/LFX/code-enforcer-agent.md)
🔴 Critical:
docs-search.component.html:48—{{ topicLabel(hit.topic) }}is a component method call in a template interpolation. CLAUDE.md rule: no functions in HTML templates — only signals, computed values, or pipes. (see inline)
🟡 Warning: none.
🔵 Info:
topicNamesis a plainMapbuilt at construction time fromthis.manifest.getTopics(). This works becauseDocsManifestServicereturns a stable synchronous list, but it bypasses Angular's reactivity — if the manifest ever becomes async or signal-based, this would be stale. For consistency with the rest of the codebase, consider wrapping it as acomputed()signal.
✅ Correctly followed: computed() signals for iconClass/containerClass/articleCountLabel, ReactiveFormsModule for the search FormControl, standalone components, no CommonModule, DatePipe imported directly, no effect(), Location for routing, MIT headers on changed files, kebab-case filenames, signed-off commits, no co-author trailers, no test plan.
Test coverage
No automated tests added. The topicLabel sentence-case logic and the topicVisuals fallback path are simple pure-function candidates.
Verdict: FAIL (one critical template violation)
Fix the topicLabel method call in the template (see inline) before merging.
Address review comment from @MRashad26: - docs-search.component: replace the topicLabel() method call in the template with a computed topicLabelRecord and indexed property access, per the no-functions-in-templates rule (frontend-checklist #4). Resolves 1 review thread. Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Review Feedback AddressedCommit: Changes Made
Threads Resolved1 of 1 unresolved thread addressed. Branch was also rebased onto the latest |
🧹 Deployment RemovedThe deployment for PR #947 has been removed. |
What
A set of UI/UX improvements to the public Documentation (
docs) portal — landing page, article pages, the docs sidebar, and topic search.Changes
Layout & spacing
Landing page
angle-rightchevronsArticle pages
Sidebar
Notes
packages/shared(docs taxonomy order constant) and the docs build script (build-manifest.mjs), plus the sharedlens-switcher.Verification
All changes verified live in the running app via browser inspection (computed styles, layout measurements, sticky behavior, hover states). Preflight passed: license headers, format, lint, build, protected files, DCO + GPG signing.
🤖 Generated with Claude Code