Skip to content

Commit e809237

Browse files
wu-shengwu-sheng
authored
Events: add a Community Calendar tab for conference talks (#890)
The /events/ page only tracked releases. This adds a second tab at /events/calendar/ listing conferences, meetups and summits where SkyWalking committers and community speakers appear. The release timeline is unchanged apart from the shared tab bar; the calendar reads data/talks.yml and never touches content/events/. - data/talks.yml 18 events, 59 talks, 2020-2026, with a documented schema at the top of the file - events/calendar.html upcoming/past split computed at build time from the event end date, so an event moves itself once it is over; year pager over the past section, deep-linkable as #YYYY - partials/events-tabs.html tab bar shared by both views - validation required fields and date format are asserted at build time, so a malformed entry fails the PR check instead of rendering a blank card - README how to add or update a talk Speaker names follow the source. Chinese names carry their pinyin; English-only names stay English, since romanisation does not reverse.
1 parent bfbb98d commit e809237

7 files changed

Lines changed: 1051 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,80 @@ If you want to display the summary in the popover in the lower right corner, you
6262
|img|The illustration|false|/images/skywalking_200x200.png|
6363
|poster|The poster|false|-|
6464

65+
### Community Calendar
66+
67+
Located at `data/talks.yml`, rendered at `/events/calendar/`. This is where conference
68+
talks, meetups and summits go — the release timeline at `/events/` is driven by
69+
`content/events` instead, and the two do not mix.
70+
71+
To add or update a talk, edit `data/talks.yml` and open a pull request. You can do it
72+
entirely in the browser: use the **Add your talk** link on the calendar page, or the
73+
GitHub *Edit* button on the file. No local Hugo setup needed.
74+
75+
```yaml
76+
events:
77+
- event: Community Over Code Asia 2026
78+
intro: >-
79+
One or two sentences on what this conference is, for readers who
80+
have never heard of it.
81+
start: "2026-08-07"
82+
end: "2026-08-09" # omit for a single-day event
83+
location: Beijing, China # or "Online"
84+
venue: Mountain Yang Hall # optional
85+
url: https://asia.communityovercode.org
86+
recap: /zh/2023-08-20-coc-asia-2023/ # optional, a recap post on this site
87+
talks:
88+
- title: "Observing LLM Applications with SkyWalking 10.4"
89+
speaker: 邵一鸣 YiMing Shao
90+
date: "2026-08-09" # only when it differs from the event start
91+
time: 13:30 GMT+8
92+
room: Mountain Yang Hall
93+
url: https://asia.communityovercode.org/sessions/observability-1206017.html
94+
video: https://www.bilibili.com/video/BVxxxxxxxxx
95+
intro: >-
96+
One or two sentences on what the session covers, in the same
97+
language as the title.
98+
```
99+
100+
Event fields:
101+
102+
|Parameter|Description|Required|Default|
103+
|----|----|----|----|
104+
|event|Conference / meetup name|true|-|
105+
|start|Start date, `"YYYY-MM-DD"`, zero-padded|true|-|
106+
|end|End date, for multi-day events|false|`start`|
107+
|location|`City, Country`, or `Online`|true|-|
108+
|venue|Venue name|false|-|
109+
|intro|What this conference is, in one or two sentences|true|-|
110+
|url|Event home page. Omit rather than guess|false|-|
111+
|recap|Link to a recap post on this site|false|-|
112+
|talks|One or more sessions|true|-|
113+
114+
Session fields, under `talks`:
115+
116+
|Parameter|Description|Required|Default|
117+
|----|----|----|----|
118+
|title|Session title|true|-|
119+
|speaker|Speaker name. Use `中文名 English Name` when both are known|true|-|
120+
|intro|What the session covers. Condense the published abstract; don't invent one|false|-|
121+
|date|Session day, when it differs from the event `start`|false|`start`|
122+
|time|e.g. `13:30 GMT+8`|false|-|
123+
|room|Room name|false|-|
124+
|url|Session page|false|-|
125+
|video|Recording|false|-|
126+
|slides|Slide deck|false|-|
127+
128+
Two things happen on their own, so you don't need to maintain them:
129+
130+
- **Upcoming vs. past** is decided at build time from the event's `end` date, and the
131+
site rebuilds daily, so an event moves itself into the past section once it is over.
132+
- **The year pager** under *Past* builds its year buttons and counts from the data, so
133+
a new year appears as soon as an event needs it.
134+
135+
If a required field is missing, or a date isn't in `YYYY-MM-DD` form, the build fails
136+
with a message naming the offending event — so a broken entry shows up as a failed
137+
check on the pull request rather than as a blank card on the site.
138+
65139
### Blog
66140

67141
Located at `content/blog`. If you want to create a new blog, you need to create a new subdirectory under this directory. Here is a sample blog below.

‎assets/scss/_custom_home.scss‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -669,6 +669,20 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
669669
p { font-size: 16px; color: $body; line-height: 1.6; margin: 0; max-width: 640px; a { color: $brand; } }
670670
}
671671

