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/04/08 09:39:02 UTC
[camel-website] 02/02: CAMEL-14772: showcase Camel projects
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
commit e0116c18a3403819e6e27831f1ca92398d60857f
Author: Zoran Regvart <zr...@apache.org>
AuthorDate: Tue Apr 7 15:29:12 2020 +0200
CAMEL-14772: showcase Camel projects
This builds on previous work by @jyotiattri to showcase Camel projects
on the frontpage.
Also removes the border around feature boxes as it makes the design a
bit busy with the following section.
Ref. https://issues.apache.org/jira/browse/CAMEL-14772
---
antora-ui-camel/src/css/frontpage.css | 120 ++++++---------------------------
content/_index.md | 123 +++++++++++++++++-----------------
2 files changed, 84 insertions(+), 159 deletions(-)
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index bae3313..29feb9f 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -149,31 +149,35 @@ section.frontpage.columns {
section.frontpage.projects {
display: flex;
- flex-direction: column;
- border-top: 1px solid var(--color-smoke-50);
+ flex-flow: wrap;
padding-top: 3rem;
+ border-top: 1px solid var(--color-smoke-50);
}
section.frontpage.projects .project {
display: flex;
- flex-direction: row;
+ flex: 1 0 33%;
+ flex-direction: column;
+ align-items: center;
+ padding: 1rem;
}
-section.frontpage.projects .project h1 {
- text-align: right;
- padding: 0 1rem;
- flex: 1;
+section.frontpage.projects .project a img {
+ display: inline-block;
+ width: auto;
+ height: 5rem;
}
-section.frontpage.projects .project p {
- flex: 1;
- margin: 1rem;
+section.frontpage.projects .project .links {
+ white-space: nowrap;
}
-section.frontpage.projects .project a.significant {
- margin: 0.5rem 0;
- padding: 0.4rem 1rem;
- font-size: 0.8rem;
+section.frontpage.projects .project a img + img {
+ padding-left: 1rem;
+}
+
+section.frontpage.projects .project h1 + p {
+ height: 100%;
}
section.frontpage.apache {
@@ -220,7 +224,6 @@ section.frontpage h2 {
padding: 1.8rem;
text-align: center;
margin: 1rem;
- border: 1px solid var(--color-smoke-50);
height: 100%;
}
@@ -245,7 +248,7 @@ section.frontpage h2 {
@media screen and (max-width: 626px) {
.split,
- .homepage .frontpage .platforms {
+ .frontpage {
flex: 100%;
margin: 0 1rem;
}
@@ -260,9 +263,8 @@ section.frontpage h2 {
padding: 1rem 0;
}
- .homepage .frontpage .platforms .ProjectImageRight {
- right: 15%;
- z-index: 1;
+ section.frontpage.projects .project {
+ flex: 100%;
}
}
@@ -289,84 +291,4 @@ section.frontpage h2 {
.box {
min-width: 51vw;
}
-
- section.frontpage.projects .project h1 {
- text-align: center;
- }
-
- section.frontpage.projects .project {
- flex-direction: column;
- }
-
- section.frontpage.projects .project p:nth-child(2) {
- text-align: center;
- }
-
- section.frontpage.projects .project p:nth-child(3) {
- text-align: center;
- }
-
- .frontpage .platforms {
- flex: 50%;
- }
-}
-
-section.frontpage.camelProjects {
- display: flex;
- flex-wrap: wrap;
-}
-
-.frontpage .platforms {
- flex: 33%;
- padding: 0.5rem 0;
-}
-
-.frontpage .platforms div {
- padding: 0 1rem;
-}
-
-.frontpage .platforms h2 {
- text-align: center;
- text-transform: capitalize;
- width: 100%;
- color: var(--heading-font-color);
-}
-
-.frontpage .platforms p {
- text-align: center;
-}
-
-.frontpage .platforms .ProjectImages {
- position: relative;
- width: 100%;
- height: 180px;
-}
-
-.frontpage .platforms .camelImage,
-.frontpage .platforms .ProjectImageRight {
- width: 6rem;
- height: 180px;
- position: absolute;
-}
-
-.frontpage .platforms .ProjectImages img {
- margin: 10px -3px;
- padding: 0;
-}
-
-.frontpage .platforms .ProjectImageRight {
- right: 10%;
- z-index: 1;
-}
-
-.frontpage .platforms .camelImage {
- left: 25%;
-}
-
-.frontpage .platforms .camelImagelogo {
- width: 6rem;
- margin: 0 auto;
- position: relative;
- left: 33%;
- height: 180px;
}
diff --git a/content/_index.md b/content/_index.md
index 0873b0c..774f083 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -53,84 +53,87 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
{{< /section >}}
-{{< section "frontpage camelProjects" >}}
-# Platforms Camel runs on
-{{< div "platforms" >}}
-{{< div >}}
-{{< div "ProjectImages">}}
-<a class="" href="./camel-k/latest/">
-<img src="./_/img/logo-d.svg" class="camelImage" alt="Apache Camel Logo">
-<img src="./_/img/knative.svg" class="ProjectImageRight" alt="Apache Camel K">
-{{< /div >}}
-## Camel K
-</a>
+{{< section "frontpage projects" >}}
+
+{{< div "project" >}}
+
+[](/camel-k/latest/)
+
+# Camel K
**Apache Camel K** is a lightweight integration framework built from Apache Camel that runs natively on [Kubernetes](https://kubernetes.io/) and is specifically designed for **serverless** and **microservice architectures**.
-{{< /div >}}
-{{< /div >}}
-{{< div "platforms" >}}
-{{< div >}}
-{{< div "ProjectImages">}}
-<a class="" href="./manual/latest/">
-<img src="./_/img/logo-d.svg" class="camelImagelogo" alt="Apache Camel Logo">
-{{< /div >}}
-## Camel
-</a>
-**Apache Camel** is the *Swiss knife* of integration.
-{{< /div >}}
-{{< /div >}}
-{{< div "platforms" >}}
-{{< div >}}
-{{< div "ProjectImages">}}
-<a class="" href="./camel-quarkus/latest/">
-<img src="./_/img/logo-d.svg" class="camelImage" alt="Apache Camel Logo">
-<img src="./_/img/quarkus.svg" class="ProjectImageRight" alt="Camel Quarkus">
+{{< div "links" >}}
+[Documentation](/camel-k/latest/)
{{< /div >}}
-## Camel Quarkus
-</a>
-**Apache Camel Quarkus** is a set of extensions for [Quarkus](https://quarkus.io), a Java platform offering fast boot times and low memory footprint. It targets both stock JVMs and [GraalVM](https://www.graalvm.org/).
{{< /div >}}
+
+{{< div "project" >}}
+
+[](/camel/latest/)
+
+# Camel
+
+**Apache Camel** is the *Swiss knife* of integration.
+
+{{< div "links" >}}
+[Documentation](/manual/latest) | [Components](/components/latest/) | [Patterns](/components/latest/eips/enterprise-integration-patterns.html)
{{< /div >}}
-{{< div "platforms" >}}
-{{< div >}}
-{{< div "ProjectImages">}}
-<a class="" href="./camel-karaf/latest/">
-<img src="./_/img/logo-d.svg" class="camelImage" alt="Apache Camel Logo">
-<img src="./_/img/apache-karaf.svg" class="ProjectImageRight" alt="Camel Karaf">
+
{{< /div >}}
-## Camel Karaf
-</a>
-**Apache Camel Karaf** run Camel in [OSGi](https://www.osgi.org/) container using [Apache Karaf](https://karaf.apache.org/).
+{{< div "project" >}}
+
+[](/camel-quarkus/latest/)
+
+# Quarkus
+
+**Apache Camel Quarkus** is a set of extensions for [Quarkus](https://quarkus.io), a Java platform offering fast boot times and low memory footprint. It targets both stock JVMs and [GraalVM](https://www.graalvm.org/).
+
+{{< div "links" >}}
+[Documentation](/camel-quarkus/latest/)
{{< /div >}}
+
{{< /div >}}
-{{< div "platforms" >}}
-{{< div >}}
-{{< div "ProjectImages">}}
-<a class="" href="./camel-spring-boot/latest/">
-<img src="./_/img/logo-d.svg" class="camelImage" alt="Apache Camel Logo">
-<img src="./_/img/spring-boot.svg" class="ProjectImageRight" alt="Camel Spring Boot">
+
+{{< div "project" >}}
+
+[](/camel-kafka-connector/latest/)
+
+# Kafka
+
+**Apache Camel Kafka Connector** embeds Camel within [Kafka Connect](https://kafka.apache.org/documentation/#connect), enabling declarative use of Camel components as sources or sinks to Kafka topics.
+
+[Documentation](/camel-kafka-connector/latest/)
{{< /div >}}
-## Camel Spring Boot
-</a>
+
+{{< div "project" >}}
+
+[](/camel-spring-boot/latest/)
+
+# Spring Boot
**Apache Camel Spring Boot** run Camel on [Spring Boot](https://spring.io/projects/spring-boot).
+
+{{< div "links" >}}
+[Documentation](/camel-spring-boot/latest/)
{{< /div >}}
+
{{< /div >}}
-{{< div "platforms" >}}
-{{< div >}}
-{{< div "ProjectImages">}}
-<a class="" href="./camel-kafka-connector/latest/">
-<img src="./_/img/logo-d.svg" class="camelImage" alt="Apache Camel Logo">
-<img src="./_/img/apache-kafka.svg" class="ProjectImageRight" alt="Camel Kafka Connector">
-{{< /div >}}
-## Camel Kafka Connector
-</a>
-**Apache Camel Kafka Connector** embeds Camel within [Kafka Connect](https://kafka.apache.org/documentation/#connect), enabling declarative use of Camel components as sources or sinks to Kafka topics.
+{{< div "project" >}}
+
+[](/camel-karaf/latest/)
+
+# Karaf
+
+**Apache Camel Karaf** run Camel in [OSGi](https://www.osgi.org/) container using [Apache Karaf](https://karaf.apache.org/).
+
+{{< div "links" >}}
+[Documentation](/camel-karaf/latest/)
{{< /div >}}
+
{{< /div >}}
{{< /section >}}