AYO/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Overal improvement

Browse source
This commit is contained in:
Corentin Risselin 2020-01-07 15:53:25 +09:00
commit 7125e35103
15 changed files with 199 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

12
assets/theme/dark.css
View file

@ -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%);
}

12
assets/theme/light.css
View file

@ -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%);
}

7
index.html
View file

@ -3,14 +3,15 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="data:,"> <title>AYO Inc.</title>
<title>Inferno - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="shortcut icon" href="/assets/favicon.png">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="/public/bundle.js.gz"></script> <script src="/bundle.js.gz"></script>
</body> </body>
</html> </html>

2
package.json
View file

@ -13,7 +13,6 @@
"compression-webpack-plugin": "^3.0.0", "compression-webpack-plugin": "^3.0.0",
"inferno": "^7.3.2", "inferno": "^7.3.2",
"inferno-redux": "^7.3.3", "inferno-redux": "^7.3.3",
"inferno-router": "^7.3.2",
"redux": "^4.0.5", "redux": "^4.0.5",
"webpack": "^4.41.2", "webpack": "^4.41.2",
"webpack-cli": "^3.3.10" "webpack-cli": "^3.3.10"
@ -28,6 +27,7 @@
"scripts": { "scripts": {
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js",
"dev": "webpack --config webpack.dev.js", "dev": "webpack --config webpack.dev.js",
"server": "webpack --config webpack.server.js",
"start": "node server.js", "start": "node server.js",
"start-dev": "webpack-dev-server --config webpack.dev.js" "start-dev": "webpack-dev-server --config webpack.dev.js"
} }

2
server.js
View file

