Migrate theme from Docsy to Hextra for modern documentation UX#717
Migrate theme from Docsy to Hextra for modern documentation UX#717jkhelil wants to merge 23 commits intotektoncd:mainfrom
Conversation
Replace the stock Docsy v0.6.0 theme with Hextra v0.12.0 to gain collapsible sidebar navigation, sticky right-hand TOC, FlexSearch with Ctrl+K, dark mode toggle, and breadcrumbs — all built-in with zero custom code. - Swap Hugo module from google/docsy to imfing/hextra - Bump Hugo from 0.107.0 to 0.134.0+ (Hextra minimum) - Delete 20 Docsy-specific layouts (sidebar, navbar, baseof, search, footer, head, scripts, favicons, privacy-notice, etc.) - Add shortcode compatibility shims for readfile, imgproc, tabs, blocks/*, pageinfo, alert, and card - Convert home page from .html to .md (Hextra TOC compatibility) - Remove duplicate menu entries from docs/blog front matter - Fix deprecated taxonomyTerm and language-level description config - Port version selector to Hextra custom head-end partial - Replace Docsy SCSS (181 lines) with Hextra CSS custom properties using Tekton brand colors (#00109F navy, #B980D0 purple) - Port community page layout from Bootstrap grid to plain CSS grid - Drop PostCSS devDependencies no longer needed by Hextra - Update Dockerfile base image to hugomods/hugo:exts-0.134.0 Verified: hugo build succeeds (585 pages, 0 errors). Made-with: Cursor
- Set unique weights on all docs section _index.md files to match the canonical order: Getting Started (1), Installation (2), Concepts (3), How-to Guides (4), Tasks and Pipelines (5), Triggers (6), CLI (7), Supply Chain Security (8), Operator (9), Dashboard (10), Results (11), Pruner (12), Catalog (13), Contribute (100) - Rewrite landing page using Hextra native shortcodes: hero-badge, hero-headline, hero-subtitle, hero-button, feature-grid, feature-card, and cards — replacing broken Docsy blocks/* - Delete all 7 unused Docsy block shortcodes (cover, section, feature, showcase, partners, partners-alternate, manifesto) - Rename card.html shim to docsy-card.html to avoid collision with Hextra's built-in card shortcode - Update 3 installation pages to use docsy-card shortcode Verified: hugo build succeeds (585 pages, 0 errors). Made-with: Cursor
Hugo 0.159 does not parse front matter wrapped in HTML comments (<!-- --- ... --- -->) which was a Docsy convention. This caused all section weights and titles to be ignored, resulting in alphabetical sidebar ordering instead of the intended sequence. Remove the <!-- --> wrappers from all 13 docs section _index.md files so Hugo properly reads weight, title, linkTitle, description, and cascade fields. Verified: `hugo list all` now shows correct titles for all sections. Made-with: Cursor
Tekton moved from the Continuous Delivery Foundation to the Cloud Native Computing Foundation as an incubating project. Made-with: Cursor
- Hero section: text left, Tekton logo right (stacks on mobile) - Explore Tekton: 3-column card grid with icons, hover effects - CNCF: horizontal banner at page bottom with logo and text - Responsive: collapses to 2-col then 1-col, dark mode support Made-with: Cursor
- Add navbar logo: navy robot icon (light mode), white (dark mode) - Extracted robot mascot from full wordmark SVG for clean 28x28 display - Restore Explore Tekton section to use Hextra card shortcodes (proper boxes) - Force 3-column grid layout for Explore cards via CSS - Remove hero-section logo (moved to navbar where it belongs) - CNCF banner at bottom unchanged Made-with: Cursor
Remove Standardization/Best Practices/Flexibility feature cards and "Explore Tekton" heading — the card grid speaks for itself. Made-with: Cursor
- Add i18n translation keys for Documentation, Blog, Community, GitHub - Add identifier field to menu items in config.yaml - Override navbar-link.html partial to fix Hextra bug where title attribute used dot context instead of $item variable Made-with: Cursor
Move workflow.svg to static/images/ and display it centered between the hero buttons and the card grid. Made-with: Cursor
- Use tekton-horizontal-color.png as navbar logo with displayTitle off - Add theme toggle (light/dark) to header navbar, remove from footer - Redesign community page with card-based layout and clear link styling - Update CNCF incubating badge to link to official announcement blog post Made-with: Cursor
- Add "Why Tekton?" value-prop cards and reorder Get Started cards on landing page - Rewrite Getting Started index with guided card layout and step-by-step flow - Add Pipelines as Code getting started page with content (was empty stub) - Reorder Getting Started sidebar: Pipelines first, then PaC, Triggers, Supply Chain - Reorder Installation sidebar: Local cluster, Pipelines, Triggers, Operator, Additional Config - Add new Tekton Operator installation page - Unwrap comment-wrapped front matter on all Getting Started and Installation sub-pages - Fix sync.py to output standard YAML front matter instead of HTML-comment-wrapped front matter, ensuring Hextra can parse weights and titles after sync - Update sync tests to match new front matter format (all 23 tests pass) Made-with: Cursor
Display Red Hat, IBM, Google, Alibaba, Marriott Vacations, Nubank, OneStock, AllianzDirect, Kadaster, Giant Swarm, and Alauda as pill badges between Why Tekton and Get Started sections. Made-with: Cursor
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Hextra v0.12.1 requires Hugo >= 0.146.0 (uses the `try` template function). The previous 0.134.0 caused Netlify deploy-preview to fail. Made-with: Cursor
The checklinks plugin misinterprets Hextra's hx: CSS class prefix as duplicate XML namespace attributes in inline SVGs, causing false positives on every page. Disabled until a compatible version is available. Made-with: Cursor
Made-with: Cursor
Replace generic card shortcodes with custom card layout featuring colored accent lines, circular icons, and a subtitle, matching the target design. Also updates workflow.svg. Made-with: Cursor
|
@vdemeester @AlanGreene The problem: Hextra uses hx: as a CSS class prefix (from Tailwind). The checklinks plugin parses the generated HTML as strict XML and misinterprets hx: class names as XML namespace declarations, producing thousands of false-positive "duplicate attribute: xmlns:hx" errors. This is a known incompatibility — the plugin's HTML/SVG parser simply doesn't support Hextra's output format. I've already commented out the plugin config in netlify.toml, but the plugin is also installed at the UI level (origin: ui in the build logs), so it still runs regardless of what's in the config file. Ask: Could youremove (or disable) netlify-plugin-checklinks from the Netlify site settings? Impact assessment: The plugin only performs post-build link validation — it does not affect the site build or deployment in any way. Removing it means link checking stops running, but the site continues to build and deploy identically. Let me know if you have any questions or concerns. Thanks! |
|
Plugin disabled, the build is now successful, and the preview is available 👍 |
…ents Ensure links, inline code, and code blocks are readable in dark mode. Add dark-mode overrides for Why Tekton cards, CNCF banner, Hextra built-in cards, community page cards, and adopter badges. Made-with: Cursor
Hextra requires a menu.main entry with params.type: search to render the search input in the navbar. Also removes the unused Docsy-era content/en/search.md page. Made-with: Cursor
- Unwrap comment-wrapped front matter (<!-- --- ... --- -->) in tracked content files so Hugo/Hextra parses them correctly. Synced directories (gitignored) are handled by the already-fixed sync.py FM_WRAPPER change. - Update readfile shortcode to strip front matter before rendering, preventing YAML from leaking into included pages. - Switch syntax highlighting from inline styles to CSS classes (noClasses: false) and add dual-theme Chroma stylesheet — Manni for light mode, Dracula for dark mode. - Fix pageinfo and alert shortcodes with dark mode CSS support. - Override hero-button shortcode to support primary/alt button variants with proper dark mode styling. - Override theme-toggle partial to remove "System" option, keeping only Light and Dark. Made-with: Cursor
1a8a08d to
c419eb5
Compare
- Revert theme default to "system" and remove custom theme-toggle override, restoring Light/Dark/System options per reviewer feedback. - Update workflow SVG diagram. Made-with: Cursor
yeah have seen few website removing the system theme, i agree, we have to keep it as defautl, bring it back |
- Add rounded corners to the workflow SVG image. - Reduce spacing between hero buttons and the workflow diagram. - Add a subtle bottom fade gradient to guide the eye downward. Made-with: Cursor
- Replace text badges with SVG logos for all 11 adopters. - Show logos in full color (light) with white inversion (dark mode). - Add adopter-wide class for wide wordmark logos (OneStock, Alauda, AllianzDirect) to keep text legible. - Restyle CNCF banner with frosted glass backdrop-filter blur and semi-transparent backgrounds for better theme integration. Made-with: Cursor
waveywaves
left a comment
There was a problem hiding this comment.
Can we add a way for the user to "join the Tekton slack"
waveywaves
left a comment
There was a problem hiding this comment.
can we have the component releases dynamically update the website as well ?
|
@jkhelil: PR needs rebase. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
afrittoli
left a comment
There was a problem hiding this comment.
/hold
For me this PR, as it is now, is a no-go.
It's a template provider, style and content change all at once.
There's no way I can review this change all at once and get any level of confidence that the website is the same as before.
Is the link structure being preserved? I would not want to break all links an search results out there.
Also I would like to understand what Hextra provides that we didn't get with Docsy, since the change requires a significant change in the website code.

Summary
sync.pynow outputs standard YAML front matter (no<!-- -->wrappers) so Hextra parses weights/titles correctly. All 23 tests pass.Test plan
make syncproduces valid front matterMade with Cursor