diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 13e47b9945b1..87c484f18f28 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 08ad5a2ef133..6a2bc456ea92 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 5ca8fe9c7f8e..1ee4d81c1841 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 e5036f9194c0..0fd1376c3f68 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 
; 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 afa35f1c7792..654d5efbd949 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 000000000000..3eca0b5af3d3
--- /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 000000000000..42d5f5b17cd6
--- /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 dc7e45c61f8c..4abcde955605 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -3,198 +3,225 @@
 linkTitle = "Apache SkyWalking"
 +++
 
-

-    {{< contributors-home >}}
+
+

+  

+    

+      
+        
+          
+          
+          
+          · APACHE SOFTWARE FOUNDATION · OPEN SOURCE · COMMUNITY-DRIVEN 
+        
+        
+      
+      
+    

 
-    

-        

-            Apache SkyWalking
-            
-                
-            
-        

-        

-            Application performance monitor tool for distributed systems, especially designed for
-            microservices, cloud native and container-based (Kubernetes) architectures.
-        

-        
-            
-        
-        
-        
-        

-            Username: skywalking
-            Password: skywalking
-            
-              
-              Go to native UI 
-              
-            
-            
-              
-              Preview metrics on Grafana 
-              
-            
+    

+      

+        
The observability platform for cloud-native

+        

+          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.
+        

+        

+          
+            
+          
+          
+            
+            

+              Username: skywalking
+              Password: skywalking
+              
+                Go to UI 
+              
+              
+                Preview on Grafana 
+              
+            

+          
+          
+             Star on GitHub
+          
         

-    
+      

+
+      

+        demo.skywalking.apache.org
+        SkyWalking services dashboard with topology and active alarms
+      

     

-

 
-{{< home-banner >}}
+    

+      

+        SkyWalking trace explorer with span waterfall
+        
Distributed tracingSpan-by-span waterfalls.

+      

 
-

-    

-        

-            All-in-one APM solution
-        

-        
    
-            
  • 
-                
    Distributed Tracing
    
-                
    
-                    End-to-end distributed tracing. Service topology analysis, service-centric observability and APIs
-                    dashboards.
-                
    
-            
    • 
-            
  • 
-                
    Agents for your stack
    
-                
    
-                    Java, .Net Core, PHP, NodeJS, Golang, LUA, Rust, C++, Client JavaScript and Python agents with
-                    active
-                    development and maintenance.
-                
    
-            
    • 
-            
  • 
-                
    eBPF early adoption
    
-                
    
-                    Rover agent works as a monitor and profiler powered by eBPF to monitor Kubernetes deployments and diagnose CPU and network performance.
-                
    
-            
    • 
-        

-        
    
-            
  • 
-                
    Scaling
    
-                
    
-                    100+ billion telemetry data could be collected and analyzed from one SkyWalking cluster.
-                
    
-            
    • 
-            
  • 
-                
    Mature Telemetry Ecosystems Supported
    
-                
    
-                    Metrics, Traces, and Logs from mature ecosystems are supported, e.g. Zipkin, OpenTelemetry,
-                    Prometheus,
-                    Zabbix, Fluentd
-                
    
-            
    • 
-            
  • 
-                
    Native APM Database
    
-                
    
-                    BanyanDB, an observability database, created in 2022, aims to ingest, analyze and store
-                    telemetry/observability data.
-                
    
-            
    • 
-        

-        
    
-            
  • 
-                
    Consistent Metrics Aggregation
    
-                
    
-                    SkyWalking native meter format and widely known metrics format(OpenCensus, OTLP, Telegraf, Zabbix,
-                    e.g.) are
-                    processed through the same script pipeline.
-                
    
-            
    • 
-            
  • 
-                
    Log Management Pipeline
    
-                
    
-                    Support log formatting, extract metrics, various sampling policies through script pipeline in high
-                    performance.
-                
    
-            
    • 
-            
  • 
-                
    Alerting and Telemetry Pipelines
    
-                
    
-                    Support service-centric, deployment-centric, API-centric alarm rule setting. Support forwarding
-                    alarms and all
-                    telemetry data to 3rd party.
-                
    
-            
    • 
-        

-        
    
-            
  • 
-                
    AI Power Enabled
    
-                
    
-                    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.
-                
    
-            
    • 
-        

+      

+        SkyWalking logs explorer
+        
LogsTrace-correlated log explorer.

