Skip to content
This repository was archived by the owner on Dec 5, 2024. It is now read-only.

Commit 8da3771

Browse files
committed
feat(client): improve assistant
1 parent 89205f2 commit 8da3771

File tree

7 files changed

+72
-54
lines changed

7 files changed

+72
-54
lines changed

packages/client/assets/style/customize.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
z-index: 2;
4141
}
4242

43-
.slide-background-div {
43+
.slide-background {
4444
position: absolute;
4545
top: 0;
4646
left: 0;

packages/client/assets/style/variables.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
--base-font-size: 2.4rem;
66
--base-font-weight: 300;
77
--base-align: center;
8-
--base-max-size: 1280px;
8+
--base-max-width: 1280px;
99
--base-outer-margin: 24px;
1010

1111
--h1-font-size: 5.6rem;

packages/client/src/components/Assistant.js

+44-44
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const buttonCss = {
2323

2424
const itemCss = {
2525
padding: '4px 8px',
26+
color: '#3d3738',
2627
};
2728

2829
const hrCss = {
@@ -35,7 +36,12 @@ const smallTitleCss = {
3536
};
3637

3738
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+
>
3945
{children}
4046
</a>
4147
);
@@ -54,8 +60,10 @@ const SmallTitle = ({ children }) => <p style={smallTitleCss}>{children}</p>;
5460
const Lines = ({ items }) => (
5561
<>
5662
{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>}
5967
</div>
6068
))}
6169
</>
@@ -77,7 +85,7 @@ export const Assistant = () => (
7785
{
7886
title: 'Grid System',
7987
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',
8189
},
8290
{
8391
title: 'Sidebar + Main',
@@ -90,95 +98,87 @@ export const Assistant = () => (
9098
url: null,
9199
},
92100
{
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,
96104
},
97105
{
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,
101109
},
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={[
121110
{
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>,
125113
},
126114
]}
127115
/>
128-
<hr style={hrCss} />
116+
</Item>
117+
<Item title="Slide Syntaxes">
129118
<SmallTitle>
130119
HTML Comments<code>{`<!-- -->`}</code>
131120
</SmallTitle>
132121
<Lines
133122
items={[
134123
{
135124
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',
138132
},
139133
{
140134
title: 'Creating div Tag',
141135
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',
143137
},
144138
{
145139
title: 'Closing div Tag',
146140
content: <code>block-end</code>,
147-
url: 'https://hiroppy.github.io/fusuma/intro/#slide=15',
148141
},
149142
{
150143
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',
153146
},
154147
{
155148
title: 'Adding Agenda UI via section-title',
156149
content: <code>contents</code>,
157-
url: 'https://hiroppy.github.io/fusuma/intro/#slide=17',
150+
url: 'https://hiroppy.github.io/fusuma/intro/#slide-11',
158151
},
159152
{
160153
title: 'Adding Speaker Note',
161154
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',
163156
},
164157
{
165158
title: 'Executing JavaScript Code',
166159
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',
168161
},
169162
{
170163
title: 'Capturing Screen Contents',
171164
content: <code>screen</code>,
172-
url: 'https://hiroppy.github.io/fusuma/intro/#slide=20',
165+
url: 'https://hiroppy.github.io/fusuma/intro/#slide-14',
173166
},
174167
{
175168
title: 'Generating QR Code',
176169
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',
178171
},
179172
]}
180173
/>
181174
</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>
182182
</AccordionItemPanel>
183183
</AccordionItem>
184184
</Accordion>

packages/client/src/components/SlideCore.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,18 @@ import { getSearchParams } from '../utils/getSearchParams';
1515
const swiperComponents = [A11y, Keyboard, HashNavigation];
1616

1717
if (process.env.UI.PAGINATION) {
18-
if (getSearchParams().has('pagination')) {
18+
if (!getSearchParams().has('pagination')) {
19+
swiperComponents.push(Pagination);
20+
import('swiper/components/pagination/pagination.min.css');
21+
} else {
1922
if (getSearchParams().get('pagination') !== 'false') {
2023
swiperComponents.push(Pagination);
2124
import('swiper/components/pagination/pagination.min.css');
2225
}
23-
} else {
24-
swiperComponents.push(Pagination);
25-
import('swiper/components/pagination/pagination.min.css');
2626
}
2727
}
2828

2929
if (process.env.UI.EFFECT === 'fade') {
30-
console.log('zzzz');
3130
swiperComponents.push(EffectFade);
3231
import('swiper/components/effect-fade/effect-fade.min.css');
3332
} else if (process.env.UI.EFFECT === 'cube') {
@@ -61,15 +60,14 @@ export const SlideCore = ({ slides, onChangeSlideIndex }) => (
6160
: {}),
6261
}}
6362
onSlideChange={({ realIndex }) => onChangeSlideIndex(realIndex)}
64-
className="slide-background"
6563
>
6664
{slides.map(({ slide: Slide, fusumaProps: { classes, sectionTitle, background } }, i) => (
6765
<SwiperSlide
6866
key={i /* mdx-loaderでhash作成 */}
6967
className={classnames(classes, sectionTitle ? 'section-title' : undefined)}
7068
data-hash={`slide-${i + 1}`}
7169
>
72-
{background && <div className="slide-background-div" style={background} />}
70+
{background && <div className="slide-background" style={background} />}
7371
<div className="slide-internal-box">
7472
<Slide />
7573
</div>

packages/client/src/utils/createSlidesProps.js

+6
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@ export function createSlidesProps(slides) {
3434
return { backgroundColor: backgroundsArr[i] };
3535
})();
3636

37+
if (props.classes) {
38+
props.classes = Array.isArray(props.classes)
39+
? props.classes[0].split(',') // for HMR
40+
: props.classes.split(',');
41+
}
42+
3743
return {
3844
slide: props.contents ? ToC({ list: res.contentsList }) : slide,
3945
fusumaProps: {

samples/intro/assets/themes.png

-233 KB
Loading

samples/intro/slides/04-slide.md

+15-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ You can split slides within the same file by using `---` syntax.
3030
## Adding Classes
3131

3232
```markdown
33-
<!-- classes: title -->
33+
<!-- classes: title, main -->
3434

3535
## Hello
3636
```
@@ -39,6 +39,10 @@ You can split slides within the same file by using `---` syntax.
3939
.title {
4040
color: #3498db;
4141
}
42+
43+
.main {
44+
background: #f5f5f5;
45+
}
4246
```
4347

4448
<br />
@@ -208,3 +212,13 @@ Your screen captures on the slide, but this feature can run only in Presenter Mo
208212

209213
<!-- block-end -->
210214
<!-- block-end -->
215+
216+
---
217+
218+
## Generating QR Code
219+
220+
```md
221+
<!-- qr: https://github.com/hiroppy/fusuma -->
222+
```
223+
224+
<!-- qr: https://github.com/hiroppy/fusuma -->

0 commit comments

Comments
 (0)