This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch blog/blog-index-3col
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/blog/blog-index-3col by this
push:
new 3ff67d50b46 feat(blog): keep topic descriptions in the dropdown,
two-column layout
3ff67d50b46 is described below
commit 3ff67d50b466d9055c0e48337b03291ab1167348
Author: Wu Sheng <[email protected]>
AuthorDate: Mon Jun 22 11:48:33 2026 +0800
feat(blog): keep topic descriptions in the dropdown, two-column layout
Restore each topic's one-line description ('the words') in the
Browse-topics dropdown and lay the topics out in two columns: a full-width 'All
posts' row, then a 2-col grid of cards (pill + count + description), bound to
intro / intro_zh.
Hardening from an adversarial review pass:
- a11y: add a keyboard :focus-visible ring on the dropdown links/button
(the Docsy reboot's 'a { outline: none }' otherwise leaves no focus state);
darken the count pill to meet AA contrast.
- keep the words: 3-line description clamp so the longest intro_zh isn't
ellipsised.
- robustness: no-shrink guard on the card head for a future 12th topic;
collapse to one full-width column at <=760px so the tablet band isn't a
near-full-bleed 2-col panel.
- cleanup: drop the dead $allTags/$blogTags template vars and the unused
data-label on the card anchor; refresh stale 'sidebar' comments to 'dropdown'.
---
assets/scss/_custom_home.scss | 61 +++++++++++++++++++++++++++++++------------
data/blog_topics.yml | 6 ++---
layouts/blog/list.html | 35 ++++++++++++-------------
layouts/zh/list.html | 33 +++++++++++------------
4 files changed, 82 insertions(+), 53 deletions(-)
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index 51dc6e138ab..0264de85438 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -791,8 +791,8 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
.blog-year {
font-size: 12px; font-weight: 700; color: $muted; border: 0; padding: 0;
margin: 28px 0 12px; letter-spacing: .1em; text-transform: uppercase;
- // The very first year heading in the main column must align with the
- // sidebar's "Browse topics" heading on the same grid row.
+ // Tighten the first year heading's top margin — it now sits just below the
+ // Browse-topics topbar (no sidebar to align a shared grid row to).
&:first-child { margin-top: 4px; }
}
@@ -860,7 +860,6 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
// ── Full-width post grid + a "Browse topics" dropdown filter ──────────
// The post grid stays 3-up (its base rule above) because the topic list
// now lives in a dropdown instead of a 300px sidebar, freeing the width.
- .blog-content { min-width: 0; } // prevent grid blowout from wide cards
.blog-topbar { display: flex; justify-content: flex-end; margin: 0 0 18px; }
.topic-filter { position: relative; }
.topic-filter-btn {
@@ -881,25 +880,49 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
.topic-filter[open] .topic-filter-caret { transform: rotate(180deg); }
.topic-filter-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
- width: 280px; max-height: 64vh; overflow-y: auto;
+ width: 580px; max-width: calc(100vw - 32px); max-height: 72vh; overflow-y:
auto;
background: #fff; border: 1px solid $line; border-radius: 12px;
box-shadow: 0 24px 48px -24px rgba(17, 24, 39, .30);
- padding: 6px;
+ padding: 8px;
}
- .topic-filter-item {
- display: flex; align-items: center; justify-content: space-between;
- gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none;
+ // Full-width "All posts" reset row above the two-column topic grid.
+ .topic-filter-all {
+ display: flex; align-items: center; justify-content: space-between; gap:
10px;
+ padding: 9px 10px; border-radius: 8px; text-decoration: none;
+ font-size: 13.5px; font-weight: 700; color: $ink;
+ border-bottom: 1px solid $line; margin-bottom: 6px;
+ &:hover { background: #f3f6fa; }
+ }
+ .topic-filter-grid {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
+ }
+ // Each topic keeps its pill, count and one-line description ("the words").
+ .topic-filter-card {
+ display: flex; flex-direction: column; gap: 6px;
+ padding: 10px; border-radius: 9px; text-decoration: none;
transition: background .12s ease;
- .blog-label { text-decoration: none; }
&:hover { background: #f3f6fa; }
- &.is-all {
- font-weight: 700; color: $ink;
- border-bottom: 1px solid $line; border-radius: 8px 8px 0 0;
margin-bottom: 4px;
- }
+ }
+ .topic-filter-card-top {
+ display: flex; align-items: center; justify-content: space-between; gap:
8px;
+ .blog-label { text-decoration: none; min-width: 0; }
+ .album-count { flex: 0 0 auto; }
+ }
+ .topic-filter-card-intro {
+ font-size: 12px; color: $body; line-height: 1.5;
+ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
+ }
+ // Keyboard focus ring. The Docsy reboot sets `a { outline: none }`, which
+ // would otherwise leave these link cards / buttons with no visible focus.
+ .topic-filter-btn:focus-visible,
+ .topic-filter-all:focus-visible,
+ .topic-filter-card:focus-visible {
+ outline: 2px solid rgba(55, 136, 208, .7);
+ outline-offset: 2px;
}
// The per-topic count pill, reused in the dropdown rows.
.album-count {
- font-size: 11px; font-weight: 800; color: $muted; letter-spacing: .04em;
+ font-size: 11px; font-weight: 800; color: #5b6573; letter-spacing: .04em;
padding: 1px 7px; border-radius: 999px;
background: #f3f6fa; border: 1px solid $line;
}
@@ -980,14 +1003,20 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
@media (max-width: 992px) {
.td-blog .blog-grid { grid-template-columns: 1fr 1fr; }
}
+// Collapse the two-column topic dropdown to one full-width column early, so
the
+// ~600–760px band gets a clean single column instead of a 580px panel almost
as
+// wide as the viewport.
+@media (max-width: 760px) {
+ .td-blog .topic-filter-menu { width: 100%; }
+ .td-blog .topic-filter-grid { grid-template-columns: 1fr; }
+}
@media (max-width: 600px) {
.td-blog .blog-grid { grid-template-columns: 1fr; }
.td-blog .blog-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px;
} }
- // Let the topic dropdown go full-width so its menu never overflows.
+ // Make the dropdown trigger button full-width too on phones.
.td-blog .blog-topbar { justify-content: stretch; }
.td-blog .topic-filter { width: 100%; }
.td-blog .topic-filter-btn { width: 100%; justify-content: space-between; }
- .td-blog .topic-filter-menu { width: 100%; }
}
// =====================================================================
diff --git a/data/blog_topics.yml b/data/blog_topics.yml
index 257729e4669..ed489be59ae 100644
--- a/data/blog_topics.yml
+++ b/data/blog_topics.yml
@@ -1,7 +1,7 @@
# Single source of truth for blog topics (a.k.a. "tags").
#
# Used by:
-# - layouts/blog/list.html + layouts/zh/list.html — sidebar topic cards
+# - layouts/blog/list.html + layouts/zh/list.html — Browse-topics
dropdown cards
# - layouts/partials/blog-topic-styles.html — generates the
#
.blog-label[data-label="X"]
# color rules at
build time
@@ -11,8 +11,8 @@
#
# Field reference:
# name Canonical tag string. Match exactly in post frontmatter `tags:`.
-# intro One-line EN description, shown on /blog/ sidebar topic card.
-# intro_zh CN counterpart, shown on /zh/ sidebar topic card.
+# intro One-line EN description, shown on the /blog/ Browse-topics
dropdown card.
+# intro_zh CN counterpart, shown on the /zh/ Browse-topics dropdown card.
# color bg/fg/border for the colored pill. Bg should be a light tint,
# fg the accessible darker text/icon color, border the same hue
# slightly deeper than bg.
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index a29d2edcfc7..7e47f6c1e98 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -7,12 +7,6 @@
{{ $pages := ($.Scratch.Get "blog-pages") }}
{{ $groups := $pages.GroupByDate (i18n "year") }}
-{{- /* Tag list derived only from blog posts (Site.Taxonomies.tags would
- also include docs frontmatter, which is unrelated). */ -}}
-{{ $allTags := slice }}
-{{ range $pages }}{{ range .Params.tags }}{{ $allTags = $allTags | append .
}}{{ end }}{{ end }}
-{{ $blogTags := sort (uniq $allTags) }}
-
{{- /* Topics (name + intro + color) are defined in data/blog_topics.yml. */
-}}
{{ $topics := .Site.Data.blog_topics.topics }}
@@ -35,20 +29,25 @@
<svg class="topic-filter-caret" width="13" height="13" viewBox="0 0 24
24" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor"
stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</summary>
<div class="topic-filter-menu">
- <a class="topic-filter-item is-all" href="{{ "/blog/" | relLangURL }}">
- <span class="topic-filter-all">All posts</span>
+ <a class="topic-filter-all" href="{{ "/blog/" | relLangURL }}">
+ <span>All posts</span>
<span class="album-count">{{ len $pages }}</span>
</a>
- {{ range $topics }}
- {{ $t := .name }}
- {{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }}
- {{ if gt (len $tagged) 0 }}
- <a class="topic-filter-item" data-label="{{ $t }}" href="{{ printf
"/tags/%s/" ($t | urlize) | relLangURL }}">
- <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span>
- <span class="album-count">{{ len $tagged }}</span>
- </a>
- {{ end }}
- {{ end }}
+ <div class="topic-filter-grid">
+ {{ range $topics }}
+ {{ $t := .name }}
+ {{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }}
+ {{ if gt (len $tagged) 0 }}
+ <a class="topic-filter-card" href="{{ printf "/tags/%s/" ($t |
urlize) | relLangURL }}">
+ <span class="topic-filter-card-top">
+ <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span>
+ <span class="album-count">{{ len $tagged }}</span>
+ </span>
+ <span class="topic-filter-card-intro">{{ .intro }}</span>
+ </a>
+ {{ end }}
+ {{ end }}
+ </div>
</div>
</details>
</div>
diff --git a/layouts/zh/list.html b/layouts/zh/list.html
index 9befe83efb3..a7012749dcb 100644
--- a/layouts/zh/list.html
+++ b/layouts/zh/list.html
@@ -7,10 +7,6 @@
{{ $pages := ($.Scratch.Get "blog-pages") }}
{{ $groups := $pages.GroupByDate (i18n "year") }}
-{{ $allTags := slice }}
-{{ range $pages }}{{ range .Params.tags }}{{ $allTags = $allTags | append .
}}{{ end }}{{ end }}
-{{ $blogTags := sort (uniq $allTags) }}
-
{{ $topics := .Site.Data.blog_topics.topics }}
<section class="blog-hero">
@@ -29,20 +25,25 @@
<svg class="topic-filter-caret" width="13" height="13" viewBox="0 0 24
24" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor"
stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</summary>
<div class="topic-filter-menu">
- <a class="topic-filter-item is-all" href="{{ "/zh/" | relLangURL }}">
- <span class="topic-filter-all">全部文章</span>
+ <a class="topic-filter-all" href="{{ "/zh/" | relLangURL }}">
+ <span>全部文章</span>
<span class="album-count">{{ len $pages }}</span>
</a>
- {{ range $topics }}
- {{ $t := .name }}
- {{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }}
- {{ if gt (len $tagged) 0 }}
- <a class="topic-filter-item" data-label="{{ $t }}" href="{{ printf
"/tags/%s/" ($t | urlize) | relLangURL }}">
- <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span>
- <span class="album-count">{{ len $tagged }}</span>
- </a>
- {{ end }}
- {{ end }}
+ <div class="topic-filter-grid">
+ {{ range $topics }}
+ {{ $t := .name }}
+ {{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }}
+ {{ if gt (len $tagged) 0 }}
+ <a class="topic-filter-card" href="{{ printf "/tags/%s/" ($t |
urlize) | relLangURL }}">
+ <span class="topic-filter-card-top">
+ <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span>
+ <span class="album-count">{{ len $tagged }}</span>
+ </span>
+ <span class="topic-filter-card-intro">{{ .intro_zh }}</span>
+ </a>
+ {{ end }}
+ {{ end }}
+ </div>
</div>
</details>
</div>
