New website design

[ammachado]

Redesign of camel.apache.org: new design tokens and typography (Archivo, Open Sans, JetBrains Mono), a shared header and footer for the Hugo pages and the Antora docs UI, and redesigned home, docs, projects, tooling, community, download, security, releases and blog pages.

Hugo and Antora templates plus the antora-ui-camel bundle change; content is mostly untouched apart from copy moved into data/*.yaml. Design notes and per-piece specs live under docs/superpowers/.

Checks run locally: hugo with 0 errors, html-validate clean on all Hugo pages after minify, tests/redirect.sh 71/71, stylelint clean on the bundle. yarn check:links still reports three upstream apache/camel link failures unrelated to this branch.

Draft while the design owner reviews the open items recorded in the specs (header fixed vs. sticky, footer column underline, phone-width header search).

🤖 Generated with Claude Code

[davsclaus]

Good calls @Croway - however the user guide / docs etc is something we will tackle later. First stop is a modern website for the current.

I think we need to let a big AI go over all the docs and help reorganize it and build up a new TOC for it all.

[ammachado]

@Croway thanks for the thorough feedback! Addressing each point:

1) Version misalignment in getting-started page
The getting-started page content comes from the upstream apache/camel docs repo via Antora. The version numbers are baked into that upstream source, so fixing them (or introducing a version placeholder) needs to happen there, not in this website repo.

2) Menu disappears on /community/books/
I checked the template markup and CSS, and tested the page at both 1440px and 1024px viewports. The header with all nav items (Docs, Tooling, Security, Community, Blog) renders correctly. At viewport widths below the 1024px breakpoint, the menu is intentionally behind the burger toggle (responsive behavior). Could you confirm whether you were viewing at a narrower width, or if you can still reproduce at full desktop width?

3) CONTENTS sidebar too close to content
Good catch. The doc content grid was capped at max-width: 1180px, which left only ~904px for the main content after the TOC (220px) and gap (56px). Widened it to 1340px in a7f55a7 so the content column gains ~160px on wide screens.

🤖 Generated with Claude Code

[github-actions]

🚀 Preview is available at https://pr-1740--camel.netlify.app

[ammachado]

Adds a teal accent (#1f6858) to stat numbers, blog dates, and community tags, breaking the all-orange warmth with a complementary cool tone that still feels natural on the warm palette.

Before/after:

[github-actions]

🚀 Preview is available at https://pr-1740--camel.netlify.app

[Croway]

better compared to before, but there's still some space

still no left menu

[jamesnetherton]

In data/home.yaml not sure if we want to come up with a badge name for Quarkus?

When I first saw the 'Three clear paths' section, I read it as though you have a fast option (CLI), the most popular option (CSB) and then an alternative with no distinguishing headline feature (Quarkus).

[davsclaus]

In data/home.yaml not sure if we want to come up with a badge name for Quarkus?

When I first saw the 'Three clear paths' section, I read it as though you have a fast option (CLI), the most popular option (CSB) and then an alternative with no distinguishing headline feature (Quarkus).

Yeah do you have a suggestion? (maybe Performance or Most performant) or something related to that.

[claudio4j]

Unsure if it's the preview, but clicking to "component reference" link in https://pr-1740--camel.netlify.app/docs/ opens non styled page with "This file exists solely to defeat the limitations of the link checker, that is unaware of the .htaccess redirect from this page to the latest released version."

The property names column are too small (main component).
https://pr-1740--camel.netlify.app/components/4.22.x/others/main.html

It may be related when I changed the word-wrap style.

[jamesnetherton]

In data/home.yaml not sure if we want to come up with a badge name for Quarkus?
When I first saw the 'Three clear paths' section, I read it as though you have a fast option (CLI), the most popular option (CSB) and then an alternative with no distinguishing headline feature (Quarkus).

Yeah do you have a suggestion? (maybe Performance or Most performant) or something related to that.

Yeah I am struggling for ideas 😅. Maybe 'Cloud native'?

[davsclaus]

okay lets go with cloud native

[claudio4j]

The tables are not rendered equally across some components, the opentelemetry shows a background to the property name.

https://pr-1740--camel.netlify.app/components/4.22.x/others/opentelemetry.html

https://pr-1740--camel.netlify.app/components/4.22.x/activemq6-component.html

It may be related to the way each component .adoc and component-configure-options.adoc partials are rendered.

[github-actions]

🚀 Preview is available at https://pr-1740--camel.netlify.app

[davsclaus]

Yes I agree on a standard monitor if you make the browser take up most width on your screen the table is crammed too much, there is alot empty space to the right we can use, to make the table columns wider.

[github-actions]

🚀 Preview is available at https://pr-1740--camel.netlify.app

[davsclaus]

Thanks for 2407cd3 @ammachado, the wider grid is a big step. I rendered the Main page (components/4.22.x/others/main.html) headlessly in Chrome and measured the first row of the Camel Main options table, so here is where it stands and what is still missing. Everything below is measured against your built site-940f27fb37.css.

Version	Viewport	Article width	Name / Description / Default / Type	Row height
Preview before 2407cd3	2400	912	62 / 430 / 278 / 220	382
2407cd3	2400	1372	145 / 682 / 287 / 220	127
2407cd3	1440	732	131 / 430 / 278 / 220	153
2407cd3 + the two changes below	2400	1372	236 / 706 / 172 / 220	102
2407cd3 + the two changes below	1440	732	220 / 311 / 152 / 220	178
Current live site, for reference	2400	1366	333 / 537 / 260 / 201	92

What is still wrong. The Name column is 145px on a 2400px monitor and names render as camel.-main.addition-alSensitive-Keywords. The cause is .doc { hyphens: auto } in doc.css: it is inherited into the cell, so Chrome treats every syllable of a property name as a break opportunity when it computes the column's min-content width, and hands the column almost nothing. Switching to overflow-wrap: break-word cannot help while hyphenation is on. The Default column is stuck at ~280px for the same family of reason: values like classpath:camel/,classpath:camel-template/,classpath:camel-rest/* have no break points, so the browser widens the column to fit them and the space comes out of Description.

Two changes fix it, and they only work together. With hyphens: none alone the Name column becomes 510px (the longest name, unbroken) and the table overflows at every viewport; the script below is what gives it sane break points again.

1. In antora-ui-camel/src/css/doc.css, on top of your current rule:

/* The first column usually holds a property name. Floor its width so it cannot
   collapse to a few characters per line when the table is under pressure (the
   wrapper scrolls instead) and never auto-hyphenate inside an identifier.
   11-table-breaks.js inserts soft break points after dots and before camel-case
   humps, so with break-word a long name wraps there and nowhere else. */
