npm package: @fnet/web-app-manifest
Description: Web App Manifest Generator
Author: Gultekin Boyraz
Latest version: 0.1.5

# @fnet/web-app-manifest

This project provides a utility for generating a web app manifest file and creating a set of application icons from a given image. It simplifies the process of preparing the necessary files for making a web application installable on devices like smartphones and tablets.

## How It Works

The tool takes a provided image and generates several resized versions suitable for use as app icons. It also compiles these into a `favicon.ico` file that includes multiple sizes for broader compatibility. Alongside the image processing, it generates a `manifest.json` file, containing details about the app such as its name, description, and appearance settings ((e.g., display mode, theme color).

## Key Features

- Resizes a given image file to multiple standard icon sizes required by web app manifests
- Supports input image formats including PNG, JPEG, and others compatible with Sharp
- Creates a `favicon.ico` containing 16x16, 32x32, and 48x48 icons from the provided image
- Generates a custom `manifest.json` with app details like name, description, and start URL
- Saves all output files in a specified directory with the icons housed under an `img` sub-folder

## Conclusion

The @fnet/web-app-manifest project is a handy tool for developers looking to streamline the setup of web app manifests and ensure consistent app icon presentation. It's a straightforward solution for managing the image and configuration needs of modern web applications.


# @fnet/web-app-manifest Developer Guide

## Overview

The `@fnet/web-app-manifest` library is designed to assist developers in generating web app manifest files alongside corresponding icons required for web applications. With this library, you can easily create a `manifest.json` file and generate various icon sizes from a source image, suitable for web applications. This also includes the creation of a favicon file (`favicon.ico`) containing multiple sizes commonly used by browsers.

## Installation

To include the `@fnet/web-app-manifest` library in your project, use either npm or yarn to install it:

```bash
npm install @fnet/web-app-manifest
```

or

```bash
yarn add @fnet/web-app-manifest
```

## Usage

Below you'll find an example demonstrating how to use the library:

```javascript
import generateManifest from '@fnet/web-app-manifest';

const args = {
  name: 'My Web App',
  short_name: 'WebApp',
  description: 'An example web application.',
  start_url: '/',
  display: 'standalone',
  background_color: '#FFFFFF',
  theme_color: '#000000',
  imagePath: './path/to/your/source-image.png',
  outDir: './output-directory'
};

generateManifest(args).then(() => {
  console.log('Web app manifest and icons generated successfully.');
}).catch(err => {
  console.error('Error generating manifest:', err);
});
```

## Examples

### Basic Example

This example shows the necessary steps to generate a manifest and icons:

1. **Specify Application Details**: Provide the name, description, colors, and display preferences for your web app.

2. **Image Source**: Supply a path to the source image that will be used to generate icons of various sizes.

3. **Output Directory**: Decide where the generated files will be saved.

```javascript
const args = {
  name: 'Sample Application',
  short_name: 'Sample',
  description: 'This is a sample application.',
  start_url: '/',
  display: 'standalone',
  background_color: '#FFFFFF',
  theme_color: '#0A0A0A',
  imagePath: './icon-source.png', // Path to your source image
  outDir: './public/assets'
};

generateManifest(args);
```

### Supported Image Formats

The library uses [sharp](https://github.com/lovell/sharp) to process images, so it supports common image formats like PNG, JPEG, and others supported by sharp. Ensure your input image is appropriately prepared to create high-quality icons.

## Acknowledgement

This library utilizes `sharp` for image processing and `png-to-ico` for generating ICO files. We acknowledge the contributions of these open-source libraries.



# Input Schema
```yaml
$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  name:
    type: string
    description: The name of the application.
    default: Default App Name
  short_name:
    type: string
    description: The short name of the application.
    default: App
  description:
    type: string
    description: A description of the application.
    default: This is a default description.
  start_url:
    type: string
    description: The start URL of the application.
    default: /
  display:
    type: string
    description: Display mode (e.g., 'standalone', 'fullscreen').
    default: standalone
  background_color:
    type: string
    description: Background color of the application.
    default: "#FFFFFF"
  theme_color:
    type: string
    description: Theme color of the application.
    default: "#000000"
  imagePath:
    type: string
    description: Path to the source image file (required for icons generation).
  outDir:
    type: string
    description: Path to the output directory where files will be generated.
required:
  - imagePath

```