accelerated mobile pages in jahia dx · accelerated mobile pages in jahia dx digital experience...

1

ACCELERATED MOBILE PAGES IN

JAHIA DX

DIGITAL EXPERIENCE MANAGER 7.2

ACCELERATED MOBILE PAGES IN JAHIA DX DIGITAL EXPERIENCE MANAGER 7.2

© 2002 – 2016 Jahia Solutions Group SA / 33

SUMMARY

1 INTRODUCTION ...................................................................................................................................................... 4

2 PREREQUISITES ........................................................................................................................................................ 5

3 CREATE AMP CONTENT TEMPLATES............................................................................................................. 6

4 CREATE THE CONTENT TEMPLATE ................................................................................................................. 7

5 CREATE THE VIEWS .............................................................................................................................................. 10

5.1 Template view ...................................................................................................................... 10

5.2 The news nodetype view ................................................................................................ 13

5.3 Set the content template view ..................................................................................... 15

6 CLEAN UP THE VIEW ........................................................................................................................................... 17

6.1 Validating the AMP view ................................................................................................. 19

6.2 Remove StaticAssetFilter unwanted output........................................................... 20

6.2.1 Create a newJahia DX Render Filter ........................................................................... 20

6.2.2 Exclude unwanted content ............................................................................................ 22

6.3 Fix the news view ................................................................................................................ 24

7 THE HEADER LINKS .............................................................................................................................................. 27

7.1 Edit the filter ......................................................................................................................... 27

7.2 Remove the hardcoded link .......................................................................................... 28

7.3 Compile and test ................................................................................................................ 28

8 MAKE IT NICER ....................................................................................................................................................... 30



8.1 Create custom styles ......................................................................................................... 30

8.2 Add AMP scripts ................................................................................................................. 31

8.3 Expected result: ................................................................................................................... 32

9 GOING FURTHER ................................................................................................................................................... 33

9.1 Support files in richtext ................................................................................................... 33

9.2 Support of links ................................................................................................................... 33

9.3 Further Jahia DX Integration ......................................................................................... 33



1 INTRODUCTION

AMP (for Accelerated Mobile Pages) is an open source project supported by Google to improve

mobile phone web browsing. Simply put, it's an HTML page with dedicated scripts and tags.

Currently AMP technology is mostly used to display news and articles, content that are read on

a cellular phone and that needs to be loaded fast. This kind of content match well with Jahia DX

“content templates” approach.

We describe here how to integrate AMP technology with a simple example that creates AMP

pages to display content element of a news type based on the Digitall demo site. This example

can be transposed easily to any other kind of content.



2 PREREQUISITES

In order to fully understand and reproduce this case study, you need:

• A running Jahia DX 7.2 instance

• Digitall Demo site imported. (See the Quick Start Guide on Jahia Academy to install the

Digitall Demo package)

https://academy.jahia.com/documentation/digital-experience-manager/7.2/functional/quick-start#Create_a_site



3 CREATE AMP CONTENT TEMPLATES

As any other content rendering in Jahia DX, a dedicated AMP view needs to be created for the

news. It can be done either with adding it to the template set or creating a dedicated module

for it. To ease this example, we have created a sample module that can be found here:

https://github.com/dgriffon/sample-AMP-DX-integration/tree/1-create-module

Compile and deploy it to your Jahia DX instance.

mvn clean install

https://github.com/dgriffon/sample-AMP-DX-integration/tree/1-create-module



4 CREATE THE CONTENT TEMPLATE

The goal is to have an AMP content template for news, other type of content may need to get

several content templates. First, create a template folder for the news where the AMP content

template will put. This will help to use the same template name for all the AMP content

templates.

First, add a dependency to the news module

Next create a template, and a content template for the news content type:



Uncheck "Automatically synchronize name with title:"

Set the same to : amp



If you encounter any issue in this phase, please check out the result here:

https://github.com/dgriffon/sample-AMP-DX-integration/tree/2-content-template

