https://github.com/jcblw/metalsmith-phantom

A metalsmith plugin that will render frontend app html into a phantomjs browser and create static pages from it.
https://github.com/jcblw/metalsmith-phantom

Last synced: 24 days ago
JSON representation

A metalsmith plugin that will render frontend app html into a phantomjs browser and create static pages from it.

• Host: GitHub
• URL: https://github.com/jcblw/metalsmith-phantom
• Owner: jcblw
• Created: 2015-03-08T03:47:29.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-12T14:21:28.000Z (over 7 years ago)
• Last Synced: 2024-10-11T14:38:35.039Z (about 1 month ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MetalSmith Phantom

A [Metalsmith](http://www.metalsmith.io/) plugin that will render frontend app html into a [phantomjs](http://phantomjs.org/) browser and create static pages from it.

[![Build Status](https://travis-ci.org/jcblw/metalsmith-phantom.svg?branch=master)](https://travis-ci.org/jcblw/metalsmith-phantom)

> Your javascript will need to know how to handle these two states. I don't supply that

This helps with issues of Google indexing frontend only Javascript projects. 

## Setup 

First off you need a Metalsmith project. Then install `metalsmith-phantom` into your project. 

	npm install metalsmith-phantom -S

Next config the plugin to create the pages you would like.

```javascript

var 

  MetalSmith = require('metalsmith'),

  phantom = require('./plugins/phantom')

MetalSmith()

  .use(

    phantom({ 

      'foo/bar/index.html' : { // path to save at

        path: 'index.html', // path to hit with server relative to build dir

        query: { // query string on path

          foo: 'bar'

        }

      },

      port: 5000, // this is port the static server will start on

      timeout: 5000  // wait 5000ms before timingout 

    })

  )

  .build(function(err){

    if(err) throw err;

  });

```

Then make sure you have [PhantomJS installed](http://phantomjs.org/download.html).

## Signaling From Frontend

Right now, the best way to let PhantomJS know that your app is all rendered is to console log 'PageRendered'. eg.

```javascript

console.log('PageRendered')

```

More options hopefully will be available.