+      

 
+      

+        SkyWalking metrics and dashboards
+        
Metrics & dashboardsCustomizable widgets and MQE.

+      

+
+      

+        SkyWalking RBAC and alerting
+        
RBAC & alertingRole-based access and alarm rules.

+      

     

+  

+

 
-    

-        architecture
+

+
+

+  

+    

+      WHAT YOU GET
+      
One platform for traces, metrics, logs and profiles

+      
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.

     

-

+    

+      

+        Tracing
+        
End-to-end distributed tracing

+        
Native plus Zipkin v1/v2 formats. Auto-instrument 10+ languages, eBPF on Kubernetes, and dependency analysis across services and APIs.

+        Learn more →
+      

+      

+        Metrics
+        
Metrics pipeline at any scale

+        
OTLP, native, OpenCensus, Telegraf and Zabbix flow through one MAL script pipeline — 100B+ data points per cluster.

+        Learn more →
+      

+      

+        Logging
+        
Logs with trace correlation

+        
Collect from disk or network, auto-bind trace context, extract metrics, sample by policy, and forward anywhere.

+        Learn more →
+      

+      

+        Profiling
+        
Profiling, in-agent and eBPF

+        
CPU and async profiling bundled in language agents. eBPF profiler on Rover for Kubernetes deployments.

+        Learn more →
+      

+    

+  

+
+
+
+

+  

+    

+      ECOSYSTEM
+      
Built for the stack you already run

+      
Language agents, service mesh, eBPF, a native observability database, and broad telemetry-format support — vendor-neutral and Apache-governed.

+    

+    

+      
+        
+        
Agents for your stack

+        
Java, Go, Python, Node.js, PHP, Rust, .NET, LUA, C++ and Client JavaScript — actively maintained.

+        14 language agents →
+      
+      
+        
+        
eBPF with Rover

+        
Monitor and profile Kubernetes deployments and diagnose CPU and network performance with eBPF.

+        Rover docs →
+      
+      
+        
+        
BanyanDB

+        
A native observability database built to ingest, analyze and store telemetry at scale.

+        BanyanDB docs →
+      
+      
+        
+        
AI-assisted analysis

+        
ML baselines, HTTP URI pattern recognition and anomaly detection for smarter alerting.

+        AI on the blog →
+      
+    

+    

+      Telemetry supported natively
+      OpenTelemetry (OTLP)
+      Zipkin v1/v2
+      Prometheus
+      OpenCensus
+      Telegraf
+      Zabbix
+      Fluentd / Fluent Bit
+      Apache Kafka
+    

+  

+

 
-

-    
Events & Blogs

+
+

+  

+    

+      LATEST
+      
Events & blogs

+    

     
    
-        {{< blocks/events >}}
-        {{< /blocks/events >}}
+      {{< blocks/events >}}
+      {{< /blocks/events >}}
     

-

-
-

-    
Ready to get started?

-    

-        

-        

-            
Run SkyWalking in a snap

-            
Try this demo music application to showcase features of Apache SkyWalking in action.

-            
+

 
-            

-            All releases
+
+

+  

+    

+      

+        GET STARTED
+        
Ready to get started?

+        
Spin up the Showcase to see Apache SkyWalking in action, or install the platform — then join a community built by {{< team-count >}} contributors.

+        

+          Quick start 
+          All releases
         

+      

+    

 
+    

+      
+        
+        
Questions or bugs?

+        
Open a discussion or file an issue on GitHub — feature requests, questions and bug reports all welcome.

+        GitHub Discussions →
+      
+      
+        
+        
Join our Slack

+        
Chat with maintainers and users in real time. Send a request to dev@skywalking.apache.org and we'll invite you.

+        Get an invite →
+      
+      
+        
+        
Follow on Twitter

+        
Announcements, releases and the latest features — follow @ASFSkyWalking for project news.

+        @ASFSkyWalking →
+      
     

-

+  

+
 
-

-    

-        Stay tuned with SkyWalking
-    

-    
    
-        
  • 
-            
    Questions/bugs?
    
-            
    Features requests, questions or report bugs? Feel free to
-                open a discussion
-                or file an issue.
    
-            questions
-        
    • 
-        
  • 
-            
    Join our slack workspace!
    
-            
    Send "Request to join SkyWalking slack" mail to
-                dev@skywalking.apache.org.
-                We will invite you in.
    
