juusaw / amp-jekyll Goto Github PK

Build Accelerated Mobile Page versions of your Jekyll posts

License: MIT License

HTML 21.84% Ruby 78.16%

jekyll-plugin ruby-gem accelerated-mobile-pages amp

amp-jekyll's Introduction

amp-jekyll

Important: This project is no longer actively maintained as I am not using Jekyll (or AMP) that much nowadays. In case you are interested in maintaining the project, I'm happy to provide support.

Jekyll plugin for creating Accelerated Mobile Page versions of posts. Supports Jekyll version 3 and 4.

AMP project

Usage

Using the gem

Add gem amp-jekyll to your Gemfile and run bundle
Add the gem to your _config.yml like this:

plugins:
  - amp-jekyll

NOTE: Older Jekyll versions (below 3.6.0) use the key gems instead of plugins. When building a site with such version, use the old key.

Adding the plugin manually

Place the Ruby files in lib/jekyll (amp_generate.rb and amp_filter.rb) in folder _plugins at the root of the project

Then perform the following

Place the layout file (amp.html) to the _layouts folder
Add amphtml-link to post heads (see page linking below) (Add CSS styles to the html template)
Generate your site with jekyll build

Setting things up

The AMP standard is somewhat restrictive on allowed HTML elements and requires some extra information on element placing. To make sure that your generated AMP pages are valid by the standard, you can run the AMP version of your post with #development=1 appended to the URL and check the browser's Javascript console for the validation.

Several HTML elements must be replaced with tags specified in the AMP specs to ensure compatibility with the standard. The amp_filter.rb Jekyll filter replaces the tags after converting the markdown to HTML. At the moment only replacing <img> tags is supported.

To disable image responsivity, add false to amp_images responsive parameter in amp.html. This is enabled by default for header and footer.

The AMP folder

Specify amp folder in _config.yml as ampdir: YOURDIR

Page linking

The easiest solution is adding the following conditional expression around the tag.

{% if page.path contains '_posts' %}
  <link rel="amphtml" href="{{ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url | append: '.html' }}">
{% endif %}

CSS

CSS rules for AMP must be included inline in the <style amp-custom> tag in the <head> element in the HTML. You can write the CSS rules by hand or use jekyll includes. Do note that the AMP specification forbids the use of some CSS selectors and attributes. Because of this, it is not a good idea to include the main stylesheet by default.

Skipping Pages

Sometimes there are pages we don't want to be turned into AMP pages, normally this is because they require HTML elements or JavaScript that would make them invalid.

In any post we want to skip simply add;

skip_amp: true

And update your amphtml block to look like;

{% if page.path contains '_posts' %}
  {% unless page.skip_amp %}
    <link rel="amphtml" href="{{ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url }}">
  {% endunless %}
{% endif %}

amp-jekyll's People

Contributors

Stargazers

Watchers

amp-jekyll's Issues

SVG support

Hi there, thanks for the nifty little scripts 👍
Do you have any idea on how to deal with SVGs?

Loop through collections

Hi there,

Would it be possible to also loop through all collections and pages instead of posts only?

I think it can be interesting :)

I tried to add

      site.collections.each do |collection|
        collection.docs.each do |post|
          next if post.data['skip_amp'] == true
          site.pages << AmpPost.new(site, site.source, File.join(dir, post.id), post)
        end
      end

