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

Commit cb8bcdb

Browse files
hiroppyhiroppy
committed
feat(client): add many options
1 parent de5ec67 commit cb8bcdb

File tree

17 files changed

+127
-131
lines changed

17 files changed

+127
-131
lines changed

‎packages/client/src/components/ContentView/Base.js

+3-38
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React, { useEffect, memo } from 'react';
2-
import classnames from 'classnames';
3-
import SwiperCore, { A11y, Navigation, Pagination, Keyboard, HashNavigation } from 'swiper';
4-
import { Swiper, SwiperSlide } from 'swiper/react';
2+
import { SlideCore } from '../SlideCore';
53
import { createVMEnv } from '../../utils/createVMEnv';
64
import { getSearchParams } from '../../utils/getSearchParams';
75
import { useMermaid } from '../../hooks/useMermaid';
86

9-
const articleClass = process.env.IS_VERTICAL ? 'vertical' : undefined;
10-
117
// don't move to useEffect
128
if (!getSearchParams().get('ssr')) {
139
// don't run when creating html
1410
import(/* webpackPreload: true */ '../../setup/prism');
1511
}
1612

17-
SwiperCore.use([Pagination, A11y, Keyboard, HashNavigation]);
18-
1913
export const Base = memo(
20-
({ slides, onChangeSlideIndex, hash, showIndex }) => {
14+
({ slides, onChangeSlideIndex, hash }) => {
2115
const [mermaid] = useMermaid();
2216

2317
if (import.meta.webpackHot) {
@@ -42,36 +36,7 @@ export const Base = memo(
4236
}
4337
}, []);
4438

45-
return (
46-
<Swiper
47-
loop={false}
48-
speed={350}
49-
allowTouchMove={/* TODO: only for mobile */ false}
50-
spaceBetween={50}
51-
slidesPerView={1}
52-
pagination={{ clickable: true }}
53-
keyboard={{ enabled: true }}
54-
hashNavigation={{
55-
watchState: true,
56-
}}
57-
onSlideChange={({ realIndex }) => onChangeSlideIndex(realIndex)}
58-
>
59-
{slides.map(({ slide: Slide, fusumaProps }, i) => (
60-
<SwiperSlide
61-
key={i /* mdx-loaderでhash作成 */}
62-
className={classnames(
63-
fusumaProps.classes,
64-
fusumaProps.sectionTitle ? 'section-title' : undefined
65-
)}
66-
data-hash={`slide-${i}`}
67-
>
68-
<div className="slide-box">
69-
<Slide />
70-
</div>
71-
</SwiperSlide>
72-
))}
73-
</Swiper>
74-
);
39+
return <SlideCore slides={slides} onChangeSlideIndex={onChangeSlideIndex} />;
7540
},
7641
(prevProps, nextProps) => prevProps.hash === nextProps.hash
7742
);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { MdFirstPage, MdLastPage, MdFullscreen, MdAirplay } from 'react-icons/md
77
const remoteOriginUrl = process.env.REMOTE_ORIGIN_URL;
88
const url = process.env.URL || window.location.href.split('#')[0];
99
const sns = process.env.SNS;
10-
const title = process.env.TITLE || '';
10+
const title = process.env.TITLE;
1111
const formatStr = (num) => `${num}`.padStart(2, '0');
1212

