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
The following commit(s) were added to refs/heads/main by this push:
new d3e9133 Home page, navbar, footer, and site-wide styling refresh (#58)
d3e9133 is described below
commit d3e913356636ce6acbee1c7f20563e69e02360f6
Author: Tiago Bento <[email protected]>
AuthorDate: Mon Aug 10 09:37:45 2026 -0400
Home page, navbar, footer, and site-wide styling refresh (#58)
* Bump the pinned devbox toolchain
* Point /documentation at the 10.2.0 docs
* Note the Google Groups forums and refresh the repositories link
The two Google Groups predate the Apache mailing lists and are still in
use, so they are worth naming — with the caveat that they are community
forums rather than official channels. The repositories link also pointed
at a search that no longer matches the archived/renamed repositories.
* Self-host Quicksand and put the site on the KIE palette
The Infima primary ramp was still the template's purple everywhere but
the base colour, so hover and active states had nothing to do with the
logo. Both ramps are now built around the palette the logo uses: orange
in light mode, the palette's light blue in dark mode, where orange
muddies against the background.
Quicksand is self-hosted rather than pulled from Google Fonts so the
site makes no third-party requests at runtime.
* Rework the footer into a site map and a disclaimer band
The footer was a centred list of links on a flat dark background. It now
reads as two sections: a left-aligned site map on KIE's deep blue, and
the ASF incubator disclaimer below it, keeping the original darker
colour so it sits apart as a band of its own.
Short pages used to leave a stub of content above a footer that filled
the rest of the screen, which put the disclaimer on show before the
reader had scrolled anything. Content now reaches down to where the site
map begins, so the map closes the first screen and the disclaimer starts
just below it. Home is the exception: it is a single screen, with the
whole footer below the fold.
* Reorder the navbar and rebuild the footer's link columns
The navbar led with Documentation and buried Blog at the end. It now
opens with About and follows the order a visitor is likely to want:
About, Components, Docs, Downloads, Examples, Blog, Community. The
Documentation entry is relabelled Docs, which is what it is called
everywhere else.
The footer's Code column listed individual runtime repositories, most of
which are now consolidated in apache/incubator-kie; it lists the
consolidated repository plus tools, examples, website and docs instead.
* Rebuild the home page hero
The hero used Infima's primary-coloured banner with the site title and
tagline in default type. It is now set on the page background: the KIE
mark, then the name as a lockup — Apache in the site font, KIE in
Quicksand, with the trademark and an incubating pill hung off it — over
a rule.
The mark tracks the viewport's height as well as its width, since the
hero shares the first screen with the component cards.
* Reorder the component cards and set Tools apart
The cards ran in an order that mixed the engines with what builds on
them. They now run Drools, OptaPlanner, jBPM, Kogito, SonataFlow — the
runtimes, roughly in the order they came about — with a separator before
Tools, which is authoring rather than a runtime.
Tools also gets a logo in the KIE palette; the old one was an unrelated
line drawing at a different weight to every other card.
The logo size becomes a variable that gives way on short viewports, and
the separator dot is centred off that variable rather than off a
hard-coded 120px.
* Add an About section
What Apache KIE stands for, the projects under the umbrella, and how the
community got from Drools in 2001 to Apache today. None of it was
written down anywhere on the site.
It is a docs section with its own sidebar, like Community or Examples,
rather than a bespoke page — so it picks up the site's layout,
breadcrumbs and table of contents instead of carrying its own CSS.
---
devbox.lock | 24 +--
docs/about/about.md | 15 ++
docs/about/components.md | 56 +++++++
docs/about/history.md | 53 +++++++
docs/community/community.md | 11 +-
docusaurus.config.ts | 50 ++++---
sidebars.ts | 1 +
src/components/HomepageComponents/index.tsx | 34 +++--
.../HomepageComponents/styles.module.css | 43 +++++-
src/css/custom.css | 161 +++++++++++++++++++--
src/pages/documentation.tsx | 2 +-
src/pages/index.module.css | 155 ++++++++++++++++----
src/pages/index.tsx | 26 +++-
static/fonts/quicksand-latin-ext.woff2 | Bin 0 -> 26568 bytes
static/fonts/quicksand-latin.woff2 | Bin 0 -> 28336 bytes
static/img/tools.svg | 14 +-
16 files changed, 543 insertions(+), 102 deletions(-)
diff --git a/devbox.lock b/devbox.lock
index a0ebdb2..8de57cc 100644
--- a/devbox.lock
+++ b/devbox.lock
@@ -2,12 +2,12 @@
"lockfile_version": "1",
"packages": {
"github:NixOS/nixpkgs/nixpkgs-unstable": {
- "last_modified": "2026-04-11T06:17:25Z",
- "resolved":
"github:NixOS/nixpkgs/13043924aaa7375ce482ebe2494338e058282925?lastModified=1775888245&narHash=sha256-nwASzrRDD1JBEu%2Fo8ekKYEXm%2FoJW6EMCzCRdrwcLe90%3D"
+ "last_modified": "2026-08-06T00:10:29Z",
+ "resolved":
"github:NixOS/nixpkgs/70ce234312134a463ba7728e94da2486a1d237ac?lastModified=1785975029"
},
"yarn@latest": {
- "last_modified": "2026-04-16T08:46:55Z",
- "resolved":
"github:NixOS/nixpkgs/b86751bc4085f48661017fa226dee99fab6c651b#yarn",
+ "last_modified": "2026-08-01T16:34:20Z",
+ "resolved":
"github:NixOS/nixpkgs/a5cbcfe954791221bfffe2307f7d1a1bf61a871e#yarn",
"source": "devbox-search",
"version": "1.22.22",
"systems": {
@@ -15,41 +15,41 @@
"outputs": [
{
"name": "out",
- "path":
"/nix/store/59yqhmvbl7bsyv5qc30nmrpaf4iqj79h-yarn-1.22.22",
+ "path":
"/nix/store/729a7d8ap0zm5by7a9qnn3cwd3dnfwra-yarn-1.22.22",
"default": true
}
],
- "store_path":
"/nix/store/59yqhmvbl7bsyv5qc30nmrpaf4iqj79h-yarn-1.22.22"
+ "store_path":
"/nix/store/729a7d8ap0zm5by7a9qnn3cwd3dnfwra-yarn-1.22.22"
},
"aarch64-linux": {
"outputs": [
{
"name": "out",
- "path":
"/nix/store/ybspc2b9q9j9drfpa5d1bmw2qgrkx4qc-yarn-1.22.22",
+ "path":
"/nix/store/pxq84iy34svypyr02xg0nn97803g4mzi-yarn-1.22.22",
"default": true
}
],
- "store_path":
"/nix/store/ybspc2b9q9j9drfpa5d1bmw2qgrkx4qc-yarn-1.22.22"
+ "store_path":
"/nix/store/pxq84iy34svypyr02xg0nn97803g4mzi-yarn-1.22.22"
},
"x86_64-darwin": {
"outputs": [
{
"name": "out",
- "path":
"/nix/store/8j2xmk7ijy7nijpy2yc3mcjf7hxpnpyl-yarn-1.22.22",
+ "path":
"/nix/store/ypqd29hkv7w6gdsaix8r186w2syvirn9-yarn-1.22.22",
"default": true
}
],
- "store_path":
"/nix/store/8j2xmk7ijy7nijpy2yc3mcjf7hxpnpyl-yarn-1.22.22"
+ "store_path":
"/nix/store/ypqd29hkv7w6gdsaix8r186w2syvirn9-yarn-1.22.22"
},
"x86_64-linux": {
"outputs": [
{
"name": "out",
- "path":
"/nix/store/g1ksanljq7v16gj8yb7zs6wkv7ikycy3-yarn-1.22.22",
+ "path":
"/nix/store/kcv7x69palz6x8ls6i1m6x15nvmk0pwq-yarn-1.22.22",
"default": true
}
],
- "store_path":
"/nix/store/g1ksanljq7v16gj8yb7zs6wkv7ikycy3-yarn-1.22.22"
+ "store_path":
"/nix/store/kcv7x69palz6x8ls6i1m6x15nvmk0pwq-yarn-1.22.22"
}
}
}
diff --git a/docs/about/about.md b/docs/about/about.md
new file mode 100644
index 0000000..661223a
--- /dev/null
+++ b/docs/about/about.md
@@ -0,0 +1,15 @@
+---
+id: about
+title: About
+sidebar_position: 0
+---
+
+Apache KIE is a community of solutions and supporting tooling for knowledge
+engineering and process automation, focusing on events, rules and workflows.
+
+KIE is short for **Knowledge Is Everything**. The name has a history going back
+more than two decades, and the components it brings together predate the
+umbrella by many years.
+
+- [Components](/about/components) — the six components under the umbrella, and
what each one does.
+- [History](/about/history) — how the community got from Drools in 2001 to
Apache today.
diff --git a/docs/about/components.md b/docs/about/components.md
new file mode 100644
index 0000000..6ca37dc
--- /dev/null
+++ b/docs/about/components.md
@@ -0,0 +1,56 @@
+---
+id: components
+title: Components
+sidebar_position: 1
+---
+
+The components that make up Apache KIE predate the umbrella by many years. Each
+one stands on its own, and they are designed to work together.
+
+## Drools
+
+The rule engine at the core of KIE. Started in 2001 as an open source rule
+engine and grew into a full business rule management system, today covering DRL
+rules and the DMN decision standard.
+
+## OptaPlanner
+
+A constraint solver for planning problems — scheduling, routing, rostering and
+the like. It began in 2006 as Drools Planner before becoming a project in its
+own right.
+
+## jBPM
+
+A workflow engine for long-running business processes, covering BPMN, case
+management and human tasks. From jBPM 5 onwards it was rebuilt around the same
+knowledge core as Drools.
+
+## Kogito
+
+The cloud-native generation of the engines, announced in 2019. It builds on
+Quarkus and code generation to run rules, decisions and processes as
+microservices.
+
+## SonataFlow
+
+A workflow engine for building serverless applications, implementing the
+[CNCF Serverless Workflow](https://serverlessworkflow.io/) specification —
+SonataFlow worked with
+[version 0.8](https://github.com/serverlessworkflow/specification/tree/0.8.x).
+It grew out of Kogito.
+
+## Tools
+
+The editors, extensions and developer tooling used to author and run KIE
assets.
+
+## Along the way
+
+Beyond the engines, the KIE community incubated a number of initiatives over
the
+years, some of which grew into projects of their own:
+
+- [Dashbuilder](https://www.dashbuilder.org), for authoring dashboards and
+ visualizing business data, today part of KIE Tools.
+- [TrustyAI](https://github.com/trustyai-explainability), for explainability
and
+ auditing of AI-augmented decision services, which continues as an independent
+ open source project.
+- SonataFlow, which grew out of Kogito.
diff --git a/docs/about/history.md b/docs/about/history.md
new file mode 100644
index 0000000..063b944
--- /dev/null
+++ b/docs/about/history.md
@@ -0,0 +1,53 @@
+---
+id: history
+title: History
+sidebar_position: 2
+---
+
+## How it got here
+
+- **2001** — Drools begins as an open source rule engine, later growing into a
+ full business rule management system at JBoss, and subsequently Red Hat.
+- **2006** — Drools Planner starts, and later becomes OptaPlanner.
+- **2010** — From jBPM 5 onwards, jBPM is rebuilt around the same knowledge
core
+ as Drools.
+- **Drools & jBPM 6** — The KIE umbrella name is introduced, bringing the
+ engines, tooling and shared infrastructure under one roof. This generation
+ brought Guvnor, which evolved into the KIE Workbench and later Business
+ Central, alongside KIE Server for execution.
+- **2019** — Kogito is announced: a continuation of Drools, jBPM and
+ OptaPlanner, redesigned to be cloud-native. Authoring moves to KIE Tools and
+ execution to Kogito, superseding Business Central and KIE Server.
+- **July 2022** — Red Hat and IBM announce that IBM is joining the KIE
+ community, and share their intent to move the technologies to a foundation to
+ widen the network of collaborators
+
([announcement](https://web.archive.org/web/20240719040925/https://blog.kie.org/2022/07/ibm-rht.html)).
+- **January 2023** — KIE enters the
+ [Apache Incubator](https://incubator.apache.org/projects/kie.html). The
+ repositories move from `github.com/kiegroup` to `github.com/apache` under the
+ `incubator-kie-*` prefix, the community adopts the Apache Way, and the
+ project's home becomes kie.apache.org.
+- **September 2023** — **8.44.0.Final**, the last feature release under
+ kiegroup. Patch releases followed into 2024, but the next feature release
+ would be the first one made at Apache.
+- **December 2024** — **10.0.0**, the first Apache KIE release, after 15 months
+ of work since the last release under kiegroup
+ ([announcement](/blog/kie_10_0_0_release)).
+- **July 2025** — **10.1.0**, the second release, adding SonataFlow and Tools
to
+ the components released together
+ ([announcement](/blog/kie_10_1_0_release)).
+- **April 2026** — **10.2.0**, the third release, completing the move to the
+ next-generation editors and to Apache-compliant dependencies
+ ([announcement](/blog/kie_10_2_0_release)).
+
+## Before Apache
+
+For most of their history the projects were developed in the open on GitHub
+under the [kiegroup](https://github.com/kiegroup) organization, sponsored by
Red
+Hat. They also served as the upstream for a line of commercial offerings: JBoss
+Enterprise BRMS 5, Red Hat JBoss BPM Suite 6, and Red Hat Process Automation
+Manager and Red Hat Decision Manager 7.
+
+The kiegroup organization forked back some repositories from Apache KIE as
+midstreams, so that Red Hat can keep maintaining its commercial offerings based
+on KIE.
diff --git a/docs/community/community.md b/docs/community/community.md
index 134132c..9c73f27 100644
--- a/docs/community/community.md
+++ b/docs/community/community.md
@@ -41,6 +41,15 @@ When discussing code snippets in emails, ensure:
* You keep formatting when pasting code in order to keep the code readable.
* There are enough import statements to avoid ambiguities.
+### Google Groups
+
+Two Google Groups predate the Apache mailing lists and are still active. They
are
+community forums rather than official Apache channels, so anything that needs a
+decision or a record belongs on the lists above.
+
+* [drools-usage](https://groups.google.com/g/drools-usage) — questions about
using Drools
+* [kogito-development](https://groups.google.com/g/kogito-development) —
Kogito development discussion
+
## Support
@@ -78,4 +87,4 @@ chance it will be incorporated into future releases.
## Source code
-* KIE
[repositories](https://github.com/orgs/apache/repositories?language=&q=incubator-kie-&sort=&type=all)
+* KIE
[repositories](https://github.com/orgs/apache/repositories?q=visibility%3Apublic+archived%3Afalse+incubator-kie)
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index b1a1b5b..87f818e 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -91,21 +91,27 @@ const config: Config = {
items: [
{
type: "docSidebar",
- sidebarId: "documentationSidebar",
+ sidebarId: "aboutSidebar",
position: "right",
- label: "Documentation",
+ label: "About",
},
{
type: "docSidebar",
- sidebarId: "downloadSidebar",
+ sidebarId: "componentsSidebar",
position: "right",
- label: "Downloads",
+ label: "Components",
},
{
type: "docSidebar",
- sidebarId: "componentsSidebar",
+ sidebarId: "documentationSidebar",
position: "right",
- label: "Components",
+ label: "Docs",
+ },
+ {
+ type: "docSidebar",
+ sidebarId: "downloadSidebar",
+ position: "right",
+ label: "Downloads",
},
{
type: "docSidebar",
@@ -113,13 +119,13 @@ const config: Config = {
position: "right",
label: "Examples",
},
+ { to: "/blog", label: "Blog", position: "right" },
{
type: "docSidebar",
sidebarId: "communitySidebar",
position: "right",
label: "Community",
},
- { to: "/blog", label: "Blog", position: "right" },
{
type: "dropdown",
label: "ASF",
@@ -160,7 +166,7 @@ const config: Config = {
],
},
{
- href:
"https://github.com/orgs/apache/repositories?language=&q=incubator-kie-&sort=&type=all";,
+ href:
"https://github.com/orgs/apache/repositories?q=visibility%3Apublic+archived%3Afalse+incubator-kie";,
position: "right",
className: "header-github-link",
"aria-label": "GitHub repositories",
@@ -198,6 +204,10 @@ const config: Config = {
{
title: "Learn",
items: [
+ {
+ label: "About",
+ to: "/about",
+ },
{
label: "Documentation",
to: "/documentation",
@@ -216,29 +226,25 @@ const config: Config = {
title: "Code",
items: [
{
- label: "Drools",
- href: "https://github.com/apache/incubator-kie-drools";,
- },
- {
- label: "Kogito Runtimes",
- href: "https://github.com/apache/incubator-kie-kogito-runtimes";,
- },
- {
- label: "Kogito Apps",
- href: "https://github.com/apache/incubator-kie-kogito-apps";,
- },
- {
- label: "OptaPlanner",
- href: "https://github.com/apache/incubator-kie-optaplanner";,
+ label: "KIE (Drools, jBPM, OptaPlanner, and Kogito)",
+ href: "https://github.com/apache/incubator-kie";,
},
{
label: "Tools",
href: "https://github.com/apache/incubator-kie-tools";,
},
+ {
+ label: "Examples",
+ href: "https://github.com/apache/incubator-kie-examples";,
+ },
{
label: "Website",
href: "https://github.com/apache/incubator-kie-website";,
},
+ {
+ label: "Docs",
+ href: "https://github.com/apache/incubator-kie-docs";,
+ },
],
},
],
diff --git a/sidebars.ts b/sidebars.ts
index 0096992..0d0e526 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -12,6 +12,7 @@ import type { SidebarsConfig } from
"@docusaurus/plugin-content-docs";
*/
const sidebars: SidebarsConfig = {
// By default, Docusaurus generates a sidebar from the docs folder structure
+ aboutSidebar: [{ type: "autogenerated", dirName: "about" }],
examplesSidebar: [{ type: "autogenerated", dirName: "examples"}],
documentationSidebar: [{ type: "autogenerated", dirName: "documentation" }],
downloadSidebar: [{ type: "autogenerated", dirName: "downloads" }],
diff --git a/src/components/HomepageComponents/index.tsx
b/src/components/HomepageComponents/index.tsx
index f65508a..bc82244 100644
--- a/src/components/HomepageComponents/index.tsx
+++ b/src/components/HomepageComponents/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import Heading from '@theme/Heading';
@@ -15,26 +16,26 @@ const ComponentList: ComponentItem[] = [
Svg: require('@site/static/img/drools.svg').default,
to: '/drools',
},
- {
- title: 'jBPM',
- Svg: require('@site/static/img/jbpm.svg').default,
- to: '/jbpm',
- },
- {
- title: 'SonataFlow',
- Svg: require('@site/static/img/sonataflow.svg').default,
- to: '/sonataflow',
- },
{
title: 'OptaPlanner',
Svg: require('@site/static/img/planner.svg').default,
to: '/optaplanner',
},
+ {
+ title: 'jBPM',
+ Svg: require('@site/static/img/jbpm.svg').default,
+ to: '/jbpm',
+ },
{
title: 'Kogito',
Svg: require('@site/static/img/kogito.svg').default,
to: '/kogito',
},
+ {
+ title: 'SonataFlow',
+ Svg: require('@site/static/img/sonataflow.svg').default,
+ to: '/sonataflow',
+ },
{
title: 'Tools',
Svg: require('@site/static/img/tools.svg').default,
@@ -50,7 +51,9 @@ function ComponentCard({title, Svg, to}: ComponentItem) {
<Svg className={styles.componentSvg} role="img" />
</div>
<div className="text--center padding-horiz--md">
- <Heading as="h3">{title}</Heading>
+ <Heading as="h3" className={styles.componentTitle}>
+ {title}
+ </Heading>
</div>
</Link>
</div>
@@ -63,7 +66,14 @@ export default function HomepageComponents(): JSX.Element {
<div className="container">
<div className="row">
{ComponentList.map((props, idx) => (
- <ComponentCard key={idx} {...props} />
+ <React.Fragment key={idx}>
+ {props.title === 'Tools' && (
+ <div className={styles.separator} aria-hidden="true">
+ <span className={styles.separatorDot} />
+ </div>
+ )}
+ <ComponentCard {...props} />
+ </React.Fragment>
))}
</div>
</div>
diff --git a/src/components/HomepageComponents/styles.module.css
b/src/components/HomepageComponents/styles.module.css
index 54571d7..8082875 100644
--- a/src/components/HomepageComponents/styles.module.css
+++ b/src/components/HomepageComponents/styles.module.css
@@ -1,18 +1,57 @@
.components {
+ /* The cards share the first screen with the hero, so the logos give way on
+ short viewports rather than pushing the row past the fold. */
+ --kie-card-logo-size: clamp(64px, 12vh, 120px);
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
+/* Sets Tools apart from the runtime projects. */
+.separator {
+ flex: 0 0 auto;
+ display: flex;
+ align-self: flex-start;
+ justify-content: center;
+ padding: 0 0.5rem;
+ /* Card padding (1rem) + half the logo, less half the dot, so it lands on the
+ logos' centre line rather than the centre of the whole card. */
+ margin-top: calc(1rem + var(--kie-card-logo-size) / 2 - 3px);
+}
+
+.separatorDot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: #000000;
+}
+
+[data-theme='dark'] .separatorDot {
+ background-color: #ffffff;
+}
+
+@media screen and (max-width: 996px) {
+ .separator {
+ flex: 0 0 100%;
+ margin-top: 0;
+ padding: 1rem 0;
+ }
+}
+
.componentSvg {
- height: 120px;
- width: 120px;
+ height: var(--kie-card-logo-size);
+ width: var(--kie-card-logo-size);
fill: var(--ifm-color-primary);
transition: transform 0.2s ease;
}
+/* Same wordmark treatment as "KIE" in the hero. */
+.componentTitle {
+ font-family: 'Quicksand', var(--ifm-font-family-base);
+}
+
.componentLink {
display: block;
padding: 1rem;
diff --git a/src/css/custom.css b/src/css/custom.css
index 72f022c..372c03d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -4,32 +4,73 @@
* work well for content-centric websites.
*/
+/* Quicksand, self-hosted (SIL Open Font License) so the site makes no
+ third-party font requests at runtime. Used only for the "KIE" wordmark. */
+@font-face {
+ font-family: 'Quicksand';
+ font-style: normal;
+ font-weight: 400 700;
+ font-display: swap;
+ src: url('/fonts/quicksand-latin.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193,
+ U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Quicksand';
+ font-style: normal;
+ font-weight: 400 700;
+ font-display: swap;
+ src: url('/fonts/quicksand-latin-ext.woff2') format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF,
+ U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+ U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
html {
scrollbar-gutter: stable;
}
+/* The KIE palette, as used by the logo: deep blue, light blue, orange. */
+:root {
+ --kie-blue-deep: #085870;
+ --kie-blue-light: #97d4e8;
+ --kie-orange: #f5891f;
+ /* The accent. Orange reads well on white but muddies against a dark
+ background, so dark mode accents with the palette's light blue. */
+ --kie-accent: var(--kie-orange);
+}
+
+[data-theme='dark'] {
+ --kie-accent: var(--kie-blue-light);
+}
+
/* You can override the default Infima variables here. */
:root {
+ /* The palette's orange (#f5891f), with the usual Infima ramp around it.
+ The -dark shades are what Infima uses for hover and active states. */
--ifm-color-primary: #f5891f;
- --ifm-color-primary-dark: #805BDD;
- --ifm-color-primary-darker: #7E54D9;
- --ifm-color-primary-darkest: #7740CC;
- --ifm-color-primary-light: #805bde;
- --ifm-color-primary-lighter: #8262e3;
- --ifm-color-primary-lightest: #8976ef;
+ --ifm-color-primary-dark: #f07c0b;
+ --ifm-color-primary-darker: #e6770a;
+ --ifm-color-primary-darkest: #c46509;
+ --ifm-color-primary-light: #f69637;
+ --ifm-color-primary-lighter: #f79b41;
+ --ifm-color-primary-lightest: #f8ad63;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode.
*/
[data-theme='dark'] {
- --ifm-color-primary: #f5891f;
- --ifm-color-primary-dark: #805BDD;
- --ifm-color-primary-darker: #7E54D9;
- --ifm-color-primary-darkest: #7740CC;
- --ifm-color-primary-light: #805bde;
- --ifm-color-primary-lighter: #8262e3;
- --ifm-color-primary-lightest: #8976ef;
+ /* The palette's light blue (#97d4e8), with the usual Infima ramp around it.
*/
+ --ifm-color-primary: #97d4e8;
+ --ifm-color-primary-dark: #82cbe3;
+ --ifm-color-primary-darker: #7ac8e2;
+ --ifm-color-primary-darkest: #5dbcdb;
+ --ifm-color-primary-light: #acdded;
+ --ifm-color-primary-lighter: #b4e0ee;
+ --ifm-color-primary-lightest: #d1ecf5;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
@@ -55,12 +96,102 @@ html {
no-repeat;
}
+/* Short pages used to leave a stub of content sitting above a footer that
+ filled the rest of the screen, with the ASF incubator disclaimer on show
+ before the reader had scrolled anything. The content now reaches down to
+ where the footer's site map begins, so the map closes the first screen and
+ the disclaimer starts just below it.
+
+ The height below is the footer above its disclaimer: 3.5rem of top padding,
+ the map's tallest column, and the 3.5rem gap under it. The columns stack
+ below 997px, which makes the block far taller than the viewport, so the
+ rule is confined to the breakpoint where they sit side by side. */
+:root {
+ --kie-footer-map-height: 18rem;
+}
+
+@media screen and (min-width: 997px) {
+ .main-wrapper {
+ min-height: calc(
+ 100vh - var(--ifm-navbar-height) - var(--kie-footer-map-height)
+ );
+ }
+}
+
+/* Home is the exception: it is a single screen, with the hero and the cards
+ centred in everything the viewport has below the navbar, and the whole
+ footer — site map included — starting below the fold. */
+.main-wrapper.home-main {
+ min-height: calc(100vh - var(--ifm-navbar-height));
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+/* The footer reads as two sections: the site map on KIE's deep blue, then the
+ ASF incubator disclaimer set apart below a rule and dialled back. */
+.footer--dark {
+ --ifm-footer-background-color: #085870;
+ --ifm-footer-color: rgba(255, 255, 255, 0.85);
+ --ifm-footer-link-color: rgba(255, 255, 255, 0.78);
+ --ifm-footer-title-color: #97d4e8;
+ padding-top: 3.5rem;
+ /* The disclaimer band supplies its own bottom padding. */
+ padding-bottom: 0;
+}
+
+/* 1. Site map */
+.footer__links {
+ margin-bottom: 0;
+ text-align: left;
+}
+
+.footer__title {
+ font-family: 'Quicksand', var(--ifm-font-family-base);
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.footer__item {
+ font-size: 0.9rem;
+ line-height: 1.9;
+}
+
+/* Long entries like "KIE (Drools, jBPM, OptaPlanner, and Kogito)" stay on one
+ line; the column widens to fit rather than wrapping mid-label. */
+@media screen and (min-width: 997px) {
+ .footer__item {
+ white-space: nowrap;
+ }
+}
+
+.footer__link-item:hover {
+ color: #97d4e8;
+ text-decoration: none;
+}
+
+/* 2. Incubator disclaimer */
+/* The disclaimer keeps the original dark footer colour. It sits inside the
+ container, so the box-shadow spread paints it edge to edge and the clip-path
+ stops that spread bleeding above and below the band. */
+.footer__bottom {
+ margin-top: 3.5rem;
+ padding: 2.5rem 0;
+ background-color: #303846;
+ box-shadow: 0 0 0 100vmax #303846;
+ clip-path: inset(0 -100vmax);
+}
+
.footer__copyright {
font-size: .7em;
}
-.footer__links {
- text-align: center;
+@media screen and (max-width: 996px) {
+ .footer__links {
+ text-align: center;
+ }
}
.navbar__logo {
diff --git a/src/pages/documentation.tsx b/src/pages/documentation.tsx
index 239b175..5efb2ce 100644
--- a/src/pages/documentation.tsx
+++ b/src/pages/documentation.tsx
@@ -2,5 +2,5 @@ import {Redirect} from '@docusaurus/router';
// Latest release — update for each new release
export default function DocumentationRedirect(): JSX.Element {
- return <Redirect to="/documentation/documentation_10.1.0" />;
+ return <Redirect to="/documentation/documentation_10.2.0" />;
}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 27ed75a..25fa06d 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,46 +1,151 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
+ *
+ * Hero colors come from the Apache KIE logo:
+ * deep blue #085870, light blue #97d4e8, orange #f5891f.
*/
.heroBanner {
- padding: 4rem 0;
- text-align: center;
position: relative;
overflow: hidden;
+ padding: 5rem 0 3.5rem;
+ text-align: center;
+ background-color: #ffffff;
+ border-bottom: 1px solid #eaeff2;
}
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2rem;
- }
+[data-theme='dark'] .heroBanner {
+ background-color: var(--ifm-background-color);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
}
-.buttons {
- display: flex;
- align-items: center;
- justify-content: center;
+.heroContent {
+ position: relative;
+}
- --ifm-button-size-multiplier: 1.6;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin-top: 24px;
+/* The mark sits above the name rather than beside it, so the two read as one
+ centred lockup. It tracks the viewport's width and its height, since the
+ whole hero has to share the first screen with the component cards. */
+.heroLogo {
+ display: block;
+ width: clamp(5rem, min(18vw, 17vh), 13rem);
+ height: auto;
+ margin: 0 auto clamp(1rem, 2.5vh, 2rem);
}
-.buttons a,
-.buttons a:hover {
- color: black;
+.heroTitle {
+ margin-bottom: 1.5rem;
+ color: #085870;
+ font-size: clamp(2.5rem, 6.5vw, 3.75rem);
+ font-weight: 600;
+ letter-spacing: -0.015em;
+ line-height: 1.1;
}
-.buttons a:last-of-type {
- margin: 20px 36px;
+[data-theme='dark'] .heroTitle {
+ color: #ffffff;
}
-.buttonsGitHubButtonWrapper {
- display: flex;
+/* The name is the only thing in the centering flow, so "Apache KIE" lands on
+ the page's centre line; the status pill hangs off its right edge instead of
+ pushing it left. */
+.heroTitleName {
+ position: relative;
+ display: inline-block;
+ white-space: nowrap;
}
-.buttonsGitHubButton {
- overflow: hidden;
-}
\ No newline at end of file
+/* The ASF prescribes the wording of the name, not its typeface, so "Apache"
+ stays on the site font. Only the "KIE" wordmark carries Quicksand — same
+ size, weight and color, so neither half is visually subordinated. */
+.heroTitleApache {
+ font-family: var(--ifm-font-family-base);
+}
+
+.heroTitleKie {
+ font-family: 'Quicksand', var(--ifm-font-family-base);
+ letter-spacing: 0;
+}
+
+/* Trademark symbol: small and quiet, riding the cap height at top-right. */
+.heroTitleTm {
+ display: inline-block;
+ font-family: 'Quicksand', var(--ifm-font-family-base);
+ font-size: 0.32em;
+ font-weight: 700;
+ letter-spacing: 0;
+ vertical-align: top;
+ /* em here is the symbol's own size, so this nudges it down from the line-box
+ top to sit flush with the cap height of "KIE". */
+ transform: translateY(0.45em);
+}
+
+/* Small pill sitting next to the title, so "incubating" reads as a status
+ rather than as part of the name. Taken out of flow so it doesn't count
+ towards the centring of the name. */
+.heroTitleSuffix {
+ position: absolute;
+ top: 50%;
+ left: 100%;
+ transform: translateY(-50%);
+ margin-left: 0.9rem;
+ /* letter-spacing puts a trailing space after the last letter, so the text
+ would sit that much left of centre; the extra left padding cancels it. */
+ padding: 0.3rem 0.75rem 0.3rem calc(0.75rem + 0.1em);
+ border: 1px solid #cfe1e9;
+ border-radius: 999px;
+ color: #085870;
+ font-size: 0.7rem;
+ font-weight: 500;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+[data-theme='dark'] .heroTitleSuffix {
+ border-color: rgba(151, 212, 232, 0.35);
+ color: #97d4e8;
+}
+
+.heroSubtitle {
+ margin: 0 auto;
+ color: #5b6b74;
+ font-size: clamp(1rem, 1.7vw, 1.2rem);
+ font-weight: 300;
+ line-height: 1.55;
+}
+
+/* Short accent rule to close the text block. */
+.heroRule {
+ width: 48px;
+ height: 3px;
+ margin: 2.25rem auto 0;
+ border-radius: 2px;
+ background-color: var(--kie-accent);
+}
+
+[data-theme='dark'] .heroSubtitle {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+@media screen and (max-width: 996px) {
+ .heroBanner {
+ padding: 3rem 1.5rem 2.25rem;
+ }
+}
+
+/* Too narrow for the pill to hang beside the name without running off the
+ edge, so it drops back into the flow, under the name. */
+@media screen and (max-width: 600px) {
+ .heroTitleSuffix {
+ position: static;
+ display: block;
+ width: fit-content;
+ transform: none;
+ margin: 0.75rem auto 0;
+ }
+
+ .heroTitleName {
+ display: block;
+ }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5b14966..a07ff9b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
import Layout from '@theme/Layout';
import HomepageComponents from '@site/src/components/HomepageComponents';
import Heading from '@theme/Heading';
@@ -9,12 +10,24 @@ import styles from './index.module.css';
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
- <header className={clsx('hero hero--primary', styles.heroBanner)}>
- <div className="container">
- <Heading as="h1" className="hero__title">
- {siteConfig.title}
+ <header className={styles.heroBanner}>
+ <div className={clsx('container', styles.heroContent)}>
+ <img
+ className={styles.heroLogo}
+ src={useBaseUrl('/img/navbar-logo.svg')}
+ alt=""
+ aria-hidden="true"
+ />
+ <Heading as="h1" className={styles.heroTitle}>
+ <span className={styles.heroTitleName}>
+ <span className={styles.heroTitleApache}>Apache</span>{' '}
+ <span className={styles.heroTitleKie}>KIE</span>
+ <span className={styles.heroTitleTm}>™</span>
+ <span className={styles.heroTitleSuffix}>incubating</span>
+ </span>
</Heading>
- <p className="hero__subtitle">{siteConfig.tagline}</p>
+ <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
+ <div className={styles.heroRule} aria-hidden="true" />
</div>
</header>
);
@@ -26,7 +39,8 @@ export default function Home(): JSX.Element {
<>
<Layout
title={`${siteConfig.title}`}
- description="@{siteConfig.tagline}">
+ description="@{siteConfig.tagline}"
+ wrapperClassName="home-main">
<HomepageHeader />
<main>
<HomepageComponents />
diff --git a/static/fonts/quicksand-latin-ext.woff2
b/static/fonts/quicksand-latin-ext.woff2
new file mode 100644
index 0000000..3f73152
Binary files /dev/null and b/static/fonts/quicksand-latin-ext.woff2 differ
diff --git a/static/fonts/quicksand-latin.woff2
b/static/fonts/quicksand-latin.woff2
new file mode 100644
index 0000000..14f5646
Binary files /dev/null and b/static/fonts/quicksand-latin.woff2 differ
diff --git a/static/img/tools.svg b/static/img/tools.svg
index 2c4dcd6..a41d7ec 100644
--- a/static/img/tools.svg
+++ b/static/img/tools.svg
@@ -1,6 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
xmlns="http://www.w3.org/2000/svg"; height="280.88mm" width="281.76mm"
version="1.1" xmlns:cc="http://creativecommons.org/ns#";
xmlns:dc="http://purl.org/dc/elements/1.1/"; viewBox="0 0 998.37738 995.2413">
-<g id="layer1" transform="translate(679.96 312.86)">
-<path id="path4138" d="m-304-312.85c-28.306-0.63933-56.295 30.095-45.384
59.051 9.941 22.046-31.466 33.404-48.035 43.762-58.499 22.387-97.839
72.838-142.39 114.23-38.547 38.99-83.599 74.322-105.06 126.5-15.246
34.535-21.84 72.362-21.159 109.4 0.51501 40.715 8.594 81.016 20.584 119.82
0.91034-19.377-6.3635-39.9-0.0439-59.758 12.549-58.196 44.93-115.47
96.469-147.31 22.629-13.759 52.31-16.008 75.365-1.9712 10.951 3.4994 22.108
2.6065 32.188-1.3423l620.29 620.29c16.449 16.449 42.933 16.449 [...]
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 100 100" width="100"
height="100" role="img">
+ <title>Apache KIE Tools</title>
+ <rect x="14" y="14" width="72" height="72" rx="10" fill="none"
stroke="#085870" stroke-width="6"/>
+ <path d="M36 42h28M50 42v16" fill="none" stroke="#97d4e8" stroke-width="5"
stroke-linecap="round"/>
+ <circle cx="36" cy="42" r="8" fill="#085870"/>
+ <circle cx="64" cy="42" r="8" fill="#97d4e8"/>
+ <rect x="42" y="54" width="16" height="13" rx="3" fill="#f5891f"/>
+</svg>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
