Read and display resume

This commit is contained in:
LordMathis 2019-11-10 17:44:57 +01:00
parent fa568fb48f
commit e4ae601c32
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
7 changed files with 46 additions and 26 deletions

View File

@ -1,10 +1,11 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Spinner, Header } from '.'
import { Spinner, Navbar, Wrapper, Header } from '.'
import '../stylesheets/globals.scss'
import contentStyle from '../stylesheets/content.scss'
import style from './Resume.scss'
import MarkdownIt from 'markdown-it'
import fm from 'front-matter'
export default class About extends Component {
static propTypes = {
@ -14,7 +15,9 @@ export default class About extends Component {
render () {
const md = MarkdownIt()
const result = md.render(this.props.about)
const content = fm(this.props.resume)
const title = content.attributes.title
const body = md.render(content.body)
if (this.props.isLoading) {
return (
@ -25,12 +28,12 @@ export default class About extends Component {
}
return (
<div>
<div>
<Navbar config={this.props.config} />
<Wrapper>
<div className={`${contentStyle.content} ${style.column}`}>
<Header header={title} role="heading" aria-level="2" />
<div className={style.content} dangerouslySetInnerHTML={{ __html: result }} role="article">
<div className={style.content} dangerouslySetInnerHTML={{ __html: body }} role="article">
</div>
</div>
</Wrapper>

View File

@ -11,3 +11,4 @@ export { default as Navbar } from './Navbar'
export { default as App } from './App'
export { default as SocialLinks } from './SocialLinks'
export { default as Column } from './Column'
export { default as Resume } from './Resume'

View File

@ -1,8 +1,8 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Post, NotFoundPage } from '../components'
import { Post, Resume } from '../components'
export default class PostContainer extends Component {
export default class ContentContainer extends Component {
static propTypes = {
staticContext: PropTypes.object.isRequired
}
@ -21,24 +21,27 @@ export default class PostContainer extends Component {
this.state = {
isLoading: !data,
error: false,
post: data[0],
type: data[0]['type'],
content: data[0]['data'],
config: data[1]
}
}
render () {
if (this.state.error) {
if (this.state.type == 'resume') {
return (
<NotFoundPage />
<Resume
isLoading={this.state.isLoading}
resume={this.state.content}
config={this.state.config} />
)
} else {
return (
<Post
isLoading={this.state.isLoading}
post={this.state.content}
config={this.state.config} />
)
}
return (
<Post
isLoading={this.state.isLoading}
post={this.state.post}
config={this.state.config} />
)
}
}

View File

@ -1,2 +1,2 @@
export { default as MainContainer } from './MainContainer'
export { default as PostContainer } from './PostContainer'
export { default as ContentContainer } from './ContentContainer'

View File

@ -5,16 +5,22 @@ 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, 'utf8')
return readFile(fileName, 'post', 'utf8')
}
};
function readFile (fileName, options) {
function readFile (fileName, type, options) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, options, (err, data) => {
err ? reject(err) : resolve(data)
err ? reject(err) : resolve({
'type': type,
'data': data
})
})
})
}

View File

@ -1,4 +1,4 @@
import { MainContainer, PostContainer } from '../containers'
import { MainContainer, ContentContainer } from '../containers'
import { getData } from './api'
const routes = [
@ -12,7 +12,14 @@ const routes = [
},
{
path: '/post/:postname',
component: PostContainer,
component: ContentContainer,
getData: (path = '') => getData(
path.split('/').pop()
)
},
{
path: '/resume',
component: ContentContainer,
getData: (path = '') => getData(
path.split('/').pop()
)