.doc table.tableblock tbody tr td:first-child {
  min-width: calc(220 / var(--rem-base) * 1rem);
  overflow-wrap: break-word;
  hyphens: none;
  font-weight: 700;
}

/* Pages that write the property name as `code` (e.g. OpenTelemetry) render it the
   same as the generated option tables, which use bold text, instead of as a chip.
   This is the inconsistency @claudio4j reported above. */
.doc table.tableblock tbody tr td:first-child p code {
  background: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  padding: 0;
}

2. New file antora-ui-camel/src/js/11-table-breaks.js (passes the bundle's eslint, yarn build in antora-ui-camel picks it up and regenerates public/_/js/site-*.js and the rev manifests):

;(function () {
  'use strict'

  // Option tables hold long single tokens with no natural break points:
  // property names such as camel.main.streamCachingRemoveSpoolDirectoryWhenStopping,
  // fully qualified class names, classpath lists. Without break points the
  // browser either widens that column to fit the token, squeezing the
  // Description column, or, once the table is under pressure, breaks the token
  // one character per line. This inserts <wbr> after . , / : in any token of
  // MIN_TOKEN characters or more, and before each camel-case hump in the first
  // column, so a long token wraps at a sensible place first. The page is still
  // correct if this never runs; doc.css keeps a floor on the first column.
  var MIN_TOKEN = 20
  var SEPARATOR = /([.,/:])/
  var HUMP = /([a-z0-9])(?=[A-Z])/g
  var HAS_HUMP = /[a-z0-9][A-Z]/

  var breakToken = function (token, firstColumn, fragment) {
    token.split(SEPARATOR).forEach(function (part) {
      if (!part) return
      if (SEPARATOR.test(part) && part.length === 1) {
        fragment.appendChild(document.createTextNode(part))
        fragment.appendChild(document.createElement('wbr'))
        return
      }
      if (!firstColumn) {
        fragment.appendChild(document.createTextNode(part))
        return
      }
      part.split(HUMP).forEach(function (hump, i, humps) {
        if (!hump) return
        fragment.appendChild(document.createTextNode(hump))
        if (i < humps.length - 1) fragment.appendChild(document.createElement('wbr'))
      })
    })
  }

  var breakTextNode = function (node, firstColumn) {
    var text = node.nodeValue
    if (!new RegExp('[^\\s]{' + MIN_TOKEN + ',}').test(text)) return
    var fragment = document.createDocumentFragment()
    text.split(/(\s+)/).forEach(function (token) {
      if (token.length >= MIN_TOKEN && (SEPARATOR.test(token) || (firstColumn && HAS_HUMP.test(token)))) {
        breakToken(token, firstColumn, fragment)
      } else if (token) {
        fragment.appendChild(document.createTextNode(token))
      }
    })
    node.parentNode.replaceChild(fragment, node)
  }

  ;[].slice.call(document.querySelectorAll('.doc table.tableblock td')).forEach(function (cell) {
    var firstColumn = !cell.previousElementSibling
    var walker = document.createTreeWalker(cell, window.NodeFilter.SHOW_TEXT)
    var nodes = []
    while (walker.nextNode()) {
      if (!walker.currentNode.parentNode.closest('pre')) nodes.push(walker.currentNode)
    }
    nodes.forEach(function (node) {
      breakTextNode(node, firstColumn)
    })
  })
})()

With both in place, names wrap as camel.main.additionalSensitive / Keywords instead of mid-syllable, the classpath defaults wrap after each / or , and the Default column shrinks to ~170px, and the Description column gets everything that frees up. If you would rather the Name column stay on one line more often on wide screens, keeping a width: 22% hint on that cell together with the rules above gets it to ~314px at 2400px in my measurements.

Optional and separate: hyphens: auto on all of .doc also produces spe-cific and in-stances inside table cells; scoping it to prose paragraphs outside tables reads cleaner. And longer term, the reason the upstream cols="2,5,^1,2" hints never reach the browser is extensions/inline-styles.js, which strips every style attribute because the site CSP forbids inline styles. Converting col widths to classes there would let upstream steer these tables, but that is outside this PR.

Measurements and the patch were produced with Claude Code, so feel free to hand this comment to your assistant as is.

Screenshots, both at a 2400px viewport. Your commit 2407cd3 as built (Name column 145px, names hyphenated mid-word):

The same page with the two changes above applied (names wrap at dots and camel-case humps, Default column shrinks, Description gets the space):

[ammachado]

Addressed all open review feedback in 2407cd3:

@Croway:

1) Menu disappears on /community/books/
The community subpages (Books, Team, Articles, etc.) are Hugo pages, not Antora docs, so they never had the Antora left nav. Added a new layouts/community/single.html with a left sidebar that lists all community sibling pages, styled to match the Antora nav (highlighted current page, same font/spacing). Hidden on mobile via the 1025px breakpoint.

