Skip to content

Commit 39ac570

Browse files
leebyronleebyron
committed
pure component for Site wrapper
1 parent d61198c commit 39ac570

File tree

1 file changed

+92
-100
lines changed

1 file changed

+92
-100
lines changed

‎site/_core/Site.js

Lines changed: 92 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -11,114 +11,106 @@ var HeaderLinks = require('./HeaderLinks');
1111
var Search = require('./Search');
1212
var SiteData = require('./SiteData');
1313

14-
var Site = React.createClass({
15-
render: function() {
16-
var page = this.props.page;
17-
var suffix = this.props.category || 'GraphQL';
18-
var pageTitle = this.props.title ?
19-
`${this.props.title} | ${suffix}` :
20-
`GraphQL | ${SiteData.description}`;
21-
return (
22-
<html>
23-
<head>
24-
<meta charSet="utf-8" />
25-
<meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
26-
<title>{pageTitle}</title>
27-
<meta name="viewport" content="width=640" />
28-
<meta property="og:title" content="GraphQL: A query language for APIs." />
29-
<meta property="og:description" content="GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools." />
30-
<meta property="og:type" content="website" />
31-
<meta property="og:url" content="http://graphql.org/" />
32-
<meta property="og:image" content="/img/og_image.png" />
33-
<meta property="og:image:type" content="image/png" />
34-
<meta name="twitter:card" content="summary" />
35-
<meta name="twitter:site" content="@graphql" />
36-
<meta name="twitter:title" content="GraphQL: A query language for APIs." />
37-
<meta name="twitter:description" content="GraphQL gives clients the power to ask for exactly what they need and nothing more, making it easier to evolve APIs over time." />
38-
<meta name="twitter:image" content="/img/twitter_image.png" />
39-
<link rel="shortcut icon" href="/img/favicon.png" />
40-
<link rel="home" type="application/rss+xml" href="/blog/rss.xml" title="GraphQL Team Blog" />
41-
<link rel="stylesheet" href="/style.css" />
42-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300" />
43-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,600" />
44-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
45-
</head>
46-
<body className={this.props.className}>
14+
export default ({ page, category, title, section, className, noSearch, children }) =>
15+
<html>
16+
<head>
17+
<meta charSet="utf-8" />
18+
<meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
19+
<title>
20+
{title ?
21+
`${title} | ${category || 'GraphQL'}` :
22+
`GraphQL | ${SiteData.description}`}
23+
</title>
24+
<meta name="viewport" content="width=640" />
25+
<meta property="og:title" content="GraphQL: A query language for APIs." />
26+
<meta property="og:description" content="GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools." />
27+
<meta property="og:type" content="website" />
28+
<meta property="og:url" content="http://graphql.org/" />
29+
<meta property="og:image" content="/img/og_image.png" />
30+
<meta property="og:image:type" content="image/png" />
31+
<meta name="twitter:card" content="summary" />
32+
<meta name="twitter:site" content="@graphql" />
33+
<meta name="twitter:title" content="GraphQL: A query language for APIs." />
34+
<meta name="twitter:description" content="GraphQL gives clients the power to ask for exactly what they need and nothing more, making it easier to evolve APIs over time." />
35+
<meta name="twitter:image" content="/img/twitter_image.png" />
36+
<link rel="shortcut icon" href="/img/favicon.png" />
37+
<link rel="home" type="application/rss+xml" href="/blog/rss.xml" title="GraphQL Team Blog" />
38+
<link rel="stylesheet" href="/style.css" />
39+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300" />
40+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,600" />
41+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
42+
</head>
43+
<body className={className}>
4744

48-
<header>
49-
<section>
50-
<a className="nav-home" href="/">
51-
<img className="nav-logo" src="/img/logo.svg" width="30" height="30" />
52-
GraphQL
53-
</a>
54-
<HeaderLinks section={this.props.section} />
55-
{this.props.noSearch || <Search />}
56-
</section>
57-
</header>
45+
<header>
46+
<section>
47+
<a className="nav-home" href="/">
48+
<img className="nav-logo" src="/img/logo.svg" width="30" height="30" />
49+
GraphQL
50+
</a>
51+
<HeaderLinks section={section} />
52+
{noSearch || <Search />}
53+
</section>
54+
</header>
5855

59-
{this.props.children}
56+
{children}
6057

61-
<footer>
62-
<section className="sitemap">
63-
<a href="/" className="nav-home" />
64-
<div>
65-
<h5><a href="/learn/">Learn</a></h5>
66-
<a href="/learn/">Introduction</a>
67-
<a href="/learn/queries/">Query Language</a>
68-
<a href="/learn/schema/">Type System</a>
69-
<a href="/learn/execution/">Execution</a>
70-
<a href="/learn/best-practices/">Best Practices</a>
71-
</div>
72-
<div>
73-
<h5><a href="/code">Code</a></h5>
74-
<a href="/code/#graphql-server-libraries">Servers</a>
75-
<a href="/code/#graphql-clients">Clients</a>
76-
<a href="/code/#tools">Tools</a>
77-
</div>
78-
<div>
79-
<h5><a href="/community">Community</a></h5>
80-
<a href="/community/upcoming-events/">Upcoming Events</a>
81-
<a href="http://stackoverflow.com/questions/tagged/graphql" target="_blank" rel="noopener noreferrer">Stack Overflow</a>
82-
<a href="https://www.facebook.com/groups/graphql.community/" target="_blank" rel="noopener noreferrer">Facebook Group</a>
83-
<a href="https://twitter.com/GraphQL" target="_blank" rel="noopener noreferrer">Twitter</a>
84-
</div>
85-
<div>
86-
<h5>More</h5>
87-
<a href="/blog">GraphQL Team Blog</a>
88-
<a href="http://facebook.github.io/graphql/" target="_blank" rel="noopener noreferrer">Read the Spec</a>
89-
<a href="https://github.com/graphql" target="_blank" rel="noopener noreferrer">GitHub</a>
90-
{page && <a href={'https://github.com/graphql/graphql.github.io/edit/source/site/' + page.relPath} target="_blank" rel="noopener noreferrer">Edit this page &#x270E;</a>}
91-
</div>
92-
</section>
93-
<a href="https://code.facebook.com/projects/" target="_blank" rel="noopener noreferrer" className="fbOpenSource">
94-
<img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45" />
95-
</a>
96-
<section className="copyright">
97-
Copyright &copy; 2016 Facebook Inc. The contents of this page are licensed BSD-3-Clause.
98-
</section>
99-
</footer>
58+
<footer>
59+
<section className="sitemap">
60+
<a href="/" className="nav-home" />
61+
<div>
62+
<h5><a href="/learn/">Learn</a></h5>
63+
<a href="/learn/">Introduction</a>
64+
<a href="/learn/queries/">Query Language</a>
65+
<a href="/learn/schema/">Type System</a>
66+
<a href="/learn/execution/">Execution</a>
67+
<a href="/learn/best-practices/">Best Practices</a>
68+
</div>
69+
<div>
70+
<h5><a href="/code">Code</a></h5>
71+
<a href="/code/#graphql-server-libraries">Servers</a>
72+
<a href="/code/#graphql-clients">Clients</a>
73+
<a href="/code/#tools">Tools</a>
74+
</div>
75+
<div>
76+
<h5><a href="/community">Community</a></h5>
77+
<a href="/community/upcoming-events/">Upcoming Events</a>
78+
<a href="http://stackoverflow.com/questions/tagged/graphql" target="_blank" rel="noopener noreferrer">Stack Overflow</a>
79+
<a href="https://www.facebook.com/groups/graphql.community/" target="_blank" rel="noopener noreferrer">Facebook Group</a>
80+
<a href="https://twitter.com/GraphQL" target="_blank" rel="noopener noreferrer">Twitter</a>
81+
</div>
82+
<div>
83+
<h5>More</h5>
84+
<a href="/blog">GraphQL Team Blog</a>
85+
<a href="http://facebook.github.io/graphql/" target="_blank" rel="noopener noreferrer">Read the Spec</a>
86+
<a href="https://github.com/graphql" target="_blank" rel="noopener noreferrer">GitHub</a>
87+
{page && <a href={'https://github.com/graphql/graphql.github.io/edit/source/site/' + page.relPath} target="_blank" rel="noopener noreferrer">Edit this page &#x270E;</a>}
88+
</div>
89+
</section>
90+
<a href="https://code.facebook.com/projects/" target="_blank" rel="noopener noreferrer" className="fbOpenSource">
91+
<img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45" />
92+
</a>
93+
<section className="copyright">
94+
Copyright &copy; 2016 Facebook Inc. The contents of this page are licensed BSD-3-Clause.
95+
</section>
96+
</footer>
10097

101-
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
102-
<script dangerouslySetInnerHTML={{__html: `
103-
docsearch({
104-
apiKey: 'd103541f3e6041148aade2e746ed4d61',
105-
indexName: 'graphql',
106-
inputSelector: '#algolia-search-input'
107-
});
108-
`}} />
109-
<script dangerouslySetInnerHTML={{__html: `
98+
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
99+
<script dangerouslySetInnerHTML={{__html: `
100+
docsearch({
101+
apiKey: 'd103541f3e6041148aade2e746ed4d61',
102+
indexName: 'graphql',
103+
inputSelector: '#algolia-search-input'
104+
});
105+
`}} />
106+
<script dangerouslySetInnerHTML={{__html: `
110107
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
111108
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
112109
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
113110
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
114111
115112
ga('create', 'UA-44373548-16', 'auto');
116113
ga('send', 'pageview');
117-
`}} />
118-
</body>
119-
</html>
120-
);
121-
}
122-
});
123-
124-
module.exports = Site;
114+
`}} />
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)