This is an automated email from the ASF dual-hosted git repository.
schofielaj pushed a commit to branch markdown
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
The following commit(s) were added to refs/heads/markdown by this push:
new 89242e88e Home page refresh (#743)
89242e88e is described below
commit 89242e88e590655836376460730eda85b813bfb7
Author: Harish Vishwanath <[email protected]>
AuthorDate: Thu Nov 13 00:49:00 2025 -0800
Home page refresh (#743)
* Add prev/next navigation buttons sorted by page weights
* Rehaul of streams introduction. Supporting css, shortcodes etc.,
* Home page refresh. Site config refactor
---
README.md | 66 ++-
assets/json/offline-search-index.json | 2 +
assets/scss/_variables_project.scss | 725 +++++++++++++++++++++++++--
assets/scss/_variables_project_after_bs.scss | 7 +-
content/en/_index.md | 12 +-
content/en/community/apache/_index.md | 6 -
content/en/community/apache/apacheorg.md | 8 -
content/en/community/apache/donate.md | 8 -
content/en/community/apache/license.md | 8 -
content/en/community/apache/privacy.md | 8 -
content/en/community/apache/security.md | 8 -
content/en/community/apache/sponsors.md | 8 -
hugo.yaml | 55 +-
layouts/partials/footer.html | 57 +++
layouts/partials/hooks/body-end.html | 5 +
layouts/partials/hooks/head-end.html | 8 +
layouts/partials/navbar.html | 80 +++
static/js/navbar-enhancements.js | 164 ++++++
18 files changed, 1124 insertions(+), 111 deletions(-)
diff --git a/README.md b/README.md
index f5d2c19f7..bd704ef6c 100644
--- a/README.md
+++ b/README.md
@@ -52,23 +52,55 @@ Each version directory contains the complete documentation
for that specific Kaf
### Adding a New Version
-1. Create a new directory in `content/en/` for the new version (e.g., `41/`
for version 4.1)
-2. Update `hugo.yaml` to add the new version:
- ```yaml
- versions:
- - version: "4.1" # Add new version at the top
- url: /41/
- - version: "4.0" # Update previous latest
- url: /40/
- archived_version: true # Mark as archived
- # ... other versions ...
- ```
-3. Update the latest version pointer:
- ```yaml
- params:
- version: 4.1 # Update version number
- url_latest_version: /41/ # Update latest version URL
- ```
+When releasing a new documentation version (e.g., version 4.2 / "42"), follow
these steps:
+
+#### 1. Create Content Directory
+Create a new directory in `content/en/` for the new version (e.g., `42/` for
version 4.2)
+
+#### 2. Update Version Parameters in `hugo.yaml`
+
+**Update the centralized version parameters (Lines 142-144):**
+```yaml
+params:
+ # Latest documentation version - UPDATE THIS WHEN RELEASING NEW VERSION
+ latest_version: "42" # Change from "41" to "42"
+ latest_version_number: "4.2" # Change from "4.1" to "4.2"
+```
+
+**Update the version parameter (Line ~180):**
+```yaml
+ version: 4.2 # Change from 4.1 to 4.2
+```
+
+**Update the latest version URL (Line ~283):**
+```yaml
+ url_latest_version: /42/ # Change from /41/ to /42/
+```
+
+**Add new version to versions list and mark previous as archived (Line ~184):**
+```yaml
+ versions:
+ - version: "4.2"
+ url: /42/
+ - version: "4.1"
+ url: /41/
+ archived_version: true # Mark previous version as archived
+ # ... other versions ...
+```
+
+#### What Updates Automatically
+
+Once you update the parameters above, the following are **automatically**
updated:
+
+**Menu Items:**
+- DOCS → `/42/`
+- Getting Started → `/42/getting-started/`
+- APIs, Configuration, Design, Implementation, Operations, Security, Kafka
Connect, Kafka Streams → all automatically updated
+
+**Search Index:**
+- The search index automatically includes the latest version directory (no
manual update needed)
+- Configured via offline search template
`assets/json/offline-search-index.json`
+
### Managing Testimonials and Committers
diff --git a/assets/json/offline-search-index.json
b/assets/json/offline-search-index.json
index 9226e8b77..98995072e 100644
--- a/assets/json/offline-search-index.json
+++ b/assets/json/offline-search-index.json
@@ -1,5 +1,7 @@
{{- $pages := slice -}}
{{- $sections := .Site.Params.search.indexing_directories | default slice -}}
+{{- $latestVersion := .Site.Params.latest_version -}}
+{{- $sections = $sections | append $latestVersion -}}
{{- range $sections -}}
diff --git a/assets/scss/_variables_project.scss
b/assets/scss/_variables_project.scss
index 367100f26..a5e07b174 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -90,11 +90,23 @@ $primary: #ffffff;
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
+ overflow-x: hidden;
}
-// Navbar responsive fixes
+// Navbar responsive fixes and styling
.td-navbar {
- @media (max-width: 768px) {
+ background-color: #ffffff;
+ border-bottom: 1px solid #e9ecef;
+ padding: 0.75rem 1rem;
+
+ .container-fluid {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ @media (max-width: 991px) {
.navbar-brand {
max-width: 150px;
@@ -106,58 +118,253 @@ html {
}
}
-// Logo responsive fixes
-.td-navbar .navbar-brand {
- svg, img {
- max-height: 40px;
- width: auto;
-
- @media (max-width: 576px) {
- max-height: 30px;
- }
+// Mobile navbar toggler (hamburger menu) - FORCE VISIBLE
+.td-navbar .navbar-toggler,
+button.navbar-toggler {
+ display: inline-block !important; // Nuclear option - force visible
+ visibility: visible !important;
+ opacity: 1 !important;
+ padding: 0.5rem 0.75rem !important;
+ font-size: 1.25rem;
+ line-height: 1;
+ background-color: #fff !important;
+ border: 2px solid #000 !important; // Make it very obvious
+ border-radius: 0.25rem;
+ transition: box-shadow 0.15s ease-in-out;
+ cursor: pointer;
+ position: relative;
+ z-index: 1050;
+ min-width: 44px;
+ min-height: 44px;
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
+ outline: none !important;
+ }
+
+ &:hover {
+ background-color: #f8f9fa !important;
+ }
+
+ .navbar-toggler-icon {
+ display: inline-block !important;
+ width: 1.5em !important;
+ height: 1.5em !important;
+ vertical-align: middle;
+ background-image: url("data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath
stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3'
d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ }
+
+ // Hide on desktop only
+ @media (min-width: 992px) {
+ display: none !important;
}
}
-// Ensure navbar items are properly responsive
-.td-navbar .navbar-nav {
+// Mobile menu collapse - CRITICAL: Hide by default on mobile
+.navbar-collapse {
@media (max-width: 991px) {
+ // HIDE by default - this is critical!
+ display: none !important;
+ position: absolute;
+ top: 100%;
+ left: 0 !important;
+ right: 0 !important;
+ width: 100% !important;
+ background-color: #ffffff;
+ border-top: 1px solid #e9ecef;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ z-index: 1000;
+ max-height: calc(100vh - 60px);
+ overflow-y: auto;
+
+ // SHOW when expanded
+ &.show {
+ display: block !important;
+ }
+
+ &.collapsing {
+ display: block !important;
+ height: 0;
+ overflow: hidden;
+ transition: height 0.35s ease;
+ }
+
+ .navbar-nav {
+ flex-direction: column;
+ padding: 1rem 0;
width: 100%;
.nav-item {
width: 100%;
+ border-bottom: 1px solid #f8f9fa;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ .nav-link {
+ padding: 0.75rem 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ text-align: left;
+
+ &:hover {
+ background-color: #f8f9fa;
+ }
+
+ // Show arrow for dropdown items
+ &.dropdown-toggle::after {
+ margin-left: auto;
+ }
+ }
+
+ .dropdown-menu {
+ position: static !important;
+ float: none;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ margin: 0;
+ background-color: #f8f9fa;
+ width: 100%;
+ transform: none !important;
+
+ .dropdown-item {
+ padding: 0.75rem 2rem;
+ white-space: normal;
+
+ &:hover {
+ background-color: #e9ecef;
+ }
+ }
+ }
+
+ .dropdown {
+ .dropdown-menu {
+ display: none !important;
+ }
+
+ &.show .dropdown-menu {
+ display: block !important;
+ }
+ }
}
}
+
+ // Desktop - normal behavior
+ @media (min-width: 992px) {
+ display: flex !important;
+ flex-basis: auto;
+ }
}
-// Fix navbar toggle button visibility
-.navbar-toggler {
- padding: 0.25rem 0.75rem;
- font-size: 1.25rem;
- line-height: 1;
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-radius: 0.25rem;
+// Force hide navbar items on mobile UNLESS the menu is expanded
+@media (max-width: 991px) {
+ .navbar-collapse:not(.show) {
+ .navbar-nav {
+ display: none !important;
+ }
+ }
- &:focus {
- box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
+ // CRITICAL: Prevent horizontal display of nav items on mobile
+ .td-navbar .navbar-nav {
+ display: none !important;
+ }
+
+ .td-navbar .navbar-collapse.show .navbar-nav {
+ display: flex !important;
+ flex-direction: column;
}
}
-// Responsive menu improvements
-.td-navbar .navbar-collapse {
+// Navbar itself needs to be positioned relative for absolute children
+.td-navbar {
+ position: relative;
+
@media (max-width: 991px) {
- background-color: #fff;
- padding: 1rem;
- margin-top: 0.5rem;
- border-radius: 0.25rem;
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ overflow: visible !important;
}
}
-// Version dropdown responsive fix
-.td-navbar .dropdown-menu {
+// Navbar container fixes for mobile
+.td-navbar .container-fluid {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+
@media (max-width: 991px) {
- width: 100%;
- max-height: 300px;
+ justify-content: flex-start;
+
+ // Ensure hamburger is visible and positioned correctly
+ > .navbar-toggler {
+ display: inline-block !important;
+ visibility: visible !important;
+ opacity: 1 !important;
+ order: 0;
+ flex-shrink: 0;
+ margin-right: auto;
+ }
+ }
+}
+
+// Logo responsive fixes
+.td-navbar .navbar-brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0.5rem 0;
+
+ svg, img {
+ max-height: 40px;
+ width: auto;
+
+ @media (max-width: 991px) {
+ max-height: 32px;
+ }
+ }
+
+ .navbar-brand__name {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 1.25rem;
+ font-weight: 700;
+
+ @media (max-width: 991px) {
+ font-size: 1.125rem;
+ }
+ }
+}
+
+// Navbar layout and spacing
+.td-navbar {
+ // Proper spacing between logo and menu items
+ .navbar-brand {
+ @media (min-width: 992px) {
+ margin-right: 3rem;
+ }
+ }
+
+ // Menu items aligned to the right with auto margin
+ .navbar-nav.ms-auto {
+ @media (min-width: 992px) {
+ margin-left: auto !important;
+ flex-grow: 0;
+ }
+ }
+
+ // Gap between menu and search bar
+ .navbar-search {
+ @media (min-width: 992px) {
+ margin-left: 3rem !important;
+ flex-shrink: 0;
+ }
}
}
@@ -166,6 +373,10 @@ html {
@media (max-width: 576px) {
max-width: 100%;
}
+
+ @media (min-width: 992px) {
+ min-width: 200px;
+ }
}
// Ensure main content is properly responsive
@@ -181,6 +392,82 @@ html {
}
}
+
+// Dropdown on hover for desktop
+.td-navbar .nav-item.dropdown {
+ @media (min-width: 992px) {
+ &:hover > .dropdown-menu {
+ display: block;
+ margin-top: 0;
+ }
+
+ // Ensure dropdown trigger stays visible
+ &:hover > .nav-link {
+ color: #007bff;
+ }
+ }
+}
+
+// Nav link styling for better visibility
+.td-navbar .nav-link {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ color: #212529;
+ font-weight: 600;
+ font-size: 0.95rem;
+ padding: 0.5rem 1rem;
+ transition: color 0.2s ease;
+ letter-spacing: 0.3px;
+
+ &:hover,
+ &:focus {
+ color: #007bff;
+ }
+
+ &.dropdown-toggle {
+ &:hover {
+ color: #007bff;
+ }
+ }
+}
+
+// Style dropdown menus
+.td-navbar .dropdown-menu {
+ border-radius: 0.25rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ background-color: #ffffff;
+ padding: 0.5rem 0;
+
+ @media (max-width: 991px) {
+ border: none;
+ box-shadow: none;
+ padding-left: 1rem;
+ background-color: transparent;
+ }
+
+ .dropdown-item {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ padding: 0.75rem 1.5rem;
+ color: #212529;
+ font-size: 0.9375rem;
+ font-weight: 400;
+ transition: all 0.2s ease;
+
+ &:hover,
+ &:focus {
+ background-color: #e9ecef;
+ color: #000;
+ text-decoration: none;
+ }
+
+ &.active {
+ background-color: #007bff;
+ color: #fff;
+ font-weight: 600;
+ }
+ }
+}
+
// Responsive logo for homepage cover block
.td-cover-block {
figure {
@@ -242,7 +529,377 @@ html {
}
}
-// Prev/Next navigation links styling
+// Homepage use case cards - reduce size and spacing
+.td-box.td-box--primary {
+ .col-lg-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ margin-bottom: 2rem;
+
+ @media (min-width: 992px) {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ margin-bottom: 1.5rem;
+ }
+
+ h4 {
+ font-size: 1.25rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .mb-4 {
+ margin-bottom: 0.75rem !important;
+ }
+
+ .h1 {
+ font-size: 2rem;
+ }
+ }
+}
+
+// Remove gaps and standardize spacing for homepage sections
+.td-box {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+
+ @media (max-width: 768px) {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+}
+
+// Consistent typography matching kafka.apache.org
+// Using Open Sans font family as per original Kafka site
+body {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.6;
+ overflow-x: hidden;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+// Heading styles to match kafka.apache.org
+h1, h2, h3, h4, h5, h6 {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: 700;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+ color: #212529;
+}
+
+h1 {
+ font-size: 2.5rem;
+ font-weight: 700;
+
+ @media (max-width: 768px) {
+ font-size: 2rem;
+ }
+}
+
+h2 {
+ font-size: 2rem;
+ font-weight: 700;
+
+ @media (max-width: 768px) {
+ font-size: 1.75rem;
+ }
+}
+
+h3, .h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+
+ @media (max-width: 768px) {
+ font-size: 1.25rem;
+ }
+}
+
+h4, .h4 {
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+h5, .h5 {
+ font-size: 1.125rem;
+ font-weight: 600;
+}
+
+h6, .h6 {
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+// Lead text styling matching original site
+.lead {
+ font-size: 1.25rem;
+ font-weight: 300;
+ line-height: 1.7;
+
+ @media (max-width: 768px) {
+ font-size: 1.125rem;
+ }
+}
+
+// Paragraph text
+p {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 1rem;
+ line-height: 1.6;
+ font-weight: 400;
+ margin-bottom: 1rem;
+}
+
+// Intro section text styling
+.td-box--1 .lead,
+.td-box--3 .lead,
+.td-box--5 .lead {
+ font-size: 1.125rem;
+ font-weight: 400;
+ color: #333;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+// Feature cards spacing and alignment
+.td-box--dark {
+ .col {
+ max-width: 100%;
+
+ .row {
+ margin-left: -0.75rem;
+ margin-right: -0.75rem;
+
+ @media (min-width: 992px) {
+ padding-left: 3rem;
+ padding-right: 3rem;
+ }
+ }
+ }
+
+ .col-lg-4 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+}
+
+// Download button highlighting
+.btn-lg {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 1.125rem;
+ font-weight: 600;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.375rem;
+ transition: all 0.3s ease;
+ letter-spacing: 0.3px;
+
+ &.btn-primary {
+ background-color: #007bff;
+ border-color: #007bff;
+
+ &:hover {
+ background-color: #0056b3;
+ border-color: #0056b3;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
+ }
+ }
+
+ &.btn-secondary {
+ background-color: #6c757d;
+ border-color: #6c757d;
+
+ &:hover {
+ background-color: #5a6268;
+ border-color: #5a6268;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
+ }
+ }
+}
+
+// All buttons
+.btn {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: 600;
+ letter-spacing: 0.3px;
+}
+
+// Feature descriptions consistent styling
+.td-box--dark .mb-0 p {
+ font-size: 1rem;
+ line-height: 1.6;
+ color: #f8f9fa;
+}
+
+// Footer styling - Compact single row layout with full-width background
+.td-footer {
+ background-color: #ffffff;
+ border-top: 1px solid #dee2e6;
+ padding: 1rem 0;
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ margin: 0;
+
+ // Break out of parent container to achieve full-width background
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+
+ .container-fluid {
+ max-width: 100%;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .td-footer__social-icons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+
+ @media (min-width: 768px) {
+ justify-content: flex-start;
+ }
+ }
+
+ .td-footer__social-link {
+ color: #6c757d;
+ font-size: 1.5rem;
+ transition: color 0.3s ease, transform 0.3s ease;
+ display: inline-block;
+
+ &:hover {
+ color: #212529;
+ transform: scale(1.15);
+ }
+ }
+
+ .td-footer__copyright {
+ font-size: 0.75rem;
+ line-height: 1.5;
+ color: #6c757d;
+ display: block;
+ margin-bottom: 0.5rem;
+
+ a {
+ color: #007bff;
+ text-decoration: none;
+
+ &:hover {
+ color: #0056b3;
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .td-footer__links {
+ font-size: 0.75rem;
+
+ a {
+ color: #007bff;
+ text-decoration: none;
+ white-space: nowrap;
+
+ &:hover {
+ color: #0056b3;
+ text-decoration: underline;
+ }
+ }
+ }
+
+ // Responsive: stack on mobile
+ @media (max-width: 767px) {
+ .row > div {
+ margin-bottom: 1rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+// Keyframe animation for continuous spin
+@keyframes spin-continuous {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+// ASF Feather Logo styling - Smaller with very rapid continuous spin effect
+.asf-feather-logo {
+ max-width: 50px;
+ width: 50px;
+ height: auto;
+ opacity: 0.7;
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ opacity: 1;
+ animation: spin-continuous 0.2s linear infinite;
+ }
+}
+
+.asf-logo-link {
+ display: inline-block;
+ line-height: 0;
+}
+
+// Prev/Next navigation links styling (td-page-meta is the actual class used)
+.td-page-meta {
+ padding: 2rem 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ margin-top: 2rem;
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ }
+ }
+
+ .pager-btn {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ border: 2px solid #dee2e6 !important;
+ color: #343a40 !important;
+ background-color: #ffffff !important;
+ box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05) !important;
+ transition: all 0.3s ease;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+
+ &:hover {
+ background-color: #f8f9fa !important;
+ border-color: #ced4da !important;
+ text-decoration: none !important;
+ transform: translateY(-2px);
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+ }
+
+ &:focus {
+ outline: 0 !important;
+ box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5) !important;
+ }
+
+ @media (max-width: 768px) {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+}
+
+// Legacy support for .td-page-nav if used anywhere
.td-page-nav {
// Ensure prev/next links are responsive
@media (max-width: 768px) {
diff --git a/assets/scss/_variables_project_after_bs.scss
b/assets/scss/_variables_project_after_bs.scss
index d4b53cdc7..c40f18274 100644
--- a/assets/scss/_variables_project_after_bs.scss
+++ b/assets/scss/_variables_project_after_bs.scss
@@ -28,15 +28,20 @@ ul.dropdown-menu {
/* Pager button explicit neutral styling to avoid theme primary/orange
overrides */
.pager-btn {
- border: 3px solid #dee2e6 !important; /* gray-300 */
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
!important;
+ border: 2px solid #dee2e6 !important; /* gray-300 */
color: #343a40 !important; /* text-dark */
background-color: #ffffff !important; /* white background */
box-shadow: 0 .25rem .5rem rgba(0,0,0,.05) !important; /* subtle */
+ transition: all 0.3s ease !important;
+ font-weight: 600 !important;
}
.pager-btn:hover {
background-color: #f8f9fa !important; /* gray-100 */
border-color: #ced4da !important; /* gray-400 */
text-decoration: none !important;
+ transform: translateY(-2px);
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.pager-btn:focus {
outline: 0 !important;
diff --git a/content/en/_index.md b/content/en/_index.md
index 5674e62fd..c8ce4703b 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -40,7 +40,7 @@ Apache Kafka is an open-source distributed event streaming
platform used by thou
{{% blocks/feature icon="fa-solid fa-tower-cell" title="Telecom" %}}
**8 OUT OF 10**
{{% /blocks/feature %}}
-{{% blocks/feature icon="fa-solid fa-plane-circle-check"
title="Transportation" %}}
+{{% blocks/feature icon="fa-solid fa-plane" title="Transportation" %}}
**8 OUT OF 10**
{{% /blocks/feature %}}
{{% blocks/feature icon="fa-solid fa-lightbulb" title="Energy and Utilities"
%}}
@@ -48,6 +48,16 @@ Apache Kafka is an open-source distributed event streaming
platform used by thou
{{% /blocks/feature %}}
{{< /blocks/section >}}
+{{% blocks/lead %}}
+
+Above is a snapshot of the number of top-ten largest companies using Kafka,
per-industry.
+
+<p class="text-center mt-4">
+ <a href="/testimonials/" class="btn btn-lg btn-primary">See full list <i
class="fas fa-arrow-alt-circle-right ms-2"></i></a>
+</p>
+
+{{% /blocks/lead %}}
+
{{% blocks/lead %}}
diff --git a/content/en/community/apache/_index.md
b/content/en/community/apache/_index.md
deleted file mode 100644
index 42654dfc7..000000000
--- a/content/en/community/apache/_index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Apache
-type: docs
-linkTitle: Apache
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/content/en/community/apache/apacheorg.md
b/content/en/community/apache/apacheorg.md
deleted file mode 100644
index a1d102ec2..000000000
--- a/content/en/community/apache/apacheorg.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: APACHE.ORG
-type: docs
-weight: 6
-manualLink: https://www.apache.org/
-manualLinkTarget: _blank
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/content/en/community/apache/donate.md
b/content/en/community/apache/donate.md
deleted file mode 100644
index 9cb2537be..000000000
--- a/content/en/community/apache/donate.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Donate
-type: docs
-weight: 2
-manualLink: https://www.apache.org/foundation/sponsorship.html
-manualLinkTarget: _blank
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/content/en/community/apache/license.md
b/content/en/community/apache/license.md
deleted file mode 100644
index 1b5bbdd26..000000000
--- a/content/en/community/apache/license.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: License
-type: docs
-weight: 1
-manualLink: https://www.apache.org/licenses/
-manualLinkTarget: _blank
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/content/en/community/apache/privacy.md
b/content/en/community/apache/privacy.md
deleted file mode 100644
index 730a632f7..000000000
--- a/content/en/community/apache/privacy.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Privacy
-type: docs
-weight: 5
-manualLink: https://privacy.apache.org/policies/privacy-policy-public.html
-manualLinkTarget: _blank
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/content/en/community/apache/security.md
b/content/en/community/apache/security.md
deleted file mode 100644
index 99ad03f3b..000000000
--- a/content/en/community/apache/security.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Security
-type: docs
-weight: 4
-manualLink: https://www.apache.org/security/
-manualLinkTarget: _blank
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/content/en/community/apache/sponsors.md
b/content/en/community/apache/sponsors.md
deleted file mode 100644
index a525700af..000000000
--- a/content/en/community/apache/sponsors.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Sponsors
-type: docs
-weight: 3
-manualLink: https://www.apache.org/foundation/sponsors
-manualLinkTarget: _blank
-# Add blocks of content here to add more sections to the community page
----
\ No newline at end of file
diff --git a/hugo.yaml b/hugo.yaml
index c83e5b6e4..06f9428ae 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -93,16 +93,57 @@ outputs:
menu:
main:
# Point this to the latest documentation version.
- - name: "Documentation"
- url: "/41/"
+ # URLs are dynamically constructed in navbar.html using
params.latest_version
+ - name: "DOCS"
+ url: "{{VERSION}}"
weight: 20
+ - name: "Getting Started"
+ parent: "DOCS"
+ url: "{{VERSION}}/getting-started/"
+ weight: 21
+ - name: "APIs"
+ parent: "DOCS"
+ url: "{{VERSION}}/apis/"
+ weight: 22
+ - name: "Configuration"
+ parent: "DOCS"
+ url: "{{VERSION}}/configuration/"
+ weight: 23
+ - name: "Design"
+ parent: "DOCS"
+ url: "{{VERSION}}/design/"
+ weight: 24
+ - name: "Implementation"
+ parent: "DOCS"
+ url: "{{VERSION}}/implementation/"
+ weight: 25
+ - name: "Operations"
+ parent: "DOCS"
+ url: "{{VERSION}}/operations/"
+ weight: 26
+ - name: "Security"
+ parent: "DOCS"
+ url: "{{VERSION}}/security/"
+ weight: 27
+ - name: "Kafka Connect"
+ parent: "DOCS"
+ url: "{{VERSION}}/kafka-connect/"
+ weight: 28
+ - name: "Kafka Streams"
+ parent: "DOCS"
+ url: "{{VERSION}}/streams/"
+ weight: 29
# Add a top level menu pointing to downloads page
- - name: "Download Kafka"
+ - name: "Download"
url: "/community/downloads/"
weight: 50
# Submenu items
params:
+ # Latest documentation version - UPDATE THIS WHEN RELEASING NEW VERSION
+ latest_version: "41"
+ latest_version_number: "4.1"
+
# Favicon configuration
favicon: /images/apache.png
@@ -135,8 +176,11 @@ params:
# The version number for the version of the docs represented in this doc set.
# Used in the "version-banner" partial to display a version number for the
# current doc set.
+ # NOTE: This is automatically set from latest_version_number parameter above
version: 4.1
versions:
+ # NOTE: When adding version 42, update params.latest_version to "42"
+ # and params.latest_version_number to "4.2" at the top
- version: "4.1"
url: /41/
- version: "4.0"
@@ -235,6 +279,7 @@ params:
# A link to latest version of the docs. Used in the "version-banner" partial
to
# point people to the main doc site.
+ # NOTE: When updating to version 42, change this to /42/
url_latest_version: /41/
# Repository configuration (URLs for in-page links to opening issues and
suggesting changes)
@@ -327,14 +372,16 @@ params:
desc: Developer mailing list
search:
+ # Indexing directories - latest version is automatically included
+ # by reading params.latest_version in the search index template
indexing_directories:
- - "41"
- "blog"
- "community"
- "testimonials"
exclude_sections:
- "internal"
min_word_length: 3
+ # Latest version docs are indexed automatically (see _default/index.json)
module:
# Uncomment the next line to build and serve using local docsy clone
declared in the named Hugo workspace:
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 000000000..3c845d357
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,57 @@
+{{ $links := .Site.Params.links }}
+<footer class="td-footer d-print-none">
+ <div class="container-fluid">
+ <div class="row align-items-center py-3">
+ <!-- Social Icons on the Left -->
+ <div class="col-12 col-md-3 text-center text-md-start mb-3 mb-md-0">
+ <div class="td-footer__social-icons">
+ {{ with $links }}
+ {{ with .user }}
+ {{ range . }}
+ <a href="{{ .url }}" target="_blank" rel="noopener" aria-label="{{
.name }}" class="td-footer__social-link">
+ <i class="{{ .icon }}"></i>
+ </a>
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ with $links }}
+ {{ with .developer }}
+ {{ range . }}
+ <a href="{{ .url }}" target="_blank" rel="noopener" aria-label="{{
.name }}" class="td-footer__social-link">
+ <i class="{{ .icon }}"></i>
+ </a>
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ </div>
+ </div>
+
+ <!-- Copyright and Links in Center -->
+ <div class="col-12 col-md-6 text-center mb-3 mb-md-0">
+ <div class="td-footer__copyright">
+ The contents of this website are © {{ now.Year
}} Apache Software Foundation
+ under the terms of the <a
href="https://www.apache.org/licenses/LICENSE-2.0"; target="_blank"
rel="noopener">Apache License v2</a>.
+ Apache Kafka, Kafka, and the Kafka logo are either registered
trademarks or trademarks of The Apache Software Foundation
+ in the United States and other countries.
+ </div>
+
+ <div class="td-footer__links mt-2">
+ <a href="https://www.apache.org/security/"; target="_blank"
rel="noopener">Security</a> |
+ <a href="https://www.apache.org/foundation/contributing.html";
target="_blank" rel="noopener">Donate</a> |
+ <a href="https://www.apache.org/foundation/thanks.html";
target="_blank" rel="noopener">Thanks</a> |
+ <a href="https://www.apache.org/events/current-event.html";
target="_blank" rel="noopener">Events</a> |
+ <a href="https://www.apache.org/licenses/"; target="_blank"
rel="noopener">License</a> |
+ <a href="{{ .Site.Params.privacy_policy }}" target="_blank"
rel="noopener">Privacy</a>
+ </div>
+ </div>
+
+ <!-- ASF Feather Logo on the Right -->
+ <div class="col-12 col-md-3 text-center text-md-end">
+ <a href="https://www.apache.org/"; target="_blank" rel="noopener"
class="asf-logo-link">
+ <img src="/images/apache.png" alt="Apache Software Foundation"
class="asf-feather-logo" />
+ </a>
+ </div>
+ </div>
+ </div>
+</footer>
+
diff --git a/layouts/partials/hooks/body-end.html
b/layouts/partials/hooks/body-end.html
new file mode 100644
index 000000000..818c4f50b
--- /dev/null
+++ b/layouts/partials/hooks/body-end.html
@@ -0,0 +1,5 @@
+<!-- Bootstrap Bundle JS (includes Popper) - Required for collapse
functionality -->
+<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js";
+
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+ crossorigin="anonymous"></script>
+
diff --git a/layouts/partials/hooks/head-end.html
b/layouts/partials/hooks/head-end.html
index 1ab0eb0e1..832907e55 100644
--- a/layouts/partials/hooks/head-end.html
+++ b/layouts/partials/hooks/head-end.html
@@ -1,5 +1,13 @@
+<!-- Google Fonts - Open Sans (matching kafka.apache.org) -->
+<link rel="preconnect" href="https://fonts.googleapis.com";>
+<link rel="preconnect" href="https://fonts.gstatic.com"; crossorigin>
+<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap";
rel="stylesheet">
+
<!-- Additional mobile web app meta tags -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<!-- Navbar enhancements -->
+<script src="/js/navbar-enhancements.js" defer></script>
+
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
new file mode 100644
index 000000000..61ca94cf2
--- /dev/null
+++ b/layouts/partials/navbar.html
@@ -0,0 +1,80 @@
+{{ $cover := .HasShortcode "blocks/cover" }}
+<nav class="navbar td-navbar js-navbar-scroll {{ if $cover }} is-dark {{ end
}}" data-bs-theme="light">
+<div class="container-fluid">
+ <!-- Mobile toggle button (left side on mobile) -->
+ <button class="navbar-toggler order-0 d-lg-none" type="button"
data-bs-toggle="collapse" data-bs-target="#main_navbar"
aria-controls="main_navbar" aria-expanded="false" aria-label="Toggle
navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <!-- Brand/Logo (center on mobile, left on desktop) -->
+ <a class="navbar-brand order-1 order-lg-0 mx-auto mx-lg-0" href="{{
.Site.Home.RelPermalink }}">
+ <span class="navbar-brand__logo navbar-logo">
+ {{- if .Site.Params.ui.navbar_logo -}}
+ {{ with resources.Get "icons/logo.svg" -}}
+ {{ ( . | minify).Content | safeHTML }}
+ {{- end }}
+ {{- end -}}
+ </span>
+ <span class="navbar-brand__name d-none d-lg-inline">Apache Kafka</span>
+ <span class="navbar-brand__name d-lg-none">kafka</span>
+ </a>
+
+ <!-- Spacer for mobile to balance layout -->
+ <div class="order-2 d-lg-none" style="width: 48px;"></div>
+
+ <!-- Collapsible menu -->
+ <div class="collapse navbar-collapse order-3 order-lg-1" id="main_navbar">
+ <ul class="navbar-nav ms-auto">
+ {{ $p := . }}
+ {{ $latestVersion := .Site.Params.latest_version }}
+ {{ range .Site.Menus.main }}
+ {{ $url := replace .URL "{{VERSION}}" (printf "/%s" $latestVersion) }}
+ <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}{{ if
$p.IsMenuCurrent "main" . }} active{{ end }}">
+ {{ if .HasChildren }}
+ <a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ .Name
}}</a>
+ <ul class="dropdown-menu">
+ {{ range .Children }}
+ {{ $childUrl := replace .URL "{{VERSION}}" (printf "/%s"
$latestVersion) }}
+ <li><a class="dropdown-item" href="{{ $childUrl }}">{{ .Name
}}</a></li>
+ {{ end }}
+ </ul>
+ {{ else }}
+ <a class="nav-link" href="{{ $url }}"><span>{{ .Name }}</span></a>
+ {{ end }}
+ </li>
+ {{ end }}
+
+ {{ if .Site.Params.versions }}
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{
.Site.Params.version_menu | default "Releases" }}</a>
+ <ul class="dropdown-menu">
+ {{ $p := . }}
+ {{ range .Site.Params.versions }}
+ <li><a class="dropdown-item{{ if eq .version
$p.Site.Params.version }} active{{ end }}" href="{{ .url }}">{{ .version
}}</a></li>
+ {{ end }}
+ </ul>
+ </li>
+ {{ end }}
+
+ <!-- Apache menu item -->
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apache</a>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="https://www.apache.org/";
target="_blank">Apache Software Foundation</a></li>
+ <li><a class="dropdown-item" href="https://www.apache.org/licenses/";
target="_blank">License</a></li>
+ <li><a class="dropdown-item"
href="https://www.apache.org/foundation/sponsorship";
target="_blank">Sponsorship</a></li>
+ <li><a class="dropdown-item"
href="https://www.apache.org/foundation/thanks.html";
target="_blank">Thanks</a></li>
+ <li><a class="dropdown-item" href="https://www.apache.org/security/";
target="_blank">Security</a></li>
+ <li><a class="dropdown-item"
href="https://www.apache.org/events/current-event.html";
target="_blank">Events</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+
+ <!-- Search (desktop only) - Far right with gap -->
+ <div class="d-none d-lg-flex order-2 navbar-search">
+ {{ partial "search-input.html" . }}
+ </div>
+</div>
+</nav>
+
diff --git a/static/js/navbar-enhancements.js b/static/js/navbar-enhancements.js
new file mode 100644
index 000000000..755df4839
--- /dev/null
+++ b/static/js/navbar-enhancements.js
@@ -0,0 +1,164 @@
+// Navbar enhancements for Apache Kafka site
+(function() {
+ 'use strict';
+
+ // Wait for DOM to be ready
+ document.addEventListener('DOMContentLoaded', function() {
+
+ // Add hover support for dropdowns on desktop only
+ function setupDesktopHover() {
+ if (window.innerWidth >= 992) {
+ const dropdowns = document.querySelectorAll('.td-navbar .dropdown');
+
+ dropdowns.forEach(function(dropdown) {
+ dropdown.addEventListener('mouseenter', function() {
+ const dropdownMenu = this.querySelector('.dropdown-menu');
+ if (dropdownMenu) {
+ dropdownMenu.classList.add('show');
+ this.classList.add('show');
+ }
+ });
+
+ dropdown.addEventListener('mouseleave', function() {
+ const dropdownMenu = this.querySelector('.dropdown-menu');
+ if (dropdownMenu) {
+ dropdownMenu.classList.remove('show');
+ this.classList.remove('show');
+ }
+ });
+ });
+ }
+ }
+
+ // Setup mobile dropdown click handling
+ function setupMobileDropdowns() {
+ if (window.innerWidth < 992) {
+ const dropdownToggles = document.querySelectorAll('.td-navbar
.dropdown-toggle');
+
+ dropdownToggles.forEach(function(toggle) {
+ toggle.addEventListener('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const parent = this.closest('.dropdown');
+ const dropdownMenu = parent.querySelector('.dropdown-menu');
+
+ // Close other dropdowns
+ document.querySelectorAll('.td-navbar
.dropdown').forEach(function(otherDropdown) {
+ if (otherDropdown !== parent) {
+ otherDropdown.classList.remove('show');
+ const otherMenu =
otherDropdown.querySelector('.dropdown-menu');
+ if (otherMenu) {
+ otherMenu.classList.remove('show');
+ }
+ }
+ });
+
+ // Toggle current dropdown
+ parent.classList.toggle('show');
+ if (dropdownMenu) {
+ dropdownMenu.classList.toggle('show');
+ }
+ });
+ });
+ }
+ }
+
+ // Close menu when clicking outside
+ document.addEventListener('click', function(event) {
+ const navbar = document.querySelector('.td-navbar');
+ const navbarToggler = document.querySelector('.navbar-toggler');
+ const navbarCollapse = document.querySelector('#main_navbar');
+
+ if (navbar && navbarToggler && navbarCollapse) {
+ const isClickInside = navbar.contains(event.target);
+ const isTogglerClick = navbarToggler.contains(event.target);
+
+ // Close menu if clicking outside (but not on the toggler itself)
+ // The toggler has its own handler that will manage open/close
+ if (!isClickInside && !isTogglerClick &&
navbarCollapse.classList.contains('show')) {
+ navbarCollapse.classList.remove('show');
+ navbarToggler.setAttribute('aria-expanded', 'false');
+
+ // Close all dropdowns
+
navbarCollapse.querySelectorAll('.dropdown.show').forEach(function(dropdown) {
+ dropdown.classList.remove('show');
+ const menu = dropdown.querySelector('.dropdown-menu');
+ if (menu) {
+ menu.classList.remove('show');
+ }
+ });
+ }
+ }
+ });
+
+ // Ensure hamburger toggles the menu properly
+ const navbarToggler = document.querySelector('.navbar-toggler');
+ const navbarCollapse = document.querySelector('#main_navbar');
+
+ if (navbarToggler && navbarCollapse) {
+ // Remove any existing Bootstrap data-bs-toggle behavior and handle
manually
+ navbarToggler.removeAttribute('data-bs-toggle');
+ navbarToggler.removeAttribute('data-bs-target');
+
+ navbarToggler.addEventListener('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Simple toggle without Bootstrap's Collapse API
+ const isExpanded = navbarCollapse.classList.contains('show');
+
+ if (isExpanded) {
+ // Close menu
+ navbarCollapse.classList.remove('show');
+ this.setAttribute('aria-expanded', 'false');
+
+ // Close all dropdowns inside
+
navbarCollapse.querySelectorAll('.dropdown.show').forEach(function(dropdown) {
+ dropdown.classList.remove('show');
+ const menu = dropdown.querySelector('.dropdown-menu');
+ if (menu) {
+ menu.classList.remove('show');
+ }
+ });
+ } else {
+ // Open menu
+ navbarCollapse.classList.add('show');
+ this.setAttribute('aria-expanded', 'true');
+ }
+ });
+ }
+
+ // Handle window resize
+ let resizeTimer;
+ window.addEventListener('resize', function() {
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(function() {
+ // Close mobile menu on resize to desktop
+ if (window.innerWidth >= 992) {
+ const navbarCollapse = document.querySelector('#main_navbar');
+ if (navbarCollapse && navbarCollapse.classList.contains('show')) {
+ navbarCollapse.classList.remove('show');
+ }
+ // Reset all dropdowns
+
document.querySelectorAll('.dropdown.show').forEach(function(dropdown) {
+ dropdown.classList.remove('show');
+ const menu = dropdown.querySelector('.dropdown-menu');
+ if (menu) {
+ menu.classList.remove('show');
+ }
+ });
+ }
+
+ // Reinitialize hover/click handlers based on new screen size
+ setupDesktopHover();
+ setupMobileDropdowns();
+ }, 250);
+ });
+
+ // Initial setup
+ setupDesktopHover();
+ setupMobileDropdowns();
+ });
+})();
+
