https://github.com/astronomersiva/mockgen

Generates device mockups for a given URL using Puppeteer and Facebook Devices.
https://github.com/astronomersiva/mockgen

design mockup-generator puppeteer

Last synced: about 1 month ago
JSON representation

Generates device mockups for a given URL using Puppeteer and Facebook Devices.

• Host: GitHub
• URL: https://github.com/astronomersiva/mockgen
• Owner: astronomersiva
• Created: 2018-04-14T07:07:25.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-04-15T10:48:17.000Z (over 6 years ago)
• Last Synced: 2024-09-30T07:41:38.663Z (about 2 months ago)
• Topics: design, mockup-generator, puppeteer
• Language: JavaScript
• Homepage:
• Size: 1.08 MB
• Stars: 4
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# mockgen ![Travis Build Status](https://travis-ci.org/astronomersiva/mockgen.svg?branch=master) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)

Generates device mockups for a given URL using Puppeteer and Facebook Devices.

### Install

* Run `npm install -g @astronomersiva/mockgen`.

* Download and extract [Facebook Devices](https://facebook.design/devices).

* You will also need `cairo` installed

* For macOS, run `brew install pkg-config cairo libpng jpeg giflib`.

* For Ubuntu, run `sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++`.

* For Windows, follow these [instructions](https://github.com/Automattic/node-canvas/wiki/Installation---Windows).

### Usage

Run `mockgen -u URL` to generate a mockup for the given URL.

### Flags

* `-a, --assets` - Path to folder that contains Facebook Devices. Defaults to the current directory. Example, `~/Downloads`.

* `-d, --device` - Optional. The device for which you want a mockup. If not passed, a menu will be displayed with the list of available devices.

* `-s, --shadows` - Optional, defaults to true. If the base images used for the mockups should have shadows.

* `-u, --url` - The URL of the website that you wish to mockup.

* `-h, --help` - Get the list of flags.

* `-v, --version` - Get the current version of mockgen.

### Screenshot

![mockgen gif](mockgen.gif)

### FAQ

**Will more devices be supported?**

Yes, I will be adding more devices gradually. The reason for this is that the base images have x and y offsets which need to be calculated. You are welcome to contribute :)

**Will landscape mode be supported?**

Yes, once support for rotating images is available in [merge-images](https://github.com/lukechilds/merge-images). I have started working on it.

**Why is Facebook Devices not bundled with mockgen?**

Facebook's TOC are a little vague but from what I understand, it prohibits people from repackaging and redistributing.