introduce tier id to use in the table instead of the name, to make code more sustainable

This commit is contained in:
trean
2026-03-12 09:00:30 +01:00
parent 6857b719cb
commit 7a4baa58e8
3 changed files with 43 additions and 135 deletions
@@ -14,14 +14,22 @@ link:
text: Try our Pricing Calculator text: Try our Pricing Calculator
url: /pricing/#calculator url: /pricing/#calculator
tiers: tiers:
- name: OSS - id: oss
name: OSS
highlight: false highlight: false
- name: Free Tier bold: false
- id: free
name: Free Tier
highlight: false highlight: false
- name: Standard Tier bold: false
- id: standard
name: Standard Tier
highlight: true highlight: true
- name: Premium Tier bold: true
- id: premium
name: Premium Tier
highlight: false highlight: false
bold: true
sections: sections:
- name: Core Vector Search Capabilities - name: Core Vector Search Capabilities
features: features:
@@ -4,14 +4,22 @@ tables:
- id: managed - id: managed
label: Managed label: Managed
tiers: tiers:
- name: OSS - id: oss
name: OSS
highlight: false highlight: false
- name: Free Tier bold: false
- id: free
name: Free Tier
highlight: false highlight: false
- name: Standard Tier bold: false
- id: standard
name: Standard Tier
highlight: true highlight: true
- name: Premium Tier bold: true
- id: premium
name: Premium Tier
highlight: false highlight: false
bold: true
sections: sections:
- name: Features - name: Features
features: features:
@@ -1,7 +1,7 @@
{{ $tiers := .tiers }} {{ $tiers := .tiers }}
{{ $sections := .sections }} {{ $sections := .sections }}
{{ $ctas := .ctas }} {{ $ctas := .ctas }}
{{ $tierCols := slice "oss" "free-tier" "standard-tier" "premium-tier" }} {{ $featureKeys := slice "oss" "free" "standard" "premium" }}
<div class="pricing-table"> <div class="pricing-table">
@@ -12,7 +12,7 @@
class="pricing-table__tier-tab{{ if eq $index 0 }} class="pricing-table__tier-tab{{ if eq $index 0 }}
pricing-table__tier-tab--active pricing-table__tier-tab--active
{{ end }}" {{ end }}"
data-tier="{{ $tier.name | urlize }}" data-tier="{{ $tier.id }}"
> >
{{ $tier.name }} {{ $tier.name }}
</button> </button>
@@ -27,7 +27,7 @@
class="pricing-table__table-cell pricing-table__table-cell--tier{{ if .highlight }} class="pricing-table__table-cell pricing-table__table-cell--tier{{ if .highlight }}
pricing-table__table-cell--highlight pricing-table__table-cell--highlight
{{ end }}" {{ end }}"
data-tier-col="{{ .name | urlize }}" data-tier-col="{{ .id }}"
> >
{{ .name }} {{ .name }}
</div> </div>
@@ -58,12 +58,19 @@
</div> </div>
<div class="pricing-table__table-section-rows"> <div class="pricing-table__table-section-rows">
{{ range .features }} {{ range .features }}
{{ $feature := . }}
<div class="pricing-table__table-row"> <div class="pricing-table__table-row">
<div class="pricing-table__table-cell pricing-table__table-cell--feature"> <div class="pricing-table__table-cell pricing-table__table-cell--feature">
{{ .name }} {{ .name }}
</div> </div>
<div class="pricing-table__table-cell" data-tier-col="oss"> {{ range $i, $tier := $tiers }}
{{ if eq .oss true }} {{ $key := index $featureKeys $i }}
{{ $val := index $feature $key }}
<div
class="pricing-table__table-cell{{ if $tier.highlight }} pricing-table__table-cell--highlight{{ end }}"
data-tier-col="{{ $tier.id }}"
>
{{ if eq $val true }}
<svg <svg
class="pricing-table__check" class="pricing-table__check"
width="20" width="20"
@@ -80,7 +87,7 @@
stroke-linejoin="round" stroke-linejoin="round"
/> />
</svg> </svg>
{{ else if eq .oss false }} {{ else if eq $val false }}
<svg <svg
class="pricing-table__x" class="pricing-table__x"
width="20" width="20"
@@ -98,126 +105,10 @@
/> />
</svg> </svg>
{{ else }} {{ else }}
<span class="pricing-table__text">{{ .oss }}</span> <span class="pricing-table__text{{ if $tier.bold }} pricing-table__text--bold{{ end }}">{{ $val }}</span>
{{ end }} {{ end }}
</div> </div>
<div class="pricing-table__table-cell" data-tier-col="free-tier"> {{ end }}
{{ if eq .free true }}
<svg
class="pricing-table__check"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.6667 5L7.50001 14.1667L3.33334 10"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{{ else if eq .free false }}
<svg
class="pricing-table__x"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 5L5 15M5 5L15 15"
stroke="#717C99"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{{ else }}
<span class="pricing-table__text">{{ .free }}</span>
{{ end }}
</div>
<div class="pricing-table__table-cell pricing-table__table-cell--highlight" data-tier-col="standard-tier">
{{ if eq .standard true }}
<svg
class="pricing-table__check"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.6667 5L7.50001 14.1667L3.33334 10"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{{ else if eq .standard false }}
<svg
class="pricing-table__x"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 5L5 15M5 5L15 15"
stroke="#717C99"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{{ else }}
<span class="pricing-table__text pricing-table__text--bold">{{ .standard }}</span>
{{ end }}
</div>
<div class="pricing-table__table-cell" data-tier-col="premium-tier">
{{ if eq .premium true }}
<svg
class="pricing-table__check"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.6667 5L7.50001 14.1667L3.33334 10"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{{ else if eq .premium false }}
<svg
class="pricing-table__x"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 5L5 15M5 5L15 15"
stroke="#717C99"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{{ else }}
<span class="pricing-table__text pricing-table__text--bold">{{ .premium }}</span>
{{ end }}
</div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@@ -228,11 +119,12 @@
<div class="pricing-table__table-footer"> <div class="pricing-table__table-footer">
<div class="pricing-table__table-cell pricing-table__table-cell--feature"></div> <div class="pricing-table__table-cell pricing-table__table-cell--feature"></div>
{{ range $index, $cta := $ctas }} {{ range $index, $cta := $ctas }}
{{ $tier := index $tiers $index }}
<div <div
class="pricing-table__table-cell pricing-table__table-cell--cta{{ if eq $index 2 }} class="pricing-table__table-cell pricing-table__table-cell--cta{{ if $tier.highlight }}
pricing-table__table-cell--highlight pricing-table__table-cell--highlight
{{ end }}" {{ end }}"
data-tier-col="{{ index $tierCols $index }}" data-tier-col="{{ $tier.id }}"
> >
<a <a
href="{{ $cta.url }}" href="{{ $cta.url }}"