const WindowTitle = ({ title }) => ( <Helmet> <title>{ title }</title> </Helmet> )
static async getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); // see https://github.com/nfl/react-helmet#server-usage for more information // 'head' was occupied by 'renderPage().head', we cannot use it return { ...page, styleTags, helmet: Helmet.rewind() }; }
render() { const { children, config } = this.props; return ( <div> <Helmet> <meta name="description" content={config.siteDescription} /> <html lang="en" /> </Helmet> <Global /> {children} </div> ); }
const Default = (props: Props) => ( <App> <Helmet> <title> {props.title && props.title !== '' ? `${props.title} :: RAN! React . GraphQL . Next.js Toolkit` : 'RAN! React . GraphQL . Next.js Toolkit'} </title> </Helmet> <Header pathname={props.router.url.pathname} /> <ProjectInfo /> {props.children} <NetworkStatus /> </App> )
render() { return ( <div className="index-container"> <Helmet title={config.siteTitleInHeader} /> <main> <MainHeader siteTitle={config.siteTitle} siteDescription={config.siteDescription} location={this.props.location} /> <Checkout result={this.result} /> <Footer fixed /> </main> </div> ); }
render() { if (this.props.location.pathname === "apidocs") { // The other app manages apidocs this.props.location.reload(); } const { children } = this.props; return ( <div> <Helmet> <title>{`${config.siteTitle} | ${this.getLocalTitle()}`}</title> <meta name="description" content={config.siteDescription} /> </Helmet> <ThemeProvider theme={theme}> {children()} </ThemeProvider> </div> ); }
render() { const postEdges = this.props.data.allMarkdownRemark.edges; return ( <div className="index-container"> <Helmet title={config.siteTitleInHeader} /> <SEO postEdges={postEdges} /> <main> <MainHeader siteTitle={config.siteTitle} siteDescription={config.siteDescription} location={this.props.location} /> <Highlights /> <Features /> <Demo /> <Footer /> </main> </div> ); }
render() { return ( <Layout> <Helmet title="Generic Page Title" /> <HeaderGeneric /> <div id="main"> <section id="content" className="main"> <span className="image main"><img src={pic04} alt="" /></span> <h2>Magna feugiat lorem</h2> <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis fames ac ante ipsum primis in faucibus.</p> <p>Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Consequat leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit enim turpis lorem ipsum dolor sit amet feugiat. Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet est velit quis lorem.</p> <h2>Tempus veroeros</h2> <p>Cep risus aliquam gravida cep ut lacus amet. Adipiscing faucibus nunc placerat. Tempus adipiscing turpis non blandit accumsan eget lacinia nunc integer interdum amet aliquam ut orci non col ut ut praesent. Semper amet interdum mi. Phasellus enim laoreet ac ac commodo faucibus faucibus. Curae ante vestibulum ante. Blandit. Ante accumsan nisi eu placerat gravida placerat adipiscing in risus fusce vitae ac mi accumsan nunc in accumsan tempor blandit aliquet aliquet lobortis. Ultricies blandit lobortis praesent turpis. Adipiscing accumsan adipiscing adipiscing ac lacinia cep. Orci blandit a iaculis adipiscing ac. Vivamus ornare laoreet odio vis praesent nunc lorem mi. Erat. Tempus sem faucibus ac id. Vis in blandit. Nascetur ultricies blandit ac. Arcu aliquam. Accumsan mi eget adipiscing nulla. Non vestibulum ac interdum condimentum semper commodo massa arcu.</p> </section> </div> </Layout> ) }
forwardRef(({ children, title = '', ...rest }, ref) => { return ( <div ref={ref} {...rest} > <Helmet> <title>{title}</title> </Helmet> {children} </div> ); })
// Component const Dashboard = () => ( <div> {/* SEO */} <Helmet> <title>Dashboard - Admin - Crate</title> </Helmet> {/* Top menu bar */} <AdminMenu/> {/* Page Content */} <Grid style={{ padding: '2em' }}> <GridCell> <p style={{ textAlign: 'center', color: grey3 }}>Nothing here yet. Choose an item from admin menu.</p> </GridCell> </Grid> </div> )
render() { return ( <div className="index-container"> <Helmet title={config.siteTitleInHeader} /> <main> <MainHeader siteTitle={config.siteTitle} siteDescription={config.siteDescription} location={this.props.location} /> <Checkout result={this.result} /> <Footer fixed /> </main> </div> ); }
// Component const Dashboard = () => ( <div> {/* SEO */} <Helmet> <title>Dashboard - Admin - Crate</title> </Helmet> {/* Top menu bar */} <AdminMenu/> {/* Page Content */} <Grid style={{ padding: '2em' }}> <GridCell> <p style={{ textAlign: 'center', color: grey3 }}>Nothing here yet. Choose an item from admin menu.</p> </GridCell> </Grid> </div> )
render() { return ( <Layout> <Helmet title="Generic Page Title" /> <HeaderGeneric /> <div id="main"> <section id="content" className="main"> <span className="image main"><img src={pic04} alt="" /></span> <h2>Magna feugiat lorem</h2> <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis fames ac ante ipsum primis in faucibus.</p> <p>Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Consequat leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit enim turpis lorem ipsum dolor sit amet feugiat. Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet est velit quis lorem.</p> <h2>Tempus veroeros</h2> <p>Cep risus aliquam gravida cep ut lacus amet. Adipiscing faucibus nunc placerat. Tempus adipiscing turpis non blandit accumsan eget lacinia nunc integer interdum amet aliquam ut orci non col ut ut praesent. Semper amet interdum mi. Phasellus enim laoreet ac ac commodo faucibus faucibus. Curae ante vestibulum ante. Blandit. Ante accumsan nisi eu placerat gravida placerat adipiscing in risus fusce vitae ac mi accumsan nunc in accumsan tempor blandit aliquet aliquet lobortis. Ultricies blandit lobortis praesent turpis. Adipiscing accumsan adipiscing adipiscing ac lacinia cep. Orci blandit a iaculis adipiscing ac. Vivamus ornare laoreet odio vis praesent nunc lorem mi. Erat. Tempus sem faucibus ac id. Vis in blandit. Nascetur ultricies blandit ac. Arcu aliquam. Accumsan mi eget adipiscing nulla. Non vestibulum ac interdum condimentum semper commodo massa arcu.</p> </section> </div> </Layout> ) }
render() { if (this.props.location.pathname === "apidocs") { // The other app manages apidocs this.props.location.reload(); } const { children } = this.props; return ( <div> <Helmet> <title>{`${config.siteTitle} | ${this.getLocalTitle()}`}</title> <meta name="description" content={config.siteDescription} /> </Helmet> <ThemeProvider theme={theme}> {children()} </ThemeProvider> </div> ); }
render() { const postEdges = this.props.data.allMarkdownRemark.edges; return ( <div className="index-container"> <Helmet title={config.siteTitleInHeader} /> <SEO postEdges={postEdges} /> <main> <MainHeader siteTitle={config.siteTitle} siteDescription={config.siteDescription} location={this.props.location} /> <Highlights /> <Features /> <Demo /> <Footer /> </main> </div> ); }