-            slack
-        
    • 
-        
  • 
-            
    Follow us on Twitter
    
-            
    For announcement of latest features etc, stay tuned with
-                @ASFSkyWalking.
-            
    
-            twitter
-        
    • 
-    

 

-
diff --git a/content/blog/2018-05-24-skywalking-net/index.md b/content/blog/2018-05-24-skywalking-net/index.md
index 1b33092cce59..1e1f7d937dd5 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 2de75545b1ee..5cb61ec63d72 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 4045706fda94..a3bb404279df 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 2520a724ee03..1dc9abf68cf8 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 5ae50faa2b4d..5c939fcb833b 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 8076be61c314..b51af5f6a71e 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 0829bd618300..e781abdd8c23 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 1679198dcadd..083cfd172975 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 7d7aea51c7fb..1bb3df636d3e 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 46e26dc9b8ce..d954debb97ab 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 9b359482e25e..32dc31df01a9 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
 ---
 
 ![](0081Kckwly1gkl5m6kv3uj31lb0u0jum.jpg)
diff --git a/content/blog/2020-11-21-apachecon-keynote/index.md b/content/blog/2020-11-21-apachecon-keynote/index.md
index 09b9fda85011..7f169fe100e7 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, Alibaba Cloud MVP, Tencent Cloud TVP.
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 7c713098dfc9..dad23aaa0879 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 cycle of requests from the edge to the internal service. Monitor and manage each request in a visual way, and improve the observability of the service.
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 b3a807a48ed5..503d7f534142 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 another backend storage solution for the APM system viewing from NewSQL. Taking Apache Skywalking for instance, this talking will share how to make use of Apache ShardingSphere, a distributed database middleware ecosystem to extend the APM system's storage capability.
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 d352039826ee..9127ebf1859f 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 makes it increasingly necessary for programming environments to not just support development-centric activities, but operation-centric activities as well. Such is the goal of the feedback-driven development approach. By combining IDE and APM technology, software developers can intuitively explore multiple dimensions of their software simultaneously with continuous feedback about their software from inception to production.
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 1502eafdee1a..8abc64589501 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, from the traditional relational database to document-based search engine. I hope that this talk contributes to the understanding of history and also that it helps to clarify the different types of storage that are available to organizations today.
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 ad574d7d7a95..54c4eb95389a 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 c699f318320e..454d54ba6214 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
 ---
 
 ![](canyonhorseshoe.jpg)
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 569b4cea51e8..99f463c5484c 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 23e5ccec345f..0fbb886e0334 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 dfe4c9fddee7..743b2623b8d0 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 7c22d808f7b5..5ff9e62fbf0a 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 af3bdd578240..0c377abe0587 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
 ---
 
 ![](apache-skywalking.jpeg)
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 dc76cad84957..17d6fe802eed 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 30edb2849a63..3df04b751cc1 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
 ---
 
 ![Alt Text](SM_IDE-APM.gif)
