@@ -23,6 +23,7 @@ const buttonCss = {
23
23
24
24
const itemCss = {
25
25
padding : '4px 8px' ,
26
+ color : '#3d3738' ,
26
27
} ;
27
28
28
29
const hrCss = {
@@ -35,7 +36,12 @@ const smallTitleCss = {
35
36
} ;
36
37
37
38
const A = ( { url, children } ) => (
38
- < a href = { url } target = "_blank" rel = "noreferrer" style = { { color : '#7bb7fa' } } >
39
+ < a
40
+ href = { url }
41
+ target = "_blank"
42
+ rel = "noreferrer"
43
+ style = { { color : '#2954a1' , marginLeft : '16px' , marginTop : '4px' , display : 'block' } }
44
+ >
39
45
{ children }
40
46
</ a >
41
47
) ;
@@ -54,8 +60,10 @@ const SmallTitle = ({ children }) => <p style={smallTitleCss}>{children}</p>;
54
60
const Lines = ( { items } ) => (
55
61
< >
56
62
{ items . map ( ( { title, content, url } ) => (
57
- < div key = { title } style = { { marginBottom : '6px' } } >
58
- { title } :< A url = { url } > { content } </ A >
63
+ < div key = { title } style = { { marginBottom : '8px' } } >
64
+ < span style = { { fontWeight : 500 } } > - { title } </ span >
65
+ < br />
66
+ { content && < A url = { url } > { content } </ A > }
59
67
</ div >
60
68
) ) }
61
69
</ >
@@ -77,7 +85,7 @@ export const Assistant = () => (
77
85
{
78
86
title : 'Grid System' ,
79
87
content : < code > { `.gird > .column` } </ code > ,
80
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=15 ' ,
88
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-8 ' ,
81
89
} ,
82
90
{
83
91
title : 'Sidebar + Main' ,
@@ -90,95 +98,87 @@ export const Assistant = () => (
90
98
url : null ,
91
99
} ,
92
100
{
93
- title : 'Position ' ,
94
- content : < code > .content-left|right|top|bottom </ code > ,
95
- url : 'https://webslides.tv/demos/components#slide=14' ,
101
+ title : 'Section Title ' ,
102
+ content : < code > { `.section-title` } </ code > ,
103
+ url : null ,
96
104
} ,
97
105
{
98
- title : 'Fullscreen ' ,
99
- content : < code > .fullscreen </ code > ,
100
- url : 'https://webslides.tv/demos/components#slide=76' ,
106
+ title : 'Slide Container ' ,
107
+ content : < code > { `.swiper-slide` } </ code > ,
108
+ url : null ,
101
109
} ,
102
- ] }
103
- />
104
- < A url = "https://webslides.tv/demos/components#slide=2" > Others</ A >
105
- < hr style = { hrCss } />
106
- < SmallTitle > Fusuma</ SmallTitle >
107
- < code > { `<!-- section-title -->` } </ code > :
108
- < A url = "https://hiroppy.github.io/fusuma/intro/#slide=16" >
109
- < code > .section-title</ code >
110
- </ A >
111
- < br />
112
- Code:
113
- < A url = "https://hiroppy.github.io/fusuma/intro/#slide=15" >
114
- < code > { `pre > code[class*='language-']` } </ code >
115
- </ A >
116
- < br />
117
- </ Item >
118
- < Item title = "Slide Syntaxes" >
119
- < Lines
120
- items = { [
121
110
{
122
- title : 'Splitting Slides' ,
123
- content : < code > { `---` } </ code > ,
124
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=13' ,
111
+ title : 'Slide Background' ,
112
+ content : < code > { `.slide-background` } </ code > ,
125
113
} ,
126
114
] }
127
115
/>
128
- < hr style = { hrCss } />
116
+ </ Item >
117
+ < Item title = "Slide Syntaxes" >
129
118
< SmallTitle >
130
119
HTML Comments< code > { `<!-- -->` } </ code >
131
120
</ SmallTitle >
132
121
< Lines
133
122
items = { [
134
123
{
135
124
title : 'Adding Classes' ,
136
- content : < code > { `classes: title` } </ code > ,
137
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=14' ,
125
+ content : < code > { `classes: title, main` } </ code > ,
126
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-7' ,
127
+ } ,
128
+ {
129
+ title : 'Changing Background' ,
130
+ content : < code > { `background: '../assets/bg.png'` } </ code > ,
131
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-9' ,
138
132
} ,
139
133
{
140
134
title : 'Creating div Tag' ,
141
135
content : < code > { `block-start: ?className` } </ code > ,
142
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=15 ' ,
136
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-8 ' ,
143
137
} ,
144
138
{
145
139
title : 'Closing div Tag' ,
146
140
content : < code > block-end</ code > ,
147
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=15' ,
148
141
} ,
149
142
{
150
143
title : 'Adding Title to Sidebar' ,
151
- content : < code > { `section-title: title ` } </ code > ,
152
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=16 ' ,
144
+ content : < code > { `section-title: hey! ` } </ code > ,
145
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-10 ' ,
153
146
} ,
154
147
{
155
148
title : 'Adding Agenda UI via section-title' ,
156
149
content : < code > contents</ code > ,
157
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=17 ' ,
150
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-11 ' ,
158
151
} ,
159
152
{
160
153
title : 'Adding Speaker Note' ,
161
154
content : < code > note hello~~~~</ code > ,
162
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=18 ' ,
155
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-12 ' ,
163
156
} ,
164
157
{
165
158
title : 'Executing JavaScript Code' ,
166
159
content : < code > executable-code</ code > ,
167
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=19 ' ,
160
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-13 ' ,
168
161
} ,
169
162
{
170
163
title : 'Capturing Screen Contents' ,
171
164
content : < code > screen</ code > ,
172
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=20 ' ,
165
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-14 ' ,
173
166
} ,
174
167
{
175
168
title : 'Generating QR Code' ,
176
169
content : < code > { `qr: https://~~~` } </ code > ,
177
- url : 'https://hiroppy.github.io/fusuma/intro/#slide=20' , // TODO: fix
170
+ url : 'https://hiroppy.github.io/fusuma/intro/#slide-15' ,
178
171
} ,
179
172
] }
180
173
/>
181
174
</ Item >
175
+ < Item title = "Links" >
176
+ < A url = "https://github.com/hiroppy/fusuma/blob/master/packages/client/assets/style/variables.css" >
177
+ - CSS Variables
178
+ </ A >
179
+ < A url = "https://hiroppy.github.io/fusuma" > - Official Site</ A >
180
+ < A url = "https://github.com/hiroppy/fusuma" > - Repository</ A >
181
+ </ Item >
182
182
</ AccordionItemPanel >
183
183
</ AccordionItem >
184
184
</ Accordion >
0 commit comments