The $props plugin makes markdown content fully dynamic and computable.
You can define any properties inside the props object of your frontmatter :
props:
counter: 1
color: "red"
tickers: ["€", "¥"]
total: "(price, qty, ticker=0) => (price * qty) + ~tickers[ticker]"
toggleColor: "() => { ~color = ~color == 'red' ? 'blue' : 'red' }"
foo:
bar: "baz"
Props can:
~.| markdown | prop value |
|---|---|
| ~color | ~color |
| ~foo.bar | ~foo.bar |
| ~tickers[0] | ~tickers[0] |
| ~total(10, 3) | ~total(10, 3) |
| ~total(10, ~counter) | ~total(10, ~counter) |
| ~total(10, ~counter, "¥") | ~total(10, ~counter, "¥") |
| ~counter | ~counter |
| ~counter * 2 | ~counter * 2 |
Props resolves to their litteral javascript value, so any valid javascript will work.
~color.toUpperCase()
~foo.bar.replace("z", "zzz")
~tickers.includes("€")
~tickers.push("¥")
~counter * 2
~counter++
~total(10, ~counter) + " ttc"
Use props inside click events:
`counter` = <span>~counter</span>
<button data-click="~counter--">
decrement
</button>
<button data-click="~counter++">
increment
</button>
counter = ~counter
You can bind props to native html inputs and kit widgets.
`foo.bar` = <span>~foo.bar</span>
<input type="text" data-bind="~foo.bar" />
foo.bar = ~foo.bar
`color` = <span>~color</span>
<p data-switch data-bind="~color"></p>
- red
- blue
<p data-end></p>
color = ~color
Display an element when a given condition is met:
<button data-click="~toggleColor()" role="button">Toggle</button>
<span data-show="~color=='red'">red</span>
<span data-show="~color=='blue'">blue</span>
redblue