diff --git a/content/blog/2021-05-09-OpenSearch-supported/index.md b/content/blog/2021-05-09-OpenSearch-supported/index.md
index e14657541ef3..1879ca8d3c88 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 78175de31ad3..3d9f3d2fc5ae 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
 ---
 
 ![](500-mark.png)
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 ab3169942234..f70ef475ec6b 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 ff70c145547e..ab1aa3a8159f 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 d346b5617e85..d8960f7c0f42 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 94bb22a563bc..dc11cdd10acb 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 913fd32a8da3..5c0a42d36e44 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 cb58f190a8ca..ee73ea8ef30a 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 2a5138a63828..070e2873d989 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 6aff85c2944d..636b4e16761f 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
 ---
 
 ![Chaos Mesh + SkyWalking: Better Observability for Chaos Engineering](chaos-mesh-skywalking-banner.png)
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 5a5641b397a9..36bf68718172 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 80ab6896c481..a58205e5b127 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 ad9356bb5699..6eeea2dacff8 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 504737906ec4..fbd311585de0 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 28fea6f3074b..7a594887022f 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 617381f04dd8..de44e1215235 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 f4f1629c4bd9..4fd03928a931 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 964aa8367bc6..a7d931ac9895 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 e0715c868056..2c08f2f5a3fc 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 7184427acea2..14f837ffb57c 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
 ---
 
 ![icon.png](./icon.png)
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 ceb79667e69c..db774f428181 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 9b80f75eea1a..2a0d5e971ae2 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 fc05445e9f0a..43532295d368 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 390a5c350c1b..418cb5792e75 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 9080dfcb4c02..5f0f0e1b1be0 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 a8cc08474fa2..81f6aef6102f 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 e0bacea2c03c..17b3e3ee30e4 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 a90c1437e331..056035ccffa5 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 a4789cee6c18..170975528a3b 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 7585c41dde77..5b98fe528a3f 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 b934b9a1a1e3..103cb52948e7 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 45f9d1bc261f..87ac6a8a9063 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 4453b886b532..00319c6bc469 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 656f272a89c7..bbdaff7f9196 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 60ede49b6c24..c27c2bccfe6d 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
 ---
 
 ![icon](activemq_logo.png)
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 b03ca20f84dc..2451d9018bac 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 078aaf1adf91..7795e2df48ee 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 325f864771b7..953c2dfb5f14 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 d911812016bf..e5f8842576ee 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 a3aacc613fe6..4c760c110997 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 f7bba11ddc0c..1ea55e61526b 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 cfd11b682885..5c5c9422239c 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 cbf8f1e5bada..f48bcbb5c09a 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 7de63a6bd351..1654afd6e855 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 d0f343461aa5..04fe0df89bee 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 eadaaa3f163b..5ae151363126 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 510aea99b78e..2fadb0d833c0 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 884054606b2b..c5f04f73c65b 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 4618b63c2da6..71eb83b8026d 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 the matching OAP-side component IDs, MAL rules, and UI templates are merged on `main` and will ship with 10.5.0.
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 07cd1571a8f2..3aedd0c68bd1 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
 ---
 
 ![Banner](banner.jpg)
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 755b8cdca640..c2555cf4bafe 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 2938e3facaae..e4bcb9908866 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 5dfe326384d4..254ad2d63531 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
 ---
 
 ![banner](banner.jpg)
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 b03bb03dea94..65de8618a36e 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
 ---
 
 ![](aircraft.jpg)
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 b06b7e680b36..6fd8a4db172f 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 31cbaf2583cd..bdce053297ec 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
 ---
 
 ![](stone-arch.jpg)
diff --git a/content/blog/skywalking8-4-release/index.md b/content/blog/skywalking8-4-release/index.md
index a60c8e87fdd6..4a14ccb9252d 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
 ---
 
 ![](heading.png)
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 ac1c02478448..07fcb55775c2 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 000000000000..61efc1e1c8f7
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 000000000000..b9f838fc88bc
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 000000000000..df52e2ca9a56
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 000000000000..87ca5e252ff7
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 000000000000..22657105605d
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 000000000000..f5535cd13dc9
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 6462b7e104be..ff2e80b1af35 100644
--- a/content/team/_index.md
+++ b/content/team/_index.md
@@ -4,117 +4,6 @@ linkTitle: Team
 description: About SkyWalking Team.
 ---
 
-

-
-
SkyWalking Team

-

-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.
-

-
-
 
-
All contributions to SkyWalking are appreciated

-
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.

-CONNECT WITH US.
-
-

-
-

-
-## Members
-
-##### Project Management Committee
-
-
 
-

