Skip to content

Commit 3d2f447

Browse files
committed
Initial release
0 parents  commit 3d2f447

20 files changed

+1280
-0
lines changed

.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"stage": 0
3+
}

.editorconfig

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 4
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true

.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/vendor

.eslintrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "eslint-config-nfl"
3+
}

.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
dist/
3+
build/
4+
npm-debug.log
5+
.DS_Store

.npmignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
src/
3+
build/
4+
.arcconfig

CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
4+
5+
- [1.0.0](#100)
6+
7+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8+
9+
## 1.0.0
10+
11+
Features:
12+
13+
- Initial release

CONTRIBUTING.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Contributing to this project
2+
3+
Please take a moment to review this document in order to make the contribution
4+
process easy and effective for everyone involved.
5+
6+
_**Please Note:** These guidelines are adapted from [@necolas](https://github.com/necolas)'s
7+
[issue-guidelines](https://github.com/necolas/issue-guidelines) and serve as
8+
an excellent starting point for contributing to any open source project._
9+
10+
<a name="pull-requests"></a>
11+
## Pull requests
12+
13+
Good pull requests - patches, improvements, new features - are a fantastic
14+
help. They should remain focused in scope and avoid containing unrelated
15+
commits.
16+
17+
**Please ask first** before embarking on any significant pull request (e.g.
18+
implementing features, refactoring code, porting to a different language),
19+
otherwise you risk spending a lot of time working on something that the
20+
project's developers might not want to merge into the project.
21+
22+
<a name="development"></a>
23+
## Development Process
24+
Here are some guidelines to making changes and preparing your PR:
25+
26+
1. Make your proposed changes to the repository, along with updating/adding test cases.
27+
2. (Optional) If you prefer to also test your changes in a real application, you can do the following:
28+
1. Run `npm link` in `react-helmet` repository.
29+
2. `cd` to your favorite React application, run `npm link react-helmet` to point to your local repository.
30+
3. Run your application to verify your changes.
31+
3. Run `npm test` to verify all test cases pass.
32+
4. Run `npm run lint` to verify there are no linting errors.

LICENSE

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2015 NFL
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

README.md

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<img src="http://static.nfl.com/static/content/public/static/img/logos/nfl-engineering-light.svg" width="300" />
2+
# React Helmet
3+
This reusable React component will manage all of your changes to the document head with support for document title, meta & link tags.
4+
5+
Inspired by [react-document-title](https://github.com/gaearon/react-document-title)
6+
7+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
8+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
9+
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
10+
11+
- [Examples](#examples)
12+
- [Features](#features)
13+
- [System Requirements](#system-requirements)
14+
- [Installation](#installation)
15+
- [Server Usage](#server-usage)
16+
- [Use Cases](#use-cases)
17+
- [Contributing to this project](#contributing-to-this-project)
18+
- [License](#license)
19+
20+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
21+
22+
## Examples
23+
```javascript
24+
import React from "react";
25+
import Helmet from "react-helmet";
26+
27+
export default class Application extends React.Component {
28+
render() {
29+
return (
30+
<div className="application">
31+
<Helmet title="My Title" />
32+
...
33+
</div>
34+
);
35+
}
36+
};
37+
```
38+
39+
```javascript
40+
import React from "react";
41+
import Helmet from "react-helmet";
42+
43+
export default class Application extends React.Component {
44+
render() {
45+
return (
46+
<div className="application">
47+
<Helmet
48+
title="My Title"
49+
meta={[
50+
{"name": "description", "content": "Helmet application"},
51+
{"property": "og:type", "content": "article"}
52+
]}
53+
link={[
54+
{"rel": "canonical", "href": "http://mysite.com/example"},
55+
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
56+
{"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
57+
]}
58+
/>
59+
...
60+
</div>
61+
);
62+
}
63+
};
64+
```
65+
66+
## Features
67+
- Supports isomorphic environment.
68+
- Nested components override duplicate head changes.
69+
- Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
70+
- Only valid `meta`/`link` key names allowed.
71+
72+
## System Requirements
73+
- `npm >=2.7.0`
74+
75+
## Installation
76+
```
77+
npm install --save react-helmet
78+
```
79+
80+
## Server Usage
81+
To use on the server, call `rewind()` after `React.renderToString` to get all the head changes to use in your prerender.
82+
```javascript
83+
React.renderToString(<Handler />);
84+
let head = Helmet.constructor.rewind();
85+
86+
head.title
87+
head.meta
88+
head.link
89+
```
90+
91+
**Note:** Because this component tracks mounted instances you will need to call rewind on the server to avoid a memory leak.
92+
93+
## Use Cases
94+
1. Nested or latter components will override duplicate changes.
95+
```javascript
96+
<Helmet
97+
title="My Title"
98+
meta={[
99+
{"name": "description", "content": "Helmet application"}
100+
]}
101+
/>
102+
<Helmet
103+
title="Nested Title"
104+
meta={[
105+
{"name": "description", "content": "Nested component"}
106+
]}
107+
/>
108+
```
109+
Yields:
110+
```
111+
<head>
112+
<title>Nested Title</title>
113+
<meta name="description" content="Nested component" />
114+
</head>
115+
```
116+
117+
2. Duplicate `meta` and/or `link` tags in the same component are preserved
118+
```javascript
119+
<Helmet
120+
link={[
121+
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
122+
{"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
123+
]}
124+
/>
125+
```
126+
Yields:
127+
```
128+
<head>
129+
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
130+
<link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
131+
</head>
132+
```
133+
134+
3. Duplicate tags can still be overwritten
135+
```javascript
136+
<Helmet
137+
link={[
138+
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
139+
{"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
140+
]}
141+
/>
142+
<Helmet
143+
link={[
144+
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"}
145+
]}
146+
/>
147+
```
148+
Yields:
149+
```
150+
<head>
151+
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png" />
152+
</head>
153+
```
154+
155+
## Contributing to this project
156+
Please take a moment to review the [guidelines for contributing](CONTRIBUTING.md).
157+
158+
* [Pull requests](CONTRIBUTING.md#pull-requests)
159+
* [Development Process](CONTRIBUTING.md#development)
160+
161+
## License
162+
163+
MIT

config/clean.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = function (gulp) {
2+
var del = require("del");
3+
4+
// Remove existing stuff
5+
gulp.task("clean", function (cb) {
6+
del("./dist", cb);
7+
});
8+
};

config/eslint.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
module.exports = function (gulp, config) {
2+
var eslint = require("gulp-eslint"),
3+
gutil = require("gulp-util"),
4+
debug = require("gulp-debug"),
5+
cached = require("gulp-cached"),
6+
gulpif = require("gulp-if"),
7+
notify = require("gulp-notify"),
8+
chalk = require("chalk");
9+
10+
gulp.task("eslint", function () {
11+
return gulp.src(config.files || "**/*.js{,x}")
12+
.pipe(cached("eslint"))
13+
.pipe(gulpif(gutil.env.debug, debug()))
14+
.pipe(eslint())
15+
.pipe(eslint.format())
16+
.pipe(notify(function (file) {
17+
if (!(file.eslint.messages || []).length) {
18+
// Don't show something if success
19+
return false;
20+
}
21+
22+
var errors = file.eslint.messages.map(function (data) {
23+
if (data.message) {
24+
return "(" + data.line + ":" + data.column + ") " + data.message;
25+
}
26+
}).join("\n");
27+
28+
var errorString = file.relative + " (" + file.eslint.messages.length + " errors)\n" + errors;
29+
30+
if (process.platform === "win32") {
31+
errorString = chalk.stripColor(errorString);
32+
}
33+
34+
return errorString;
35+
}));
36+
});
37+
};

gulpfile.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// Dependencies
2+
var gulp = require("gulp");
3+
4+
var jsFiles = [
5+
"{config,src}/**/*.{js,jsx}",
6+
"*.js{,x}"
7+
];
8+
9+
// Clean build folder
10+
require("./config/clean")(gulp);
11+
12+
// Link your JavaScript
13+
require("./config/eslint")(gulp, {
14+
files: jsFiles
15+
});

0 commit comments

Comments
 (0)