Skip to content

Migrate theme from Docsy to Hextra for modern documentation UX#717

Open
jkhelil wants to merge 23 commits intotektoncd:mainfrom
jkhelil:hextra-theme-migration
Open

Migrate theme from Docsy to Hextra for modern documentation UX#717
jkhelil wants to merge 23 commits intotektoncd:mainfrom
jkhelil:hextra-theme-migration

Conversation

@jkhelil
Copy link
Copy Markdown
Member

@jkhelil jkhelil commented Mar 31, 2026

Summary

  • Theme migration: Replace the stock Docsy theme (v0.6.0, circa 2018) with Hextra v0.12.0 — collapsible sidebar, sticky TOC, Ctrl+K search, dark mode toggle, responsive design.
  • Landing page redesign: Hero section with CNCF incubating badge, "Why Tekton?" value-prop cards, "Trusted By" adopters strip, workflow diagram, and quick-access Get Started cards.
  • Getting Started overhaul: Guided card layout (Pipelines first, PaC second with full content), step-by-step flow.
  • Installation restructure: Local cluster → Pipelines → Triggers → Operator (new) → Additional Config.
  • Community page rework: Card-based layout with color-coded sections and dark mode support.
  • Branding: Tekton horizontal color logo in navbar, dark mode toggle in header.
  • Sync script fix: sync.py now outputs standard YAML front matter (no <!-- --> wrappers) so Hextra parses weights/titles correctly. All 23 tests pass.

Test plan

  • Verify Netlify deploy preview renders correctly
  • Check sidebar collapses and orders correctly across all doc sections
  • Confirm dark mode toggle works in header
  • Verify landing page on desktop and mobile
  • Confirm community page cards render properly
  • Test Ctrl+K search
  • Verify make sync produces valid front matter
  • Check Getting Started order: Pipelines → PaC → Triggers → Supply Chain
  • Check Installation order: Local cluster → Pipelines → Triggers → Operator → Additional Config

Made with Cursor

jkhelil added 13 commits March 31, 2026 12:39
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
@tekton-robot
Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign twogiants after the PR has been reviewed.
You can assign the PR to them by writing /assign @twogiants in a comment when ready.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@tekton-robot tekton-robot added the size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. label Mar 31, 2026
jkhelil added 4 commits March 31, 2026 20:16
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
@jkhelil
Copy link
Copy Markdown
Member Author

jkhelil commented Apr 1, 2026

@vdemeester @AlanGreene
The Hugo build completes successfully (592 pages), but the Netlify deploy preview fails in the post-build step because of the netlify-plugin-checklinks plugin.

plugins:
    - inputs: {}
      origin: ui      ← installed via dashboard, not your code
      package: netlify-plugin-checklinks

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.
The current production site (Docsy on main) will keep working exactly as it does today, just without the automated link check.

Let me know if you have any questions or concerns.

Thanks!

@AlanGreene
Copy link
Copy Markdown
Member

Plugin disabled, the build is now successful, and the preview is available 👍

jkhelil added 2 commits April 1, 2026 14:45
…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
@AlanGreene
Copy link
Copy Markdown
Member

Just spotted some odd behaviour on the preview:
image

I see the latest commit updated the default theme to light from the previous value of system. Was support for the system option removed? I don't see it anymore once I select one of the others, but I believe it would be better to have that as the default.

- 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
@jkhelil jkhelil force-pushed the hextra-theme-migration branch from 1a8a08d to c419eb5 Compare April 1, 2026 17:50
- 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
@jkhelil
Copy link
Copy Markdown
Member Author

jkhelil commented Apr 1, 2026

Just spotted some odd behaviour on the preview:

I see the latest commit updated the default theme to light from the previous value of system. Was support for the system option removed? I don't see it anymore once I select one of the others, but I believe it would be better to have that as the default.

yeah have seen few website removing the system theme, i agree, we have to keep it as defautl, bring it back

jkhelil added 2 commits April 2, 2026 12:27
- 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
Copy link
Copy Markdown
Member

@waveywaves waveywaves left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a way for the user to "join the Tekton slack"

Copy link
Copy Markdown
Member

@waveywaves waveywaves left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we have the component releases dynamically update the website as well ?

@tekton-robot tekton-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Apr 16, 2026
@tekton-robot
Copy link
Copy Markdown

@jkhelil: PR needs rebase.

Details

Instructions 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.

Copy link
Copy Markdown
Member

@afrittoli afrittoli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/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.

@tekton-robot tekton-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Apr 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants