-
Notifications
You must be signed in to change notification settings - Fork 695
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
485 changed files
with
4,770 additions
and
1,172 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * Copyright 2019 The AMP HTML Authors. All Rights Reserved. | ||
| * | ||
| * 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. | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| const express = require('express'); | ||
| const URL = require('url').URL; | ||
| const {setImmutable} = require('@lib/utils/cacheHelpers'); | ||
|
|
||
| // eslint-disable-next-line new-cap | ||
| const examples = express.Router(); | ||
|
|
||
| examples.get('/query', (request, response) => { | ||
| setImmutable(response); | ||
| const queryString = JSON.stringify(request.query, null, 2); | ||
| /* eslint-disable max-len */ | ||
| response.send(`<!doctype html> | ||
| <html âš¡ lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1"> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| <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><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | ||
| <link rel="canonical" href="${request.originalUrl}"> | ||
| <title>AMP Cache Query Demo</title> | ||
| </head> | ||
| <body> | ||
| <h1>Hello World!</h1> | ||
| <pre>${queryString}</pre> | ||
| </body> | ||
| </html> | ||
| `); | ||
| /* eslint-enable max-len */ | ||
| }); | ||
|
|
||
| examples.get('/invalid-amp', (request, response) => { | ||
| setImmutable(response); | ||
| response.send(`<!doctype html> | ||
| <html âš¡ lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1"> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| <title>Invalid AMP</title> | ||
| </head> | ||
| <body> | ||
| <h1>This page is not valid AMP</h1> | ||
| </body> | ||
| </html> | ||
| `); | ||
| }); | ||
|
|
||
| examples.get('/not-found', (request, response) => { | ||
| setImmutable(response); | ||
| response.status(404).send('404 - Not found'); | ||
| }); | ||
|
|
||
| examples.get('/redirect', (request, response) => { | ||
| setImmutable(response); | ||
| if (!request.query.url) { | ||
| response.status().send('No url specified via <code>?url=https://example.com</code>'); | ||
| return; | ||
| } | ||
| try { | ||
| new URL(request.url); | ||
| } catch (err) { | ||
| response.status().send('Invalid url specified'); | ||
| return; | ||
| } | ||
| res.redirect(301, request.query.url); | ||
| }); | ||
|
|
||
| examples.get('/server-error', (request, response) => { | ||
| setImmutable(response); | ||
| response.status(500).send('500 - Internal Server Error'); | ||
| }); | ||
|
|
||
| module.exports = examples; |
54 changes: 54 additions & 0 deletions
54
examples/source/0.introduction/AMPHTML_Ads_Hello_World.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!--- | ||
| preview: a4a | ||
| skipValidation: 'true' | ||
| ---> | ||
|
|
||
| <!-- | ||
| ## Introduction | ||
| An introduction into how to create [AMPHTML ads]({{ g.doc('/content/amp-dev/documentation/guides-and-tutorials/learn/a4a_spec.md').url.path }}). AMPHTML ads are ads implemented using AMPHTML. The AMPHTML ads runtime is based on the AMP runtime and provides the same performance benefits. However, there are a few things that make them different from normal AMPHTML files. | ||
| Read on: The [AMPHTML Validator](https://validator.ampproject.org/#htmlFormat=AMP4ADS) features a special validation mode for AMPHTML ads. | ||
| --> | ||
|
|
||
| <!-- ## Markup --> | ||
| <!-- --> | ||
| <!-- Doctype declaration is required. --> | ||
| <!doctype html> | ||
| <!-- This tells everyone that this is an AMPHTML ads file. --> | ||
| <html âš¡4ads> | ||
| <!-- ### Head --> | ||
| <!-- --> | ||
| <head> | ||
| <!-- The charset definition must be the first child of the `<head>` tag. --> | ||
| <meta charset="utf-8"> | ||
| <title> Hello World</title> | ||
| <!-- AMPHTML ads require a custom version of the AMP runtime.--> | ||
| <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <!-- | ||
| The AMPHTML ads boilerplate which is shorter than the regular AMP boilerplate. --> | ||
| <style amp4ads-boilerplate>body{visibility:hidden}</style> | ||
| <!-- | ||
| CSS must be embedded inline as well. | ||
| --> | ||
| <style amp-custom> | ||
| h1 { | ||
| color: red; | ||
| } | ||
| </style> | ||
| </head> | ||
| <!-- ## Body --> | ||
| <!-- --> | ||
| <body> | ||
| <!-- | ||
| Inside the body, AMPHTML ads are only allowed to use a restricted set of HTML and AMPHTML elements as described in the [spec](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md). | ||
| --> | ||
| <h1>Hello World</h1> | ||
| <!-- | ||
| Check out the other [AMPHTML ads samples](/documentation/examples.html?format=ads) to learn how to create more sophisticated AMPHTML ads. | ||
| --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,3 @@ | ||
| <!--- | ||
| draft: true | ||
| ---> | ||
|
|
||
| <!-- | ||
| ## Introduction | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <!--- | ||
| experiments: | ||
| - amp-date-display | ||
| preview: default | ||
| ---> | ||
|
|
||
| <!-- | ||
| ## Introduction | ||
| The [amp-date-display](/documentation/components/reference/amp-date-display.html) component renders date information in various date formats and in different locales. | ||
| --> | ||
| <!-- --> | ||
| <!doctype html> | ||
| <html âš¡> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <!-- ## Setup --> | ||
| <!-- Include the `amp-date-display` component ... --> | ||
| <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.js"></script> | ||
| <!-- ... and the `amp-mustache` component in the header --> | ||
| <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link rel="canonical" href="<% canonical %>"> | ||
| <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><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| <style amp-custom></style> | ||
| </head> | ||
| <body> | ||
| <!-- | ||
| ## Basic usage | ||
| You must specify one of `datetime`, `timestamp-ms`, or `timestamp-seconds` attributes. This indicates the date and time to display. | ||
| The date information is rendered via an [amp-mustache template](https://www.ampproject.org/docs/reference/components/amp-mustache). | ||
| The day, hour, minutes and seconds values are bound to `{{day}}`, `{{hour}}`, `{{minute}}` and `{{second}}` respectively. | ||
| Double digit format variants (`{{dayTwoDigit}}`, `{{hourTwoDigit}}`, `{{minuteTwoDigit}}` and `{{secondTwoDigit}}`) display these values with zero-padding on single digit values. Other values like `{{iso}}` are also available | ||
| --> | ||
| <amp-date-display timestamp-seconds="2147483648" layout="fixed-height" height="20"> | ||
| <template type="amp-mustache"> | ||
| <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a> will be at {{iso}} | ||
| </template> | ||
| </amp-date-display> | ||
|
|
||
| <!-- | ||
| ## Available variables | ||
| All the variables that can be displayed are in the template below. | ||
| --> | ||
| <amp-date-display datetime="now" layout="fixed" width="360" height="590"> | ||
| <template type="amp-mustache"> | ||
| <table> | ||
| <thead> | ||
| <tr><th>variable</th><th>value</th></tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr><td>day</td><td>{{day}}</td></tr> | ||
| <tr><td>dayName</td><td>{{dayName}}</td></tr> | ||
| <tr><td>dayNameShort</td><td>{{dayNameShort}}</td></tr> | ||
| <tr><td>dayPeriod</td><td>{{dayPeriod}}</td></tr> | ||
| <tr><td>dayTwoDigit</td><td>{{dayTwoDigit}}</td></tr> | ||
| <tr><td>hour</td><td>{{hour}}</td></tr> | ||
| <tr><td>hour12</td><td>{{hour12}}</td></tr> | ||
| <tr><td>hour12TwoDigit</td><td>{{hour12TwoDigit}}</td></tr> | ||
| <tr><td>hourTwoDigit</td><td>{{hourTwoDigit}}</td></tr> | ||
| <tr><td>iso</td><td>{{iso}}</td></tr> | ||
| <tr><td>minute</td><td>{{minute}}</td></tr> | ||
| <tr><td>minuteTwoDigit</td><td>{{minuteTwoDigit}}</td></tr> | ||
| <tr><td>month</td><td>{{month}}</td></tr> | ||
| <tr><td>monthName</td><td>{{monthName}}</td></tr> | ||
| <tr><td>monthNameShort</td><td>{{monthNameShort}}</td></tr> | ||
| <tr><td>monthTwoDigit</td><td>{{monthTwoDigit}}</td></tr> | ||
| <tr><td>second</td><td>{{second}}</td></tr> | ||
| <tr><td>secondTwoDigit</td><td>{{secondTwoDigit}}</td></tr> | ||
| <tr><td>year</td><td>{{year}}</td></tr> | ||
| <tr><td>yearTwoDigit</td><td>{{yearTwoDigit}}</td></tr> | ||
| </tbody> | ||
| </table> | ||
| </template> | ||
| </amp-date-display> | ||
|
|
||
|
|
||
| <!-- | ||
| ## Locales | ||
| Internationalized month and weekday names can be configured by specifying a `locale` attribute. | ||
| For example, the `amp-date-display` components below show the same date information in German, French, Czech and English. | ||
| --> | ||
| <div> | ||
| <amp-date-display datetime="now" locale="de" layout="fixed" width="360" height="20"> | ||
| <template type="amp-mustache"> | ||
| <div>de: {{dayName}} {{day}} {{monthName}} {{year}}</div> | ||
| </template> | ||
| </amp-date-display> | ||
| <amp-date-display datetime="now" locale="fr" layout="fixed" width="360" height="20"> | ||
| <template type="amp-mustache"> | ||
| <div>fr: {{dayName}} {{day}} {{monthName}} {{year}}</div> | ||
| </template> | ||
| </amp-date-display> | ||
| <amp-date-display datetime="now" locale="cs" layout="fixed" width="360" height="20"> | ||
| <template type="amp-mustache"> | ||
| <div>cs: {{dayName}} {{day}} {{monthName}} {{year}}</div> | ||
| </template> | ||
| </amp-date-display> | ||
| <amp-date-display datetime="now" locale="en-GB" layout="fixed" width="360" height="20"> | ||
| <template type="amp-mustache"> | ||
| <div>en-GB: {{dayName}} {{day}} {{monthName}} {{year}}</div> | ||
| </template> | ||
| </amp-date-display> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,3 @@ | ||
| <!--- | ||
| draft: true | ||
| ---> | ||
|
|
||
| <!-- | ||
| ## Introduction | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,3 @@ | ||
| <!--- | ||
| draft: true | ||
| ---> | ||
|
|
||
| <!-- | ||
| ## Introduction | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.