You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2023/01/02 09:14:16 UTC
[skywalking-website] branch master updated: Change the banner layout (#553)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 68d36c3fc91 Change the banner layout (#553)
68d36c3fc91 is described below
commit 68d36c3fc91b6682b23c96a5aeca322b4a579ac6
Author: Juntao Zhang <71...@qq.com>
AuthorDate: Mon Jan 2 17:14:11 2023 +0800
Change the banner layout (#553)
---
assets/scss/_custom_home.scss | 176 +++++++++++++-----------
content/_index.html | 80 +++++------
content/images/home/ui_Database.png | Bin 0 -> 61998 bytes
content/images/home/ui_Kubernetes.png | Bin 0 -> 70293 bytes
content/images/home/ui_Linux.png | Bin 0 -> 73799 bytes
content/images/home/ui_ServiceMesh.png | Bin 0 -> 64474 bytes
data/index.yml | 22 +++
layouts/shortcodes/home-banner.html | 61 ++++++++
themes/docsy/layouts/_default/baseof.html | 2 -
themes/docsy/layouts/partials/scripts-home.html | 18 +--
10 files changed, 217 insertions(+), 142 deletions(-)
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index 248ff9ba7bd..af17b5a204f 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -135,28 +135,100 @@
}
}
- // ui banner
- .ui-wrapper {
+ // ui banner mobile
+ #uiMobileContainer {
padding: 4rem 0;
- min-height: 180px;
- position: relative;
- .ui-content {
- position: relative;
- max-width: 1200px !important;
+ display: none;
+
+ .card {
+ border: 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.125);
+
+ .card-header {
+ margin-bottom: 0;
+ background: none !important;
+ border-bottom: none;
+ padding: 0;
+
+ .card-header-title {
+ padding: 1rem 0;
+ display: flex;
+ justify-content: space-between;
+ &:hover {
+ cursor: pointer;
+ }
- .swiper-container {
- box-shadow: 0px 10px 40px #E3E4E4;
- border-radius: 6px;
+ &[aria-expanded=true] {
+ .dropdown-toggle {
+ transform: rotate(180deg);
+ }
+ }
+ .dropdown-toggle {
+ margin-left: 12px;
+ }
+ }
+ }
+ }
+
+ .card-body {
+ padding: 0.2rem 0 1rem;
+
+ img {
+ box-shadow: 0px 10px 40px #e3e4e4;
+ border-radius: 8px;
+ }
+ }
+ }
+
+ // ui banner pc
+ .ui-container {
+ display: flex;
+ padding: 4rem 0;
+
+ .banner-nav {
+ width: 170px;
+ display: flex;
+ flex-direction: column;
+ margin: 0 0 0 30px;
+
+ li {
+ flex: 1;
+ padding: 0 20px;
+ max-height: 80px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+
+ &:hover {
+ text-decoration: underline;
- .swiper-slide {
- font-size: 0;
}
- .swiper-container-horizontal > .swiper-pagination-bullets {
- text-align: left;
+ &.active {
+ background: #f2f3f5;
+ border-radius: 5px;
}
}
}
+
+ .banner-content-inner {
+ width: calc(100% - 200px);
+ position: relative;
+ }
+
+ .banner-wrapper {
+ flex: 1;
+ position: relative;
+ padding-top: 51.43%;
+ box-shadow: 0px 10px 40px #e3e4e4;
+
+ .img-item {
+ position: absolute;
+ left: 0;
+ top: 0;
+ border-radius: 8px;
+ }
+ }
}
.demo-wrapper {
@@ -164,14 +236,17 @@
color: #888;
font-size: 14px;
padding: 0.25rem 1.2rem;
+
&:last-child {
font-size: 16px;
}
+
a {
font-weight: 600;
display: block;
}
}
+
.icon-arrow-up-right {
font-size: 10px;
position: relative;
@@ -258,46 +333,6 @@
display: inline-block;
}
}
-
- .swiper-container {
- width: 100%;
- }
-
- .plugin-swiper-container {
- .swiper-slide {
- overflow: hidden;
- border: 1px solid #DADDE0;
- padding: 10px 10px 30px 0;
- border-radius: 4px;
-
- img {
- width: auto;
- }
- }
- }
-
- .perf-swiper-container {
- .swiper-slide {
- padding-bottom: 20px;
- }
- }
-
- .swiper-wrapper {
- width: 100%;
-
- .swiper-slide {
- border: 1px solid #eee;
- box-sizing: border-box;
- padding: 10px 10px 25px 10px;
- border-radius: 4px;
- }
- }
-
- .swiper-button-prev, .swiper-button-next {
- &::after {
- font-size: 13px;
- }
- }
}
}
@@ -407,10 +442,6 @@
width: 90%;
}
- .swiper-button-next {
- text-align: right;
- }
-
.username-wrapper {
.username {
li {
@@ -428,12 +459,6 @@
}
}
- .ui-wrapper {
- .ui-content {
- //top: -60px;
- }
- }
-
.tuned-content {
li.twitter-wrapper {
p {
@@ -462,27 +487,12 @@
@media (max-width: 768px) {
.td-home {
- .swiper-button-prev, .swiper-button-next {
- display: block !important;
+ #uiMobileContainer {
+ display: block;
}
- }
-}
-
-@media (min-width: 768px) {
- .td-home {
- .swiper-button-prev, .swiper-button-next {
- background-color: #79a7d030;
- background-color: rgba(202, 211, 218, 0.25);
- padding: 20px;
- border-radius: 4px;
- }
-
- .feature-content {
- .swiper-button-prev, .swiper-button-next {
- padding: 10px;
- height: 30px;
- }
+ .ui-container {
+ display: none;
}
}
}
diff --git a/content/_index.html b/content/_index.html
index 7a7b5154493..6f2b3bc48a0 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -21,46 +21,25 @@ linkTitle = "Apache SkyWalking"
<button class="sky-btn primary mr-2">Quick start</button>
</a>
<span class="dropdown demo-wrapper">
- <button class="sky-btn btn-demo dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" >
- Live demo
- </button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <span class="dropdown-item" href="#">Username: skywalking</span>
- <span class="dropdown-item" href="#">Password: skywalking</span>
- <span class="dropdown-item" href="#">
- <a href="http://demo.skywalking.apache.org/" target="_blank" rel="noopener">
- Go <i class="iconfont icon-arrow-up-right"></i>
- </a>
- </span>
- </div>
- </span>
- </div>
-</div>
-
-<div class="ui-wrapper">
- <div class="container ui-content">
- <div class="swiper-container ui-swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <img loading="lazy" src="images/home/ui_dashboard.png" alt="dashboard">
- </div>
- <div class="swiper-slide">
- <img loading="lazy" src="images/home/ui_topo.png" alt="topo">
- </div>
- <div class="swiper-slide">
- <img loading="lazy" src="images/home/ui_trace.png" alt="trace">
- </div>
- <div class="swiper-slide">
- <img loading="lazy" src="images/home/ui_eBPF.png" alt="eBPF Profiling">
- </div>
- </div>
- <div class="ui-swiper-pagination swiper-pagination"></div>
- <div class="ui-swiper-button-prev swiper-button-prev"></div>
- <div class="ui-swiper-button-next swiper-button-next"></div>
+ <button class="sky-btn btn-demo dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown">
+ Live demo
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <span class="dropdown-item" href="#">Username: skywalking</span>
+ <span class="dropdown-item" href="#">Password: skywalking</span>
+ <span class="dropdown-item" href="#">
+ <a href="http://demo.skywalking.apache.org/" target="_blank" rel="noopener">
+ Go <i class="iconfont icon-arrow-up-right"></i>
+ </a>
+ </span>
</div>
+ </span>
</div>
</div>
+{{< home-banner >}}
+
<div class="solution-wrapper">
<div class="container">
<h2 class="title solution-title">
@@ -70,19 +49,23 @@ linkTitle = "Apache SkyWalking"
<li>
<h4>Distributed Tracing</h4>
<p>
- End-to-end distributed tracing. Service topology analysis, service-centric observability and APIs dashboards.
+ End-to-end distributed tracing. Service topology analysis, service-centric observability and APIs
+ dashboards.
</p>
</li>
<li>
<h4>Agents for your stack</h4>
<p>
- Java, .Net Core, PHP, NodeJS, Golang, LUA, Rust, C++, Client JavaScript and Python agents with active development and maintenance.
+ Java, .Net Core, PHP, NodeJS, Golang, LUA, Rust, C++, Client JavaScript and Python agents with
+ active
+ development and maintenance.
</p>
</li>
<li>
<h4>eBPF early adoption</h4>
<p>
- Rover agent works as metrics collector and profiler powered by eBPF to diagnose CPU and network performance.
+ Rover agent works as metrics collector and profiler powered by eBPF to diagnose CPU and network
+ performance.
</p>
</li>
</ul>
@@ -96,13 +79,16 @@ linkTitle = "Apache SkyWalking"
<li>
<h4>Mature Telemetry Ecosystems Supported</h4>
<p>
- Metrics, Traces, and Logs from mature ecosystems are supported, e.g. Zipkin, OpenTelemetry, Prometheus, Zabbix, Fluentd
+ Metrics, Traces, and Logs from mature ecosystems are supported, e.g. Zipkin, OpenTelemetry,
+ Prometheus,
+ Zabbix, Fluentd
</p>
</li>
<li>
<h4>Native APM Database</h4>
<p>
- BanyanDB, an observability database, created in 2022, aims to ingest, analyze and store telemetry/observability data.
+ BanyanDB, an observability database, created in 2022, aims to ingest, analyze and store
+ telemetry/observability data.
</p>
</li>
</ul>
@@ -110,25 +96,29 @@ linkTitle = "Apache SkyWalking"
<li>
<h4>Consistent Metrics Aggregation</h4>
<p>
- SkyWalking native meter format and widely known metrics format(OpenCensus, OTLP, Telegraf, Zabbix, e.g.) are processed through the same script pipeline.
+ SkyWalking native meter format and widely known metrics format(OpenCensus, OTLP, Telegraf, Zabbix,
+ e.g.) are
+ processed through the same script pipeline.
</p>
</li>
<li>
<h4>Log Management Pipeline</h4>
<p>
- Support log formatting, extract metrics, various sampling policies through script pipeline in high performance.
+ Support log formatting, extract metrics, various sampling policies through script pipeline in high
+ performance.
</p>
</li>
<li>
<h4>Alerting and Telemetry Pipelines</h4>
<p>
- Support service-centric, deployment-centric, API-centric alarm rule setting. Support forwarding alarms and all telemetry data to 3rd party.
+ Support service-centric, deployment-centric, API-centric alarm rule setting. Support forwarding
+ alarms and all
+ telemetry data to 3rd party.
</p>
</li>
</ul>
</div>
-
<div class="container" id="arch">
<img loading="lazy" src="images/home/architecture_2160x720.png" alt="architecture">
</div>
diff --git a/content/images/home/ui_Database.png b/content/images/home/ui_Database.png
new file mode 100644
index 00000000000..cfa45dee52d
Binary files /dev/null and b/content/images/home/ui_Database.png differ
diff --git a/content/images/home/ui_Kubernetes.png b/content/images/home/ui_Kubernetes.png
new file mode 100644
index 00000000000..768ff109c52
Binary files /dev/null and b/content/images/home/ui_Kubernetes.png differ
diff --git a/content/images/home/ui_Linux.png b/content/images/home/ui_Linux.png
new file mode 100644
index 00000000000..329f047792d
Binary files /dev/null and b/content/images/home/ui_Linux.png differ
diff --git a/content/images/home/ui_ServiceMesh.png b/content/images/home/ui_ServiceMesh.png
new file mode 100644
index 00000000000..38aed12aaf9
Binary files /dev/null and b/content/images/home/ui_ServiceMesh.png differ
diff --git a/data/index.yml b/data/index.yml
new file mode 100644
index 00000000000..1660b714d6d
--- /dev/null
+++ b/data/index.yml
@@ -0,0 +1,22 @@
+#1680x864 px
+- banner:
+ list:
+ - name: Agent for Service
+ img: /images/home/ui_dashboard.png
+ - name: Topology
+ img: /images/home/ui_topo.png
+ - name: Trace
+ img: /images/home/ui_trace.png
+ - name: eBPF Profiling
+ img: /images/home/ui_eBPF.png
+ - name: Database
+ img: /images/home/ui_Database.png
+ - name: Kubernetes
+ img: /images/home/ui_Kubernetes.png
+ - name: Linux
+ img: /images/home/ui_Linux.png
+ - name: Service Mesh
+ img: /images/home/ui_ServiceMesh.png
+
+
+
diff --git a/layouts/shortcodes/home-banner.html b/layouts/shortcodes/home-banner.html
new file mode 100644
index 00000000000..902e19d3e4e
--- /dev/null
+++ b/layouts/shortcodes/home-banner.html
@@ -0,0 +1,61 @@
+<!--< home-banner >-->
+
+<div class="accordion" id="uiMobileContainer">
+ {{range .Site.Data.index}}
+ {{range $index, $element := .list}}
+ {{$target := replace .name " " "" }}
+ <div class="card">
+ <div class="card-header">
+ <div class="card-header-title"
+ data-toggle="collapse"
+ data-target="#{{$target}}"
+ {{if eq $index 0}}
+ aria-expanded="true"
+ {{else}}
+ aria-expanded="false"
+ {{end}}
+ aria-controls="{{$target}}"
+ >
+ {{.name}}
+ <i class="dropdown-toggle"></i>
+ </div>
+ </div>
+ <div id="{{$target}}"
+ {{if eq $index 0}}
+ class="collapse show"
+ {{else}}
+ class="collapse"
+ {{end}}
+ data-parent="#uiMobileContainer">
+ <div class="card-body">
+ <img class="img-item" loading="lazy" src="{{.img}}" alt="{{.name}}">
+ </div>
+ </div>
+ </div>
+ {{end}}
+ {{end}}
+</div>
+<div class="container ui-container">
+ <div class="banner-content-inner">
+ <div class="banner-wrapper">
+ {{range .Site.Data.index}}
+ {{range .list}}
+ <img class="img-item" loading="lazy" src="{{.img}}" alt="{{.name}}">
+ {{end}}
+ {{end}}
+ </div>
+ </div>
+ <ul class="banner-nav">
+ {{range .Site.Data.index}}
+ {{range $index, $element := .list}}
+ <li
+ {{if eq $index 0}}
+ class="active"
+ {{end}}
+ >
+ {{.name}}
+ </li>
+ {{end}}
+ {{end}}
+ </ul>
+</div>
diff --git a/themes/docsy/layouts/_default/baseof.html b/themes/docsy/layouts/_default/baseof.html
index 87db30ec119..cd9413147bf 100644
--- a/themes/docsy/layouts/_default/baseof.html
+++ b/themes/docsy/layouts/_default/baseof.html
@@ -3,8 +3,6 @@
<head>
{{ partial "head.html" . }}
<link rel="preload" as="image" href="/images/home/topo_ui.png">
- <link rel="stylesheet" href="/css/swiper-bundle.min.css">
- <script src="/js/swiper-bundle.min.js"> </script>
</head>
<body class="td-{{ .Kind }}">
<header>
diff --git a/themes/docsy/layouts/partials/scripts-home.html b/themes/docsy/layouts/partials/scripts-home.html
index 290a5967732..8b528563160 100644
--- a/themes/docsy/layouts/partials/scripts-home.html
+++ b/themes/docsy/layouts/partials/scripts-home.html
@@ -1,18 +1,12 @@
<script>
- initUISwiper();
+ initBanner();
openDemoDropdown();
- function initUISwiper() {
- new Swiper('.ui-swiper-container', {
- loop: true,
- effect: 'fade',
- autoplay: {
- delay: 3000,
- },
- navigation: {
- nextEl: '.ui-swiper-button-next',
- prevEl: '.ui-swiper-button-prev',
- },
+ function initBanner() {
+ $('.banner-nav li').click(function () {
+ var index = $(this).index();
+ $(this).addClass('active').siblings().removeClass('active');
+ $('.banner-wrapper .img-item').eq(index).fadeIn().siblings().fadeOut();
});
}