-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Paul Rehkugler
committed
Aug 27, 2018
0 parents
commit 6a9876e
Showing
11 changed files
with
10,639 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
node_modules | ||
reports |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
# Contributing | ||
|
||
We want to make contributing to webpack-web-app-manifest-plugin as easy and transparent as possible. If you run into problems, please open an issue. We also actively welcome pull requests. | ||
|
||
## Pull Requests | ||
|
||
1. Fork the repo and create your branch from `master`. | ||
2. If you've added code that should be tested, add tests. | ||
3. If you've changed APIs, update the documentation. | ||
4. Ensure the test suite passes. | ||
5. If you haven't already, you will be prompted to complete the Contributor License Agreement ("CLA"). | ||
|
||
## License | ||
|
||
By contributing to webpack-web-app-manifest-plugin you agree that your contributions will be licensed under its MIT license. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
Copyright 2018 Tumblr, Inc. | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
![webpack-web-app-manifest-plugin logo](/assets/logo.gif) | ||
|
||
# webpack-web-app-manifest-plugin | ||
|
||
`webpack-web-app-manifest-plugin` is a webpack plugin that generates a PWA manifest and integrates with the assets JSON generated by [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin). | ||
|
||
# How to install it | ||
|
||
``` | ||
npm install --save-dev webpack-web-app-manifest-plugin | ||
``` | ||
|
||
or | ||
|
||
``` | ||
yarn add webpack-web-app-manifest-plugin --dev | ||
``` | ||
|
||
# Using it the easy way | ||
|
||
Name all of your icon files `manifest/icon_[square dimension].(png|jpeg|jpg)`. If you have a different naming scheme for your files, check out the section [Using it the hard way](#using-it-the-hard-way) below. | ||
|
||
In your webpack config file: | ||
|
||
```js | ||
import AppManifestPlugin from 'webpack-web-app-manifest-plugin'; | ||
|
||
... | ||
|
||
plugins: [ | ||
new AppManifestPlugin({ | ||
content: { | ||
name: 'Tumblr', | ||
short_name: 'Tumblr', | ||
background_color: '#36465d', | ||
}, | ||
destination: '/manifest', | ||
}), | ||
], | ||
|
||
... | ||
``` | ||
|
||
To access the app manifest file path from your asset manifest: | ||
|
||
```jsx | ||
const manifest = // however you usually access your asset manifest in code | ||
const appManifestPath = manifest['app-manifest'].json; | ||
|
||
... | ||
|
||
<link rel="manifest" href={appManifestPath} /> | ||
``` | ||
|
||
# Using it the hard way | ||
|
||
If you don't want to name your icons based on our naming scheme, you will want to implement a few functions that are passed into the plugin. | ||
|
||
## `isAssetManifestIcon()` | ||
|
||
`isAssetManifestIcon` is a function to determine if a webpack asset should be included as an icon in the web app manifest. The function accepts a `filename` parameter and returns true or false. | ||
|
||
For example, if you only wanted to include a specific list of files, you could implement it like this: | ||
|
||
```js | ||
plugins: [ | ||
new AppManifestPlugin({ | ||
... | ||
isAssetManifestIcon: (fileName) => ['myIcon1.png', 'myIcon2.png'].indexOf(fileName) >= 0, | ||
}), | ||
], | ||
``` | ||
|
||
## `getIconSize()` | ||
|
||
`getIconSize` is a function to determine the icon size of any asset that passes the check `isAssetManifestIcon()`. The function accepts a `fileName` parameter and returns an object `{ width, height }`. | ||
|
||
For example, if you wanted to hardcode a list of sizes for your icons, you could implement it like this: | ||
|
||
```js | ||
const iconSizes = { | ||
'myIcon1.png': { width: 120, height: 120}, | ||
'myIcon2.png': { width: 80, height: 80}, | ||
}; | ||
|
||
... | ||
|
||
plugins: [ | ||
new AppManifestPlugin({ | ||
... | ||
getIconSize: (fileName) => iconSizes[fileName], | ||
}), | ||
], | ||
``` | ||
|
||
## `getIconType()` | ||
|
||
`getIconType` is a function to determine the type of any asset that passes the check `isAssetManifestIcon()`. The function accepts a `fileName` parameter and returns a string describing the mime type of the asset, ex. "image/png". | ||
|
||
For example, if you wanted to hardcode a list of mime types for your icons, you could implement it like this: | ||
|
||
```js | ||
const iconTypes = { 'myIcon1.png': 'image/png', 'myIcon2.jpg': 'image/jpeg' }; | ||
|
||
... | ||
|
||
plugins: [ | ||
new AppManifestPlugin({ | ||
... | ||
getIconType: (fileName) => iconTypes[fileName], | ||
}), | ||
], | ||
``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
module.exports = require('./src/plugin.js'); |
Oops, something went wrong.