mirror of
https://github.com/c8r/x0.git
synced 2024-08-16 17:00:24 +03:00
Add Head component
This commit is contained in:
parent
6129487190
commit
fd207eb0a7
@ -389,5 +389,5 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
|
||||
|
||||
- .jsx imports/scope
|
||||
- .jsx props
|
||||
- custom app path option (must be `_app.js`)
|
||||
- custom app path option (must be `_app.js`) (undocumented)
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import * as scope from 'rebass'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ScopeProvider } from '../components'
|
||||
import { ScopeProvider, Head } from '../components'
|
||||
import {
|
||||
Flex,
|
||||
Box,
|
||||
@ -21,6 +21,10 @@ export default class App extends React.Component {
|
||||
|
||||
return (
|
||||
<ScopeProvider scope={scope}>
|
||||
<Head>
|
||||
<title>hello</title>
|
||||
<meta name='twitter:card' content='summary' />
|
||||
</Head>
|
||||
{false ? (
|
||||
<Layout>
|
||||
{render()}
|
||||
|
24
lib/build.js
24
lib/build.js
@ -7,6 +7,7 @@ const merge = require('webpack-merge')
|
||||
const React = require('react')
|
||||
const { renderToString, renderToStaticMarkup } = require('react-dom/server')
|
||||
const { StaticRouter } = require('react-router-dom')
|
||||
const { Helmet } = require('react-helmet')
|
||||
const semver = require('semver')
|
||||
|
||||
const util = require('util')
|
||||
@ -93,13 +94,13 @@ const renderHTML = ({
|
||||
)
|
||||
)
|
||||
css = sheet.getStyleTags()
|
||||
return { path, html, css, props }
|
||||
break
|
||||
case 'emotion':
|
||||
const { renderStylesToString } = require('emotion-server')
|
||||
html = renderStylesToString(
|
||||
render(app)
|
||||
)
|
||||
return { path, html, props }
|
||||
break
|
||||
case 'glamor':
|
||||
// doesn't seem to be working...
|
||||
const glamor = require('glamor/server')
|
||||
@ -108,13 +109,28 @@ const renderHTML = ({
|
||||
))
|
||||
html = res.html
|
||||
css = `<style>${res.css}</style>`
|
||||
return { path, html, css, props }
|
||||
break
|
||||
default:
|
||||
html = render(app)
|
||||
return { path, html, props }
|
||||
break
|
||||
}
|
||||
const helmet = Helmet.renderStatic()
|
||||
const head = parseHelmet(helmet)
|
||||
// doesn't seem to be working...
|
||||
// console.log('head', head)
|
||||
return { html, css, path, props }
|
||||
}
|
||||
|
||||
const parseHelmet = helmet => [
|
||||
helmet.title.toString(),
|
||||
helmet.link.toString(),
|
||||
helmet.meta.toString(),
|
||||
helmet.script.toString(),
|
||||
helmet.noscript.toString(),
|
||||
helmet.style.toString(),
|
||||
helmet.base.toString(),
|
||||
].filter(n => !!n && n.length).join('\n')
|
||||
|
||||
const remove = filename => {
|
||||
fs.remove(filename, err => {
|
||||
if (err) console.log(err)
|
||||
|
@ -59,6 +59,7 @@
|
||||
"react": "^16.4.1",
|
||||
"react-dev-utils": "^5.0.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-live": "^1.10.1",
|
||||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
|
7
src/Head.js
Normal file
7
src/Head.js
Normal file
@ -0,0 +1,7 @@
|
||||
export { Helmet as default } from 'react-helmet'
|
||||
|
||||
// only needed if customizing api
|
||||
// import React from 'react'
|
||||
// import { Helmet } from 'react-helmet'
|
||||
// export default props =>
|
||||
// <Helmet {...props} />
|
@ -118,7 +118,6 @@ export default class Root extends React.Component {
|
||||
basename,
|
||||
path = '/'
|
||||
} = this.props
|
||||
console.log('routes', routes)
|
||||
|
||||
return (
|
||||
<Router
|
||||
|
@ -1,5 +1,6 @@
|
||||
export { Link, NavLink } from 'react-router-dom'
|
||||
export { default as ScopeProvider } from './ScopeProvider'
|
||||
export { default as Head } from './Head'
|
||||
export { default as LiveEditor } from './LiveEditor'
|
||||
export { default as LivePreview } from './LivePreview'
|
||||
export { default as FileList } from './FileList'
|
||||
|
Loading…
Reference in New Issue
Block a user