-
-| Name               | Apache ID    |                                                                                      |
-|--------------------|--------------|--------------------------------------------------------------------------------------|
-| Can Li             | lican        |  [Candy198088](https://twitter.com/Candy198088) |
-| DongXue Si         | ilucky       |                                                                                      |
-| Han Liu            | liuhan       |  [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       |  [wankai123](https://twitter.com/wankai123)     |
-| Kai Wang           | wangkai      |                                                                                      |
-| Lang Li            | lilang       |                                                                                      |
-| Michael Semb Wever | mck          |                                                                                      |
-
-

-

-
-| Name                    | Apache ID   |                                                                                          |
-|-------------------------|-------------|------------------------------------------------------------------------------------------|
-| Qiuxia Fan              | qiuxiafan   |                                                                                          |
-| Sheng Wu (Project V.P.) | wusheng     |  [wusheng1108](https://twitter.com/wusheng1108)     |
-| Shinn Zhang             | zhangxin    |  [ascrutae](https://twitter.com/ascrutae)           |
-| Wei Zhang               | zhangwei24  |                                                                                          |
-| Wenbing Wang            | wangwenbin  |                                                                                          |
-| Willem Ning Jiang       | ningjiang   |                                                                                          |
-| Yang Bai                | baiyang     |                                                                                          |
-| Yanlong He              | heyanlong   |  [YanlongHe](https://twitter.com/YanlongHe)         |
-| Yao Wang                | ywang       |                                                                                          |
-| Ye Cao                  | dashanji    |                                                                                          |
-| Yihao Chen              | yihaochen   |  [Superskyyy](https://twitter.com/Superskyyyyy)     |
-| Yixiong Cao             | caoyixiong  |                                                                                          |
-| Yongsheng Peng          | pengys      |                                                                                          |
-| Youliang Huang          | butterbright |  [butterbright](https://twitter.com/butterbright) |
-| Yuguang Zhao            | zhaoyuguang |                                                                                          |
-| Zhang Kewei             | zhangkewei  |                                                                                          |
-| Zhenxu Ke               | kezhenxu94  |  [kezhenxu94](https://twitter.com/kezhenxu94)       |
-| Zixin Zhou              | zhouzixin   |  [starry_loveee](https://twitter.com/starry_loveee) |
-
-

-

-
-##### Committer
-
-

-

-
-| Name              | Apache ID  |                                                                                        |
-|-------------------|------------|----------------------------------------------------------------------------------------|
-| Brandon Fergerson | bfergerson |                                                                                        |
-| Ziyan Chen        | clairechen |                                                                                        |
-| Gong Dewei        | kylixs     |                                                                                        |
-| Gui Cao           | zifeihan   |  [zifeihan007](https://twitter.com/zifeihan007)   |
-| Hailin Wang       | wanghailin |                                                                                        |
-| Huaxi Jiang       | hoshea     |  [Zerone___01](https://twitter.com/Zerone___01)   |
-| Jiapeng Liu       | liujiapeng |                                                                                        |
-| JunXu Chen        | chenjunxu  |                                                                                        |
-| Ke Zhang          | zhangke    |  [Humbertttttt](https://twitter.com/Humbertttttt) |
-| Ming Wen          | wenming    |                                                                                        |
-| Puguang Yang      | ypg        |                                                                                        |
-| Qiang Li          | liqiang    |                                                                                        |
-| Qiang Xu          | xuqiang    |                                                                                        |
-
-

-

-
-| 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        |                                                  |
-
-

-

+{{< team-members >}}
 
 {{< contributors >}}
diff --git a/data/committee.yml b/data/committee.yml
new file mode 100644
index 000000000000..45ddaebdad5c
--- /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 000000000000..a256b7d51e68
--- /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 a7a691e433f2..3931a886154c 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 000000000000..a0b980f2536b
--- /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 000000000000..a4a31f703e98
--- /dev/null
+++ b/layouts/blog/baseof.html
@@ -0,0 +1,38 @@
+
+
+  
+    {{ partial "head.html" . }}
+    {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}
+  
+  
+    

+      {{ partial "navbar.html" . }}
+    

+    

+      {{ if eq .Kind "page" }}
+      {{- /* single post: keep the readable two-column layout with TOC */ -}}
+      

+        

+          

+            {{ block "main" . }}{{ end }}
+          

+          

+            {{ partial "tags.html" . }}
+            {{ partial "toc.html" . }}
+          

+        

+      

+      {{ else }}
+      {{- /* list: full-width card grid */ -}}
+      

+        {{ block "main" . }}{{ end }}
+      

+      {{ end }}
+      {{ partial "footer.html" . }}
+    

+    {{ partial "event-popup.html" . }}
+    {{ partial "lightbox.html" . }}
+    {{ partial "sidebar-skywalking.html" . }}
+    {{ partial "scripts.html" . }}
+  
+
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
new file mode 100644
index 000000000000..e76ce385675b
--- /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")) }}
+
+

+  

+    BLOG
+    
Engineering & community notes

+    
Release deep-dives, architecture, integrations and field reports from the SkyWalking community — newest first.

+  

+

+
+

+  {{ range $pag.PageGroups }}
+  
{{ T "post_posts_in" }} {{ .Key }}

+  

+    {{ range .Pages }}
+    

+      {{ with .Params.tags }}
+      

+        {{ range . }}{{ . }}{{ end }}
+      

+      {{ end }}
+      
{{ .LinkTitle }}

+      
{{ with .Description }}{{ . }}{{ else }}{{ .Plain | safeHTML | truncate 160 }}{{ end }}

+      

+        {{ .Date.Format "Jan 2, 2006" }}
+        {{ with .Params.author }}{{ . | markdownify }}{{ end }}
+      

+    

+    {{ end }}
+  

+  {{ end }}
+
+  

+    {{ template "_internal/pagination.html" . }}
+  

+

+{{ end }}
diff --git a/layouts/contributors/baseof.html b/layouts/contributors/baseof.html
new file mode 100644
index 000000000000..544931f6a340
--- /dev/null
+++ b/layouts/contributors/baseof.html
@@ -0,0 +1,23 @@
+
+
+  
+    {{ partial "head.html" . }}
+    {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}
+  
+  
+    

+      {{ partial "navbar.html" . }}
+    

+    

+      

+        {{ block "main" . }}{{ end }}
+      

+      {{ partial "footer.html" . }}
+    

+    {{ partial "event-popup.html" . }}
+    {{ partial "lightbox.html" . }}
+    {{ partial "sidebar-skywalking.html" . }}
+    {{ partial "scripts.html" . }}
+    {{ partial "script-search.html" . }}
+  
+
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
new file mode 100644
index 000000000000..2c8b14761698
--- /dev/null
+++ b/layouts/docs/baseof.html
@@ -0,0 +1,151 @@
+{{- /* /docs landing — light card grid, driven by data/docs.yml + data/stars.yml */ -}}
+
+
+  
+    {{ partial "head.html" . }}
+    {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}
+  
+  
+    
{{ partial "navbar.html" . }}

+
+    

+      

+        

+          DOCS · {{ len .Site.Data.docs }} SECTIONS
+          
Projects & documentation

+          
SkyWalking is the Server, UI, native storage and many agents. Start with the
+             Server to understand installation and deployment, then pick the
+             agents and integrations you need — or deploy the
+             showcase for a quick preview.

+          

+            {{ range .Site.Data.docs }}
+            {{ $cat := or .buttonText (replace .type " " "") }}
+            {{ .type }}
+            {{ end }}
+          

+        

+      

+
+      {{- /* Get started — two quickstarts: run the Showcase, or run SkyWalking */ -}}
+      {{ with .Site.Data.quickstart }}
+      

+        

+          
Get started in minutes

+          

+            {{ range $key := slice "showcase" "skywalking" }}
+            {{ $q := index $.Site.Data.quickstart $key }}
+            

+              

+                {{ $q.badge }}
+                
{{ $q.title }}

+                
{{ $q.blurb }}

+              

+              

+                

+                  {{ range $i, $t := $q.tabs }}
+                  
+                  {{ end }}
+                

+                {{ range $i, $t := $q.tabs }}
+                

+                  

+                    {{ $t.lang }}
+                    
+                  

+                  

+                    {{ range $li, $line := (split (chomp $t.code) "\n") }}
+                    
{{ add $li 1 }}{{ $line }}

+                    {{ end }}
+                  

+                

+                {{ end }}
+              

+              {{ $q.docsLabel }} →
+            

+            {{ end }}
+          

+        

+      

+      {{ end }}
+
+      

+        {{ range .Site.Data.docs }}
+        {{ $cat := or .buttonText (replace .type " " "") }}
+        
{{ .type }}

+        

+          {{ range .list }}
+          {{ if .descriptionItem }}
+          
{{ .descriptionItem }}

+          {{ 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) }}
+          

+            

+              {{ if .icon }}{{ end }}
+              
{{ .name }}

+              {{ with $stars }}
+              
+                
+                {{ .stars }}
+              
+              {{ end }}
+            

+            
{{ .description | markdownify }}

+            

+              {{ 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 }}
+              Read docs →
+              {{ if $others }}
+              

+                versions
+                
+              

+              {{ end }}
+              {{ end }}
+              {{ if and $user $repo }}
+              
+                
+              
+              {{ end }}
+            

+          

+          {{ end }}
+          {{ end }}
+        

+        {{ end }}
+      

+
+      {{ partial "footer.html" . }}
+    

+
+    {{ partial "event-popup.html" . }}
+    {{ partial "sidebar-skywalking.html" . }}
+    {{ partial "scripts.html" . }}
+    
+  
+
diff --git a/layouts/downloads/baseof.html b/layouts/downloads/baseof.html
new file mode 100644
index 000000000000..55e99f57c414
--- /dev/null
+++ b/layouts/downloads/baseof.html
@@ -0,0 +1,31 @@
+
+
+
+  {{ partial "head.html" . }}
+  {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}
+
+
+

+  {{ partial "navbar.html" . }}
+

+

+  

+    {{ block "main" . }}{{ end }}
+  

+  {{ partial "footer.html" . }}
+

+{{ partial "event-popup.html" . }}
+{{ partial "sidebar-skywalking.html" . }}
+{{ partial "active-scripts.html" . }}
+{{ partial "scripts.html" . }}
+
+
+
diff --git a/layouts/downloads/list.html b/layouts/downloads/list.html
new file mode 100644
index 000000000000..4cd8933984f9
--- /dev/null
+++ b/layouts/downloads/list.html
@@ -0,0 +1,43 @@
+{{ define "main" }}
+

+  

+    

+      

+        RELEASES & DOWNLOADS
+        
Every release, signed and dated

+        
Only Apache source releases are official artifacts. Convenience binaries,
+           container images and Helm charts are provided too — always verify downloads against the
+           .asc and .sha512 signatures.

+        

+          {{ range .Site.Data.releases }}
+          {{ $cat := or .buttonText (replace .type " " "") }}
+          {{ .type }}
+          {{ end }}
+          Docker images
+        

+      

+      
+    

+  

+

+
+

+  {{ .Content }}
+

+{{ end }}
diff --git a/layouts/events/baseof.html b/layouts/events/baseof.html
new file mode 100644
index 000000000000..5af1546e6434
--- /dev/null
+++ b/layouts/events/baseof.html
@@ -0,0 +1,22 @@
+
+
+  
+    {{ partial "head.html" . }}
+    {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}
+  
+  
+    

+      {{ partial "navbar.html" . }}
+    

+    

+      

+        {{ block "main" . }}{{ end }}
+      

+      {{ partial "footer.html" . }}
+    

+    {{ partial "event-popup.html" . }}
+    {{ partial "lightbox.html" . }}
+    {{ partial "sidebar-skywalking.html" . }}
+    {{ partial "scripts.html" . }}
+  
+
diff --git a/layouts/events/list.html b/layouts/events/list.html
new file mode 100644
index 000000000000..589ee79663c3
--- /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")) }}
+
+

+  

+    EVENTS & RELEASES
+    
Where the SkyWalking community ships & meets

+    
Releases, conference talks, meetups and weekly office hours — newest first.

+  

+

+
+

+  {{ range $pag.PageGroups }}
+  

+    
{{ .Key }}

+    
+  

+  {{ end }}
+
+  

+    {{ template "_internal/pagination.html" . }}
+  

+

+{{ end }}
diff --git a/layouts/events/single.html b/layouts/events/single.html
new file mode 100644
index 000000000000..b7e4eabe2805
--- /dev/null
+++ b/layouts/events/single.html
@@ -0,0 +1,54 @@
+{{ define "main" }}
+{{ $cur := . }}
+{{ $events := (where .Site.RegularPages "Section" "events").ByDate.Reverse }}
+

+  
+
+  

+    {{ $isRelease := hasPrefix (lower .LinkTitle) "release" }}
+    

+      {{ if $isRelease }}Release{{ else }}Post{{ end }}
+      
+      {{ with .Params.author }}{{ T "post_byline_by" }} {{ . | markdownify }}{{ end }}
+    

+    
{{ .Title }}

+    {{ with .Params.description }}
{{ . | markdownify }}
{{ end }}
+
+    

+      {{ .Content }}
+    

+
+    {{ partial "pager.html" . }}
+  

+

+
+
+{{ end }}
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
new file mode 100644
index 000000000000..46d86b7b1bf8
--- /dev/null
+++ b/layouts/partials/hooks/head-end.html
@@ -0,0 +1,4 @@
+{{- /* Display font for prominent hero numbers */ -}}
+
+
+
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
new file mode 100644
index 000000000000..89b0855c1fcb
--- /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 }}
+
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 000000000000..9254ca40e061
--- /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 }}
+
On this page

+{{ . }}
+{{ end }}
+{{ end }}
+{{ end }}
+
+
diff --git a/layouts/projectdoc/baseof.html b/layouts/projectdoc/baseof.html
index 0844fc5e8ebf..438ba22da1e4 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" . }}
+