Change the way data are loaded on the server
This commit is contained in:
parent
a9b560346c
commit
d4f41ec33e
|
@ -9,8 +9,7 @@
|
|||
},
|
||||
"baseUrl": "example.com",
|
||||
"contentPath": "./content",
|
||||
"renderPath": "./renders",
|
||||
"dataPath": "./src/utils/data.json",
|
||||
"storage": "file",
|
||||
"non-content-files": [
|
||||
"about.md", "resume.md"
|
||||
]
|
||||
|
|
|
@ -17,14 +17,14 @@ export default class MainContainer extends Component {
|
|||
data = window.__INITIAL_DATA__
|
||||
delete window.__INITIAL_DATA__
|
||||
}
|
||||
|
||||
|
||||
this.state = {
|
||||
isLoadingBlog: !data[0].posts,
|
||||
isLoadingAbout: !data[0].other.about,
|
||||
about: data[0].other.about,
|
||||
posts: data[0].posts,
|
||||
config: data[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
|
@ -7,6 +7,7 @@ import chokidar from 'chokidar'
|
|||
import jsonfile from 'jsonfile'
|
||||
import { ServerRenderer } from './utils/serverRender'
|
||||
import { Scanner } from './utils/scanner'
|
||||
import { DataGetter } from './utils/dataGetter'
|
||||
|
||||
const port = process.env.PORT || 3000
|
||||
const app = express()
|
||||
|
@ -65,7 +66,8 @@ if (head == null) {
|
|||
}
|
||||
}
|
||||
|
||||
const serverRenderer = new ServerRenderer(head, config)
|
||||
const dataGetter = new DataGetter(config)
|
||||
const serverRenderer = new ServerRenderer(head, config, dataGetter)
|
||||
app.get('*', serverRenderer.render.bind(serverRenderer))
|
||||
|
||||
app.listen(port, function (error) {
|
||||
|
|
|
@ -1,34 +0,0 @@
|
|||
import fs from 'fs'
|
||||
import jsonfile from 'jsonfile'
|
||||
import path from 'path'
|
||||
|
||||
export function getData (reqPath = '') {
|
||||
if (reqPath === '') {
|
||||
return readJson(path.join(process.cwd(), 'data.json'))
|
||||
} else if (reqPath === 'resume') {
|
||||
const fileName = path.join(process.cwd(), 'content', reqPath + '.md')
|
||||
return readFile(fileName, 'resume', 'utf8')
|
||||
} else {
|
||||
const fileName = path.join(process.cwd(), 'content', reqPath + '.md')
|
||||
return readFile(fileName, 'post', 'utf8')
|
||||
}
|
||||
};
|
||||
|
||||
function readFile (fileName, type, options) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
fs.readFile(fileName, options, (err, data) => {
|
||||
err ? reject(err) : resolve({
|
||||
type: type,
|
||||
data: data
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function readJson (dataPath) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
jsonfile.readFile(dataPath, (err, data) => {
|
||||
err ? reject(err) : resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
|
@ -0,0 +1,46 @@
|
|||
import fs from 'fs'
|
||||
import jsonfile from 'jsonfile'
|
||||
import path from 'path'
|
||||
|
||||
export class DataGetter {
|
||||
constructor (config) {
|
||||
this.config = config
|
||||
}
|
||||
|
||||
getData (reqPath) {
|
||||
if (this.config.storage === 'file') {
|
||||
return this.getDataFromFile(reqPath)
|
||||
}
|
||||
}
|
||||
|
||||
getDataFromFile (reqPath) {
|
||||
if (reqPath === '') {
|
||||
return this.readJson(path.join(process.cwd(), 'data.json'))
|
||||
} else if (reqPath === 'resume') {
|
||||
const fileName = path.join(process.cwd(), 'content', reqPath + '.md')
|
||||
return this.readFile(fileName, 'resume', 'utf8')
|
||||
} else {
|
||||
const fileName = path.join(process.cwd(), 'content', reqPath + '.md')
|
||||
return this.readFile(fileName, 'post', 'utf8')
|
||||
}
|
||||
}
|
||||
|
||||
readFile (fileName, type, options) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
fs.readFile(fileName, options, (err, data) => {
|
||||
err ? reject(err) : resolve({
|
||||
type: type,
|
||||
data: data
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
readJson (dataPath) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
jsonfile.readFile(dataPath, (err, data) => {
|
||||
err ? reject(err) : resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
|
@ -1,28 +1,18 @@
|
|||
import { MainContainer, ContentContainer } from '../containers'
|
||||
import { getData } from './api'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
exact: true,
|
||||
component: MainContainer,
|
||||
getData: (path = '') => getData(
|
||||
path.split('/').pop()
|
||||
)
|
||||
component: MainContainer
|
||||
},
|
||||
{
|
||||
path: '/post/:postname',
|
||||
component: ContentContainer,
|
||||
getData: (path = '') => getData(
|
||||
path.split('/').pop()
|
||||
)
|
||||
component: ContentContainer
|
||||
},
|
||||
{
|
||||
path: '/resume',
|
||||
component: ContentContainer,
|
||||
getData: (path = '') => getData(
|
||||
path.split('/').pop()
|
||||
)
|
||||
component: ContentContainer
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
@ -7,9 +7,10 @@ import serialize from 'serialize-javascript'
|
|||
import manifest from '../../public/static/manifest.json'
|
||||
|
||||
export class ServerRenderer {
|
||||
constructor (head, config) {
|
||||
constructor (head, config, dataGetter) {
|
||||
this.head = head
|
||||
this.config = config
|
||||
this.dataGetter = dataGetter
|
||||
}
|
||||
|
||||
render (req, res, next) {
|
||||
|
@ -26,9 +27,7 @@ export class ServerRenderer {
|
|||
)
|
||||
res.status(404).send(renderFullPage(markup, head, {}, config))
|
||||
} else {
|
||||
const promise = activeRoute.getData
|
||||
? activeRoute.getData(req.path)
|
||||
: Promise.resolve()
|
||||
const promise = this.dataGetter.getData(req.path.split('/').pop())
|
||||
|
||||
promise.then((data) => {
|
||||
const context = [data, config]
|
||||
|
|
Loading…
Reference in New Issue