https://github.com/dgriffon/sample-AMP-DX-integration/tree/2-content-template



5 CREATE THE VIEWS

AMP needs a dedicated structure for its page. You can find more information on it here:

https://www.ampproject.org/docs/get_started/create/basic_markup

In Jahia DX, it means to create views. First, create the template view, then the view of the news

nodetype.

5.1 TEMPLATE VIEW

From the Jahia DX studio, select the file system tab, and right click on the root folder, select Add

view

In the selector, type "template" then pick Template. Choose Template as a parent type of

"Content template" and pageTemplate.




Copy the content from https://www.ampproject.org/docs/get_started/create/basic_markup and

save the view naming it:

amp-sample




The view is now available in the file system tab:

Create an area name pagecontent in this view to be able to create content.

To do so, replace the inner <body> section to a Jahia DX area tag that defines a pagecontent

area that displays the main resource:

<template:area editable="true" moduleType="existingNode" view="detail-amp"/>



This is the equivalent of creating a standard area, and drag and drop a main resource area

component in it, setting the view to detail-amp.

5.2 THE NEWS NODETYPE VIEW

As for template, create a new view from the news nodetype but this time, copy the content from

the detail view of the news that you can get here:

https://github.com/Jahia/bootstrap-acme-space-

templates/blob/master/src/main/resources/jnt_news/html/news.detail.jsp

Create the view as done for the template but selecting "News Entry" instead of template in the

nodetypes list, copy the detail view content of the new in it, then save it naming it detail-amp.

You should get the following result:

https://github.com/Jahia/bootstrap-acme-space-templates/blob/master/src/main/resources/jnt_news/html/news.detail.jsp

https://github.com/Jahia/bootstrap-acme-space-templates/blob/master/src/main/resources/jnt_news/html/news.detail.jsp



As they are not use by AMP (line 9 and 20), the bootstrap tags import and usage in the view

need to be removed:

<%@ taglib prefix="bootstrap" uri="http://www.jahia.org/tags/bootstrapLib" %>

<bootstrap:addCSS/>

Now the views are set, compile and deploy your module to get the view working

Click on "compile and deploy", the first icon in the file system tab.



5.3 SET THE CONTENT TEMPLATE VIEW

Now assign the views to the previous create template. Edit the news content template to set the

view to amp-sample.

Everything is almost set. Let's compile the module once again, and enable it on the Digitall

Demo site.

Click on module detail in the top bar, then enable the module on Digitall Demo site.



If you encounter any trouble to get it work, you can get the source code of this step here:

https://github.com/dgriffon/sample-AMP-DX-integration/tree/3-create-views

https://github.com/dgriffon/sample-AMP-DX-integration/tree/3-create-views



6 CLEAN UP THE VIEW

Now exists an AMP view for our news. But this view must be clean up to match the AMP

constraints. You can find more detail on the AMP format here:

https://www.ampproject.org/docs/guides/responsive_amp

To summarize, no external javascript or css are allowed except the ones provide by AMP, so the

view needs to be cleaned to only keep what is allowed by AMP.

Assuming Jahia DX is installed in root context with an Digitall imported site, the relevant URL

displaying a news is:

http://localhost:8080/cms/render/default/en/sites/digitall/home/newsroom/news-

entry/article/movies-can-determine-your-succes.html


http://localhost:8080/cms/render/default/en/sites/digitall/home/newsroom/news-entry/article/movies-can-determine-your-succes.html

http://localhost:8080/cms/render/default/en/sites/digitall/home/newsroom/news-entry/article/movies-can-determine-your-succes.html



And the AMP view of the news:

http://localhost:8080/cms/render/default/en/sites/digitall/home/newsroom/news-

entry/article/movies-can-determine-your-succes.amp.html

http://localhost:8080/cms/render/default/en/sites/digitall/home/newsroom/news-entry/article/movies-can-determine-your-succes.amp.html

