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 2026/05/21 03:14:30 UTC
(skywalking-website) branch master updated: Website redesign: unified light theme, polished docs, data-driven pages (#844)
This is an automated email from the ASF dual-hosted git repository.
wu-sheng 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 5825a77a93d Website redesign: unified light theme, polished docs, data-driven pages (#844)
5825a77a93d is described below
commit 5825a77a93da38a8e29d749bca607b6019c91bc5
Author: 吴晟 Wu Sheng <wu...@foxmail.com>
AuthorDate: Thu May 21 11:14:24 2026 +0800
Website redesign: unified light theme, polished docs, data-driven pages (#844)
Website redesign: unified light theme, polished docs, data-driven pages
A full light-theme redesign of the public site — every page now shares one
visual language (brand blue #3788D0, rounded cards, consistent hero / sticky
nav / footer).
Pages
- Home: fixed Horizon "canyon" backdrop (parallax, fades into content), ASF
oak-leaf seal stamp, display-font stats (contributors / 100B+ / 10+ yrs),
product-shot widget row (trace/logs/metrics/RBAC), capability cards with
aligned CTAs, richer ecosystem cards, polished get-started + community
cards. Quick-start CTAs jump to the docs Get-started section.
- Docs landing: hero + category chips + project card grid with build-time
GitHub stars; a Get-started block with two OS-tabbed quickstarts (Run the
Showcase vs Run SkyWalking; bash / PowerShell; line-numbered, soft-wrapping
code); de-duplicated read-docs/versions control.
- Generated docs reading view: prose scale, dark code blocks with copy +
language label, callouts, themed version selector, polished "On this page".
- Events: year-grouped timeline cards + detail page with all-events sidebar.
- Blog (EN + 中文): card grid with color-coded labels and preview.
- Downloads: compact 4-up cards, latest source/distribution + older in a
dropdown, restyled Docker images and verify section.
- Team: PMC/Committer roster moved to data/committee.yml (auto-built grids),
project-level contributor grid + search + modal.
- Users: auto-scrolling logo marquee (grayscale → color).
- Contributors: light Project/Contributions/Ranking table (search preserved).
- Navbar: section-based active highlight, Apache dropdown with the new ASF
oak-leaf logo; redesigned announcement popup.
Data-driven content
- data/quickstart.yml — homepage/docs quickstarts (mirror backend-docker + showcase).
- data/committee.yml — PMC & Committer roster (one-line edits to add a member).
- data/stars.yml + scripts/stars.js — build-time GitHub stars (token-aware,
retry, cached fallback); replaces the runtime github-buttons widget.
Build command signatures unchanged, so CI is unaffected.
Blog labels
- Consolidated ~90 ad-hoc tags into 11 clear labels (Release, Tracing,
Metrics, Logging, Profiling, Storage, Agents, Cloud Native, AI, Community,
Engineering); all 84 EN posts re-tagged (≤3 each).
Notes
- Existing data shapes (releases.yml, docs.yml, users.yml, generated team.yml)
preserved; release/docs/team flows unaffected. JS hooks (search/modals,
version switcher, event popup, lazy-load) kept intact.
---
.github/workflows/deploy.yaml | 4 +
assets/scss/_custom_contributors.scss | 182 +--
assets/scss/_custom_docs.scss | 356 +++++
assets/scss/_custom_home.scss | 1423 ++++++++++++++------
assets/scss/_custom_team.scss | 369 ++---
assets/scss/_custom_users.scss | 84 ++
assets/scss/_event-popup.scss | 108 ++
content/_index.html | 381 +++---
content/blog/2018-05-24-skywalking-net/index.md | 3 +-
.../index.md | 4 +-
content/blog/2019-01-01-Understand-Trace/index.md | 1 -
content/blog/2019-01-25-mesh-loadtest/index.md | 4 +-
.../blog/2019-09-25-alarm-webhook-share/index.md | 2 +-
.../index.md | 2 +
.../index.md | 3 +-
.../blog/2020-07-26-apdex-and-skywalking/index.md | 2 +
.../blog/2020-08-03-skywalking8-1-release/index.md | 5 +-
.../2020-08-11-observability-at-scale/index.md | 2 +
.../blog/2020-10-29-skywalking8-2-release/index.md | 4 +-
content/blog/2020-11-21-apachecon-keynote/index.md | 3 +-
.../blog/2020-11-21-apachecon-obs-apisix/index.md | 3 +-
.../index.md | 3 +-
.../2020-11-21-apachecon-obs-sourcemarker/index.md | 3 +-
.../blog/2020-11-21-apachecon-obs-storage/index.md | 3 +-
.../index.md | 4 +-
.../index.md | 2 +-
.../blog/2021-01-01-300-contributors-mark/index.md | 2 +
.../2021-01-17-elastic-change-license/index.md | 2 +-
.../index.md | 2 +-
.../blog/2021-02-01-e2e-verifier-design/index.md | 3 +-
.../2021-02-07-infrastructure-monitoring/index.md | 2 +-
.../index.md | 3 +-
.../blog/2021-03-16-continuous-feedback/index.md | 4 +-
.../blog/2021-05-09-OpenSearch-supported/index.md | 2 +-
.../blog/2021-07-12-500-contributors-mark/index.md | 2 +
.../blog/2021-08-01-skywalking-8-intro/index.md | 3 +-
.../index.md | 4 +-
.../index.md | 2 -
.../2021-12-06-extend-skywalking-with-nbb/index.md | 2 +-
.../apisix-integrate-skywalking-plugin.md | 3 +-
.../index.md | 2 -
.../index.md | 2 +-
.../index.md | 3 +-
.../index.md | 3 +-
.../2022-01-28-volcengine-violates-aplv2/index.md | 2 +-
.../index.md | 2 +-
.../index.md | 3 +-
.../index.md | 5 +-
.../index.md | 7 +-
.../index.md | 9 +-
.../index.md | 9 +-
content/blog/2023-01-03-aliyun-copy-page/index.md | 2 +-
.../blog/2023-03-12-skywalking-aws-s3-eks/index.md | 2 +
.../2023-03-13-skywalking-aws-dynamodb/index.md | 2 +
.../index.md | 4 +-
.../index.md | 3 +-
.../blog/2023-06-13-celebrate-22k-stars/index.md | 2 +
.../index.md | 1 -
.../index.md | 3 +-
content/blog/2023-08-13-hashicorp-bsl/index.md | 2 +
.../2023-10-18-skywalking-toolkit-trace/index.md | 3 +-
.../index.md | 2 +-
.../index.md | 2 +-
.../index.md | 4 +-
.../index.md | 2 +-
.../index.md | 2 +
.../index.md | 2 +-
.../index.md | 2 +-
.../blog/2024-05-13-skywalking-10-release/index.md | 8 +-
.../blog/2024-06-04-banyandb-0.6-release/index.md | 3 +-
.../index.md | 3 +-
.../2024-12-09-skywalking-async-profiler/index.md | 2 +
.../index.md | 2 +
.../index.md | 5 +-
.../index.md | 8 +-
.../blog/2026-03-08-agentic-vibe-coding/index.md | 10 +-
.../index.md | 6 +-
.../index.md | 7 +-
.../index.md | 5 +-
.../2026-04-05-virtual-genai-monitoring/index.md | 6 +-
content/blog/2026-04-08-traceql/index.md | 5 +-
.../index.md | 8 +-
.../index.md | 4 +-
.../index.md | 3 +-
content/blog/e2e-design/index.md | 3 +-
.../index.md | 7 +-
.../index.md | 4 +-
.../index.md | 3 +-
.../obs-service-mesh-vm-with-sw-and-als/index.md | 2 +-
content/blog/skywalking8-4-release/index.md | 4 +-
.../index.md | 3 +-
content/images/home/horizon-dashboard.png | Bin 0 -> 1220577 bytes
content/images/home/horizon-login-bg.jpg | Bin 0 -> 629133 bytes
content/images/home/horizon-logs.png | Bin 0 -> 329665 bytes
content/images/home/horizon-metrics.png | Bin 0 -> 271605 bytes
content/images/home/horizon-rbac.png | Bin 0 -> 241153 bytes
content/images/home/horizon-trace.png | Bin 0 -> 385936 bytes
content/team/_index.md | 113 +-
data/committee.yml | 67 +
data/quickstart.yml | 34 +
data/releases.yml | 4 -
data/stars.yml | 241 ++++
layouts/blog/baseof.html | 38 +
layouts/blog/list.html | 43 +
layouts/contributors/baseof.html | 23 +
layouts/docs/baseof.html | 151 +++
layouts/downloads/baseof.html | 31 +
layouts/downloads/list.html | 43 +
layouts/events/baseof.html | 22 +
layouts/events/list.html | 50 +
layouts/events/single.html | 54 +
layouts/partials/hooks/head-end.html | 4 +
layouts/partials/navbar.html | 80 ++
layouts/partials/toc.html | 59 +
layouts/projectdoc/baseof.html | 24 +
layouts/shortcodes/contributors-search.html | 107 +-
layouts/shortcodes/contributors.html | 89 +-
layouts/shortcodes/downloads-block.html | 298 ++--
layouts/shortcodes/team-count.html | 1 +
layouts/shortcodes/team-members.html | 37 +
layouts/shortcodes/users.html | 42 +-
layouts/team/baseof.html | 23 +
layouts/team/list.html | 16 +
layouts/users/baseof.html | 21 +
layouts/users/list.html | 21 +
layouts/zh/baseof.html | 38 +
layouts/zh/list.html | 43 +
package.json | 7 +-
scripts/stars.js | 115 ++
static/images/asf-oakleaf.svg | 9 +
130 files changed, 3627 insertions(+), 1515 deletions(-)
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index 13e47b9945b..87c484f18f2 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -43,6 +43,10 @@ jobs:
- name: Build
run: npm run build-with-docs
+ env:
+ # Used by scripts/stars.js to lift the GitHub API rate limit
+ # from 60/hr (anonymous) to 1,000/hr.
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Deploy
uses: peaceiris/actions-gh-pages@v4
diff --git a/assets/scss/_custom_contributors.scss b/assets/scss/_custom_contributors.scss
index 08ad5a2ef13..6a2bc456ea9 100644
--- a/assets/scss/_custom_contributors.scss
+++ b/assets/scss/_custom_contributors.scss
@@ -1,149 +1,93 @@
+// =====================================================================
+// /contributors page — light theme. Keeps the filter mechanic from
+// script-search.html: rows hidden until .item-wrapper gets .show, and the
+// matched login's contribution/ranking divs are revealed by JS.
+// (uses $ink/$body/$muted/$line/$brand/$brand-grad from _custom_home.scss)
+// =====================================================================
.td-contributors {
- .page-title {
- margin-bottom: 0.5em;
- }
- .head-wrapper {
- display: flex;
- line-height: 40px;
- font-size: 15px;
- font-weight: bold;
- background-color: #f6f8fa;
- padding: 0 0.4em;
- position: sticky;
+ background: #fff;
- .title {
- flex: 1;
- padding: 0.6em;
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
+ }
- &:nth-child(1) {
- flex: 1.8;
- }
+ .contrib-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ .page-title {
+ font-size: 36px; font-weight: 800; color: $ink; letter-spacing: -.6px;
+ margin: 0 0 10px; border: 0; padding: 0;
+ }
+ .current-contributor {
+ color: $brand;
+ a { color: $brand; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
+ .icon-github { font-size: .9em; } }
}
+ p { font-size: 15px; color: $body; line-height: 1.6; margin: 0; a { color: $brand; } }
}
+ .contrib-wrap { max-width: 980px; padding-top: 28px; padding-bottom: 64px; }
+
+ // table header
+ .head-wrapper {
+ display: flex; align-items: center;
+ background: #f7faff; border: 1px solid $line; border-radius: 10px 10px 0 0;
+ font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: $muted;
+ .title { flex: 1; padding: 12px 16px; &:nth-child(1) { flex: 1.8; } }
+ }
+
+ // rows
.contributors-wrapper {
- font-size: 14px;
- display: flex;
- flex-direction: column;
+ border: 1px solid $line; border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden;
.item-wrapper {
- min-height: 55px;
- flex-wrap: wrap;
- padding: 0 0.4em;
display: none;
-
- &.show {
- display: flex;
-
- &:nth-child(even) {
- background-color: #f6f8fa;
- }
- }
+ align-items: center;
+ min-height: 54px;
+ border-top: 1px solid $line;
+ &:first-child { border-top: 0; }
+ &.show { display: flex; }
+ &.show:nth-of-type(even) { background: #fafcfe; }
+ &.show:hover { background: #f3f7fc; }
.item {
- flex: 1;
- padding: 0 0.6em;
- display: flex;
- align-items: center;
-
- &:nth-child(1) {
- flex: 0.9;
- }
-
- .total {
- font-size: 16px;
- }
-
- .item-text {
- display: flex;
- align-items: center;
-
- img {
- margin-right: 0.3rem;
- }
- }
+ flex: 1.8; padding: 0 16px; display: flex; align-items: center;
+ .item-text { display: flex; align-items: center; gap: 10px; }
+ .name { font-size: 14px; font-weight: 600; color: $ink; }
+ img { border-radius: 6px; }
}
}
.item-contributors {
- flex: 1;
-
+ flex: 2;
.d-flex {
- align-items: center;
- .dn {
- display: none!important;
- }
+ display: flex; align-items: center;
+ .dn { display: none !important; } // name span lives in the hero, hidden here
> div {
- line-height: 55px;
- padding: 0 0.6em;
- display: none;
- width: 50%;
+ display: none; // revealed by JS for the matched login
+ width: 50%; padding: 0 16px; line-height: 54px;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 13.5px; color: $body;
}
- }
-
- ul, li {
- margin: 0;
- padding: 0;
- }
-
- li {
- position: relative;
- border: 1px solid #eaecef;
- border-radius: 4px;
- padding: 4px 7px;
- box-shadow: #f8f9fa 0px 1px 2px 0px;
-
- a {
- color: #2c3e50;
- }
-
- .contributions-count {
- color: #999;
- }
-
- &.active {
- color: #1e80ff;
- background: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
- box-shadow: 0px 2px 6px #ABD1F2;
-
- .contributions-count {
- color: #666;
- }
- }
-
+ > div:nth-of-type(odd) { color: $ink; font-weight: 700; } // contributions
}
}
-
}
.search-tips {
- text-align: center;
- padding: 3em;
- font-size: 16px;
- color: #999;
+ text-align: center; padding: 3em 1em; font-size: 15px; color: $muted;
}
- @media (max-width: 992px) {
+ @media (max-width: 768px) {
+ .head-wrapper .title:nth-child(1) { flex: 2.4; }
.contributors-wrapper {
- .head-wrapper {
- .title {
- &:nth-child(1) {
- flex: 3.8;
- }
- }
- }
- img {
- display: none;
- }
-
- .item-contributors {
- .item {
- &:nth-child(1) {
- flex: 1.8;
- }
- }
- }
+ .item-wrapper .item { flex: 2.4; }
+ img { display: none; }
}
}
}
-
diff --git a/assets/scss/_custom_docs.scss b/assets/scss/_custom_docs.scss
index 5ca8fe9c7f8..1ee4d81c184 100644
--- a/assets/scss/_custom_docs.scss
+++ b/assets/scss/_custom_docs.scss
@@ -430,3 +430,359 @@
}
}
}
+
+// =====================================================================
+// /docs landing — light card grid (new design)
+// (uses $ink/$body/$muted/$line/$brand/$brand-grad from _custom_home.scss)
+// =====================================================================
+.td-docs-landing {
+ background: #fff;
+
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
+ }
+
+ .docs-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ h1 { font-size: 40px; font-weight: 800; color: $ink; letter-spacing: -.8px; margin: 0 0 12px; border: 0; padding: 0; }
+ p { font-size: 16px; color: $body; line-height: 1.6; margin: 0 0 18px; max-width: 680px; a { color: $brand; } }
+ }
+ .docs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+ .docs-chip {
+ display: inline-flex; align-items: center; padding: 5px 12px;
+ border: 1px solid $line; border-radius: 999px; background: #fff;
+ font-size: 12.5px; font-weight: 600; color: $body; text-decoration: none;
+ &:hover { background: #eef5fd; color: #2c6cb0; border-color: #d6e4f5; }
+ }
+
+ .docs-wrap { max-width: 1200px; padding-top: 28px; padding-bottom: 64px; }
+ .docs-cat {
+ font-size: 22px; font-weight: 800; color: $ink; border: 0; padding: 0;
+ margin: 34px 0 16px; scroll-margin-top: 80px;
+ }
+ .docs-grid {
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
+ grid-auto-rows: 1fr;
+ }
+ .docs-card {
+ display: flex; flex-direction: column;
+ background: #fff; border: 1px solid $line; border-radius: 14px; padding: 16px 18px;
+ transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
+ &:hover { box-shadow: 0 16px 40px -22px rgba(17,24,39,.24); border-color: #d6e4f5; transform: translateY(-2px); }
+ }
+ .docs-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; min-height: 30px; }
+ .docs-icon { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; }
+ .docs-card-title { margin: 0; font-size: 14.5px; font-weight: 700; color: $ink; line-height: 1.25; flex: 1; }
+ .docs-stars {
+ display: inline-flex; align-items: center; gap: 4px;
+ padding: 2px 8px; border-radius: 999px;
+ background: #f3f6fa; border: 1px solid $line; color: $body;
+ font-size: 11.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-decoration: none;
+ svg { width: 11px; height: 11px; color: #e3b341; }
+ &:hover { border-color: #d6e4f5; color: $ink; }
+ }
+ .docs-card-desc {
+ font-size: 12.5px; color: $body; line-height: 1.55; margin: 0 0 14px; flex: 1;
+ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+ p { margin: 0; }
+ }
+ .docs-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+ .docs-btn {
+ display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
+ border-radius: 8px; background: $brand-grad; color: #fff; font-size: 13px; font-weight: 700;
+ text-decoration: none; box-shadow: 0 6px 16px -8px rgba(55,136,208,.5);
+ &:hover { filter: brightness(1.05); }
+ }
+ .docs-gh {
+ display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: auto;
+ border: 1px solid $line; border-radius: 8px; color: $body;
+ svg { width: 15px; height: 15px; }
+ &:hover { border-color: #d6e4f5; color: $ink; background: #f7faff; }
+ }
+ .docs-ver {
+ position: relative;
+ summary {
+ cursor: pointer; list-style: none; height: 32px; display: inline-flex; align-items: center; gap: 5px;
+ padding: 0 12px; border: 1px solid $line; border-radius: 8px;
+ font-size: 12.5px; font-weight: 600; color: $body;
+ &::-webkit-details-marker { display: none; }
+ &::after { content: "▾"; font-size: 9px; color: $muted; }
+ &:hover { background: #f7faff; border-color: #d6e4f5; }
+ }
+ ul {
+ position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
+ list-style: none; margin: 0; padding: 6px; min-width: 160px; max-height: 240px; overflow-y: auto;
+ background: #fff; border: 1px solid $line; border-radius: 10px;
+ box-shadow: 0 18px 40px -16px rgba(17,24,39,.32);
+ li a {
+ display: block; padding: 6px 10px; border-radius: 6px;
+ font-size: 12.5px; color: $body; text-decoration: none;
+ &:hover { background: #eef5fd; color: $brand; }
+ }
+ }
+ }
+ .docs-card--note {
+ justify-content: center; background: #f7faff; color: $body; font-size: 12.5px;
+ p { margin: 0; }
+ }
+}
+
+@media (max-width: 1024px) { .td-docs-landing .docs-grid { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 640px) {
+ .td-docs-landing {
+ .docs-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
+ .docs-grid { grid-template-columns: 1fr; }
+ }
+}
+
+// =====================================================================
+// Docs reading pages (projectdoc) — light reskin layered on Docsy.
+// Keeps the theme's structural rules (sticky sidebar, scroll, mobile
+// toggle, version switch); only recolors / refines to the brand theme.
+// =====================================================================
+.project-doc {
+ background: #fff;
+
+ // --- left sidebar ---
+ .td-sidebar {
+ background: #fbfcfe;
+ border-right: 1px solid $line;
+ &::-webkit-scrollbar { width: 9px; }
+ &::-webkit-scrollbar-thumb { background: #d7dde6; border-radius: 6px; border: 3px solid #fbfcfe; }
+ }
+ .td-sidebar .description-wrapper {
+ border-bottom: 1px solid $line;
+ h5 { color: $ink; font-weight: 700; }
+ }
+ .version-wrapper {
+ display: flex; align-items: center; gap: 8px;
+ margin: 14px 0 18px; padding: 0;
+ font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: $muted;
+ }
+ .version-select {
+ flex: 1; min-width: 0; margin: 0;
+ -webkit-appearance: none; -moz-appearance: none; appearance: none;
+ padding: 8px 32px 8px 12px;
+ font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
+ color: $ink; background-color: #fff;
+ border: 1px solid #DADDE0; border-radius: 8px; cursor: pointer; outline: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%238a93a3' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
+ transition: border-color .12s ease, box-shadow .12s ease;
+ &:hover { border-color: #c3d4e6; }
+ &:focus { border-color: #9cc3ea; box-shadow: 0 0 0 3px rgba(55, 136, 208, .12); }
+ }
+ .commit-id { color: $muted; border-top: 1px solid $line; }
+
+ // sidebar nav tree
+ .td-sidebar-nav__section-title { color: $ink; font-weight: 700; }
+ .td-sidebar-link {
+ color: $body; border-radius: 6px;
+ &:hover { color: $brand; }
+ }
+ a.td-sidebar-link.active,
+ .td-sidebar-link__page.active,
+ .td-sidebar-nav .active > a {
+ color: $brand !important;
+ font-weight: 700;
+ }
+ .td-sidebar__search {
+ .td-search-input, input {
+ border: 1px solid #DADDE0; border-radius: 8px; background: #fff;
+ color: $ink; padding: 7px 12px;
+ &::placeholder { color: $muted; }
+ }
+ }
+
+ // --- content (prose scale adopted from the design's reading theme) ---
+ .td-content {
+ color: $body; font-size: 16px; line-height: 1.7; max-width: 820px;
+ h1 { color: $ink; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px; margin: 0 0 12px; }
+ h2 { color: $ink; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; margin: 40px 0 12px; border-bottom: 1px solid $line; padding-bottom: .3em; }
+ h3 { color: $ink; font-size: 17px; font-weight: 700; margin: 28px 0 8px; }
+ h4, h5 { color: $ink; }
+ p { margin: 12px 0; }
+ a { color: $brand; border-bottom: 1px solid rgba(55,136,208,.35); &:hover { color: #2c6cb0; } }
+ ul, ol { padding-left: 22px; }
+ li { margin: 6px 0; color: $body; }
+
+ // callout — blockquotes & admonitions
+ blockquote, .alert, .book-hint {
+ margin: 20px 0; padding: 14px 16px;
+ background: #eef5fd; border: 0; border-left: 3px solid $brand;
+ border-radius: 0 10px 10px 0; color: $body;
+ p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; }
+ }
+
+ // inline code chip
+ p code, li code, table code, a code {
+ background: #f3f6fa; color: #b4316b; border: 1px solid $line;
+ padding: 1px 6px; border-radius: 4px; font-size: .9em;
+ }
+
+ // fenced code — dark block (plain monochrome, like the design), with room
+ // for the injected language label + copy button (see projectdoc/baseof.html)
+ .highlight {
+ position: relative;
+ background: #0f131a; border: 1px solid #1c2230; border-radius: 10px;
+ margin: 20px 0; overflow: hidden;
+ pre { margin: 0; padding: 16px; padding-top: 30px; background: transparent !important; overflow-x: auto; }
+ code, code span { color: #e8ecf3 !important; background: transparent !important; border: 0 !important; }
+ }
+ .highlight .sw-code-bar {
+ position: absolute; top: 0; left: 0; right: 0; height: 30px;
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 0 12px; border-bottom: 1px solid #1c2230;
+ .lang { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: #818a9c; text-transform: uppercase; letter-spacing: .06em; }
+ .copy { border: 1px solid #2e3645; background: #1c222d; color: #b6bdcc; font-size: 11px; padding: 2px 8px; border-radius: 5px; cursor: pointer;
+ &:hover { color: #fff; border-color: #3a4456; } }
+ }
+
+ // tables
+ table {
+ border: 1px solid $line; border-radius: 8px; overflow: hidden;
+ thead tr th { background: #f7faff; color: $ink; border-bottom: 1px solid $line; }
+ tbody tr td { border-color: $line; color: $body; }
+ }
+ img { border-radius: 8px; }
+ hr { border: 0; border-top: 1px solid $line; margin: 32px 0; }
+ }
+
+ // --- right TOC ("On this page") ---
+ .td-toc {
+ border-left: 1px solid $line;
+ padding-left: 18px;
+ font-size: 13px;
+
+ .td-toc-label {
+ font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
+ color: $muted; margin: 4px 0 10px;
+ }
+
+ .td-page-meta a {
+ display: inline-flex; align-items: center; gap: 6px;
+ color: $muted; font-weight: 600; font-size: 12.5px;
+ &:hover { color: $brand; }
+ }
+
+ #TableOfContents {
+ border-left: 0;
+ ul { padding-left: 0; list-style: none; margin: 0; }
+ li { line-height: 1.35; padding: 0; }
+ a {
+ display: block; position: relative;
+ padding: 5px 0 5px 12px; margin-left: -1px;
+ color: $muted; font-weight: 500;
+ border-left: 2px solid transparent;
+ transition: color .12s ease, border-color .12s ease;
+ &:hover { color: $ink; }
+ &.active { color: $brand; font-weight: 700; border-left-color: $brand; }
+ }
+ ul ul a { padding-left: 24px; font-size: 12.5px; font-weight: 400; }
+ ul ul ul a { padding-left: 36px; }
+ }
+ }
+
+ // mobile menu toggle button
+ .doc-menu-button {
+ background: $brand-grad; color: #fff; border: none;
+ box-shadow: 0 8px 22px -8px rgba(55,136,208,.6);
+ }
+}
+
+// =====================================================================
+// /docs landing — "Get started" quickstarts (Showcase + SkyWalking)
+// =====================================================================
+.td-docs-landing {
+ .qs-section { border-bottom: 1px solid $line; }
+ .qs-section .container { max-width: 1200px; padding: 8px 24px 36px; }
+ .qs-head {
+ font-size: 24px; font-weight: 800; color: $ink; border: 0; padding: 0;
+ margin: 0 0 18px; letter-spacing: -.4px;
+ }
+ .qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
+ .qs-card {
+ display: flex; flex-direction: column;
+ border: 1px solid $line; border-radius: 14px; background: #fff; overflow: hidden;
+ scroll-margin-top: 84px; // clear the sticky navbar when jumped to via #anchor
+ transition: box-shadow .2s ease, border-color .2s ease;
+ }
+ // selected state when the homepage "Quick start" jumps to this card
+ .qs-card:target {
+ border-color: $brand;
+ box-shadow: 0 0 0 3px rgba(55, 136, 208, .25), 0 16px 40px -22px rgba(17, 24, 39, .3);
+ }
+ .qs-card-top {
+ padding: 18px 20px 14px;
+ background: linear-gradient(180deg, #f7faff, #fff);
+ min-height: 132px; // equal height so the terminals start at the same y
+ h3 { margin: 10px 0 6px; font-size: 18px; font-weight: 700; color: $ink; border: 0; padding: 0; }
+ p { margin: 0; font-size: 13.5px; color: $body; line-height: 1.55; }
+ }
+ .qs-badge {
+ display: inline-flex; align-items: center;
+ font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
+ padding: 2px 9px; border-radius: 999px;
+ background: #eef1f5; color: #5b6573; border: 1px solid #e1e6ee;
+ &.is-rec { background: #e6f6ec; color: #1a7f43; border-color: #bfe8cd; }
+ }
+
+ // terminal
+ .qs-term { margin: 0 16px; }
+ .qs-tabs {
+ display: flex; gap: 4px; padding: 6px; background: #11161f; border-radius: 10px 10px 0 0;
+ }
+ .qs-tab {
+ border: 0; cursor: pointer; background: transparent;
+ color: #9aa6b8; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 7px;
+ &:hover { color: #e8ecf3; }
+ &.active { background: #232c3a; color: #fff; }
+ }
+ .qs-pane { display: none; &.active { display: block; } }
+ .qs-tabs + .qs-pane.active, .qs-tabs ~ .qs-pane { border-radius: 0 0 10px 10px; }
+ .qs-pane {
+ background: #0f131a; border-radius: 10px; overflow: hidden;
+ }
+ .qs-pane-bar {
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 8px 12px; border-bottom: 1px solid #1c2230;
+ }
+ .qs-lang {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px;
+ color: #818a9c; text-transform: uppercase; letter-spacing: .06em;
+ }
+ .qs-copy {
+ border: 1px solid #2e3645; background: #1c222d; color: #b6bdcc;
+ font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
+ &:hover { color: #fff; border-color: #3a4456; }
+ }
+ // numbered, auto-wrapping code lines
+ .qs-code-lines {
+ padding: 12px 0; min-height: 116px; box-sizing: border-box;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 12.5px; line-height: 1.7; color: #e8ecf3;
+ }
+ .qs-line { display: flex; align-items: flex-start; padding: 0 14px; }
+ .qs-ln {
+ flex: 0 0 26px; text-align: right; padding-right: 14px;
+ color: #5b6373; user-select: none; -webkit-user-select: none;
+ }
+ // code wraps; the line number stays put (one number per logical line)
+ .qs-code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
+ .qs-docs {
+ margin: 14px 16px 16px; align-self: flex-start;
+ margin-top: auto; // pin to bottom so card bottoms align
+ font-size: 13px; font-weight: 600; color: $brand; text-decoration: none;
+ &:hover { text-decoration: underline; }
+ }
+}
+
+@media (max-width: 860px) {
+ .td-docs-landing .qs-grid { grid-template-columns: 1fr; }
+}
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index e5036f9194c..0fd1376c3f6 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -1,517 +1,1120 @@
+// =====================================================================
+// Home page — light theme, full re-layout
+// Palette: primary #3788D0 (gradient #479EEB→#3788D0), ink #1F1F20,
+// body #5b6573, muted #909094, border #e6e9ee, surface #fff, page #f7f9fc
+// =====================================================================
+
+$ink: #1F1F20;
+$body: #4b5563;
+$muted: #8a93a3;
+$line: #e6e9ee;
+$brand: #3788D0;
+$brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
+
.sky-btn {
- padding: 10px 23px;
+ padding: 11px 22px;
height: 46px;
- font-size: 16px;
- color: #1F1F20;
- border-radius: 6px;
- background: #FFFFFF;
+ font-size: 15px;
+ color: $ink;
+ border-radius: 8px;
+ background: #fff;
border: 1px solid #DADDE0;
box-sizing: border-box;
cursor: pointer;
+ transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
+
+ &:hover { box-shadow: 0 6px 18px rgba(17, 24, 39, .10); transform: translateY(-1px); }
&.primary {
color: #fff;
- background: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
- box-shadow: 0px 2px 6px #ABD1F2;
+ background: $brand-grad;
+ box-shadow: 0 6px 18px rgba(55, 136, 208, .35);
border: none;
+ .hint { font-size: 12px; opacity: .85; margin-left: 6px; }
}
- &.small {
- border-radius: 4px;
- height: 30px;
- padding: 6px 12px;
- font-size: 12px;
- }
-}
-
-.dividing-line-border {
- display: inline-block;
- width: 60%;
- height: 1px;
- background: -webkit-linear-gradient(left, #fff -4%, #ccc 50%, #fff 100%);
+ &.small { border-radius: 4px; height: 30px; padding: 6px 12px; font-size: 12px; }
}
.td-home {
+ position: relative;
+ background: #fff;
+
+ // Fixed Horizon canyon backdrop — stays put while scrolling; revealed by the
+ // transparent hero, then covered by the opaque .home-below as it scrolls up.
+ &::before {
+ content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
+ background:
+ linear-gradient(118deg,
+ rgba(255,255,255,0.93) 0%,
+ rgba(255,255,255,0.84) 42%,
+ rgba(248,251,255,0.58) 72%,
+ rgba(248,251,255,0.40) 100%),
+ url("/images/home/horizon-login-bg.jpg") center center / cover no-repeat;
+ }
+
main {
- li {
- list-style: none;
- }
+ li { list-style: none; }
+ ul { padding: 0; }
+ }
- ul {
- padding: 0;
- }
+ .container { max-width: 1200px; }
- img {
- &:hover {
- cursor: auto;
- }
+ .eyebrow {
+ display: inline-block;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: .14em;
+ text-transform: uppercase;
+ color: $brand;
+ margin-bottom: 12px;
+ }
+
+ .section-head {
+ text-align: center;
+ max-width: 720px;
+ margin: 0 auto 44px;
+ h2 { font-size: 34px; font-weight: 700; color: $ink; border: 0; padding: 0; margin: 0 0 14px; line-height: 1.2; }
+ p { font-size: 17px; color: $body; line-height: 1.6; margin: 0; }
+ }
+
+ .home-section { padding: 72px 0; }
+
+ // ---------- HERO (text + topology shot, one viewport) ----------
+ // Override the theme's 8rem top padding on the first section and
+ // size the hero to fill the viewport below the fixed 64px navbar.
+ main section.home-hero { padding-top: calc(4rem + 18px); }
+ .home-hero {
+ position: relative; z-index: 1;
+ padding: calc(4rem + 18px) 0 28px;
+ min-height: 100vh;
+ box-sizing: border-box;
+ display: flex; flex-direction: column; justify-content: center;
+ background: transparent; // reveals the fixed canyon backdrop on .td-home
+ > .container { position: relative; z-index: 1; }
+ }
+ // everything after the hero rides on a solid surface, but its top edge
+ // FADES from transparent into white so the fixed canyon transitions
+ // smoothly into the content instead of a hard white edge while scrolling.
+ .home-below {
+ position: relative; z-index: 1;
+ background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 180px);
+ }
- &:not([data-nolightbox="true"]) {
- &:hover {
- cursor: pointer;
- }
+ // footer rides above the fixed backdrop too (theme footer is opaque)
+ footer { position: relative; z-index: 1; }
+
+ // ASF oak-leaf "seal" — sits where the eyebrow used to, top-left of the hero
+ .hero-seal {
+ position: relative; display: block; z-index: 1;
+ width: 92px; height: 92px; flex: 0 0 92px;
+ // 50% larger visually, without changing layout footprint; grows DOWN from
+ // its top edge so it clears the fixed navbar and can overlap the headline.
+ transform: rotate(-7deg) scale(1.5);
+ transform-origin: left top;
+ margin-top: 6px;
+ color: $muted; opacity: .72;
+ transition: opacity .15s ease, transform .15s ease;
+ &:hover { opacity: 1; transform: rotate(-7deg) scale(1.55); }
+ svg { width: 100%; height: 100%; display: block; }
+ .seal-ring { fill: none; stroke: currentColor; stroke-width: 2; }
+ .seal-ring--thin { stroke-width: 1; }
+ .seal-text {
+ fill: currentColor;
+ font-family: "Space Grotesk", -apple-system, sans-serif;
+ font-size: 9px; font-weight: 600; letter-spacing: 1.4px;
+ }
+ // leaf sits inside the inner ring (r70 → ~140 dia in a 200 viewBox)
+ .hero-seal-leaf {
+ position: absolute; top: 50%; left: 50%;
+ width: 30px; transform: translate(-50%, -50%);
+ filter: grayscale(1); opacity: .9;
+ }
+ }
+ .hero-top {
+ display: flex; align-items: center; justify-content: space-between;
+ gap: 24px; flex-wrap: wrap;
+ margin-bottom: 26px;
+ }
+ .home-hero-grid {
+ display: grid;
+ grid-template-columns: 0.92fr 1.08fr;
+ gap: 48px;
+ align-items: center;
+ }
+ .hero-eyebrow {
+ display: inline-flex; align-items: center; gap: 8px;
+ padding: 6px 13px;
+ border: 1px solid #d6e4f5;
+ background: #eef5fd;
+ color: #2c6cb0;
+ border-radius: 999px;
+ font-size: 13px; font-weight: 600;
+ text-decoration: none;
+ .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
+ &:hover { background: #e3eefb; }
+ }
+ .home-hero-text {
+ text-align: left;
+ position: relative; z-index: 2; // headline can overlap the (larger) seal
+ h1 {
+ font-size: 46px; line-height: 1.1; font-weight: 800; color: $ink;
+ letter-spacing: -1.1px; margin: 0 0 16px; border: 0; padding: 0;
+ .accent {
+ background: linear-gradient(120deg, #3788D0, #E7136C 120%);
+ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
}
-
- .title {
- font-weight: 600;
- font-size: 32px;
- line-height: 38px;
- text-align: center;
- color: #1F1F20;
- border: none;
- padding-top: 2.3rem;
- margin-bottom: 3rem;
+ .lead { font-size: 16px; line-height: 1.6; color: $body; margin: 0; max-width: 520px; }
+ }
+ .hero-cta {
+ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px;
+ }
+ .github-pill {
+ display: inline-flex; align-items: center; gap: 7px;
+ height: 46px; padding: 0 18px;
+ border: 1px solid #DADDE0; border-radius: 8px;
+ color: $ink; font-size: 15px; text-decoration: none; background: #fff;
+ &:hover { box-shadow: 0 6px 18px rgba(17,24,39,.10); }
+ .icon-github { font-size: 17px; }
+ }
+ .hero-stats {
+ display: flex; gap: 36px; margin: 0; padding: 0; align-items: flex-start;
+ li { display: flex; flex-direction: column; text-align: right; }
+ li a { display: flex; flex-direction: column; text-decoration: none; }
+ strong {
+ font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
+ font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
+ background: linear-gradient(120deg, #3788D0 10%, #E7136C 120%);
+ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+ font-feature-settings: "tnum";
}
+ span { font-size: 11.5px; color: $muted; margin-top: 5px; letter-spacing: .02em; }
}
- .pt-64 {
- padding-top: 64px;
+ // ---------- CAPABILITIES ----------
+ .cap-grid {
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
+ }
+ .cap-card {
+ display: flex; flex-direction: column; // so "Learn more" bottom-aligns across cards
+ background: #fff;
+ border: 1px solid $line;
+ border-radius: 12px;
+ padding: 24px 22px;
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ &:hover { box-shadow: 0 16px 40px -18px rgba(17,24,39,.30); transform: translateY(-3px); border-color: #d6e4f5; }
+ h3 { font-size: 18px; font-weight: 700; color: $ink; margin: 16px 0 8px; border: 0; padding: 0; line-height: 1.3; }
+ p { font-size: 14px; color: $body; line-height: 1.6; margin: 0 0 16px; flex: 1; }
+ a { font-size: 14px; font-weight: 600; color: $brand; text-decoration: none; margin-top: auto; &:hover { text-decoration: underline; } }
+ }
+ .cap-tag {
+ display: inline-block; padding: 4px 11px; border-radius: 999px;
+ font-size: 12px; font-weight: 700; letter-spacing: .04em;
+ &.tracing { background: #fdecde; color: #c2580d; }
+ &.metrics { background: #e2f1fd; color: #1d6fb8; }
+ &.logging { background: #f0e7fd; color: #7c3aed; }
+ &.profiling { background: #def5e7; color: #11814b; }
}
- .center {
- text-align: center;
+ // ---------- HERO MAIN SHOT (topology) ----------
+ .hero-shot {
+ position: relative;
+ margin: 0;
+ border-radius: 14px;
+ border: 1px solid $line;
+ background: #0f131a;
+ overflow: hidden;
+ box-shadow: 0 26px 60px -24px rgba(17, 24, 39, .45);
+ img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: left top; }
+ }
+ .shot-bar {
+ display: flex; align-items: center; gap: 6px;
+ height: 34px; padding: 0 14px;
+ background: #141923; border-bottom: 1px solid #232a37;
+ i { width: 10px; height: 10px; border-radius: 50%; background: #3a4456; }
+ i:nth-child(1){ background:#ef4444; } i:nth-child(2){ background:#eab308; } i:nth-child(3){ background:#22c55e; }
+ em { margin-left: 10px; font-style: normal; font-size: 12px; color: #818a9c; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
}
- .community-box {
- color: #909094;
+ // ---------- FLOWING WIDGET ROW (trace / logs / metrics / rbac) ----------
+ .widget-row {
display: flex;
- justify-content: center;
- align-items: center;
- padding: 8px;
- max-width: 664px;
- margin: 60px auto 0;
- border: 1px solid #DADDE0;
- border-radius: 12px;
- font-size: 16px;
+ flex-wrap: wrap;
+ gap: 16px;
+ margin-top: 26px;
+ }
+ .widget-card {
+ flex: 1 1 200px;
+ min-height: 190px;
+ position: relative;
+ margin: 0;
+ border-radius: 14px;
+ border: 1px solid $line;
+ background: #fff;
+ overflow: hidden;
+ box-shadow: 0 10px 30px -20px rgba(17, 24, 39, .35);
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ display: flex; flex-direction: column;
+ &:hover { box-shadow: 0 22px 48px -24px rgba(17, 24, 39, .4); transform: translateY(-3px); border-color: #d6e4f5; }
+ }
- .community {
- color: #fff;
- padding: 0 6px;
- height: 24px;
- line-height: 24px;
- background: linear-gradient(101.75deg, #E7136C 0.73%, #FF9900 100.73%);
- border-radius: 8px;
+ // widget card with a real screenshot
+ .widget-card.is-shot {
+ img {
+ position: absolute; inset: 0;
+ width: 100%; height: 100%;
+ object-fit: cover; object-position: left top;
+ background: #0f131a;
}
-
- .count {
- font-weight: 800;
- background-image: -webkit-linear-gradient(left, #E7136C, #FF9900 25%, #E7136C 50%, #FF9900 75%, #E7136C);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
- -webkit-background-size: 200% 100%;
- -webkit-animation: colorAnimation 4s infinite linear;
- font-size: 18px;
+ figcaption {
+ position: absolute; left: 0; right: 0; bottom: 0;
+ padding: 16px 18px 14px;
+ background: linear-gradient(180deg, rgba(15,19,26,0) 0%, rgba(15,19,26,.88) 72%);
+ color: #fff;
+ strong { display: block; font-size: 16px; font-weight: 700; }
+ span { display: block; font-size: 13px; color: rgba(255,255,255,.82); margin-top: 3px; }
}
+ }
- .mr-10 {
- margin-right: 10px;
+ // placeholder widget card (screenshot to come)
+ .widget-card.is-empty {
+ background: radial-gradient(120% 80% at 50% 0%, #f3f7fc 0%, #fff 70%);
+ .widget-ph {
+ flex: 1; display: grid; place-items: center;
+ color: #b6c2d3;
+ svg { width: 44px; height: 44px; }
}
-
- @keyframes colorAnimation {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: -100% 0;
- }
+ figcaption {
+ padding: 16px 18px 18px;
+ border-top: 1px solid $line;
+ strong { display: block; font-size: 16px; font-weight: 700; color: $ink; }
+ span { display: block; font-size: 13px; color: $muted; margin-top: 3px; }
}
}
- .introduction {
- text-align: center;
- .title-skywalking {
- font-size: 50px;
+ // ---------- ECOSYSTEM ----------
+ .eco-grid {
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px;
+ }
+ .eco-card {
+ display: flex; flex-direction: column;
+ background: #fff; border: 1px solid $line; border-radius: 14px; padding: 22px 20px;
+ text-decoration: none;
+ position: relative; overflow: hidden;
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ // accent strip in the project color
+ &::before {
+ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+ background: var(--eco, #{$brand}); opacity: .85;
}
-
- .desc {
- padding-bottom: 40px;
- font-size: 18px;
+ &:hover {
+ box-shadow: 0 18px 44px -22px rgba(17,24,39,.3); transform: translateY(-3px);
+ border-color: color-mix(in srgb, var(--eco, #{$brand}) 40%, #{$line});
}
-
- .btn-demo {
- background-color: #e8f3ff5e;
+ .eco-ic {
+ width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px;
+ display: grid; place-items: center;
+ color: var(--eco, #{$brand});
+ background: color-mix(in srgb, var(--eco, #{$brand}) 12%, #fff);
+ border: 1px solid color-mix(in srgb, var(--eco, #{$brand}) 22%, #{$line});
+ svg { width: 20px; height: 20px; }
}
+ h4 { font-size: 16px; font-weight: 700; color: $ink; margin: 0 0 8px; padding: 0; border: 0; }
+ p { font-size: 13.5px; color: $body; line-height: 1.6; margin: 0 0 14px; flex: 1; }
+ .eco-more { font-size: 13px; font-weight: 600; color: var(--eco, #{$brand}); margin-top: auto; }
}
-
- // ui banner mobile
- #uiMobileContainer {
- padding: 4rem 0;
- 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;
- }
-
- &[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;
- }
- }
+ .formats {
+ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
+ padding-top: 8px;
+ }
+ .formats-label { font-size: 13px; color: $muted; font-weight: 600; margin-right: 6px; }
+ .format-chip {
+ display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
+ border: 1px solid $line; border-radius: 999px; background: #fff;
+ font-size: 13px; color: $body;
}
- // 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;
-
- }
-
- &.active {
- background: #f2f3f5;
- border-radius: 5px;
- }
- }
+ // ---------- EVENTS (reuses .feature-content list) ----------
+ .feature-content {
+ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
+ li {
+ flex: 1 1 30%; min-width: 260px;
+ background: #fff; border: 1px solid $line; border-radius: 12px;
+ padding: 22px 22px 18px;
+ transition: box-shadow .18s ease, transform .18s ease;
+ &:hover { box-shadow: 0 16px 40px -18px rgba(17,24,39,.25); transform: translateY(-2px); }
+ a { text-decoration: none; }
+ h5 { font-size: 16px; color: $ink; margin: 0 0 8px; line-height: 1.35; }
+ .date { color: $muted; font-size: 13px; display: block; margin-bottom: 10px; }
+ .txt, p { color: $body; font-size: 14px; line-height: 1.55; }
}
-
- .banner-content-inner {
- width: calc(100% - 200px);
- position: relative;
+ }
+ .events-content li:hover h5 { color: $brand; }
+
+ // ---------- GET STARTED ----------
+ .get-started {
+ position: relative; overflow: hidden;
+ border-radius: 18px; padding: 48px 40px;
+ background:
+ radial-gradient(700px 320px at 85% -10%, rgba(255,255,255,.22), transparent 60%),
+ radial-gradient(600px 320px at 0% 120%, rgba(231,19,108,.28), transparent 60%),
+ $brand-grad;
+ color: #fff; text-align: center;
+ margin-bottom: 28px;
+ box-shadow: 0 24px 60px -28px rgba(55,136,208,.6);
+ .gs-eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
+ text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 10px;
}
+ h2 { color: #fff; border: 0; padding: 0; font-size: 32px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 12px; }
+ p { color: rgba(255,255,255,.92); font-size: 16.5px; line-height: 1.6; max-width: 600px; margin: 0 auto 24px;
+ a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.5); } }
+ .gs-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+ .sky-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
+ .sky-btn:not(.primary) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); color: #fff; &:hover { background: rgba(255,255,255,.24); } }
+ .sky-btn.primary { background: #fff; color: $brand; box-shadow: 0 8px 22px rgba(0,0,0,.18); &:hover { background: #fff; filter: brightness(.98); } }
+ }
- .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;
- }
+ // community cards (Questions / Slack / Twitter)
+ .community-cards {
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
+ }
+ .community-card {
+ display: flex; flex-direction: column;
+ background: #fff; border: 1px solid $line; border-radius: 14px; padding: 22px 20px;
+ text-decoration: none;
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ &:hover { box-shadow: 0 18px 44px -22px rgba(17,24,39,.28); transform: translateY(-3px); border-color: #d6e4f5; }
+ .cc-ic {
+ width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px;
+ display: grid; place-items: center; color: $brand;
+ background: #eef5fd; border: 1px solid #d6e4f5;
+ .iconfont { font-size: 19px; }
}
+ h4 { font-size: 16px; font-weight: 700; color: $ink; margin: 0 0 8px; padding: 0; border: 0; }
+ p { font-size: 13.5px; color: $body; line-height: 1.6; margin: 0 0 14px; flex: 1; }
+ .cc-mail { color: $brand; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }
+ .cc-more { font-size: 13px; font-weight: 600; color: $brand; margin-top: auto; }
}
+ .center { text-align: center; }
+ // demo dropdown
.demo-wrapper {
.dropdown-item {
- color: #888;
- font-size: 14px;
- padding: 0.25rem 1.2rem;
+ color: #888; font-size: 14px; padding: .3rem 1.2rem;
+ &:nth-last-child(-n + 2) { font-size: 15px; }
+ a { font-weight: 600; display: block; color: $brand; }
+ }
+ .icon-arrow-up-right { font-size: 10px; position: relative; top: -3px; color: $brand; }
+ }
+}
- &:nth-last-child(-n + 2) {
- font-size: 16px;
- }
+// ---------- responsive ----------
+@media (max-width: 992px) {
+ .td-home {
+ // iOS/Android handle fixed backgrounds poorly — revert to scroll
+ .home-hero { background-attachment: scroll, scroll; }
+ .home-hero-grid { grid-template-columns: 1fr; gap: 36px; }
+ .home-hero-text h1 { font-size: 42px; }
+ .cap-grid { grid-template-columns: 1fr 1fr; }
+ .eco-grid { grid-template-columns: 1fr 1fr; }
+ .community-cards { grid-template-columns: 1fr; }
+ .widget-card { flex-basis: 45%; min-height: 220px; }
+ }
+}
- a {
- font-weight: 600;
- display: block;
- }
- }
+@media (max-width: 576px) {
+ .td-home {
+ .home-section { padding: 48px 0; }
+ .home-hero { padding: 40px 0; }
+ .home-hero-text h1 { font-size: 34px; }
+ .section-head h2 { font-size: 27px; }
+ .cap-grid, .eco-grid { grid-template-columns: 1fr; }
+ .hero-stats { gap: 26px; }
+ .get-started { padding: 32px 22px; }
+ .feature-content li { flex-basis: 100%; }
+ .widget-card { flex-basis: 100%; min-height: 200px; }
+ }
+}
- .icon-arrow-up-right {
- font-size: 10px;
- position: relative;
- top: -4px;
- color: #3176d9;
- }
+// =====================================================================
+// Top navbar — adopt the landing page's light / button aesthetic
+// (global: applies to every page for a consistent header)
+// =====================================================================
+.td-navbar {
+ background: rgba(255, 255, 255, .9);
+ -webkit-backdrop-filter: saturate(180%) blur(10px);
+ backdrop-filter: saturate(180%) blur(10px);
+ border-bottom: 1px solid #e6e9ee;
+ box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
+
+ .navbar-brand {
+ font-weight: 800;
+ color: #1F1F20;
+ .text-uppercase { color: #1F1F20; }
}
- .solution-wrapper {
- margin-right: -15px;
- margin-left: -15px;
- background-image: url("/images/home/bg.png");
- background-position: bottom;
- background-attachment: fixed;
- background-size: 100%;
- background-repeat: no-repeat;
- padding-bottom: 50px;
+ // nav items as rounded, button-like links (matches .sky-btn family)
+ .nav-link {
+ color: #4b5563;
+ font-weight: 600;
+ font-size: 15px;
+ padding: 8px 12px !important;
+ border-radius: 8px;
+ transition: background .15s ease, color .15s ease;
+ &:hover { background: #eef5fd; color: #1F1F20; }
+ }
+ .nav-item .nav-link.active,
+ .nav-link span.active {
+ color: #2c6cb0;
+ }
+ .nav-item .nav-link.active {
+ background: #eef5fd;
+ box-shadow: inset 0 -2px 0 #3788D0;
+ }
- .solution-content {
- display: flex;
- justify-content: space-between;
+ // CN badge on the 中文资料 item — match brand blue
+ .navbar-nav-wrapper .nav-item:last-child .nav-link::before {
+ background: #eef5fd;
+ color: #2c6cb0;
+ font-weight: 700;
+ }
- li {
- width: 32%;
- text-align: center;
- padding: 0 22px;
- }
+ // dropdowns — rounded, soft shadow like the landing cards
+ .dropdown-menu {
+ border-radius: 10px;
+ box-shadow: 0 16px 40px -18px rgba(17, 24, 39, .35);
+ padding: 8px;
+ .dropdown-item {
+ border-radius: 6px;
+ color: #4b5563;
+ font-weight: 500;
+ padding: 7px 10px;
+ &:hover { background: #eef5fd; color: #1F1F20; }
}
- .flex-center {
- justify-content: center;
- }
- }
-
- .feature-wrapper {
- background: radial-gradient(19.06% 49.81% at 50% 51.68%, rgba(62, 162, 255, 0.3) 0%, rgba(0, 117, 255, 0) 100%), radial-gradient(23.2% 22.47% at 38.96% 38.47%, rgba(255, 245, 0, 0.2) 0%, rgba(20, 255, 0, 0) 100%), radial-gradient(20.52% 46.35% at 50% 50%, rgba(120, 190, 255, 0.2) 0%, rgba(135, 212, 255, 0) 100%), radial-gradient(31.08% 29.74% at 63.15% 58.96%, rgba(232, 78, 161, 0.2) 0%, rgba(239, 177, 255, 0) 100%);
-
- .feature-content {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
-
- li {
- position: relative;
- background: #FFFFFF;
- width: 32.4%;
- margin-bottom: 1.25%;
- padding: 10px 23px 15px;
- text-align: center;
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- .img-box {
- border: 1px solid #eee;
- border-radius: 4px;
- padding: 10px 8px 25px 0;
- overflow: hidden;
- position: relative;
- }
-
- .text {
- position: absolute;
- text-align: center;
- width: 100%;
- bottom: 0;
- left: 0;
- color: #666;
- font-size: 12px;
- font-weight: 600;
- }
- }
+ }
- .img-vs {
- padding-bottom: 5%;
- }
+ // Algolia docsearch button — render as a rounded pill
+ .DocSearch-Button {
+ border-radius: 999px;
+ border: 1px solid #DADDE0;
+ background: #fff;
+ height: 38px;
+ padding: 0 14px;
+ box-shadow: none;
+ &:hover { box-shadow: 0 6px 18px rgba(17, 24, 39, .10); border-color: #c9d3e0; }
+ .DocSearch-Button-Keys { display: none; }
+ }
+ // offline-search fallback input as a pill
+ .td-search-input {
+ border: 1px solid #DADDE0;
+ border-radius: 999px;
+ height: 38px;
+ padding: 0 14px;
+ background: #fff;
+ }
+}
- .keywords-wrapper {
- min-height: 180px;
+// =====================================================================
+// Events page — timeline of headline + truncated message cards (no photos)
+// =====================================================================
+.td-events {
+ background: #fff;
- span {
- color: #DADDE0;
- font-weight: 600;
- font-size: 20px;
- margin: 6px 12px;
- display: inline-block;
- }
- }
- }
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
}
- .events-wrapper {
- background: radial-gradient(99.06% 49.81% at 50% 61.68%, rgba(62, 162, 255, 0.3) 0%, rgba(0, 117, 255, 0) 50%),
- radial-gradient(23.2% 22.47% at 38.96% 38.47%, rgba(255, 245, 0, 0.2) 0%, rgba(20, 255, 0, 0) 100%),
- radial-gradient(20.52% 46.35% at 50% 50%, rgba(120, 190, 255, 0.2) 0%, rgba(135, 212, 255, 0) 100%),
- radial-gradient(21.08% 29.74% at 63.15% 58.96%, rgba(232, 78, 161, 0.2) 0%, rgba(239, 177, 255, 0) 100%);
+ .ev-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ h1 { font-size: 40px; font-weight: 800; color: $ink; letter-spacing: -.8px; margin: 0 0 12px; border: 0; padding: 0; }
+ p { font-size: 16px; color: $body; line-height: 1.6; margin: 0; max-width: 640px; a { color: $brand; } }
+ }
- .date {
- color: #888;
- font-size: 13px;
- padding-bottom: 12px;
+ .ev-wrap { max-width: 920px; padding-top: 36px; padding-bottom: 64px; }
+
+ .ev-group { margin-bottom: 8px; }
+ .ev-year {
+ margin: 22px 0 14px;
+ span {
+ display: inline-block;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 13px; font-weight: 700; color: $ink;
+ background: #eef5fd; border: 1px solid #d6e4f5; color: #2c6cb0;
+ border-radius: 999px; padding: 4px 14px;
}
+ }
- .txt {
- color: #2c3e50
+ .ev-timeline {
+ position: relative;
+ list-style: none; margin: 0; padding: 0 0 0 4px;
+ &::before {
+ content: ""; position: absolute; top: 6px; bottom: 6px; left: 19px;
+ width: 2px; background: $line;
}
}
-
- .run-wrapper {
+ .ev-item {
position: relative;
+ padding-left: 52px;
+ margin-bottom: 14px;
+ list-style: none;
+ }
+ .ev-dot {
+ position: absolute; left: 12px; top: 20px;
+ width: 16px; height: 16px; border-radius: 50%;
+ background: #fff; border: 3px solid $brand;
+ box-shadow: 0 0 0 4px #eef5fd;
+ }
+ .ev-item.is-release .ev-dot { border-color: #E7136C; box-shadow: 0 0 0 4px #fdeaf2; }
+
+ .ev-card {
+ display: block;
+ background: #fff; border: 1px solid $line; border-radius: 12px;
+ padding: 16px 20px; text-decoration: none;
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ &:hover { box-shadow: 0 16px 40px -20px rgba(17,24,39,.30); transform: translateY(-2px); border-color: #d6e4f5; }
+ }
+ .ev-meta {
+ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
+ }
+ .ev-date {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 12px; color: $muted; font-weight: 600;
+ }
+ .ev-tag {
+ font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
+ padding: 2px 8px; border-radius: 999px;
+ background: #eef1f5; color: #5b6573;
+ &.is-release { background: #fdeaf2; color: #c01f68; }
+ }
+ .ev-author {
+ font-size: 12px; color: $muted; margin-left: auto;
+ a { color: $muted; text-decoration: none; &:hover { color: $brand; } }
+ }
+ .ev-title {
+ font-size: 18px; font-weight: 700; color: $ink; margin: 0 0 6px;
+ border: 0; padding: 0; line-height: 1.35;
+ }
+ .ev-desc {
+ font-size: 14px; color: $body; line-height: 1.6; margin: 0 0 10px;
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+ }
+ .ev-more { font-size: 13px; font-weight: 600; color: $brand; }
+ .ev-card:hover .ev-title { color: #2c6cb0; }
+
+ .ev-pagination {
+ margin-top: 32px; display: flex; justify-content: center;
+ .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
+ .page-link {
+ display: inline-flex; align-items: center; justify-content: center;
+ min-width: 36px; height: 36px; padding: 0 10px;
+ border: 1px solid #DADDE0; border-radius: 8px; background: #fff;
+ color: $body !important; font-size: 13px; text-decoration: none;
+ &:hover { background: #eef5fd; }
+ }
+ .page-item.active .page-link { background: $brand; border-color: $brand; color: #fff !important; }
+ }
+}
- .run-content {
- position: relative;
- color: #fff;
- height: 350px;
- background-image: url("/images/home/bg.png");
- background-position: 0 150px;
- background-size: cover;
- background-repeat: no-repeat;
- border-radius: 8px;
- display: flex;
- justify-content: center;
- align-items: center;
-
- .releases {
- color: #fff;
- display: inline-block;
- text-decoration: underline;
- }
+@media (max-width: 576px) {
+ .td-events {
+ .ev-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
+ .ev-item { padding-left: 44px; }
+ .ev-author { margin-left: 0; width: 100%; }
+ }
+}
- .content-box {
- position: relative;
- z-index: 2;
- }
+// ---------- Events detail page (sidebar timeline + article) ----------
+.td-events {
+ .ev-detail {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: calc(4rem + 28px) 24px 64px;
+ display: grid;
+ grid-template-columns: 288px 1fr;
+ gap: 40px;
+ align-items: start;
+ }
- .mask {
- border-radius: 8px;
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- filter: invert(52%) sepia(35%) saturate(1455%) hue-rotate(184deg) brightness(90%) contrast(85%);
- background: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
- mix-blend-mode: multiply;
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
- }
+ // left sidebar — timeline of all events
+ .ev-side {
+ position: sticky;
+ top: calc(4rem + 16px);
+ align-self: start;
+ border: 1px solid $line;
+ border-radius: 12px;
+ background: #fff;
+ overflow: hidden;
+ max-height: calc(100vh - 5rem - 32px);
+ display: flex;
+ flex-direction: column;
+ }
+ .ev-side-head {
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid $line;
+ background: #f7faff;
+ a { font-size: 13px; font-weight: 700; color: $ink; text-decoration: none; &:hover { color: $brand; } }
+ .ev-side-count {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 11px; color: #2c6cb0; background: #eef5fd;
+ border: 1px solid #d6e4f5; border-radius: 999px; padding: 1px 8px;
+ }
+ }
+ .ev-side-list {
+ overflow-y: auto;
+ padding: 8px 8px 12px;
+ position: relative;
+ }
+ .ev-side-year {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 11px; font-weight: 700; color: $muted;
+ padding: 10px 8px 4px;
+ position: sticky; top: 0; background: #fff;
+ }
+ .ev-side-item {
+ display: flex; align-items: flex-start; gap: 9px;
+ padding: 7px 10px; border-radius: 8px;
+ text-decoration: none; color: $body;
+ &:hover { background: #f3f7fc; }
+ .ev-side-dot {
+ flex: 0 0 8px; width: 8px; height: 8px; margin-top: 5px;
+ border-radius: 50%; background: #fff; border: 2px solid #c7d3e2;
+ }
+ &.is-release .ev-side-dot { border-color: #f0a8c6; }
+ .ev-side-text { display: flex; flex-direction: column; min-width: 0; }
+ .ev-side-date {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 10.5px; color: $muted;
+ }
+ .ev-side-title {
+ font-size: 12.5px; line-height: 1.35; color: $body;
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+ }
+ &.is-current {
+ background: #eef5fd;
+ box-shadow: inset 2px 0 0 $brand;
+ .ev-side-dot { background: $brand; border-color: $brand; }
+ .ev-side-title { color: #2c6cb0; font-weight: 700; }
}
}
- .tuned-wrapper {
- background: none;
+ // right article
+ .ev-article {
+ max-width: 820px;
+ margin: 0;
+ padding: 0;
+ }
+ .ev-article-meta {
+ display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+ margin-bottom: 14px;
+ time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: $muted; }
+ .ev-article-author { font-size: 13px; color: $muted; b { color: $body; } a { color: $brand; } }
}
+ .ev-article-title {
+ font-size: 38px; font-weight: 800; color: $ink; letter-spacing: -.6px;
+ line-height: 1.18; margin: 0 0 12px; border: 0; padding: 0;
+ }
+ .ev-article-lead {
+ font-size: 17px; color: $body; line-height: 1.6; margin: 0 0 24px;
+ padding-bottom: 20px; border-bottom: 1px solid $line;
+ }
+ .ev-article-body { font-size: 15.5px; color: #374151; line-height: 1.75; }
+}
- .tuned-content {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- word-break: break-word;
+@media (max-width: 900px) {
+ .td-events {
+ .ev-detail { grid-template-columns: 1fr; gap: 24px; padding-top: calc(4rem + 18px); }
+ .ev-side { position: static; max-height: 320px; order: 2; }
+ .ev-article { order: 1; }
+ .ev-article-title { font-size: 30px; }
+ }
+}
- li {
- width: 24.5%;
- padding: 0 20px 20px;
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+// =====================================================================
+// Blog list — post box widgets (labels + title + preview)
+// =====================================================================
+.td-blog {
+ background: #fff;
- img {
- border-radius: 8px;
- }
- }
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
}
-}
-@media (max-width: 576px) {
- .td-home {
- #arch {
- padding: 0 15px;
- }
+ .blog-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ h1 { font-size: 40px; font-weight: 800; color: $ink; letter-spacing: -.8px; margin: 0 0 12px; border: 0; padding: 0; }
+ p { font-size: 16px; color: $body; line-height: 1.6; margin: 0; max-width: 660px; }
+ }
- main {
- .title {
- font-size: 30px;
- }
+ .blog-wrap { max-width: 1200px; padding-top: 32px; padding-bottom: 64px; }
+ .blog-year {
+ font-size: 14px; font-weight: 700; color: $muted; border: 0; padding: 0;
+ margin: 28px 0 16px; letter-spacing: .02em;
+ }
- .solution-title {
- margin-bottom: 1.2rem;
- }
+ .blog-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 18px;
+ }
+ .blog-card {
+ position: relative;
+ display: flex; flex-direction: column;
+ background: #fff; border: 1px solid $line; border-radius: 14px;
+ padding: 18px 20px 16px;
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ &:hover { box-shadow: 0 18px 44px -22px rgba(17,24,39,.3); transform: translateY(-3px); border-color: #d6e4f5; }
+ }
+ .blog-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+ .blog-label {
+ font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
+ padding: 2px 9px; border-radius: 999px;
+ background: #eef1f5; color: #5b6573; border: 1px solid #e1e6ee;
+ }
+ // label colors
+ .blog-label[data-label="Release"] { background:#e6f6ec; color:#1a7f43; border-color:#bfe8cd; }
+ .blog-label[data-label="Tracing"] { background:#fdecde; color:#c2580d; border-color:#f6d4ba; }
+ .blog-label[data-label="Metrics"] { background:#e2f1fd; color:#1d6fb8; border-color:#c4e1f7; }
+ .blog-label[data-label="Logging"] { background:#f0e7fd; color:#7c3aed; border-color:#ddccfa; }
+ .blog-label[data-label="Profiling"] { background:#def5e7; color:#11814b; border-color:#bce8cf; }
+ .blog-label[data-label="Storage"] { background:#e0f7fa; color:#0e7490; border-color:#bdeaf1; }
+ .blog-label[data-label="Agents"] { background:#e8eafd; color:#4f46e5; border-color:#d3d7fa; }
+ .blog-label[data-label="Cloud Native"] { background:#e6f3fe; color:#0369a1; border-color:#c5e4fb; }
+ .blog-label[data-label="AI"] { background:#fde8f3; color:#be2069; border-color:#f8cbe2; }
+ .blog-label[data-label="Community"] { background:#eef1f5; color:#5b6573; border-color:#e1e6ee; }
+ .blog-label[data-label="Engineering"] { background:#fef3e2; color:#b45309; border-color:#fbe0bb; }
+
+ .blog-card-title {
+ font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 10px;
+ border: 0; padding: 0;
+ a {
+ color: $ink; text-decoration: none;
+ &::after { content: ""; position: absolute; inset: 0; } // stretched link
+ &:hover { color: #2c6cb0; }
}
+ }
+ .blog-card-preview {
+ font-size: 13.5px; color: $body; line-height: 1.6; margin: 0 0 16px;
+ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+ flex: 1;
+ }
+ .blog-card-foot {
+ display: flex; align-items: center; gap: 10px;
+ font-size: 12px; color: $muted;
+ border-top: 1px solid $line; padding-top: 12px;
+ .blog-author {
+ margin-left: auto; position: relative; z-index: 1;
+ p { margin: 0; display: inline; }
+ a { color: $muted; text-decoration: none; &:hover { color: $brand; } }
+ }
+ }
- .dividing-line-border {
- width: 90%;
+ .blog-pagination {
+ margin-top: 36px; display: flex; justify-content: center;
+ .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
+ .page-link {
+ display: inline-flex; align-items: center; justify-content: center;
+ min-width: 36px; height: 36px; padding: 0 10px;
+ border: 1px solid #DADDE0; border-radius: 8px; background: #fff;
+ color: $body !important; font-size: 13px; text-decoration: none;
+ &:hover { background: #eef5fd; }
}
+ .page-item.active .page-link { background: $brand; border-color: $brand; color: #fff !important; }
+ }
+}
- .username-wrapper {
- .username {
- li {
- font-size: 14px;
- margin-bottom: 2px;
+@media (max-width: 992px) { .td-blog .blog-grid { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 600px) {
+ .td-blog {
+ .blog-grid { grid-template-columns: 1fr; }
+ .blog-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
+ }
+}
- &:nth-child(odd) {
- padding: 0;
- }
+// =====================================================================
+// Navbar right-side dropdowns — Apache (new ASF oak-leaf) + CN blog
+// =====================================================================
+.td-navbar {
+ // right group as a flex row so search / Apache line up side by side
+ // (.navbar-nav forces flex-direction:column, so set row explicitly)
+ .search-input-box {
+ width: auto;
+ display: flex !important; flex-direction: row !important;
+ align-items: center; gap: 10px;
+ }
+ .search-input-box .link { float: none; height: auto; line-height: normal; padding-left: 0; }
- &:nth-child(even) {
- padding: 0 3px;
- }
- }
- }
- }
+ .sw-navdd-toggle {
+ display: inline-flex !important; align-items: center; gap: 6px;
+ padding: 8px 12px; border-radius: 8px;
+ color: #4b5563 !important; font-weight: 600; font-size: 14px;
+ &:hover { background: #eef5fd; color: #1F1F20 !important; }
+ }
+ // keep the logos SMALL so they never blow up the dropdown height
+ .sw-navdd-asf { height: 16px; width: auto; display: inline-block; }
+ .sw-navdd-cn {
+ display: inline-grid; place-items: center;
+ width: 18px; height: 18px; border-radius: 5px;
+ background: linear-gradient(101.75deg, #E7136C 0%, #FF9900 100%);
+ color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
+ }
- .tuned-content {
- li.twitter-wrapper {
- p {
- min-height: inherit;
- }
- }
+ // shared dropdown panel
+ .dropdown-menu.sw-navmenu {
+ left: auto; right: 0; top: 50px;
+ width: 264px; padding: 8px;
+ border: 1px solid #e6e9ee; border-radius: 12px;
+ box-shadow: 0 18px 44px -18px rgba(17, 24, 39, .32);
+ background: #fff;
+ max-height: 72vh; overflow-y: auto;
+ &.sw-navmenu--wide { width: 304px; }
+ }
+ .sw-navmenu-head {
+ display: flex; align-items: center; gap: 10px;
+ padding: 6px 10px 12px; margin-bottom: 6px;
+ border-bottom: 1px solid #e6e9ee;
+ img { height: 26px; width: auto; display: block; }
+ .sw-navmenu-cn {
+ display: inline-grid; place-items: center;
+ width: 28px; height: 28px; border-radius: 8px;
+ background: linear-gradient(101.75deg, #E7136C 0%, #FF9900 100%);
+ color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
+ strong { display: block; font-size: 13px; color: #1F1F20; font-weight: 700; }
+ span { display: block; font-size: 11px; color: #8a93a3; }
+ }
+ .sw-navmenu-item {
+ display: flex; align-items: center; gap: 8px;
+ padding: 7px 10px; border-radius: 8px;
+ color: #4b5563; font-size: 13px; font-weight: 500; text-decoration: none;
+ span { flex: 1; }
+ em { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; color: #aab2c0; }
+ i { font-size: 10px; color: #aab2c0; }
+ &:hover { background: #eef5fd; color: #1F1F20; }
+ }
+}
- .feature-wrapper {
- .img-vs {
- padding-bottom: 0 !important;
- }
- }
+// =====================================================================
+// Downloads page — light card grid, latest-prominent + collapsible older
+// =====================================================================
+.td-downloads {
+ background: #fff;
+
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
+ }
+ .dl-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; color: $body; }
+
+ .dl-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ }
+ .dl-hero-grid {
+ display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end;
+ h1 { font-size: 40px; font-weight: 800; color: $ink; letter-spacing: -.8px; margin: 0 0 12px; border: 0; padding: 0; }
+ p { font-size: 16px; color: $body; line-height: 1.6; margin: 0 0 18px; max-width: 600px; strong { color: $ink; } }
+ }
+ .dl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+ .dl-chip {
+ display: inline-flex; align-items: center; padding: 5px 12px;
+ border: 1px solid $line; border-radius: 999px; background: #fff;
+ font-size: 12.5px; font-weight: 600; color: $body; text-decoration: none;
+ &:hover { background: #eef5fd; color: #2c6cb0; border-color: #d6e4f5; }
+ }
+ .dl-latest {
+ background: #fff; border: 1px solid $line; border-radius: 14px; padding: 16px 18px;
+ box-shadow: 0 16px 40px -22px rgba(17,24,39,.28);
+ }
+ .dl-latest-head { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: $muted; margin-bottom: 10px; }
+ .dl-latest-item {
+ display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+ padding: 7px 0; border-bottom: 1px solid $line; text-decoration: none;
+ &:last-of-type { border-bottom: 0; }
+ .dl-latest-name { font-size: 13.5px; color: $ink; font-weight: 600; }
+ .dl-latest-ver { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: $brand; font-weight: 700; }
+ &:hover .dl-latest-name { color: $brand; }
+ }
+ .dl-latest-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+ .dl-tag {
+ font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
+ background: #eef1f5; color: #5b6573; border: 1px solid #e1e6ee;
+ }
- .solution-content, .feature-content, .community-content, .tuned-content {
- flex-wrap: wrap;
+ .dl-wrap { padding-top: 28px; padding-bottom: 64px; }
- li {
- width: 100% !important;
- margin-bottom: 12px !important;
- }
+ .dl-cat {
+ font-size: 22px; font-weight: 700; color: $ink; border: 0; padding: 0;
+ margin: 32px 0 16px; scroll-margin-top: 80px;
+ }
+ .dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-rows: 1fr; }
+ .dl-grid--docker { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
+
+ .dl-card {
+ display: flex; flex-direction: column;
+ background: #fff; border: 1px solid $line; border-radius: 12px; padding: 14px;
+ transition: box-shadow .18s ease, border-color .18s ease;
+ &:hover { box-shadow: 0 14px 34px -22px rgba(17,24,39,.22); border-color: #d6e4f5; }
+ }
+ .dl-card-head {
+ display: flex; gap: 9px; align-items: center; margin-bottom: 8px;
+ min-height: 44px; // fits icon + up to a 2-line title, so SOURCE aligns across cards
+ }
+ .dl-icon {
+ flex: 0 0 26px; width: 26px; height: 26px;
+ object-fit: contain; display: block;
+ }
+ .dl-card-title { margin: 0; font-size: 14px; font-weight: 700; color: $ink; line-height: 1.25; }
+ .dl-card-desc {
+ margin: 0 0 10px; font-size: 12px; color: $body; line-height: 1.5;
+ min-height: 36px; // reserve 2 lines so blocks below stay aligned
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+ }
+
+ // Source / Distribution — latest visible; older in a top-right dropdown
+ .dl-rel {
+ margin-top: 10px;
+ & + .dl-rel { margin-top: 10px; padding-top: 10px; border-top: 1px solid $line; }
+ }
+ .dl-rel-head {
+ display: flex; align-items: center; justify-content: space-between;
+ margin-bottom: 6px; height: 22px; // fixed so '+N more' presence doesn't shift rows
+ }
+ .dl-rel-label {
+ font-size: 10px; font-weight: 700; letter-spacing: .06em;
+ text-transform: uppercase; color: $muted;
+ }
+ .dl-more {
+ position: relative;
+ summary {
+ cursor: pointer; list-style: none; user-select: none;
+ display: inline-flex; align-items: center; gap: 5px;
+ font-size: 11.5px; font-weight: 600; color: $brand; padding: 2px 4px; border-radius: 6px;
+ &::-webkit-details-marker { display: none; }
+ &::after { content: "▾"; color: $brand; font-size: 9px; transition: transform .15s ease; }
+ &:hover { background: #eef5fd; }
+ }
+ &[open] summary { background: #eef5fd; }
+ &[open] summary::after { transform: rotate(180deg); }
+ }
+ // older versions open as an overlay dropdown anchored to the toggle
+ .dl-dd-list {
+ position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
+ list-style: none; margin: 0; padding: 6px;
+ width: 300px; max-width: 78vw; max-height: 260px; overflow-y: auto;
+ background: #fff; border: 1px solid $line; border-radius: 10px;
+ box-shadow: 0 18px 40px -16px rgba(17, 24, 39, .35);
+ }
+ .dl-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 6px 8px;
+ padding: 7px 9px; border-radius: 6px;
+ &.is-latest { background: #f0f7ec; }
+ &:not(.is-latest):hover { background: #f7f9fc; }
+ }
+ .dl-row-ver {
+ grid-column: 1;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
+ font-weight: 700; color: $ink; display: inline-flex; align-items: center; gap: 6px;
+ }
+ .dl-row-date { grid-column: 2; text-align: right; }
+ .dl-latesttag {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
+ color: #1a7f43; background: #e6f6ec; border: 1px solid #bfe8cd; border-radius: 999px; padding: 0 6px;
+ }
+ .dl-row-date { font-size: 11px; color: $muted; }
+
+ .dl-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+ .dl-link {
+ display: inline-flex; align-items: center; gap: 4px;
+ text-decoration: none; border-radius: 6px; font-weight: 600;
+ &--main {
+ padding: 4px 10px; font-size: 12px; color: #fff; background: $brand-grad; border: none;
+ box-shadow: 0 4px 12px -6px rgba(55,136,208,.5);
+ svg { width: 11px; height: 11px; }
+ &:hover { filter: brightness(1.05); }
}
- .solution-content {
- margin-bottom: 0;
+ &--mini { padding: 2px 7px; color: $brand; background: #eef5fd; border: 1px solid #d6e4f5; font-size: 11px; }
+ &--sig {
+ padding: 2px 7px; color: $muted; background: #fff; border: 1px solid $line;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 500;
+ &:hover { color: $ink; border-color: #c9d3e0; }
}
}
-}
-@media (max-width: 768px) {
- .td-home {
- #uiMobileContainer {
- display: block;
- }
+ .dl-note {
+ font-size: 13px; color: $body; line-height: 1.6;
+ background: #f7faff; border: 1px solid #e3ecf7; border-radius: 10px; padding: 12px 14px;
+ }
- .ui-container {
- display: none;
- }
+ .dl-card--docker {
+ h5 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: $ink; }
+ p { margin: 0 0 14px; font-size: 12.5px; color: $body; line-height: 1.5; flex: 1; }
+ .dl-link--main { align-self: flex-start; }
}
-}
-@media (min-width: 1660px) {
- .td-home {
- .feature-wrapper {
- .feature-content {
- li {
- width: 32.5%;
- }
- }
+ // "Verify the releases" markdown block
+ .verify {
+ max-width: 1200px; margin: 8px auto 0; padding: 28px 0 0;
+ h2 { font-size: 22px; color: $ink; border: 0; padding: 0; }
+ .code-wrapper {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px;
+ align-items: stretch;
+ // each column is a flex column so the code block bottom-aligns
+ > div { display: flex; flex-direction: column; }
+ }
+ h5 { font-size: 14px; color: $ink; margin: 0 0 8px; }
+ p { color: $body; }
+ a { color: $brand; }
+
+ // Chroma renders an inline light background on <pre>; keep it light and
+ // make the (uncolored) command text dark so it stays readable.
+ .highlight {
+ border: 1px solid $line; border-radius: 10px; overflow: hidden;
+ margin: 6px 0 0; margin-top: auto; // push to the bottom so both align
+ }
+ pre {
+ margin: 0; padding: 14px 16px; overflow-x: auto;
+ background: #f6f8fb !important;
+ min-height: 104px; // equal height: 1-line vs 2-line blocks match
+ display: flex; flex-direction: column; justify-content: center;
+ }
+ code, pre code {
+ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+ font-size: 13px; color: #243044;
}
}
}
+@media (max-width: 900px) {
+ .td-downloads {
+ .dl-hero-grid { grid-template-columns: 1fr; gap: 24px; }
+ .dl-grid, .dl-grid--docker { grid-template-columns: 1fr; }
+ .dl-hero { padding-top: calc(4rem + 18px); }
+ .dl-hero-grid h1 { font-size: 30px; }
+ .verify .code-wrapper { grid-template-columns: 1fr; }
+ }
+}
diff --git a/assets/scss/_custom_team.scss b/assets/scss/_custom_team.scss
index afa35f1c779..654d5efbd94 100644
--- a/assets/scss/_custom_team.scss
+++ b/assets/scss/_custom_team.scss
@@ -1,268 +1,159 @@
+// =====================================================================
+// Team page — light theme, consistent with home/events/blog/downloads
+// (uses $ink/$body/$muted/$line/$brand/$brand-grad from _custom_home.scss)
+// =====================================================================
.td-team {
- h2 {
- border-bottom: 0;
- }
-
- .hide {
- display: none;
- }
+ background: #fff;
- .show {
- display: block;
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
}
- .fa-angle-right {
- color: #1F1F20;
- }
-
- .total {
- display: inline-block;
- font-weight: normal;
- font-size: 26px;
- padding: 5px 6px;
- color: #909094;
- text-align: center;
+ .team-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ h1 { font-size: 40px; font-weight: 800; color: $ink; letter-spacing: -.8px; margin: 0 0 12px; border: 0; padding: 0; }
+ p { font-size: 16px; color: $body; line-height: 1.6; margin: 0; max-width: 680px; a { color: $brand; font-weight: 600; } }
}
- .skywalking-team {
- text-align: center;
- font-size: 16px;
+ .team-wrap { max-width: 1200px; padding-top: 32px; padding-bottom: 64px; }
- .text-box {
- max-width: 1000px;
- margin: 0 auto;
+ // --- Members section (data-driven from data/committee.yml) ---
+ .team-roles { max-width: 1120px; margin: 0 auto; }
+ .team-role {
+ margin-top: 36px;
+ h3 {
+ display: flex; align-items: center; gap: 10px;
+ font-size: 20px; font-weight: 800; color: $ink; border: 0; padding: 0; margin: 0 0 16px;
}
-
- .appreciate {
- position: relative;
- max-width: 800px;
- min-height: 240px;
- overflow: hidden;
- padding: 4px 24px 60px;
- background: radial-gradient(50% 31.04% at 50% 100%, rgba(0, 134, 255, 0.15) 0%, rgba(0, 134, 255, 0) 98.96%);
- border: 1px solid #DADDE0;
- box-sizing: border-box;
- border-radius: 6px;
- margin: 40px auto 20px;
-
- .deco-img {
- position: absolute;
- bottom: 10px;
- left: 0;
- width: 100%;
-
- &:hover {
- cursor: default;
- }
- }
+ .role-count {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 13px;
+ color: #2c6cb0; background: #eef5fd; border: 1px solid #d6e4f5; border-radius: 999px; padding: 1px 9px;
}
}
-
- .table-wrapper {
- display: flex;
- justify-content: space-between;
- overflow: hidden;
-
- .table-box {
- border-radius: 6px;
- border: solid 1px #dfdfdf;
- width: 49.3%;
-
- .icon-twitter {
- color: #3176d9;
- }
- }
-
- table {
- width: 100%;
- margin: 0;
-
- thead tr {
- border-bottom: 1px solid #dfdfdf;
- }
-
- th, td, tr {
- border: 0;
- }
+ .member-grid {
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
+ }
+ .member {
+ display: flex; align-items: center; justify-content: space-between; gap: 10px;
+ padding: 10px 12px; background: #fff; border: 1px solid $line; border-radius: 10px;
+ &:hover { border-color: #d6e4f5; box-shadow: 0 10px 24px -18px rgba(17,24,39,.25); }
+ .m-name { font-size: 13.5px; font-weight: 600; color: $ink; }
+ .m-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+ .m-id {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: $muted;
}
+ .m-tw { color: #1d9bf0; display: inline-flex; .icon-twitter { font-size: 13px; } &:hover { opacity: .8; } }
}
- .team-input-group {
- width: 300px;
- padding-bottom: 1em;
- .form-control {
- border: solid 1px #dfdfdf;
- border-radius: 3px;
- &:focus-visible {
- outline: none;
- box-shadow: none;
- }
- }
- .btn-outline-success {
- border: solid 1px #dfdfdf;
- color: #2c3e50;
- &:focus,
- &:active,
- &:hover {
- z-index: 9;
- background-color: #3788d0d6;
- border-color: #3788d0d6;
- color: #fff;
- box-shadow: none!important;
- }
- }
+ // total count pill
+ .total {
+ display: inline-block;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700;
+ font-size: 14px; color: #2c6cb0; background: #eef5fd; border: 1px solid #d6e4f5;
+ border-radius: 999px; padding: 1px 10px;
}
- .contributors-wrapper {
- .item-wrapper {
- display: flex;
- flex-wrap: wrap;
- padding-bottom: 2rem;
+ // --- project-level contributors ---
+ .team-contrib { max-width: 1120px; margin: 48px auto 0; }
+ .team-contrib-head {
+ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
+ h2 { text-align: left; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 24px; }
+ }
+ .team-search {
+ display: flex; align-items: center; gap: 8px; margin-left: auto;
+ input {
+ height: 40px; box-sizing: border-box;
+ width: 240px; max-width: 60vw;
+ background: #fff; border: 1px solid #DADDE0; border-radius: 8px;
+ padding: 0 12px; color: $ink; font-size: 13px; outline: none;
+ &:focus { border-color: #9cc3ea; box-shadow: 0 0 0 3px rgba(55,136,208,.12); }
+ &::placeholder { color: $muted; }
}
-
- .item {
- width: 33.33%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-right: 35px;
- margin-bottom: 0.4rem;
-
- .total {
- font-size: 16px;
- }
-
- &:hover {
- cursor: pointer;
-
- .name {
- color: #3176d9;
- }
- }
-
- .item-text {
- display: flex;
- align-items: center;
- img {
- margin-right: 0.3rem;
- }
- }
+ // self-contained button so it matches the input height exactly
+ .team-contributor-search {
+ height: 40px; box-sizing: border-box;
+ display: inline-flex; align-items: center;
+ padding: 0 18px; border: none; border-radius: 8px;
+ background: $brand-grad; color: #fff; font-size: 13px; font-weight: 700;
+ cursor: pointer; white-space: nowrap;
+ box-shadow: 0 6px 16px -8px rgba(55,136,208,.5);
+ transition: filter .15s ease;
+ &:hover { filter: brightness(1.05); }
}
+ }
+ .team-contrib-grid {
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
+ .item-wrapper { display: contents; }
+ .item {
+ display: flex; align-items: center; gap: 10px;
+ padding: 12px 14px;
+ background: #fff; border: 1px solid $line; border-radius: 10px; cursor: pointer;
+ transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
+ &:hover { box-shadow: 0 12px 30px -18px rgba(17,24,39,.28); border-color: #d6e4f5; transform: translateY(-1px); }
+ .item-text { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
+ .name { font-size: 13.5px; font-weight: 600; color: $ink; }
+ .item-meta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+ .icon-arrow-right { color: $muted; font-size: 11px; }
+ }
+ .hide { display: none; }
+ // --- modal (project contributor list) ---
+ // jQuery fadeIn() sets display:block, so center via transform (not flex).
.modal-wrapper {
- background-color: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 100%;
- position: fixed;
- left: 0px;
- top: 0px;
- display: none;
- z-index: 99999;
-
- .modal-inner {
- max-width: 80%;
- padding: 40px;
- height: 600px;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- background-color: #fff;
- border-radius: 6px;
- display: flex;
- flex-direction: column;
-
- .modal-detail {
- overflow-y: scroll;
- }
-
- .modal-name-box {
- display: flex;
- align-items: center;
- margin-top: 2rem;
- margin-bottom: 2rem;
-
- .modal-icon {
- &:hover {
- cursor: default;
- }
- }
-
- .modal-name {
- font-weight: 600;
- margin-left: 0.4rem;
- }
- }
- }
-
- ul, li {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- li {
- position: relative;
- border: 1px solid #eaecef;
- border-radius: 4px;
- padding: 4px 7px;
- box-shadow: #f8f9fa 0px 1px 2px 0px;
-
- a {
- color: #2c3e50;
- }
- }
+ display: none; position: fixed; inset: 0; z-index: 600;
+ background: rgba(17, 24, 39, .55);
}
-
- @media (max-width: 992px) {
- .table-wrapper {
- flex-wrap: wrap;
-
- .table-box {
- width: 100%;
-
- &:nth-of-type(1) {
- margin-bottom: 12px;
- }
- }
- }
+ .modal-inner {
+ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+ width: 760px; max-width: 94vw; max-height: 82vh;
+ background: #fff; border: 1px solid $line; border-radius: 14px;
+ overflow: hidden; display: flex; flex-direction: column;
+ box-shadow: 0 30px 80px -20px rgba(17,24,39,.5);
}
-
- @media (max-width: 1200px) {
- .contributors-wrapper {
- .item {
- width: 50% !important;
- }
- }
+ // the cloned project list keeps its `.hide` class — force it visible here
+ .modal-detail .hide { display: block; }
+ .modal-head {
+ display: flex; align-items: center; gap: 16px;
+ padding: 14px 18px; border-bottom: 1px solid $line; background: #f7faff;
+ .btn-back { font-size: 13px; font-weight: 700; color: $brand; text-decoration: none; &:hover { text-decoration: underline; } }
+ .modal-name-box { display: flex; align-items: center; gap: 8px; color: $ink; font-weight: 700; font-size: 14px; }
+ }
+ .modal-detail {
+ padding: 16px 18px 22px; overflow-y: auto;
}
- @media (max-width: 768px) {
- .contributors-wrapper {
-
- .item {
- width: 100% !important;
- padding-right: 0;
- }
- }
-
- .modal-wrapper {
- background-color: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 100%;
- position: fixed;
- left: 0px;
- top: 0px;
- display: none;
- z-index: 99999;
- .modal-inner {
- max-width: 90%;
- padding: 20px;
- }
+ // people chips (used inside modal)
+ .contrib-people {
+ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;
+ li { margin: 0; }
+ a {
+ display: inline-flex; align-items: center; gap: 5px;
+ padding: 4px 9px; border-radius: 999px;
+ background: #f3f6fa; border: 1px solid $line; color: $body;
+ font-size: 12px; text-decoration: none;
+ .icon-github { font-size: 12px; color: $muted; }
+ &.link:hover { background: #eef5fd; color: $brand; border-color: #d6e4f5; }
}
}
+}
+@media (max-width: 900px) {
+ .td-team {
+ .team-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
+ .table-wrapper { grid-template-columns: 1fr; }
+ .team-contrib-grid { grid-template-columns: 1fr 1fr; }
+ .team-contrib-head h2 { font-size: 20px; }
+ .team-search { margin-left: 0; width: 100%; input { flex: 1; width: auto; } }
+ }
+}
+@media (max-width: 560px) {
+ .td-team .team-contrib-grid { grid-template-columns: 1fr; }
}
diff --git a/assets/scss/_custom_users.scss b/assets/scss/_custom_users.scss
new file mode 100644
index 00000000000..3eca0b5af3d
--- /dev/null
+++ b/assets/scss/_custom_users.scss
@@ -0,0 +1,84 @@
+// =====================================================================
+// Users / adopters page — light theme, grayscale logo wall
+// (uses $ink/$body/$muted/$line/$brand/$brand-grad from _custom_home.scss)
+// =====================================================================
+.td-users {
+ background: #fff;
+
+ .eyebrow {
+ display: inline-block; font-size: 12px; font-weight: 700;
+ letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
+ }
+
+ .users-hero {
+ padding: calc(4rem + 30px) 0 28px;
+ background:
+ radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+ radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+ linear-gradient(180deg, #f7faff 0%, #fff 70%);
+ border-bottom: 1px solid $line;
+ h1 { font-size: 40px; font-weight: 800; color: $ink; letter-spacing: -.8px; margin: 0 0 12px; border: 0; padding: 0; }
+ p { font-size: 16px; color: $body; line-height: 1.6; margin: 0; max-width: 620px; }
+ }
+ .users-cta {
+ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px;
+ .sky-btn.primary { text-decoration: none; display: inline-flex; align-items: center; }
+ .users-count { color: $muted; font-size: 14px; strong { color: $ink; font-weight: 800; font-size: 18px; } }
+ }
+
+ .users-wrap { max-width: 1200px; padding-top: 36px; padding-bottom: 64px; }
+
+ // --- logo marquee: auto-scrolling rows, alternating directions ---
+ .users-marquee-wrap { display: flex; flex-direction: column; gap: 12px; }
+ .users-marquee {
+ overflow: hidden; position: relative;
+ // fade the left/right edges
+ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
+ mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
+ &:hover .users-track { animation-play-state: paused; }
+ }
+ .users-track {
+ display: flex; gap: 12px; width: max-content;
+ animation: users-marquee 90s linear infinite;
+ will-change: transform;
+ &.rev { animation-direction: reverse; }
+ }
+ @keyframes users-marquee {
+ from { transform: translateX(0); }
+ to { transform: translateX(-50%); }
+ }
+ @media (prefers-reduced-motion: reduce) {
+ .users-track { animation: none; }
+ .users-marquee { overflow-x: auto; }
+ }
+ .users-logo {
+ flex: 0 0 auto;
+ display: flex; align-items: center; justify-content: center;
+ width: 128px; height: 60px; padding: 12px;
+ background: #fff; border: 1px solid $line; border-radius: 10px;
+ transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
+ img {
+ max-width: 100%; max-height: 100%;
+ filter: grayscale(100%); opacity: .7;
+ transition: filter .2s ease, opacity .2s ease;
+ }
+ &:hover {
+ border-color: #d6e4f5;
+ box-shadow: 0 10px 24px -16px rgba(17, 24, 39, .3);
+ transform: translateY(-2px);
+ img { filter: grayscale(0); opacity: 1; }
+ }
+ }
+
+ .users-note {
+ margin: 36px auto 0; text-align: center; color: $muted; font-size: 13.5px;
+ a { color: $brand; }
+ }
+}
+
+@media (max-width: 600px) {
+ .td-users {
+ .users-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
+ .users-logo { width: 104px; height: 52px; padding: 10px; }
+ }
+}
diff --git a/assets/scss/_event-popup.scss b/assets/scss/_event-popup.scss
new file mode 100644
index 00000000000..42d5f5b17cd
--- /dev/null
+++ b/assets/scss/_event-popup.scss
@@ -0,0 +1,108 @@
+// =====================================================================
+// Bottom-right announcement / event popup — light theme redesign
+// (shadows themes/docsy/assets/scss/_event-popup.scss; preserves the
+// class hooks used by js/event-popup.js: .sky-event-popup, .sky-pop-modal,
+// .icon-guanbi, .pic-wrapper(.poster), .pic, .content-box(.one), .item,
+// .title, .content-text, .modal-btn)
+// =====================================================================
+@keyframes eventFadein {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.sky-event-popup {
+ display: none;
+ position: fixed;
+ right: 20px;
+ bottom: 20px;
+ z-index: 9999;
+ width: 400px;
+ max-width: calc(100vw - 32px);
+ border-radius: 14px;
+ overflow: hidden;
+ background: #fff;
+ border: 1px solid $line;
+ box-shadow: 0 24px 60px -20px rgba(17, 24, 39, .45);
+ animation: eventFadein .35s ease;
+
+ .sky-pop-modal {
+ position: relative;
+ display: flex;
+ box-sizing: border-box;
+ background: #fff;
+ }
+
+ // close button
+ .iconfont.icon-guanbi {
+ position: absolute; top: 9px; right: 11px;
+ width: 24px; height: 24px; display: grid; place-items: center;
+ font-size: 13px; color: $muted; cursor: pointer; z-index: 5;
+ border-radius: 50%;
+ transition: background .15s ease, color .15s ease;
+ &:hover { background: #f1f4f8; color: $ink; }
+ }
+
+ // left thumbnail
+ .pic-wrapper {
+ flex: 0 0 92px;
+ display: flex; align-items: center; justify-content: center;
+ background:
+ radial-gradient(120px 120px at 50% 40%, rgba(55,136,208,.12), transparent 70%),
+ #f5f8fc;
+ border-right: 1px solid $line;
+ &.poster {
+ flex: 1 1 auto; border-right: 0; background: #fff;
+ .pic { max-width: 100%; height: auto; cursor: pointer; }
+ }
+ .pic { border: none; max-width: 64px; max-height: 64px; height: auto; }
+ }
+
+ // content
+ .content-box {
+ box-sizing: border-box;
+ flex: 1; min-width: 0;
+ padding: 14px 16px 14px 14px;
+
+ .item { display: none; }
+
+ &.one {
+ .title { margin: 2px 0 6px; }
+ .content-text { -webkit-line-clamp: 3; max-height: none; }
+ .modal-btn { display: inline-flex; }
+ }
+ }
+
+ // multi-item list mode: stack items with separators
+ .content-box:not(.one) .item {
+ padding: 8px 0; border-top: 1px solid $line;
+ &:first-child { border-top: 0; padding-top: 2px; }
+ }
+
+ .title {
+ margin: 0; padding: 0;
+ font-size: 14px; font-weight: 700; line-height: 1.35; color: $ink;
+ a & , a { color: $ink; }
+ }
+ .content-text {
+ margin: 4px 0 0;
+ font-size: 12.5px; line-height: 1.5; color: $body;
+ overflow: hidden; text-overflow: ellipsis;
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+ a { color: $body; &:hover { text-decoration: underline; } }
+ }
+
+ .modal-btn {
+ display: none;
+ align-items: center;
+ margin-top: 12px; padding: 0 16px; height: 32px; line-height: 32px;
+ font-size: 13px; font-weight: 700; color: #fff !important;
+ background: $brand-grad; border-radius: 8px;
+ text-decoration: none;
+ box-shadow: 0 6px 16px -8px rgba(55,136,208,.5);
+ &:hover { filter: brightness(1.05); }
+ }
+}
+
+@media (max-width: 480px) {
+ .sky-event-popup { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
+}
diff --git a/content/_index.html b/content/_index.html
index dc7e45c61f8..4abcde95560 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -3,198 +3,225 @@ title = "Apache SkyWalking"
linkTitle = "Apache SkyWalking"
+++
-<div class="container pt-64">
- {{< contributors-home >}}
+<!-- ===== HERO + PRODUCT BENTO (merged) ===== -->
+<section class="home-hero">
+ <div class="container">
+ <div class="hero-top">
+ <a class="hero-seal" href="https://www.apache.org/" target="_blank" rel="noopener" aria-label="Apache Software Foundation">
+ <svg viewBox="0 0 200 200">
+ <defs><path id="asfSealPath" d="M100,100 m-80,0 a80,80 0 1,1 160,0 a80,80 0 1,1 -160,0" fill="none" /></defs>
+ <circle cx="100" cy="100" r="96" class="seal-ring" />
+ <circle cx="100" cy="100" r="70" class="seal-ring seal-ring--thin" />
+ <text class="seal-text"><textPath href="#asfSealPath" startOffset="0">· APACHE SOFTWARE FOUNDATION · OPEN SOURCE · COMMUNITY-DRIVEN </textPath></text>
+ </svg>
+ <img class="hero-seal-leaf" src="/images/asf-oakleaf.svg" alt="" />
+ </a>
+ <ul class="hero-stats">
+ <li><a href="/team/"><strong>{{< team-count >}}</strong><span>contributors</span></a></li>
+ <li><strong>100B+</strong><span>telemetry / cluster</span></li>
+ <li><strong>10+ yrs</strong><span>in production</span></li>
+ </ul>
+ </div>
- <div class="introduction mt-5">
- <h1 class="title-skywalking">
- Apache SkyWalking
- <a href="https://github.com/apache/skywalking" target="_blank" rel="noopener">
- <i class="iconfont icon-github icon-skywalking"></i>
- </a>
- </h1>
- <div class="desc" id="demo">
- Application performance monitor tool for distributed systems, especially designed for
- microservices, cloud native and container-based (Kubernetes) architectures.
- </div>
- <a href="/docs/skywalking-showcase/latest/readme/" target="_blank" rel="noopener">
- <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="https://demo.skywalking.apache.org/" target="_blank" rel="noopener">
- Go to native UI <i class="iconfont icon-arrow-up-right"></i>
- </a>
- </span>
- <span class="dropdown-item" href="#">
- <a href="https://demo.skywalking.apache.org:3000/" target="_blank" rel="noopener">
- Preview metrics on Grafana <i class="iconfont icon-arrow-up-right"></i>
- </a>
- </span>
+ <div class="home-hero-grid">
+ <div class="home-hero-text">
+ <h1>The observability platform for <span class="accent">cloud-native</span></h1>
+ <p class="lead">
+ Apache SkyWalking collects, analyzes, aggregates and visualizes telemetry from
+ services and cloud-native infrastructure — distributed tracing, metrics, logs,
+ profiling and alarms in one platform, with many language agents and eBPF on Kubernetes.
+ </p>
+ <div class="hero-cta">
+ <a href="/docs/#qs-showcase">
+ <button class="sky-btn primary">Quick start <span class="hint">5 min</span></button>
+ </a>
+ <span class="dropdown demo-wrapper">
+ <button class="sky-btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
+ Live demo
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <span class="dropdown-item">Username: skywalking</span>
+ <span class="dropdown-item">Password: skywalking</span>
+ <span class="dropdown-item">
+ <a href="https://demo.skywalking.apache.org/" target="_blank" rel="noopener">Go to UI <i class="iconfont icon-arrow-up-right"></i></a>
+ </span>
+ <span class="dropdown-item">
+ <a href="https://demo.skywalking.apache.org:3000/" target="_blank" rel="noopener">Preview on Grafana <i class="iconfont icon-arrow-up-right"></i></a>
+ </span>
+ </div>
+ </span>
+ <a class="github-pill" href="https://github.com/apache/skywalking" target="_blank" rel="noopener">
+ <i class="iconfont icon-github"></i> Star on GitHub
+ </a>
</div>
- </span>
+ </div>
+
+ <figure class="hero-shot" data-widget="topology">
+ <span class="shot-bar"><i></i><i></i><i></i><em>demo.skywalking.apache.org</em></span>
+ <img loading="eager" src="/images/home/horizon-dashboard.png" alt="SkyWalking services dashboard with topology and active alarms">
+ </figure>
</div>
-</div>
-{{< home-banner >}}
+ <div class="widget-row">
+ <figure class="widget-card is-shot" data-widget="trace">
+ <img loading="lazy" src="/images/home/horizon-trace.png" alt="SkyWalking trace explorer with span waterfall">
+ <figcaption><strong>Distributed tracing</strong><span>Span-by-span waterfalls.</span></figcaption>
+ </figure>
-<div class="solution-wrapper">
- <div class="container">
- <h2 class="title solution-title">
- All-in-one APM solution
- </h2>
- <ul class="solution-content">
- <li>
- <h4>Distributed Tracing</h4>
- <p>
- 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.
- </p>
- </li>
- <li>
- <h4>eBPF early adoption</h4>
- <p>
- Rover agent works as a monitor and profiler powered by eBPF to monitor Kubernetes deployments and diagnose CPU and network performance.
- </p>
- </li>
- </ul>
- <ul class="solution-content">
- <li>
- <h4>Scaling</h4>
- <p>
- 100+ billion telemetry data could be collected and analyzed from one SkyWalking cluster.
- </p>
- </li>
- <li>
- <h4>Mature Telemetry Ecosystems Supported</h4>
- <p>
- 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.
- </p>
- </li>
- </ul>
- <ul class="solution-content">
- <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.
- </p>
- </li>
- <li>
- <h4>Log Management Pipeline</h4>
- <p>
- 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.
- </p>
- </li>
- </ul>
- <ul class="solution-content flex-center">
- <li>
- <h4>AI Power Enabled</h4>
- <p>
- Machine Learning (ML) and Artificial Intelligence (AI) analyze observability data to identify
- patterns and enhance capabilities, such as recognizing HTTP URI patterns and automatically
- calculating metric baselines for intelligent alerting, improving anomaly detection.
- </p>
- </li>
- </ul>
+ <figure class="widget-card is-shot" data-widget="logs">
+ <img loading="lazy" src="/images/home/horizon-logs.png" alt="SkyWalking logs explorer">
+ <figcaption><strong>Logs</strong><span>Trace-correlated log explorer.</span></figcaption>
+ </figure>
+ <figure class="widget-card is-shot" data-widget="metrics">
+ <img loading="lazy" src="/images/home/horizon-metrics.png" alt="SkyWalking metrics and dashboards">
+ <figcaption><strong>Metrics & dashboards</strong><span>Customizable widgets and MQE.</span></figcaption>
+ </figure>
+
+ <figure class="widget-card is-shot" data-widget="rbac">
+ <img loading="lazy" src="/images/home/horizon-rbac.png" alt="SkyWalking RBAC and alerting">
+ <figcaption><strong>RBAC & alerting</strong><span>Role-based access and alarm rules.</span></figcaption>
+ </figure>
</div>
+ </div>
+</section>
- <div class="container" id="arch">
- <img loading="lazy" src="images/home/architecture_2160x720.png" alt="architecture">
+<div class="home-below">
+<!-- ===== CAPABILITIES ===== -->
+<section class="home-section">
+ <div class="container">
+ <div class="section-head">
+ <span class="eyebrow">WHAT YOU GET</span>
+ <h2>One platform for traces, metrics, logs and profiles</h2>
+ <p>A modern APM designed for cloud-native systems. Auto-instrument the languages you run, observe the kernel via eBPF, and store the volume natively in BanyanDB.</p>
</div>
-</div>
+ <div class="cap-grid">
+ <article class="cap-card">
+ <span class="cap-tag tracing">Tracing</span>
+ <h3>End-to-end distributed tracing</h3>
+ <p>Native plus Zipkin v1/v2 formats. Auto-instrument 10+ languages, eBPF on Kubernetes, and dependency analysis across services and APIs.</p>
+ <a href="/docs/main/latest/en/concepts-and-designs/probe-introduction/">Learn more →</a>
+ </article>
+ <article class="cap-card">
+ <span class="cap-tag metrics">Metrics</span>
+ <h3>Metrics pipeline at any scale</h3>
+ <p>OTLP, native, OpenCensus, Telegraf and Zabbix flow through one MAL script pipeline — 100B+ data points per cluster.</p>
+ <a href="/docs/main/latest/en/concepts-and-designs/mal/">Learn more →</a>
+ </article>
+ <article class="cap-card">
+ <span class="cap-tag logging">Logging</span>
+ <h3>Logs with trace correlation</h3>
+ <p>Collect from disk or network, auto-bind trace context, extract metrics, sample by policy, and forward anywhere.</p>
+ <a href="/docs/main/latest/en/setup/backend/log-analyzer/">Learn more →</a>
+ </article>
+ <article class="cap-card">
+ <span class="cap-tag profiling">Profiling</span>
+ <h3>Profiling, in-agent and eBPF</h3>
+ <p>CPU and async profiling bundled in language agents. eBPF profiler on Rover for Kubernetes deployments.</p>
+ <a href="/docs/main/latest/en/concepts-and-designs/profiling/">Learn more →</a>
+ </article>
+ </div>
+ </div>
+</section>
+
+<!-- ===== ECOSYSTEM ===== -->
+<section class="home-section ecosystem">
+ <div class="container">
+ <div class="section-head">
+ <span class="eyebrow">ECOSYSTEM</span>
+ <h2>Built for the stack you already run</h2>
+ <p>Language agents, service mesh, eBPF, a native observability database, and broad telemetry-format support — vendor-neutral and Apache-governed.</p>
+ </div>
+ <div class="eco-grid">
+ <a class="eco-card" href="/docs/#Agents" style="--eco: #3788D0;">
+ <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
+ <h4>Agents for your stack</h4>
+ <p>Java, Go, Python, Node.js, PHP, Rust, .NET, LUA, C++ and Client JavaScript — actively maintained.</p>
+ <span class="eco-more">14 language agents →</span>
+ </a>
+ <a class="eco-card" href="/docs/skywalking-rover/latest/readme/" style="--eco: #11814b;">
+ <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3v4m0 10v4m9-9h-4M7 12H3m13.5-6.5l-2.8 2.8M9.3 14.7l-2.8 2.8m11 0l-2.8-2.8M9.3 9.3L6.5 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="12" cy="12" r="2.4" stroke="currentColor" stroke-width="1.6"/></svg></span>
+ <h4>eBPF with Rover</h4>
+ <p>Monitor and profile Kubernetes deployments and diagnose CPU and network performance with eBPF.</p>
+ <span class="eco-more">Rover docs →</span>
+ </a>
+ <a class="eco-card" href="/docs/skywalking-banyandb/latest/readme/" style="--eco: #0e7490;">
+ <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="6" rx="7" ry="3" stroke="currentColor" stroke-width="1.6"/><path d="M5 6v6c0 1.66 3.13 3 7 3s7-1.34 7-3V6M5 12v6c0 1.66 3.13 3 7 3s7-1.34 7-3v-6" stroke="currentColor" stroke-width="1.6"/></svg></span>
+ <h4>BanyanDB</h4>
+ <p>A native observability database built to ingest, analyze and store telemetry at scale.</p>
+ <span class="eco-more">BanyanDB docs →</span>
+ </a>
+ <a class="eco-card" href="/blog/" style="--eco: #be2069;">
+ <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3l2.2 5.3L20 9l-4 3.6L17 18l-5-2.7L7 18l1-5.4L4 9l5.8-.7L12 3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
+ <h4>AI-assisted analysis</h4>
+ <p>ML baselines, HTTP URI pattern recognition and anomaly detection for smarter alerting.</p>
+ <span class="eco-more">AI on the blog →</span>
+ </a>
+ </div>
+ <div class="formats">
+ <span class="formats-label">Telemetry supported natively</span>
+ <span class="format-chip">OpenTelemetry (OTLP)</span>
+ <span class="format-chip">Zipkin v1/v2</span>
+ <span class="format-chip">Prometheus</span>
+ <span class="format-chip">OpenCensus</span>
+ <span class="format-chip">Telegraf</span>
+ <span class="format-chip">Zabbix</span>
+ <span class="format-chip">Fluentd / Fluent Bit</span>
+ <span class="format-chip">Apache Kafka</span>
+ </div>
+ </div>
+</section>
-<div class="container feature-wrapper events-wrapper mt-5">
- <h2 class="title">Events & Blogs</h2>
+<!-- ===== EVENTS & BLOGS ===== -->
+<section class="home-section">
+ <div class="container">
+ <div class="section-head">
+ <span class="eyebrow">LATEST</span>
+ <h2>Events & blogs</h2>
+ </div>
<ul class="events-content feature-content">
- {{< blocks/events >}}
- {{< /blocks/events >}}
+ {{< blocks/events >}}
+ {{< /blocks/events >}}
</ul>
-</div>
-
-<div class="container run-wrapper center mt-5">
- <h2 class="title">Ready to get started?</h2>
- <div class="run-content">
- <div class="mask"></div>
- <div class="content-box">
- <h4>Run SkyWalking in a snap</h4>
- <p>Try this demo music application to showcase features of Apache SkyWalking in action.</p>
- <div>
- <a href="/docs/skywalking-showcase/latest/readme/">
- <button class="sky-btn">
- Quick start
- <i class="iconfont icon-arrow-right pull-right"></i>
- </button>
- </a>
+ </div>
+</section>
- </div>
- <a class="releases mt-4" href="/downloads/">All releases</a>
+<!-- ===== GET STARTED / COMMUNITY ===== -->
+<section class="home-section">
+ <div class="container">
+ <div class="get-started">
+ <div class="gs-text">
+ <span class="gs-eyebrow">GET STARTED</span>
+ <h2>Ready to get started?</h2>
+ <p>Spin up the Showcase to see Apache SkyWalking in action, or install the platform — then join a community built by <a href="/team/">{{< team-count >}} contributors</a>.</p>
+ <div class="gs-cta">
+ <a class="sky-btn primary" href="/docs/#qs-skywalking">Quick start <i class="iconfont icon-arrow-right"></i></a>
+ <a class="sky-btn" href="/downloads/">All releases</a>
</div>
+ </div>
+ </div>
+ <div class="community-cards">
+ <a class="community-card" href="https://github.com/apache/skywalking/discussions" target="_blank" rel="noopener">
+ <span class="cc-ic"><i class="iconfont icon-github"></i></span>
+ <h4>Questions or bugs?</h4>
+ <p>Open a discussion or file an issue on GitHub — feature requests, questions and bug reports all welcome.</p>
+ <span class="cc-more">GitHub Discussions →</span>
+ </a>
+ <a class="community-card" href="http://s.apache.org/slack-invite" target="_blank" rel="noopener">
+ <span class="cc-ic"><i class="iconfont icon-slack"></i></span>
+ <h4>Join our Slack</h4>
+ <p>Chat with maintainers and users in real time. Send a request to <span class="cc-mail">dev@skywalking.apache.org</span> and we'll invite you.</p>
+ <span class="cc-more">Get an invite →</span>
+ </a>
+ <a class="community-card" href="https://twitter.com/asfskywalking" target="_blank" rel="noopener">
+ <span class="cc-ic"><i class="iconfont icon-twitter"></i></span>
+ <h4>Follow on Twitter</h4>
+ <p>Announcements, releases and the latest features — follow @ASFSkyWalking for project news.</p>
+ <span class="cc-more">@ASFSkyWalking →</span>
+ </a>
</div>
-</div>
+ </div>
+</section>
-<div class="container tuned-wrapper feature-wrapper mt-5 mb-5">
- <h2 class="title">
- Stay tuned with SkyWalking
- </h2>
- <ul class="tuned-content feature-content center">
- <li>
- <h4>Questions/bugs?</h4>
- <p>Features requests, questions or report bugs? Feel free to
- <a href="https://github.com/apache/skywalking/discussions">open a discussion</a>
- or <a href="https://github.com/apache/skywalking/issues">file an issue</a>.</p>
- <img loading="lazy" src="images/home/tuned_q.svg" data-nolightbox="true" alt="questions">
- </li>
- <li>
- <h4>Join our slack workspace!</h4>
- <p>Send "Request to join SkyWalking slack" mail to
- <a href="mailto:dev@skywalking.apache.org">dev@skywalking.apache.org</a>.
- We will invite you in.</p>
- <img loading="lazy" src="images/home/tuned_slack.svg" data-nolightbox="true" alt="slack">
- </li>
- <li>
- <h4>Follow us on Twitter</h4>
- <p>For announcement of latest features etc, stay tuned with
- <a href="https://twitter.com/asfskywalking">@ASFSkyWalking</a>.
- </p>
- <img loading="lazy" src="images/home/tuned_twitter.svg" data-nolightbox="true" alt="twitter">
- </li>
- </ul>
</div>
-
diff --git a/content/blog/2018-05-24-skywalking-net/index.md b/content/blog/2018-05-24-skywalking-net/index.md
index 1b33092cce5..1e1f7d937dd 100755
--- a/content/blog/2018-05-24-skywalking-net/index.md
+++ b/content/blog/2018-05-24-skywalking-net/index.md
@@ -4,8 +4,7 @@ date: 2018-05-24
author: Haoyang Liu, the major maintainer of SkyWalking .NET Core agent
description: "SkyWalking .NET Core SDK is available."
tags:
-- DotNetCore
-- Agent
+- Agents
---
Translated by Sheng Wu.
diff --git a/content/blog/2018-12-12-skywalking-service-mesh-ready/index.md b/content/blog/2018-12-12-skywalking-service-mesh-ready/index.md
index 2de75545b1e..5cb61ec63d7 100644
--- a/content/blog/2018-12-12-skywalking-service-mesh-ready/index.md
+++ b/content/blog/2018-12-12-skywalking-service-mesh-ready/index.md
@@ -4,8 +4,8 @@ date: 2018-12-05
author: Wu Sheng, tetrate
description: "The integration of SkyWalking and Istio Service Mesh yields an essential open-source tool for resolving the chaos created by the proliferation of siloed, cloud-based services."
tags:
-- Service Mesh
-- Release Blog
+- Release
+- Cloud Native
---
Original link, [Tetrate.io blog](https://www.tetrate.io/blog/apache-skywalking-v6/)
diff --git a/content/blog/2019-01-01-Understand-Trace/index.md b/content/blog/2019-01-01-Understand-Trace/index.md
index 4045706fda9..a3bb404279d 100644
--- a/content/blog/2019-01-01-Understand-Trace/index.md
+++ b/content/blog/2019-01-01-Understand-Trace/index.md
@@ -3,7 +3,6 @@ title: "Understand distributed trace easier in the incoming 6-GA"
date: 2019-01-01
author: Wu Sheng(Tetrate)
description: "Distributed tracing is a necessary part of modern microservices architecture, but how to understand or use distributed tracing data is unclear to some end users. This blog overviews typical distributed tracing use cases with new visualization features in SkyWalking v6."
-
tags:
- Tracing
---
diff --git a/content/blog/2019-01-25-mesh-loadtest/index.md b/content/blog/2019-01-25-mesh-loadtest/index.md
index 2520a724ee0..1dc9abf68cf 100644
--- a/content/blog/2019-01-25-mesh-loadtest/index.md
+++ b/content/blog/2019-01-25-mesh-loadtest/index.md
@@ -4,8 +4,8 @@ date: 2019-01-25
author: Hongtao Gao(Tetrate)
description: "Service mesh receiver performance test on Google Kubernetes Engine."
tags:
-- Performance
-- Testing
+- Profiling
+- Engineering
---
- Author: Hongtao Gao, Apache SkyWalking & ShardingShpere PMC
diff --git a/content/blog/2019-09-25-alarm-webhook-share/index.md b/content/blog/2019-09-25-alarm-webhook-share/index.md
index 5ae50faa2b4..5c939fcb833 100644
--- a/content/blog/2019-09-25-alarm-webhook-share/index.md
+++ b/content/blog/2019-09-25-alarm-webhook-share/index.md
@@ -4,7 +4,7 @@ date: 2019-09-25
author: Wei Qiang
description: " Alerts via SkyWalking alarm webhook for better perception of tracing."
tags:
-- User Manual
+- Engineering
---
- Author: Wei Qiang
diff --git a/content/blog/2020-01-20-celebrate-200th-contributor/index.md b/content/blog/2020-01-20-celebrate-200th-contributor/index.md
index 8076be61c31..b51af5f6a71 100644
--- a/content/blog/2020-01-20-celebrate-200th-contributor/index.md
+++ b/content/blog/2020-01-20-celebrate-200th-contributor/index.md
@@ -3,6 +3,8 @@ title: "SkyWalking hits 200 contributors mark"
date: 2020-01-20
author: Sheng Wu(Tetrate)
description: " SkyWalking community joins the 200+ contributors open source club."
+tags:
+- Community
---
- Author: Wu Sheng, tetrate.io, SkyWalking original creator, SkyWalking V.P.
diff --git a/content/blog/2020-04-13-apache-skywalking-profiling/index.md b/content/blog/2020-04-13-apache-skywalking-profiling/index.md
index 0829bd61830..e781abdd8c2 100644
--- a/content/blog/2020-04-13-apache-skywalking-profiling/index.md
+++ b/content/blog/2020-04-13-apache-skywalking-profiling/index.md
@@ -5,8 +5,7 @@ author: "Sheng Wu, Adrian Cole and Han Liu"
description: "This post introduces a way to automatically profile code in production with Apache SkyWalking. We believe the profile method helps reduce maintenance and overhead while increasing the precision in root cause analysis."
tags:
- Profiling
-- Java
-- Agent
+- Agents
- Tracing
---
diff --git a/content/blog/2020-07-26-apdex-and-skywalking/index.md b/content/blog/2020-07-26-apdex-and-skywalking/index.md
index 1679198dcad..083cfd17297 100644
--- a/content/blog/2020-07-26-apdex-and-skywalking/index.md
+++ b/content/blog/2020-07-26-apdex-and-skywalking/index.md
@@ -3,6 +3,8 @@ title: "The Apdex Score for Measuring Service Mesh Health"
date: 2020-07-26
author: Srinivasan Ramaswamy(Tetrate)
description: " In managing Service Mesh Health, Asking `How are you' is more profound than `What are your symptoms'. Apdex goes a long way in helping this."
+tags:
+- Cloud Native
---
- Author: Srinivasan Ramaswamy, tetrate
diff --git a/content/blog/2020-08-03-skywalking8-1-release/index.md b/content/blog/2020-08-03-skywalking8-1-release/index.md
index 7d7aea51c7f..1bb3df636d3 100644
--- a/content/blog/2020-08-03-skywalking8-1-release/index.md
+++ b/content/blog/2020-08-03-skywalking8-1-release/index.md
@@ -4,9 +4,8 @@ date: 2020-08-03
author: Srinivasan Ramaswamy(Tetrate)
description: " SpringSleuth metrics, endpoint dependency detection, Kafka transport traces and metrics."
tags:
-- Release Blog
-- Kafka
-- Spring
+- Release
+- Agents
---
- Author: Sheng Wu, Hongtao Gao, and Tevah Platt(Tetrate)
diff --git a/content/blog/2020-08-11-observability-at-scale/index.md b/content/blog/2020-08-11-observability-at-scale/index.md
index 46e26dc9b8c..d954debb97a 100644
--- a/content/blog/2020-08-11-observability-at-scale/index.md
+++ b/content/blog/2020-08-11-observability-at-scale/index.md
@@ -3,6 +3,8 @@ title: "Observability at Scale: SkyWalking it is"
date: 2020-08-11
author: Sheng Wu(Tetrate)
description: " SkyWalking evolved to address the problem of observability at scale, and grew from a pure tracing system to a feature-rich observability platform that is now used to analyze deployments that collect tens of billions of traces per day. "
+tags:
+- Community
---
- Author: Sheng Wu
diff --git a/content/blog/2020-10-29-skywalking8-2-release/index.md b/content/blog/2020-10-29-skywalking8-2-release/index.md
index 9b359482e25..32dc31df01a 100644
--- a/content/blog/2020-10-29-skywalking8-2-release/index.md
+++ b/content/blog/2020-10-29-skywalking8-2-release/index.md
@@ -4,8 +4,8 @@ date: 2020-10-29
author: Zhenxu Ke, Sheng Wu, Hongtao Gao, and Tevah Platt. tetrate.io
description: "Browser Side Monitoring; Query Traces by Tags; Meter Analysis Language; Composite Alert Rules"
tags:
-- Release Blog
-- Browser
+- Release
+- Agents
---
diff --git a/content/blog/2020-11-21-apachecon-keynote/index.md b/content/blog/2020-11-21-apachecon-keynote/index.md
index 09b9fda8501..7f169fe100e 100644
--- a/content/blog/2020-11-21-apachecon-keynote/index.md
+++ b/content/blog/2020-11-21-apachecon-keynote/index.md
@@ -4,8 +4,7 @@ date: 2020-11-20
author: Sheng Wu, Founding Engineer, Tetrate.io
description: "ApacheCon@Home 2020 Keynote, the progress about China embracing the Apache culture, and willing of enhancing the whole Apache community."
tags:
-- Conference
-- Video
+- Community
---
Sheng Wu is a founding engineer at tetrate.io, leads the observability for service mesh and hybrid cloud. A searcher, evangelist, and developer in the observability, distributed tracing, and APM. He is a member of the Apache Software Foundation. Love open source software and culture. Created the Apache SkyWalking project and being its VP and PMC member. Co-founder and PMC member of Apache ShardingSphere. Also as a PMC member of Apache Incubator and APISIX. He is awarded as Microsoft MVP, [...]
diff --git a/content/blog/2020-11-21-apachecon-obs-apisix/index.md b/content/blog/2020-11-21-apachecon-obs-apisix/index.md
index 7c713098dfc..dad23aaa087 100644
--- a/content/blog/2020-11-21-apachecon-obs-apisix/index.md
+++ b/content/blog/2020-11-21-apachecon-obs-apisix/index.md
@@ -4,8 +4,7 @@ date: 2020-11-21
author: Yuansheng Wang. Apache APISIX PMC member.
description: "ApacheCon@Home 2020 Observability Track"
tags:
-- Conference
-- Video
+- Community
---
Apache APISIX is a cloud-native microservices API gateway, delivering the ultimate performance, security, open-source and scalable platform for all your APIs and microservices. Apache SkyWalking: an APM(application performance monitor) system, especially designed for microservices, cloud-native and container-based (Docker, Kubernetes, Mesos) architectures. Through the powerful plug-in mechanism of Apache APISIX, Apache Skywalking is quickly supported, so that we can see the complete life [...]
diff --git a/content/blog/2020-11-21-apachecon-obs-shardingsphere/index.md b/content/blog/2020-11-21-apachecon-obs-shardingsphere/index.md
index b3a807a48ed..503d7f53414 100644
--- a/content/blog/2020-11-21-apachecon-obs-shardingsphere/index.md
+++ b/content/blog/2020-11-21-apachecon-obs-shardingsphere/index.md
@@ -4,8 +4,7 @@ date: 2020-11-21
author: Juan Pan. Apache ShardingSphere PMC member.
description: "ApacheCon@Home 2020 Observability Track"
tags:
-- Conference
-- Video
+- Community
---
The APM system provides the tracing or metrics for distributed systems or microservice architectures. Back to APM themselves, they always need backend storage to store the necessary massive data. What are the features required for backend storage? Simple, fewer dependencies, widely used query language, and the efficiency could be into your consideration. Based on that, traditional SQL databases (like MySQL) or NoSQL databases would be better choices. However, this topic will present anot [...]
diff --git a/content/blog/2020-11-21-apachecon-obs-sourcemarker/index.md b/content/blog/2020-11-21-apachecon-obs-sourcemarker/index.md
index d352039826e..9127ebf1859 100644
--- a/content/blog/2020-11-21-apachecon-obs-sourcemarker/index.md
+++ b/content/blog/2020-11-21-apachecon-obs-sourcemarker/index.md
@@ -4,8 +4,7 @@ date: 2020-11-21
author: Brandon Fergerson. Apache SkyWalking committer.
description: "ApacheCon@Home 2020 Observability Track"
tags:
-- Conference
-- Video
+- Community
---
Today's monitoring solutions are geared towards operational tasks, displaying behavior as time-series graphs inside dashboards and other abstractions. These abstractions are immensely useful but are largely designed for software operators, whose responsibilities require them to think in systems, rather than the underlying source code. This is problematic given that an ongoing trend of software development is the blurring boundaries between building and operating software. This trend make [...]
diff --git a/content/blog/2020-11-21-apachecon-obs-storage/index.md b/content/blog/2020-11-21-apachecon-obs-storage/index.md
index 1502eafdee1..8abc6458950 100644
--- a/content/blog/2020-11-21-apachecon-obs-storage/index.md
+++ b/content/blog/2020-11-21-apachecon-obs-storage/index.md
@@ -4,8 +4,7 @@ date: 2020-11-21
author: Hongtao Gao. Apache SkyWalking PMC member. Tetrate.io
description: "ApacheCon@Home 2020 Observability Track"
tags:
-- Conference
-- Video
+- Community
---
Over the past few years, and coupled with the growing adoption of microservices, distributed tracing has emerged as one of the most commonly used monitoring and troubleshooting methodologies. New tracing tools are increasingly being introduced, driving adoption even further. One of these tools is Apache SkyWalking, a popular open-source tracing, and APM platform. This talk explores the history of the SkyWalking storage module, shows the evolution of distributed tracing storage layers, fr [...]
diff --git a/content/blog/2020-11-25-skywalking-satellite-0.1.0-design/index.md b/content/blog/2020-11-25-skywalking-satellite-0.1.0-design/index.md
index ad574d7d7a9..54c4eb95389 100644
--- a/content/blog/2020-11-25-skywalking-satellite-0.1.0-design/index.md
+++ b/content/blog/2020-11-25-skywalking-satellite-0.1.0-design/index.md
@@ -4,8 +4,8 @@ date: 2020-11-25
author: Jiapeng Liu. Apache SkyWalking Committer.
description: "The design of Satellite 0.1.0. The structure of the project would follow this design."
tags:
-- Design
-- Satellite
+- Agents
+- Engineering
---
diff --git a/content/blog/2020-12-03-obs-service-mesh-with-sw-and-als/index.md b/content/blog/2020-12-03-obs-service-mesh-with-sw-and-als/index.md
index c699f318320..454d54ba621 100644
--- a/content/blog/2020-12-03-obs-service-mesh-with-sw-and-als/index.md
+++ b/content/blog/2020-12-03-obs-service-mesh-with-sw-and-als/index.md
@@ -4,7 +4,7 @@ date: 2020-12-03
author: Zhenxu Ke, Sheng Wu, and Tevah Platt. tetrate.io
description: In this tutorial, learn how to use Apache SkyWalking for service mesh observability without Istio Mixer
tags:
-- Service Mesh
+- Cloud Native
---
diff --git a/content/blog/2021-01-01-300-contributors-mark/index.md b/content/blog/2021-01-01-300-contributors-mark/index.md
index 569b4cea51e..99f463c5484 100644
--- a/content/blog/2021-01-01-300-contributors-mark/index.md
+++ b/content/blog/2021-01-01-300-contributors-mark/index.md
@@ -3,6 +3,8 @@ title: "Celebrate SkyWalking single repository hits the 300 contributors mark"
date: 2020-12-22
author: Sheng Wu, Tetrate.io, Apache SkyWalking Creator. [GitHub](https://github.com/wu-sheng) [Twitter](https://twitter.com/wusheng1108) [Linkedin](https://www.linkedin.com/in/wusheng1108)
description: "SkyWalking hits 300 contributors mark at one single repository"
+tags:
+- Community
---
Apache SkyWalking is an open source APM for distributed system. Provide tracing, service mesh observability, metrics analysis, alarm and visualization.
diff --git a/content/blog/2021-01-17-elastic-change-license/index.md b/content/blog/2021-01-17-elastic-change-license/index.md
index 23e5ccec345..0fbb886e033 100644
--- a/content/blog/2021-01-17-elastic-change-license/index.md
+++ b/content/blog/2021-01-17-elastic-change-license/index.md
@@ -4,7 +4,7 @@ date: 2021-01-17
author: Sheng Wu, Tetrate.io, Apache SkyWalking Creator. [GitHub](https://github.com/wu-sheng) [Twitter](https://twitter.com/wusheng1108) [Linkedin](https://www.linkedin.com/in/wusheng1108)
description: "Elastic Search server doesn't release under Apache 2.0 anymore. What is the impact to the SkyWalking project?"
tags:
-- License
+- Community
---
[Elastic](https://elastic.co) announced their license change, [**Upcoming licensing changes to Elasticsearch and Kibana**.](https://www.elastic.co/blog/licensing-change)
diff --git a/content/blog/2021-01-23-tencent-cloud-violates-aplv2/index.md b/content/blog/2021-01-23-tencent-cloud-violates-aplv2/index.md
index dfe4c9fddee..743b2623b8d 100644
--- a/content/blog/2021-01-23-tencent-cloud-violates-aplv2/index.md
+++ b/content/blog/2021-01-23-tencent-cloud-violates-aplv2/index.md
@@ -4,7 +4,7 @@ date: 2021-01-22
author: Apache SkyWalking
description: "Tencent Cloud Service, Tencent Service Watcher - TSW, have been reported as it violates Apache 2.0 License requirements."
tags:
-- License
+- Community
---
[Apache SkyWalking](https://skywalking.apache.org) is an open source APM for distributed system, Apache Software Foundation top-level project.
diff --git a/content/blog/2021-02-01-e2e-verifier-design/index.md b/content/blog/2021-02-01-e2e-verifier-design/index.md
index 7c22d808f7b..5ff9e62fbf0 100644
--- a/content/blog/2021-02-01-e2e-verifier-design/index.md
+++ b/content/blog/2021-02-01-e2e-verifier-design/index.md
@@ -3,9 +3,8 @@ title: "[Design] The Verifier of NGE2E"
date: 2021-02-01
author: "[Zhenxu Ke](https://github.com/kezhenxu94), Tetrate.io; [Huaxi Jiang](http://github.com/fgksgf), Committer; [Ke Zhang](http://github.com/HumbertZhang), Committer"
description: "The design of Next Generation End-to-End Testing Framework Verifier"
-
tags:
-- Testing
+- Engineering
---
## Background
diff --git a/content/blog/2021-02-07-infrastructure-monitoring/index.md b/content/blog/2021-02-07-infrastructure-monitoring/index.md
index af3bdd57824..0c377abe058 100644
--- a/content/blog/2021-02-07-infrastructure-monitoring/index.md
+++ b/content/blog/2021-02-07-infrastructure-monitoring/index.md
@@ -4,7 +4,7 @@ date: 2021-02-08
author: Kai Wan, Sheng Wu. tetrate.io
description: In this tutorial, learn how to use Apache SkyWalking for infrastructure monitoring
tags:
-- Infrastructure Monitoring
+- Metrics
---
diff --git a/content/blog/2021-02-09-skywalking-trace-threadpool/index.md b/content/blog/2021-02-09-skywalking-trace-threadpool/index.md
index dc76cad8495..17d6fe802ee 100644
--- a/content/blog/2021-02-09-skywalking-trace-threadpool/index.md
+++ b/content/blog/2021-02-09-skywalking-trace-threadpool/index.md
@@ -5,8 +5,7 @@ author: "Binglong Li"
description: "This post introduces how to propagate context between threads when using ThreadPoolExecutor,
which SkyWalking agent should not enhance"
tags:
-- Java
-- Agent
+- Agents
- Tracing
---
diff --git a/content/blog/2021-03-16-continuous-feedback/index.md b/content/blog/2021-03-16-continuous-feedback/index.md
index 30edb2849a6..3df04b751cc 100644
--- a/content/blog/2021-03-16-continuous-feedback/index.md
+++ b/content/blog/2021-03-16-continuous-feedback/index.md
@@ -5,8 +5,8 @@ author: "Brandon Fergerson"
description: "The JetBrains plugin providing continuous feedback capabilities via Apache SkyWalking."
tags:
- Tracing
-- Logs
-- Design
+- Logging
+- Engineering
---
diff --git a/content/blog/2021-05-09-OpenSearch-supported/index.md b/content/blog/2021-05-09-OpenSearch-supported/index.md
index e14657541ef..1879ca8d3c8 100644
--- a/content/blog/2021-05-09-OpenSearch-supported/index.md
+++ b/content/blog/2021-05-09-OpenSearch-supported/index.md
@@ -4,7 +4,7 @@ date: 2021-05-09
author: Sheng Wu, Tetrate.io, Apache SkyWalking Creator. [GitHub](https://github.com/wu-sheng) [Twitter](https://twitter.com/wusheng1108) [Linkedin](https://www.linkedin.com/in/wusheng1108)
description: "Elasticsearch server doesn't release under Apache 2.0 anymore. But we have another open option in OpenSearch project."
tags:
-- License
+- Community
---
We posted our [**Response to Elastic 2021 License Change**](/blog/2021-01-17-elastic-change-license/) blog 4 months ago. It doesn't have a big impact in
diff --git a/content/blog/2021-07-12-500-contributors-mark/index.md b/content/blog/2021-07-12-500-contributors-mark/index.md
index 78175de31ad..3d9f3d2fc5a 100644
--- a/content/blog/2021-07-12-500-contributors-mark/index.md
+++ b/content/blog/2021-07-12-500-contributors-mark/index.md
@@ -6,6 +6,8 @@ description: "SkyWalking has over 500 contributors based on GitHub repository st
startTime: 2021-07-01T00:00:00Z
endTime: 2021-08-01T10:00:00Z
poster: /images/500-mark.png
+tags:
+- Community
---
diff --git a/content/blog/2021-08-01-skywalking-8-intro/index.md b/content/blog/2021-08-01-skywalking-8-intro/index.md
index ab316994223..f70ef475ec6 100644
--- a/content/blog/2021-08-01-skywalking-8-intro/index.md
+++ b/content/blog/2021-08-01-skywalking-8-intro/index.md
@@ -3,9 +3,8 @@ title: "[Webinar] SkyWalking 8.x Introduction"
date: 2021-08-04
author: Sheng Wu, Tetrate.io, Apache SkyWalking Creator. [GitHub](https://github.com/wu-sheng) [Twitter](https://twitter.com/wusheng1108) [Linkedin](https://www.linkedin.com/in/wusheng1108)
description: "Introduce the concepts of Apache SkyWalking, why we built it, and how we build it."
-
tags:
-- Video
+- Community
---
[GOUP](https://www.linkedin.com/company/goupaz/) hosted a webinar, and invited [Sheng Wu](https://twitter.com/wusheng1108) to introduce
diff --git a/content/blog/2021-09-12-skywalking-python-profiling/index.md b/content/blog/2021-09-12-skywalking-python-profiling/index.md
index ff70c145547..ab1aa3a8159 100644
--- a/content/blog/2021-09-12-skywalking-python-profiling/index.md
+++ b/content/blog/2021-09-12-skywalking-python-profiling/index.md
@@ -3,11 +3,9 @@ title: "SkyWalking Python Agent Supports Profiling Now"
date: "2021-09-12"
author: "[Ke Zhang](http://github.com/HumbertZhang), Committer; [Sheng Wu](https://github.com/wu-sheng), Tetrate.io, Apache SkyWalking Creator; [Zhenxu Ke](https://github.com/kezhenxu94), Tetrate.io."
description: "This post introduces how to use profiling in SkyWalking Python Agent and the mechanism of profiling."
-
tags:
- Profiling
-- Python
-- Agent
+- Agents
---
The Java Agent of Apache SkyWalking has supported profiling since [v7.0.0](https://github.com/apache/skywalking/releases/tag/v7.0.0), and it enables users to troubleshoot the root cause of performance issues, and now we bring it into Python Agent.
diff --git a/content/blog/2021-11-23-design-of-iotdb-storage-option/index.md b/content/blog/2021-11-23-design-of-iotdb-storage-option/index.md
index d346b5617e8..d8960f7c0f4 100644
--- a/content/blog/2021-11-23-design-of-iotdb-storage-option/index.md
+++ b/content/blog/2021-11-23-design-of-iotdb-storage-option/index.md
@@ -3,10 +3,8 @@ title: "The Design of Apache IoTDB Storage Option"
date: "2021-11-23"
author: "[Wei Liu](https://github.com/LIU-WEI-git), School of Computer Science, NPU, China"
description: "This is an introduction to IoTDB Storage Option. It introduces some basic concept about IoTDB and the storage schema design."
-
tags:
- Storage
-- IoTDB
---
This plugin is one of the outcomes of [Apache IoTDB - Apache SkyWalking Adapter](https://summer.iscas.ac.cn/#/org/prodetail/210070771) in [Summer 2021 of Open Source Promotion Plan](https://summer.iscas.ac.cn/#/homepage). The design and development work is under the guidance of [@jixuan1989](https://github.com/jixuan1989) from IoTDB and [@wu-sheng](https://github.com/wu-sheng) from SkyWalking. Thanks for their guidance and the help from community.
diff --git a/content/blog/2021-12-06-extend-skywalking-with-nbb/index.md b/content/blog/2021-12-06-extend-skywalking-with-nbb/index.md
index 94bb22a563b..dc11cdd10ac 100644
--- a/content/blog/2021-12-06-extend-skywalking-with-nbb/index.md
+++ b/content/blog/2021-12-06-extend-skywalking-with-nbb/index.md
@@ -4,7 +4,7 @@ author: "Brandon Fergerson"
date: 2021-12-06
description: "SkyWalking is designed for easy customization, and with the latest release of Source++, it is now easier than ever to add non-breaking breakpoints to existing SkyWalking installations."
tags:
-- Observability
+- Community
---
Non-breaking breakpoints are breakpoints specifically designed for live production environments. With non-breaking breakpoints, reproducing production bugs locally or in staging is conveniently replaced with capturing them directly in production.
diff --git a/content/blog/2021-12-08-apisix-integrate-skywalking-plugin/apisix-integrate-skywalking-plugin.md b/content/blog/2021-12-08-apisix-integrate-skywalking-plugin/apisix-integrate-skywalking-plugin.md
index 913fd32a8da..5c0a42d36e4 100644
--- a/content/blog/2021-12-08-apisix-integrate-skywalking-plugin/apisix-integrate-skywalking-plugin.md
+++ b/content/blog/2021-12-08-apisix-integrate-skywalking-plugin/apisix-integrate-skywalking-plugin.md
@@ -4,8 +4,7 @@ author: "[Haochao Zhuang](https://github.com/dmsolr)"
date: 2021-12-08
description: "This paper mainly introduces two Apache APISIX integrated SkyWalking log plug-ins to provide a more convenient operation and environment for log processing in Apache APISIX."
tags:
-- Observability
-- APISIX
+- Agents
---
In the field of observability, the three main directions of data collection and analysis, Metrics, Logger and Tracing, are usually used to achieve insight into the operational status of applications.
diff --git a/content/blog/2021-12-08-application-guide-of-iotdb-storage-option/index.md b/content/blog/2021-12-08-application-guide-of-iotdb-storage-option/index.md
index cb58f190a8c..ee73ea8ef30 100644
--- a/content/blog/2021-12-08-application-guide-of-iotdb-storage-option/index.md
+++ b/content/blog/2021-12-08-application-guide-of-iotdb-storage-option/index.md
@@ -3,10 +3,8 @@ title: "The Application Guide of Apache IoTDB Storage Option"
date: "2021-12-08"
author: "[Wei Liu](https://github.com/LIU-WEI-git), School of Computer Science, NPU, China"
description: "This guide will tell you how to use SkyWalking Showcase to run demo applications or start manually step by step. In addition, it introduces some methods about visiting IoTDB server and gives some query SQLs as example."
-
tags:
- Storage
-- IoTDB
---
This document is one of the outcomes of [Apache IoTDB - Apache SkyWalking Adapter](https://summer.iscas.ac.cn/#/org/prodetail/210070771) in [Summer 2021 of Open Source Promotion Plan](https://summer.iscas.ac.cn/#/homepage). The design and development work is under the guidance of [@jixuan1989](https://github.com/jixuan1989) from IoTDB and [@wu-sheng](https://github.com/wu-sheng) from SkyWalking. Thanks for their guidance and the help from community.
diff --git a/content/blog/2021-12-13-skywalking-nginx-agent-integration/index.md b/content/blog/2021-12-13-skywalking-nginx-agent-integration/index.md
index 2a5138a6382..070e2873d98 100644
--- a/content/blog/2021-12-13-skywalking-nginx-agent-integration/index.md
+++ b/content/blog/2021-12-13-skywalking-nginx-agent-integration/index.md
@@ -4,7 +4,7 @@ date: 2021-12-13
author: shiyan.xiong, the user of skywalking
description: "provide a path to integrate skywalking-nginx-lua to nginx and avoid you falling pit"
tags:
-- Nginx
+- Agents
---
diff --git a/content/blog/2021-12-21-better-observability-for-chaos-engineering/index.md b/content/blog/2021-12-21-better-observability-for-chaos-engineering/index.md
index 6aff85c2944..636b4e16761 100644
--- a/content/blog/2021-12-21-better-observability-for-chaos-engineering/index.md
+++ b/content/blog/2021-12-21-better-observability-for-chaos-engineering/index.md
@@ -2,7 +2,8 @@
title: 'Chaos Mesh + SkyWalking: Better Observability for Chaos Engineering'
date: 2021-12-21
author: Ningxuan Wang
-tags: [Chaos Mesh, Chaos Engineering, Tutorial]
+tags:
+- Cloud Native
---
diff --git a/content/blog/2022-01-24-scaling-with-apache-skywalking/index.md b/content/blog/2022-01-24-scaling-with-apache-skywalking/index.md
index 5a5641b397a..36bf6871817 100644
--- a/content/blog/2022-01-24-scaling-with-apache-skywalking/index.md
+++ b/content/blog/2022-01-24-scaling-with-apache-skywalking/index.md
@@ -3,9 +3,8 @@ title: "Scaling with Apache SkyWalking"
date: 2022-01-24
author: Han Liu, Sheng Wu
description: "Introduce how to load balance the traffic between SkyWalking backend and agent through SkyWalking Satellite"
-
tags:
-- Performance
+- Profiling
---
## Background
diff --git a/content/blog/2022-01-28-volcengine-violates-aplv2/index.md b/content/blog/2022-01-28-volcengine-violates-aplv2/index.md
index 80ab6896c48..a58205e5b12 100644
--- a/content/blog/2022-01-28-volcengine-violates-aplv2/index.md
+++ b/content/blog/2022-01-28-volcengine-violates-aplv2/index.md
@@ -4,7 +4,7 @@ date: 2022-01-28
author: Apache SkyWalking
description: "Volcengine Inc.(火山引擎) Application Performance Monitoring - Distributed Tracing (应用性能监控全链路版) redistributed Apache SkyWalking illegally. They don't follow the Apache 2.0 License requirements"
tags:
-- License
+- Community
---
[Apache SkyWalking](https://skywalking.apache.org) is an open-source APM for a distributed system, Apache Software Foundation top-level project.
diff --git a/content/blog/2022-04-14-integrating-skywalking-with-source-code/index.md b/content/blog/2022-04-14-integrating-skywalking-with-source-code/index.md
index ad9356bb569..6eeea2dacff 100644
--- a/content/blog/2022-04-14-integrating-skywalking-with-source-code/index.md
+++ b/content/blog/2022-04-14-integrating-skywalking-with-source-code/index.md
@@ -4,7 +4,7 @@ author: "Brandon Fergerson"
date: 2022-04-14
description: "In this article, we will introduce a new concept in Source++, the open-source live-coding platform, specifically designed to allow developers to monitor production applications more intuitively."
tags:
-- Observability
+- Community
---
## Introduction
diff --git a/content/blog/2022-04-19-How-to-use-the-java-agent-injector/index.md b/content/blog/2022-04-19-How-to-use-the-java-agent-injector/index.md
index 504737906ec..fbd311585de 100644
--- a/content/blog/2022-04-19-How-to-use-the-java-agent-injector/index.md
+++ b/content/blog/2022-04-19-How-to-use-the-java-agent-injector/index.md
@@ -3,9 +3,8 @@ title: "How to use the java agent injector?"
date: 2022-04-19
author: "[Ye Cao](https://github.com/dashanji), Apache SkyWalking Committer; [Hongtao Gao](https://github.com/hanahmily), Apache SkyWalking PMC member, Tetrate.io."
description: "Introduce how to quickly get started the java agent injector based on SWCK"
-
tags:
-- User Manual
+- Engineering
---
### content:
diff --git a/content/blog/2022-05-08-Apache-ShenYu(incubating)-Integrated-Skywalking-Practice-Observability/index.md b/content/blog/2022-05-08-Apache-ShenYu(incubating)-Integrated-Skywalking-Practice-Observability/index.md
index 28fea6f3074..7a594887022 100644
--- a/content/blog/2022-05-08-Apache-ShenYu(incubating)-Integrated-Skywalking-Practice-Observability/index.md
+++ b/content/blog/2022-05-08-Apache-ShenYu(incubating)-Integrated-Skywalking-Practice-Observability/index.md
@@ -4,12 +4,9 @@ date: 2022-05-08
author: hutaishi
description: This article introduces the principle of ShenYu(incubating) plugin implementation and the observability practice of ShenYu(incubating) gateway
tags:
-- SkyWalking
-- Apache ShenYu (incubating)
-- Observability
+- Agents
- Tracing
- Metrics
-- Logging
---
### Content
diff --git a/content/blog/2022-07-05-pinpoint-service-mesh-critical-performance-impact-by-using-ebpf/index.md b/content/blog/2022-07-05-pinpoint-service-mesh-critical-performance-impact-by-using-ebpf/index.md
index 617381f04dd..de44e121523 100644
--- a/content/blog/2022-07-05-pinpoint-service-mesh-critical-performance-impact-by-using-ebpf/index.md
+++ b/content/blog/2022-07-05-pinpoint-service-mesh-critical-performance-impact-by-using-ebpf/index.md
@@ -4,11 +4,8 @@ date: 2022-07-05
author: Han Liu, Sheng Wu
description: Introducing performance analysis in production with SkyWalking Rover
tags:
-- SkyWalking
-- Observability
-- eBPF
-- service mesh
-- profiling
+- Profiling
+- Cloud Native
---
### Content
diff --git a/content/blog/2022-08-11-kongcast-20-distributed-tracing-using-skywalking-kong/index.md b/content/blog/2022-08-11-kongcast-20-distributed-tracing-using-skywalking-kong/index.md
index f4f1629c4bd..4fd03928a93 100644
--- a/content/blog/2022-08-11-kongcast-20-distributed-tracing-using-skywalking-kong/index.md
+++ b/content/blog/2022-08-11-kongcast-20-distributed-tracing-using-skywalking-kong/index.md
@@ -4,12 +4,9 @@ date: 2022-08-11
author: Andrew Kew. QuadCorps Founder [GitHub](https://github.com/andrewgkew) [Linkedin](https://www.linkedin.com/in/andrewgkew) [Website](https://quadcorps.co.uk)
description: Kongcast Episode 20 - Distributed Tracing on Kubernetes
tags:
-- SkyWalking
-- Observability
-- Kong
-- Conference
-- Video
-- Demo
+- Agents
+- Engineering
+- Community
---
Observability essential when working with distributed systems. Built on 3 pillars of metrics, logging and
diff --git a/content/blog/2022-12-13-how-to-run-apache-skywalking-on-aws-eks-rds/index.md b/content/blog/2022-12-13-how-to-run-apache-skywalking-on-aws-eks-rds/index.md
index 964aa8367bc..a7d931ac989 100644
--- a/content/blog/2022-12-13-how-to-run-apache-skywalking-on-aws-eks-rds/index.md
+++ b/content/blog/2022-12-13-how-to-run-apache-skywalking-on-aws-eks-rds/index.md
@@ -4,12 +4,9 @@ date: 2022-12-13
author: "[Zhenxu Ke](https://github.com/kezhenxu94)"
description: "Introduce how to quickly set up Apache SkyWalking on AWS EKS and RDS/Aurora"
tags:
-- SkyWalking
-- Observability
-- Demo
-- AWS
-- RDS
-- Aurora
+- Cloud Native
+- Storage
+- Engineering
---
## Introduction
diff --git a/content/blog/2023-01-03-aliyun-copy-page/index.md b/content/blog/2023-01-03-aliyun-copy-page/index.md
index e0715c86805..2c08f2f5a3f 100644
--- a/content/blog/2023-01-03-aliyun-copy-page/index.md
+++ b/content/blog/2023-01-03-aliyun-copy-page/index.md
@@ -4,7 +4,7 @@ date: 2023-01-03
author: Apache SkyWalking
description: "Aliyun's trace analysis service copied SkyWalking's UI design but declares it as their codes, rather than a fork."
tags:
-- License
+- Community
---
[Apache SkyWalking](https://skywalking.apache.org) is an open-source APM for a distributed system, Apache Software Foundation top-level project.
diff --git a/content/blog/2023-03-12-skywalking-aws-s3-eks/index.md b/content/blog/2023-03-12-skywalking-aws-s3-eks/index.md
index 7184427acea..14f837ffb57 100644
--- a/content/blog/2023-03-12-skywalking-aws-s3-eks/index.md
+++ b/content/blog/2023-03-12-skywalking-aws-s3-eks/index.md
@@ -3,6 +3,8 @@ title: "Monitoring AWS EKS and S3 with SkyWalking"
date: 2023-03-12
author: Puguang Yang
description: This article shows how to use SkyWalking to monitor EKS and S3.
+tags:
+- Community
---
diff --git a/content/blog/2023-03-13-skywalking-aws-dynamodb/index.md b/content/blog/2023-03-13-skywalking-aws-dynamodb/index.md
index ceb79667e69..db774f42818 100644
--- a/content/blog/2023-03-13-skywalking-aws-dynamodb/index.md
+++ b/content/blog/2023-03-13-skywalking-aws-dynamodb/index.md
@@ -3,6 +3,8 @@ title: "Monitoring DynamoDB with SkyWalking"
date: 2023-03-13
author: Yueqin Zhang
description: This article shows how to use SkyWalking to monitor DynamoDB.
+tags:
+- Community
---
diff --git a/content/blog/2023-03-17-build-grafana-dashboards-for-apache-skywalking-native-promql-support/index.md b/content/blog/2023-03-17-build-grafana-dashboards-for-apache-skywalking-native-promql-support/index.md
index 9b80f75eea1..2a0d5e971ae 100644
--- a/content/blog/2023-03-17-build-grafana-dashboards-for-apache-skywalking-native-promql-support/index.md
+++ b/content/blog/2023-03-17-build-grafana-dashboards-for-apache-skywalking-native-promql-support/index.md
@@ -4,9 +4,7 @@ date: 2023-03-16
author: "Kai Wan"
description: "Introduce what is PromQL Service in SkyWalking and how to use it to build Grafana dashboards."
tags:
-- PromQL
-- Metric
-- Grafana
+- Metrics
---
## Background
diff --git a/content/blog/2023-06-01-quick-start-with-skywalking-go-agent/index.md b/content/blog/2023-06-01-quick-start-with-skywalking-go-agent/index.md
index fc05445e9f0..43532295d36 100644
--- a/content/blog/2023-06-01-quick-start-with-skywalking-go-agent/index.md
+++ b/content/blog/2023-06-01-quick-start-with-skywalking-go-agent/index.md
@@ -4,8 +4,7 @@ date: 2023-06-01
author: "Han Liu"
description: "Demonstrates how to integrate your application with SkyWalking Go and view the results in the SkyWalking UI."
tags:
-- Golang
-- Agent
+- Agents
- Tracing
---
diff --git a/content/blog/2023-06-13-celebrate-22k-stars/index.md b/content/blog/2023-06-13-celebrate-22k-stars/index.md
index 390a5c350c1..418cb5792e7 100644
--- a/content/blog/2023-06-13-celebrate-22k-stars/index.md
+++ b/content/blog/2023-06-13-celebrate-22k-stars/index.md
@@ -6,6 +6,8 @@ description: "The Apache SkyWalking community is thrilled to reach the milestone
startTime: 2023-06-13T00:00:00Z
endTime: 2023-06-30T10:00:00Z
poster: /blog/2023-06-13-celebrate-22k-stars/skywalking-22k-post.gif
+tags:
+- Community
---
# Celebrating 22k Stars!
diff --git a/content/blog/2023-06-25-intruducing-continuous-profiling-skywalking-with-ebpf/index.md b/content/blog/2023-06-25-intruducing-continuous-profiling-skywalking-with-ebpf/index.md
index 9080dfcb4c0..5f0f0e1b1be 100644
--- a/content/blog/2023-06-25-intruducing-continuous-profiling-skywalking-with-ebpf/index.md
+++ b/content/blog/2023-06-25-intruducing-continuous-profiling-skywalking-with-ebpf/index.md
@@ -4,7 +4,6 @@ date: 2023-06-25
author: "Han Liu"
description: "Introduce and demonstrate how SkyWalking implements eBPF-based process monitoring with few manual engagements. The profiling could be automatically activated driven by the preset conditions."
tags:
-- eBPF
- Profiling
- Tracing
---
diff --git a/content/blog/2023-07-31-skywalking-go-0.2.0-release/index.md b/content/blog/2023-07-31-skywalking-go-0.2.0-release/index.md
index a8cc08474fa..81f6aef6102 100644
--- a/content/blog/2023-07-31-skywalking-go-0.2.0-release/index.md
+++ b/content/blog/2023-07-31-skywalking-go-0.2.0-release/index.md
@@ -4,8 +4,7 @@ date: 2023-07-31
author: "Han Liu"
description: "Introduction the new features of SkyWalking Go 0.2.0"
tags:
-- Golang
-- Agent
+- Agents
- Metrics
- Logging
---
diff --git a/content/blog/2023-08-13-hashicorp-bsl/index.md b/content/blog/2023-08-13-hashicorp-bsl/index.md
index e0bacea2c03..17b3e3ee30e 100644
--- a/content/blog/2023-08-13-hashicorp-bsl/index.md
+++ b/content/blog/2023-08-13-hashicorp-bsl/index.md
@@ -5,6 +5,8 @@ author: "Apache SkyWalking"
description: "HashiCorp announced to adopt the Business Source License from Mozilla Public License v2.0 (MPL 2.0). SkyWalking community posts the statement for our own users to explain the evaluation of the potential implications."
startTime: 2023-08-13T00:00:00Z
endTime: 2023-09-30T10:00:00Z
+tags:
+- Community
---
On Aug. 10th, 2023, HashiCorp announced to adopt the Business Source License (BSL) from Mozilla Public License v2.0 (MPL 2.0), here is their [post](https://www.hashicorp.com/blog/hashicorp-adopts-business-source-license).
diff --git a/content/blog/2023-10-18-skywalking-toolkit-trace/index.md b/content/blog/2023-10-18-skywalking-toolkit-trace/index.md
index a90c1437e33..056035ccffa 100644
--- a/content/blog/2023-10-18-skywalking-toolkit-trace/index.md
+++ b/content/blog/2023-10-18-skywalking-toolkit-trace/index.md
@@ -3,7 +3,8 @@ title: "Detailed explanation of SkyWalking Go Toolkit Trace"
date: 2023-10-18
author: "Alipebt"
description: "This article shows the introduction and usage of toolkit trace provided by Skywalking Go to users."
-
+tags:
+- Tracing
---
## Background
diff --git a/content/blog/2023-12-04-coffee+software-with-josh-long/index.md b/content/blog/2023-12-04-coffee+software-with-josh-long/index.md
index a4789cee6c1..170975528a3 100644
--- a/content/blog/2023-12-04-coffee+software-with-josh-long/index.md
+++ b/content/blog/2023-12-04-coffee+software-with-josh-long/index.md
@@ -3,7 +3,7 @@ title: "[Video] Coffee + Software with Josh Long - Apache SkyWalking with Sheng
date: 2023-12-04
author: Sheng Wu, Josh Long, Trista Pan
tags:
-- Video
+- Community
---
🚀 Dive into the World of Cutting-Edge Technology with Apache's Finest! 🌐 Join me today as we embark on an exhilarating journey with two of Apache's most brilliant minds - Sheng Wu and Trista Pan. We're exploring the realms of Apache SkyWalking and Apache ShardingSphere, two groundbreaking initiatives that are reshaping the landscape of open-source technology. 🌟
diff --git a/content/blog/2023-12-23-monitoring-nginx-by-skywalking/index.md b/content/blog/2023-12-23-monitoring-nginx-by-skywalking/index.md
index 7585c41dde7..5b98fe528a3 100644
--- a/content/blog/2023-12-23-monitoring-nginx-by-skywalking/index.md
+++ b/content/blog/2023-12-23-monitoring-nginx-by-skywalking/index.md
@@ -4,7 +4,7 @@ author: "Xiang Wei"
date: 2023-12-23
description: "SkyWalking 9.7 introduces a new Nginx monitoring dashboard, and this article will demonstrate the usage of this monitoring dashboard."
tags:
-- Nginx
+- Agents
---
## Background
diff --git a/content/blog/2024-010-15-introduce-r3-to-recognition-restful-url/index.md b/content/blog/2024-010-15-introduce-r3-to-recognition-restful-url/index.md
index b934b9a1a1e..103cb52948e 100644
--- a/content/blog/2024-010-15-introduce-r3-to-recognition-restful-url/index.md
+++ b/content/blog/2024-010-15-introduce-r3-to-recognition-restful-url/index.md
@@ -4,8 +4,8 @@ date: 2024-10-17
author: Han Liu
description: "This article will introduce how to use R3 to identify RESTFul URIs and integrate them into SkyWalking."
tags:
-- RESTFul
-- R3
+- Agents
+- Tracing
---
## Background
diff --git a/content/blog/2024-03-12-monitoring-clickhouse-through-skywalking/index.md b/content/blog/2024-03-12-monitoring-clickhouse-through-skywalking/index.md
index 45f9d1bc261..87ac6a8a906 100644
--- a/content/blog/2024-03-12-monitoring-clickhouse-through-skywalking/index.md
+++ b/content/blog/2024-03-12-monitoring-clickhouse-through-skywalking/index.md
@@ -4,7 +4,7 @@ date: 2024-03-12
author: Ziyan Chen
description: "SkyWalking 10.0 introduces a new ClickHouse server monitoring dashboard, and this article will demonstrate the usage of this monitoring dashboard."
tags:
-- ClickHouse
+- Storage
---
## Background
diff --git a/content/blog/2024-03-18-monitor-kubernetes-network-by-ebpf/index.md b/content/blog/2024-03-18-monitor-kubernetes-network-by-ebpf/index.md
index 4453b886b53..00319c6bc46 100644
--- a/content/blog/2024-03-18-monitor-kubernetes-network-by-ebpf/index.md
+++ b/content/blog/2024-03-18-monitor-kubernetes-network-by-ebpf/index.md
@@ -3,6 +3,8 @@ title: "Monitoring Kubernetes network traffic by using eBPF"
date: 2024-03-18
author: Han Liu
description: This article demonstrates how SkyWalking uses eBPF technology to monitor network traffic on Kubernetes.
+tags:
+- Profiling
---
## Background
diff --git a/content/blog/2024-04-19-flink-monitoring-by-skywalking/index.md b/content/blog/2024-04-19-flink-monitoring-by-skywalking/index.md
index 656f272a89c..bbdaff7f919 100644
--- a/content/blog/2024-04-19-flink-monitoring-by-skywalking/index.md
+++ b/content/blog/2024-04-19-flink-monitoring-by-skywalking/index.md
@@ -4,7 +4,7 @@ author: "YiMing Shao"
date: 2025-04-25
description: "SkyWalking 10.3 introduces a new Flink monitoring dashboard, and this article will demonstrate the usage of this monitoring dashboard."
tags:
-- Flink
+- Metrics
---
# Background
diff --git a/content/blog/2024-04-19-monitoring-activemq-through-skywalking/index.md b/content/blog/2024-04-19-monitoring-activemq-through-skywalking/index.md
index 60ede49b6c2..c27c2bccfe6 100644
--- a/content/blog/2024-04-19-monitoring-activemq-through-skywalking/index.md
+++ b/content/blog/2024-04-19-monitoring-activemq-through-skywalking/index.md
@@ -4,7 +4,7 @@ date: 2024-04-19
author: Ziyan Chen
description: "This article will demonstrate the usage of the new ActiveMQ monitoring dashboard."
tags:
-- ActiveMQ
+- Agents
---
diff --git a/content/blog/2024-05-13-skywalking-10-release/index.md b/content/blog/2024-05-13-skywalking-10-release/index.md
index b03ca20f84d..2451d9018ba 100644
--- a/content/blog/2024-05-13-skywalking-10-release/index.md
+++ b/content/blog/2024-05-13-skywalking-10-release/index.md
@@ -4,11 +4,9 @@ date: 2024-05-13
author: Kai Wan, Sheng Wu. tetrate.io
description: "Introduce what's new in SkyWalking 10, including Service Hierarchy, Kubernetes Network Monitoring by eBPF, BanyanDB, and more."
tags:
-- Release Blog
-- Service Hierarchy
-- Kubernetes
-- eBPF
-- BanyanDB
+- Release
+- Cloud Native
+- Profiling
---
The Apache SkyWalking team today announced the 10 release. SkyWalking 10 provides a host of groundbreaking features and enhancements.
diff --git a/content/blog/2024-06-04-banyandb-0.6-release/index.md b/content/blog/2024-06-04-banyandb-0.6-release/index.md
index 078aaf1adf9..7795e2df48e 100644
--- a/content/blog/2024-06-04-banyandb-0.6-release/index.md
+++ b/content/blog/2024-06-04-banyandb-0.6-release/index.md
@@ -4,9 +4,8 @@ date: 2024-06-04
author: Hongtao Gao, Sheng Wu. tetrate.io
description: "Introducing What's New in BanyanDB v0.6 and a Benchmark Test Against Elasticsearch"
tags:
-- Release Blog
+- Release
- Storage
-- BanyanDB
---
# Introduction
diff --git a/content/blog/2024-10-20-skywalking-go-toolkit-metrics-log/index.md b/content/blog/2024-10-20-skywalking-go-toolkit-metrics-log/index.md
index 325f864771b..953c2dfb5f1 100644
--- a/content/blog/2024-10-20-skywalking-go-toolkit-metrics-log/index.md
+++ b/content/blog/2024-10-20-skywalking-go-toolkit-metrics-log/index.md
@@ -3,7 +3,8 @@ title: "Use of SkyWalking Go Toolkit Log and Metrics"
date: 2024-10-20
author: "ShyunnY"
description: "This document presents an introduction to and usage of the toolkit Log and Metrics in SkyWalking Go."
-
+tags:
+- Logging
---
## Intro
diff --git a/content/blog/2024-12-09-skywalking-async-profiler/index.md b/content/blog/2024-12-09-skywalking-async-profiler/index.md
index d911812016b..e5f8842576e 100644
--- a/content/blog/2024-12-09-skywalking-async-profiler/index.md
+++ b/content/blog/2024-12-09-skywalking-async-profiler/index.md
@@ -3,6 +3,8 @@ title: "Profiling Java application with SkyWalking bundled async-profiler"
date: 2024-12-09
author: "zhengziyi0117"
description: "This document presents an introduction to and usage of the async-profiler in SkyWalking."
+tags:
+- Profiling
---
## Background
diff --git a/content/blog/2025-02-24-improving-alert-accuracy-with-dynamic-baselines/index.md b/content/blog/2025-02-24-improving-alert-accuracy-with-dynamic-baselines/index.md
index a3aacc613fe..4c760c11099 100644
--- a/content/blog/2025-02-24-improving-alert-accuracy-with-dynamic-baselines/index.md
+++ b/content/blog/2025-02-24-improving-alert-accuracy-with-dynamic-baselines/index.md
@@ -3,6 +3,8 @@ title: "Improving Alert Accuracy with Dynamic Baselines"
date: 2025-02-24
author: "Han Liu"
description: "This article explores how to leverage history metrics to generate dynamic baselines for a future period, thereby enhancing the accuracy of alerts."
+tags:
+- Community
---
## Background
diff --git a/content/blog/2025-03-06-introduction-to-skywalking-ruby/index.md b/content/blog/2025-03-06-introduction-to-skywalking-ruby/index.md
index f7bba11ddc0..1ea55e61526 100644
--- a/content/blog/2025-03-06-introduction-to-skywalking-ruby/index.md
+++ b/content/blog/2025-03-06-introduction-to-skywalking-ruby/index.md
@@ -5,9 +5,8 @@ author: "Zixin Zhou"
description: "This article demonstrates how to integrate applications with SkyWalking Ruby and provides a
brief interpretation of the implementation mechanism of Ruby auto-instrumentation plugins."
tags:
- - Ruby
- - Agent
- - Tracing
+- Agents
+- Tracing
---
## Background
diff --git a/content/blog/2026-01-01-skywalking-2025-year-in-review/index.md b/content/blog/2026-01-01-skywalking-2025-year-in-review/index.md
index cfd11b68288..5c5c9422239 100644
--- a/content/blog/2026-01-01-skywalking-2025-year-in-review/index.md
+++ b/content/blog/2026-01-01-skywalking-2025-year-in-review/index.md
@@ -3,13 +3,11 @@ title: "Apache SkyWalking 2025 in Review: Making BanyanDB Ready for Production"
date: 2026-01-01
author: Sheng Wu
description: "A review of Apache SkyWalking community work in 2025, with a focus on BanyanDB becoming the production-grade native storage for SkyWalking."
+endTime: 2026-01-01T23:00:00Z
tags:
-- Community
-- Year in Review
-- BanyanDB
+- Release
- Storage
-- Release Blog
-endTime: 2026-01-01T23:00:00Z
+- Community
---
2025 was a very focused year for the Apache SkyWalking community: **moving BanyanDB from “native storage” to a “production-ready default”**, and making SkyWalking APM fully benefit from that foundation.
diff --git a/content/blog/2026-03-08-agentic-vibe-coding/index.md b/content/blog/2026-03-08-agentic-vibe-coding/index.md
index cbf8f1e5bad..f48bcbb5c09 100644
--- a/content/blog/2026-03-08-agentic-vibe-coding/index.md
+++ b/content/blog/2026-03-08-agentic-vibe-coding/index.md
@@ -3,15 +3,11 @@ title: "Agentic Vibe Coding in a Mature OSS Project: What Worked, What Didn't"
date: 2026-03-08
author: Sheng Wu
description: "What happens when you apply agentic AI coding to a mature open-source project with real users, real compatibility contracts, and real consequences? 77K lines changed in 5 weeks — here's what I learned."
+endTime: 2026-03-08T23:00:00Z
tags:
- AI
-- Agentic Coding
-- Vibe Coding
-- TDD
-- Architecture
-- Engineering Productivity
-- Open Source
-endTime: 2026-03-08T23:00:00Z
+- Engineering
+- Community
---
Most "vibe coding" stories start with a greenfield project. This one doesn't.
diff --git a/content/blog/2026-03-13-how-ai-changed-the-economics-of-architecture/index.md b/content/blog/2026-03-13-how-ai-changed-the-economics-of-architecture/index.md
index 7de63a6bd35..1654afd6e85 100644
--- a/content/blog/2026-03-13-how-ai-changed-the-economics-of-architecture/index.md
+++ b/content/blog/2026-03-13-how-ai-changed-the-economics-of-architecture/index.md
@@ -4,13 +4,9 @@ date: 2026-03-13
author: Sheng Wu
description: "A case study in how AI changed the economics of architecture in a mature project by making better designs cheaper to prototype, validate, and refine."
tags:
-- GraalVM
-- Native Image
-- Performance
- Cloud Native
-- Serverless
+- Profiling
- AI
-- Claude
---
*SkyWalking GraalVM Distro: A case study in turning runnable PoCs into a repeatable migration pipeline.*
diff --git a/content/blog/2026-03-13-skywalking-graalvm-distro-design-and-benchmarks/index.md b/content/blog/2026-03-13-skywalking-graalvm-distro-design-and-benchmarks/index.md
index d0f343461aa..04fe0df89be 100644
--- a/content/blog/2026-03-13-skywalking-graalvm-distro-design-and-benchmarks/index.md
+++ b/content/blog/2026-03-13-skywalking-graalvm-distro-design-and-benchmarks/index.md
@@ -4,12 +4,9 @@ date: 2026-03-13
author: Sheng Wu
description: "A technical deep-dive into SkyWalking GraalVM Distro — how we turned a mature, reflection-heavy Java observability backend into a native binary with a repeatable migration pipeline."
tags:
-- GraalVM
-- Native Image
-- Performance
- Cloud Native
-- Serverless
-- BanyanDB
+- Profiling
+- Storage
---
*A technical deep-dive into how we migrated Apache SkyWalking OAP to GraalVM Native Image — not as a one-off port, but as a repeatable pipeline that stays aligned with upstream.*
diff --git a/content/blog/2026-04-02-envoy-ai-gateway-monitoring/index.md b/content/blog/2026-04-02-envoy-ai-gateway-monitoring/index.md
index eadaaa3f163..5ae15136312 100644
--- a/content/blog/2026-04-02-envoy-ai-gateway-monitoring/index.md
+++ b/content/blog/2026-04-02-envoy-ai-gateway-monitoring/index.md
@@ -4,9 +4,8 @@ date: 2026-04-02
author: "Sheng Wu"
description: "Set up full-stack observability for your AI/LLM traffic using Envoy AI Gateway, SkyWalking OAP 10.4.0, and BanyanDB 0.10.0."
tags:
-- GenAI
-- Envoy
-- Observability
+- AI
+- Cloud Native
---
## The Problem: Flying Blind with LLM Traffic
diff --git a/content/blog/2026-04-05-virtual-genai-monitoring/index.md b/content/blog/2026-04-05-virtual-genai-monitoring/index.md
index 510aea99b78..2fadb0d833c 100644
--- a/content/blog/2026-04-05-virtual-genai-monitoring/index.md
+++ b/content/blog/2026-04-05-virtual-genai-monitoring/index.md
@@ -4,10 +4,8 @@ author: "YiMing Shao"
date: 2026-04-05
description: "SkyWalking 10.4 introduces the Virtual GenAI dashboard. This article explores how to use this new feature to monitor and optimize LLM integrations."
tags:
-- GenAI
-- LLM
-- Observability
-- Opentelemetry
+- AI
+- Metrics
---
# The Problem: As Applications "Consume" LLMs, Monitoring Leaves a Blind Spot
diff --git a/content/blog/2026-04-08-traceql/index.md b/content/blog/2026-04-08-traceql/index.md
index 884054606b2..c5f04f73c65 100644
--- a/content/blog/2026-04-08-traceql/index.md
+++ b/content/blog/2026-04-08-traceql/index.md
@@ -4,11 +4,8 @@ author: "Kai Wan"
date: 2026-04-08
description: "SkyWalking 10.4 introduces TraceQL support, implementing Grafana Tempo's HTTP query APIs so that Grafana can query and visualize traces stored in SkyWalking."
tags:
-- TraceQL
-- Grafana
-- Tempo
- Tracing
-- Zipkin
+- Metrics
---
# Query SkyWalking and Zipkin Traces with TraceQL and Visualize in Grafana
diff --git a/content/blog/2026-04-30-mini-program-monitoring-with-skywalking/index.md b/content/blog/2026-04-30-mini-program-monitoring-with-skywalking/index.md
index 4618b63c2da..71eb83b8026 100644
--- a/content/blog/2026-04-30-mini-program-monitoring-with-skywalking/index.md
+++ b/content/blog/2026-04-30-mini-program-monitoring-with-skywalking/index.md
@@ -4,11 +4,9 @@ author: "Sheng Wu"
date: 2026-04-30
description: "SkyAPM/mini-program-monitor and SkyWalking OAP together extend SkyWalking's end-user monitoring to WeChat and Alipay Mini Programs. This post focuses on the data path, the cross-platform abstraction, and the OAP-side integration."
tags:
-- Mini Program
-- WeChat
-- Alipay
-- OTLP
-- End User Monitoring
+- Metrics
+- Agents
+- Community
---
Mini programs are a major part of the mobile experience in China, but the open-source observability ecosystem has long focused on web browsers and native apps. SkyWalking already covers browser (client-js), iOS, and the server side; mini programs and Android were the remaining gaps. With [SkyAPM/mini-program-monitor](https://github.com/SkyAPM/mini-program-monitor) joining the SkyWalking ecosystem, the mini-program half of that gap is closed — one SDK supports both WeChat and Alipay, and [...]
diff --git a/content/blog/boost-root-cause-analysis-quickly-with-skywalking-new-trace-metrics-association-feature/index.md b/content/blog/boost-root-cause-analysis-quickly-with-skywalking-new-trace-metrics-association-feature/index.md
index 07cd1571a8f..3aedd0c68bd 100644
--- a/content/blog/boost-root-cause-analysis-quickly-with-skywalking-new-trace-metrics-association-feature/index.md
+++ b/content/blog/boost-root-cause-analysis-quickly-with-skywalking-new-trace-metrics-association-feature/index.md
@@ -4,8 +4,8 @@ date: 2022-12-19
author: "Sheng Wu"
description: "SkyWalking 9.3.0 introduced the new capability that help you visualize the connection between traces and corresponding metrics quickly."
tags:
-- Trace
-- Metric
+- Tracing
+- Metrics
---
diff --git a/content/blog/diagnose-service-mesh-network-performance-with-ebpf/index.md b/content/blog/diagnose-service-mesh-network-performance-with-ebpf/index.md
index 755b8cdca64..c2555cf4baf 100644
--- a/content/blog/diagnose-service-mesh-network-performance-with-ebpf/index.md
+++ b/content/blog/diagnose-service-mesh-network-performance-with-ebpf/index.md
@@ -4,8 +4,7 @@ date: 2022-09-27
author: "Han Liu, Sheng Wu"
description: "This article will show how to use Apache SkyWalking with eBPF to make network troubleshooting easier in a service mesh environment."
tags:
-- eBPF
-- Performance
+- Profiling
---
## Background
diff --git a/content/blog/e2e-design/index.md b/content/blog/e2e-design/index.md
index 2938e3facaa..e4bcb990886 100644
--- a/content/blog/e2e-design/index.md
+++ b/content/blog/e2e-design/index.md
@@ -3,9 +3,8 @@ title: "[Design] NGE2E - Next Generation End-to-End Testing Framework"
date: 2020-12-14
author: "[Zhenxu Ke](https://github.com/kezhenxu94), Tetrate.io; [Huaxi Jiang](http://github.com/fgksgf), Committer; [Ke Zhang](http://github.com/HumbertZhang), Committer"
description: "The design of Next Generation End-to-End Testing Framework"
-
tags:
-- Testing
+- Engineering
---
NGE2E is the next generation End-to-End Testing framework that aims to help developers to set up, debug, and verify E2E tests with ease. It's built based on the lessons learnt from tens of hundreds of test cases in the SkyWalking main repo.
diff --git a/content/blog/ebpf-enhanced-http-observability-l7-metrics-and-tracing/index.md b/content/blog/ebpf-enhanced-http-observability-l7-metrics-and-tracing/index.md
index 5dfe326384d..254ad2d6353 100644
--- a/content/blog/ebpf-enhanced-http-observability-l7-metrics-and-tracing/index.md
+++ b/content/blog/ebpf-enhanced-http-observability-l7-metrics-and-tracing/index.md
@@ -4,10 +4,9 @@ date: 2023-01-12
author: "Han Liu, Sheng Wu"
description: "This article will show how to use Apache SkyWalking with eBPF to enhance metrics and traces in HTTP observability."
tags:
-- Trace
-- Metric
-- eBPF
-- HTTP
+- Tracing
+- Metrics
+- Profiling
---
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md
index b03bb03dea9..65de8618a36 100644
--- a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md
+++ b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md
@@ -4,9 +4,7 @@ date: 2021-03-25
author: "[Qiuxia Fan](https://github.com/Fine0830). tetrate.io"
description: This article describes how the skywalking-client-js extends its monitoring to include the browser, providing performance metrics and error collection to the SkyWalking backend.
tags:
-- Observability
-- APM
-- Web-performance
+- Profiling
---
diff --git a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
index b06b7e680b3..6fd8a4db172 100644
--- a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
+++ b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
@@ -4,8 +4,7 @@ date: 2022-12-14
author: "[Jimmy Song (tetrate.io)](https://jimmysong.io/en/)"
description: "This blog will guide you to use SkyWalking for distributed tracing with Istio."
tags:
-- Istio
-- Service Mesh
+- Cloud Native
---
In cloud native applications, a request often needs to be processed through a series of APIs or backend services, some of which are parallel and some serial and located on different platforms or nodes. How do we determine the service paths and nodes a call goes through to help us troubleshoot the problem? This is where distributed tracing comes into play.
diff --git a/content/blog/obs-service-mesh-vm-with-sw-and-als/index.md b/content/blog/obs-service-mesh-vm-with-sw-and-als/index.md
index 31cbaf2583c..bdce053297e 100644
--- a/content/blog/obs-service-mesh-vm-with-sw-and-als/index.md
+++ b/content/blog/obs-service-mesh-vm-with-sw-and-als/index.md
@@ -4,7 +4,7 @@ date: 2021-02-21
author: "[Zhenxu Ke](http://github.com/kezhenxu94) and Hongtao Gao. tetrate.io"
description: In this tutorial, you can learn how to use Apache SkyWalking for service mesh observability, in Kubernetes and / or in virtual machines.
tags:
-- Service Mesh
+- Cloud Native
---
diff --git a/content/blog/skywalking8-4-release/index.md b/content/blog/skywalking8-4-release/index.md
index a60c8e87fdd..4a14ccb9252 100644
--- a/content/blog/skywalking8-4-release/index.md
+++ b/content/blog/skywalking8-4-release/index.md
@@ -4,8 +4,8 @@ date: 2021-02-05
author: Zhenxu Ke, Sheng Wu. tetrate.io
description: "Logs, VM Monitoring, and Dynamic Configurations at Agent Side"
tags:
-- Release Blog
-- Logs
+- Release
+- Logging
---
diff --git a/content/blog/skywalkings-new-storage-feature-based-on-shardingsphere-proxy-mysql-sharding/index.md b/content/blog/skywalkings-new-storage-feature-based-on-shardingsphere-proxy-mysql-sharding/index.md
index ac1c0247844..07fcb55775c 100644
--- a/content/blog/skywalkings-new-storage-feature-based-on-shardingsphere-proxy-mysql-sharding/index.md
+++ b/content/blog/skywalkings-new-storage-feature-based-on-shardingsphere-proxy-mysql-sharding/index.md
@@ -4,8 +4,7 @@ date: 2022-12-06
author: Kai Wan (tetrate.io)
description: "Based on MySQL storage, SkyWalking v9.3.0 provides a new storage method: MySQL-Sharding. It supports database and table sharding features thanks to ShardingSphere-Proxy, which is a mature solution for dealing with relational databases’ massive amounts of data."
tags:
-- Sharding-Sphere
-- Sharding-Sphere-proxy
+- Storage
---
As an application performance monitoring tool for distributed systems, Apache SkyWalking observes metrics, logs, traces, and events in the service mesh.
diff --git a/content/images/home/horizon-dashboard.png b/content/images/home/horizon-dashboard.png
new file mode 100644
index 00000000000..61efc1e1c8f
Binary files /dev/null and b/content/images/home/horizon-dashboard.png differ
diff --git a/content/images/home/horizon-login-bg.jpg b/content/images/home/horizon-login-bg.jpg
new file mode 100644
index 00000000000..b9f838fc88b
Binary files /dev/null and b/content/images/home/horizon-login-bg.jpg differ
diff --git a/content/images/home/horizon-logs.png b/content/images/home/horizon-logs.png
new file mode 100644
index 00000000000..df52e2ca9a5
Binary files /dev/null and b/content/images/home/horizon-logs.png differ
diff --git a/content/images/home/horizon-metrics.png b/content/images/home/horizon-metrics.png
new file mode 100644
index 00000000000..87ca5e252ff
Binary files /dev/null and b/content/images/home/horizon-metrics.png differ
diff --git a/content/images/home/horizon-rbac.png b/content/images/home/horizon-rbac.png
new file mode 100644
index 00000000000..22657105605
Binary files /dev/null and b/content/images/home/horizon-rbac.png differ
diff --git a/content/images/home/horizon-trace.png b/content/images/home/horizon-trace.png
new file mode 100644
index 00000000000..f5535cd13dc
Binary files /dev/null and b/content/images/home/horizon-trace.png differ
diff --git a/content/team/_index.md b/content/team/_index.md
index 6462b7e104b..ff2e80b1af3 100644
--- a/content/team/_index.md
+++ b/content/team/_index.md
@@ -4,117 +4,6 @@ linkTitle: Team
description: About SkyWalking Team.
---
-<div class="skywalking-team">
-
-<h1>SkyWalking Team</h1>
-<p class="text-box">
-The SkyWalking team is comprised of Members and Contributors, and the growth has never stopped. Members have direct access to the source of SkyWalking project and actively evolve the code-base. Contributors improve the project through submission of patches and suggestions to the Members.
-</p>
-
-<div class="appreciate">
-<h4>All contributions to SkyWalking are appreciated</h4>
-<p>The number of contributors to the project is unbounded. All contributions to SkyWalking are greatly appreciated, whether for trivial cleanups, big new features or other material rewards.</p>
-<a href="https://skywalking.apache.org/docs/main/latest/en/guides/community/">CONNECT WITH US.</a>
-<img class="deco-img" data-nolightbox="true" src="/images/team/team.svg" >
-</div>
-
-</div>
-
-## Members
-
-##### Project Management Committee
-
-<div class="table-wrapper">
-<div class="table-box">
-
-| Name | Apache ID | |
-|--------------------|--------------|--------------------------------------------------------------------------------------|
-| Can Li | lican | <i class="iconfont icon-twitter"></i> [Candy198088](https://twitter.com/Candy198088) |
-| DongXue Si | ilucky | |
-| Han Liu | liuhan | <i class="iconfont icon-twitter"></i> [dalek_zero](https://twitter.com/dalek_zero) |
-| Haochao Zhuang | daming | |
-| Haoyang Liu | liuhaoyangzz | |
-| Hongtao Gao | hanahmily | |
-| Hongwei Zhai | innerpeacez | |
-| Ignasi Barrera | nacx | |
-| Jiajing Lu | lujiajing | |
-| Jian Tan | tanjian | |
-| Jiaqi Lin | linjiaqi | |
-| Jiemin Xia | jmjoy | |
-| Jinlin Fu | withlin | |
-| Juntao Zhang | zhangjuntao | |
-| Kai Wan | wankai | <i class="iconfont icon-twitter"></i> [wankai123](https://twitter.com/wankai123) |
-| Kai Wang | wangkai | |
-| Lang Li | lilang | |
-| Michael Semb Wever | mck | |
-
-</div>
-<div class="table-box">
-
-| Name | Apache ID | |
-|-------------------------|-------------|------------------------------------------------------------------------------------------|
-| Qiuxia Fan | qiuxiafan | |
-| Sheng Wu (Project V.P.) | wusheng | <i class="iconfont icon-twitter"></i> [wusheng1108](https://twitter.com/wusheng1108) |
-| Shinn Zhang | zhangxin | <i class="iconfont icon-twitter"></i> [ascrutae](https://twitter.com/ascrutae) |
-| Wei Zhang | zhangwei24 | |
-| Wenbing Wang | wangwenbin | |
-| Willem Ning Jiang | ningjiang | |
-| Yang Bai | baiyang | |
-| Yanlong He | heyanlong | <i class="iconfont icon-twitter"></i> [YanlongHe](https://twitter.com/YanlongHe) |
-| Yao Wang | ywang | |
-| Ye Cao | dashanji | |
-| Yihao Chen | yihaochen | <i class="iconfont icon-twitter"></i> [Superskyyy](https://twitter.com/Superskyyyyy) |
-| Yixiong Cao | caoyixiong | |
-| Yongsheng Peng | pengys | |
-| Youliang Huang | butterbright | <i class="iconfont icon-twitter"></i> [butterbright](https://twitter.com/butterbright) |
-| Yuguang Zhao | zhaoyuguang | |
-| Zhang Kewei | zhangkewei | |
-| Zhenxu Ke | kezhenxu94 | <i class="iconfont icon-twitter"></i> [kezhenxu94](https://twitter.com/kezhenxu94) |
-| Zixin Zhou | zhouzixin | <i class="iconfont icon-twitter"></i> [starry_loveee](https://twitter.com/starry_loveee) |
-
-</div>
-</div>
-
-##### Committer
-
-<div class="table-wrapper">
-<div class="table-box">
-
-| Name | Apache ID | |
-|-------------------|------------|----------------------------------------------------------------------------------------|
-| Brandon Fergerson | bfergerson | |
-| Ziyan Chen | clairechen | |
-| Gong Dewei | kylixs | |
-| Gui Cao | zifeihan | <i class="iconfont icon-twitter"></i> [zifeihan007](https://twitter.com/zifeihan007) |
-| Hailin Wang | wanghailin | |
-| Huaxi Jiang | hoshea | <i class="iconfont icon-twitter"></i> [Zerone___01](https://twitter.com/Zerone___01) |
-| Jiapeng Liu | liujiapeng | |
-| JunXu Chen | chenjunxu | |
-| Ke Zhang | zhangke | <i class="iconfont icon-twitter"></i> [Humbertttttt](https://twitter.com/Humbertttttt) |
-| Ming Wen | wenming | |
-| Puguang Yang | ypg | |
-| Qiang Li | liqiang | |
-| Qiang Xu | xuqiang | |
-
-</div>
-<div class="table-box">
-
-| Name | Apache ID | Twitter Handle |
-|----------------|--------------|--------------------------------------------------|
-| Ruixian Wang | ax1an | [Ax1anRISE](https://twitter.com/Ax1anRISE) |
-| Sheng Wang | wangsheng | |
-| Tomasz Pytel | tompytel | |
-| Wei Hua | alonelaval | |
-| Wei Jin | kvn | |
-| Weijie Zou | kdump | [RootShellExp](https://twitter.com/RootShellExp) |
-| Weiyi Liu | wayilau | |
-| Xiang Wei | weixiang1862 | |
-| YiMing Shao | peachisai | |
-| Yueqin Zhang | yswdqz | |
-| Yuntao Li | liyuntao | |
-| Zhusheng Xu | aderm | |
-
-</div>
-</div>
+{{< team-members >}}
{{< contributors >}}
diff --git a/data/committee.yml b/data/committee.yml
new file mode 100644
index 00000000000..45ddaebdad5
--- /dev/null
+++ b/data/committee.yml
@@ -0,0 +1,67 @@
+# SkyWalking PMC & Committers. Rendered on /team by the team-members shortcode.
+# Each entry: name, apacheId, and optional twitter handle (used for both the
+# link and the displayed text). Add new members here — the tables build themselves.
+pmc:
+ - { name: Can Li, apacheId: lican, twitter: Candy198088 }
+ - { name: DongXue Si, apacheId: ilucky }
+ - { name: Han Liu, apacheId: liuhan, twitter: dalek_zero }
+ - { name: Haochao Zhuang, apacheId: daming }
+ - { name: Haoyang Liu, apacheId: liuhaoyangzz }
+ - { name: Hongtao Gao, apacheId: hanahmily }
+ - { name: Hongwei Zhai, apacheId: innerpeacez }
+ - { name: Ignasi Barrera, apacheId: nacx }
+ - { name: Jiajing Lu, apacheId: lujiajing }
+ - { name: Jian Tan, apacheId: tanjian }
+ - { name: Jiaqi Lin, apacheId: linjiaqi }
+ - { name: Jiemin Xia, apacheId: jmjoy }
+ - { name: Jinlin Fu, apacheId: withlin }
+ - { name: Juntao Zhang, apacheId: zhangjuntao }
+ - { name: Kai Wan, apacheId: wankai, twitter: wankai123 }
+ - { name: Kai Wang, apacheId: wangkai }
+ - { name: Lang Li, apacheId: lilang }
+ - { name: Michael Semb Wever, apacheId: mck }
+ - { name: Qiuxia Fan, apacheId: qiuxiafan }
+ - { name: Sheng Wu (Project V.P.), apacheId: wusheng, twitter: wusheng1108 }
+ - { name: Shinn Zhang, apacheId: zhangxin, twitter: ascrutae }
+ - { name: Wei Zhang, apacheId: zhangwei24 }
+ - { name: Wenbing Wang, apacheId: wangwenbin }
+ - { name: Willem Ning Jiang, apacheId: ningjiang }
+ - { name: Yang Bai, apacheId: baiyang }
+ - { name: Yanlong He, apacheId: heyanlong, twitter: YanlongHe }
+ - { name: Yao Wang, apacheId: ywang }
+ - { name: Ye Cao, apacheId: dashanji }
+ - { name: Yihao Chen, apacheId: yihaochen, twitter: Superskyyyyy }
+ - { name: Yixiong Cao, apacheId: caoyixiong }
+ - { name: Yongsheng Peng, apacheId: pengys }
+ - { name: Youliang Huang, apacheId: butterbright, twitter: butterbright }
+ - { name: Yuguang Zhao, apacheId: zhaoyuguang }
+ - { name: Zhang Kewei, apacheId: zhangkewei }
+ - { name: Zhenxu Ke, apacheId: kezhenxu94, twitter: kezhenxu94 }
+ - { name: Zixin Zhou, apacheId: zhouzixin, twitter: starry_loveee }
+
+committer:
+ - { name: Brandon Fergerson, apacheId: bfergerson }
+ - { name: Ziyan Chen, apacheId: clairechen }
+ - { name: Gong Dewei, apacheId: kylixs }
+ - { name: Gui Cao, apacheId: zifeihan, twitter: zifeihan007 }
+ - { name: Hailin Wang, apacheId: wanghailin }
+ - { name: Huaxi Jiang, apacheId: hoshea, twitter: Zerone___01 }
+ - { name: Jiapeng Liu, apacheId: liujiapeng }
+ - { name: JunXu Chen, apacheId: chenjunxu }
+ - { name: Ke Zhang, apacheId: zhangke, twitter: Humbertttttt }
+ - { name: Ming Wen, apacheId: wenming }
+ - { name: Puguang Yang, apacheId: ypg }
+ - { name: Qiang Li, apacheId: liqiang }
+ - { name: Qiang Xu, apacheId: xuqiang }
+ - { name: Ruixian Wang, apacheId: ax1an, twitter: Ax1anRISE }
+ - { name: Sheng Wang, apacheId: wangsheng }
+ - { name: Tomasz Pytel, apacheId: tompytel }
+ - { name: Wei Hua, apacheId: alonelaval }
+ - { name: Wei Jin, apacheId: kvn }
+ - { name: Weijie Zou, apacheId: kdump, twitter: RootShellExp }
+ - { name: Weiyi Liu, apacheId: wayilau }
+ - { name: Xiang Wei, apacheId: weixiang1862 }
+ - { name: YiMing Shao, apacheId: peachisai }
+ - { name: Yueqin Zhang, apacheId: yswdqz }
+ - { name: Yuntao Li, apacheId: liyuntao }
+ - { name: Zhusheng Xu, apacheId: aderm }
diff --git a/data/quickstart.yml b/data/quickstart.yml
new file mode 100644
index 00000000000..a256b7d51e6
--- /dev/null
+++ b/data/quickstart.yml
@@ -0,0 +1,34 @@
+# Quick-start commands shown on the /docs landing "Get started" section.
+# Two distinct flows: run the Showcase demo, or install SkyWalking itself.
+# Commands mirror the docs (setup/backend/backend-docker) and the showcase repo;
+# keep them in sync with content/quickstart-docker.{sh,ps1}.
+showcase:
+ title: Run the Showcase
+ blurb: A demo music application pre-wired with distributed tracing, metrics, logs and profiling — see SkyWalking end-to-end before installing anything.
+ badge: Recommended for newcomers
+ docsLabel: Showcase docs
+ docsLink: /docs/skywalking-showcase/latest/readme/
+ tabs:
+ - os: macOS / Linux / WSL
+ lang: bash
+ code: |
+ git clone https://github.com/apache/skywalking-showcase
+ cd skywalking-showcase
+ make deploy.docker
+ # → open http://localhost:8080
+
+skywalking:
+ title: Run SkyWalking
+ blurb: Start the storage, OAP server and UI with a one-liner. Requires Docker; you'll be prompted to choose a storage backend.
+ badge: Install the platform
+ docsLabel: Backend setup docs
+ docsLink: /docs/main/latest/en/setup/backend/backend-docker/
+ tabs:
+ - os: Linux / macOS / WSL
+ lang: bash
+ code: |
+ bash <(curl -sSL https://skywalking.apache.org/quickstart-docker.sh)
+ - os: Windows (PowerShell)
+ lang: powershell
+ code: |
+ Invoke-Expression ([System.Text.Encoding]::UTF8.GetString((Invoke-WebRequest -Uri https://skywalking.apache.org/quickstart-docker.ps1 -UseBasicParsing).Content))
diff --git a/data/releases.yml b/data/releases.yml
index a7a691e433f..3931a886154 100644
--- a/data/releases.yml
+++ b/data/releases.yml
@@ -278,10 +278,6 @@
downloadLink:
- name: Install via Grafana Plugins
link: https://grafana.com/grafana/plugins/apache-skywalking-datasource/
- - name: SkyWalking Website
- icon: skywalking-website
- description: All source codes of https://skywalking.apache.org
- sourceText: Deployed
- type: Agents
description:
list:
diff --git a/data/stars.yml b/data/stars.yml
new file mode 100644
index 00000000000..a0b980f2536
--- /dev/null
+++ b/data/stars.yml
@@ -0,0 +1,241 @@
+repos:
+ apache/skywalking-showcase:
+ stars: 132
+ forks: 77
+ watchers: 37
+ openIssues: 0
+ apache/skywalking-website:
+ stars: 105
+ forks: 149
+ watchers: 36
+ openIssues: 2
+ apache/skywalking:
+ stars: 24802
+ forks: 6646
+ watchers: 812
+ openIssues: 35
+ apache/skywalking-graalvm-distro:
+ stars: 13
+ forks: 1
+ watchers: 37
+ openIssues: 0
+ apache/skywalking-horizon-ui:
+ stars: 1
+ forks: 1
+ watchers: 0
+ openIssues: 1
+ apache/skywalking-grafana-plugins:
+ stars: 32
+ forks: 7
+ watchers: 35
+ openIssues: 6
+ apache/skywalking-java:
+ stars: 913
+ forks: 678
+ watchers: 41
+ openIssues: 0
+ apache/skywalking-python:
+ stars: 215
+ forks: 109
+ watchers: 32
+ openIssues: 5
+ apache/skywalking-nodejs:
+ stars: 175
+ forks: 68
+ watchers: 38
+ openIssues: 2
+ apache/skywalking-go:
+ stars: 359
+ forks: 118
+ watchers: 37
+ openIssues: 3
+ apache/skywalking-rust:
+ stars: 82
+ forks: 20
+ watchers: 39
+ openIssues: 1
+ apache/skywalking-php:
+ stars: 178
+ forks: 21
+ watchers: 37
+ openIssues: 0
+ apache/skywalking-client-js:
+ stars: 268
+ forks: 81
+ watchers: 40
+ openIssues: 2
+ apache/skywalking-ruby:
+ stars: 5
+ forks: 1
+ watchers: 37
+ openIssues: 0
+ apache/skywalking-nginx-lua:
+ stars: 199
+ forks: 69
+ watchers: 41
+ openIssues: 1
+ apache/skywalking-kong:
+ stars: 33
+ forks: 12
+ watchers: 35
+ openIssues: 2
+ apache/skywalking-satellite:
+ stars: 112
+ forks: 55
+ watchers: 44
+ openIssues: 0
+ apache/skywalking-kubernetes-event-exporter:
+ stars: 39
+ forks: 12
+ watchers: 38
+ openIssues: 0
+ apache/skywalking-rover:
+ stars: 237
+ forks: 47
+ watchers: 38
+ openIssues: 3
+ apache/skywalking-cli:
+ stars: 96
+ forks: 47
+ watchers: 34
+ openIssues: 0
+ apache/skywalking-mcp:
+ stars: 25
+ forks: 12
+ watchers: 32
+ openIssues: 0
+ apache/skywalking-swck:
+ stars: 144
+ forks: 54
+ watchers: 40
+ openIssues: 0
+ apache/skywalking-data-collect-protocol:
+ stars: 118
+ forks: 110
+ watchers: 39
+ openIssues: 0
+ apache/skywalking-query-protocol:
+ stars: 72
+ forks: 70
+ watchers: 36
+ openIssues: 0
+ apache/skywalking-goapi:
+ stars: 48
+ forks: 28
+ watchers: 39
+ openIssues: 0
+ apache/skywalking-banyandb:
+ stars: 340
+ forks: 115
+ watchers: 35
+ openIssues: 4
+ apache/skywalking-banyandb-client-proto:
+ stars: 4
+ forks: 1
+ watchers: 0
+ openIssues: 0
+ apache/skywalking-banyandb-java-client:
+ stars: 21
+ forks: 12
+ watchers: 35
+ openIssues: 1
+ apache/skywalking-banyandb-helm:
+ stars: 10
+ forks: 3
+ watchers: 34
+ openIssues: 0
+ apache/skywalking-agent-test-tool:
+ stars: 36
+ forks: 35
+ watchers: 34
+ openIssues: 0
+ apache/skywalking-eyes:
+ stars: 310
+ forks: 69
+ watchers: 38
+ openIssues: 3
+ apache/skywalking-infra-e2e:
+ stars: 53
+ forks: 33
+ watchers: 35
+ openIssues: 0
+ apache/skywalking-docker:
+ stars: 265
+ forks: 140
+ watchers: 37
+ openIssues: 0
+ apache/skywalking-booster-ui:
+ stars: 206
+ forks: 156
+ watchers: 35
+ openIssues: 0
+ apache/skywalking-rocketbot-ui:
+ stars: 782
+ forks: 348
+ watchers: 34
+ openIssues: 0
+ apache/skywalking-ui:
+ stars: 275
+ forks: 160
+ watchers: 36
+ openIssues: 3
+ apache/skywalking-oal-tool:
+ stars: 9
+ forks: 2
+ watchers: 39
+ openIssues: 0
+ SkyAPM/SkyAPM-dotnet:
+ stars: 1657
+ forks: 333
+ watchers: 96
+ openIssues: 16
+ SkyAPM/cpp2sky:
+ stars: 61
+ forks: 19
+ watchers: 11
+ openIssues: 14
+ SkyAPM/java-plugin-extensions:
+ stars: 140
+ forks: 49
+ watchers: 23
+ openIssues: 2
+ SkyAPM/uranus:
+ stars: 14
+ forks: 4
+ watchers: 8
+ openIssues: 0
+ SkyAPM/document-cn-translation-of-skywalking:
+ stars: 614
+ forks: 142
+ watchers: 21
+ openIssues: 0
+ SkyAPM/transporter-plugin-for-skywalking:
+ stars: 12
+ forks: 7
+ watchers: 11
+ openIssues: 0
+ SkyAPM/go2sky:
+ stars: 448
+ forks: 118
+ watchers: 15
+ openIssues: 3
+ SkyAPM/go2sky-plugins:
+ stars: 67
+ forks: 32
+ watchers: 12
+ openIssues: 3
+ SkyAPM/SkyAPM-php-sdk:
+ stars: 416
+ forks: 100
+ watchers: 18
+ openIssues: 34
+ SkyAPM/SkyAPM-nodejs:
+ stars: 128
+ forks: 86
+ watchers: 22
+ openIssues: 32
+totals:
+ stars: 34271
+ forks: 10457
+ repos: 49
+generatedAt: '2026-05-20T14:22:39.014Z'
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
new file mode 100644
index 00000000000..a4a31f703e9
--- /dev/null
+++ b/layouts/blog/baseof.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-blog">
+ <header>
+ {{ partial "navbar.html" . }}
+ </header>
+ <div class="container-fluid td-outer">
+ {{ if eq .Kind "page" }}
+ {{- /* single post: keep the readable two-column layout with TOC */ -}}
+ <div class="td-main">
+ <div class="row container container-center">
+ <main class="col-12 col-md-12 col-xl-10 pl-md-4 pr-md-4" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
+ {{ partial "tags.html" . }}
+ {{ partial "toc.html" . }}
+ </div>
+ </div>
+ </div>
+ {{ else }}
+ {{- /* list: full-width card grid */ -}}
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ end }}
+ {{ partial "footer.html" . }}
+ </div>
+ {{ partial "event-popup.html" . }}
+ {{ partial "lightbox.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ </body>
+</html>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
new file mode 100644
index 00000000000..e76ce385675
--- /dev/null
+++ b/layouts/blog/list.html
@@ -0,0 +1,43 @@
+{{ define "main" }}
+{{- if .Parent.IsHome -}}
+{{ $.Scratch.Set "blog-pages" (where .Site.RegularPages "Section" .Section) }}
+{{- else -}}
+{{ $.Scratch.Set "blog-pages" .Pages }}
+{{- end -}}
+{{ $pag := .Paginate (($.Scratch.Get "blog-pages").GroupByDate (i18n "year")) }}
+
+<section class="blog-hero">
+ <div class="container">
+ <span class="eyebrow">BLOG</span>
+ <h1>Engineering & community notes</h1>
+ <p>Release deep-dives, architecture, integrations and field reports from the SkyWalking community — newest first.</p>
+ </div>
+</section>
+
+<div class="container blog-wrap">
+ {{ range $pag.PageGroups }}
+ <h2 class="blog-year">{{ T "post_posts_in" }} {{ .Key }}</h2>
+ <div class="blog-grid">
+ {{ range .Pages }}
+ <article class="blog-card">
+ {{ with .Params.tags }}
+ <div class="blog-labels">
+ {{ range . }}<span class="blog-label" data-label="{{ . }}">{{ . }}</span>{{ end }}
+ </div>
+ {{ end }}
+ <h3 class="blog-card-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
+ <p class="blog-card-preview">{{ with .Description }}{{ . }}{{ else }}{{ .Plain | safeHTML | truncate 160 }}{{ end }}</p>
+ <div class="blog-card-foot">
+ <span class="blog-date">{{ .Date.Format "Jan 2, 2006" }}</span>
+ {{ with .Params.author }}<span class="blog-author">{{ . | markdownify }}</span>{{ end }}
+ </div>
+ </article>
+ {{ end }}
+ </div>
+ {{ end }}
+
+ <div class="blog-pagination">
+ {{ template "_internal/pagination.html" . }}
+ </div>
+</div>
+{{ end }}
diff --git a/layouts/contributors/baseof.html b/layouts/contributors/baseof.html
new file mode 100644
index 00000000000..544931f6a34
--- /dev/null
+++ b/layouts/contributors/baseof.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-contributors">
+ <header>
+ {{ partial "navbar.html" . }}
+ </header>
+ <div class="container-fluid td-outer">
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ partial "footer.html" . }}
+ </div>
+ {{ partial "event-popup.html" . }}
+ {{ partial "lightbox.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ {{ partial "script-search.html" . }}
+ </body>
+</html>
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
new file mode 100644
index 00000000000..2c8b1476169
--- /dev/null
+++ b/layouts/docs/baseof.html
@@ -0,0 +1,151 @@
+{{- /* /docs landing — light card grid, driven by data/docs.yml + data/stars.yml */ -}}
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js td-docs">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-docs-landing">
+ <header>{{ partial "navbar.html" . }}</header>
+
+ <main class="td-main" role="main">
+ <section class="docs-hero">
+ <div class="container">
+ <span class="eyebrow">DOCS · {{ len .Site.Data.docs }} SECTIONS</span>
+ <h1>Projects & documentation</h1>
+ <p>SkyWalking is the Server, UI, native storage and many agents. Start with the
+ <a href="#SkyWalkingServers">Server</a> to understand installation and deployment, then pick the
+ agents and integrations you need — or deploy the
+ <a href="#Showcase">showcase</a> for a quick preview.</p>
+ <div class="docs-chips">
+ {{ range .Site.Data.docs }}
+ {{ $cat := or .buttonText (replace .type " " "") }}
+ <a class="docs-chip" href="#{{ $cat }}">{{ .type }}</a>
+ {{ end }}
+ </div>
+ </div>
+ </section>
+
+ {{- /* Get started — two quickstarts: run the Showcase, or run SkyWalking */ -}}
+ {{ with .Site.Data.quickstart }}
+ <section class="qs-section" id="get-started">
+ <div class="container">
+ <h2 class="qs-head">Get started in minutes</h2>
+ <div class="qs-grid">
+ {{ range $key := slice "showcase" "skywalking" }}
+ {{ $q := index $.Site.Data.quickstart $key }}
+ <article class="qs-card" id="qs-{{ $key }}">
+ <div class="qs-card-top">
+ <span class="qs-badge{{ if eq $key "showcase" }} is-rec{{ end }}">{{ $q.badge }}</span>
+ <h3>{{ $q.title }}</h3>
+ <p>{{ $q.blurb }}</p>
+ </div>
+ <div class="qs-term" data-qs="{{ $key }}">
+ <div class="qs-tabs" role="tablist">
+ {{ range $i, $t := $q.tabs }}
+ <button class="qs-tab{{ if eq $i 0 }} active{{ end }}" data-tab="{{ $i }}" type="button">{{ $t.os }}</button>
+ {{ end }}
+ </div>
+ {{ range $i, $t := $q.tabs }}
+ <div class="qs-pane{{ if eq $i 0 }} active{{ end }}" data-pane="{{ $i }}">
+ <div class="qs-pane-bar">
+ <span class="qs-lang">{{ $t.lang }}</span>
+ <button class="qs-copy" type="button" data-code={{ $t.code | chomp }}>Copy</button>
+ </div>
+ <div class="qs-code-lines">
+ {{ range $li, $line := (split (chomp $t.code) "\n") }}
+ <div class="qs-line"><span class="qs-ln">{{ add $li 1 }}</span><span class="qs-code">{{ $line }}</span></div>
+ {{ end }}
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ <a class="qs-docs" href="{{ $q.docsLink }}">{{ $q.docsLabel }} →</a>
+ </article>
+ {{ end }}
+ </div>
+ </div>
+ </section>
+ {{ end }}
+
+ <div class="container docs-wrap">
+ {{ range .Site.Data.docs }}
+ {{ $cat := or .buttonText (replace .type " " "") }}
+ <h2 class="docs-cat" id="{{ $cat }}">{{ .type }}</h2>
+ <div class="docs-grid">
+ {{ range .list }}
+ {{ if .descriptionItem }}
+ <article class="docs-card docs-card--note"><div>{{ .descriptionItem }}</div></article>
+ {{ else }}
+ {{ $id := replace .name " " "" }}{{ $id := replace $id ")" "" }}{{ $id := replace $id "(" "" }}
+ {{ $user := .user }}{{ $repo := .repo }}
+ {{ $stars := index $.Site.Data.stars.repos (printf "%s/%s" $user $repo) }}
+ <article class="docs-card" id="{{ $id }}">
+ <header class="docs-card-head">
+ {{ if .icon }}<img class="docs-icon" width="30" height="30" src="/images/project/{{ .icon }}.svg" alt="">{{ end }}
+ <h5 class="docs-card-title">{{ .name }}</h5>
+ {{ with $stars }}
+ <a class="docs-stars" href="https://github.com/{{ $user }}/{{ $repo }}" target="_blank" rel="noopener" title="Stars on GitHub">
+ <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62L22 9.24l-5.46 4.73L18.18 21z"/></svg>
+ <span>{{ .stars }}</span>
+ </a>
+ {{ end }}
+ </header>
+ <p class="docs-card-desc">{{ .description | markdownify }}</p>
+ <footer class="docs-card-foot">
+ {{ with .docs }}
+ {{- /* primary = the "Latest" entry if present, else the first one */ -}}
+ {{ $primary := index . 0 }}
+ {{ range . }}{{ if or (eq .version "Latest") (eq .versionName "Latest") }}{{ $primary = . }}{{ end }}{{ end }}
+ {{ $others := slice }}
+ {{ range . }}{{ if ne .link $primary.link }}{{ $others = $others | append . }}{{ end }}{{ end }}
+ <a class="docs-btn" href="{{ $primary.link }}" target="_blank" rel="noopener">Read docs →</a>
+ {{ if $others }}
+ <details class="docs-ver">
+ <summary>versions</summary>
+ <ul>
+ {{ range $others }}<li><a href="{{ .link }}" target="_blank" rel="noopener">{{ or .versionName .version }}</a></li>{{ end }}
+ </ul>
+ </details>
+ {{ end }}
+ {{ end }}
+ {{ if and $user $repo }}
+ <a class="docs-gh" href="https://github.com/{{ $user }}/{{ $repo }}" target="_blank" rel="noopener" aria-label="GitHub repository">
+ <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.66.5 12.02c0 5.09 3.29 9.4 7.86 10.93.57.11.78-.25.78-.55v-2.13c-3.2.69-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.45.11-3.02 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.9-.39.99 0 1.98.13 2.9.39 2.21-1.49 3.18-1.18 3.18-1.18.62 1.57.23 [...]
+ </a>
+ {{ end }}
+ </footer>
+ </article>
+ {{ end }}
+ {{ end }}
+ </div>
+ {{ end }}
+ </div>
+
+ {{ partial "footer.html" . }}
+ </main>
+
+ {{ partial "event-popup.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ <script>
+ // quickstart OS tabs + copy
+ document.querySelectorAll('.qs-term').forEach(function (term) {
+ term.querySelectorAll('.qs-tab').forEach(function (tab) {
+ tab.addEventListener('click', function () {
+ var i = tab.getAttribute('data-tab');
+ term.querySelectorAll('.qs-tab').forEach(function (t) { t.classList.toggle('active', t === tab); });
+ term.querySelectorAll('.qs-pane').forEach(function (p) { p.classList.toggle('active', p.getAttribute('data-pane') === i); });
+ });
+ });
+ });
+ document.querySelectorAll('.qs-copy').forEach(function (btn) {
+ btn.addEventListener('click', function () {
+ navigator.clipboard && navigator.clipboard.writeText(btn.getAttribute('data-code') || '').then(function () {
+ var old = btn.textContent; btn.textContent = 'Copied'; setTimeout(function () { btn.textContent = old; }, 1400);
+ });
+ });
+ });
+ </script>
+ </body>
+</html>
diff --git a/layouts/downloads/baseof.html b/layouts/downloads/baseof.html
new file mode 100644
index 00000000000..55e99f57c41
--- /dev/null
+++ b/layouts/downloads/baseof.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+</head>
+<body class="td-{{ .Kind }} td-downloads">
+<header>
+ {{ partial "navbar.html" . }}
+</header>
+<div class="container-fluid td-outer">
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ partial "footer.html" . }}
+</div>
+{{ partial "event-popup.html" . }}
+{{ partial "sidebar-skywalking.html" . }}
+{{ partial "active-scripts.html" . }}
+{{ partial "scripts.html" . }}
+<script>
+ $('.download-wrapper').on('click', function (e) {
+ var label = $(e.target).data('label')
+ if (label) {
+ if (window.ga) { ga('send', 'event', 'Download Link', 'click', label, { nonInteraction: true }); }
+ if (window.gtag) { gtag('event', 'click', { 'event_category': 'download_click', 'event_label': label, 'non_interaction': true }); }
+ }
+ })
+</script>
+</body>
+</html>
diff --git a/layouts/downloads/list.html b/layouts/downloads/list.html
new file mode 100644
index 00000000000..4cd8933984f
--- /dev/null
+++ b/layouts/downloads/list.html
@@ -0,0 +1,43 @@
+{{ define "main" }}
+<section class="dl-hero">
+ <div class="container">
+ <div class="dl-hero-grid">
+ <div>
+ <span class="eyebrow">RELEASES & DOWNLOADS</span>
+ <h1>Every release, signed and dated</h1>
+ <p>Only Apache <strong>source releases</strong> are official artifacts. Convenience binaries,
+ container images and Helm charts are provided too — always verify downloads against the
+ <span class="dl-mono">.asc</span> and <span class="dl-mono">.sha512</span> signatures.</p>
+ <div class="dl-chips">
+ {{ range .Site.Data.releases }}
+ {{ $cat := or .buttonText (replace .type " " "") }}
+ <a class="dl-chip" href="#{{ $cat }}">{{ .type }}</a>
+ {{ end }}
+ <a class="dl-chip" href="#DockerImages">Docker images</a>
+ </div>
+ </div>
+ <aside class="dl-latest">
+ <div class="dl-latest-head">Latest releases</div>
+ {{ range first 4 (index .Site.Data.releases 0).list }}
+ {{ if and .source .name }}
+ {{ $id := replace .name " " "" }}
+ <a class="dl-latest-item" href="#{{ $id }}">
+ <span class="dl-latest-name">{{ .name }}</span>
+ <span class="dl-latest-ver">{{ (index .source 0).version }}</span>
+ </a>
+ {{ end }}
+ {{ end }}
+ <div class="dl-latest-tags">
+ <span class="dl-tag">GPG keys</span>
+ <span class="dl-tag">SHA-512</span>
+ <span class="dl-tag">Apache mirrors</span>
+ </div>
+ </aside>
+ </div>
+ </div>
+</section>
+
+<div class="container dl-wrap download-wrapper">
+ {{ .Content }}
+</div>
+{{ end }}
diff --git a/layouts/events/baseof.html b/layouts/events/baseof.html
new file mode 100644
index 00000000000..5af1546e643
--- /dev/null
+++ b/layouts/events/baseof.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-events">
+ <header>
+ {{ partial "navbar.html" . }}
+ </header>
+ <div class="container-fluid td-outer">
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ partial "footer.html" . }}
+ </div>
+ {{ partial "event-popup.html" . }}
+ {{ partial "lightbox.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ </body>
+</html>
diff --git a/layouts/events/list.html b/layouts/events/list.html
new file mode 100644
index 00000000000..589ee79663c
--- /dev/null
+++ b/layouts/events/list.html
@@ -0,0 +1,50 @@
+{{ define "main" }}
+{{- if .Parent.IsHome -}}
+{{ $.Scratch.Set "evpages" (where .Site.RegularPages "Section" .Section) }}
+{{- else -}}
+{{ $.Scratch.Set "evpages" .Pages }}
+{{- end -}}
+{{ $pag := .Paginate (($.Scratch.Get "evpages").GroupByDate (i18n "year")) }}
+
+<section class="ev-hero">
+ <div class="container">
+ <span class="eyebrow">EVENTS & RELEASES</span>
+ <h1>Where the SkyWalking community ships & meets</h1>
+ <p>Releases, conference talks, meetups and weekly office hours — newest first.</p>
+ </div>
+</section>
+
+<div class="container ev-wrap">
+ {{ range $pag.PageGroups }}
+ <div class="ev-group">
+ <div class="ev-year"><span>{{ .Key }}</span></div>
+ <ul class="ev-timeline">
+ {{ range .Pages }}
+ {{ $isRelease := hasPrefix (lower .LinkTitle) "release" }}
+ <li class="ev-item{{ if $isRelease }} is-release{{ end }}">
+ <span class="ev-dot" aria-hidden="true"></span>
+ <a class="ev-card" href="{{ .RelPermalink }}">
+ <div class="ev-meta">
+ <span class="ev-date">{{ .Date.Format "Jan 2" }}</span>
+ {{ if $isRelease }}
+ <span class="ev-tag is-release">Release</span>
+ {{ else }}
+ <span class="ev-tag">Post</span>
+ {{ end }}
+ {{ with .Params.author }}<span class="ev-author">{{ . | markdownify }}</span>{{ end }}
+ </div>
+ <h3 class="ev-title">{{ .LinkTitle }}</h3>
+ <p class="ev-desc">{{ with .Description }}{{ . }}{{ else }}{{ .Plain | safeHTML | truncate 200 }}{{ end }}</p>
+ <span class="ev-more">{{ T "ui_read_more" }} →</span>
+ </a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ {{ end }}
+
+ <div class="ev-pagination">
+ {{ template "_internal/pagination.html" . }}
+ </div>
+</div>
+{{ end }}
diff --git a/layouts/events/single.html b/layouts/events/single.html
new file mode 100644
index 00000000000..b7e4eabe280
--- /dev/null
+++ b/layouts/events/single.html
@@ -0,0 +1,54 @@
+{{ define "main" }}
+{{ $cur := . }}
+{{ $events := (where .Site.RegularPages "Section" "events").ByDate.Reverse }}
+<div class="ev-detail">
+ <aside class="ev-side">
+ <div class="ev-side-head">
+ <a href="/events/">← All events</a>
+ <span class="ev-side-count">{{ len $events }}</span>
+ </div>
+ <nav class="ev-side-list" id="evSideList">
+ {{ range $events.GroupByDate "2006" }}
+ <div class="ev-side-year">{{ .Key }}</div>
+ {{ range .Pages }}
+ {{ $isRelease := hasPrefix (lower .LinkTitle) "release" }}
+ <a class="ev-side-item{{ if eq .Permalink $cur.Permalink }} is-current{{ end }}{{ if $isRelease }} is-release{{ end }}"
+ href="{{ .RelPermalink }}"{{ if eq .Permalink $cur.Permalink }} aria-current="page"{{ end }}>
+ <span class="ev-side-dot" aria-hidden="true"></span>
+ <span class="ev-side-text">
+ <span class="ev-side-date">{{ .Date.Format "Jan 2" }}</span>
+ <span class="ev-side-title">{{ .LinkTitle }}</span>
+ </span>
+ </a>
+ {{ end }}
+ {{ end }}
+ </nav>
+ </aside>
+
+ <article class="td-content ev-article">
+ {{ $isRelease := hasPrefix (lower .LinkTitle) "release" }}
+ <div class="ev-article-meta">
+ {{ if $isRelease }}<span class="ev-tag is-release">Release</span>{{ else }}<span class="ev-tag">Post</span>{{ end }}
+ <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format .Site.Params.time_format_blog }}</time>
+ {{ with .Params.author }}<span class="ev-article-author">{{ T "post_byline_by" }} {{ . | markdownify }}</span>{{ end }}
+ </div>
+ <h1 class="ev-article-title">{{ .Title }}</h1>
+ {{ with .Params.description }}<p class="ev-article-lead">{{ . | markdownify }}</p>{{ end }}
+
+ <div class="ev-article-body">
+ {{ .Content }}
+ </div>
+
+ {{ partial "pager.html" . }}
+ </article>
+</div>
+
+<script>
+ // keep the current event visible in the sidebar timeline
+ (function () {
+ var cur = document.querySelector('.ev-side-item.is-current');
+ var list = document.getElementById('evSideList');
+ if (cur && list) { list.scrollTop = cur.offsetTop - list.clientHeight / 2 + cur.clientHeight / 2; }
+ })();
+</script>
+{{ end }}
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
new file mode 100644
index 00000000000..46d86b7b1bf
--- /dev/null
+++ b/layouts/partials/hooks/head-end.html
@@ -0,0 +1,4 @@
+{{- /* Display font for prominent hero numbers */ -}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap">
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
new file mode 100644
index 00000000000..89b0855c1fc
--- /dev/null
+++ b/layouts/partials/navbar.html
@@ -0,0 +1,80 @@
+{{ $cover := .HasShortcode "blocks/cover" }}
+{{- /* current top-level section, e.g. "events", "blog", "docs" … */ -}}
+{{ $sec := .Section }}
+<nav class="js-navbar-scroll navbar navbar-expand {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+ <div class="sidebar-button">
+ <i class="iconfont icon-menu"></i>
+ </div>
+ <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+ <span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}<img width="130" src="/images/logo.svg" alt="SkyWalking"></span> {{ else }}
+ <span class="text-uppercase font-weight-bold">{{ .Site.Title }}</span> {{ end }}
+ </a>
+ <div class="td-navbar-nav-scroll navbar-nav-wrapper" id="navigation">
+ <ul class="navbar-nav mt-lg-0">
+ {{ $p := . }} {{ range .Site.Menus.main }}
+ {{ if .HasChildren }}
+ {{ else }}
+ <li class="nav-item mr-3 mb-lg-0">
+ {{ $u := urls.Parse .URL }}
+ {{ $path := strings.TrimPrefix "/" $u.Path }}
+ {{ $path = strings.TrimSuffix "/" $path }}
+ {{ $first := index (split $path "/") 0 }}
+ {{ $active := and (ne $sec "") (eq $first $sec) }}
+ {{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+ <a class="nav-link{{ if $active }} active{{ end }}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $u.Host $baseurl.Host }}target="_blank" {{ end }}><span{{ if $active }} class="active"{{ end }}>{{ .Name }}</span></a>
+ </li>
+ {{ end }}
+ {{ end }}
+ <li class="nav-item mr-3 mb-lg-0">
+ <span class="link dropdown blog">
+ <a class="link-name nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">中文资料</a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="/zh/">博客</a>
+ <a class="dropdown-item" href="https://space.bilibili.com/390683219" target="_blank" rel="noopener noreferrer">B站</a>
+ <a class="dropdown-item" href="https://juejin.cn/user/13673577331607" target="_blank" rel="noopener noreferrer">掘金</a>
+ </div>
+ </span>
+ </li>
+
+ {{ if .Site.Params.versions }}
+ <li class="nav-item dropdown d-none d-lg-block">
+ {{ partial "navbar-version-selector.html" . }}
+ </li>
+ {{ end }}
+ {{ if (gt (len .Site.Home.Translations) 0) }}
+ <li class="nav-item dropdown d-none d-lg-block">
+ {{ partial "navbar-lang-selector.html" . }}
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+
+ <div class="navbar-nav d-none d-lg-block search-input-box">
+ {{ partial "search-input.html" . }}
+
+ {{- /* Apache dropdown — to the right of search — new ASF oak-leaf */ -}}
+ {{ range .Site.Menus.main }}
+ {{ if .HasChildren }}
+ <span class="link dropdown sw-navdd">
+ <a class="link-name nav-link dropdown-toggle sw-navdd-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <img class="sw-navdd-asf" src="/images/asf-oakleaf.svg" alt="" aria-hidden="true"> Apache
+ </a>
+ <div class="dropdown-menu sw-navmenu sw-navmenu--wide">
+ <div class="sw-navmenu-head">
+ <img src="/images/asf-oakleaf.svg" alt="Apache Software Foundation feather">
+ <div><strong>The Apache Software Foundation</strong><span>governance · trademarks · sponsorship</span></div>
+ </div>
+ {{ range .Children }}
+ {{ $cu := urls.Parse .URL }}
+ <a class="sw-navmenu-item" href="{{ .URL | relLangURL }}" target="_blank" rel="noopener noreferrer">
+ <span>{{ .Name }}</span>
+ <em>{{ $cu.Host }}</em>
+ <i class="iconfont icon-arrow-up-right"></i>
+ </a>
+ {{ end }}
+ </div>
+ </span>
+ {{ end }}
+ {{ end }}
+ </div>
+</nav>
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 00000000000..9254ca40e06
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,59 @@
+{{ partial "page-meta-links.html" . }}
+{{ if not .Params.notoc }}
+{{ with .TableOfContents }}
+{{ if ge (len .) 200 }}
+<div class="td-toc-label">On this page</div>
+{{ . }}
+{{ end }}
+{{ end }}
+{{ end }}
+
+<script>
+ $(function () {
+ var $toc = $("#TableOfContents");
+ if (!$toc || !$toc.length) {
+ return;
+ }
+ var top = $toc.offset().top;
+ $(window).on("scroll", debounce(setTop, 100))
+ $(window).on("scroll", debounce(addActive, 30))
+
+ function addActive() {
+ var scrollValue = $(window).scrollTop();
+ var topEle = null;
+ $.each($('main h1, main h2, main h3'), function (index, item) {
+ if ($(item).offset().top - 70 > scrollValue) {
+ return
+ }
+ if (!topEle) {
+ topEle = item
+ } else if ($(item).offset().top >= $(topEle).offset().top) {
+ topEle = item
+ }
+ if (topEle) {
+ var id = $(item).attr('id');
+ $toc.find('a').removeClass("active").end().find('a[href="' + '#' + id + '"]').addClass("active")
+ }
+ })
+ }
+
+ function setTop() {
+ var scrollValue = $(window).scrollTop();
+ if (scrollValue >= top - 70) {
+ $toc.addClass('fixed')
+ } else {
+ $toc.removeClass('fixed')
+ }
+ }
+
+ function debounce(fn, wait) {
+ var timeout = null;
+ return function () {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => {
+ fn.apply(this, arguments);
+ }, wait);
+ };
+ }
+ })
+</script>
diff --git a/layouts/projectdoc/baseof.html b/layouts/projectdoc/baseof.html
index 0844fc5e8eb..438ba22da1e 100644
--- a/layouts/projectdoc/baseof.html
+++ b/layouts/projectdoc/baseof.html
@@ -32,6 +32,30 @@
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
+ <script>
+ // Add a language label + Copy button to each docs code block.
+ document.querySelectorAll('.project-doc .td-content .highlight').forEach(function (block) {
+ if (block.querySelector('.sw-code-bar')) return;
+ var codeEl = block.querySelector('code');
+ var lang = '';
+ if (codeEl) {
+ var m = (codeEl.className || '').match(/language-([\w+-]+)/);
+ if (m) lang = m[1];
+ if (!lang && codeEl.getAttribute('data-lang')) lang = codeEl.getAttribute('data-lang');
+ }
+ var bar = document.createElement('div');
+ bar.className = 'sw-code-bar';
+ bar.innerHTML = '<span class="lang">' + (lang || 'code') + '</span><button class="copy" type="button">Copy</button>';
+ block.insertBefore(bar, block.firstChild);
+ bar.querySelector('.copy').addEventListener('click', function () {
+ var btn = this;
+ var text = (block.querySelector('pre') || {}).innerText || '';
+ navigator.clipboard && navigator.clipboard.writeText(text).then(function () {
+ btn.textContent = 'Copied'; setTimeout(function () { btn.textContent = 'Copy'; }, 1400);
+ });
+ });
+ });
+ </script>
</body>
<script>
$(function (){
diff --git a/layouts/shortcodes/contributors-search.html b/layouts/shortcodes/contributors-search.html
index 89008e6a2d8..07c3c9ab70b 100644
--- a/layouts/shortcodes/contributors-search.html
+++ b/layouts/shortcodes/contributors-search.html
@@ -1,60 +1,59 @@
-<div>
- <h2 class="page-title">
- Contributor
- <span class="current-contributor"></span>
- </h2>
+{{- /* /contributors?contributor=<login> — per-project ranking for one person.
+ script-search.html relies on: .current-contributor, .contributors-wrapper
+ .item-wrapper (.show), .item[data-name][data-icon], .item-contributors .d-flex
+ with per-login classed span(.dn)+two divs, and .search-tips. Keep them. */ -}}
+<section class="contrib-hero">
+ <div class="container">
+ <span class="eyebrow">CONTRIBUTORS</span>
+ <h1 class="page-title">Contributions by <span class="current-contributor"></span></h1>
+ <p>Per-project contribution counts and rankings. Search a different handle on the
+ <a href="/team/">team page</a>.</p>
+ </div>
+</section>
- <div class="head-wrapper">
- <div class="title">Project</div>
- <div class="title">Contributions</div>
- <div class="title">Ranking</div>
- </div>
- <div class="contributors-wrapper">
- {{range .Site.Data.team.projects}}
- {{range $index, $element := .list}}
- {{$name := .name }}
- {{$id := .repo }}
- {{if .user}}
- <div class="item-wrapper">
- <div class="item" data-name="{{.name}}" data-icon="{{.icon}}">
- <div class="item-text">
- {{if .icon}}
- <img data-nolightbox="true" width="36" height="36" src="/images/project/{{.icon}}.svg" alt="">
- {{end}}
- <span class="name">
- {{.name}}
- </span>
- </div>
- </div>
+<div class="container contrib-wrap">
+ <div class="head-wrapper">
+ <div class="title">Project</div>
+ <div class="title">Contributions</div>
+ <div class="title">Ranking</div>
+ </div>
- <div id="{{$id}}" class="item-contributors">
- <div class="d-flex">
- {{range $index, $element := .contributors}}
- {{$ranking := add $index 1 }}
- {{$lowerCaseLogin := lower .login }}
+ <div class="contributors-wrapper">
+ {{ range .Site.Data.team.projects }}
+ {{ range $index, $element := .list }}
+ {{ $name := .name }}
+ {{ $id := .repo }}
+ {{ if .user }}
+ <div class="item-wrapper">
+ <div class="item" data-name="{{ .name }}" data-icon="{{ .icon }}">
+ <div class="item-text">
+ {{ if .icon }}<img data-nolightbox="true" width="30" height="30" src="/images/project/{{ .icon }}.svg" alt="">{{ end }}
+ <span class="name">{{ .name }}</span>
+ </div>
+ </div>
- <span class="{{.login}} {{$lowerCaseLogin}} dn">
- {{if eq .type "Anonymous"}}
- <a>
- <i class="iconfont icon-github"></i>
- {{.login}}
- </a>
- {{else}}
- <a class="link" href="{{.html_url}}" target="_blank">
- <i class="iconfont icon-github"></i>
- {{.login}}
- </a>
- {{end}}
- </span>
- <div class="{{.login}} {{$lowerCaseLogin}}">{{.contributions}}</div>
- <div class="{{.login}} {{$lowerCaseLogin}}">{{$ranking}}</div>
- {{end}}
- </div>
- </div>
+ <div id="{{ $id }}" class="item-contributors">
+ <div class="d-flex">
+ {{ range $index, $element := .contributors }}
+ {{ $ranking := add $index 1 }}
+ {{ $lowerCaseLogin := lower .login }}
+ <span class="{{ .login }} {{ $lowerCaseLogin }} dn">
+ {{ if eq .type "Anonymous" }}
+ <a><i class="iconfont icon-github"></i>{{ .login }}</a>
+ {{ else }}
+ <a class="link" href="{{ .html_url }}" target="_blank" rel="noopener"><i class="iconfont icon-github"></i>{{ .login }}</a>
+ {{ end }}
+ </span>
+ <div class="{{ .login }} {{ $lowerCaseLogin }}">{{ .contributions }}</div>
+ <div class="{{ .login }} {{ $lowerCaseLogin }}">#{{ $ranking }}</div>
+ {{ end }}
</div>
- {{end}}
- {{end}}
- {{end}}
+ </div>
</div>
- <div class="search-tips">Loading...</div>
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ </div>
+
+ <div class="search-tips">Loading…</div>
</div>
diff --git a/layouts/shortcodes/contributors.html b/layouts/shortcodes/contributors.html
index afcf17737c6..f34901d530a 100644
--- a/layouts/shortcodes/contributors.html
+++ b/layouts/shortcodes/contributors.html
@@ -1,78 +1,61 @@
-<div class="pt-4">
- <h2 id="contributors">
- Contributors
- <span class="total">{{.Site.Data.team.totalCount }}</span>
- </h2>
- <div class="input-group input-group-sm team-input-group">
- <input type="text" id="team-contributor-input" class="form-control" placeholder="Search GitHub name" aria-label="Search">
- <div class="input-group-append">
- <button class="btn btn-outline-success team-contributor-search" type="button">Search</button>
+{{- /* Project-level contributors (on /team).
+ JS in partials/script-team.html relies on:
+ .contributors-wrapper .item[data-name][data-icon] + its NEXT sibling (.hide),
+ the .modal-* elements, #team-contributor-input and .team-contributor-search. */ -}}
+<section class="team-contrib">
+ <div class="team-contrib-head">
+ <h2 id="contributors">Contributors <span class="total">{{ .Site.Data.team.totalCount }}</span></h2>
+ <div class="team-search">
+ <input type="text" id="team-contributor-input" placeholder="Search a GitHub handle…" aria-label="Search contributor">
+ <button class="team-contributor-search sky-btn primary" type="button">Search</button>
</div>
</div>
- <div class="contributors-wrapper">
+
+ <div class="contributors-wrapper team-contrib-grid">
{{ range .Site.Data.team.projects }}
<div class="item-wrapper">
-
- {{range $index, $element := .list}}
- {{$name := .name }}
- {{$id := .repo }}
- {{if .user}}
-
- <div class="item" data-name="{{.name}}" data-icon="{{.icon}}">
+ {{ range $index, $element := .list }}
+ {{ if .user }}
+ <div class="item" data-name="{{ .name }}" data-icon="{{ .icon }}">
<div class="item-text">
- {{if .icon}}
- <img data-nolightbox="true" width="36" height="36" src="/images/project/{{.icon}}.svg" alt="">
- {{end}}
- <span class="name">
- {{.name}}
- </span>
+ {{ if .icon }}<img data-nolightbox="true" width="32" height="32" src="/images/project/{{ .icon }}.svg" alt="">{{ end }}
+ <span class="name">{{ .name }}</span>
</div>
- <div>
- <span class="total">{{.contributorCount}}</span>
+ <div class="item-meta">
+ <span class="total">{{ .contributorCount }}</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
- <div id="{{$id}}" class="hide">
- <ul class="list-style-none d-flex flex-wrap mb-n2">
- {{range $index, $element := .contributors}}
-
- <li class="mb-2 mr-2">
- {{if eq .type "Anonymous"}}
- <a>
- <i class="iconfont icon-github"></i>
- {{.login}}
- </a>
- {{else}}
- <a class="link" href="{{.html_url}}" target="_blank">
- <i class="iconfont icon-github"></i>
- {{.login}}
- </a>
+ <div id="{{ .repo }}" class="hide">
+ <ul class="contrib-people">
+ {{ range $index, $element := .contributors }}
+ <li>
+ {{ if eq .type "Anonymous" }}
+ <a><i class="iconfont icon-github"></i>{{ .login }}</a>
+ {{ else }}
+ <a class="link" href="{{ .html_url }}" target="_blank" rel="noopener"><i class="iconfont icon-github"></i>{{ .login }}</a>
+ {{ end }}
</li>
- {{end}}
- {{end}}
+ {{ end }}
</ul>
</div>
-
- {{end}}
-
- {{end}}
+ {{ end }}
+ {{ end }}
</div>
-
- {{end}}
+ {{ end }}
</div>
-</div>
+</section>
<div class="modal-wrapper">
<div class="modal-inner">
- <div>
- <a href="javascript:;" class="btn-back">← Team</a>
+ <div class="modal-head">
+ <a href="javascript:;" class="btn-back">← Back to team</a>
<div class="modal-name-box">
- <img data-nolightbox="true" class="modal-icon" width="36" height="36" src="" alt="">
+ <img data-nolightbox="true" class="modal-icon" width="28" height="28" src="" alt="">
<span class="modal-name"></span>
</div>
</div>
<div class="modal-detail scroll-bar"></div>
</div>
</div>
-
diff --git a/layouts/shortcodes/downloads-block.html b/layouts/shortcodes/downloads-block.html
index 96fed6d427d..505669b7600 100755
--- a/layouts/shortcodes/downloads-block.html
+++ b/layouts/shortcodes/downloads-block.html
@@ -1,171 +1,145 @@
-<div class="container download-wrapper">
- <h1 class="text-center">Download</h1>
- <p class="article-description mt-4">
- Use the links below to download Apache SkyWalking releases from one of our mirrors. Don’t forget to verify the files
- downloaded. Please note that only source code releases are official Apache releases, binary distributions are just
- for end user convenience.
- </p>
- <div class="text-center btn-wrapper mb-4">
- {{range .Site.Data.releases}}
- {{if .buttonText}}
- <a href="#{{.buttonText}}" class="link-type">
- <button class="sky-btn">{{.buttonText}}</button>
- </a>
- {{else}}
- {{$type := replace .type " " "" }}
- <a href="#{{$type}}" class="link-type">
- <button class="sky-btn">{{.type}}</button>
- </a>
- {{end}}
- {{end}}
- <a href="#DockerImages" class="link-type">
- <button class="sky-btn">Docker images</button>
- </a>
- </div>
-
-
- {{ range .Site.Data.releases }}
- <div class="card-wrapper">
- {{if .buttonText}}
- <h2 class="deco-title" id="{{.buttonText}}">{{.type}}</h2>
- {{else}}
- {{$type := replace .type " " "" }}
- <h2 class="deco-title" id="{{$type}}">{{.type}}</h2>
- {{end}}
+{{- /* Downloads — light card grid. Same data shape as data/releases.yml.
+ Latest release prominent; older versions collapsed in a <details>. */ -}}
+{{ range .Site.Data.releases }}
+{{ $cat := or .buttonText (replace .type " " "") }}
+<h2 class="dl-cat" id="{{ $cat }}">{{ .type }}</h2>
+<div class="dl-grid">
+ {{ range .list }}
+ {{ $id := replace .name " " "" }}
+ {{ $name := .name }}
+ <article class="dl-card" id="{{ $id }}">
+ <header class="dl-card-head">
+ {{ if .icon }}<img class="dl-icon" width="34" height="34" src="/images/project/{{ .icon }}.svg" alt="">{{ end }}
+ <h5 class="dl-card-title">{{ .name }}</h5>
+ </header>
+ {{ with .description }}<p class="dl-card-desc">{{ . }}</p>{{ end }}
- <div class="item-wrapper">
- {{range .list}}
- {{$id := replace .name " " "" }}
- <div class="card item">
- <div class="card-body">
- {{if .icon}}
- <img width="36" height="36" src="/images/project/{{.icon}}.svg" alt="{{.icon}}">
- {{end}}
- <div class="card-text">
- <div class="title-box">
- <h5 class="card-title">{{.name}}</h5>
- <a aria-hidden="true" href="#{{$id}}" id="{{$id}}" style="visibility: hidden;">
- <i class="iconfont icon-link"></i>
- </a>
- {{ $name := .name }}
- </div>
- <p>{{.description}}</p>
- </div>
- <div class="doc-box">
- <div class="flex-center">
- {{if .sourceText}}
- <span class="source-text">{{.sourceText}}</span>
- {{else}}
- <div class="btn-group">
- <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown"
- aria-haspopup="true" aria-expanded="false">
- Source
- </button>
- <div class="dropdown-menu scroll-bar">
- <div>
- {{ range .source }}
- <h6 class="dropdown-header">{{.version}}<span> | {{.date}}</span></h6>
- {{ $version := .version }}
- <div class="dropdown-item download-links">
- {{range .downloadLink}}
- {{ if eq .name "|" }}<div class="dl-break"></div>{{ else }}
- {{ if or (eq .name "asc") (eq .name "sha512") }}
- <a class="dl-aux" href="{{.link}}" data-label="[{{$name}}]-[Source]-[{{$version}}]-[{{.name}}]"
- rel="noopener noreferrer" target="_blank" title="{{.name}}">{{.name}}</a>
- {{ else }}
- <a class="dl-main" href="{{.link}}" data-label="[{{$name}}]-[Source]-[{{$version}}]-[{{.name}}]"
- rel="noopener noreferrer" target="_blank">{{.name}}</a>
- {{ end }}
- {{ end }}
- {{end}}
- </div>
- {{end}}
- </div>
- </div>
- </div>
- {{end}}
- </div>
+ {{ if .sourceText }}
+ <div class="dl-note">{{ .sourceText }}</div>
+ {{ else }}
- {{ if .distribution}}
- <div class="btn-group">
- <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
- aria-expanded="false">
- Distribution
- </button>
- <div class="dropdown-menu scroll-bar">
- <div>
- {{ range .distribution }}
- <h6 class="dropdown-header">{{.version}}<span> | {{.date}}</span></h6>
- {{ $version := .version }}
- <div class="dropdown-item download-links">
- {{range .downloadLink}}
- {{ if eq .name "|" }}<div class="dl-break"></div>{{ else }}
- {{ if or (eq .name "asc") (eq .name "sha512") }}
- <a class="dl-aux" href="{{.link}}" data-label="[{{$name}}]-[Distribution]-[{{$version}}]-[{{.name}}]"
- rel="noopener noreferrer" target="_blank" title="{{.name}}">{{.name}}</a>
- {{ else }}
- <a class="dl-main" href="{{.link}}" data-label="[{{$name}}]-[Distribution]-[{{$version}}]-[{{.name}}]"
- rel="noopener noreferrer" target="_blank">{{.name}}</a>
- {{ end }}
- {{ end }}
- {{end}}
- </div>
- {{end}}
- </div>
-
- </div>
- </div>
- {{end}}
- </div>
-
- </div>
+ {{- /* ---- Source: latest visible; older in a top-right dropdown ---- */ -}}
+ {{ if .source }}
+ {{ $latest := index .source 0 }}
+ {{ $more := after 1 .source }}
+ <div class="dl-rel">
+ <div class="dl-rel-head">
+ <span class="dl-rel-label">Source</span>
+ {{ if $more }}
+ <details class="dl-more">
+ <summary>+{{ len $more }} more</summary>
+ <ul class="dl-dd-list">
+ {{ range $more }}
+ {{ $v := .version }}
+ <li class="dl-row">
+ <span class="dl-row-ver">{{ .version }}</span>
+ <span class="dl-row-date">{{ .date }}</span>
+ <span class="dl-links">
+ {{ range .downloadLink }}
+ {{ if eq .name "|" }}
+ {{ else if or (eq .name "asc") (eq .name "sha512") }}
+ <a class="dl-link dl-link--sig" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Source]-[{{ $v }}]-[{{ .name }}]">{{ .name }}</a>
+ {{ else }}
+ <a class="dl-link dl-link--mini" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Source]-[{{ $v }}]-[{{ .name }}]">{{ .name }} ↓</a>
+ {{ end }}
+ {{ end }}
+ </span>
+ </li>
+ {{ end }}
+ </ul>
+ </details>
+ {{ end }}
</div>
- {{end}}
+ {{ with $latest }}
+ {{ $v := .version }}
+ <div class="dl-row is-latest">
+ <span class="dl-row-ver">{{ .version }} <span class="dl-latesttag">latest</span></span>
+ <span class="dl-row-date">{{ .date }}</span>
+ <span class="dl-links">
+ {{ range .downloadLink }}
+ {{ if eq .name "|" }}
+ {{ else if or (eq .name "asc") (eq .name "sha512") }}
+ <a class="dl-link dl-link--sig" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Source]-[{{ $v }}]-[{{ .name }}]">{{ .name }}</a>
+ {{ else }}
+ <a class="dl-link dl-link--mini" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Source]-[{{ $v }}]-[{{ .name }}]">{{ .name }} ↓</a>
+ {{ end }}
+ {{ end }}
+ </span>
+ </div>
+ {{ end }}
</div>
- </div>
- {{end}}
-
-</div>
-
-<div class="container container-archived">
- <p>Older releases are not recommended for new users, because they are not maintained, but you still can find them(source codes and binaries) if you have specific reasons.
- </p>
- <p>Find all SkyWalking releases in the <a href="https://archive.apache.org/dist/skywalking/">Archive repository</a>.
- </p>
- <p>
- <a href="https://archive.apache.org/dist/incubator/skywalking/">Archive incubating repository</a>
- hosts older releases when SkyWalking was an incubator project.
- </p>
-</div>
+ {{ end }}
-<div class="container-full">
- <div class="container">
- <div class="card-wrapper images-wrapper">
- <h2 class="deco-title" id="DockerImages">Docker Images for convenience</h2>
- <div class="item-wrapper">
- {{ range .Site.Data.dockerImages }}
- {{$imgId := replace .name " " "" }}
- <div class="card item">
- <div class="card-body">
- <div class="title-box">
- <h5 class="card-title">{{.name}}</h5>
- <a aria-hidden="true" href="#{{$imgId}}Image" id="{{$imgId}}Image" style="visibility: hidden;">
- <i class="iconfont icon-link"></i>
- </a>
- </div>
- <p class="card-text">{{.description}}</p>
- <div class="doc-box">
- <div class="btn-group">
- <a class="btn btn-sm" href="{{.link}}">Docker Image</a>
- </div>
- </div>
- </div>
- </div>
- {{end}}
+ {{- /* ---- Distribution: latest visible; older in a top-right dropdown ---- */ -}}
+ {{ with .distribution }}
+ {{ $latest := index . 0 }}
+ {{ $dmore := after 1 . }}
+ <div class="dl-rel">
+ <div class="dl-rel-head">
+ <span class="dl-rel-label">Distribution</span>
+ {{ if $dmore }}
+ <details class="dl-more">
+ <summary>+{{ len $dmore }} more</summary>
+ <ul class="dl-dd-list">
+ {{ range $dmore }}
+ {{ $v := .version }}
+ <li class="dl-row">
+ <span class="dl-row-ver">{{ .version }}</span>
+ <span class="dl-row-date">{{ .date }}</span>
+ <span class="dl-links">
+ {{ range .downloadLink }}
+ {{ if eq .name "|" }}
+ {{ else if or (eq .name "asc") (eq .name "sha512") }}
+ <a class="dl-link dl-link--sig" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Distribution]-[{{ $v }}]-[{{ .name }}]">{{ .name }}</a>
+ {{ else }}
+ <a class="dl-link dl-link--mini" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Distribution]-[{{ $v }}]-[{{ .name }}]">{{ .name }} ↓</a>
+ {{ end }}
+ {{ end }}
+ </span>
+ </li>
+ {{ end }}
+ </ul>
+ </details>
+ {{ end }}
</div>
+ {{ with $latest }}
+ {{ $v := .version }}
+ <div class="dl-row is-latest">
+ <span class="dl-row-ver">{{ .version }} <span class="dl-latesttag">latest</span></span>
+ <span class="dl-row-date">{{ .date }}</span>
+ <span class="dl-links">
+ {{ range .downloadLink }}
+ {{ if eq .name "|" }}
+ {{ else if or (eq .name "asc") (eq .name "sha512") }}
+ <a class="dl-link dl-link--sig" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Distribution]-[{{ $v }}]-[{{ .name }}]">{{ .name }}</a>
+ {{ else }}
+ <a class="dl-link dl-link--mini" href="{{ .link }}" target="_blank" rel="noopener" data-label="[{{ $name }}]-[Distribution]-[{{ $v }}]-[{{ .name }}]">{{ .name }} ↓</a>
+ {{ end }}
+ {{ end }}
+ </span>
+ </div>
+ {{ end }}
</div>
- </div>
-</div>
-
+ {{ end }}
+ {{ end }}{{/* end sourceText else */}}
+ </article>
+ {{ end }}
+</div>
+{{ end }}
+{{- /* ---- Docker images ---- */ -}}
+<h2 class="dl-cat" id="DockerImages">Docker Images</h2>
+<div class="dl-grid dl-grid--docker">
+ {{ range .Site.Data.dockerImages }}
+ {{ $imgId := replace .name " " "" }}
+ <article class="dl-card dl-card--docker" id="{{ $imgId }}Image">
+ <h5>{{ .name }}</h5>
+ {{ with .description }}<p>{{ . }}</p>{{ end }}
+ <a class="dl-link dl-link--main" href="{{ .link }}" target="_blank" rel="noopener">
+ <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M4 9h3v3H4zm4 0h3v3H8zm4 0h3v3h-3zm4 0h3v3h-3zm-8-4h3v3H8zm4 0h3v3h-3z"/></svg>
+ Docker image
+ </a>
+ </article>
+ {{ end }}
+</div>
diff --git a/layouts/shortcodes/team-count.html b/layouts/shortcodes/team-count.html
new file mode 100644
index 00000000000..1d60efc61ed
--- /dev/null
+++ b/layouts/shortcodes/team-count.html
@@ -0,0 +1 @@
+{{- .Site.Data.team.totalCount | default "1,000+" -}}
diff --git a/layouts/shortcodes/team-members.html b/layouts/shortcodes/team-members.html
new file mode 100644
index 00000000000..7325baa4ae9
--- /dev/null
+++ b/layouts/shortcodes/team-members.html
@@ -0,0 +1,37 @@
+{{- /* Renders PMC + Committer rosters from data/committee.yml as merged grids. */ -}}
+{{ $c := .Site.Data.committee }}
+<div class="team-roles">
+ {{ with $c.pmc }}
+ <section class="team-role">
+ <h3>Project Management Committee <span class="role-count">{{ len . }}</span></h3>
+ <div class="member-grid">
+ {{ range . }}
+ <div class="member">
+ <span class="m-name">{{ .name }}</span>
+ <span class="m-meta">
+ <span class="m-id">{{ .apacheId }}</span>
+ {{ with .twitter }}<a class="m-tw" href="https://twitter.com/{{ . }}" target="_blank" rel="noopener" aria-label="Twitter {{ . }}"><i class="iconfont icon-twitter"></i></a>{{ end }}
+ </span>
+ </div>
+ {{ end }}
+ </div>
+ </section>
+ {{ end }}
+
+ {{ with $c.committer }}
+ <section class="team-role">
+ <h3>Committers <span class="role-count">{{ len . }}</span></h3>
+ <div class="member-grid">
+ {{ range . }}
+ <div class="member">
+ <span class="m-name">{{ .name }}</span>
+ <span class="m-meta">
+ <span class="m-id">{{ .apacheId }}</span>
+ {{ with .twitter }}<a class="m-tw" href="https://twitter.com/{{ . }}" target="_blank" rel="noopener" aria-label="Twitter {{ . }}"><i class="iconfont icon-twitter"></i></a>{{ end }}
+ </span>
+ </div>
+ {{ end }}
+ </div>
+ </section>
+ {{ end }}
+</div>
diff --git a/layouts/shortcodes/users.html b/layouts/shortcodes/users.html
index aa86dafaa16..d71b2b2f33e 100644
--- a/layouts/shortcodes/users.html
+++ b/layouts/shortcodes/users.html
@@ -1,20 +1,28 @@
+{{- /* Users / adopters — auto-scrolling logo marquee (3 rows, alternating
+ directions). Each row's logos are duplicated so the loop is seamless.
+ Data: data/users.yml */ -}}
+{{ $users := .Site.Data.users.users }}
+{{ $rows := 5 }}
<div class="users-wrapper">
- <div class="contain">
- <h1 class="section-head">Our Users</h1>
- <p>
- Various companies and organizations use SkyWalking for research, production and commercial products.
- </p>
- <div class="img-wrapper">
- {{ range .Site.Data.users.users }}
- <a class="link" href="{{.website}}" rel="noopener noreferrer" target="_blank">
- <img data-src="{{.logo}}" data-nolightbox="true">
- </a>
- {{end}}
- </div>
-
- <p>Users are encouraged to add themselves to this page. Send a pull request to add your company or organization
- information <a target="_blank"
- href="https://github.com/apache/skywalking-website/blob/master/data/users.yml">[here]</a>.
- </p>
+ <div class="users-marquee-wrap">
+ {{ range $r := (seq 0 (sub $rows 1)) }}
+ <div class="users-marquee">
+ <div class="users-track{{ if eq (mod $r 2) 1 }} rev{{ end }}">
+ {{ range $pass := (seq 1 2) }}
+ {{ range $i, $u := $users }}
+ {{ if eq (mod $i $rows) $r }}
+ <a class="users-logo" href="{{ $u.website }}" rel="noopener noreferrer" target="_blank" title="{{ $u.name }}{{ with $u.info }} — {{ . }}{{ end }}"{{ if eq $pass 2 }} aria-hidden="true" tabindex="-1"{{ end }}>
+ <img loading="lazy" src="{{ $u.logo }}" alt="{{ $u.name }}" data-nolightbox="true">
+ </a>
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ </div>
</div>
+ {{ end }}
+ </div>
+ <p class="users-note">
+ Using SkyWalking? Add your company or organization — send a pull request to
+ <a target="_blank" rel="noopener" href="https://github.com/apache/skywalking-website/blob/master/data/users.yml">data/users.yml</a>.
+ </p>
</div>
diff --git a/layouts/team/baseof.html b/layouts/team/baseof.html
new file mode 100644
index 00000000000..2e1da8ac923
--- /dev/null
+++ b/layouts/team/baseof.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-team">
+ <header>
+ {{ partial "navbar.html" . }}
+ </header>
+ <div class="container-fluid td-outer">
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ partial "footer.html" . }}
+ </div>
+ {{ partial "event-popup.html" . }}
+ {{ partial "lightbox.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ {{ partial "script-team.html" . }}
+ </body>
+</html>
diff --git a/layouts/team/list.html b/layouts/team/list.html
new file mode 100644
index 00000000000..eb7cdfbe594
--- /dev/null
+++ b/layouts/team/list.html
@@ -0,0 +1,16 @@
+{{ define "main" }}
+<section class="team-hero">
+ <div class="container">
+ <span class="eyebrow">TEAM</span>
+ <h1>The people behind SkyWalking</h1>
+ <p>The project is run by its Members (PMC & Committers) and grown by
+ <a href="/contributors/">{{ .Site.Data.team.totalCount | default "1,000+" }} contributors</a>.
+ Members have direct access to the source and actively evolve the codebase; contributors
+ improve the project through patches and suggestions.</p>
+ </div>
+</section>
+
+<div class="container team-wrap">
+ {{ .Content }}
+</div>
+{{ end }}
diff --git a/layouts/users/baseof.html b/layouts/users/baseof.html
new file mode 100644
index 00000000000..d40fb03fa29
--- /dev/null
+++ b/layouts/users/baseof.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-users">
+ <header>
+ {{ partial "navbar.html" . }}
+ </header>
+ <div class="container-fluid td-outer">
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ partial "footer.html" . }}
+ </div>
+ {{ partial "event-popup.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ </body>
+</html>
diff --git a/layouts/users/list.html b/layouts/users/list.html
new file mode 100644
index 00000000000..c72a3182639
--- /dev/null
+++ b/layouts/users/list.html
@@ -0,0 +1,21 @@
+{{ define "main" }}
+<section class="users-hero">
+ <div class="container">
+ <div class="users-hero-grid">
+ <div>
+ <span class="eyebrow">USERS</span>
+ <h1>Trusted in production worldwide</h1>
+ <p>Companies and organizations across industries run Apache SkyWalking for research,
+ production and commercial products.</p>
+ <div class="users-cta">
+ <a class="sky-btn primary" href="https://github.com/apache/skywalking-website/blob/master/data/users.yml" target="_blank" rel="noopener">Add your company →</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<div class="container users-wrap">
+ {{ .Content }}
+</div>
+{{ end }}
diff --git a/layouts/zh/baseof.html b/layouts/zh/baseof.html
new file mode 100644
index 00000000000..cbed3d8a9d1
--- /dev/null
+++ b/layouts/zh/baseof.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+ <head>
+ {{ partial "head.html" . }}
+ <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ </head>
+ <body class="td-{{ .Kind }} td-blog">
+ <header>
+ {{ partial "navbar.html" . }}
+ </header>
+ <div class="container-fluid td-outer">
+ {{ if eq .Kind "page" }}
+ {{- /* single post: keep the readable two-column layout with TOC */ -}}
+ <div class="td-main">
+ <div class="row container container-center">
+ <main class="col-12 col-md-12 col-xl-10 pl-md-4 pr-md-4" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ <div class="toc d-none d-xl-block d-md-none col-xl-2 td-toc d-print-none">
+ {{ partial "tags-zh.html" . }}
+ {{ partial "toc.html" . }}
+ </div>
+ </div>
+ </div>
+ {{ else }}
+ {{- /* list: full-width card grid */ -}}
+ <main class="td-main" role="main">
+ {{ block "main" . }}{{ end }}
+ </main>
+ {{ end }}
+ {{ partial "footer.html" . }}
+ </div>
+ {{ partial "event-popup.html" . }}
+ {{ partial "lightbox.html" . }}
+ {{ partial "sidebar-skywalking.html" . }}
+ {{ partial "scripts.html" . }}
+ </body>
+</html>
diff --git a/layouts/zh/list.html b/layouts/zh/list.html
new file mode 100644
index 00000000000..424b1e0729e
--- /dev/null
+++ b/layouts/zh/list.html
@@ -0,0 +1,43 @@
+{{ define "main" }}
+{{- if .Parent.IsHome -}}
+{{ $.Scratch.Set "blog-pages" (where .Site.RegularPages "Section" .Section) }}
+{{- else -}}
+{{ $.Scratch.Set "blog-pages" .Pages }}
+{{- end -}}
+{{ $pag := .Paginate (($.Scratch.Get "blog-pages").GroupByDate (i18n "year")) }}
+
+<section class="blog-hero">
+ <div class="container">
+ <span class="eyebrow">中文博客</span>
+ <h1>工程实践与社区动态</h1>
+ <p>来自 Apache SkyWalking 社区的版本解读、架构设计、集成实践与一线经验分享 —— 按时间倒序排列。</p>
+ </div>
+</section>
+
+<div class="container blog-wrap">
+ {{ range $pag.PageGroups }}
+ <h2 class="blog-year">{{ .Key }} 年</h2>
+ <div class="blog-grid">
+ {{ range .Pages }}
+ <article class="blog-card">
+ {{ with .Params.tags }}
+ <div class="blog-labels">
+ {{ range . }}<span class="blog-label" data-label="{{ . }}">{{ . }}</span>{{ end }}
+ </div>
+ {{ end }}
+ <h3 class="blog-card-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
+ <p class="blog-card-preview">{{ with .Description }}{{ . }}{{ else }}{{ .Plain | safeHTML | truncate 160 }}{{ end }}</p>
+ <div class="blog-card-foot">
+ <span class="blog-date">{{ .Date.Format "2006-01-02" }}</span>
+ {{ with .Params.author }}<span class="blog-author">{{ . | markdownify }}</span>{{ end }}
+ </div>
+ </article>
+ {{ end }}
+ </div>
+ {{ end }}
+
+ <div class="blog-pagination">
+ {{ template "_internal/pagination.html" . }}
+ </div>
+</div>
+{{ end }}
diff --git a/package.json b/package.json
index 53322f57b43..5144323be14 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,12 @@
"description": "SkyWalking Website",
"main": "none.js",
"scripts": {
- "build": "npm install && hugo",
- "build-with-docs": "npm install && npm run docs && npm run team && hugo && npm run cp",
- "build-preview": "npm install && npm run docs && npm run team && hugo && npm run cp",
+ "build": "npm install && npm run stars && hugo",
+ "build-with-docs": "npm install && npm run docs && npm run team && npm run stars && hugo && npm run cp",
+ "build-preview": "npm install && npm run docs && npm run team && npm run stars && hugo && npm run cp",
"docs": "node ./docs.js",
"team": "node ./scripts/team.js",
+ "stars": "node ./scripts/stars.js",
"cp": "cp ./.htaccess ./public && cp ./.asf.yaml ./public",
"test": "echo \"Error: no test specified\" && exit 1"
},
diff --git a/scripts/stars.js b/scripts/stars.js
new file mode 100644
index 00000000000..ae58b6fe6f3
--- /dev/null
+++ b/scripts/stars.js
@@ -0,0 +1,115 @@
+const process = require('process');
+const path = require('path');
+const fs = require('fs');
+const YAML = require('yamljs');
+const axios = require('axios');
+
+const {promises} = fs;
+const docsFile = path.join(__dirname, '../data/docs.yml');
+const starsFile = path.join(__dirname, '../data/stars.yml');
+
+const SLEEP_MS = 1500;
+const sleep = (ms = SLEEP_MS) => new Promise((r) => setTimeout(r, ms));
+
+function loadYaml(file) {
+ return new Promise((resolve) => YAML.load(file, (data) => resolve(data)));
+}
+
+function loadCached() {
+ try {
+ return YAML.load(starsFile) || {repos: {}};
+ } catch (_) {
+ return {repos: {}};
+ }
+}
+
+function collectRepos(docs) {
+ const repos = new Map();
+ for (const group of docs) {
+ for (const item of group.list || []) {
+ if (item && item.user && item.repo) {
+ repos.set(`${item.user}/${item.repo}`, {user: item.user, repo: item.repo});
+ }
+ }
+ }
+ return [...repos.values()];
+}
+
+async function fetchOne({user, repo}) {
+ const url = `https://api.github.com/repos/${user}/${repo}`;
+ const headers = {'User-Agent': 'skywalking-website-build'};
+ if (process.env.GITHUB_TOKEN) {
+ headers['Authorization'] = `Bearer ${process.env.GITHUB_TOKEN}`;
+ }
+ // one transient-error retry — GH occasionally drops the connection
+ let lastErr;
+ for (let attempt = 0; attempt < 2; attempt++) {
+ try {
+ const {data} = await axios.get(url, {headers, timeout: 15000});
+ return {
+ stars: data.stargazers_count || 0,
+ forks: data.forks_count || 0,
+ watchers: data.subscribers_count || 0,
+ openIssues: data.open_issues_count || 0,
+ };
+ } catch (err) {
+ lastErr = err;
+ const transient = err.code === 'ECONNRESET' || err.code === 'ETIMEDOUT' || err.code === 'ECONNABORTED';
+ if (!transient) break;
+ await sleep(2000);
+ }
+ }
+ throw lastErr;
+}
+
+function hasUsableValue(entry) {
+ return entry && (entry.stars > 0 || entry.forks > 0);
+}
+
+async function main() {
+ const docs = await loadYaml(docsFile);
+ const cached = loadCached();
+ const repos = collectRepos(docs);
+
+ const out = {repos: {...cached.repos}, totals: {stars: 0, forks: 0, repos: repos.length}, generatedAt: new Date().toISOString()};
+
+ let failures = 0, skipped = 0;
+ for (const r of repos) {
+ const key = `${r.user}/${r.repo}`;
+ try {
+ const data = await fetchOne(r);
+ out.repos[key] = data;
+ console.log(`${key} ★ ${data.stars}`);
+ } catch (err) {
+ failures++;
+ const status = err.response && err.response.status;
+ const prev = cached.repos && cached.repos[key];
+ if (hasUsableValue(prev)) {
+ out.repos[key] = prev;
+ console.warn(`${key} fetch failed (${status || err.code}) — using cached ★ ${prev.stars}`);
+ } else {
+ delete out.repos[key];
+ skipped++;
+ console.warn(`${key} fetch failed (${status || err.code}) — no usable cache, omitting`);
+ }
+ }
+ await sleep();
+ }
+
+ for (const key of Object.keys(out.repos)) {
+ out.totals.stars += out.repos[key].stars || 0;
+ out.totals.forks += out.repos[key].forks || 0;
+ }
+
+ await promises.writeFile(starsFile, YAML.stringify(out, 4, 2), 'utf8');
+ console.log(`\nstars.yml written: ${Object.keys(out.repos).length}/${repos.length} repos, ${failures} failures (${skipped} omitted), ★ ${out.totals.stars} total`);
+}
+
+main().catch((err) => {
+ console.error(err);
+ if (fs.existsSync(starsFile)) {
+ console.warn('stars script failed; keeping existing data/stars.yml');
+ process.exit(0);
+ }
+ process.exit(1);
+});
diff --git a/static/images/asf-oakleaf.svg b/static/images/asf-oakleaf.svg
new file mode 100644
index 00000000000..99471de3b9a
--- /dev/null
+++ b/static/images/asf-oakleaf.svg
@@ -0,0 +1,9 @@
+<svg width="800" height="1231" viewBox="0 0 800 1231" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M340.565 490.125C371.984 412.419 407.04 334.865 444.655 266.127C388.506 224.415 334.59 134.468 312.439 94.616C304.483 103.656 299.318 114.069 296.976 122.539C276.107 197.903 350.394 288.909 290.56 255.659C240.706 227.952 128.448 167.276 85.6282 227.583C133.585 289.214 259.016 444.273 340.565 490.125Z" fill="#DD552C"/>
+<path d="M444.655 266.127C481.103 199.523 519.944 141.19 560.214 99.1643C560.214 99.1643 520.049 157.313 462.68 273.555C497.424 283.125 596.373 302.762 734.199 267.154C737.588 242.103 720.749 214.548 636.838 205.323C582.057 199.307 702.592 74.4897 615.272 15.4582C612.453 13.549 609.682 11.8645 606.967 10.3564C604.04 9.30555 600.948 8.34295 597.648 7.48463C495.667 -19.1313 481.532 153.824 440.837 116.644C375.076 56.5612 333.568 70.5992 312.439 94.616C334.59 134.468 388.506 224.415 444.655 [...]
+<path d="M258.543 714.009C281.565 645.031 309.259 567.534 340.565 490.125C259.016 444.273 133.585 289.214 85.6282 227.583C77.0666 239.632 71.2159 256.437 69.267 279.419C58.8087 402.865 186.137 494.256 160.753 510.949C127.177 533.032 60.3486 457.902 34.0103 505.638C72.1864 554.691 149.95 643.322 258.543 714.009Z" fill="#D22128"/>
+<path d="M611.342 447.778C546.872 424.78 678.712 363.101 721.523 297.669C727.001 289.302 732.663 278.489 734.199 267.154C596.373 302.762 497.424 283.125 462.68 273.555C432.982 333.742 398.687 409.587 362.922 501.034C400.171 516.965 552.266 575.812 767.094 576.117C803.213 482.023 672.528 469.597 611.342 447.778Z" fill="#DD552C"/>
+<path d="M283.454 726.427C321.337 738.235 446.861 773.506 580.172 768.196C598.081 719.697 531.124 714.964 525.671 676.067C521.448 645.97 701.878 701.359 759.932 591.92C762.867 586.385 765.157 581.163 767.094 576.117C552.266 575.812 400.171 516.965 362.921 501.034C336.784 567.863 309.896 642.865 283.454 726.427Z" fill="#D22128"/>
+<path d="M283.454 726.427C266.431 780.212 249.637 837.672 233.336 898.396C227.553 919.926 221.839 941.857 216.205 964.27C342.735 1006.05 459.248 964.366 463.198 912.706C463.23 912.297 463.154 911.992 463.178 911.599C466.189 856.883 384.195 887.213 386.136 854.317C388.085 821.179 529.284 854.124 572.95 783.076C576.298 777.629 578.48 772.792 580.172 768.196C446.861 773.506 321.337 738.235 283.454 726.427Z" fill="#7C297D"/>
+<path d="M34.0104 505.638C32.1657 508.983 30.5015 512.85 29.082 517.47C4.56029 597.182 177.956 704.263 154.365 727.606C133.1 748.639 105.386 700.573 71.2119 720.427C67.4665 722.609 63.6649 725.36 59.7631 729.363C21.1139 768.966 59.1576 883.058 168.813 943.959C143.225 1029.89 117.749 1125.91 92.8102 1226.31C101.857 1223.14 112.684 1219.97 115.379 1211.43C119.425 1194.8 144.432 1093.56 185.034 956.224C185.034 956.224 192.445 928.092 206.011 881.743C218.554 838.883 236.379 780.429 258.543 7 [...]
+</svg>