dorsetdigital/silverstripe-amppages

Provides a basic support framework for AMP pages in SS4

Installs: 275

Dependents: 0

Suggesters: 0

Security: 0

Stars: 4

Watchers: 3

Forks: 0

Open Issues: 0

Type:silverstripe-vendormodule

v1.0.0beta 2018-02-01 10:11 UTC

This package is auto-updated.

Last update: 2024-09-06 09:54:51 UTC


README

Adds semi-automated AMP page functionality and provides some basic assistance in creating AMP pages in Silverstripe 4.

Scrutinizer Code Quality Build Status License Version

Requirements

*Silverstripe 4.0.x

Installation

  • Install the code with composer require dorsetdigital/silverstripe-amppages
  • Run a dev/build?flush to update your project

Usage

Please note: this is not an 'out-of-the-box' solution, you'll need to do some work as well!

The add-on provides some of the basic framework for getting your site AMP-enabled. For pages in the SiteTree, a link is added to the html head which points at an AMP version of the page. There are base templates to deal with the fundamental requirements. These include some basic AMP boilerplate.

The controller which handles the AMP pages forcibly removes any scripts, CSS, etc. added via Requirements to the parent page. This is due to the strict limitations on what can be included in AMP. There is a base page template called Amp.ss and additional page types can be templated by adding a file called ClassName_amp.ss to your theme in the same directory as the non-AMP template.

In line with the AMP recommendations, CSS should be minified and included inline in the page.
To try and keep a consistent workflow, the Requirements class has been extended to provide the ability to inject AMP CSS into the AMP version of the page automatically.
It can be used in your page controller class as follows:


class ExamplePageController extends \PageController
{
    public function init()
    {
        parent::init();
        AmpPagesRequirementsExtension::ampCSS('amp');
    }
}

The above would automatically find a CSS file called amp.css in your theme's CSS directory and add the contents inline in the correct <style amp-custom> tag. Additional style sheets can be added by calling the ampCSS() method again, they will be appended. (Just remember, there's a size limit on the amount of CSS in AMP)

Useful Links

See The AMP Project for more information about what you can and can't do in an AMP page

Credits