Initial support for AMP (Accelerated Mobile Pages)

https://www.ampproject.org/

Basic implementation. Still needs the node description to be parsed,
as <img> tags need to be <amp-img> with special tags.
This commit is contained in:
Pablo Vazquez 2017-01-23 15:47:14 +01:00
parent 85988bb8c9
commit e3fc5d1b9b
2 changed files with 39 additions and 0 deletions

View File

@ -207,6 +207,10 @@ def view(node_id):
template_path = '{0}/{1}_embed.html'.format(template_path, template_action)
# Full override for AMP view
if request.args.get('format') == 'amp':
template_path = 'nodes/view_amp.html'
try:
return render_template(template_path,
node_id=node._id,

View File

@ -0,0 +1,35 @@
doctype html
html(⚡)
head
meta(charset='utf-8')
script(async, src='//cdn.ampproject.org/v0.js')
title {{ node.name }} - Blender Cloud
link(rel='canonical', href='{{ url_for_node(node_id=node._id) }}')
meta(name='viewport', content='width=device-width,minimum-scale=1,initial-scale=1')
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(amp-custom).
body {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-weight: 400;font-style: normal;letter-spacing: 0;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga" on;color: rgba(0,0,0,.8);font-size: 18px;line-height: 1.4;}
h1, h2, h3, h4, h5, h6{margin: 20px;}
.node-description {margin: 10px 20px 30px 20px}
.view-on-cloud {padding: 20px}
noscript
style(amp-boilerplate).
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
body
| {% if node.picture %}
amp-img(
src="{{ node.picture.thumbnail('l', api=api) }}",
layout="responsive",
height="{{ node.picture.height }}",
width="{{ node.picture.width }}")
| {% endif %}
h1 {{ node.name }}
| {% if node.description %}
.node-description {{ node.description }}
| {% endif %}
a.view-on-cloud(href="{{ url_for_node(node_id=node._id) }}") View on Blender Cloud