generated from fastn-stack/fastn-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
note.ftd
120 lines (76 loc) · 2.69 KB
/
note.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
-- import: fifthtry.github.io/package-doc/doc as pd
-- bling.page: `note` and it's Usage
`-- note` can be used as part of blog posts.
-- pd.package: `note` and it's Usage
name: fifthtry.github.io/bling
`note` is a new conversation experience via using `FTD` lang:
To use `note` on your web package, add below into `FASTN.ftd` file:
-- cb.code:
lang: ftd
\-- fastn.dependency: fifthtry.github.io/bling
\-- fastn.auto-import: bling/note as note
-- tf.markdown:
Once you add above lines into your web package, add `note` into your `.ftd`
files:
-- cb.code: Example code for `-- note`
lang: ftd
\-- note.note: This is your Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
-- tf.h3: Output of above basic example:
-- note: This is your Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
-- tf.h3: Advanced usage of `-- note`:
-- cb.code: Advanced example code for `-- note`
lang: ftd
\-- note.note: This is your Title
Lorem ipsum dolor sit amet, {bold: consectetur adipiscing} elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud {bold: exercitation ullamco laboris nisi ut.}
-- tf.h3: Output of above advanced example:
-- note: This is your Title
Lorem ipsum dolor sit amet, {bold: consectetur adipiscing} elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud {bold: exercitation ullamco laboris nisi ut.}
-- end: bling.page
-- component note:
caption title:
optional body body:
optional string emoji: 📝
optional ftd.color backgroundcolor: $inherited.colors.text
optional ftd.color bordercolor: $inherited.colors.text-strong
-- ftd.row:
padding-vertical.px: 16
padding-horizontal.px: 16
background.solid: $note.backgroundcolor
border-color: $note.bordercolor
border-width.px: 1
spacing.fixed.px: 16
width: auto
border-radius.px: 6
max-width.fixed.px: 800
align-self: center
-- ftd.column:
-- ftd.text: $note.emoji
role: $inherited.types.heading-medium
-- end: ftd.column
-- ftd.column:
width: fill-container
spacing.fixed.px: 8
-- ftd.text: $note.title
role: $inherited.types.button-medium
color: $inherited.colors.background.step-1
-- ftd.text:
text: $note.body
role: $inherited.types.fine-print
color: $inherited.colors.background.step-1
/-- ftd.text bold: color
role: $inherited.types.button-medium
border-bottom.px: 1
border-style: dashed
-- end: ftd.column
-- end: ftd.row
-- end: note