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>
<meta charset="utf-8" />
<link rel="icon" href="data:,">
<title>Inferno - Hello World</title>
<title>AYO Inc.</title>
<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>
<body>
<div id="root"></div>
<script src="/public/bundle.js.gz"></script>
<script src="/bundle.js.gz"></script>
</body>
</html>

2
package.json
View file

@ -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"
}

2
server.js
View file

@ -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)
{

2
src/actions.js
View file

@ -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)
{

90
src/index.jsx
View file

@ -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(() => {
<Main />
</Provider>,
document.getElementById("root"))
})
})

6
src/lang/en.json
View file

@ -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"
}

6
src/lang/jp.json
View file

@ -1,4 +1,8 @@
{
"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);
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;

41
src/main.jsx
View file

@ -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 (
<div>
<main>
<link rel="stylesheet" type="text/css" href={'/assets/theme/' + this.props.theme + '.css'} />
<nav>
<Svg url={LogoSvg}/>
<h1>{this.props.strings.test}</h1>
<div></div>
<Svg src={LogoSvg}/>
<div className="actions">
<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}
toggle={(checked) => this.toggleTheme(checked)} value={this.props.theme == 'dark'}/>
toggle={(checked) => this.toggleTheme(checked)} value={this.props.theme === 'dark'}/>
</div>
</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 => ({
strings: state.lang.strings,
lang: state.lang,
lang: state.lang.lang,
theme: state.theme
})

13
src/svg.jsx
View file

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

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
}),
new CopyPlugin([
{from: 'src/lang', to: 'lang'}
{from: 'index.html'},
{from: 'src/lang', to: 'lang'},
{from: 'assets/public', to: 'assets'}
]),
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)
}),
new CopyPlugin([
{from: 'src/lang', to: 'lang'}
{from: 'index.html'},
{from: 'src/lang', to: 'lang'},
{from: 'assets/public', to: 'assets'}
]),
new CompressionPlugin(
{