This is an automated email from the ASF dual-hosted git repository.
jbonofre pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/karaf-site.git
The following commit(s) were added to refs/heads/trunk by this push:
new 36b0a93 Fix icons and minor improvements
36b0a93 is described below
commit 36b0a93bf03c826a29360aac0529b8a60b95eba1
Author: JB Onofré <[email protected]>
AuthorDate: Mon Sep 21 14:09:09 2026 +0200
Fix icons and minor improvements
---
_includes/footer.html | 2 +-
_scss/_karaf-components.scss | 82 +++++++++++++++++++++++++++++++++++++--
images/apache-feather-tm-new.png | Bin 1359 -> 0 bytes
images/apache-feather-tm-new.svg | 1 -
images/homepage-bg-dark.jpg | Bin 122758 -> 0 bytes
images/homepage-bg.jpg | Bin 163086 -> 0 bytes
images/karaf-logo-new.png | Bin 4062 -> 0 bytes
index.html | 63 ++++++++++++++++++------------
8 files changed, 119 insertions(+), 29 deletions(-)
diff --git a/_includes/footer.html b/_includes/footer.html
index 3e9ed44..58fd599 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -8,7 +8,7 @@
<div class="k-footer-legal text-center">
<p>
- © 2018-2022 <a href="https://www.apache.org";>Apache Software
Foundation</a> -
+ © 2018-{{ site.time | date: "%Y" }} <a
href="https://www.apache.org";>Apache Software Foundation</a> -
<a href="https://www.apache.org/";>Foundation</a> -
<a
href="https://privacy.apache.org/policies/privacy-policy-public.html";>Privacy
Policy</a> -
<a target="_blank" rel="noopener"
href="https://www.apache.org/events/current-event.html"; title="Apache
Events">Apache Events</a> -
diff --git a/_scss/_karaf-components.scss b/_scss/_karaf-components.scss
index e3c5620..5f1e16b 100644
--- a/_scss/_karaf-components.scss
+++ b/_scss/_karaf-components.scss
@@ -176,6 +176,24 @@ h1, h2, h3, h4, h5, h6 { color: var(--k-text); }
.lead { color: rgba(255, 255, 255, 0.85); }
}
+// Homepage hero: a token-driven gradient + dot texture instead of a stock
+// photo, so it stays legible and on-brand in both themes with no extra
+// image request.
+.k-hero-home {
+ color: var(--k-text);
+ background-color: var(--k-bg-subtle);
+ background-image:
+ radial-gradient(circle at 1px 1px, var(--k-border) 1px, transparent 0),
+ linear-gradient(135deg, var(--k-accent-soft) 0%, transparent 60%);
+ background-size: 24px 24px, auto;
+ background-position: -12px -12px, 0 0;
+
+ &::before { background-color: transparent; }
+
+ h1 { color: var(--k-text); }
+ .lead { color: var(--k-text-soft); }
+}
+
// Releases strip replacing the old carousel.
.k-releases {
background-color: var(--k-bg-subtle);
@@ -205,21 +223,79 @@ h1, h2, h3, h4, h5, h6 { color: var(--k-text); }
.featurette-heading { font-weight: 600; letter-spacing: -0.02em; }
.k-pill {
- display: block;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
padding: 0.6rem 1rem;
margin-bottom: 0.5rem;
border-radius: 0.375rem;
border: 1px solid var(--k-border);
background-color: var(--k-surface-muted);
color: var(--k-text);
- text-align: center;
font-weight: 600;
font-size: 0.9rem;
- &.k-pill-accent { background-color: var(--k-accent); color: #fff;
border-color: var(--k-accent); }
+ i { color: var(--k-accent); }
+
+ &.k-pill-accent {
+ background-color: var(--k-accent);
+ color: #fff;
+ border-color: var(--k-accent);
+ i { color: #fff; }
+ }
&.k-pill-strong { background-color: var(--k-bg-subtle); }
}
+// ---------------------------------------------------------------------------
+// Terminal mockup (shell console preview)
+// ---------------------------------------------------------------------------
+
+.k-terminal {
+ border: 1px solid var(--k-border);
+ border-radius: 0.6rem;
+ overflow: hidden;
+ background-color: var(--k-bg-subtle);
+ box-shadow: var(--k-shadow-md);
+}
+
+.k-terminal-bar {
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.6rem 0.9rem;
+ background-color: var(--k-surface-muted);
+ border-bottom: 1px solid var(--k-border);
+
+ span:not(.k-terminal-title) {
+ width: 0.65rem;
+ height: 0.65rem;
+ border-radius: 50%;
+ background-color: var(--k-border-strong);
+ display: inline-block;
+ }
+
+ .k-terminal-title {
+ margin-left: 0.5rem;
+ font-family: var(--bs-font-monospace);
+ font-size: 0.8rem;
+ color: var(--k-muted);
+ }
+}
+
+.k-terminal-body {
+ margin: 0;
+ padding: 1.25rem;
+ border: none;
+ border-radius: 0;
+ background: none;
+ color: var(--k-text-soft);
+ font-size: 0.85rem;
+ line-height: 1.6;
+
+ .k-cmd { color: var(--k-accent); font-weight: 600; }
+}
+
// ---------------------------------------------------------------------------
// Value props (the three columns)
// ---------------------------------------------------------------------------
diff --git a/images/apache-feather-tm-new.png b/images/apache-feather-tm-new.png
deleted file mode 100644
index 3b0c98e..0000000
Binary files a/images/apache-feather-tm-new.png and /dev/null differ
diff --git a/images/apache-feather-tm-new.svg b/images/apache-feather-tm-new.svg
deleted file mode 100644
index 3dbce5a..0000000
--- a/images/apache-feather-tm-new.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"; xml:space="preserve" viewBox="0 0
2392.5 4226.6"><linearGradient id="a" x1="-5167.096" x2="-4570.116"
y1="697.555" y2="1395.619" gradientTransform="rotate(-65 -2052.965 -4777.795)"
gradientUnits="userSpaceOnUse"><stop offset="0"
style="stop-color:#f69923"/><stop offset=".312"
style="stop-color:#f79a23"/><stop offset=".838"
style="stop-color:#e97826"/></linearGradient><path fill="url(#a)" d="M1798.9
20.1C1732.6 59.2 1622.5 170 1491 330.5l120.8 228c8 [...]
diff --git a/images/homepage-bg-dark.jpg b/images/homepage-bg-dark.jpg
deleted file mode 100644
index 7c0f334..0000000
Binary files a/images/homepage-bg-dark.jpg and /dev/null differ
diff --git a/images/homepage-bg.jpg b/images/homepage-bg.jpg
deleted file mode 100644
index 781a5d6..0000000
Binary files a/images/homepage-bg.jpg and /dev/null differ
diff --git a/images/karaf-logo-new.png b/images/karaf-logo-new.png
deleted file mode 100644
index b538e66..0000000
Binary files a/images/karaf-logo-new.png and /dev/null differ
diff --git a/index.html b/index.html
index 4c75c06..8a5a69f 100644
--- a/index.html
+++ b/index.html
@@ -4,13 +4,17 @@ title: Apache Karaf - The Modulith Runtime
permalink: /
---
-<div class="k-hero py-5" style="background-image:
url('/images/homepage-bg-dark.jpg');">
+<div class="k-hero k-hero-home py-5">
<div class="container k-hero-inner py-5 text-center">
<h1 class="display-4 text-uppercase">The Modulith Runtime</h1>
<p class="lead mx-auto" style="max-width: 44rem;">
Karaf provides modulith runtime for the enterprise, running on premise
or on cloud.<br>
Focus on your business code and applications, Apache Karaf deals with
the rest.
</p>
+ <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
+ <a class="btn btn-primary btn-lg" href="/get-started" role="button">Get
Started »</a>
+ <a class="btn btn-outline-secondary btn-lg" href="/download"
role="button">Download</a>
+ </div>
</div>
</div>
@@ -102,22 +106,22 @@ permalink: /
<p><a class="btn btn-primary" href="/projects.html" role="button">Learn
more »</a></p>
</div>
<div class="col-md-5">
- <div class="k-pill k-pill-strong">Enterprise Features</div>
- <div class="k-pill k-pill-strong">HTTP Service</div>
+ <div class="k-pill k-pill-strong"><i class="fas fa-building"></i>
Enterprise Features</div>
+ <div class="k-pill k-pill-strong"><i class="fas fa-globe"></i> HTTP
Service</div>
<div class="row g-2 mb-2">
- <div class="col-3 col-md-6"><div class="k-pill">Instance</div></div>
- <div class="col-3 col-md-6"><div class="k-pill">JMX</div></div>
- <div class="col-3 col-md-6"><div
class="k-pill">Configuration</div></div>
- <div class="col-3 col-md-6"><div class="k-pill">Security</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas fa-server"></i>
Instance</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas
fa-chart-line"></i> JMX</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas fa-sliders"></i>
Configuration</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas
fa-shield-halved"></i> Security</div></div>
</div>
<div class="row g-2 mb-2">
- <div class="col-3 col-md-6"><div class="k-pill">Shell / SSH</div></div>
- <div class="col-3 col-md-6"><div class="k-pill">Logging</div></div>
- <div class="col-3 col-md-6"><div class="k-pill">Deployers</div></div>
- <div class="col-3 col-md-6"><div
class="k-pill">Provisioning</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas fa-terminal"></i>
Shell / SSH</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas
fa-file-lines"></i> Logging</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas fa-rocket"></i>
Deployers</div></div>
+ <div class="col-6"><div class="k-pill"><i class="fas fa-cubes"></i>
Provisioning</div></div>
</div>
- <div class="k-pill">Frameworks (JAXRS / Spring Boot / ...)</div>
- <div class="k-pill k-pill-accent">JVM</div>
+ <div class="k-pill"><i class="fas fa-layer-group"></i> Frameworks (JAXRS
/ Spring Boot / ...)</div>
+ <div class="k-pill k-pill-accent"><i class="fas fa-microchip"></i>
JVM</div>
</div>
</div>
@@ -131,10 +135,10 @@ permalink: /
<p><a class="btn btn-primary" href="/projects.html" role="button">Learn
more »</a></p>
</div>
<div class="col-md-5 order-md-1">
- <div class="k-pill k-pill-strong">Discovery</div>
- <div class="k-pill">Cluster groups</div>
- <div class="k-pill">Sync and distribute resources</div>
- <div class="k-pill k-pill-accent">DOSGi</div>
+ <div class="k-pill k-pill-strong"><i class="fas
fa-magnifying-glass"></i> Discovery</div>
+ <div class="k-pill"><i class="fas fa-diagram-project"></i> Cluster
groups</div>
+ <div class="k-pill"><i class="fas fa-arrows-rotate"></i> Sync and
distribute resources</div>
+ <div class="k-pill k-pill-accent"><i class="fas fa-network-wired"></i>
DOSGi</div>
</div>
</div>
@@ -148,10 +152,10 @@ permalink: /
<p><a class="btn btn-primary" href="/projects.html" role="button">Learn
more »</a></p>
</div>
<div class="col-md-5 order-md-2">
- <div class="k-pill k-pill-strong">Collectors</div>
- <div class="k-pill">Dispatcher</div>
- <div class="k-pill">Alerting</div>
- <div class="k-pill k-pill-strong">Appenders</div>
+ <div class="k-pill k-pill-strong"><i class="fas fa-plug"></i>
Collectors</div>
+ <div class="k-pill"><i class="fas fa-paper-plane"></i> Dispatcher</div>
+ <div class="k-pill"><i class="fas fa-bell"></i> Alerting</div>
+ <div class="k-pill k-pill-strong"><i class="fas fa-database"></i>
Appenders</div>
</div>
</div>
@@ -161,11 +165,22 @@ permalink: /
<div class="col-md-5">
<h2 class="featurette-heading"><span class="text-secondary">Apache
Karaf</span> enterprise modulith runtime.</h2>
<p class="lead">DevOps, Cloud, On Premise, Monitoring, Clustering...
Apache Karaf is the perfect project for the companies that need performance and
flexibility.</p>
- <p class="lead">Download the latest ApacheCon slideshow to have an
overview of the amazing possibilities that Apache Karaf offer to your
business!</p>
- <p><a class="btn btn-primary"
href="/resources/acna20-apache-karaf-modulith-runtime.pdf"
role="button">Download »</a></p>
+ <p>A full shell console ships out of the box, so you can manage bundles,
features, configuration, and instances interactively or remotely over
SSH/JMX.</p>
+ <p><a class="btn btn-primary"
href="/resources/acna20-apache-karaf-modulith-runtime.pdf"
role="button">Business overview slides »</a></p>
</div>
<div class="col-md-7 order-md-1">
- <img src="/images/acna20-apache-karaf-modulith-runtime.png"
class="img-fluid rounded" alt="Apache Karaf Modulith runtime slideshow">
+ <div class="k-terminal" aria-hidden="true">
+ <div class="k-terminal-bar">
+ <span></span><span></span><span></span>
+ <span class="k-terminal-title">bin/karaf</span>
+ </div>
+ <pre class="k-terminal-body"><code><span
class="k-cmd">karaf@root()></span> feature:install http
+<span class="k-cmd">karaf@root()></span> bundle:list | grep Active
+[ 45] [Active] [Created] [80] my-app-service (1.0.0)
+<span class="k-cmd">karaf@root()></span> ssh:ssh -l karaf -P karaf localhost
+<span class="k-cmd">karaf@root()></span> system:start-level
+Level 100</code></pre>
+ </div>
</div>
</div>
