c8r/x0
1
1
Fork 0
mirror of https://github.com/c8r/x0.git synced 2024-08-16 17:00:24 +03:00
Code Issues Projects Releases Wiki Activity

Add Head component

Browse Source
This commit is contained in:
Brent Jackson 2018-06-19 17:27:02 -04:00
parent 6129487190
commit fd207eb0a7
7 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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)

6
docs/_app.js
View File

@ -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
View File

@ -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)

1
package.json
View File

@ -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
View 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} />

1
src/entry.js
View File

@ -118,7 +118,6 @@ export default class Root extends React.Component {
basename,
path = '/'
} = this.props
console.log('routes', routes)
return (
<Router

1
src/index.js
View File

@ -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'