You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2020/08/27 22:02:59 UTC
[camel-website] branch pr/docs-layout created (now 52cf138)
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a change to branch pr/docs-layout
in repository https://gitbox.apache.org/repos/asf/camel-website.git.
at 52cf138 CAMEL-15392: documentation and community redesign
This branch includes the following new commits:
new 52cf138 CAMEL-15392: documentation and community redesign
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[camel-website] 01/01: CAMEL-15392: documentation and community
redesign
Posted by zr...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch pr/docs-layout
in repository https://gitbox.apache.org/repos/asf/camel-website.git
commit 52cf1383373c0de0ca035a3eaafaae8e3a6b5872
Author: Aashna Jena <je...@gmail.com>
AuthorDate: Fri Aug 28 00:01:53 2020 +0200
CAMEL-15392: documentation and community redesign
Based on pull request #469 by @aashnajena, rebased with fixed links.
---
antora-ui-camel/src/css/community.css | 19 ---
antora-ui-camel/src/css/docs.css | 180 +++++++-------------
antora-ui-camel/src/css/frontpage.css | 39 +++--
antora-ui-camel/src/css/site.css | 1 -
content/_index.md | 20 +--
content/community/_index.md | 119 ++++++--------
content/docs/_index.md | 302 ++++++++--------------------------
layouts/index.html | 2 +-
8 files changed, 208 insertions(+), 474 deletions(-)
diff --git a/antora-ui-camel/src/css/community.css b/antora-ui-camel/src/css/community.css
deleted file mode 100644
index 3efc122..0000000
--- a/antora-ui-camel/src/css/community.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.community th {
- text-align: left;
-}
-
-.community {
- padding: 1rem 3rem;
-}
-
-@media screen and (max-width: 1023px) {
- .community {
- padding: 0 1rem 4rem;
- }
-}
-
-@media screen and (min-width: 1024px) {
- .section .description {
- height: 10rem;
- }
-}
diff --git a/antora-ui-camel/src/css/docs.css b/antora-ui-camel/src/css/docs.css
index abf5fe5..46a64a9 100644
--- a/antora-ui-camel/src/css/docs.css
+++ b/antora-ui-camel/src/css/docs.css
@@ -1,154 +1,84 @@
-.docs {
- padding: 1rem 3rem;
-}
-
-.docs p:empty {
- display: none;
-}
-
-.section h2 {
- text-align: center;
- padding-bottom: 0;
-}
-
-.camel-project {
- width: calc(100% - 3rem);
- display: inline-flex;
- border: 1px solid var(--color-smoke-90);
+.docs,
+.community {
+ padding: 1rem 3rem 2rem;
+ display: flex;
+ width: 80%;
flex-direction: column;
- align-items: center;
- text-align: center;
- padding: 1rem 1rem 2rem 1rem;
- margin: 1.5rem;
- border-radius: 10px;
}
-.camel-project .section {
- border: none;
- padding: 0;
-}
-
-.camel-project .section.core {
- width: 100%;
+.docs .box,
+.community .box {
+ display: flex;
+ margin: 1rem 0;
}
-.camel-project .camel-documentation .links {
- background-color: var(--color-camel-orange-light);
- padding: 0 0.5rem;
- border-radius: 25px;
- color: var(--navbar-background);
+.docs .box .content,
+.community .box .content {
+ width: 70%;
}
-.camel-project .camel-documentation .links a {
- color: var(--navbar-background);
- font-weight: bolder;
+.docs .box img,
+.community .box img {
+ margin-top: 4rem;
+ height: 8vw;
+ max-height: 6rem;
+ margin-right: 0.5rem;
}
-.section {
- display: inline-flex;
- border: 1px solid var(--color-smoke-90);
- width: calc(50% - 3.2rem);
- flex-direction: column;
- align-items: center;
+.docs .box .icon {
+ width: 30%;
text-align: center;
- padding: 1rem;
- margin: 1.5rem;
- border-radius: 10px;
-}
-
-.section > a,
-.camel-project > a {
- background: none;
-}
-
-.section a > img,
-.camel-project a > img {
- display: inline-block;
- width: auto;
- height: 5rem;
- margin-top: 1rem;
-}
-
-.section a > img + img {
- padding-left: 1rem;
}
-.section .description {
- padding: 1.2rem;
+.docs .box.camel-core .icon,
+.community .box .icon {
+ width: 20%;
text-align: center;
}
-.section .list {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.section .links {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin: 1.5rem 0;
- word-break: break-word;
- background-color: var(--color-camel-orange-light);
- padding: 0 0.5rem;
- border-radius: 25px;
- color: var(--navbar-background);
-}
-
-.section .list pre {
- padding: 0;
- width: 0.5rem;
- box-shadow: none;
- overflow-x: hidden;
- background: none;
-}
-
-.section .list .links {
- margin: 0.5rem;
+.icon a,
+a.button-light,
+a.button-dark {
+ background-image: none;
}
-.section .links img {
- height: 1.5rem;
- width: 2rem;
- margin: 0.35rem 0 0 0.25rem;
-}
-
-.section .links p {
- margin: 0;
-}
-
-.section .links .partition {
- background: #fff;
- height: 2.5rem;
- width: 0.1rem;
- margin: 0 0.5rem;
-}
-
-.section .links a {
- color: var(--navbar-background);
- font-weight: bolder;
+.docs .box.camel-core .content {
+ width: 80%;
}
@media screen and (max-width: 1023px) {
- .docs {
+ .docs,
+ .community {
padding: 0 1rem 4rem;
+ width: 100%;
}
- .camel-project,
- .section {
- width: calc(100% - 1rem);
- margin: 1.5rem -1.5rem 1.5rem 0.5rem;
+ .docs .box,
+ .community .box,
+ .docs .box .content,
+ .community .box .content,
+ .docs .box .icon,
+ .community .box .icon {
+ flex-direction: column;
+ margin: 0 auto;
+ padding: 0;
+ text-align: center;
+ width: 90%;
}
- .camel-project .section {
- width: calc(100% - 3rem);
- margin: 1.5rem;
+ .docs .box img,
+ .community .box img {
+ height: 6rem;
+ max-width: 25vw;
+ margin: 2.5rem 0.5rem 0;
+ }
+
+ .docs .box.right,
+ .community .box.right {
+ flex-direction: column-reverse;
}
-}
-@media screen and (min-width: 1024px) {
- .section .description {
- height: 12rem;
+ .docs .button-light {
+ line-height: 4rem;
}
}
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index 4def659..763d198 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -74,30 +74,32 @@ header.frontpage p {
line-height: 1.7rem;
}
-.frontpage a.button-dark,
-.frontpage a.button-dark:hover {
+a.button,
+section.frontpage a.button {
white-space: nowrap;
- padding: 0.7rem 1rem;
- background-color: var(--color-camel-orange);
- background-image: none;
- background-repeat: no-repeat;
- background-position: 0;
- color: white;
- font-weight: bold;
margin-right: 0.5rem;
+ background-image: none;
border-radius: 3rem;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+ font-weight: bold;
+ padding: 0.4rem 1rem;
}
-.frontpage a.button-light {
+header.frontpage a.button {
padding: 0.7rem 1rem;
+}
+
+a.button.dark,
+section.frontpage a.button.dark,
+section.frontpage a.button.dark:hover,
+a.button.dark:hover {
+ background-color: var(--color-camel-orange);
+ color: white;
+}
+
+a.button.light,
+a.button.light:hover {
border: 1px solid var(--color-gray-70);
color: var(--color-gray-70);
- font-weight: bold;
- border-radius: 3rem;
- white-space: nowrap;
}
/* css for blog section */
@@ -347,6 +349,11 @@ section.frontpage.projects .project img {
text-transform: uppercase;
border-radius: 0;
}
+
+ a.button,
+ section.frontpage a.button {
+ line-height: 3rem;
+ }
}
/* css for mobile view */
diff --git a/antora-ui-camel/src/css/site.css b/antora-ui-camel/src/css/site.css
index e00ed3e..7059b3d 100644
--- a/antora-ui-camel/src/css/site.css
+++ b/antora-ui-camel/src/css/site.css
@@ -22,5 +22,4 @@
@import 'category.css';
@import 'release.css';
@import 'misc.css';
-@import 'community.css';
@import 'docs.css';
diff --git a/content/_index.md b/content/_index.md
index 2e48f48..d757fde 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -16,7 +16,7 @@ description: Camel is an open source integration framework that empowers you to
Camel supports most of the Enterprise Integration Patterns from the excellent book by Gregor Hohpe and Bobby Woolf, and newer integration patterns from microservice architectures to help you solve your integration problem by applying best practices out of the box.
-<p><a class="button-dark" href="/components/latest/eips/enterprise-integration-patterns.html">Read more on EIP</a></p>
+<p><a class="button dark" href="/components/latest/eips/enterprise-integration-patterns.html">Read more on EIP</a></p>
{{< /div >}}
@@ -43,7 +43,7 @@ Camel supports most of the Enterprise Integration Patterns from the excellent bo
Apache Camel is standalone, and can be embedded as a library within Spring Boot, Quarkus, Application Servers, and in the clouds. Camel subprojects focus on making your work easy.
-<p><a class="button-dark" href="/docs/">Go to Camel Subprojects</a></p>
+<p><a class="button dark" href="/docs/">Go to Camel Subprojects</a></p>
{{< /div >}}
@@ -56,7 +56,7 @@ Apache Camel is standalone, and can be embedded as a library within Spring Boot,
## Packed with Components
Packed with several hundred components that are used to access databases, message queues, APIs or basically anything under the sun. Helping you integrate with everything.
-<p><a class="button-dark" href="/components/latest/">Go to Component Reference</a></p>
+<p><a class="button dark" href="/components/latest/">Go to Component Reference</a></p>
{{< /div >}}
@@ -81,7 +81,7 @@ Packed with several hundred components that are used to access databases, messag
## Supports over 50 Data Formats
Camel supports around 50 data formats, allowing to translate messages in multiple formats, and with support from industry standard formats from finance, telco, health-care, and more.
-<p><a class="button-dark" href="/components/latest/dataformats/">See Supported Formats</a></p>
+<p><a class="button dark" href="/components/latest/dataformats/">See Supported Formats</a></p>
{{< /div >}}
@@ -105,7 +105,7 @@ Camel supports around 50 data formats, allowing to translate messages in multipl
## Camel Core
Apache Camel helps you integrate various systems consuming or producing data.
-<p><a class="button-dark" href="/docs/">Read More</a></p>
+<p><a class="button dark" href="/docs/">Read More</a></p>
{{< /div >}}
@@ -123,7 +123,7 @@ Apache Camel helps you integrate various systems consuming or producing data.
## Camel K
Apache Camel K is a lightweight integration framework that runs natively on Kubernetes.
-<p><a class="button-dark" href="/docs/">Read More</a></p>
+<p><a class="button dark" href="/docs/">Read More</a></p>
{{< /div >}}
@@ -141,7 +141,7 @@ Apache Camel K is a lightweight integration framework that runs natively on Kube
## Camel Quarkus
Apache Camel Quarkus packages 280+ Camel components as Quarkus extensions.
-<p><a class="button-dark" href="/docs/">Read More</a></p>
+<p><a class="button dark" href="/docs/">Read More</a></p>
{{< /div >}}
@@ -160,7 +160,7 @@ Apache Camel Quarkus packages 280+ Camel components as Quarkus extensions.
## Camel Kafka Connector
Apache Camel Kafka Connector embeds Camel within Kafka Connect.
-<p><a class="button-dark" href="/docs/">Read More</a></p>
+<p><a class="button dark" href="/docs/">Read More</a></p>
{{< /div >}}
@@ -178,7 +178,7 @@ Apache Camel Kafka Connector embeds Camel within Kafka Connect.
## Camel Spring Boot
Apache Camel Spring Boot runs Camel on Spring Boot and provides starters for Camel components.
-<p><a class="button-dark" href="/docs/">Read More</a></p>
+<p><a class="button dark" href="/docs/">Read More</a></p>
{{< /div >}}
@@ -196,7 +196,7 @@ Apache Camel Spring Boot runs Camel on Spring Boot and provides starters for Cam
## Camel Karaf
Apache Camel Karaf makes running Apache Camel components to run in the OSGi environment.
-<p><a class="button-dark" href="/docs/">Read More</a></p>
+<p><a class="button dark" href="/docs/">Read More</a></p>
{{< /div >}}
diff --git a/content/community/_index.md b/content/community/_index.md
index 72733ed..bea11e5 100644
--- a/content/community/_index.md
+++ b/content/community/_index.md
@@ -1,146 +1,135 @@
---
+Title: "Community"
---
-{{< div "section" >}}
+{{< div "box" >}}
-[](/community/support/)
-
-## Support
+{{< div "icon" >}}
-{{< div "description" >}}
-
-If you are experiencing problems using Camel then please report your problem to our mailing list. This allows the entire community to help with your problem.
+[](/community/support/)
{{< /div >}}
-{{< div "links" >}}
+{{< div "content" >}}
-[](/community/support/)
+## Support
-{{< div "partition" >}}{{< /div >}}
+If you are experiencing problems using Camel then please report your problem to our mailing list. This allows the entire community to help with your problem.
-[Read More](/community/support/)
+<p>
+<a class="button dark" href="/community/support/">Read More</a>
+</p>
{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
-[](/manual/latest/contributing.html)
-
-## Contributing
+{{< div "box" >}}
-{{< div "description" >}}
+{{< div "icon" >}}
-There are many ways you can help make Camel better - please dive in and help!Identify areas you can contribute first. You don’t have to be an expert in an area, the Apache Camel developers are available to offer help and guidance.
+[](/manual/latest/contributing.html)
{{< /div >}}
-{{< div "links" >}}
+{{< div "content" >}}
-[](/manual/latest/contributing.html)
+## Contributing
-{{< div "partition" >}}{{< /div >}}
+There are many ways you can help make Camel better - please dive in and help!Identify areas you can contribute first. You don’t have to be an expert in an area, the Apache Camel developers are available to offer help and guidance.
-[Read More](/manual/latest/contributing.html)
+<p>
+<a class="button dark" href="/manual/latest/contributing.html">Read More</a>
+</p>
{{< /div >}}
{{< /div >}}
+{{< div "box" >}}
-{{< div "section" >}}
+{{< div "icon" >}}
[](/community/user-stories/)
-## User Stories
-
-{{< div "description" >}}
-
-This page is intended as a place to collect user stories and feedback on Apache Camel. If you are using or have tried Apache Camel please add an entry or comment; or post to the mailing list.
-
{{< /div >}}
-{{< div "links" >}}
+{{< div "content" >}}
-[](/community/user-stories/)
+## User Stories
-{{< div "partition" >}}{{< /div >}}
+This page is intended as a place to collect user stories and feedback on Apache Camel. If you are using or have tried Apache Camel please add an entry or comment; or post to the mailing list.
-[Read More](/community/user-stories/)
+<p>
+<a class="button dark" href="/community/user-stories/">Read More</a>
+</p>
{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
-
-[](/community/articles/)
-
-## Articles
+{{< div "box" >}}
-{{< div "description" >}}
+{{< div "icon" >}}
-Articles are divided into several sections. As the lists grow, further sectioning refinements may be necessary. The article section includes camel videos and general articles and other categories.
+[](/community/articles/)
{{< /div >}}
-{{< div "links" >}}
+{{< div "content" >}}
-[](/community/articles/)
+## Articles
-{{< div "partition" >}}{{< /div >}}
+Articles are divided into several sections. As the lists grow, further sectioning refinements may be necessary. The article section includes camel videos and general articles and other categories.
-[Read More](/community/articles/)
+<p>
+<a class="button dark" href="/community/articles/">Read More</a>
+</p>
{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
-
-[](/community/books/)
-
-## Books
+{{< div "box" >}}
-{{< div "description" >}}
+{{< div "icon" >}}
-This page lists the known books about Apache Camel. If you happen to know a book which is not listed then please contact us, for example using the
+[](/community/books/)
{{< /div >}}
-{{< div "links" >}}
+{{< div "content" >}}
-[](/community/books/)
+## Books
-{{< div "partition" >}}{{< /div >}}
+This page lists the known books about Apache Camel. If you happen to know a book which is not listed then please contact us.
-[Read More](/community/books/)
+<p>
+<a class="button dark" href="/community/books/">Read More</a>
+</p>
{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
-
-[](/community/team/)
-
-## Team
+{{< div "box" >}}
-{{< div "description" >}}
+{{< div "icon" >}}
-This page lists who we are. By all means add yourself to the list - lets sort it in alphabetical order. When posting to the mailing lists, use plain text mails. Do not use HTML mails.
+[](/community/team/)
{{< /div >}}
-{{< div "links" >}}
+{{< div "content" >}}
-[](/community/team/)
+## Team
-{{< div "partition" >}}{{< /div >}}
+This page lists who we are. By all means add yourself to the list - lets sort it in alphabetical order. When posting to the mailing lists, use plain text mails. Do not use HTML mails.
-[Read More](/community/team/)
+<p>
+<a class="button dark" href="/community/team/">Read More</a>
+</p>
{{< /div >}}
diff --git a/content/docs/_index.md b/content/docs/_index.md
index 242cac9..b214262 100644
--- a/content/docs/_index.md
+++ b/content/docs/_index.md
@@ -1,325 +1,153 @@
---
+Title: "Documentation"
---
+{{< div "box left camel-core" >}}
-{{< div "camel-project" >}}
+{{< div "icon" >}}
-[](/manual/latest/)
-
-## Camel Core
-
-{{< div "section core" >}}
-
-{{< div "list" >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-examples/)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Examples](https://github.com/apache/camel-examples/)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](https://github.com/apache/camel/)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel/)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](https://www.javadoc.io/doc/org.apache.camel/camel-api/latest/index.html)
-
-{{< div "partition" >}}{{< /div >}}
-
-[API Documentation](https://www.javadoc.io/doc/org.apache.camel/camel-api/latest/index.html)
-
-{{< /div >}}
-
-{{< /div >}}
-
-{{< /div >}}
-
-{{< div "camel-documentation" >}}
-
-{{< div "section" >}}
-
-### User Manual
-
-{{< div "description" >}}
-
-The [User Manual](/manual/latest/) is a comprehensive guide meant to help you with the key concepts of Apache Camel and software integration, from how to [begin contributing](/manual/latest/contributing.html) to Apache Camel, how to [upgrade to Camel 3.x](/manual/latest/camel-3x-upgrade-guide.html), to [architecture](/manual/latest/architecture.html) or [integration patterns](/components/latest/eips/enterprise-integration-patterns.html).
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/manual/latest/)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Documentation](/manual/latest/)
+[](/camel-k/latest/)
{{< /div >}}
-{{< /div >}}
+{{< div "content" >}}
-{{< div "section" >}}
+## Camel Core
+The [User Manual](/manual/latest/) is a comprehensive guide meant to help you with the key concepts of Apache Camel and software integration, from how to [begin contributing](/manual/latest/contributing.html) to Apache Camel, how to [upgrade to Camel 3.x](/manual/latest/camel-3x-upgrade-guide.html), to [architecture](/manual/latest/architecture.html) or [integration patterns](/components/latest/eips/enterprise-integration-patterns.html).
-### Components
+<p>
+<a class="button dark" href="/manual/latest/">Documentation</a>
+<a class="button light" href="https://github.com/apache/camel/">Source</a>
+<a class="button light" href="https://github.com/apache/camel-examples">Examples</a>
+</p>
-{{< div "description" >}}
Camel is packed with several hundred components that are used to access databases, message queues and APIs. The [Component reference](/components/latest/) provides you information about the functionality and configuration of each component.
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/components/latest/)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Documentation](/components/latest/)
-
-{{< /div >}}
+<p>
+<a class="button dark" href="/components/latest/">Component Reference</a>
+<a class="button light" href="https://www.javadoc.io/doc/org.apache.camel/camel-api/latest/index.html">API Documentation</a>
+</p>
{{< /div >}}
{{< /div >}}
-{{< /div >}}
-
-{{< div "section" >}}
+{{< div "box right" >}}
-[](/camel-k/latest/)
+{{< div "content">}}
## Camel K
-{{< div "description" >}}
-
-Apache Camel K is a lightweight integration framework built on Apache Camel that runs natively on [Kubernetes](https://kubernetes.io/) and is specifically designed for serverless and micro service architectures. It allows you to run integration code written in Camel DSL on your cloud.
-
-{{< /div >}}
-
-{{< div "list" >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-k-examples)
+Apache Camel K is a lightweight integration framework built on Apache Camel that runs natively on [Kubernetes](https://kubernetes.io/) and is specifically designed for serverless and micro service architectures. It allows you to run integration code written in Camel DSL on your cloud.
-{{< div "partition" >}}{{< /div >}}
-
-[Examples](https://github.com/apache/camel-k-examples)
+<p>
+<a class="button dark" href="/camel-k/latest/">Documentation</a>
+<a class="button light" href="https://github.com/apache/camel-k/">Source</a>
+<a class="button light" href="https://github.com/apache/camel-k-examples">Examples</a>
+</p>
{{< /div >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-k/)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel-k/)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/camel-k/latest/)
+{{< div "icon" >}}
-{{< div "partition" >}}{{< /div >}}
-
-[Documentation](/camel-k/latest/)
+[](/camel-k/latest/)
{{< /div >}}
{{< /div >}}
-{{< /div >}}
-
-{{< div "section" >}}
-[](/camel-kafka-connector/latest/)
+{{< div "box left" >}}
-## Camel Kafka Connector
-
-{{< div "description" >}}
+{{< div "icon" >}}
-Camel Kafka Connector allows you to use all Camel [components](/components/latest/) as [Kafka Connect](http://kafka.apache.org/documentation/#connect) connectors, which, as a result, expands Kafka Connect compatibility by allowing all Camel components to be used in the Kafka ecosystem.
+[](/camel-k/latest/)
{{< /div >}}
-{{< div "list" >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-kafka-connector-examples)
-
-{{< div "partition" >}}{{< /div >}}
+{{< div "content">}}
-[Examples](https://github.com/apache/camel-kafka-connector-examples)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-kafka-connector/)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel-kafka-connector/)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/camel-kafka-connector/latest/)
-
-{{< div "partition" >}}{{< /div >}}
+## Camel Kafka Connector
-[Documentation](/camel-kafka-connector/latest/)
+Camel Kafka Connector allows you to use all [Camel components](/components/latest/) as [Kafka Connect](http://kafka.apache.org/documentation/#connect) connectors, which, as a result, expands Kafka Connect compatibility by allowing all Camel components to be used in the Kafka ecosystem.
-{{< /div >}}
+<p>
+<a class="button dark" href="/camel-kafka-connector/latest/">Documentation</a>
+<a class="button light" href="https://github.com/apache/camel-kafka-connector/">Source</a>
+<a class="button light" href="https://github.com/apache/camel-kafka-connector-examples/">Examples</a>
+</p>
{{< /div >}}
{{< /div >}}
+{{< div "box right" >}}
-{{< div "section" >}}
-
-[](/camel-quarkus/latest/)
+{{< div "content">}}
## Camel Quarkus
-{{< div "description" >}}
-
This project hosts the efforts to port and package the 280+ Camel components as Quarkus extensions. [Quarkus](https://quarkus.io/) is a Java platform offering fast boot times and low memory footprint. It targets both stock JVMs and GraalVM.
-{{< /div >}}
-
-{{< div "list" >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-quarkus/tree/master/examples)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Examples](https://github.com/apache/camel-quarkus/tree/master/examples)
+<p>
+<a class="button dark" href="/camel-quarkus/latest/">Documentation</a>
+<a class="button light" href="https://github.com/apache/camel-quarkus/">Source</a>
+<a class="button light" href="https://github.com/apache/camel-quarkus/tree/master/examples">Examples</a>
+</p>
{{< /div >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-quarkus/)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel-quarkus/)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/camel-quarkus/latest/)
+{{< div "icon" >}}
-{{< div "partition" >}}{{< /div >}}
-
-[Documentation](/camel-quarkus/latest/)
+[](/camel-quarkus/latest/)
{{< /div >}}
{{< /div >}}
-{{< /div >}}
+{{< div "box left" >}}
-{{< div "section" >}}
+{{< div "icon" >}}
[](/camel-spring-boot/latest/)
-## Camel Spring Boot
-
-{{< div "description" >}}
-
-Camel support for Spring Boot provides auto-configuration of the Camel context by auto-detecting Camel routes available in the Spring context and registers the key Camel utilities as beans. It also provides starters for many Camel components.
-
{{< /div >}}
-{{< div "list" >}}
-{{< div "links" >}}
+{{< div "content">}}
-[](https://github.com/apache/camel-spring-boot-examples)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Examples](https://github.com/apache/camel-spring-boot-examples)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-spring-boot)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel-spring-boot)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/camel-spring-boot/latest/)
-
-{{< div "partition" >}}{{< /div >}}
+## Camel Spring Boot
-[Documentation](/camel-spring-boot/latest/)
+Camel support for Spring Boot provides auto-configuration of the Camel context by auto-detecting Camel routes available in the Spring context and registers the key Camel utilities as beans. It also provides starters for many Camel components.
-{{< /div >}}
+<p>
+<a class="button dark" href="/camel-spring-boot/latest/">Documentation</a>
+<a class="button light" href="https://github.com/apache/camel-spring-boot">Source</a>
+<a class="button light" href="https://github.com/apache/camel-spring-boot-examples">Examples</a>
+</p>
{{< /div >}}
{{< /div >}}
+{{< div "box right" >}}
-{{< div "section" >}}
-
-[](/camel-karaf/latest/)
+{{< div "content">}}
## Camel Karaf
-{{< div "description" >}}
-
[Apache Karaf](https://karaf.apache.org/) makes running Apache Camel in [OSGi](https://www.osgi.org/) container easy, which as a result, expands Apache Camel's compatibility by allowing all Camel components to run in the OSGi environment.
-{{< /div >}}
-
-{{< div "list" >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-karaf-examples)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Examples](https://github.com/apache/camel-karaf-examples)
+<p>
+<a class="button dark" href="/camel-karaf/latest/">Documentation</a>
+<a class="button light" href="https://github.com/apache/camel-karaf">Source</a>
+<a class="button light" href="https://github.com/apache/camel-karaf-examples">Examples</a>
+</p>
{{< /div >}}
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-karaf)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel-karaf)
+{{< div "icon" >}}
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/camel-karaf/latest/)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Documentation](/camel-karaf/latest/)
-
-{{< /div >}}
+[](/camel-karaf/latest/)
{{< /div >}}
diff --git a/layouts/index.html b/layouts/index.html
index 52bd257..dbb8196 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,7 +8,7 @@
to quickly and easily integrate various systems consuming or producing data.
</p>
<p>
- <a class="button-dark" href="/manual/latest/getting-started.html">Get Started</a> <a class="button-light" href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
+ <a class="button dark" href="/manual/latest/getting-started.html">Get Started</a> <a class="button light" href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
</p>
</div>
<img alt="Computer with gears depicting data processing" src="./img/camel-gears.svg" />