Skip to content

Commit 2a265d3

Browse files
webstackdevwebstackdev
committed
Styling fixes to table and list components in slsa-build-provenance-artifact-signing-supply-chain article, add Troubleshooter component
1 parent db7c6f9 commit 2a265d3

8 files changed

Lines changed: 376 additions & 176 deletions

File tree

‎package.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@
6868
"dependencies": {
6969
"@adobe/remark-gridtables": "^3.0.18",
7070
"@astrojs/check": "0.9.8",
71-
"@astrojs/db": "^0.20.0",
72-
"@astrojs/mdx": "5.0.1",
73-
"@astrojs/preact": "5.0.1",
71+
"@astrojs/db": "^0.20.1",
72+
"@astrojs/mdx": "5.0.2",
73+
"@astrojs/preact": "5.0.2",
7474
"@astrojs/rss": "4.0.17",
7575
"@astrojs/sitemap": "^3.7.1",
7676
"@astrojs/vercel": "^10.0.1",
@@ -87,12 +87,12 @@
8787
"@playwright/browser-chromium": "^1.58.2",
8888
"@playwright/test": "1.58.2",
8989
"@semantic-ui/astro-lit": "^5.3.0",
90-
"@sentry/astro": "^10.43.0",
91-
"@sentry/browser": "^10.43.0",
90+
"@sentry/astro": "^10.44.0",
91+
"@sentry/browser": "^10.44.0",
9292
"@shikijs/transformers": "^4.0.2",
9393
"@tailwindcss/forms": "0.5.11",
9494
"@tailwindcss/typography": "0.5.19",
95-
"@tailwindcss/vite": "^4.2.1",
95+
"@tailwindcss/vite": "^4.2.2",
9696
"@testing-library/dom": "10.4.1",
9797
"@testing-library/preact": "3.2.4",
9898
"@testing-library/user-event": "14.6.1",
@@ -129,7 +129,7 @@
129129
"@vitest/coverage-v8": "^4.1.0",
130130
"@webcomponents/template-shadowroot": "^0.2.1",
131131
"alex": "^11.0.1",
132-
"astro": "6.0.5",
132+
"astro": "6.0.6",
133133
"astro-link-validator": "github:rodgtr1/astro-link-validator",
134134
"astro-og-canvas": "^0.10.1",
135135
"astro-vtbot": "^2.1.12",
@@ -171,7 +171,7 @@
171171
"md-attr-parser": "^1.3.0",
172172
"mermaid": "^11.13.0",
173173
"nanostores": "^1.2.0",
174-
"nodemailer": "^8.0.2",
174+
"nodemailer": "^8.0.3",
175175
"npm": "^11.11.1",
176176
"playwright-lighthouse": "^4.0.0",
177177
"postcss": "8.5.8",
@@ -207,7 +207,7 @@
207207
"retext": "^9.0.0",
208208
"retext-smartypants": "^6.2.0",
209209
"rimraf": "6.1.3",
210-
"sanitize-html": "^2.17.1",
210+
"sanitize-html": "^2.17.2",
211211
"schema-dts": "^1.1.5",
212212
"sharp": "^0.34.5",
213213
"shiki": "^4.0.2",
@@ -216,7 +216,7 @@
216216
"stylelint-config-standard": "^40.0.0",
217217
"stylelint-declaration-block-no-ignored-properties": "3.0.0",
218218
"stylelint-order": "8.1.1",
219-
"tailwindcss": "^4.2.1",
219+
"tailwindcss": "^4.2.2",
220220
"temp-dir": "3.0.0",
221221
"timezones-ical-library": "^2.1.3",
222222
"title-case": "4.3.2",
@@ -230,8 +230,8 @@
230230
"unist-util-is": "^6.0.1",
231231
"unist-util-visit": "^5.1.0",
232232
"uuid": "^13.0.0",
233-
"vercel": "^50.32.5",
234-
"vite": "^8.0.0",
233+
"vercel": "^50.33.1",
234+
"vite": "^8.0.1",
235235
"vitest": "4.1.0",
236236
"vitest-axe": "0.1.0",
237237
"workbox-build": "7.4.0",

‎src/components/Table/layouts/striped-rows.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const tfootClass = ''
6161
{content.tbody.tr.map((row, rowIndex) => (
6262
<tr
6363
class:list={[
64-
rowIndex % 2 === 0 ? 'bg-page-offset' : 'bg-content-inverse',
64+
rowIndex % 2 === 0 ? 'bg-content-inverse' : 'bg-page-offset',
6565
]}
6666
>
6767
{row.th && (

‎src/components/Troubleshooter/index.astro‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
import Icon from '@components/Icon/index.astro'
3+
4+
type TroubleshooterItem = {
5+
text: string
6+
}
7+
8+
type TroubleshooterSection = {
9+
lead?: string
10+
items: TroubleshooterItem[]
11+
}
12+
13+
export type Props = {
14+
items: {
15+
symptoms: TroubleshooterSection
16+
causes: TroubleshooterSection
17+
diagnosis: TroubleshooterSection
18+
fixes: TroubleshooterSection
19+
}
20+
}
21+
22+
const { items } = Astro.props as Props
23+
24+
const sectionMeta = {
25+
symptoms: { icon: 'error-open', color: 'danger', label: 'Symptoms' },
26+
causes: { icon: 'question', color: 'warning', label: 'Cause' },
27+
diagnosis: { icon: 'folder-magnifying-glass', color: 'info', label: 'Diagnosis' },
28+
fixes: { icon: 'wrench', color: 'success', label: 'Fix' },
29+
} satisfies Record<keyof Props['items'], { icon: string; color: string; label: string }>
30+
31+
function getSectionClassNames(color: string) {
32+
return {
33+
headerBg: `bg-${color}-inverse`,
34+
headerText: `text-${color}`,
35+
headerTopBorder: `border-t-${color}`,
36+
markerBg: `bg-${color}`,
37+
}
38+
}
39+
---
40+
41+
<style>
42+
.troubleshooter + .troubleshooter {
43+
margin-top: 1.5rem;
44+
}
45+
</style>
46+
47+
<div class="troubleshooter overflow-hidden rounded-xl border border-trim bg-content-inverse">
48+
<div class="border-b border-trim bg-page-base px-6 py-4">
49+
<div class="flex flex-col gap-3">
50+
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
51+
<p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-content-offset">Troubleshooting</p>
52+
<div class="hidden flex-wrap gap-2 text-xs sm:flex">
53+
<span class="rounded-full bg-danger-inverse px-3 py-1 font-semibold text-danger">Build Integrity</span>
54+
<span class="rounded-full bg-warning-inverse px-3 py-1 font-semibold text-warning">Root Cause</span>
55+
<span class="rounded-full bg-info-inverse px-3 py-1 font-semibold text-info">Verification</span>
56+
<span class="rounded-full bg-success-inverse px-3 py-1 font-semibold text-success">Actionable</span>
57+
</div>
58+
</div>
59+
<div class="[&_h3]:relative [&_h3]:text-page-inverse [&_h3]:group [&_h3]:mt-0! [&_h3]:mb-0!">
60+
<slot />
61+
</div>
62+
</div>
63+
</div>
64+
65+
<div class="flex flex-col">
66+
{([['symptoms', 'causes'], ['diagnosis', 'fixes']] as const).map((pair, rowIndex) => {
67+
const cards = pair.map((key) => ({
68+
meta: sectionMeta[key],
69+
items: items[key],
70+
}))
71+
72+
return (
73+
<div class:list={[
74+
'flex flex-col md:flex-row shadow-sm',
75+
rowIndex === 0 ? 'border-b border-trim-offset' : '',
76+
]}>
77+
{cards.map((card, colIndex) => {
78+
const colorClasses = getSectionClassNames(card.meta.color)
79+
80+
return (
81+
<article class:list={[
82+
'flex flex-1 flex-col',
83+
colIndex === 0 ? 'md:border-r border-trim' : '',
84+
colIndex === 0 ? 'bg-content-inverse' : 'bg-page-base',
85+
]}>
86+
<div class:list={[
87+
'flex items-center gap-3 border-b border-t-4 border-trim-offset px-6 py-3',
88+
colorClasses.headerBg,
89+
colorClasses.headerTopBorder,
90+
]}>
91+
<Icon icon={card.meta.icon} size={5} color={card.meta.color} />
92+
<h5 class:list={[
93+
'm-0 text-sm font-bold uppercase tracking-[0.12em]',
94+
colorClasses.headerText,
95+
]}>{card.meta.label}</h5>
96+
</div>
97+
<div class="grow px-6 py-5 text-base text-content">
98+
{!card.items.lead && card.items.items.length === 0 ? (
99+
<span class="text-content-offset italic">None specified</span>
100+
) : null}
101+
102+
{card.items.lead && (
103+
<p class:list={[
104+
'm-0',
105+
card.items.items.length > 0 ? 'mb-3' : '',
106+
]} set:html={card.items.lead} />
107+
)}
108+
109+
{!card.items.lead && card.items.items.length === 1 && (
110+
<p class="m-0" set:html={card.items.items[0]?.text} />
111+
)}
112+
113+
{card.items.items.length > 0 && (card.items.items.length > 1 || Boolean(card.items.lead)) && (
114+
<ul class="m-0 flex flex-col gap-2.5 p-0">
115+
{card.items.items.map((item) => (
116+
<li class="flex items-start gap-2.5">
117+
<span class:list={[
118+
'mt-1.5 flex h-2 w-2 shrink-0 rounded-full',
119+
colorClasses.markerBg,
120+
]} />
121+
<span set:html={item.text} />
122+
</li>
123+
))}
124+
</ul>
125+
)}
126+
</div>
127+
</article>
128+
)
129+
})}
130+
</div>
131+
)
132+
})}
133+
</div>
134+
</div>

‎src/content/articles/slsa-build-provenance-artifact-signing-supply-chain/index.mdx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ In December 2020, attackers compromised SolarWinds' build process and shipped ma
2525

2626
These weren't exotic zero-days. They exploited a fundamental assumption: that code, builds, and artifacts are what they claim to be. When that assumption breaks down, the blast radius is enormous.
2727

28-
Here's the good news: you can implement practical supply chain protection __today__ without managing keys, standing up infrastructure, or paying for expensive tooling. The barrier has dropped dramatically in the past few years, and the core protection — cryptographic signing with identity-based verification — is now free. If you're already comfortable with GitHub Actions, you can add signing to an existing pipeline in about 15 minutes. If you're newer to these tools, budget an hour to understand the OIDC flow and test your configuration.
28+
Here's the good news: you can implement practical supply chain protection _today_ without managing keys, standing up infrastructure, or paying for expensive tooling. The barrier has dropped dramatically in the past few years, and the core protection — cryptographic signing with identity-based verification — is now free. <Highlighter>If you're already comfortable with GitHub Actions, you can add signing to an existing pipeline in about 15 minutes.</Highlighter> If you're newer to these tools, budget an hour to understand the OIDC flow and test your configuration.
2929

3030
## What You're Actually Protecting Against
3131

@@ -34,8 +34,13 @@ Before investing in countermeasures, it helps to understand the attack surface.
3434
[SLSA](https://slsa.dev) (Supply-chain Levels for Software Artifacts, pronounced "salsa") is a framework that addresses a specific slice of this problem. It focuses on __provenance_ — proving that an artifact came from a specific source through a specific build process. This matters because it lets you verify that what you're deploying matches what you reviewed.
3535

3636
<Table
37-
variant="vertical-column-delineation-table"
37+
variant="grid-and-accent-header-table"
38+
fullWidth={false}
39+
classes={{
40+
tbody: '!text-content',
41+
}}
3842
content={{
43+
figure: 'SLSA protection scope.',
3944
thead: {
4045
th: ['SLSA Addresses', 'SLSA Does NOT Address'],
4146
},
@@ -63,7 +68,6 @@ Before investing in countermeasures, it helps to understand the attack surface.
6368
},
6469
],
6570
},
66-
figure: 'SLSA protection scope.',
6771
}}
6872
/>
6973

@@ -200,23 +204,23 @@ What I've covered here — keyless signing with Cosign and basic verification ga
200204
From here, you can layer in additional protections. Here's what each provides:
201205

202206
<List
203-
variant="check-icons-list"
207+
variant="zebra-list"
204208
items={[
205209
{
206210
lead: 'SLSA provenance generators',
207-
text: 'create cryptographically-signed attestations linking artifacts to specific commits and build configurations. The [slsa-framework](https://github.com/slsa-framework/slsa-github-generator) organization provides official generators for GitHub Actions.',
211+
text: 'Create cryptographically-signed attestations linking artifacts to specific commits and build configurations. The [slsa-framework](https://github.com/slsa-framework/slsa-github-generator) organization provides official generators for GitHub Actions.',
208212
},
209213
{
210214
lead: 'SBOM integration',
211-
text: 'adds a Software Bill of Materials to your images, listing every dependency. When a new CVE drops, you can answer "are we affected?" in minutes.',
215+
text: 'Adds a Software Bill of Materials to your images, listing every dependency. When a new CVE drops, you can answer "are we affected?" in minutes.',
212216
},
213217
{
214218
lead: 'Kubernetes admission control',
215-
text: 'with the Sigstore Policy Controller makes verification automatic and mandatory at the cluster level-no deployment workflow changes needed.',
219+
text: 'With the Sigstore Policy Controller, makes verification automatic and mandatory at the cluster level-no deployment workflow changes needed.',
216220
},
217221
{
218222
lead: 'Level 3 hardening',
219-
text: 'introduces two-person review requirements and isolated build environments for your most security-critical components.',
223+
text: 'Introduces two-person review requirements and isolated build environments for your most security-critical components.',
220224
},
221225
]}
222226
/>

0 commit comments

Comments
 (0)