New drawer menu using amp-sidebar

Cherry picked 3aed625 New header design: * collapse header on mobile devices * add AMP logo * introduce hamburger button add working example of amp-install-serviceworker (#156) * add amp-install-serviceworker sample * add comments on sw-precache * add comment on how the SW works in this demo and how to confirm the result * change to cache all image, video, html * fix to point to original ABE page * fix lint of gulpfile.js * fix to cache only amp-install-serviceworker related files * add comments on benefits of SW and changed only to cache amp-install-serviceworker * nit * modify comments and changed path to sw.js in relative path * change gulpfile to organize the process to generate sw.js * change gulpfile.js to directory put sw.js in dist dir improve amp-social-share sample * add amp facebook sample * remove experimental flag * add samples for all providers Add amp-fx-flying-carpet sample (#169) Change cursor to pointer on mouseover (#179) Improve amp-accordion sample (#184) * demonstrate better show/hide * show simple with single show button Fixes #182,#183. Added ad to amp-fx-flying-carpet (#186) optimize images add AMP URL API embed add AMP URL API Sample Added sticky-ad example (#165) Use a new ad (#187) Remove the non-working link to create a fork Fix typo in NewsArticle sample disable directory file listings Fixes #82 Remove AMP URL API Wrapper * no longer needed as API now supports CORS * rename view folder -> iframe * increase result view size to match default result add separator between amp-fx-flying-carpet and the text, add background and use another ad (#195) New drawer menu using amp-sidebar Cherry picked 3aed625 New header design: * collapse header on mobile devices * add AMP logo * introduce hamburger button New drawer menu using amp-sidebar Cherry picked 3aed625 New header design: * collapse header on mobile devices * add AMP logo * introduce hamburger button
ampproject · Jun 14, 2016 · 62f9d4a · 62f9d4a
1 parent 617d981
commit 62f9d4a
Show file tree

Hide file tree

Showing 50 changed files with 892 additions and 184 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ In case we are missing any examples, feel free to [let us know](https://github.c
 
 ## Installation
 
-1. [Create a fork](https://github.com/ampproject/amp-by-example#fork-destination-box) of the repository.
+1. Fork the repository.
 2. Install [NodeJS](https://nodejs.org).
 3. Setup the repository.
 

diff --git a/api/.gitignore b/api/.gitignore
@@ -0,0 +1 @@
+conf.json
diff --git a/api/app.yaml b/api/app.yaml
@@ -0,0 +1,33 @@
+#	Copyright 2016, Google, Inc.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+runtime: go
+api_version: go1
+threadsafe: yes
+
+handlers:
+- url: /iframe
+  static_dir: iframe
+  secure: always
+- url: /img
+  static_dir: img
+  secure: always
+- url: /third_party
+  static_dir: third_party
+  secure: always
+- url: /.*
+  script: _go_app
+  secure: always
+
+skip_files:
+- ^(.*/)?.*\.DS_Store$
diff --git a/api/iframe/amp-url-api.html b/api/iframe/amp-url-api.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="/third_party/linkify.min.js"></script>
+    <script src="/third_party/linkify-element.min.js"></script>
+
+    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style>
+      pre, textarea, code {
+        font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
+        font-size: 12px;
+        line-height: 16px;
+      }
+      pre, textarea {
+        overflow: auto;
+        margin: 0;
+        padding: 8px;
+        background-color: #f5f5f5;
+      }
+      pre {
+        height: 420px;
+      }
+      textarea {
+        height: 140px;
+        border-style: none;
+        resize: none;
+        display: block;
+        width: 100%;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+      #run {
+        margin: 16px 0;
+      }
+      #loader {
+        display: none;
+        position: relative;
+        top: 124px;
+        width: 24px;
+        height: 24px;
+        margin: auto;
+      }
+    </style>
+    <script type="text/javascript">
+/**
+ * Execute the URL request and update the result field.
+ */
+function sendAmpUrlRequest() {
+  const resultView = document.getElementById('result');
+  resultView.innerHTML = '';
+  const loader = document.getElementById('loader');
+  loader.style.display = 'inline';
+  const urls = document.getElementById('input').value; 
+  sendApiRequest(urls, function(result) {
+    loader.style.display = 'none';
+    resultView.innerHTML = result;
+    linkifyElement(resultView);
+  });
+}
+
+/**
+ * Call the AMP URL API.
+ */
+function sendApiRequest(urls, callback) {
+  try {
+    var url = 'https://content-acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet?key=AIzaSyAM68IyT1bLVrlAU1172bspF-mZ93IdmsY';
+    var xhr = createRequest('POST', url);
+    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
+    xhr.onload = function () {
+      callback(this.responseText);
+    };
+    xhr.onerror = function () {
+      callback('API not available');
+    };
+    xhr.send(urls);
+  }catch(error) {
+    callback(error.message);
+  }
+}
+
+/**
+ * Create the XHR object.
+ */
+function createRequest(method, url) {
+  var xhr = new XMLHttpRequest();
+  if ("withCredentials" in xhr) {
+    // XHR for Chrome/Firefox/Opera/Safari.
+    xhr.open(method, url, true);
+  } else if (typeof XDomainRequest != "undefined") {
+    // XDomainRequest for IE.
+    xhr = new XDomainRequest();
+    xhr.open(method, url);
+  } else {
+    // CORS not supported.
+    xhr = null;
+  }
+  return xhr;
+}
+    </script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:regular&amp;lang=en' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <textarea type="text" id="input" >{  
+  "urls":[  
+    "https://ampbyexample.com",
+    "https://www.example.org/article-without-amp-version",
+    "https://www.theguardian.com/membership/2016/feb/24/todays-release-of-accelerated-mobile-pages-amp",
+    "http://bit.ly/28lya4p"
+  ]
+}</textarea>
+    <button id="run" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="sendAmpUrlRequest();">
+      Execute
+    </button>
+    <img id="loader" src="/img/loader.gif">
+    <pre><code id="result"></code></pre>
+    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
+  </body>
+</html>
diff --git a/api/img/loader.gif b/api/img/loader.gif
diff --git a/api/server.go b/api/server.go
@@ -0,0 +1,27 @@
+// Copyright Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package api
+
+import (
+	"net/http"
+)
+
+func init() {
+	http.HandleFunc("/", serveNotFound)
+}
+
+func serveNotFound(w http.ResponseWriter, r *http.Request) {
+	http.NotFound(w, r)
+}
diff --git a/api/third_party/linkify-element.min.js b/api/third_party/linkify-element.min.js