This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/master by this push:
new 338b9b0 CAMEL-15392: documentation and community redesign
338b9b0 is described below
commit 338b9b09cdae00e1245c306d885db370c94714f1
Author: Aashna Jena <[email protected]>
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 | 182 +++++++--------------
antora-ui-camel/src/css/frontpage.css | 39 +++--
antora-ui-camel/src/css/site.css | 1 -
content/_index.md | 20 +--
content/community/_index.md | 118 ++++++--------
content/docs/_index.md | 297 +++++++---------------------------
layouts/index.html | 2 +-
8 files changed, 206 insertions(+), 472 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..ef9f8d4 100644
--- a/antora-ui-camel/src/css/docs.css
+++ b/antora-ui-camel/src/css/docs.css
@@ -1,154 +1,86 @@
-.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,
+ .docs .box.camel-core .content,
+ .docs .box.camel-core .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 dfaf4f0..6cd960e 100644
--- a/antora-ui-camel/src/css/site.css
+++ b/antora-ui-camel/src/css/site.css
@@ -22,7 +22,6 @@
@import 'category.css';
@import 'release.css';
@import 'misc.css';
-@import 'community.css';
@import 'docs.css';
@import 'sitemap.css';
@import 'videos.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 5c55396..bea11e5 100644
--- a/content/community/_index.md
+++ b/content/community/_index.md
@@ -2,146 +2,134 @@
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 77f9e63..b214262 100644
--- a/content/docs/_index.md
+++ b/content/docs/_index.md
@@ -1,326 +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 >}}
+[](/camel-k/latest/)
{{< /div >}}
-{{< div "camel-documentation" >}}
+{{< div "content" >}}
-{{< div "section" >}}
-
-### User Manual
-
-{{< div "description" >}}
+## 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).
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](/manual/latest/)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Documentation](/manual/latest/)
-
-{{< /div >}}
-
-{{< /div >}}
+<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 "section" >}}
-
-
-### Components
-
-{{< 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/)
+<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 "box right" >}}
-{{< /div >}}
-
-{{< div "section" >}}
-
-[](/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)
+<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 "partition" >}}{{< /div >}}
-
-[Examples](https://github.com/apache/camel-k-examples)
-
-{{< /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 "partition" >}}{{< /div >}}
-
-[Documentation](/camel-k/latest/)
-
-{{< /div >}}
-
-{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
+{{< div "icon" >}}
-[](/camel-kafka-connector/latest/)
-
-## Camel Kafka Connector
-
-{{< div "description" >}}
-
-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 >}}
-
-[Examples](https://github.com/apache/camel-kafka-connector-examples)
-
{{< /div >}}
-{{< div "links" >}}
+{{< div "box left" >}}
-[](https://github.com/apache/camel-kafka-connector/)
-{{< div "partition" >}}{{< /div >}}
+{{< div "icon" >}}
-[Source](https://github.com/apache/camel-kafka-connector/)
+[](/camel-k/latest/)
{{< /div >}}
-{{< div "links" >}}
+{{< div "content">}}
-[](/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" >}}
-
-[](/camel-quarkus/latest/user-guide/examples.html)
-
-{{< div "partition" >}}{{< /div >}}
-
-[Examples](/camel-quarkus/latest/user-guide/examples.html)
+<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)
-
-{{< /div >}}
-
-{{< div "links" >}}
-
-[](https://github.com/apache/camel-karaf)
-{{< div "partition" >}}{{< /div >}}
-
-[Source](https://github.com/apache/camel-karaf)
+<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" >}}
-
-[](/camel-karaf/latest/)
+{{< div "icon" >}}
-{{< 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" />