2) CONTENTS sidebar spacing
Replaced all fixed max-width caps with clamp(1340px, 85vw, 1800px). The doc grid, static pages, and the new community layout now scale fluidly with the viewport. On a standard 1920px monitor, the content area is ~1632px instead of the old 1340px cap. On ultra-wide displays, it caps at 1800px for readability.

@claudio4j:

3) Component Reference link opens unstyled page
The "Browse components" link points to /components/latest/, which relies on an Apache .htaccess redirect. Netlify ignores .htaccess, so the preview showed a raw placeholder. Added a static/_redirects file with /components/latest/* /components/4.22.x/:splat 302 so the Netlify preview resolves correctly.

4) Property names column too narrow
Removed the width: 25% constraint and changed overflow-wrap: anywhere to break-word in doc.css. Property names like camel.main.additionalSensitiveKeys now get the space they need instead of breaking across 8+ lines.

5) Tables not rendered equally (opentelemetry vs activemq6)
This is an upstream content inconsistency in apache/camel. Only 3 component pages use **bold** (renders as <strong>) for property names: main.html, properties-component.html, and telegram-component.html. The other ~150 pages use backticks (renders as <code> with background). The fix needs to happen in the upstream AsciiDoc tooling that generates the configuration option tables for those 3 components.

@davsclaus:

6) Tables crammed, empty space to the right
Addressed by both the table column fix (#4) and the responsive grid (#2). Tables now have more room, and the content area scales with viewport width.

🤖 Generated with Claude Code

[ammachado]

Applied both changes from your analysis in 88f908c:

1. CSS (doc.css): min-width: 220px, hyphens: none, and the td:first-child p code normalization so backtick-wrapped property names render the same as the generated bold text.
2. JS (11-table-breaks.js): <wbr> insertion after dots, commas, slashes, colons and before camelCase humps for tokens >= 20 chars. Skips <pre> elements.

Bundle rebuilt. The Netlify preview should update shortly.

Optional and separate: hyphens: auto on all of .doc also produces spe-cific and in-stances inside table cells

Noted. I'll leave scoping hyphens: auto to prose paragraphs for a follow-up to keep this PR focused.

the reason the upstream cols="2,5,^1,2" hints never reach the browser is extensions/inline-styles.js, which strips every style attribute because the site CSP forbids inline styles

Good finding. Converting col widths to classes in inline-styles.js would be a nice improvement but agreed it is out of scope here.

[github-actions]

🚀 Preview is available at https://pr-1740--camel.netlify.app

[github-actions]

🚀 Preview is available at https://pr-1740--camel.netlify.app

[davsclaus]

Thanks this is much better.

My only comment now is that the front page has a very big logo, and that the "3 paths" are not easily visible and you need to scroll down.

Also personally I would rather have the 3 paths as 3 tiles instead of the carrusel.

But I dont want to bike shed this anymore.

LGTM