@ -17,7 +17,7 @@ const server = http.createServer((request, response) => {
const mimeEncoding = { const mimeEncoding = {
'.gz': 'gzip', '.gz': 'gzip',
}; };
let pathname = '.' + url.parse(request.url).pathname; let pathname = 'public' + url.parse(request.url).pathname;
fs.exists(pathname, function (exist) { fs.exists(pathname, function (exist) {
if(!exist) if(!exist)
{ {

2
src/actions.js
View file

@ -31,7 +31,7 @@ export const fetchLang = (new_lang) => {
return return
} }
dispatch(changeLang(new_lang)) dispatch(changeLang(new_lang))
return fetch('/public/lang/' + new_lang + '.json') return fetch('/lang/' + new_lang + '.json')
.then((response) => { .then((response) => {
if(!response.ok) if(!response.ok)
{ {

42
src/index.jsx
View file

@ -8,7 +8,8 @@ import { fetchLang } from './actions'
import Main from './main.jsx' import Main from './main.jsx'
const logger = process.env.DEBUG ? store => next => action => { export const init_app = () => {
const logger = process.env.DEBUG ? store => next => action => {
console.group(action.type) console.group(action.type)
console.info('dispatching', action) console.info('dispatching', action)
let result = next(action) let result = next(action)
@ -17,38 +18,51 @@ const logger = process.env.DEBUG ? store => next => action => {
return result return result
} : null } : null
const thunk = store => next => action => const thunk = store => next => action =>
typeof action === 'function' typeof action === 'function'
? action(store.dispatch, store.getState) ? action(store.dispatch, store.getState)
: next(action) : next(action)
const persistedState = { const persistedState = {
theme: localStorage.getItem('theme') || themeReducer(undefined, {type: null}), theme: localStorage.getItem('theme') || themeReducer(undefined, {type: null}),
lang: localStorage.getItem('lang') ? lang: localStorage.getItem('lang') ?
{...langReducer(undefined, {type: null}), lang: localStorage.getItem('lang')} : {...langReducer(undefined, {type: null}), lang: localStorage.getItem('lang')} :
langReducer(undefined, {type: null}) langReducer(undefined, {type: null})
} }
//const initState = persistedState ? JSON.parse(persistedState) : {} //const initState = persistedState ? JSON.parse(persistedState) : {}
const reducers = combineReducers({ const reducers = combineReducers({
theme: themeReducer, theme: themeReducer,
lang: langReducer lang: langReducer
}) })
const store = createStore( const store = createStore(
reducers, reducers,
persistedState, persistedState,
process.env.DEBUG ? applyMiddleware(thunk, logger) : applyMiddleware(thunk)) process.env.DEBUG ? applyMiddleware(thunk, logger) : applyMiddleware(thunk))
let savedState = { let savedState = {
theme: store.getState().theme, theme: store.getState().theme,
lang: store.getState().lang.lang lang: store.getState().lang.lang
} }
store.subscribe(() => { store.subscribe(() => {
const state = store.getState() const state = store.getState()
if(savedState.theme !== state.theme) localStorage.setItem('theme', store.getState().theme) if(savedState.theme !== state.theme)
if(savedState.lang !== state.lang.lang) localStorage.setItem('lang', store.getState().lang.lang) {
}) 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 store = init_app()
store.dispatch(fetchLang(store.getState().lang.lang)).then(() => { store.dispatch(fetchLang(store.getState().lang.lang)).then(() => {
render( render(

6
src/lang/en.json
View file

@ -1,4 +1,8 @@
{ {
"lang": "English", "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"
} }

6
src/lang/jp.json
View file

@ -1,4 +1,8 @@
{ {
"lang": "日本語", "lang": "日本語",
"test": "雲" "company_name": "AYO\u200B合同会社",
"address_one_line": "東京\u200B都板橋区\u200B赤塚新町\u200B三丁目３３番３ｰ１０２号",
"flow1": "",
"flow2": "",
"flow3": ""
} }

62
src/main.css
View file

@ -8,6 +8,21 @@ body
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
color: var(--main-fg-color); color: var(--main-fg-color);
margin: 0; 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 h1, h2, h3, h4, h5, h5
@ -15,6 +30,13 @@ h1, h2, h3, h4, h5, h5
margin: 0; margin: 0;
} }
main
{
min-height: 100vh;
display: flex;
flex-direction: column;
}
nav nav
{ {
display: flex; display: flex;
@ -35,8 +57,48 @@ nav .actions
svg svg
{ {
fill: var(--main-fg-color); 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 .toggle
{ {
display: inline-flex; display: inline-flex;

41
src/main.jsx
View file

@ -12,6 +12,11 @@ import LangSvg from '../assets/translate.svg'
import LightSvg from '../assets/brightness_high.svg' import LightSvg from '../assets/brightness_high.svg'
import DarkSvg from '../assets/brightness_medium.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 class MainComponent extends Component
{ {
componentDidMount() componentDidMount()
@ -40,25 +45,47 @@ class MainComponent extends Component
render() render()
{ {
return ( return (
<div> <main>
<link rel="stylesheet" type="text/css" href={'/assets/theme/' + this.props.theme + '.css'} /> <link rel="stylesheet" type="text/css" href={'/assets/theme/' + this.props.theme + '.css'} />
<nav> <nav>
<Svg url={LogoSvg}/> <div></div>
<h1>{this.props.strings.test}</h1> <Svg src={LogoSvg}/>
<div className="actions"> <div className="actions">
<SvgToggle default={LangSvg} text={this.props.strings.lang} <SvgToggle default={LangSvg} text={this.props.strings.lang}
toggle={(checked) => this.toggleLang(checked)}/> toggle={(checked) => this.toggleLang(checked)} value={this.props.lang === 'en'}/>
<SvgToggle default={LightSvg} checked={DarkSvg} <SvgToggle default={LightSvg} checked={DarkSvg}
toggle={(checked) => this.toggleTheme(checked)} value={this.props.theme == 'dark'}/> toggle={(checked) => this.toggleTheme(checked)} value={this.props.theme === 'dark'}/>
</div> </div>
</nav> </nav>
</div>) <div className="content">
<div className="process-flow">
<div>
<Svg src={Flow1Svg}/>
<h3>{this.props.strings.flow1}</h3>
</div>
<Svg src={ArrowSvg}/>
<div>
<Svg src={Flow2Svg}/>
<h3>{this.props.strings.flow2}</h3>
</div>
<Svg src={ArrowSvg}/>
<div>
<Svg src={Flow3Svg}/>
<h3>{this.props.strings.flow3}</h3>
</div>
</div>
</div>
<footer>
<div>{this.props.strings.company_name}</div>
<div>{this.props.strings.address_one_line}</div>
</footer>
</main>)
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({
strings: state.lang.strings, strings: state.lang.strings,
lang: state.lang, lang: state.lang.lang,
theme: state.theme theme: state.theme
}) })

13
src/svg.jsx
View file

@ -14,9 +14,16 @@ export class Svg extends Component
componentDidMount() componentDidMount()
{ {
fetch(this.props.url) fetch(this.props.src)
.then(res => res.text()) .then(response => {
if(!response.ok)
{
throw true
}
return response.text()
})
.then(text => this.setState({ svg: text })) .then(text => this.setState({ svg: text }))
.catch(() => console.error('Couldn\'t load ' + this.props.src))
} }
render() render()
@ -30,6 +37,6 @@ export class Svg extends Component
{ {
return <span className="error"/> return <span className="error"/>
} }
return <span dangerouslySetInnerHTML={{ __html: this.state.svg}}/> return <span class="svg" dangerouslySetInnerHTML={{ __html: this.state.svg}}/>
} }
} }

22
src/svg_toggle.jsx
View file

@ -8,15 +8,21 @@ export class SvgToggle extends Component
super(props) super(props)
this.state = { this.state = {
checked: props.value !== undefined ? props.value : false, checked: props.value !== undefined ? props.value : false,
svg_default: null, svg_default: '',
svg_checked: null svg_checked: ''
} }
} }
componentDidMount() componentDidMount()
{ {
fetch(this.props.default) fetch(this.props.default)
.then(res => res.text()) .then(response => {
if(!response.ok)
{
throw true
}
return response.text()
})
.then(text => { .then(text => {
if(this.props.checked) if(this.props.checked)
{ {
@ -27,11 +33,19 @@ export class SvgToggle extends Component
this.setState({ svg_default: text, svg_checked: text}) this.setState({ svg_default: text, svg_checked: text})
} }
}) })
.catch(() => console.error('Couldn\'t load ' + this.props.src))
if(this.props.checked) if(this.props.checked)
{ {
fetch(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 })) .then(text => this.setState({ svg_checked: text }))
.catch(() => console.error('Couldn\'t load ' + this.props.src))
} }
} }

4
webpack.dev.js
View file

@ -32,7 +32,9 @@ module.exports = Object.assign(
} // set a DEBUG flag that can be used in the scripts } // set a DEBUG flag that can be used in the scripts
}), }),
new CopyPlugin([ new CopyPlugin([
{from: 'src/lang', to: 'lang'} {from: 'index.html'},
{from: 'src/lang', to: 'lang'},
{from: 'assets/public', to: 'assets'}
]), ]),
new CompressionPlugin( new CompressionPlugin(
{ {

4
webpack.prod.js
View file

@ -20,7 +20,9 @@ module.exports = Object.assign(
} // set a DEBUG flag that can be used in the scripts (can be skipped) } // set a DEBUG flag that can be used in the scripts (can be skipped)
}), }),
new CopyPlugin([ new CopyPlugin([
{from: 'src/lang', to: 'lang'} {from: 'index.html'},
{from: 'src/lang', to: 'lang'},
{from: 'assets/public', to: 'assets'}
]), ]),
new CompressionPlugin( new CompressionPlugin(
{ {