Fix some issues

This commit is contained in:
LordMathis 2018-12-29 23:07:50 +01:00
parent 7c3330a6df
commit 486bba76d1
13 changed files with 114 additions and 167 deletions

2
.gitignore vendored
View File

@ -1,5 +1,5 @@
node_modules node_modules
dist build
public public
*.log *.log
content content

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

View File

@ -1,10 +0,0 @@
bodyhtml{height:100%}body{font-family:Open Sans,sans-serif;color:#2f2f2f;margin:0}h1,h2,h3,h4,h5,h6{font-family:Open Sans Condensed,sans-serif}
#Home__coverPage___3awuA{background:linear-gradient(140deg,rgba(10,108,245,.6) 20%,rgba(0,0,0,.9)),url(/245160ae8c20fbd72132e8f19ab5c90d.jpg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fdfdfd;background-position:50%;background-repeat:no-repeat}#Home__coverPage___3awuA.Home__coverPageFull___1Ma8Y{height:100vh;width:100%}#Home__coverPageName___Ono33{font-size:5em}#Home__coverPageName___Ono33 a,#Home__coverPageName___Ono33 a:hover{color:#fdfdfd;text-decoration:none}.Home__social___31MFC{text-align:center}.Home__social___31MFC a{color:#fdfdfd;display:inline-block;margin:10px}.Home__menuLinks___3J0vz ul{list-style:none;margin-left:0;padding:10px}.Home__menuLinks___3J0vz ul li{margin:5px}.Home__menuLinks___3J0vz ul li a{color:#fdfdfd;text-decoration:none;font-size:1.4em}
.Blog__postDate___2syXo{margin-right:50px}.Blog__postTitle___5dx5x{color:#144a98;text-decoration:none;text-transform:capitalize;font-family:Open Sans Condensed,sans-serif;font-size:1.2em}.Blog__postsWrapper___15Pu7{margin-top:20px}.Blog__postListItem___3babS{margin:8px}.Blog__postListItem___3babS td{vertical-align:top}
.content__contentWrapper___3JR0e{display:inline-block;overflow:auto;box-sizing:border-box;padding:20px;width:100%}.content__contentWrapper___3JR0e a{color:#144a98}@media (min-width:992px){.content__contentWrapper___3JR0e{width:960px}}.content__content___2hWvT{box-sizing:border-box;text-align:left}
.Post__postContent___2qxpB{clear:both}.Post__postContent___2qxpB h1,.Post__postContent___2qxpB h2,.Post__postContent___2qxpB h4,.Post__postContent___2qxpB h5,.Post__postContent___2qxpB h6{color:#2f2f2f}.Post__postDate___mOa_I{float:right}.Post__postDate___mOa_I h3{font-weight:400}
.Wrapper__centerContent___3I7iS{text-align:center}
.Spinner__spinnerWrapper___1rE4f{width:100%;display:flex;justify-content:center}.Spinner__ldsEllipsis___MQ__N{display:inline-block;position:relative;width:64px;height:64px;margin:0 auto}.Spinner__ldsEllipsis___MQ__N div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#2f2f2f;animation-timing-function:cubic-bezier(0,1,1,0)}.Spinner__ldsEllipsis___MQ__N div:first-child{left:6px;animation:Spinner__lds-ellipsis1___kmvdD .6s infinite}.Spinner__ldsEllipsis___MQ__N div:nth-child(2){left:6px;animation:Spinner__lds-ellipsis2___1KPxc .6s infinite}.Spinner__ldsEllipsis___MQ__N div:nth-child(3){left:26px;animation:Spinner__lds-ellipsis2___1KPxc .6s infinite}.Spinner__ldsEllipsis___MQ__N div:nth-child(4){left:45px;animation:Spinner__lds-ellipsis3___25QMr .6s infinite}@keyframes Spinner__lds-ellipsis1___kmvdD{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes Spinner__lds-ellipsis3___25QMr{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes Spinner__lds-ellipsis2___1KPxc{0%{transform:translate(0)}to{transform:translate(19px)}}
.Header__mainHeader___2VDf9{border-left:5px solid #144a98;padding:5px;margin:0;text-align:left}.Header__mainHeader___2VDf9 h1{margin:0}
.Navbar__navbar___2l-xR{background:linear-gradient(140deg,rgba(10,108,245,.6) 20%,rgba(0,0,0,.9)),url(/245160ae8c20fbd72132e8f19ab5c90d.jpg) no-repeat 50% fixed;color:#fdfdfd;background-position:50%;background-repeat:no-repeat;text-align:left;overflow:auto}h2{color:#fdfdfd;padding-left:5px}.Navbar__social___5OYU1{display:inline-block;float:right;vertical-align:bottom}.Navbar__social___5OYU1 a{color:#fdfdfd;display:inline-block;margin:10px}.Navbar__links___2YPE8{display:inline-block;float:left}.Navbar__links___2YPE8 ul{list-style:none}.Navbar__links___2YPE8 ul li{font-family:Open Sans Condensed,sans-serif;display:inline;margin:5px}.Navbar__links___2YPE8 ul li a{color:#fdfdfd;text-decoration:none}.Navbar__nameLink___2o3NS{font-size:1.4em}

View File

@ -1,11 +1,11 @@
{ {
"name": "portfolio", "name": "portfolio",
"version": "1.0.0", "version": "2.0.0",
"description": "portfolio", "description": "portfolio",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "NODE_ENV=production webpack -p --progress", "build": "NODE_ENV=production webpack -p --progress",
"start": "NODE_ENV=production node ./server.js" "start": "NODE_ENV=production node ./build/server.js"
}, },
"keywords": [ "keywords": [
"porfolio", "porfolio",

File diff suppressed because one or more lines are too long

View File

@ -5,13 +5,11 @@ import {App} from './components';
const AppClient = () => ( const AppClient = () => (
<Router> <Router>
<App data={window.__INITIAL_DATA__}/> <App />
</Router> </Router>
) )
window.onload = () => { hydrate(
hydrate(
<AppClient />, <AppClient />,
document.getElementById('root') document.getElementById('root')
); );
};

View File

@ -1,9 +1,9 @@
import { NotFoundWrapper } from '.' import { NotFoundWrapper } from '.'
import React, { Component } from 'react' import React, { Component } from 'react'
import routes from '../utils/routes' import routes from '../utils/routes'
import { Route, Switch } from 'react-router-dom' import { Route, Link, Redirect, Switch } from 'react-router-dom'
class App extends Component { export default class App extends Component {
render() { render() {
return ( return (
<div> <div>
@ -24,20 +24,3 @@ class App extends Component {
) )
} }
} }
// import React from 'react';
// import { Route, Switch } from 'react-router-dom';
// import { NotFoundWrapper } from '.';
// import { MainContainer, PostContainer } from '../containers';
//
// export const App = () => (
// <div>
// <Switch>
// <Route exact path="/" component={MainContainer} />
// <Route path="/post/:postname" component={PostContainer} />
// <Route component={NotFoundWrapper} />
// </Switch>
// </div>
// );
//
// export default App;

View File

@ -13,22 +13,6 @@ export default class BlogContainer extends Component {
} }
} }
componentDidMount() {
axios.get('/api/about').then((res) => {
this.setState({
isLoadingAbout: false,
about: res.data,
});
})
axios.get('/api/blog').then((res) => {
this.setState({
isLoadingBlog: false,
posts: res.data,
});
})
}
render() { render() {
return ( return (
<div> <div>

View File

@ -12,25 +12,6 @@ export default class PostContainer extends Component {
}; };
} }
componentDidMount() {
const url = '/api/post/' + this.props.match.params.postname;
axios.get(url).then((res) => {
if (res.data.error) {
this.setState({
error: true,
});
}
else {
this.setState({
error: false,
isLoading: false,
post: res.data,
});
}
})
}
render() { render() {
if (this.state.error) { if (this.state.error) {

View File

@ -1,28 +1,27 @@
require('babel-register'); import express from 'express'
var path = require('path'); import fs from 'fs'
import {serverRender} from './utils/serverRender'
var app = new (require('express'))(); const port = process.env.PORT || 3000;
var port = process.env.PORT || 3000; const app = express()
const sass = require('node-sass'); // const sass = require('node-sass');
//
// require('css-modules-require-hook')({
// generateScopedName: '[name]__[local]___[hash:base64:5]',
// extensions: ['.scss', '.css'],
// preprocessCss: (data, filename) => sass.renderSync({
// data,
// file: filename,
// }).css
// });
require('css-modules-require-hook')({ // const filename = './src/utils/data.json';
generateScopedName: '[name]__[local]___[hash:base64:5]', // const dataStub = {"posts": [], "other": []};
extensions: ['.scss', '.css'], // fs.writeFileSync(filename, JSON.stringify(dataStub));
preprocessCss: (data, filename) => sass.renderSync({
data,
file: filename,
}).css
});
var fs = require('fs'); // require('./utils/scanner')();
var filename = './src/utils/data.json';
var dataStub = {"posts": [], "other": []};
fs.writeFileSync(filename, JSON.stringify(dataStub));
require('./utils/scanner')();
var serverRender = require('./utils/serverRender');
app.get("*", serverRender); app.get("*", serverRender);
app.listen(port, function(error) { app.listen(port, function(error) {

View File

@ -1,6 +1,6 @@
import { MainContainer, PostContainer } from '../containers' import { MainContainer, PostContainer } from '../containers'
import { NotFoundWrapper } from '../components'; import { NotFoundWrapper } from '../components';
import getData from './api' import { getData } from './api'
const routes = [ const routes = [
{ {

View File

@ -1,11 +1,11 @@
//import 'babel-polyfill' //import 'babel-polyfill'
import React from 'react' import React from 'react'
import { renderToString } from 'react-dom/server' import { renderToString } from 'react-dom/server'
import { StaticRouter as Router } from 'react-router-dom' import { StaticRouter as Router, matchPath } from 'react-router-dom'
import { App } from '../components/App' import { App } from '../components/App'
import routes from './routes' import routes from './routes'
function serverRender(req, res) { export function serverRender(req, res, next) {
const activeRoute = routes.find((route) => matchPath(req.url, route)) || {} const activeRoute = routes.find((route) => matchPath(req.url, route)) || {}
@ -15,26 +15,17 @@ function serverRender(req, res) {
promise.then((data) => { promise.then((data) => {
const markup = renderToString( const markup = renderToString(
<Router location={req.url} context={context}> <Router location={req.url} context={{}}>
<App />
</Router>,
);
})
let markup = '';
let status = 200;
const context = {}
markup = renderToString(
<Router location={req.url} context={context}>
<App /> <App />
</Router>, </Router>,
); );
return res.status(status).send(renderFullPage(markup, manifest)); res.status(200).send(renderFullPage(markup));
}).catch(next)
} }
function renderFullPage(html, manifest) { function renderFullPage(html) {
return ` return `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@ -49,11 +40,9 @@ function renderFullPage(html, manifest) {
<link href="bundle.css" rel="stylesheet"> <link href="bundle.css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root">${process.env.NODE_ENV === 'production' ? html : `<div>${html}</div>`}</div> <div id="root">${html}</div>
<script src="bundle.js" async></script> <script src="bundle.js" async></script>
</body> </body>
</html> </html>
` `
} }
module.exports = serverRender;

View File

@ -8,7 +8,20 @@ const ManifestPlugin = require('webpack-manifest-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin')
const nodeExternals = require('webpack-node-externals') const nodeExternals = require('webpack-node-externals')
const commonConfig = { const browserConfig = {
mode: 'production',
context: resolve(__dirname, 'src'),
entry: {
bundle: [
'./app-client.js'
]
},
output: {
path: resolve(__dirname, 'public/static'),
filename: '[name].[contenthash].js',
publicPath: '/static/'
},
module: {
rules: [ rules: [
{ {
test: /\.js$/, test: /\.js$/,
@ -46,35 +59,10 @@ const commonConfig = {
} }
}, },
] ]
}
const browserConfig = {
mode: 'production',
context: resolve(__dirname, 'src'),
entry: {
bundle: [
'./app-client.js'
]
},
output: {
path: resolve(__dirname, 'public/static'),
filename: '[name].[contenthash].js',
publicPath: '/static/'
},
module: commonConfig,
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
}, },
plugins: [ plugins: [
new webpack.DefinePlugin({__isBrowser__: "true"}), new webpack.DefinePlugin({__isBrowser__: "true"}),
new CleanWebpackPlugin(['public/static'], {}), new CleanWebpackPlugin(['public/static', 'build'], {}),
new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}), new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
// new CompressionPlugin({}), // new CompressionPlugin({}),
// new ManifestPlugin(), // new ManifestPlugin(),
@ -86,16 +74,52 @@ const serverConfig = {
target: 'node', target: 'node',
externals: [nodeExternals()], externals: [nodeExternals()],
output: { output: {
path: __dirname, path: resolve(__dirname, 'build'),
filename: 'server.js', filename: 'server.js',
publicPath: '/' publicPath: '/'
}, },
module: commonConfig, module: {
rules: [
{
test: /\.js$/,
use: [
'babel-loader'
],
exclude: '/node_modules/'
},
{
test: /\.scss$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: "postcss-loader"
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg)$/,
exclude: /node_modules/,
loader: 'url-loader',
options: {
limit: 8192
}
},
]
},
plugins: [ plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
__isBrowser__: "false" __isBrowser__: "false"
}), }),
new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
] ]
} }