Fix some issues
This commit is contained in:
parent
7c3330a6df
commit
486bba76d1
|
@ -1,5 +1,5 @@
|
|||
node_modules
|
||||
dist
|
||||
build
|
||||
public
|
||||
*.log
|
||||
content
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 235 KiB |
|
@ -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}
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "portfolio",
|
||||
"version": "1.0.0",
|
||||
"version": "2.0.0",
|
||||
"description": "portfolio",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "NODE_ENV=production webpack -p --progress",
|
||||
"start": "NODE_ENV=production node ./server.js"
|
||||
"start": "NODE_ENV=production node ./build/server.js"
|
||||
},
|
||||
"keywords": [
|
||||
"porfolio",
|
||||
|
|
|
@ -5,13 +5,11 @@ import {App} from './components';
|
|||
|
||||
const AppClient = () => (
|
||||
<Router>
|
||||
<App data={window.__INITIAL_DATA__}/>
|
||||
<App />
|
||||
</Router>
|
||||
)
|
||||
|
||||
window.onload = () => {
|
||||
hydrate(
|
||||
hydrate(
|
||||
<AppClient />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
);
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { NotFoundWrapper } from '.'
|
||||
import React, { Component } from 'react'
|
||||
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() {
|
||||
return (
|
||||
<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;
|
||||
|
|
|
@ -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() {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
@ -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() {
|
||||
|
||||
if (this.state.error) {
|
||||
|
|
|
@ -1,28 +1,27 @@
|
|||
require('babel-register');
|
||||
var path = require('path');
|
||||
import express from 'express'
|
||||
import fs from 'fs'
|
||||
import {serverRender} from './utils/serverRender'
|
||||
|
||||
var app = new (require('express'))();
|
||||
var port = process.env.PORT || 3000;
|
||||
const 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')({
|
||||
generateScopedName: '[name]__[local]___[hash:base64:5]',
|
||||
extensions: ['.scss', '.css'],
|
||||
preprocessCss: (data, filename) => sass.renderSync({
|
||||
data,
|
||||
file: filename,
|
||||
}).css
|
||||
});
|
||||
// const filename = './src/utils/data.json';
|
||||
// const dataStub = {"posts": [], "other": []};
|
||||
// fs.writeFileSync(filename, JSON.stringify(dataStub));
|
||||
|
||||
var fs = require('fs');
|
||||
var filename = './src/utils/data.json';
|
||||
var dataStub = {"posts": [], "other": []};
|
||||
fs.writeFileSync(filename, JSON.stringify(dataStub));
|
||||
// require('./utils/scanner')();
|
||||
|
||||
require('./utils/scanner')();
|
||||
|
||||
var serverRender = require('./utils/serverRender');
|
||||
app.get("*", serverRender);
|
||||
|
||||
app.listen(port, function(error) {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { MainContainer, PostContainer } from '../containers'
|
||||
import { NotFoundWrapper } from '../components';
|
||||
import getData from './api'
|
||||
import { getData } from './api'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
//import 'babel-polyfill'
|
||||
import React from 'react'
|
||||
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 routes from './routes'
|
||||
|
||||
function serverRender(req, res) {
|
||||
export function serverRender(req, res, next) {
|
||||
|
||||
const activeRoute = routes.find((route) => matchPath(req.url, route)) || {}
|
||||
|
||||
|
@ -15,26 +15,17 @@ function serverRender(req, res) {
|
|||
|
||||
promise.then((data) => {
|
||||
const markup = renderToString(
|
||||
<Router location={req.url} context={context}>
|
||||
<App />
|
||||
</Router>,
|
||||
);
|
||||
})
|
||||
|
||||
let markup = '';
|
||||
let status = 200;
|
||||
|
||||
const context = {}
|
||||
markup = renderToString(
|
||||
<Router location={req.url} context={context}>
|
||||
<Router location={req.url} context={{}}>
|
||||
<App />
|
||||
</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 `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
@ -49,11 +40,9 @@ function renderFullPage(html, manifest) {
|
|||
<link href="bundle.css" rel="stylesheet">
|
||||
</head>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
|
||||
module.exports = serverRender;
|
||||
|
|
|
@ -8,7 +8,20 @@ const ManifestPlugin = require('webpack-manifest-plugin')
|
|||
const CleanWebpackPlugin = require('clean-webpack-plugin')
|
||||
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: [
|
||||
{
|
||||
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: [
|
||||
new webpack.DefinePlugin({__isBrowser__: "true"}),
|
||||
new CleanWebpackPlugin(['public/static'], {}),
|
||||
new CleanWebpackPlugin(['public/static', 'build'], {}),
|
||||
new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
|
||||
// new CompressionPlugin({}),
|
||||
// new ManifestPlugin(),
|
||||
|
@ -86,16 +74,52 @@ const serverConfig = {
|
|||
target: 'node',
|
||||
externals: [nodeExternals()],
|
||||
output: {
|
||||
path: __dirname,
|
||||
path: resolve(__dirname, 'build'),
|
||||
filename: 'server.js',
|
||||
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: [
|
||||
new webpack.DefinePlugin({
|
||||
__isBrowser__: "false"
|
||||
}),
|
||||
new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
|
||||
]
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue