Use metadata to inject the experiment.html when "experiment": true

ampproject · Mar 11, 2016 · 42d0b1f · 42d0b1f
1 parent e88e366
commit 42d0b1f
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -110,6 +110,15 @@ You can use [markdown](https://help.github.com/articles/github-flavored-markdown
 <amp-img src="img/image1.jpg" width=200 height=100 layout=responsive></amp-img>
 ```
 
+If your sample is using an experimental component, you can add a metadata section (`<!--- ... --->`) with the json variables `experiment` and `component`, this will skip its validation and add an experimental note with instructions to your sample:
+
+```html
+<!---{
+  "experiment": true,
+  "component": "amp-experimenal-component"
+}--->
+```
+
 ## Contributing
 
 Please see [the CONTRIBUTING file](CONTRIBUTING.md) for information on contributing to amp-by-example.

diff --git a/src/20_Components/amp-accordion.html b/src/20_Components/amp-accordion.html
@@ -1,18 +1,8 @@
+<!---{
+    "experiment": true,
+    "component": "amp-accordion"
+  }--->
 <!--
-  <div class="card info-card">
-    <h4>Experimental Mode</h4>
-    <p>`amp-accordion` is currently in experimental mode and needs to be manually enabled:
-
-    <ol>
-    <li>check the box under [CDN experiments](https://cdn.ampproject.org/experiments.html).
-    </li>
-    <li>enter the following line in the [Javascript console](https://developer.chrome.com/devtools/docs/console):
-      <pre><code>AMP.toggleExperiment('amp-accordion')</code></pre>
-    </li>
-    </ol>
-    </p>
-  </div>
-
   #### Introduction
 
   An accordion provides a way for viewers to have a glance at the outline of the content and jump to a section or their choice at their will. 

diff --git a/tasks/compile-example.js b/tasks/compile-example.js
@@ -59,17 +59,23 @@ module.exports = function(templateRoot, template) {
       const stream = this;
       const example = ExampleFile.fromPath(file.path);
       const nextExample = example.nextFile();
-
       const args = {
         head: document.head,
         title: example.title(),
         fileName: example.url(),
         github: example.githubUrl(),
         subHeading: example.title(),
         exampleStyles: document.styles,
-        sections: document.sections
+        component: document.metadata.component,
+        sections: document.sections,
+        isExperiment: document.metadata.experiment
       };
 
+      if (document.metadata.experiment && !document.metadata.component) {
+        throw new Error("Example (" + example.url() +
+          ") is 'experiment': true, but is missing the 'component' metadata");s
+      }
+
       Metadata.add(args);
       // avoid duplicate canonical refs as some examples define a canonical link
       if (document.head.indexOf('rel="canonical"') > -1) {

diff --git a/templates/example.html b/templates/example.html
@@ -13,6 +13,17 @@
   <body>
     <div class="body">
       {{> header.html}}
+      {{#isExperiment}}
+        <div class="box">
+          <div class="column doc">
+            {{> experiment.html}}
+          </div>
+          <div class="column code hide-on-mobile">
+          </div>
+          <div class="column preview">
+          </div>
+        </div>
+      {{/isExperiment}}
       {{#sections}}
       <div class="box">
         <div class="column doc {{^inBody}}hide-on-mobile{{/inBody}}">
@@ -36,4 +47,4 @@
     </div>
     {{> analytics.html}}
   </body>
-</html>
+</html>
diff --git a/templates/experiment.html b/templates/experiment.html
@@ -1,11 +1,11 @@
 <div class="card info-card">
   <h4>Experimental Mode</h4>
-  `{{component}}` is currently in experimental mode and needs to be manually enabled:
+  <code>{{component}}</code> is currently in experimental mode and needs to be manually enabled:
 
   <ol>
-    <li>check the box under [CDN experiments](https://cdn.ampproject.org/experiments.html).
+    <li>check the box under <a href="https://cdn.ampproject.org/experiments.html">CDN experiments</a>.
     </li>
-    <li>enter the following line in the [Javascript console](https://developer.chrome.com/devtools/docs/console):
+    <li>enter the following line in the <a href="https://developer.chrome.com/devtools/docs/console">Javascript console</a>:
       <pre><code>AMP.toggleExperiment('{{component}}')</code></pre>
     </li>
   </ol>