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

Commit db67b30

Browse files
hiroppyhiroppy
committed
feat(client): add assitant for development
1 parent 2dda8ec commit db67b30

File tree

5 files changed

+233
-15
lines changed

5 files changed

+233
-15
lines changed

‎packages/client/assets/style/code.css

+11-15
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,23 @@ code {
1313
font-family: 'Source Code Pro', monospace;
1414
}
1515

16-
section {
17-
& > pre[class*='language-'] {
18-
margin: 0.5em auto;
16+
pre[class*='language-'] {
17+
margin: 0.5em auto !important;
18+
}
1919

20-
& > code[class*='language-'] {
21-
& .token.operator {
22-
background: inherit;
23-
}
24-
}
25-
}
20+
.token.operator {
21+
background: inherit;
2622
}
2723

28-
section > pre > code[class*='language-'],
29-
section > pre[class*='language-'] {
30-
font-size: 1.4rem;
24+
pre > code[class*='language-'],
25+
pre[class*='language-'] {
26+
font-size: 1.4rem !important;
3127
line-height: 1.2;
3228
}
3329

3430
@media screen and (min-width: 768px) {
35-
section > pre > code[class*='language-'],
36-
section > pre[class*='language-'] {
37-
font-size: 2rem;
31+
pre > code[class*='language-'],
32+
pre[class*='language-'] {
33+
font-size: 2rem !important;
3834
}
3935
}

‎packages/client/package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/client/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,8 @@
3232
"screenfull": "^5.1.0",
3333
"vm-browserify": "^1.1.2",
3434
"webslides": "^1.5.0"
35+
},
36+
"devDependencies": {
37+
"react-accessible-accordion": "^3.3.3"
3538
}
3639
}

‎packages/client/src/components/Assistant.js

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import React from 'react';
2+
import {
3+
Accordion,
4+
AccordionItem,
5+
AccordionItemHeading,
6+
AccordionItemButton,
7+
AccordionItemPanel,
8+
} from 'react-accessible-accordion';
9+
import 'react-accessible-accordion/dist/fancy-example.css';
10+
11+
const outerCss = {
12+
background: '#f5f5f5',
13+
fontSize: '16px',
14+
right: 0,
15+
margin: 12,
16+
position: 'absolute',
17+
width: 400,
18+
};
19+
20+
const buttonCss = {
21+
padding: '8px 18px',
22+
};
23+
24+
const itemCss = {
25+
padding: '4px 8px',
26+
};
27+
28+
const hrCss = {
29+
margin: '4px 0',
30+
};
31+
32+
const smallTitleCss = {
33+
borderBottom: '1px solid #ccc',
34+
marginBottom: '4px',
35+
};
36+
37+
const A = ({ url, children }) => (
38+
<a href={url} target="_blank" rel="noreferrer" style={{ color: '#7bb7fa' }}>
39+
{children}
40+
</a>
41+
);
42+
43+
const Item = ({ title, children }) => (
44+
<AccordionItem>
45+
<AccordionItemHeading>
46+
<AccordionItemButton style={buttonCss}>{title}</AccordionItemButton>
47+
</AccordionItemHeading>
48+
<AccordionItemPanel style={itemCss}>{children}</AccordionItemPanel>
49+
</AccordionItem>
50+
);
51+
52+
const SmallTitle = ({ children }) => <p style={smallTitleCss}>{children}</p>;
53+
54+
const Lines = ({ items }) => (
55+
<>
56+
{items.map(({ title, content, url }) => (
57+
<div key={title} style={{ marginBottom: '6px' }}>
58+
{title}:<A url={url}>{content}</A>
59+
</div>
60+
))}
61+
</>
62+
);
63+
64+
export const Assistant = () => (
65+
<div style={outerCss}>
66+
<Accordion allowMultipleExpanded allowZeroExpanded>
67+
<AccordionItem>
68+
<AccordionItemHeading>
69+
<AccordionItemButton style={buttonCss}>
70+
Reference (only development env)
71+
</AccordionItemButton>
72+
</AccordionItemHeading>
73+
<AccordionItemPanel style={itemCss}>
74+
<Item title="CSS Classes">
75+
<SmallTitle>WebSlides</SmallTitle>
76+
<Lines
77+
items={[
78+
{
79+
title: 'Grid System',
80+
content: <code>{`.gird > .column`}</code>,
81+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=15',
82+
},
83+
{
84+
title: 'Sidebar + Main',
85+
content: <code>{`.gird.sm > .column`}</code>,
86+
url: 'https://webslides.tv/demos/components#slide=11',
87+
},
88+
{
89+
title: 'Main + Sidebar',
90+
content: <code>{`.gird.ms > .column`}</code>,
91+
url: 'https://webslides.tv/demos/components#slide=12',
92+
},
93+
{
94+
title: 'Position',
95+
content: <code>.content-left|right|top|bottom</code>,
96+
url: 'https://webslides.tv/demos/components#slide=14',
97+
},
98+
{
99+
title: 'Animation',
100+
content: <code>.fadeIn, .zoomIn</code>,
101+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=33',
102+
},
103+
{
104+
title: 'Fullscreen',
105+
content: <code>.fullscreen</code>,
106+
url: 'https://webslides.tv/demos/components#slide=76',
107+
},
108+
{
109+
title: 'Card',
110+
content: <code>.card-50</code>,
111+
url: 'https://webslides.tv/demos/components#slide=76',
112+
},
113+
]}
114+
/>
115+
<A url="https://webslides.tv/demos/components#slide=2">Others</A>
116+
<hr style={hrCss} />
117+
<SmallTitle>Fusuma</SmallTitle>
118+
<code>{`<!-- sectionTitle -->`}</code>:
119+
<A url="https://hiroppy.github.io/fusuma/intro/#slide=16">
120+
<code>.section-title</code>
121+
</A>
122+
<br />
123+
Code:
124+
<A url="https://hiroppy.github.io/fusuma/intro/#slide=15">
125+
<code>{`pre > code[class*='language-']`}</code>
126+
</A>
127+
<br />
128+
</Item>
129+
<Item title="Slide Syntaxes">
130+
<Lines
131+
items={[
132+
{
133+
title: 'Splitting Slides',
134+
content: <code>{`---`}</code>,
135+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=13',
136+
},
137+
]}
138+
/>
139+
<hr style={hrCss} />
140+
<SmallTitle>
141+
HTML Comments<code>{`<!-- -->`}</code>
142+
</SmallTitle>
143+
<Lines
144+
items={[
145+
{
146+
title: 'Adding Classes',
147+
content: <code>{`classes: title`}</code>,
148+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=14',
149+
},
150+
{
151+
title: 'Creating div Tag',
152+
content: <code>{`block-start: ?className`}</code>,
153+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=15',
154+
},
155+
{
156+
title: 'Closing div Tag',
157+
content: <code>block-end</code>,
158+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=15',
159+
},
160+
{
161+
title: 'Adding Title to Sidebar',
162+
content: <code>{`sectionTitle: title`}</code>,
163+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=16',
164+
},
165+
{
166+
title: 'Adding Agenda UI via SectionTitle',
167+
content: <code>contents</code>,
168+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=17',
169+
},
170+
{
171+
title: 'Adding Speaker Note',
172+
content: <code>note hello~~~~</code>,
173+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=18',
174+
},
175+
{
176+
title: 'Executing JavaScript Code',
177+
content: <code>executable-code</code>,
178+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=19',
179+
},
180+
{
181+
title: 'Capturing Screen Contents',
182+
content: <code>screen</code>,
183+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=20',
184+
},
185+
{
186+
title: 'Generating QR Code',
187+
content: <code>{`qr: https://~~~`}</code>,
188+
url: 'https://hiroppy.github.io/fusuma/intro/#slide=20', // TODO: fix
189+
},
190+
]}
191+
/>
192+
</Item>
193+
</AccordionItemPanel>
194+
</AccordionItem>
195+
</Accordion>
196+
</div>
197+
);

‎packages/client/src/entryPoints/Client.js

+16
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,19 @@ createBody(slidesInfo.slides);
2323
if (process.env.TARGET_BLANK) {
2424
setTargetBlank();
2525
}
26+
27+
if (process.env.NODE_ENV !== 'production') {
28+
(async () => {
29+
// for tree shaking
30+
const { Assistant } = await import('../components/Assistant');
31+
const el = document.createElement('div');
32+
33+
el.style.position = 'absolute';
34+
el.style.top = 0;
35+
el.style.width = '100%';
36+
el.setAttribute('id', 'reference');
37+
document.body.appendChild(el);
38+
39+
render(<Assistant />, document.getElementById('reference'));
40+
})();
41+
}

0 commit comments

Comments
 (0)