http://localhost:8080/cms/render/default/en/sites/digitall/home/newsroom/news-entry/article/movies-can-determine-your-succes.amp.html



6.1 VALIDATING THE AMP VIEW

This validation can be done using the debugging tools of AMP to debug as described here:

https://www.ampproject.org/docs/get_started/create/preview_and_validate

In this case, enable the validation activating Chrome dev tools and using the URL

http://localhost:8080/jahia/cms/render/default/en/sites/digitall/home/newsroom/news-

entry/article/movies-can-determine-your-succes.amp.html#development=1 to get the following

result:

https://www.ampproject.org/docs/get_started/create/preview_and_validate

http://localhost:8080/jahia/cms/render/default/en/sites/digitall/home/newsroom/news-entry/article/movies-can-determine-your-succes.amp.html#development=1

http://localhost:8080/jahia/cms/render/default/en/sites/digitall/home/newsroom/news-entry/article/movies-can-determine-your-succes.amp.html#development=1



As displayed, there are 2 errors that need to get fixed to validate the AMP page. An AMP page

must be valid to be served by a cache.

6.2 REMOVE STATICASSETFILTER UNWANTED OUTPUT

The first error is due to the StaticAssetFilter that manage the resources that the modules can

provide. As AMP does not support external resource, the entries added by this filter must be

removed. There are 2 possibilities:

• disabling the filter and override it to define a custom filter that not do the import.

• Create a custom filter that remove unwanted entries.

In this example, only the 2nd filter is described.

6.2.1 Create a newJahia DX Render Filter

Add a java class named AssetsAMPFilter in the package org.jahia.modules.digitall.filters



A default Filter contains

package org.jahia.modules.digitall.filters;

import org.jahia.services.render.RenderContext;

import org.jahia.services.render.Resource;

import org.jahia.services.render.filter.AbstractFilter;

import org.jahia.services.render.filter.RenderChain;

/**

* Render Filter that cleans up the StaticAssetFilter for AMP rendering

*/

public class AssetsAMPFilter extends AbstractFilter{

@Override

public String execute(String previousOut, RenderContext renderContext, Resource resource, RenderChain chain) throws

Exception {

return super.execute(previousOut, renderContext, resource, chain);

}

}

The bean declaration in the spring module file must be set (you have to remove the disabled

extension)

src/main/resource/META-INF/spring/amp-sample.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"



xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">

<bean id="cleanUpAssetsAMPFilter" class="org.jahia.modules.digitall.filters.AssetsAMPFilter">

<property name="priority" value="-1"/>

<property name="applyOnEditMode" value="false"/>

<property name="applyOnConfigurations" value="page"/>

<property name="applyOnNodeTypes" value="jnt:news, jnt:article"/>

</bean>

</beans>

Values explanation:

• priority: The StaticAssetFilter must be changed, this operation must be performed

after its execution, meaning that the filter must be before it, less than 0)

• applyOnEditMode: Due to its constraints, the AMP view is not working in edit mode.

• applyOnConfigurations: Set to page, as the StaticAssetFilter.

• applyOnNodeTypes: The applied filter is restricted to the new only.

6.2.2 Exclude unwanted content

According to the errors described by the AMP validation the following lines must be removed

from the header section:

<script type="text/javascript">