672+
// tab bar shared by /events/ and /events/calendar/
673+
.ev-tabs {
674+
display: inline-flex; gap: 4px; margin-top: 22px;
675+
padding: 4px; border: 1px solid $line; border-radius: 999px; background: #fff;
676+
}
677+
.ev-tab {
678+
display: inline-flex; align-items: center;
679+
padding: 7px 18px; border-radius: 999px;
680+
font-size: 14px; font-weight: 600; color: $body; text-decoration: none;
681+
transition: background .16s ease, color .16s ease;
682+
&:hover { background: #eef5fd; color: #2c6cb0; }
683+
&.is-active { background: $brand; color: #fff; }
684+
}
685+
672686
.ev-wrap { max-width: 920px; padding-top: 36px; padding-bottom: 64px; }
673687

674688
.ev-group { margin-bottom: 8px; }
@@ -762,6 +776,204 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
762776
}
763777
}
764778

779+
// ---------- Events → Community calendar tab ----------
780+
.td-events {
781+
.cal-wrap { max-width: 920px; padding-top: 30px; padding-bottom: 64px; }
782+
783+
.cal-stats {
784+
display: flex; gap: 26px; flex-wrap: wrap;
785+
padding-bottom: 22px; border-bottom: 1px solid $line;
786+
font-size: 13px; color: $muted;
787+
strong { font-size: 18px; font-weight: 800; color: $ink; margin-right: 5px; }
788+
}
789+
790+
.cal-block { margin-top: 34px; }
791+
.cal-head {
792+
display: flex; align-items: center; gap: 10px;
793+
font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
794+
color: $muted; margin: 0 0 18px; border: 0; padding: 0;
795+
}
796+
.cal-pulse {
797+
width: 8px; height: 8px; border-radius: 50%; background: #22a06b;
798+
box-shadow: 0 0 0 0 rgba(34,160,107,.55);
799+
animation: cal-pulse 2.2s infinite;
800+
}
801+
.cal-empty {
802+
font-size: 14px; color: $body; background: #f7faff;
803+
border: 1px dashed #d6e4f5; border-radius: 12px; padding: 18px 20px; margin: 0;
804+
}
805+
806+
// "Past" heading + year pager on one row
807+
.cal-past-head {
808+
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
809+
margin-bottom: 4px;
810+
.cal-head { margin-bottom: 0; }
811+
}
812+
.cal-years {
813+
display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto;
814+
}
815+
.cal-yr-btn {
816+
display: inline-flex; align-items: center; gap: 6px;
817+
font-family: ui-monospace, "SF Mono", Menlo, monospace;
818+
font-size: 12.5px; font-weight: 700; color: $body;
819+
background: #fff; border: 1px solid $line; border-radius: 999px;
820+
padding: 5px 13px; cursor: pointer;
821+
transition: background .16s ease, color .16s ease, border-color .16s ease;
822+
&:hover { background: #eef5fd; border-color: #d6e4f5; color: #2c6cb0; }
823+
&.is-active { background: $brand; border-color: $brand; color: #fff; }
824+
}
825+
.cal-yr-n {
826+
font-size: 10.5px; font-weight: 700; line-height: 1;
827+
padding: 2px 5px; border-radius: 999px;
828+
background: #eef1f5; color: #5b6573;
829+
}
830+
.cal-yr-btn.is-active .cal-yr-n { background: rgba(255,255,255,.26); color: #fff; }
831+
.cal-yeargroup[hidden] { display: none; }
832+
833+
.cal-year {
834+
margin: 26px 0 14px;
835+
span {
836+
display: inline-block;
837+
font-family: ui-monospace, "SF Mono", Menlo, monospace;
838+
font-size: 13px; font-weight: 700;
839+
background: #eef5fd; border: 1px solid #d6e4f5; color: #2c6cb0;
840+
border-radius: 999px; padding: 4px 14px;
841+
}
842+
}
843+
844+
.cal-card {
845+
display: grid; grid-template-columns: 76px 1fr; gap: 20px;
846+
background: #fff; border: 1px solid $line; border-radius: 12px;
847+
padding: 18px 22px; margin-bottom: 14px;
848+
transition: box-shadow .18s ease, border-color .18s ease;
849+
&:hover { box-shadow: 0 16px 40px -22px rgba(17,24,39,.28); border-color: #d6e4f5; }
850+
&.is-upcoming { border-color: #cfe6db; background: linear-gradient(180deg, #f6fcf9 0%, #fff 46%); }
851+
}
852+
853+
// left-hand date chip
854+
.cal-when {
855+
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
856+
padding-top: 2px; text-align: center;
857+
.cal-mon {
858+
font-size: 11px; font-weight: 800; letter-spacing: .1em;
859+
text-transform: uppercase; color: #c01f68;
860+
}
861+
.cal-day {
862+
font-size: 26px; font-weight: 800; color: $ink; line-height: 1.15;
863+
letter-spacing: -.5px; white-space: nowrap;
864+
}
865+
.cal-yr {
866+
font-family: ui-monospace, "SF Mono", Menlo, monospace;
867+
font-size: 11px; color: $muted;
868+
}
869+
}
870+
.cal-card.is-upcoming .cal-when .cal-mon { color: #1b8158; }
871+
872+
.cal-meta {
873+
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
874+
font-size: 12px; color: $muted; margin-bottom: 6px;
875+
time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }
876+
.cal-loc::before { content: "· "; }
877+
}
878+
.cal-badge {
879+
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
880+
padding: 2px 9px; border-radius: 999px;
881+
background: #e6f6ef; color: #1b8158; margin-left: auto;
882+
}
883+
884+
.cal-title {
885+
font-size: 18px; font-weight: 700; margin: 0 0 6px;
886+
border: 0; padding: 0; line-height: 1.35; color: $ink;
887+
a {
888+
color: $brand; text-decoration: underline;
889+
text-decoration-color: rgba(55,136,208,.35); text-underline-offset: 4px;
890+
&:hover { color: #2c6cb0; text-decoration-color: currentColor; }
891+
}
892+
}
893+
894+
// the "↗" / "→" that marks a link as leaving the current page
895+
.cal-ext {
896+
display: inline-block; margin-left: 4px;
897+
font-size: .82em; font-weight: 600; text-decoration: none;
898+
vertical-align: baseline;
899+
}
900+
901+
.cal-intro {
902+
font-size: 13.5px; color: $body; line-height: 1.6; margin: 0 0 14px;
903+
max-width: 62ch;
904+
}
905+
906+
.cal-talks { list-style: none; margin: 0; padding: 0; }
907+
.cal-talk {
908+
position: relative; display: flex; gap: 10px;
909+
padding: 8px 0; border-top: 1px solid #f0f2f5;
910+
&:first-child { border-top: 0; padding-top: 0; }
911+
}
912+
.cal-talk-dot {
913+
flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px;
914+
border-radius: 50%; background: #c9d2dd;
915+
}
916+
.cal-card.is-upcoming .cal-talk-dot { background: #6cc09a; }
917+
.cal-talk-body { min-width: 0; }
918+
.cal-talk-title {
919+
font-size: 14.5px; font-weight: 600; color: $ink; line-height: 1.45; margin: 0 0 2px;
920+
a {
921+
color: $ink; text-decoration: underline;
922+
text-decoration-color: #cfe0f2; text-underline-offset: 3px;
923+
&:hover { color: #2c6cb0; text-decoration-color: currentColor; }
924+
}
925+
}
926+
.cal-talk-sub {
927+
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
928+
font-size: 12.5px; color: $muted; margin: 0;
929+
.cal-speaker { font-weight: 600; color: $body; }
930+
.cal-sep { color: #c9d2dd; }
931+
}
932+
.cal-talk-intro {
933+
font-size: 13px; color: $body; line-height: 1.6; margin: 5px 0 0;
934+
max-width: 68ch;
935+
}
936+
.cal-link {
937+
font-size: 12px; font-weight: 600; color: $brand; text-decoration: none;
938+
border: 1px solid #d6e4f5; border-radius: 999px; padding: 1px 9px; margin-left: 2px;
939+
&:hover { background: #eef5fd; }
940+
}
941+
.cal-actions {
942+
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
943+
}
944+
// the conference's own site — a button, so it reads as the way off this page
945+
.cal-site {
946+
display: inline-flex; align-items: center;
947+
font-family: ui-monospace, "SF Mono", Menlo, monospace;
948+
font-size: 12px; font-weight: 600; color: $brand; text-decoration: none;
949+
border: 1px solid #d6e4f5; border-radius: 999px; padding: 4px 12px;
950+
background: #fff;
951+
&:hover { background: #eef5fd; border-color: $brand; color: #2c6cb0; }
952+
}
953+
.cal-recap {
954+
display: inline-block;
955+
font-size: 13px; font-weight: 600; color: $brand; text-decoration: none;
956+
&:hover { text-decoration: underline; }
957+
}
958+
}
959+
960+
@keyframes cal-pulse {
961+
0% { box-shadow: 0 0 0 0 rgba(34,160,107,.55); }
962+
70% { box-shadow: 0 0 0 7px rgba(34,160,107,0); }
963+
100% { box-shadow: 0 0 0 0 rgba(34,160,107,0); }
964+
}
965+
966+
@media (max-width: 576px) {
967+
.td-events {
968+
.ev-tabs { display: flex; width: 100%; }
969+
.ev-tab { flex: 1; justify-content: center; padding: 7px 10px; font-size: 13px; }
970+
.cal-card { grid-template-columns: 58px 1fr; gap: 14px; padding: 16px; }
971+
.cal-when .cal-day { font-size: 21px; }
972+
.cal-badge { margin-left: 0; }
973+
.cal-stats { gap: 16px; }
974+
}
975+
}
976+
765977
// ---------- Events detail page (sidebar timeline + article) ----------
766978
.td-events {
767979
.ev-detail {

‎content/events/calendar/_index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: "Community Calendar"
3+
linkTitle: "Calendar"
4+
description: "Upcoming and past conference talks, meetups and summits featuring Apache SkyWalking committers and community speakers."
5+
layout: calendar
6+
---

0 commit comments

Comments
 (0)