Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

roll-amp

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

roll-amp

  • 0.2.0
  • Rubygems
  • Socket score

Version published
Maintainers
1
Created
Source

AMP in Rails apps

Utilities to simplify Accelerated Mobile Pages (AMP) implementation in Rails apps.

Travis Build Status Appveyor Build Status Test Coverage Code Climate Issue Count

Features

Implemented:

  • Tag to include AMP boilerplate CSS.
  • Tag to include AMP base JS.
  • Tag to include custom CSS.
  • Google Analytics integration.

Todo:

  • AMP validation via Ruby tests.
  • ...

Platforms

Minimum supported MRI version is 2.2.6. JRuby is not supported. The gem should work on Mac, Linux and Windows, however testing is limited as follows:

  • Mac OS X (development machine)
    • 2.4.0
  • Windows (via appveyor)
    • 2.3.3
    • 2.2.6
  • Ubuntu (via travis-ci)
    • 2.4.0
    • 2.3.3
    • 2.2.6
    • Head

Installation

Add this line to your application's Gemfile:

gem 'roll-amp'

And then execute:

$ bundle

Or install it yourself as:

$ gem install roll-amp

Usage

Include main JS

<%= amp_js %>

Includes https://cdn.ampproject.org/v0.js script at a place where the amp_js tag was specified. This tag is required for AMP.

Include boilerplate CSS

<%= amp_boilerplate %>

Includes basic CSS suggested at https://www.ampproject.org/docs/get_started/create/basic_markup

Include custom CSS

  1. Create CSS (SASS, SCSS) file under app/stylesheets of your Rails app. For example app/stylesheets/amp/application.scss.
  2. Add the following line to your AMP layout:
<%= amp_custom_style('amp/application') %>

When amp/application is available in the assets pipeline, its content will be loaded from there. Otherwise such file will be searched in the public directory. Usually it’s sufficient to create CSS file and Rails will handle the rest. Please note, AMP sets 50K limit on CSS size. If you include larger stylesheet your pages won’t be valid.

Google Analytics

  1. Insert the following tag before amp_js:
<%= amp_analytics_js %>
  1. Add analytics configuration to the body:
<%=
  amp_google_analytics(
    'UA-00000-1',
    {
      trackPageview: {
        on: 'visible',
        request: 'pageview'
      }
    }
  )
%>

First parameter is Google Analytics account ID. Second parameter defines triggers. Please see Adding Analytics to your AMP pages to learn about triggers. The example above shows the most common configuration.

Layout example

<!doctype html>
<html ⚡>
  <head>
    <%= amp_analytics_js %>
    <%= amp_js %>
    <%= csrf_meta_tags %>
    <%= amp_boilerplate %>
    <%= amp_custom_style('amp/application') %>
  </head>
  <body>
    <%=
      amp_google_analytics(
        'UA-00000-1',
        {
          trackPageview: {
            on: 'visible',
            request: 'pageview'
          }
        }
      )
    %>
    <%= yield %>
  </body>
</html>

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/roll-rails/roll-amp. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.

FAQs

Package last updated on 25 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc