Merge branch 'next'

* next: Handle bad-token errors Update readme & changelog example: Move signin/change/signup part into footer Put back OAuth2 login Handle partial browser: Stop creating embedded function for notifyRendered Update gulp to 3.7.0 Improve conflict finder Preserve line numbers server: Put script tag at a better place browser: Remove unused parameter Use (again) EJS to template Fix url_to returned URLs Fix: Be sure to create directory before to write files Stop using jsdom
prismic-archive · Jun 12, 2014 · 6314140 · 6314140
2 parents 0e895b7 + f724a6c
commit 6314140
Show file tree

Hide file tree

Showing 14 changed files with 447 additions and 215 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,20 @@
+### Feature
+
+- Add template partial
+  - A partial is a template whose name starts by “_”. It won't be rendered directly (so it doesn't need meta like “prismic-api”) but is included in other
+templates using the helper `partial`. (`[%- partial('footer') %]` will include
+the partial “_footer.html.erb”)
+- Add helper to change ref
+- Add OAuth2 authentication
+- Use [EJS](https://github.com/visionmedia/ejs) for template rendering
+  - Its HTML escaping and filters are available
+
+### Incompatible changes
+
+- Because EJS is now used, every template returning HTML have to be fixed
+(by replacing `[%= ... %]` by `[%- ... %]`) in order to stop escaping the HTML
+twice.
+
 ## 0.0.4
 
 ### Feature

diff --git a/README.md b/README.md
@@ -179,9 +179,12 @@ It is possible to customize the URL as well. To do so, just add a `<meta>` tag
 
 ## Internals
 
-baked.js is built on top of [Node.js](nodejs.org) and use [dom.js](https://github.com/andreasgal/dom.js/) to emulate the DOM.
+baked.js is built on top of [Node.js](nodejs.org).
 
-It uses [Q](https://github.com/kriskowal/q) and [lodash](http://lodash.com), and let [Gulp](gulpjs.com) and [browserify](browserify.org) handle the generation of the browser library.
+It uses [Q](https://github.com/kriskowal/q) and [lodash](http://lodash.com),
+let [Gulp](gulpjs.com) and [browserify](browserify.org) handle the generation
+of the browser library and uses [EJS](https://github.com/visionmedia/ejs) for
+the template rendering.
 
 ### Dynamic browser mode
 
@@ -192,7 +195,7 @@ The generation can actually be performed at 2 places:
   - It allows to send proper content the browsers and search engines.
 - Dynamically by the browser
   - Every statically rendered page is able to re-generate itself, and then to emulate the navigation in the others pages (using [HTML5's History API](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#the-history-interface)).
-  - It allows to specify specific `access_token` and `ref`, in order to render the content using a specific prismic.io's release.
+  - It allows to specify specific `access_token` and `ref`, in order to render the content using a specific prismic.io's release. These can be set automatically using the [OAuth2 authentication](#auth2-authentication).
 
 The dynamic mode needs some specific components:
 
@@ -204,10 +207,59 @@ The dynamic mode needs some specific components:
     - find the template to use, its parameters and the given argument in case of non-statically-rendered page (routing)
       - This case can happen when loading a page that is created only with a specific release.
 
-## Notes
+#### Specific ref to use
 
-- the server build a DOM structure (using JSDOM) in order to navigate inside it, so:
-	- The tags `<% %>` can't be used, because JSDOM doesn't like them
+baked.js provides a helper to easilly switch between refs.
+
+It listen changes made on elements containing the attribute
+“`data-prismic-action="update"`” and update the ref (and re-generate)
+accordingly.
+
+Here an example of use:
+
+```ejs
+<select data-prismic-action="update">
+  [% _.each(refs, function (r) { %]
+    [% if (r.ref == ref) { %]
+      <option value="[%= r.ref %]" selected="selected">[%= r.label %]</option>
+    [% } else { %]
+      <option value="[%= r.ref %]">[%= r.label %]</option>
+    [% } %]
+  [% }) %]
+</select>
+```
+
+#### OAuth2 authentication
+
+baked.js provides a helper to authenticate to your prismic.io application
+using OAuth2.
+
+It listen the “click” events on elements containing attributes
+“`data-prismic-action="signout"`” or “`data-prismic-action="signin"`.”
+
+In order to work, this feature needs a meta tag “`prismic-oauth-client-id`”
+to be defined.
+
+Here an example:
+
+```ejs
+<meta name="prismic-oauth-client-id" content="YOUR_CLIENT_ID">
+...
+[% if (loggedIn) { %]
+  <select data-prismic-action="update">
+    [% _.each(refs, function (r) { %]
+      [% if (r.ref == ref) { %]
+        <option value="[%= r.ref %]" selected="selected">[%= r.label %]</option>
+      [% } else { %]
+        <option value="[%= r.ref %]">[%= r.label %]</option>
+      [% } %]
+    [% }) %]
+  </select>
+  <button data-prismic-action="signout">Sign out</button>
+[% } else { %]
+  <button data-prismic-action="signin">Sign in</button>
+[% } %]
+```
 
 ### Licence
 

diff --git a/example/to_generate/_footer.html b/example/to_generate/_footer.html
@@ -0,0 +1,18 @@
+<div><a href="[%= url_to('/index') %]">index</a></div>
+
+<p>
+  [% if (loggedIn) { %]
+    <select data-prismic-action="update">
+      [% _.each(refs, function (r) { %]
+        [% if (r.ref == ref) { %]
+          <option value="[%= r.ref %]" selected="selected">[%= r.label %]</option>
+        [% } else { %]
+          <option value="[%= r.ref %]">[%= r.label %]</option>
+        [% } %]
+      [% }) %]
+    </select>
+    <button data-prismic-action="signout">Sign out</button>
+  [% } else { %]
+    <button data-prismic-action="signin">Sign in</button>
+  [% } %]
+</p>
diff --git a/example/to_generate/blog/index.html b/example/to_generate/blog/index.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="prismic-api" content="https://lesbonneschoses.prismic.io/api">
+    <!-- meta name="prismic-oauth-client-id" content=""> -->
     <meta name="prismic-routing-pattern" content="/blog.html">
 
     <script src="/baked.js"></script>
@@ -36,7 +37,7 @@ <h2>
 
     [% }) %]
 
-    <a href="[%= url_to('/index') %]">index</a>
+    [%- partial('/footer') %]
 
   </body>
 </html>
diff --git a/example/to_generate/blog/post.html b/example/to_generate/blog/post.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="prismic-api" content="https://lesbonneschoses.prismic.io/api">
+    <!-- meta name="prismic-oauth-client-id" content=""> -->
     <meta name="prismic-routing-pattern" content="$id">
     <meta name="prismic-routing-param" content="id">
 
@@ -28,7 +29,7 @@ <h1>[%= blogPost.getStructuredText("blog-post.body").getTitle().text %]</h1>
       [%= blogPost.getStructuredText("blog-post.body").getFirstParagraph().text %]
     </article>
 
-    <a href="[%= url_to('../index') %]">index</a>
+    [%- partial('/footer') %]
 
   </body>
 </html>
diff --git a/example/to_generate/index.html b/example/to_generate/index.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="prismic-api" content="https://lesbonneschoses.prismic.io/api">
+    <!-- meta name="prismic-oauth-client-id" content=""> -->
 
     <script src="/baked.js"></script>
   </head>
@@ -18,7 +19,7 @@
 
     <div><a href="[%= url_to('blog/index') %]">blog</a></div>
 
-    <div><a href="[%= url_to('index') %]">index</a></div>
+    [%- partial('/footer') %]
 
   </body>
 </html>
diff --git a/example/to_generate/product.html b/example/to_generate/product.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="prismic-api" content="https://lesbonneschoses.prismic.io/api">
+    <!-- meta name="prismic-oauth-client-id" content=""> -->
     <meta name="prismic-routing-param" content="id">
 
     <script src="/baked.js"></script>
@@ -27,7 +28,7 @@ <h1>[%= product.getText('product.name') %]</h1>
       <img data-src="[%= product.getImageView('product.image', 'icon').url %]">
     </div>
 
-    <a href="[%= url_to('index') %]">index</a>
+    [%- partial('/footer') %]
 
   </body>
 </html>
diff --git a/example/to_generate/search.html b/example/to_generate/search.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="prismic-api" content="https://lesbonneschoses.prismic.io/api">
+    <!-- meta name="prismic-oauth-client-id" content=""> -->
     <meta name="prismic-routing-pattern" content="search/$typ/$tag">
     <meta name="prismic-routing-param" content="typ">
     <meta name="prismic-routing-param" content="tag">
@@ -60,7 +61,7 @@ <h2>
 
     [% }) %]
 
-    <a href="[%= url_to('index') %]">index</a>
+    [%- partial('/footer') %]
 
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -7,12 +7,12 @@
   ],
   "devDependencies": {
     "ecstatic": "~0.5.3",
-    "gulp": "~3.6.2",
+    "ejs": "~1.0.0",
+    "gulp": "~3.7.0",
     "gulp-browserify": "~0.5.0",
     "gulp-concat": "~2.2.0",
     "gulp-watch": "~0.6.4",
     "http-server": "~0.6.1",
-    "jsdom": "~0.10.5",
     "lodash": "~2.4.1",
     "moment": "~2.6.0",
     "prismic.io": "~1.0.9",