But as my knowledge in ruby is super limited, it failed (collection.docs doesn't exist) so maybe you can see a better workaround?

Thanks

Unit testing

I'm not very familiar with testing Jekyll plugins. It would be super helpful to have some basic unit tests to validate that new features don't break any existing functionality.

Liquid support in markdown files

Hi again, just noticed that Liquid blocks in markdown don't get parsed, is that something you would like to have? I could take a stab at making it work if you want to have it.

i.e.

Compatibility with jekyll-language-plugin

I am also using https://github.com/vwochnik/jekyll-language-plugin and the language plugin reports "No language specified for current page or post in ...amp/en/..."

This must be related to the order of plugins.

Is this something you may want to consider?

amp folder not accessible

I have configure the plugin and set amp as the ampdir . amp files are generating in my local but when I deploy them to github pages amp pages gives 404.

Ignores posts with a permalink

Thanks for this great plugin.

I've noticed that if I give my post permalink: /somewhere front matter that it is no longer picked up by amp-jekyll, is there anything I can do to workaround this please?

support amp-iframe

I understand that this is not supported yet, but noting it as a feature request.

Are you interested in pull requests for other AMP tags such as this?

Seems to not run on Jekyll 3.3.1

I put the required files in the specified positions and specified ampdir: amp on my _config.yml.

Next I ran bundle exec jekyll serve on my jekyll directory and the site serves fine but a _site/amp directory is not being generated.

I saw #2 and tried serving without the plugins but got no different results.

Amp generation doesn't respect the permalink configuration

I noticed that when a different permalink configuration is used, the generation of the amp page does not follow the same pattern. I believe this could have relation with #27.

For example, I am attaching the configuration files of a project in which the generated link should be /2017/05/15/welcome-to-jekyll.html and the plugin is generating /amp/2017/05/15/welcome-to-jekyll/ for the amp page, when they should generate a /amp/2017/05/15/welcome-to-jekyll.html page.

All the rest is the same from jekyll new site plus the configs the project's README.md.

layout_teste.zip

This trash rewrites urls

Your trash code destroyed my website adding / to all my links, take this trash down, it does not work.

Amp for pages

Is there a way to generate AMP for pages instead of posts only?

GIF Support

https://www.ampproject.org/docs/reference/components/amp-anim

Option to specify a destination folder for AMP pages

Option to specify a destination folder for AMP pages, something like

in _config.xml
amp-path: amp/

or it could be hardcoded.

Can this plugin can change img to amp-img?

Unable to get image dimensions

How to fix this, not generate _site folder

Unable to get image dimensions for "/home/mertcan/Desktop/mertcangokgoz.github.io/_site/assets/logrotateconfirmationgorsel.jpg". For local files, build the site with '--skip-initial-build' for better results. [Error: undefined method `[]' for nil:NilClass]

And modify amp.html because im not using any header or footer html

---
layout: amp
---

<!doctype html>
<html amp lang="en">

<head>
    <meta charset="UTF-8">
    <title>{{ page.title }} </title>
    <meta name="generator" content="Jekyll">
    <link href="https://plus.google.com/103305118431759296457" rel="publisher" />
    <meta name="author" content="{{ site.data.theme.name }}" />
    <meta name="distribution" content="global" />
    <meta name="robots" content="follow, all" />
    <link rel="alternate" type="application/rss+xml" title="{{ site.data.theme.name }}" href="{{site.url}}/feed" />
    <link rel="canonical" href="{{ page.canonical_url | prepend: site.baseurl | prepend: site.url }}" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style amp-custom></style>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }
        
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }
        
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }
        
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }
        
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }
        
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }
    </style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>
    <div class="container">
        <div class="content">
            <h1 class="title">
                {{ page.title | amp_images }}
            </h1>
            {{ content | markdownify | amp_images }}
            <div class="footer">
                {% include footer.html %}
            </div>
        </div>
    </div>
</body>

</html>

Jekyll 4 Support

Hi,

We should add support for Jekyll 4 asap :)

Kind regards,

Kyle

How to decide the type of analytics tag to add?

I'm trying to use this plugin to generate amp pages on my blog, but I'm having an issue where I can't find something that I can use to wrap the analytics script tags in an if, so that I can use the amp specific tags, when rendering an amp page.
Is there something like that?

amp-jekyll not generating files jekyll 3.1.2

Hello,

I have copied the files in the _plugins folder but when I generate the site or serve the site the plugins gets ignored. I tried to add some debug logs on the generate method but nothing happens. I am using jekyll 3.1.2 for my site.

Am I missing any step ?

Enabling Excerpts

Hi Juuso!

Firstly thanks for this great plugin.

I see that you mentioned in your amp_generate.rb file that excerpts are disabled as they case an error. Could you please let me know what error it causes and how I can enable excerpts if required. I'm not familiar with ruby code.

I manually set the excerpts in my code, so if there is any way to enable excerpts it would help.

Thanks!

Does this actually creates a version?

Does this actually creates a version? or replace the post with AMP format?

Liquid Exception: undefined method start_with?' in amp_filter.rb:19

Hi,

Running my jekyll project with amp-jekyll, I came across an error in amp_filter.rb line 19. The full source and stack trace error is described at the following internet adress. Could you please tell me how to solve it ? Thank you in advance

http://talk.jekyllrb.com/t/setting-up-amp-jekyll-plugin-leads-to-an-error/1332/9

(I am using jekyll-3.6.2)

gem release

Would be great if you release this as a gem. If you need help, check this out: http://www.yegor256.com/2014/08/26/publish-to-rubygems.html

Please Provide Support Over this Plugin

This is the best Plugin for implementing AMP but the problem there is many things that may be improve.

try to add amp-jekyll plugin

Hi, I am a beginner in jekyll. I try to add plugins to my projects.
I have

-jekyll 3.6.2

-ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16]

At the beginning I chose to add gem in my Gemfile

group :jekyll_plugins do
gem "amp-jekyll", "1.0.2"
gem ...
... etc
end

and I run
bundle install

but I had the error
Could not find gem 'amp-jekyll (= 1.0.2)' in any of the gem sources listed in your Gemfile.

and exactly the same error for the other gems

So I changed my way to add plugins and I chose to add rb files in _plugins folder and when I run

bundle exec jekyll serve
I have the following error

Configuration file: /Users/admin/Documents/Perso/Site-Internet/Jekyll/inger/_config.yml Dependency Error: Yikes! It looks like you don't have /Users/admin/Documents/Perso/Site-Internet/Jekyll/inger/_plugins/amp_filter.rb or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- nokogiri' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/! jekyll 3.6.2 | Error: /Users/admin/Documents/Perso/Site-Internet/Jekyll/inger/_plugins/amp_filter.rb

So I added the nokogiri gem as follows

gem install nokogiri

And I have still the same error
Can you help me because I am lost. Thank you in advance

Plugin Not Working

I tried all instructiions in README but plugin is still not working.

This is my blogpost: http://muhammadzaini.com/2017/10/03/bergeraklah-karena-ide-tak-bisa-didapatkan-dalam-sepi.html

AMP version (I wanna to): http://muhammadzaini.com/amp/2017/10/03/bergeraklah-karena-ide-tak-bisa-didapatkan-dalam-sepi.html

Repository: http://github.com/mzaini30/mzaini30.github.io

Convert .rb to .js

I can't use this plugin, because github forbid plugin on free account. Can u convert this plugin to JS file??

Speeding up generation

Thanks for this plugin!

I found builds were taking 18 seconds for me.

require 'thread'
require 'thwait'

  # Generates a new AMP post for each existing post
  class AmpGenerator < Generator
    priority :low
    def generate(site)
      dir = site.config['ampdir'] || 'amp'
      threads = site.posts.docs.map do |post|
        Thread.new do
          index = AmpPost.new(site, site.source, File.join(dir, post.id), post)
          index.render(site.layouts, site.site_payload)
          index.write(site.dest)
          site.pages << index
        end
      end
      ThreadsWait.all_waits(*threads)
    end
  end
end

I amended the main loop to start a new thread for each AmpPost to be generated and then wait for them all to finish.

That took my build from 18 seconds down to 7 seconds.

Happy to open a PR if you like?

Invalid colon

         ERROR: YOUR SITE COULD NOT BE BUILT:
                ------------------------------------
                The URL /:title/ is invalid because it contains a colon.

Alternative to fastimage to build locally

A lot of jekyll sites are hosted with github pages which means they are built once with jekyll build

Since fastimage's purpose is to fetch images over the web and the jekyll page is built local on the serve this won't work.

I'm not a ruby developer but i think RMagick would to the trick. I'm aware that RMagick needs ImageMagick installed but in my opinion it is better to install something like ImageMagick than being not able to serve images.