var contextJsParameters={contextPath:"/jahia",lang:"en",uilang:"en",siteUuid:"40ef8fce-72e8-41ec-9d93-

32a2fe9807ef",wcag:true,ckeCfg:""}; var CKEDITOR_BASEPATH="/jahia/modules/ckeditor/javascript/"; var

scayt_custom_params=new Array(); scayt_custom_params['sLang']='en_US';

</script>

Using the following code in the AssetsAMPFilter removes it:

private final static String MARKER = "##LineToRemove##";

@Override



public String execute(String previousOut, RenderContext renderContext, Resource resource, RenderChain chain) throws

Exception {

String out = super.execute(previousOut, renderContext, resource, chain);

// Remove unsuported scripts and link lines added by the staticAssetFilter

if (StringUtils.equals(resource.getTemplate(), "amp")) {

String[] lines = out.split(System.getProperty("line.separator"));

for (int i = 0; i < lines.length; i++) {

if (StringUtils.contains(lines[i], "contextJsParameters")) {

lines[i] = lines[i - 1] = lines[i + 1] = MARKER;

} else if (StringUtils.contains(lines[i], "<link id=\"staticAssetCSS")) {

lines[i] = MARKER;

}

}

StringBuilder result = new StringBuilder();

for (String s : lines) {

if (!StringUtils.equals(s, MARKER)) {

result.append(s).append(System.getProperty("line.separator"));

}

}

out = result.toString();

}

return out;

}



Once compiled and deploy, only one error remains in AMP validation

If you encounter any difficulties to get to that point, check-out the source code from here:

https://github.com/dgriffon/sample-AMP-DX-integration/tree/4-create-render-filter

6.3 FIX THE NEWS VIEW

The remaining error is due to the image tag that is not supported by AMP as described here:

https://www.ampproject.org/docs/guides/amp_replacements

The news view needs to be updated to fit the AMP usage, changing the <img> tag to <amp-

img>

This can be easily done replacing this:

<figure><img src="<c:url value="${image.node.url}" context="/"/>" alt="${image.node.displayableName}"></figure>

With

https://github.com/dgriffon/sample-AMP-DX-integration/tree/4-create-render-filter

https://www.ampproject.org/docs/guides/amp_replacements



<c:set var="width" value="${image.node.properties['j:width'].long}"/>

<c:set var="height" value="${image.node.properties['j:height'].long}"/>

<figure><amp-img src="<c:url value="${image.node.url}" context="/"/>" width="${width}" height="${height}">

<noscript>

<img src="<c:url value="${image.node.url}" context="/"/>" alt="${image.node.displayableName}">

</noscript>

</amp-img>

</figure>

Code cleanup can also be performed to remove unsupported tag like <template:addResource/>

Now the page is validated.

If you get any trouble to get to that point, you can download the source of this step here:



https://github.com/dgriffon/sample-AMP-DX-integration/tree/5-fix-image

https://github.com/dgriffon/sample-AMP-DX-integration/tree/5-fix-image



7 THE HEADER LINKS

To be discoverable, a page must declare that an AMP version is available. Add this information

in the html version of the amp page. A link to the html version can be set in the AMP page.

https://www.ampproject.org/docs/guides/discovery

For this, adopt the previously used filter. Depending of the context, the corresponding link will

be added in the header section.

7.1 EDIT THE FILTER

Open the filter and edit it as following:

String out = super.execute(previousOut, renderContext, resource, chain);

// Build the amp links that will be used in the header

URLGenerator url = renderContext.getURLGenerator();

String resourceUrl = url.getServer() + url.getContext() + url.getBase() + resource.getNode().getPath();

String ampLink = "<link rel=\"ampType\" href=\"" + resourceUrl + "TEMPLATE.html\" />";

// Remove unsuported scripts and link lines added by the staticAssetFilter

if (StringUtils.equals(resource.getTemplate(), "amp")) {

String[] lines = out.split(System.getProperty("line.separator"));

for (int i = 0; i < lines.length; i++) {

if (StringUtils.contains(lines[i], "contextJsParameters")) {

lines[i] = lines[i - 1] = lines[i + 1] = MARKER;

} else if (StringUtils.contains(lines[i], "<link id=\"staticAssetCSS")) {

lines[i] = MARKER;

}

}

https://www.ampproject.org/docs/guides/discovery



StringBuilder result = new StringBuilder();

for (String s : lines) {

if (!StringUtils.equals(s, MARKER)) {

result.append(s).append(System.getProperty("line.separator"));

}

}

out = result.toString();

// Set the values for AMP Link

ampLink = StringUtils.replace(ampLink, "ampType", "canonical");

ampLink = StringUtils.replace(ampLink, "TEMPLATE", "");

} else {

// Set the values for AMP Link

ampLink = StringUtils.replace(ampLink, "ampType", "amphtml");

ampLink = StringUtils.replace(ampLink, "TEMPLATE", ".amp");

}

// Add amp link

out = StringUtils.replace(out, "</head>", ampLink + "\n</head>");

return out;

7.2 REMOVE THE HARDCODED LINK

In the header section of template.amp-sample.jsp is a hard-coded link from the example that

has to be removed

<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />

7.3 COMPILE AND TEST

Once compiled, go to the html page to see in the header section the following link:



8 MAKE IT NICER

8.1 CREATE CUSTOM STYLES

It is possible to declare custom style. This has to be done in the header section of the page,

using the amp-custom style attribute.


Adding this entry in the header section of the template.amp-sample.jsp file:

<style amp-custom>

.btn-primary {

color: #ffffff;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

background-color: #6600cc;

background-image: -moz-linear-gradient(top, #6600cc, #6600cc);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6600cc), to(#6600cc));

background-image: -webkit-linear-gradient(top, #6600cc, #6600cc);

background-image: -o-linear-gradient(top, #6600cc, #6600cc);

background-image: linear-gradient(to bottom, #6600cc, #6600cc);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6600cc', endColorstr='#ff6600cc',

GradientType=0);

border-color: #6600cc #6600cc #400080;

border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

color: #ffffff;

}

.btn {

display: inline-block;




padding: 4px 12px;

margin-bottom: 10px;

font-size: 14px;

font-weight: bold;

line-height: 20px;

text-align: center;

vertical-align: middle;

cursor: pointer;

background-color: #ffffff;

border: 1px solid #cccccc;

border-bottom-color: #b3b3b3;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

text-shadow: 0 1px rgba(0, 0, 0, 0.1);

}

</style>

8.2 ADD AMP SCRIPTS

Amp scripts can be added to enhance the rendering of the news. For example, using amp-fit-

text.

First add in the header section of the template:

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Then wrap the title with:

<amp-fit-text width="300" height="45" layout="responsive" max-font-size="45">

${title.string}

</amp-fit-text>



Instead of the <h1> tag

8.3 EXPECTED RESULT:

You can get the source code from here:

https://github.com/dgriffon/sample-AMP-DX-integration/tree/7-styles-and-scripts

And get the compiled module from:

https://github.com/dgriffon/sample-AMP-DX-integration/blob/master/compiled-

bundle/sample-AMP-DX-integration-1.0-SNAPSHOT.jar

https://github.com/dgriffon/sample-AMP-DX-integration/tree/7-styles-and-scripts

https://github.com/dgriffon/sample-AMP-DX-integration/blob/master/compiled-bundle/sample-AMP-DX-integration-1.0-SNAPSHOT.jar

https://github.com/dgriffon/sample-AMP-DX-integration/blob/master/compiled-bundle/sample-AMP-DX-integration-1.0-SNAPSHOT.jar



9 GOING FURTHER

9.1 SUPPORT FILES IN RICHTEXT

This example assumes that the rich text used for the news is pure valid HTML with no image in

it. The filter can be improved to change all the <img> tags to the corresponding AMP tags. The

same way for video or other resources

9.2 SUPPORT OF LINKS

The goal of an AMP page is to be cached, meaning that the links within a page are not known

until other pages are in cache. Google provides an API to get available links from its cache. You

can find more information here:

https://developers.google.com/amp/cache/use-amp-url

9.3 FURTHER JAHIA DX INTEGRATION

All the views for the component you want to use in your amp page must be currently created.

One of our goal is to provide filters and tools to help content manager build AMP pages from

an already stored content and concentrate on their content and let Jahia DX manage the

rendering.

https://developers.google.com/amp/cache/use-amp-url

accelerated mobile pages in jahia dx · accelerated mobile pages in jahia dx digital experience...

Documents