1313
export const Sidebar = memo(

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

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import classnames from 'classnames';
3+
import SwiperCore, {
4+
A11y,
5+
Pagination,
6+
Keyboard,
7+
HashNavigation,
8+
EffectCube,
9+
EffectFlip,
10+
EffectFade,
11+
} from 'swiper';
12+
import { Swiper, SwiperSlide } from 'swiper/react';
13+
14+
const swiperComponents = [A11y, Keyboard, HashNavigation];
15+
16+
if (process.env.UI.PAGINATION) {
17+
swiperComponents.push(Pagination);
18+
}
19+
20+
if (process.env.UI.EFFECT === 'fade') {
21+
swiperComponents.push(EffectFade);
22+
} else if (process.env.UI.EFFECT === 'cube') {
23+
swiperComponents.push(EffectCube);
24+
} else if (process.env.UI.EFFECT === 'flip') {
25+
swiperComponents.push(EffectFlip);
26+
}
27+
28+
SwiperCore.use(swiperComponents);
29+
30+
export const SlideCore = ({ slides, onChangeSlideIndex }) => (
31+
<Swiper
32+
effect={process.env.UI.EFFECT}
33+
direction={process.env.VERTICAL === 'true' ? 'vertical' : 'horizontal'}
34+
loop={/*TODO: respect to params to generate pdf */ process.env.LOOP}
35+
speed={350}
36+
allowTouchMove={/* TODO: only for mobile */ false}
37+
slidesPerView={1}
38+
keyboard={{ enabled: true }}
39+
hashNavigation={{
40+
watchState: true,
41+
}}
42+
pagination={{
43+
...(process.env.UI.PAGINATION
44+
? {
45+
type: process.env.UI.PAGINATION,
46+
clickable: true,
47+
}
48+
: {}),
49+
}}
50+
onSlideChange={({ realIndex }) => onChangeSlideIndex(realIndex)}
51+
>
52+
{slides.map(({ slide: Slide, fusumaProps }, i) => (
53+
<SwiperSlide
54+
key={i /* mdx-loaderでhash作成 */}
55+
className={classnames(
56+
'slide-background',
57+
fusumaProps.classes,
58+
fusumaProps.sectionTitle ? 'section-title' : undefined
59+
)}
60+
data-hash={`slide-${i + 1}`}
61+
>
62+
<div className="slide-box slide-background">
63+
<Slide />
64+
</div>
65+
</SwiperSlide>
66+
))}
67+
</Swiper>
68+
);

‎packages/client/src/components/external/Block.js

-3
This file was deleted.

‎packages/client/src/components/external/Card.js

-17
This file was deleted.

‎packages/client/src/components/external/Code.js

-7
This file was deleted.

‎packages/client/src/components/external/Flex.js

-10
This file was deleted.

‎packages/client/src/components/external/Img.js

-8
This file was deleted.

‎packages/client/src/components/external/Text.js

Whitespace-only changes.

‎packages/client/src/hooks/useSidebarComponent.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function useSidebarComponent(mode) {
88
(async () => {
99
if (mode === 'common') {
1010
const params = getSearchParams();
11-
const isSidebar = params.get('sidebar') !== 'false' || process.env.SIDEBAR === 'true';
11+
const isSidebar = params.get('sidebar') !== 'false' || process.env.UI.SIDEBAR === 'true';
1212

1313
if (isSidebar) {
1414
const { Sidebar: SidebarComponent } = await import(

‎packages/client/src/index.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +0,0 @@
1-
export { Block } from './components/external/Block';
2-
export { Flex } from './components/external/Flex';
3-
export { Card } from './components/external/Card';
4-
export { Code } from './components/external/Code';
5-
export { Img } from './components/external/Img';

‎packages/fusuma/src/configs/fusumarc.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,17 @@ const config = {
1818
title: null,
1919
thumbnail: null,
2020
description: null,
21-
sns: ['twitter'], // twitter, hatena
21+
sns: ['twitter'], // twitter | hatena
2222
},
2323
slide: {
24-
loop: true,
25-
sidebar: true,
24+
loop: false,
25+
vertical: false,
2626
targetBlank: true,
27-
showIndex: true,
28-
isVertical: false,
27+
ui: {
28+
sidebar: true,
29+
pagination: null, // bullets | progressbar | fraction
30+
effect: null, // fade | cube | flip
31+
},
2932
// https://github.com/mAAdhaTTah/babel-plugin-prismjs#configuring-the-plugin
3033
code: {
3134
languages: ['javascript'],

‎packages/fusuma/src/configs/templates/fusumarc.yml

+5-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ meta:
55
siteName:
66
sns: ['twitter']
77
slide:
8-
loop: true
9-
sidebar: true
10-
targetBlank: true
11-
showIndex: true
8+
loop: false
9+
ui:
10+
sidebar: true
11+
pagination: # bullets | progressbar | fraction
12+
effect: # fade | cube | flip
1213
code:
1314
plugins: []
1415
theme: default

‎packages/fusuma/src/configs/templates/style.css

+1-7
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,14 @@ html {
99
font-size: 62.5%;
1010
}
1111

12-
body {
12+
.slide-background {
1313
/* set the default background */
1414
background: var(--color-white);
1515

1616
/* set the default font-color */
1717
color: var(--color-black);
1818
}
1919

20-
/* code blocks */
21-
code[class*='language-'],
22-
pre[class*='language-'] {
23-
font-size: 2rem;
24-
}
25-
2620
a {
2721
/* set the default link color */
2822
color: var(--color-cyan);

‎packages/fusuma/src/webpack/webpack.config.js

+33-21
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,18 @@ module.exports = (
2222
) => {
2323
const entry = ['regenerator-runtime', join(clientBasePath, '/src/entryPoints/Client.js')];
2424
const { url, description, thumbnail, siteName, sns, title } = meta;
25-
const { sidebar, targetBlank, showIndex, isVertical, loop, code, chart, math } = slide;
25+
const {
26+
targetBlank,
27+
ui: { sidebar, pagination, effect },
28+
loop,
29+
vertical,
30+
code,
31+
chart,
32+
math,
33+
} = slide;
2634
const { js: jsPath, css: cssPath, webpack: webpackPath } = fileExtends;
2735
const { useCache, publicPath } = build;
28-
const { basePath, remoteOrigin, htmlBody = '', buildStage, outputDirPath } = internal;
36+
const { basePath, remoteOrigin, htmlBody = '', outputDirPath } = internal;
2937
const config = (() => {
3038
switch (type) {
3139
case 'production':
@@ -123,25 +131,29 @@ module.exports = (
123131
},
124132
plugins: [
125133
new webpack.DefinePlugin({
126-
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
127-
'process.env.JS_PATH': JSON.stringify(join(basePath, jsPath || '')),
128-
'process.env.CSS_PATH': JSON.stringify(join(basePath, cssPath || '')),
129-
'process.env.SLIDE_PATH': JSON.stringify(join(basePath, 'slides')),
130-
'process.env.URL': JSON.stringify(url),
131-
'process.env.SNS': JSON.stringify(sns),
132-
'process.env.SIDEBAR': JSON.stringify(sidebar === undefined ? true : sidebar),
133-
'process.env.TITLE': JSON.stringify(title || 'slide'),
134-
'process.env.BASE_PATH': JSON.stringify(basePath),
135-
'process.env.REMOTE_ORIGIN_URL': JSON.stringify(remoteOrigin),
136-
'process.env.TARGET_BLANK': JSON.stringify(targetBlank),
137-
'process.env.SHOW_INDEX': JSON.stringify(showIndex),
138-
'process.env.IS_VERTICAL': JSON.stringify(isVertical),
139-
'process.env.LOOP': JSON.stringify(loop),
140-
'process.env.IS_LIVE': JSON.stringify(server.isLive),
141-
'process.env.SERVER_PORT': JSON.stringify(server.port),
142-
'process.env.SEARCH_KEYWORD': JSON.stringify(server.keyword),
143-
'process.env.CHART': JSON.stringify(chart),
144-
'process.env.BUILD_STAGE': JSON.stringify(buildStage),
134+
'process.env': {
135+
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
136+
JS_PATH: JSON.stringify(join(basePath, jsPath || '')),
137+
CSS_PATH: JSON.stringify(join(basePath, cssPath || '')),
138+
SLIDE_PATH: JSON.stringify(join(basePath, 'slides')),
139+
URL: JSON.stringify(url),
140+
SNS: JSON.stringify(sns),
141+
TITLE: JSON.stringify(title || 'slide'),
142+
BASE_PATH: JSON.stringify(basePath),
143+
REMOTE_ORIGIN_URL: JSON.stringify(remoteOrigin),
144+
TARGET_BLANK: JSON.stringify(targetBlank),
145+
LOOP: JSON.stringify(loop),
146+
VERTICAL: JSON.stringify(vertical),
147+
IS_LIVE: JSON.stringify(server.isLive),
148+
SERVER_PORT: JSON.stringify(server.port),
149+
SEARCH_KEYWORD: JSON.stringify(server.keyword),
150+
CHART: JSON.stringify(chart),
151+
UI: {
152+
SIDEBAR: JSON.stringify(sidebar),
153+
PAGINATION: JSON.stringify(pagination),
154+
EFFECT: JSON.stringify(effect),
155+
},
156+
},
145157
}),
146158
new HtmlWebpackPlugin({
147159
url,

‎samples/debug/.fusumarc.yml

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ meta:
55
siteName: hiroppy.me
66
sns: ['twitter']
77
slide:
8-
loop: false
9-
sidebar: true
108
targetBlank: true
11-
showIndex: true
12-
isVertical: false
9+
ui:
10+
sidebar: true
11+
pagination: bullets
1312
code:
1413
languages:
1514
- javascript

‎samples/debug/style.css

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
src: url('./assets/StratumNo1.ttf');
44
}
55

6+
.slide-background {
7+
background: #f5f5f5;
8+
}
9+
610
.file-loader-font {
711
font-family: Stratum;
812
font-size: 2rem;

0 commit comments

Comments
 (0)