From 7125e35103dc48931c6900b84a5a543b1346752f Mon Sep 17 00:00:00 2001 From: Corentin Risselin Date: Tue, 7 Jan 2020 15:53:25 +0900 Subject: [PATCH] Overal improvement --- assets/theme/dark.css | 12 ------ assets/theme/light.css | 12 ------ index.html | 7 ++-- package.json | 2 +- server.js | 2 +- src/actions.js | 2 +- src/index.jsx | 90 ++++++++++++++++++++++++------------------ src/lang/en.json | 6 ++- src/lang/jp.json | 6 ++- src/main.css | 62 +++++++++++++++++++++++++++++ src/main.jsx | 41 +++++++++++++++---- src/svg.jsx | 13 ++++-- src/svg_toggle.jsx | 22 +++++++++-- webpack.dev.js | 4 +- webpack.prod.js | 4 +- 15 files changed, 199 insertions(+), 86 deletions(-) delete mode 100644 assets/theme/dark.css delete mode 100644 assets/theme/light.css diff --git a/assets/theme/dark.css b/assets/theme/dark.css deleted file mode 100644 index 68f312d..0000000 --- a/assets/theme/dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root -{ - --main-bg-color: #21262b; - --main-fg-color: #bbb; - --lighter-bg-color: #31363b; - --lighter-fg-color: #ccc; - --highlight-bg-color: #41464b; - --highlight-fg-color: #ddd; - - --main-primary-color: hsl(213, 35%, 65%); - --light-primary-color: hsl(213, 35%, 45%); -} \ No newline at end of file diff --git a/assets/theme/light.css b/assets/theme/light.css deleted file mode 100644 index ff0aaa3..0000000 --- a/assets/theme/light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root -{ - --main-bg-color: #ddd; - --main-fg-color: #21262b; - --lighter-bg-color: #ccc; - --lighter-fg-color: #31363b; - --highlight-bg-color: #bbb; - --highlight-fg-color: #41464b; - - --main-primary-color: hsl(213, 35%, 45%); - --light-primary-color: hsl(213, 35%, 65%); -} \ No newline at end of file diff --git a/index.html b/index.html index ea9f129..ea51ef1 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,15 @@ - - Inferno - Hello World + AYO Inc. + +
- + diff --git a/package.json b/package.json index 6dd64a3..4d67bce 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "compression-webpack-plugin": "^3.0.0", "inferno": "^7.3.2", "inferno-redux": "^7.3.3", - "inferno-router": "^7.3.2", "redux": "^4.0.5", "webpack": "^4.41.2", "webpack-cli": "^3.3.10" @@ -28,6 +27,7 @@ "scripts": { "build": "webpack --config webpack.prod.js", "dev": "webpack --config webpack.dev.js", + "server": "webpack --config webpack.server.js", "start": "node server.js", "start-dev": "webpack-dev-server --config webpack.dev.js" } diff --git a/server.js b/server.js index b3c5e98..9e1a244 100644 --- a/server.js +++ b/server.js @@ -17,7 +17,7 @@ const server = http.createServer((request, response) => { const mimeEncoding = { '.gz': 'gzip', }; - let pathname = '.' + url.parse(request.url).pathname; + let pathname = 'public' + url.parse(request.url).pathname; fs.exists(pathname, function (exist) { if(!exist) { diff --git a/src/actions.js b/src/actions.js index 2dff057..88b99f1 100644 --- a/src/actions.js +++ b/src/actions.js @@ -31,7 +31,7 @@ export const fetchLang = (new_lang) => { return } dispatch(changeLang(new_lang)) - return fetch('/public/lang/' + new_lang + '.json') + return fetch('/lang/' + new_lang + '.json') .then((response) => { if(!response.ok) { diff --git a/src/index.jsx b/src/index.jsx index 11d3bbe..8c0b8d1 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -8,47 +8,61 @@ import { fetchLang } from './actions' import Main from './main.jsx' -const logger = process.env.DEBUG ? store => next => action => { - console.group(action.type) - console.info('dispatching', action) - let result = next(action) - console.log('next state', store.getState()) - console.groupEnd() - return result - } : null +export const init_app = () => { + const logger = process.env.DEBUG ? store => next => action => { + console.group(action.type) + console.info('dispatching', action) + let result = next(action) + console.log('next state', store.getState()) + console.groupEnd() + return result + } : null -const thunk = store => next => action => - typeof action === 'function' - ? action(store.dispatch, store.getState) - : next(action) + const thunk = store => next => action => + typeof action === 'function' + ? action(store.dispatch, store.getState) + : next(action) -const persistedState = { - theme: localStorage.getItem('theme') || themeReducer(undefined, {type: null}), - lang: localStorage.getItem('lang') ? - {...langReducer(undefined, {type: null}), lang: localStorage.getItem('lang')} : - langReducer(undefined, {type: null}) + const persistedState = { + theme: localStorage.getItem('theme') || themeReducer(undefined, {type: null}), + lang: localStorage.getItem('lang') ? + {...langReducer(undefined, {type: null}), lang: localStorage.getItem('lang')} : + langReducer(undefined, {type: null}) + } + //const initState = persistedState ? JSON.parse(persistedState) : {} + + const reducers = combineReducers({ + theme: themeReducer, + lang: langReducer + }) + + const store = createStore( + reducers, + persistedState, + process.env.DEBUG ? applyMiddleware(thunk, logger) : applyMiddleware(thunk)) + + let savedState = { + theme: store.getState().theme, + lang: store.getState().lang.lang + } + store.subscribe(() => { + const state = store.getState() + if(savedState.theme !== state.theme) + { + savedState.theme = state.theme + localStorage.setItem('theme', state.theme) + } + if(savedState.lang !== state.lang.lang) + { + savedState.lang = state.lang.lang + localStorage.setItem('lang', state.lang.lang) + } + }) + + return store } -//const initState = persistedState ? JSON.parse(persistedState) : {} -const reducers = combineReducers({ - theme: themeReducer, - lang: langReducer -}) - -const store = createStore( - reducers, - persistedState, - process.env.DEBUG ? applyMiddleware(thunk, logger) : applyMiddleware(thunk)) - -let savedState = { - theme: store.getState().theme, - lang: store.getState().lang.lang -} -store.subscribe(() => { - const state = store.getState() - if(savedState.theme !== state.theme) localStorage.setItem('theme', store.getState().theme) - if(savedState.lang !== state.lang.lang) localStorage.setItem('lang', store.getState().lang.lang) -}) +const store = init_app() store.dispatch(fetchLang(store.getState().lang.lang)).then(() => { render( @@ -56,4 +70,4 @@ store.dispatch(fetchLang(store.getState().lang.lang)).then(() => {
, document.getElementById("root")) -}) +}) \ No newline at end of file diff --git a/src/lang/en.json b/src/lang/en.json index f1650d6..afff24e 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -1,4 +1,8 @@ { "lang": "English", - "test": "Cloud" + "company_name": "AYO inc.", + "address_one_line": "Tokyo Itabashi Akatsukashinmachi 3-chōme-33-3", + "flow1": "From repetitive tasks done by human", + "flow2": "With the help of data gathered", + "flow3": "To automated systems" } \ No newline at end of file diff --git a/src/lang/jp.json b/src/lang/jp.json index a8327ea..b8886f4 100644 --- a/src/lang/jp.json +++ b/src/lang/jp.json @@ -1,4 +1,8 @@ { "lang": "日本語", - "test": "雲" + "company_name": "AYO\u200B合同会社", + "address_one_line": "東京\u200B都板橋区\u200B赤塚新町\u200B三丁目３３番３ｰ１０２号", + "flow1": "", + "flow2": "", + "flow3": "" } \ No newline at end of file diff --git a/src/main.css b/src/main.css index 2c9d32a..357a5fa 100644 --- a/src/main.css +++ b/src/main.css @@ -8,6 +8,21 @@ body background-color: var(--main-bg-color); color: var(--main-fg-color); margin: 0; + font-family: sans; +} + +footer +{ + display: flex; + justify-content: center; + align-items: center; + padding: 10px; +} + +footer > div +{ + margin: 0 10px; + word-break: keep-all; } h1, h2, h3, h4, h5, h5 @@ -15,6 +30,13 @@ h1, h2, h3, h4, h5, h5 margin: 0; } +main +{ + min-height: 100vh; + display: flex; + flex-direction: column; +} + nav { display: flex; @@ -35,8 +57,48 @@ nav .actions svg { fill: var(--main-fg-color); + width: auto; + height: auto; } +.content +{ + flex-grow: 1; +} + +.process-flow +{ + background-color: var(--lighter-bg-color); + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 10vw; +} + +.process-flow > * +{ + margin: 0 20px; +} + +.process-flow h3 +{ + margin: 10px 0; + text-align: center; +} + +.process-flow .svg +{ + display: inline-flex; + justify-content: center; + align-items: center; +} + +.process-flow .svg:nth-child(even) > svg +{ + width: 5vw; +} + + .toggle { display: inline-flex; diff --git a/src/main.jsx b/src/main.jsx index 3d2b28e..8d53bdb 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -12,6 +12,11 @@ import LangSvg from '../assets/translate.svg' import LightSvg from '../assets/brightness_high.svg' import DarkSvg from '../assets/brightness_medium.svg' +import ArrowSvg from '../assets/arrow_forward.svg' +import Flow1Svg from '../assets/undraw_maintenance_cn7j.svg' +import Flow2Svg from '../assets/undraw_design_data_khdb.svg' +import Flow3Svg from '../assets/undraw_Artificial_intelligence_oyxx.svg' + class MainComponent extends Component { componentDidMount() @@ -40,25 +45,47 @@ class MainComponent extends Component render() { return ( -
+
-
) +
+
+
+ +

{this.props.strings.flow1}

+
+ +
+ +

{this.props.strings.flow2}

+
+ +
+ +

{this.props.strings.flow3}

+
+
+
+
+
{this.props.strings.company_name}
+
{this.props.strings.address_one_line}
+
+
) } } const mapStateToProps = state => ({ strings: state.lang.strings, - lang: state.lang, + lang: state.lang.lang, theme: state.theme }) diff --git a/src/svg.jsx b/src/svg.jsx index 819ffe1..aa38bc6 100644 --- a/src/svg.jsx +++ b/src/svg.jsx @@ -14,9 +14,16 @@ export class Svg extends Component componentDidMount() { - fetch(this.props.url) - .then(res => res.text()) + fetch(this.props.src) + .then(response => { + if(!response.ok) + { + throw true + } + return response.text() + }) .then(text => this.setState({ svg: text })) + .catch(() => console.error('Couldn\'t load ' + this.props.src)) } render() @@ -30,6 +37,6 @@ export class Svg extends Component { return } - return + return } } \ No newline at end of file diff --git a/src/svg_toggle.jsx b/src/svg_toggle.jsx index c85c03a..6174f00 100644 --- a/src/svg_toggle.jsx +++ b/src/svg_toggle.jsx @@ -8,15 +8,21 @@ export class SvgToggle extends Component super(props) this.state = { checked: props.value !== undefined ? props.value : false, - svg_default: null, - svg_checked: null + svg_default: '', + svg_checked: '' } } componentDidMount() { fetch(this.props.default) - .then(res => res.text()) + .then(response => { + if(!response.ok) + { + throw true + } + return response.text() + }) .then(text => { if(this.props.checked) { @@ -27,11 +33,19 @@ export class SvgToggle extends Component this.setState({ svg_default: text, svg_checked: text}) } }) + .catch(() => console.error('Couldn\'t load ' + this.props.src)) if(this.props.checked) { fetch(this.props.checked) - .then(res => res.text()) + .then(response => { + if(!response.ok) + { + throw true + } + return response.text() + }) .then(text => this.setState({ svg_checked: text })) + .catch(() => console.error('Couldn\'t load ' + this.props.src)) } } diff --git a/webpack.dev.js b/webpack.dev.js index 1afd5a8..0f6f528 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -32,7 +32,9 @@ module.exports = Object.assign( } // set a DEBUG flag that can be used in the scripts }), new CopyPlugin([ - {from: 'src/lang', to: 'lang'} + {from: 'index.html'}, + {from: 'src/lang', to: 'lang'}, + {from: 'assets/public', to: 'assets'} ]), new CompressionPlugin( { diff --git a/webpack.prod.js b/webpack.prod.js index 5b5f4ad..bb78e2c 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -20,7 +20,9 @@ module.exports = Object.assign( } // set a DEBUG flag that can be used in the scripts (can be skipped) }), new CopyPlugin([ - {from: 'src/lang', to: 'lang'} + {from: 'index.html'}, + {from: 'src/lang', to: 'lang'}, + {from: 'assets/public', to: 'assets'} ]), new CompressionPlugin( {