This repository has been archived by the owner on May 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmarkup.ftd
122 lines (78 loc) · 2.13 KB
/
markup.ftd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
-- boolean $shown: true
-- my-ds.page: FTD markup syntax
Text in FTD support Markdown syntax. We also support, what we call "ftd markup"
syntax.
-- ds.code:
lang: ftd
\-- ftd.text: hello, {yellow: world}
\-- ftd.color yellow-color:
light: yellow
dark: yellow
\-- ftd.text yellow: This One Gives Yellow Background
background-color: $yellow-color
border-radius: 2
padding: 3
-- ds.markdown:
Which looks like this:
-- ftd.text: hello
color: $inherited.colors.text
/-- ftd.color yellow-color:
light: yellow
dark: yellow
/-- ftd.text yellow: This One Gives Yellow Background
background-color: $yellow-color
border-radius: 2
padding: 3
color: $inherited.colors.border
-- ds.h1: Markup Supports Nesting
-- ds.code:
lang: ftd
\-- ftd.text: {yellow: this is {red: important}}
-- ds.markdown:
Which looks like this:
-- ftd.text: {yellow: this is {red: important}}
color: $inherited.colors.text
/-- ftd.color red-color:
light: red
dark: red
/-- ftd.text red: This One Gives Red Background
background-color: $red-color
border-radius: 2
padding: 3
color: $inherited.colors.text-strong
-- ds.h1: Value Is Optional
-- ds.code:
lang: ftd
\-- ftd.text: check us out on {github}
\-- ftd.text: FTD On Github
link: https://github.com/FifthTry/ftd
-- ds.markdown:
If value is not provided, the caption of the `ftd.text` is used.
-- ftd.text: check us out on {github}
color: $inherited.colors.text
/-- ftd.text github: FTD On Github
link: https://github.com/FifthTry/ftd
border-radius: 2
padding: 3
-- ds.h1: Event Handling
-- ds.code:
lang: ftd
\-- ftd.text: Click {orange: me}
\-- boolean $shown: true
\-- ftd.text orange: Show/Hide orange background color
background-color if $shown: $orange-color
$on-click$: toggle $shown
-- ds.markdown:
Markup can be used to implement event handling as well.
/-- ftd.text: Click {orange: me}
color: $inherited.colors.text
/-- ftd.color orange-color:
light: orange
dark: orange
/-- ftd.text: Show/Hide orange background color
background.solid if {$shown}: $orange-color
color if $shown: $inherited.colors.text-strong
$on-click$: $ftd.set-bool($a = $shown, v = false)
border-radius.px: 2
padding.px: 3
-- end: my-ds.page