imgix / motif

A simple Rails app to create responsive social images

Motif

Motif is a service to create and serve responsive social images, fit to drop into any og:image or twitter:image meta tag.

Motif uses imgix for the image compositing, and PhantomJS for discovering information about the URL entered.

You can see a version of Motif running at https://motif.imgix.com.

It is built with Rails 5 and vue.js.

Running Locally

You'll need:

• Node
• Ruby 2.3.0
  • rvm users can run rvm install 2.3.0
• Bower
  • npm install -g bower
• Heroku Toolbelt
• libpq-dev
  • on RHEL systems: yum install postgresql-devel
  • for Mac: brew install postgresql
  • for Mac in case postgres installed via macports than gem install pg -- --with-pg-config=/opt/local/lib/postgresql[version number]/bin/pg_config
• phantomjs
  • brew install phantomjs
  • or npm install -g phantomjs

Then, just run:

• bundle install
• bin/rails db:setup
• bower install
• heroku local

Deploying to Heroku

You will need to add 2 custom buildpacks if you would like to deploy to Heroku:

• https://github.com/kellysutton/heroku-buildpack-phantomjs
• https://github.com/qnyp/heroku-buildpack-ruby-bower.git

To do so with a new app:

• `heroku create -a my-motif --buildpack https://github.com/kellysutton/heroku-buildpack-phantomjs
• heroku buildpacks:add https://github.com/qnyp/heroku-buildpack-ruby-bower.git

From there, it's just a simple:

• git push heroku master

motif's Issues

"Show Me a Demo" doesn't work

Steps to reproduce:

1. Open http://motif.imgix.com/
2. Click on "Show Me a Demo"

Result: https://www.dropbox.com/s/78tcn6qy9651zp5/Screenshot%202016-03-19%2017.51.45.png?dl=0

1. Let's Go! button disappears and "Show Me a Demo" button stays
2. No results shown

Expected:

1. Both button replaced with the "Start Over"
2. Results shown for the random link