feat(home): make this week's analysis the hero (#205)
Move the homepage explainer into About and focus the landing page on the latest weekly report. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Juan Manuel Servera committed
May 25, 2026 at 23:23 UTC
77b783c23d0b9feea6ef3aff1d1e6955b0fbcd51
5 files changed
+87
-175
.squad/decisions/inbox/amy-home-hero-restructure.md
new
+9
@@ -0,0 +1,9 @@
1
+# Home hero restructure
2
+
3
+**Date:** 2026-05-25
4
+**Author:** Amy (Frontend Engineer)
5
+**Status:** Proposed
6
+
7
+## Decision
8
+
9
+Home page is a publication front page — the latest weekly analysis IS the hero. Explainer lives at `/about/`.
assets/css/extended/squadscope.css
+43
-94
@@ -7,7 +7,6 @@
7
.home-latest,
8
.home-empty-state,
9
.home-report-card,
10
-.home-quick-links,
10
.metric-card,
11
.report-shortcuts {
12
border: 1px solid var(--color-border);
@@ -17,14 +16,16 @@
16
17
.home-hero,
18
.home-latest,
20
-.home-empty-state,
21
-.home-quick-links {
19
+.home-empty-state {
20
padding: var(--space-4);
21
}
22
25
-.home-hero {
23
+.home-hero--minimal {
24
display: grid;
27
- gap: var(--space-4);
25
+ gap: var(--space-1);
26
+ padding-block: var(--space-3);
27
+ border-color: transparent;
28
+ background: transparent;
29
}
30
31
.home-eyebrow,
@@ -40,66 +41,25 @@
41
}
42
43
.home-hero h1 {
43
- margin: var(--space-2) 0;
44
- font-size: clamp(var(--text-3xl), 10vw, var(--text-4xl));
44
+ margin: 0;
45
+ font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
46
line-height: var(--leading-tight);
47
}
48
48
-.home-description,
49
-.home-latest-hook {
50
- max-width: var(--prose-measure);
51
- color: var(--color-text);
52
- font-size: var(--text-lg);
53
- line-height: var(--leading-relaxed);
54
-}
55
-
56
-.home-copy {
57
- max-width: var(--prose-measure);
58
- color: var(--color-text-muted);
59
-}
60
-
61
-.home-cadence {
49
+.home-latest {
50
display: grid;
51
gap: var(--space-3);
64
- align-content: start;
65
- padding: var(--space-3);
66
- border: 1px solid var(--color-border);
67
- border-radius: var(--radius-md);
68
- background: var(--color-bg);
69
-}
70
-
71
-.home-cadence ul,
72
-.home-cadence dl {
73
- display: grid;
74
- gap: var(--space-2);
75
- margin: 0;
76
-}
77
-
78
-.home-cadence ul {
79
- padding-inline-start: var(--space-4);
80
-}
81
-
82
-.home-cadence dt,
83
-.home-report-title,
84
-.home-quick-links a,
85
-.home-tag-strip a {
86
- color: var(--color-text);
87
- font-weight: 700;
88
-}
89
-
90
-.home-cadence dd {
91
- margin: var(--space-1) 0 0;
92
- color: var(--color-text-muted);
52
}
53
95
-.home-latest {
96
- display: grid;
97
- gap: var(--space-3);
54
+.home-latest--feature {
55
+ gap: var(--space-4);
56
+ padding: var(--space-5);
57
+ border-left: var(--space-1) solid var(--color-accent);
58
+ box-shadow: var(--shadow-sm);
59
}
60
61
.home-latest-kicker,
101
-.home-report-meta,
102
-.home-tag-strip {
62
+.home-report-meta {
63
display: flex;
64
flex-wrap: wrap;
65
gap: var(--space-2);
@@ -111,22 +71,26 @@
71
.home-latest h2 {
72
max-width: var(--prose-measure);
73
margin: 0;
114
- font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
74
+ font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
75
line-height: var(--leading-tight);
76
+ letter-spacing: var(--tracking-tight);
77
}
78
79
.home-latest h2 a,
119
-.home-report-title,
120
-.home-quick-links a,
121
-.home-tag-strip a {
80
+.home-report-title {
81
text-decoration-thickness: 1px;
82
text-underline-offset: var(--space-1);
83
}
84
85
+.home-latest-hook {
86
+ max-width: var(--prose-measure);
87
+ color: var(--color-text);
88
+ font-size: var(--text-lg);
89
+ line-height: var(--leading-relaxed);
90
+}
91
+
92
.report-metrics,
127
-.home-report-list,
128
-.home-content-grid,
129
-.home-quick-links {
93
+.home-report-list {
94
display: grid;
95
gap: var(--space-3);
96
}
@@ -180,21 +144,21 @@
144
border: 1px solid var(--color-border);
145
}
146
183
-.home-tag-strip {
184
- padding: var(--space-2) var(--space-3);
185
- border-block: 1px solid var(--color-border);
147
+.home-recent--compact {
148
+ display: grid;
149
+ gap: var(--space-3);
150
+ padding-top: var(--space-3);
151
+ border-top: 1px solid var(--color-border);
152
}
153
188
-.home-tag-strip a {
189
- padding: var(--space-1) var(--space-2);
190
- border-radius: var(--radius-full);
191
- background: var(--color-accent-muted);
192
- color: var(--color-accent);
193
- text-decoration: none;
154
+.home-recent--compact h2 {
155
+ margin: 0;
156
+ font-size: var(--text-xl);
157
+ line-height: var(--leading-tight);
158
}
159
196
-.home-report-list {
197
- margin-top: var(--space-3);
160
+.home-report-list--compact {
161
+ gap: var(--space-2);
162
}
163
164
.home-report-card,
@@ -207,9 +171,15 @@
171
gap: var(--space-2);
172
}
173
174
+.home-report-card--compact {
175
+ grid-template-columns: minmax(0, 1fr);
176
+}
177
+
178
.home-report-title {
179
display: grid;
180
gap: var(--space-1);
181
+ color: var(--color-text);
182
+ font-weight: 700;
183
text-decoration: none;
184
}
185
@@ -218,27 +188,6 @@
188
color: var(--color-text-muted);
189
}
190
221
-.home-quick-links {
222
- align-content: start;
223
-}
224
-
225
-.home-quick-links a {
226
- display: flex;
227
- justify-content: space-between;
228
- gap: var(--space-3);
229
- padding: var(--space-2) 0;
230
- border-bottom: 1px solid var(--color-border);
231
-}
232
-
233
-.home-quick-links a::after {
234
- content: "→";
235
- color: var(--color-accent);
236
-}
237
-
238
-.home-quick-links a:last-child {
239
- border-bottom: 0;
240
-}
241
-
191
.squad-report .report-shortcuts {
192
margin-bottom: var(--space-4);
193
padding: var(--space-2);
content/_index.md
+2
-6
@@ -2,10 +2,6 @@
2
title = 'SquadScope'
3
date = '2026-05-18T10:27:35.339+02:00'
4
draft = false
5
-summary = 'Follow the latest weekly GitHub trend analysis, then dive into monthly, yearly, and archive views.'
6
-description = 'Start with the newest weekly report and navigate the full SquadScope timeline.'
5
+summary = 'Weekly tech signal from GitHub'
6
+description = 'Weekly tech signal from GitHub'
7
+++
8
-
9
-SquadScope surfaces the strongest weekly signal from GitHub activity, then organizes that analysis into monthly and yearly views for long-term pattern spotting.
10
-
11
-Use the homepage to jump straight into the latest summary, scan the archive, or move up to broader rollups when you want a bigger-picture view.
content/about/_index.md
+6
@@ -6,6 +6,12 @@ summary = 'SquadScope turns GitHub activity into readable trend reports.'
6
description = 'Learn what SquadScope publishes and how to follow its GitHub trend reports.'
7
+++
8
9
+## About SquadScope
10
+
11
+SquadScope surfaces the strongest weekly signal from GitHub activity, then organizes that analysis into monthly and yearly views for long-term pattern spotting.
12
+
13
+Use the homepage to jump straight into the latest summary, scan the archive, or move up to broader rollups when you want a bigger-picture view.
14
+
15
SquadScope turns GitHub activity into readable weekly, monthly, and yearly trend reports for busy developers and technical leaders.
16
17
The project favors editorial signal over dashboard noise: what mattered this week, what is merely loud, and what is missing from the conversation.
layouts/index.html
+27
-75
@@ -1,102 +1,54 @@
1
{{- define "main" -}}
2
{{- $weeklyPages := (where site.RegularPages "Type" "weekly").ByDate.Reverse -}}
3
{{- $latest := cond (gt (len $weeklyPages) 0) (index $weeklyPages 0) nil -}}
4
+{{- $recent := after 1 $weeklyPages -}}
5
6
<div class="home-shell">
6
- <section class="home-hero" aria-labelledby="home-title">
7
- <div class="home-hero-main">
8
- <p class="home-eyebrow">Weekly tech signal from GitHub</p>
9
- <h1 id="home-title">{{ .Title }}</h1>
10
- <p class="home-description">
11
- {{- with .Params.description -}}
12
- {{ . }}
13
- {{- else -}}
14
- {{ site.Params.homeInfoParams.Content }}
15
- {{- end -}}
16
- </p>
17
- <div class="home-copy md-content">
18
- {{ .Content }}
19
- </div>
20
- </div>
21
-
22
- <aside class="home-cadence" aria-label="What readers get">
23
- <p class="section-topline">What readers get</p>
24
- <ul>
25
- <li>Signal-first weekly GitHub trend analysis.</li>
26
- <li>Monthly and yearly rollups for longer arcs.</li>
27
- <li>Noise calls on spam, star farming, and blind spots.</li>
28
- </ul>
29
- <dl>
30
- <div>
31
- <dt>Cadence</dt>
32
- <dd>Weekly on Mondays, with rollups as the archive grows.</dd>
33
- </div>
34
- </dl>
35
- </aside>
7
+ <section class="home-hero home-hero--minimal" aria-labelledby="home-title">
8
+ <p class="home-eyebrow">{{ .Params.description | default site.Params.homeInfoParams.Title | default "Weekly tech signal from GitHub" }}</p>
9
+ <h1 id="home-title">{{ .Title }}</h1>
10
</section>
11
12
{{- if $latest -}}
39
- <article class="home-latest" aria-labelledby="latest-report-heading">
13
+ <article class="home-latest home-latest--feature" aria-labelledby="latest-report-heading">
14
<div class="home-latest-kicker">
41
- <span class="section-topline">Latest report</span>
15
+ <span class="section-topline">This week’s analysis</span>
16
{{- with $latest.Params.week }}<span>{{ . }}</span>{{- end }}
17
+ <time datetime="{{ $latest.Date.Format "2006-01-02" }}">{{ $latest.Date.Format "Jan 2, 2006" }}</time>
18
</div>
19
<h2 id="latest-report-heading"><a href="{{ $latest.RelPermalink }}">{{ $latest.Title }}</a></h2>
20
<p class="home-latest-hook">{{ $latest.Params.summary | default $latest.Summary }}</p>
21
{{ partial "report-metrics.html" $latest }}
22
<div class="home-actions">
48
- <a class="home-action-primary" href="{{ $latest.RelPermalink }}">Read this week</a>
49
- <a class="home-action-secondary" href="{{ `archive/` | absLangURL }}">Browse archive</a>
23
+ <a class="home-action-primary" href="{{ $latest.RelPermalink }}">Read full analysis</a>
24
</div>
25
</article>
26
{{- else -}}
27
<section class="home-empty-state" aria-labelledby="latest-report-heading">
54
- <div class="section-topline">Latest report</div>
28
+ <div class="section-topline">This week’s analysis</div>
29
<h2 id="latest-report-heading">No weekly report published yet</h2>
30
<p>The homepage will feature the newest report as soon as the first weekly summary lands in <code>content/weekly/</code>.</p>
31
</section>
32
{{- end -}}
33
60
- {{- if site.Taxonomies.tags -}}
61
- <nav class="home-tag-strip" aria-label="Top tags">
62
- <span class="home-tag-label">Track</span>
63
- {{- range first 6 site.Taxonomies.tags.ByCount }}
64
- <a href="{{ printf "tags/%s/" (.Name | urlize) | absLangURL }}">{{ .Name }}</a>
65
- {{- end }}
66
- </nav>
34
+ {{- if gt (len $recent) 0 -}}
35
+ <section class="home-recent home-recent--compact" aria-labelledby="recent-reports-heading">
36
+ <div class="section-topline">Recent archive</div>
37
+ <h2 id="recent-reports-heading">Previous weekly analyses</h2>
38
+ <div class="home-report-list home-report-list--compact">
39
+ {{- range first 6 $recent -}}
40
+ <article class="home-report-card home-report-card--compact">
41
+ <a class="home-report-title" href="{{ .RelPermalink }}">
42
+ <span>{{ .Title }}</span>
43
+ </a>
44
+ <div class="home-report-meta">
45
+ {{- with .Params.week }}<span>{{ . }}</span>{{- end }}
46
+ <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
47
+ </div>
48
+ </article>
49
+ {{- end -}}
50
+ </div>
51
+ </section>
52
{{- end -}}
68
-
69
- <div class="home-content-grid">
70
- <section class="home-recent" aria-labelledby="recent-reports-heading">
71
- <div class="section-topline">Recent issues</div>
72
- <h2 id="recent-reports-heading">Weekly archive</h2>
73
- <div class="home-report-list">
74
- {{- range first 6 $weeklyPages -}}
75
- <article class="home-report-card">
76
- <a class="home-report-title" href="{{ .RelPermalink }}">
77
- <span class="home-report-week">{{ .Params.week | default (.Date.Format "2006-01-02") }}</span>
78
- <span>{{ .Title }}</span>
79
- </a>
80
- <p>{{ .Params.summary | default .Summary }}</p>
81
- <div class="home-report-meta">
82
- <span>{{ .Date.Format "Jan 2, 2006" }}</span>
83
- {{- with .Params.repos_featured }}<span>{{ . }} repos featured</span>{{- end }}
84
- </div>
85
- </article>
86
- {{- end -}}
87
- </div>
88
- </section>
89
-
90
- <nav class="home-quick-links" aria-labelledby="quick-links-heading">
91
- <div class="section-topline">Quick links</div>
92
- <h2 id="quick-links-heading">Move through the report</h2>
93
- <a href="{{ `weekly/` | absLangURL }}">Weekly reports</a>
94
- <a href="{{ `monthly/` | absLangURL }}">Monthly rollups</a>
95
- <a href="{{ `yearly/` | absLangURL }}">Yearly rollups</a>
96
- <a href="{{ `archive/` | absLangURL }}">Full archive</a>
97
- <a href="{{ `search/` | absLangURL }}">Search</a>
98
- <a href="{{ `index.xml` | absLangURL }}">RSS feed</a>
99
- </nav>
100
- </div>
53
</div>
54
{{- end -}}