|
<!doctype html> |
|
<!-- Either ⚡4email or amp4email is valid --> |
|
<html ⚡4email> |
|
|
|
<head> |
|
<!-- REQUIRED --> |
|
<meta charset="utf-8"> |
|
<script async src="https://cdn.ampproject.org/v0.js"></script> |
|
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> |
|
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> |
|
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> |
|
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> |
|
<!-- REQUIRED: Hide until the amp script is loaded. --> |
|
<style amp4email-boilerplate> |
|
body { |
|
visibility: hidden |
|
} |
|
</style> |
|
<!-- Custom styles: Hide until the amp script is loaded. --> |
|
<style amp-custom> |
|
* { |
|
box-sizing: border-box; |
|
} |
|
body { |
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
padding: 0 10px; |
|
} |
|
#amp-1 { |
|
background: #3742fa; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
height: 100vh; |
|
} |
|
h1 { |
|
text-align: center; |
|
margin: 50px 0px; |
|
} |
|
.posts { |
|
padding: 10px; |
|
} |
|
.post { |
|
width: 100%; |
|
border-radius: 10px; |
|
background: #f9f9f9; |
|
border: 1px solid #d9d9d9; |
|
align-items: flex-start; |
|
flex-wrap: wrap; |
|
margin-bottom: 25px; |
|
overflow: hidden; |
|
} |
|
.post>.post-content { |
|
padding: 0 20px 20px 20px; |
|
line-height: 20px; |
|
} |
|
form { |
|
text-align: center; |
|
} |
|
button { |
|
border: 1px solid #d9d9d9; |
|
border-radius: 10px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<!-- Custom body --> |
|
<h1> |
|
This week's newsletter |
|
</h1> |
|
|
|
<amp-list src="https://www.mocky.io/v2/5ca70261340000012f76b269" layout="fixed-height" width="auto" height="200" |
|
items="posts"> |
|
<template type="amp-mustache"> |
|
<form id="bookmark-submit" action-xhr="https://your-site.com/some-endpoint" method="post"> |
|
<div class="post"> |
|
<a href="https://hashnode.com"> |
|
{{#coverImage}} |
|
<amp-img src={{coverImage}} width="400" height="225"> |
|
</amp-img> |
|
{{/coverImage}} |
|
{{^coverImage}} |
|
<amp-img src='https://dummyimage.com/600x400/e0e0e0/858585.png&text=NA' width="400" height="225"> |
|
</amp-img> |
|
{{/coverImage}} |
|
</a> |
|
<div class="post-content"> |
|
<h3>{{title}}</h3> |
|
<hr /> |
|
<span> |
|
<button name="post.bookmark" value={{_id}} type="submit"> |
|
<amp-img src='https://img.icons8.com/ios/50/000000/bookmark-ribbon.png' width="20" height="20"> |
|
</amp-img> |
|
Bookmark |
|
</button> |
|
</span> |
|
<button name="post.upvote" value={{_id}} type="submit"> |
|
<amp-img src='https://img.icons8.com/ios/50/000000/facebook-like.png' width="20" height="20"></amp-img> |
|
Upvote |
|
</button> |
|
</div> |
|
</div> |
|
</form> |
|
</template> |
|
</amp-list> |
|
<!-- |
|
/endpoint/unsubscribe |
|
unsubscribe: false -> action : subscribe |
|
unsubscribe: true|undefined -> action: unsubscribe |
|
--> |
|
<form id="unsubscribe-form" action-xhr="https://your-endpoint.com/unsubscribe" method="post"> |
|
<input type="hidden" name="access-token" value="access-token-value" /> // To determine the user. This will be hard coded when the email is sent. |
|
<input type="hidden" name="unsubscribe" [value]="!state.unsubscribe"> |
|
<button type="submit" on="tap:AMP.setState({state: {unsubscribe: !state.unsubscribe}})" class="unsub-button" |
|
[text]="state.unsubscribe ? 'Subscribe' : 'Unsubscribe'"> |
|
Unsubscribe |
|
</button> |
|
</form> |
|
<br> |
|
</body> |
|
|
|
</html> |
