feat: prototype blog post generation in dev server

This commit is contained in:
endiliey 2018-07-30 01:35:35 +08:00
parent 8cbd23d690
commit 7ecd4c9bef
9 changed files with 112 additions and 31 deletions

6
blog/foo/bar.md Normal file
View file

@ -0,0 +1,6 @@
---
title: Lorem ipsum
date: 2018-06-20
---
Lorem ipsumsdsdsad

5
blog/foo/baz.md Normal file
View file

@ -0,0 +1,5 @@
---
title: Baz
date: 2018-05-20
---
Life is so good

13
lib/core/blogPost.js Normal file
View file

@ -0,0 +1,13 @@
const React = require('react');
import blogDatas from '@generated/blogDatas';
// inner blog component for the article itself, without sidebar/header/footer
class BlogPost extends React.Component {
render() {
const {match} = this.props;
const post = blogDatas.find(blog => blog.path === match.path);
return <div className="post">{post && post.content}</div>;
}
}
module.exports = BlogPost;

View file

@ -1,30 +1,30 @@
import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Hello from '@theme/hello';
import Layout from '@theme/layout';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';
import BlogPost from './blogPost';
import blogDatas from '@generated/blogDatas';
class App extends React.Component {
render() {
const routes = [
{
path: '/',
component: Hello
},
{
path: '/layout',
component: Layout
}
];
return (
<BrowserRouter>
<div>
<Switch>
{routes.map(({path, component}) => (
<Route key={path} exact path={path} component={component} />
{blogDatas.map(({path}) => (
<Route key={path} exact path={path} component={BlogPost} />
))}
</Switch>
<div>
{blogDatas.map(({path}) => {
return (
<div>
<Link key={path} to={path}>
{path}
</Link>
</div>
);
})}
</div>
</div>
</BrowserRouter>
);

View file

@ -3,11 +3,22 @@ const fs = require('fs-extra');
const chalk = require('chalk');
const webpack = require('webpack');
const chokidar = require('chokidar');
const convert = require('koa-connect')
const range = require('koa-range')
const history = require('connect-history-api-fallback')
const portfinder = require('portfinder')
const serve = require('webpack-serve');
const webpackNiceLog = require('webpack-nicelog');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const load = require('./loader');
const createDevConfig = require('./webpack/dev');
async function getPort (port) {
portfinder.basePort = parseInt(port) || 8080
port = await portfinder.getPortPromise()
return port
}
module.exports = async function dev(sourceDir, cliOptions = {}) {
// load site props from preprocessed files in source directory
const props = await load(sourceDir);
@ -18,7 +29,7 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
console.error(chalk.red(err.stack));
});
};
const fsWatcher = chokidar.watch(['**/*.md'], {
const fsWatcher = chokidar.watch(['**/*.md', '.blogi/config.js'], {
cwd: sourceDir,
ignoreInitial: true
});
@ -31,7 +42,7 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
// resolve webpack config
let config = createDevConfig(props);
const port = cliOptions.port || 8080;
const port = await getPort(cliOptions.port);
const {publicPath} = props;
config.plugin('WebpackNiceLog').use(webpackNiceLog, [
@ -46,6 +57,15 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
}
]);
config.plugin('html-webpack-plugin').use(HtmlWebpackPlugin, [
{
inject: false,
hash: true,
template: path.resolve(__dirname, 'core/index.html'),
filename: 'index.html'
}
]);
// create compiler from generated webpack config
config = config.toConfig();
const compiler = webpack(config);
@ -65,7 +85,15 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
logLevel: 'error'
},
logLevel: 'error',
port
port,
add: app => {
app.use(range) // enable range request https://tools.ietf.org/html/rfc7233
app.use(convert(history({
rewrites: [
{ from: /\.html$/, to: '/' }
]
})))
}
}
);
};

View file

@ -10,6 +10,15 @@ module.exports = async function load(sourceDir) {
// extract data from all blog files
const blogDatas = await loadBlog(sourceDir);
fs.writeFile(
path.resolve(__dirname, '../generated/blogDatas.js'),
`${'/**\n' +
' * @' +
'generated\n' +
' */\n' +
'module.exports = '}${JSON.stringify(blogDatas, null, 2)};\n`
);
// resolve outDir
const outDir = siteConfig.dest
? path.resolve(siteConfig.dest)

View file

@ -1,6 +1,5 @@
const Config = require('webpack-chain');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function createBaseConfig(props) {
const {outDir, themePath, sourceDir, publicPath} = props;
@ -43,14 +42,5 @@ module.exports = function createBaseConfig(props) {
presets: ['env', 'react']
});
config.plugin('html-webpack-plugin').use(HtmlWebpackPlugin, [
{
inject: false,
hash: true,
template: path.resolve(__dirname, '../core/index.html'),
filename: 'index.html'
}
]);
return config;
};

View file

@ -46,10 +46,14 @@
"chalk": "^2.4.1",
"chokidar": "^2.0.4",
"commander": "^2.16.0",
"connect-history-api-fallback": "^1.5.0",
"front-matter": "^2.3.0",
"fs-extra": "^7.0.0",
"globby": "^8.0.1",
"html-webpack-plugin": "^3.2.0",
"koa-connect": "^2.0.1",
"koa-range": "^0.3.0",
"portfinder": "^1.0.13",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",

View file

@ -499,7 +499,7 @@ async-limiter@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
async@^1.4.0:
async@^1.4.0, async@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@ -1598,6 +1598,10 @@ configstore@^3.0.0:
write-file-atomic "^2.0.0"
xdg-basedir "^3.0.0"
connect-history-api-fallback@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
console-browserify@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@ -3989,6 +3993,10 @@ koa-compose@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/koa-compose/-/koa-compose-4.1.0.tgz#507306b9371901db41121c812e923d0d67d3e877"
koa-connect@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/koa-connect/-/koa-connect-2.0.1.tgz#2acad159c33862de1d73aa4562a48de13f137c0f"
koa-convert@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/koa-convert/-/koa-convert-1.2.0.tgz#da40875df49de0539098d1700b50820cebcd21d0"
@ -4000,6 +4008,12 @@ koa-is-json@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/koa-is-json/-/koa-is-json-1.0.0.tgz#273c07edcdcb8df6a2c1ab7d59ee76491451ec14"
koa-range@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/koa-range/-/koa-range-0.3.0.tgz#3588e3496473a839a1bd264d2a42b1d85bd7feac"
dependencies:
stream-slice "^0.1.2"
koa-webpack@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/koa-webpack/-/koa-webpack-5.1.0.tgz#7b9f04ea85c43c4d7ad845d0de01f0ed495eb5c0"
@ -4435,7 +4449,7 @@ mixin-deep@^1.2.0:
for-in "^1.0.2"
is-extendable "^1.0.1"
mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
dependencies:
@ -5057,6 +5071,14 @@ pn@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
portfinder@^1.0.13:
version "1.0.13"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
dependencies:
async "^1.5.2"
debug "^2.2.0"
mkdirp "0.5.x"
posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@ -5975,6 +5997,10 @@ stream-shift@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
stream-slice@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/stream-slice/-/stream-slice-0.1.2.tgz#2dc4f4e1b936fb13f3eb39a2def1932798d07a4b"
string-length@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"