{"id":14969795,"url":"https://github.com/takafumir/rails_amp","last_synced_at":"2025-04-09T14:14:44.835Z","repository":{"id":56890427,"uuid":"81150065","full_name":"takafumir/rails_amp","owner":"takafumir","description":"RailsAmp is a Ruby on Rails plugin for AMP(Accelerated Mobile Pages).","archived":false,"fork":false,"pushed_at":"2022-05-21T18:06:50.000Z","size":162,"stargazers_count":65,"open_issues_count":6,"forks_count":26,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T04:28:40.280Z","etag":null,"topics":["accelerated-mobile-pages","amp","amp-html","amphtml","html","rails","rails-amp","ruby"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/takafumir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-07T00:58:37.000Z","updated_at":"2022-12-12T08:47:33.000Z","dependencies_parsed_at":"2022-08-20T15:20:46.029Z","dependency_job_id":null,"html_url":"https://github.com/takafumir/rails_amp","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takafumir%2Frails_amp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takafumir%2Frails_amp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takafumir%2Frails_amp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takafumir%2Frails_amp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/takafumir","download_url":"https://codeload.github.com/takafumir/rails_amp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054193,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accelerated-mobile-pages","amp","amp-html","amphtml","html","rails","rails-amp","ruby"],"created_at":"2024-09-24T13:42:23.817Z","updated_at":"2025-04-09T14:14:44.813Z","avatar_url":"https://github.com/takafumir.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RailsAmp [![Build Status](https://travis-ci.org/takafumir/rails_amp.svg?branch=master)](https://travis-ci.org/takafumir/rails_amp)\n\nRailsAmp is a Ruby on Rails plugin that makes it easy to build views for AMP(Accelerated Mobile Pages).\n\n## Supported Versions\n\nRails 4.1, 4.2, 5.0\n\n## Installation\n\nIn your Gemfile:\n\n```ruby\ngem 'rails_amp'\n```\n\nAnd install:\n\n```bash\n$ bundle install\n```\n\nAnd then, generate codes and files:\n\n```bash\n$ rails generate rails_amp:install\n```\n\nThis step generates the followings.\n\n```bash\ninsert  config/initializers/mime_types.rb\ncreate  config/rails_amp.yml\ncreate  app/views/layouts/rails_amp_application.amp.erb\n```\n\nIn config/initializers/mime_types.rb:\n\n```ruby\nMime::Type.register_alias 'text/html', RailsAmp.default_format\n```\n\nThis line must be added to make rails to recognize the amp format. The default format is :amp. You can change the value in config/rails_amp.yml\n\n## Configurations\n\nYou can change RailsAmp configurations in your `config/rails_amp.yml`. Write configs with yaml.\n\nIn config/rails_amp.yml:\n\n```yaml\n# ### Here are some config samples to use rails_amp.\n\n# --------------------------------------------------\n# To enable amp on specific controllers and actions.\n# --------------------------------------------------\n# ### Enable amp on users all actions.\n# targets:\n#   users:\n#\n# ### Enable amp on users#index, users#show, posts#index, posts#show.\n# ### controller: action1 action2 action3 ...\n# targets:\n#   users: index show\n#   posts: index show\n#\n# ### Enable amp on all controllers and actions.\n# targets:\n#   application: all\n#\n# ### Disable amp completely.\n# targets:\n#\ntargets:\n  users: index show\n\n# --------------------------------------------------\n# To set initial configurations.\n# --------------------------------------------------\n# ### Enable Google Analytics page tracking. Set your Google Analytics Account.\n# analytics: UA-*****-*\n#\n# ### Change default amp format. The default value is amp.\n# ### If you want to use 'mobile' as amp format, set 'mobile' to default_format.\n# ### And you can access the amp page like /users/index.mobile\n# default_format: mobile\n#\n# ### Set formats that used as amp. The default is html.\n# ### These formats are used in the order, when the amp specialized view like 'users/index.amp.erb' is not found.\n# lookup_formats: html xhtml\n```\n\n### Examples\n\nSet the controllers and actions that you want to enable amp.\n\nEnable amp on users all actions except for new, create, edit, update, destroy actions.\n\n```yaml\ntargets:\n  users:\n```\n\nNote that RailsAmp automatically excludes the post-method related actions `new, create, edit, update, destroy` that originally provided by Rails from the amp targets.\n\nEnable amp on some specific controllers and actions. e.g.) users#index, users#show, posts#show.\n\n```yaml\ntargets:\n  users: index show\n  posts: show\n```\n\nEnable amp on all controllers and actions. (It's a bit dangerous, so I don't recommend.)\n\n```yaml\ntargets:\n  application: all\n```\n\nDisable amp completely.\n\n```yaml\ntargets:\n```\n\nOther configurations.\n\nEnable Google Analytics page tracking. Set your Google Analytics Account.\n\n```yaml\nanalytics: UA-*****-*\n```\n\nChange the amp default format. The default value is 'amp'. If you want to use 'mobile' as the default format, set 'mobile' to default_format. And you can access the amp page like `http://example.com/users.mobile`.\n\n```yaml\ndefault_format: mobile\n```\n\nChange formats that used as amp. The default is html. These formats are used in the order, when the amp specialized view like `app/views/users/index.amp.erb` is not found.\n\n```yaml\nlookup_formats: html xhtml\n```\n\nNote that you need to restart a server to reload the configurations after changing config/rails_amp.yml.\n\n## Setup\n\nAdd the following code in your default layout head like `application.html.erb`.\n\nIn app/views/layouts/application.html.erb:\n\n```html\n\u003c%= rails_amp_amphtml_link_tag %\u003e\n```\n\nThis code will put out the html header to inform where the amp url is.\n\n```html\n\u003clink rel=\"amphtml\" href=\"http://example.com/users.amp\" /\u003e\n```\n\n### AMP link for root_url(root_path)\n\nWhen you enable amp on the controller and action for root_url, the helper `rails_amp_amphtml_link_tag` will put out the following amphtml link in the root url.\n\nIn your config/routes.rb:\n\n```ruby\nroot 'home#index'\n```\n\nAnd, in config/rails_amp.yml:\n\n```yaml\ntargets:\n  home: index\n```\n\nThe helper `rails_amp_amphtml_link_tag` will put out the following in the root url.\n\nIn `http://example.com/`:\n\n```html\n\u003clink rel=\"amphtml\" href=\"http://example.com/home/index.amp\" /\u003e\n```\n\nSo, you need to add a routing for this amp url.\n\nIn your config/routes.rb:\n\n```ruby\nget '/home/index', to: 'home#index'\n```\n\n\n## Customize AMP layout\n\nIn app/views/layouts/rails_amp_application.amp.erb:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml amp\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eRails AMP\u003c/title\u003e\n    \u003clink rel=\"canonical\" href=\"\u003c%= rails_amp_canonical_url %\u003e\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"\u003e\n\n    \u003c!-- Set page data type by JSON-LD with schema.org. --\u003e\n    \u003cscript type=\"application/ld+json\"\u003e\n      {\n        \"@context\": \"http://schema.org\",\n        \"@type\": \"*****\",\n        \"mainEntityOfPage\": \"*****\",\n        \"datePublished\": \"*****\"\n      }\n    \u003c/script\u003e\n\n    \u003c!-- Write custom css sytle for amp html here. --\u003e\n    \u003cstyle amp-custom\u003e\n      body {\n      }\n      amp-img {\n      }\n    \u003c/style\u003e\n\n    \u003c%= rails_amp_google_analytics_head %\u003e\n    \u003c%= rails_amp_html_header %\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c%= rails_amp_google_analytics_page_tracking %\u003e\n    \u003c%= yield %\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCustomize the page data type by JSON-LD with schema.org, and write custom css styles in the `\u003cstyle amp-custom\u003e` block. You can customize any other parts of this amp layout file as you like, but you need to follow the amp restrictions.\n\n### Canonical link for root_url(root_path)\n\nWhen you enable amp on the controller and action for root_url, the helper `rails_amp_canonical_url` will put out the following canonical link tag in the amp url for root_url.\n\nIn `http://example.com/home/index.amp`:\n\n```html\n\u003clink rel=\"canonical\" href=\"http://example.com/home/index\" /\u003e\n```\n\nIf you want to use the root_url as the canonical url, you should customize the codes.\n\n```ruby\n\u003c% if controller_path == 'home' \u0026\u0026 action_name == 'index'  %\u003e\n  \u003clink rel=\"canonical\" href=\"\u003c%= root_url %\u003e\" /\u003e\n\u003c% else %\u003e\n  \u003clink rel=\"canonical\" href=\"\u003c%= rails_amp_canonical_url %\u003e\" /\u003e\n\u003c% end %\u003e\n```\n\n## Usage\n\nTo access amp pages, add the amp default format at the end of the url before queries like the followings.\n\n```\nhttp://example.com/users.amp\nhttp://example.com/users.amp?sort=name\n```\n\nIf you change the amp default format, you have to use it as the format.\n\nIn your config/rails_amp.yml\n\n```yaml\ndefault_format: mobile\n```\n\nAccess the amp pages.\n\n```\nhttp://example.com/users.mobile\nhttp://example.com/users.mobile?sort=name\n```\n\n### When not creating another view for amp. (When the template for amp not found)\n\nIf you don't create another view for amp (When the template for amp not found), RailsAmp tries to find amp-available formats accoding to the config `lookup_formats`, and uses the existing html view for the amp page as is.\n\ne.g.) When you enable amp on `users#index` in config and don't create another amp view like `app/views/users/index.amp.erb`, RailsAmp uses the existing html view like `app/views/users/index.html.erb` for the amp page.\n\nThen, you can access the amp page as `http://example.com/users.amp` by adding the amp default format at the end of the url before queries.\n\n### When creating another view for amp.\n\nIf you want to use specialized views for amp pages, you can create another view for amp like `app/views/users/index.amp.erb`. When accessing `http://example.com/users.amp`, the amp specialized view will be used.\n\nIf you change the amp default format, create the view template with the format.\n\nIn config/rails_amp.yml:\n\n```yaml\ndefault_format: mobile\n```\n\nCreate the view template as `app/views/users/index.mobile.erb`, and access the amp page as `http://example.com/users.mobile`.\n\n### View Helpers\n\nYou can use a helper `amp_renderable?` in views. Use `amp_renderable?` in your existing html views to switch some codes. Here is a sample to switch codes for Twitter tweet display.\n\n```html\n\u003c% if amp_renderable? %\u003e\n  \u003c!-- For amp --\u003e\n  \u003camp-twitter width=486 height=657\n    layout=\"responsive\"\n    data-tweetid=\"*****\"\n    data-cards=\"hidden\"\u003e\n    \u003cblockquote placeholder class=\"twitter-tweet\" data-lang=\"en\"\u003e*****\u003c/blockquote\u003e\n  \u003c/amp-twitter\u003e\n\u003c% else %\u003e\n  \u003c!-- For normal html --\u003e\n  \u003cblockquote class=\"twitter-tweet\" data-lang=\"ja\"\u003e*****\u003c/blockquote\u003e\n  \u003cscript async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003c% end %\u003e\n```\n\n## Supported AMP tags\n\nRailsAmp supports a tag `\u003camp-img\u003e` so far.\n\n### amp-img\n\nYou have to use the `\u003camp-img\u003e` tag to render images in amp pages, instead of a normal html tag `\u003cimg\u003e`. When you use a rails built-in helper `image_tag` in view templates, RailsAmp automatically renders images with the `\u003camp-img\u003e` tag in amp format pages. Also, the helper `image_tag` renders images with the `\u003cimg\u003e` tag in normal html format pages.\n\nThe `\u003camp-img\u003e` tag requires `width` and `height` attributes. When the `image_tag` helper is used with a `size` or `width`, `height` option, the `\u003camp-img\u003e` tag uses the option's value as its `width` and `height` attributes.\n\nIf the `image_tag` helper doesn't have a `size` or `width` or `height` option, RailsAmp computes the image size using FastImage. FastImage is a great gem to fetch the size and other information of an image quickly. If FastImage even cannot fetch the image size, the `\u003camp-img\u003e` tag's width and height attributes are set to `300` and `300`.\n\nSo, for amp format pages, I recommend that you use the `image_tag` helper with a `size` or `width`, `height` option as much as possible.\n\n## Check AMP validation\n\nIn Google Chrome browser:\n\n1. Start the Developer Tools.\n1. Select the Console tab.\n1. Access the amp page with `#development=1` like `http://localhost:3000/users.amp#development=1`\n\nIf `AMP validation successful` shows, the amp page is valid. If some errors are detected, fix your existing html view using the `amp_renderable?` helper or create another amp specialized view.\n\n## References\n\n[Accelerated Mobile Pages Project](https://www.ampproject.org/)\n\n## Contributing\n\n1. Fork it ( https://github.com/takafumir/rails_amp/fork )\n1. Create your feature branch (git checkout -b my-new-feature)\n1. Commit your changes (git commit -am 'Add some feature')\n1. Push to the branch (git push origin my-new-feature)\n1. Create a new Pull Request\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://github.com/takafumir/rails_amp/blob/master/MIT-LICENSE).\n\n## Author\n\n[Takafumi Yamano](https://github.com/takafumir)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakafumir%2Frails_amp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftakafumir%2Frails_amp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakafumir%2Frails_amp/lists"}