Buri's blog

Tought I've been keeping up with the trends in the mobile world and while browsing net, I've run into article " Platforms like Facebook’s Instant Articles and Google AMP are making it harder, not easier, to publish to the web ." It piqued my interest and I've decided to give this a shot. The task before me is: Make AMP for my articles .

Implementation While I didn't have to start from scratch, I tought reusing main template would only hinder page performance and make the code ugly and unreadable. Thus, AMP use view that does not extend main layout template. In fact it doesnt use any template, it's single page only. I reused some of the components, namely header (containing logo and navigation) and LD+JSON generator component. And that's it. To build the rest took me around five hours including learning all the nescessary stuff. It's really not that complicated.

amp.latte

{* cache whole thing and serve it from memory to keep speed up as much as possible *} {cache "Article:$id:amp", tags => ["article/$id"]} {* lazyload article and tags *} {var $article = $_article()} {var $articleTags = array_map(function($tag) { return 'tag/' . $tag->id; }, $article->tags)} {* Head has somewhat strict specification, first set charset, then load AMP framework, then load any other components *} {$article->title} {* Include canonical URL in header to prevent SEO penalty *} {* Viewport is mandatory tag for AMP *} {* Generate LD+JSON metadata, optional, but highly recommended *} {control article:ldjson $article} {* Mandatory framework css *} {syntax off} 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}} body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} {/syntax} {* Custom css limited to 50kb, must be inlined if present *} {$ampStyles|noescape} {include '../partials/header.latte'} image}" alt="Welcome" height="{$article->imageHeight}" width="{$article->imageWidth}" layout="responsive" srcset="{$article->image|responsiveImage:detailArticle}" > {$article->title} {$article->body|noescape} Publish date: {($article->publishDate)|date:'d.m.Y'} Author: {$article->author->fullName} Category: category->id">{$article->category->name} tags)"> Tags: tags as $tag">{$tag->name}{sep}, {/sep}

{cache 'Article:read:'.$id.'/related-articles', tags => array_merge($articleTags, ['article/'.$id])} {var $similarArticles = $_similarArticles()} getTotalHits()"> You might be interested in getResults() as $similar"> getId()">{$similar->getSource()['title']} {/cache}

Comment!

true">Show desktop version {/cache}

AMP is evil?

Effective caching with Latte

Yarn - King is dead... or is he?

Local NPM repository