Skip to content

Zero to hero #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vpetersson merged 3 commits into from
Jan 21, 2026
Merged

Zero to hero #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69008ec
Overhaul Trust Center page with improved UX and Tabler icons
vpetersson Jan 21, 2026
f037379
Adds zero to hero section
vpetersson Jan 21, 2026
deef2f9
linting
vpetersson Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions _d2/generation.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@ direction: right

Generation: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/settings-cog.svg
}

Augmentation: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/puzzle.svg
}

Enrichment: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/wand.svg
}

Signing: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/signature.svg
style: {
stroke-dash: 3
}
Expand Down
6 changes: 6 additions & 0 deletions _d2/lifecycle.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@ Authoring: {

Generation: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/settings-cog.svg
}

Augmentation: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/puzzle.svg
}

Enrichment: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/wand.svg
}

Signing: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/signature.svg
style: {
stroke-dash: 3
}
Expand All @@ -37,10 +41,12 @@ Authoring: {

Distribution: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/send.svg
}

Analysis: {
class: accent
icon: node_modules/@tabler/icons/icons/outline/chart-line.svg
}

Authoring.Signing -> Distribution: {
Expand Down
37 changes: 37 additions & 0 deletions _d2/quality-gap.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
direction: right

SBOM: {
class: secondary
label: "Your SBOM"
icon: node_modules/@tabler/icons/icons/outline/file-code.svg
}

Lockfile: {
class: secondary
label: "Your Lockfile"
icon: node_modules/@tabler/icons/icons/outline/file-text.svg
}

Action: {
class: highlight
label: "sbomify action"
icon: node_modules/@tabler/icons/icons/filled/bolt.svg
}

Quality: {
class: primary
label: "Quality SBOM"
icon: node_modules/@tabler/icons/icons/filled/shield-check.svg
}

SBOM -> Action: "or" {
class: flow
}

Lockfile -> Action: {
class: flow
}

Action -> Quality: {
class: flow-pink
}
77 changes: 77 additions & 0 deletions _d2/sbomify-action-flow.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
direction: right

Input: {
class: secondary
label: "Your Code"
icon: node_modules/@tabler/icons/icons/outline/code.svg
}

Action: {
class: group
label: "sbomify action"

Generate: {
class: primary
label: "Generate"
icon: node_modules/@tabler/icons/icons/outline/settings-cog.svg
}

Augment: {
class: accent
label: "Augment"
icon: node_modules/@tabler/icons/icons/outline/puzzle.svg
}

Enrich: {
class: accent
label: "Enrich"
icon: node_modules/@tabler/icons/icons/outline/wand.svg
}

Generate -> Augment: {
class: flow
}

Augment -> Enrich: {
class: flow
}
}

Outputs: {
class: group
label: ""

Quality: {
class: highlight
label: "Compliance-Ready"
icon: node_modules/@tabler/icons/icons/filled/rosette-discount-check.svg
}

Compliance: {
class: primary
label: "Regulation Checks"
icon: node_modules/@tabler/icons/icons/outline/checklist.svg
}

Attestation: {
class: primary
label: "Verify Attestation"
icon: node_modules/@tabler/icons/icons/outline/certificate.svg
}
}

Input -> Action.Generate: {
class: flow
}

Action.Enrich -> Outputs.Quality: {
class: flow-pink
}

Outputs.Quality -> Outputs.Compliance: {
class: flow
}

Outputs.Quality -> Outputs.Attestation: {
class: flow
}
4 changes: 4 additions & 0 deletions _d2/store-analyze-enrich.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,19 @@ CI: {
Generate: {
class: primary
label: "Generate"
icon: node_modules/@tabler/icons/icons/outline/settings-cog.svg
}

Enrich: {
class: secondary
label: "Enrich & Augment"
icon: node_modules/@tabler/icons/icons/outline/wand.svg
}

Sign: {
class: accent
label: "Sign"
icon: node_modules/@tabler/icons/icons/outline/signature.svg
}

Generate -> Enrich: {
Expand All @@ -38,6 +41,7 @@ sbomify: {
Analysis: {
class: accent
label: "Analysis"
icon: node_modules/@tabler/icons/icons/outline/chart-line.svg
}

CI.Sign -> sbomify: Upload {
Expand Down
86 changes: 54 additions & 32 deletions _d2/theme.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,114 @@
# Sbomify D2 Theme
# Sbomify D2 Theme - Clean & Modern
#
# Brand colors:
# - Dark Blue: #201B4C
# - Purple: #8A7DFF
# - Pink: #d874a9
# - Light Pink: #FCDDEC
# - Background: #F8F9FC

# Global Defaults
style: {
fill: "transparent"
stroke: "transparent"
stroke-width: 0
font-size: 16
border-radius: 16
font-size: 14
border-radius: 8
}

# Reusable Classes
classes: {
# Primary: Dark Blue Background (matches site), Purple Stroke
# Primary - Purple border, light fill
primary: {
style: {
fill: "#201B4C"
fill: "#FFFFFF"
stroke: "#8A7DFF"
font-color: "#d874a9"
font-color: "#201B4C"
stroke-width: 2
shadow: false
bold: true
border-radius: 16
border-radius: 8
font-size: 14
}
}

# Accent: Dark Blue Background, Pink Stroke
# Accent - Pink border, light fill
accent: {
style: {
fill: "#201B4C"
fill: "#FFFFFF"
stroke: "#d874a9"
font-color: "#d874a9"
font-color: "#201B4C"
stroke-width: 2
shadow: false
bold: true
border-radius: 16
border-radius: 8
font-size: 14
}
}

# Secondary: Dark Background, Light Pink Stroke
# Secondary - Light pink border, light fill (for less emphasis)
secondary: {
style: {
fill: "#201B4C"
stroke: "#FCDDEC"
font-color: "#d874a9"
fill: "#FFFFFF"
stroke: "#CCCCCC"
font-color: "#666666"
stroke-width: 2
shadow: false
bold: true
border-radius: 16
border-radius: 8
font-size: 14
stroke-dash: 3
}
}

# Group Container Style
# Use this class for grouping boxes like "Authoring"
group: {
# Highlight - Filled purple (for key items)
highlight: {
style: {
fill: "#8A7DFF"
stroke: "#8A7DFF"
stroke-dash: 3
fill: "#F5F5FA"
font-color: "#141035"
border-radius: 16
font-color: "#FFFFFF"
stroke-width: 2
shadow: false
border-radius: 8
font-size: 14
bold: true
}
}

# Group Container
group: {
style: {
fill: "#F8F9FC"
stroke: "#E2E4E9"
font-color: "#201B4C"
stroke-width: 1
border-radius: 12
font-size: 13
}
}

# Visual style for stacks
# Stack style
stack: {
style: {
multiple: true
}
}

# Animated Purple Connection
# Flow - Purple animated connection
flow: {
style: {
animated: true
stroke: "#8A7DFF"
font-color: "#8A7DFF"
font-color: "#666666"
stroke-width: 2
font-size: 12
}
}

# Animated Pink Connection
# Flow Pink - Pink animated connection
flow-pink: {
style: {
animated: true
stroke: "#d874a9"
font-color: "#d874a9"
font-color: "#666666"
stroke-width: 2
font-size: 12
}
}
}
47 changes: 47 additions & 0 deletions _d2/trust-chain.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
direction: right

CICD: {
class: group
label: "CI/CD Pipeline"

Generate: {
class: primary
label: "Generate"
icon: node_modules/@tabler/icons/icons/outline/settings-cog.svg
}

Sign: {
class: accent
label: "Sign"
icon: node_modules/@tabler/icons/icons/outline/signature.svg
}

Generate -> Sign: {
class: flow
}
}

Distribute: {
class: secondary
label: "Distribute"
icon: node_modules/@tabler/icons/icons/outline/send.svg
}

Verify: {
class: primary
label: "Verify"
icon: node_modules/@tabler/icons/icons/filled/shield-check.svg
}

CICD.Sign -> Distribute: "Signed SBOM" {
class: flow-pink
}

Distribute -> Verify: {
class: flow-pink
}

Verify -> CICD: "Trust" {
class: flow
style.stroke-dash: 3
}
Loading