theevilhead/amp-email-personalised-newsletter.html

## amp-email-personalised-newsletter.html
<!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>