diff --git a/site/src/components/TemplatingShowcase.astro b/site/src/components/TemplatingShowcase.astro new file mode 100644 index 00000000..d7f26856 --- /dev/null +++ b/site/src/components/TemplatingShowcase.astro @@ -0,0 +1,126 @@ +--- +/** + * TemplatingShowcase - explains how the Go text/template subset works inside + * Warmbly campaign steps. Mirrors the exact send-time syntax the dashboard + * composer renders (web/src/components/app/campaigns/sequences/SequenceView.tsx): + * + * - merge fields: {{.FirstName}} {{.LastName}} {{.Company}} {{.Email}} {{.Phone}} + * - conditionals: {{if eq .role "Engineer"}} ... {{else}} ... {{end}} + and / or + * - spintax: {Hi|Hey|Hello} {{.FirstName}} (one variant is picked) + * + * Sample data matches the composer's SAMPLE map (Alex Rivera at Acme, role + * Engineer) so the before/after examples line up with the in-app preview. + * + * Self-contained, no props. Dark code style matches the campaign code block on + * index.astro / campaigns.astro (#0c1224 surface, white/85 text, sky/amber/ + * violet/emerald spans). No app-window frame and no demo cursor. + */ +import SectionHead from './SectionHead.astro'; + +// Merge fields, paired with their resolved value from the composer's SAMPLE. +const fields = [ + { token: '{{.FirstName}}', value: 'Alex' }, + { token: '{{.LastName}}', value: 'Rivera' }, + { token: '{{.Company}}', value: 'Acme' }, + { token: '{{.Email}}', value: 'alex@acme.com' }, + { token: '{{.Phone}}', value: '+1 555-0100' }, +]; +--- +
+
+ + +
+ +
+
+ + + +

Merge fields

+
+

+ Pull any contact field with a leading dot. Missing values render empty, so a blank field never breaks the line. +

+ +
+ {fields.map((f) => ( + {f.token} + ))} +
+ +
+
Before / after
+
+
Hi {`{{.FirstName}}`}
+
+ + Hi Alex +
+
+
+
+ + +
+
+ + + +

Conditionals

+
+

+ Branch on a contact field with if / else / end. Compare values with eq. +

+ +
+ 
{`{{`}if eq .role "Engineer"{`}}`}
+  We built this for teams like yours.
+{`{{`}else{`}}`}
+  Thought this might be useful.
+{`{{`}end{`}}`}
+
+ +

+ Combine checks with and / or, for example + {`{{if and (eq .role "Engineer") .Company}}`}. +

+
+ + +
+
+ + + +

Spintax

+
+

+ List variants in braces and Warmbly picks one per send, so the same step reads a little differently to every recipient. +

+ +
+ 
{`{`}Hi|Hey|Hello{`}`} {`{{.FirstName}}`}
+
+ +
+
Picks one variant
+
+ Hey Alex + Hi Alex + Hello Alex +
+
+
+
+ +

+ + Everything resolves at send time, and the composer previews the result against sample data before you launch. +

+
+