This is an automated email from the ASF dual-hosted git repository. tiagobento pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/incubator-kie-website.git
commit 1d4fc3f1a9bf796f1a181e7c291cf15d5e6aec46 Author: Tiago Bento <[email protected]> AuthorDate: Mon Aug 10 16:06:12 2026 -0400 Show an Apache KIE / <component> lockup in the navbar @theme/Navbar/Logo is swizzled so that, while browsing a component's section, the navbar brand reads "Apache KIE / <component>" with the component's own mark. Everywhere else it renders the stock logo. Inert until the component sections exist; the following commits add them one by one. --- src/theme/Navbar/Logo/index.tsx | 73 +++++++++++++++++++++++++++++++++ src/theme/Navbar/Logo/styles.module.css | 63 ++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+) diff --git a/src/theme/Navbar/Logo/index.tsx b/src/theme/Navbar/Logo/index.tsx new file mode 100644 index 0000000..823b2fe --- /dev/null +++ b/src/theme/Navbar/Logo/index.tsx @@ -0,0 +1,73 @@ +import Logo from "@theme/Logo"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import { useLocation } from "@docusaurus/router"; + +import styles from "./styles.module.css"; + +type Component = { + /** Root path of the component's section, e.g. "/drools". */ + path: string; + /** Component name, spelled out next to the Apache KIE mark. */ + title: string; + /** Square component mark, served from static/img. */ + logo: string; +}; + +const COMPONENTS: Component[] = [ + { path: "/drools", title: "Drools", logo: "/img/drools.svg" }, + { path: "/optaplanner", title: "OptaPlanner", logo: "/img/planner.svg" }, + { path: "/jbpm", title: "jBPM", logo: "/img/jbpm.svg" }, + { path: "/kogito", title: "Kogito", logo: "/img/kogito.svg" }, + { path: "/sonataflow", title: "SonataFlow", logo: "/img/sonataflow.svg" }, + { path: "/tools", title: "Tools", logo: "/img/tools.svg" }, +]; + +function findComponent(pathname: string): Component | undefined { + const current = pathname.replace(/\/+$/, ""); + return COMPONENTS.find( + (component) => + current === component.path || current.startsWith(`${component.path}/`) + ); +} + +/** + * Swizzled to append a component lockup to the Apache KIE logo while browsing + * a component section, so the navbar reads "Apache KIE / Drools". Every other + * page renders the stock logo. + */ +export default function NavbarLogo(): JSX.Element { + const { pathname } = useLocation(); + const component = findComponent(pathname); + const logoUrl = useBaseUrl(component?.logo ?? "/img/favicon.ico"); + + const kieLogo = ( + <Logo + className="navbar__brand" + imageClassName="navbar__logo" + titleClassName="navbar__title text--truncate" + /> + ); + + if (!component) { + return kieLogo; + } + + return ( + <div className={styles.lockup}> + {kieLogo} + <span className={styles.separator} aria-hidden="true"> + / + </span> + <Link to={component.path} className={styles.componentBrand}> + <img + className={styles.componentLogo} + src={logoUrl} + alt="" + aria-hidden="true" + /> + <span className={styles.componentTitle}>{component.title}</span> + </Link> + </div> + ); +} diff --git a/src/theme/Navbar/Logo/styles.module.css b/src/theme/Navbar/Logo/styles.module.css new file mode 100644 index 0000000..a00ccf5 --- /dev/null +++ b/src/theme/Navbar/Logo/styles.module.css @@ -0,0 +1,63 @@ +.lockup { + display: flex; + align-items: center; + min-width: 0; +} + +.lockup :global(.navbar__brand) { + margin-right: 0; +} + +/* Only the trailing margin is dropped — the mark itself is left at exactly the + size it renders everywhere else on the site. */ +.lockup :global(.navbar__logo) { + margin-right: 0; +} + +.separator { + margin: 0 1rem; + font-size: 1.5rem; + line-height: 1; + color: var(--ifm-color-emphasis-400); + user-select: none; +} + +.componentBrand { + display: flex; + align-items: center; + min-width: 0; + color: var(--ifm-navbar-link-color); +} + +.componentBrand:hover { + color: var(--ifm-color-primary); + text-decoration: none; +} + +.componentLogo { + height: 2rem; + width: 2rem; + margin-right: 0.5rem; + flex: 0 0 auto; +} + +/* Quicksand is the wordmark typeface — used for names only, never for + surrounding UI text. */ +.componentTitle { + font-family: "Quicksand", var(--ifm-font-family-base); + font-size: 1.25rem; + font-weight: var(--ifm-font-weight-bold); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media (max-width: 996px) { + .componentTitle { + display: none; + } + + .separator { + margin: 0 0.75rem; + } +} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
