Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Rehkugler committed Aug 27, 2018
0 parents commit 6a9876e
Show file tree
Hide file tree
Showing 11 changed files with 10,639 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
reports
15 changes: 15 additions & 0 deletions CONTRIBUTING.md
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.
7 changes: 7 additions & 0 deletions LICENSE
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.
113 changes: 113 additions & 0 deletions README.md
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],
}),
],
```
Binary file added assets/logo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./src/plugin.js');
Loading

0 comments on commit 6a9876e

Please sign in to comment.