prismic-javascript - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

@@ -13,3 +13,3 @@ {
   ],
-  "version": "1.0.0",
+  "version": "1.0.1",
   "devDependencies": {
@@ -16,0 +16,0 @@ "json-loader": "^0.5.4",

README.md

 ## JavaScript development kit v2 for prismic.io
 
-[![npm version](https://badge.fury.io/js/prismic.io.svg)](http://badge.fury.io/js/prismic.io)
+[![npm version](https://badge.fury.io/js/prismic-javascript.svg)](http://badge.fury.io/js/prismic-javascript)
 [![Build Status](https://api.travis-ci.org/prismicio/prismic-javascript.png)](https://travis-ci.org/prismicio/prismic-javascript)
@@ -10,2 +10,51 @@
 
+It's meant to work in pair with the prismic-dom library available here:
+* [prismic-dom](https://github.com/prismicio/prismic-dom) is on Github.
+
+------------------------------------
+
+
+[1. Installation](#installation)
+--------------------------------
+
+> [NPM](#npm) <br />
+> [CDN](#cdn) <br />
+> [Downloadable version](#downloadable-version) <br />
+> [Demo project](#demo-project) <br />
+> [Starter kits](#starter-kits) <br />
+
+[2. Query the content](#query-the-content)
+--------------------------------
+
+[3. Integrate the content](#integrate-the-content)
+-----------------------------------------------------
+
+> [Embed](#embed) <br />
+> [Image](#image) <br />
+> [Text](#text) <br />
+> [Number](#number) <br />
+> [Date](#date) <br />
+> [Timestamp](#timestamp) <br />
+> [Select](#select) <br />
+> [Color](#color) <br />
+> [StructuredText](#structuredText) <br />
+> [WebLink](#weblink) <br />
+> [DocumentLink](#documentlink) <br />
+> [ImageLink](#imagelink) <br />
+> [FileLink](#filelink) <br />
+> [Separator](#separator) <br />
+> [Group](#group) <br />
+> [GeoPoint](#geopoint) <br />
+> [Slices](#slices) <br />
+
+[4. Contribute to the kit](#contribute-to-the-kit)
+--------------------------------
+> [Install the kit locally](#install-the-kit-locally) <br />
+> [Documentation](#documentation) <br />
+
+[5. License](#license)
+-----------------------------------------------------
+
+===================================================
+
 ### Installation
@@ -37,3 +86,3 @@
 
-### Starter kits
+#### Starter kits
 
@@ -45,3 +94,3 @@ For new project, you can start from a sample project:
 
-### Demo project
+#### Demo project
 
@@ -51,3 +100,3 @@ You can find an integration of prismic content with the new API V2 in the following project:
 
-### Usage
+### Query the content
 
@@ -86,2 +135,392 @@ To fetch documents from your repository, you need to fetch the Api data first.
 
+### Integrate the content
+
+In each case documented below, you will have a snippet of the custom type and another for the code needed to fill the content field into your JS Template.
+In these examples we have a `doc` parameter corresponding to the fetched prismic document.
+
+
+#### Embed
+Custom type
+```
+"video" : {
+  "type" : "Embed"
+}
+```
+
+Template JS
+```
+doc.data.video.embed_url
+```
+
+#### Image
+Custom type
+```
+"photo" : {
+  "type" : "Image",
+  "fieldset" : "Image",
+  "config" : {
+    "constraint" : {
+      "width" : 300,
+      "height" : 300
+    },
+    "thumbnails" : [ {
+      "name" : "Small",
+      "width" : 100,
+      "height" : 100
+    }, {
+      "name" : "Medium",
+      "width" : 200,
+      "height" : 200
+    }, {
+      "name" : "Large",
+      "width" : 300,
+      "height" : 300
+    } ]
+  }
+}
+```
+Template JS
+```
+//main view
+doc.data.photo.url
+doc.data.photo.alt
+doc.data.photo.width
+doc.data.photo.height
+
+//thumbnails => example for small view
+doc.data.photo.small.url
+doc.data.photo.small.alt
+doc.data.photo.small.width
+doc.data.photo.small.height
+```
+#### Text
+Custom type
+```
+"title" : {
+  "type" : "Text",
+}
+```
+
+Template JS
+```
+doc.data.title
+```
+#### Number
+Custom type
+```
+"count" : {
+  "type" : "Text",
+}
+```
+
+Template JS
+```
+doc.data.count
+```
+#### Date
+Custom type
+```
+"publication" : {
+  "type" : "Date",
+}
+```
+
+Template JS
+```
+import { Date } from 'prismic-dom'
+
+// date as string from the API
+doc.data.publication
+// date as JS Date
+Date(doc.data.publication)
+
+```
+#### Timestamp
+Custom type
+```
+"time" : {
+  "type" : "Timestamp",
+}
+```
+
+Template JS
+```
+import { Date } from 'prismic-dom'
+
+// timestamp as string from the API
+doc.data.time
+// timestamp as JS Datetime
+Date(doc.data.time)
+```
+#### Select
+Custom type
+```
+"gender" : {
+  "type" : "Select",
+}
+```
+
+Template JS
+```
+doc.data.gender
+```
+#### Color
+Custom type
+```
+"background" : {
+  "type" : "Color",
+}
+```
+
+Template JS
+```
+doc.data.background
+```
+#### RichText
+Custom type
+```
+"description" : {
+  "type" : "StructuredText",
+}
+```
+
+Template JS
+```
+import { RichText } from 'prismic-dom'
+
+RichText.asText(doc.data.description)
+
+//linkResolver must be declare somewhere
+RichText.asHtml(doc.data.description, linkResolver)
+```
+
+#### WebLink
+Custom type
+```
+"linktoweb" : {
+  "type" : "Link",
+  "config" : {
+    "select" : "web"
+  }
+}
+```
+
+Template JS
+```
+doc.data.linktoweb.url
+```
+#### DocumentLink
+Custom type
+```
+"linktodoc" : {
+  "type" : "Link",
+  "config" : {
+    "select" : "document",
+    "customtypes" : [ <your-custom-type-id> ],
+    "tags" : [ <your-tag> ],
+  }
+}
+```
+
+Template JS
+```
+//return url of the document link
+doc.data.linktodoc
+//return url of the document
+linkResolver(doc.data.linktodoc)
+```
+#### ImageLink
+Custom type
+```
+"linktomedia" : {
+  "type" : "Link",
+  "config" : {
+    "select" : "media"
+  }
+}
+```
+
+Template JS
+```
+doc.data.linktomedia.url
+```
+#### FileLink
+Custom type
+```
+"linktofile" : {
+  "type" : "Link",
+  "config" : {
+    "select" : "media"
+  }
+}
+```
+
+Template JS
+```
+doc.data.linktofile.url
+```
+#### Group
+Custom type
+```
+"feature" : {
+  "type" : "Group",
+  "repeat": true, //default to true but put explicitly for the example
+  "config" : {
+    "field" : {
+        "title" : {
+          "type" : "Text",
+        },
+        "description" : {
+          "type" : "StructuredText",
+        }
+    }
+  }
+}
+```
+
+Template JS
+```
+import { RichText } from 'prismic-dom'
+
+doc.data.feature.forEach(item => {
+    item.title
+    RichText.asHtml(item.description, linkResolver)
+})
+```
+#### GeoPoint
+Custom type
+```
+"location" : {
+  "type" : "GeoPoint",
+}
+```
+
+Template JS
+```
+doc.data.latitude
+doc.data.longitude
+```
+#### Slices
+**Slice with Group as value**
+The Group value will be put directly as Slice value
+Custom type
+```
+"contentAsSlices" : {
+    "fieldset" : "Dynamic page zone...",
+    "type" : "Slices",
+    "config" : {
+        "choices" : {
+            "slides" : {
+                "type" : "Group",
+                //required to display name in slice select in the writing room
+                "fieldset" : "Slides",
+                "config" : {
+                    "fields" : {
+                        "illustration" : {
+                          "type" : "Image"
+                        },
+                        "title" : {
+                          "type" : "StructuredText"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+Template JS
+```
+for(slice in doc.data.contentAsSlices) {
+    switch(slice.slice_type) {
+        case 'slides':
+          slice.value.forEach(item => {
+            item.illustration.url
+            item.title
+          })
+          break
+    }
+}
+
+```
+**Slice with basic fragment like Text as value**
+The fragment value will be put directly as Slice value
+Custom type
+```
+"contentAsSlices" : {
+    "fieldset" : "Dynamic page zone...",
+    "type" : "Slices",
+    "config" : {
+        "choices" : {
+            "description" : {
+              "type" : "StructuredText"
+            }
+        }
+    }
+}
+```
+
+Template JS
+```
+import { RichText } from 'prismic-dom'
+
+for(slice in doc.contentAsSlices) {
+    switch(slice.slice_type) {
+        case 'description':
+            RichText.asHtml(slice.value, linkResolver)
+            break
+    }
+}
+
+```
+
+**new Slice**
+the new Slice type allow you to create a repeatable area and a non repeatable one.
+```
+"contentAsSlices" : {
+    "fieldset" : "Dynamic page zone...",
+    "type" : "Slices",
+    "config" : {
+        "choices" : {
+            "newslice" : {
+              "type" : "Slice",
+              "non-repeat": {
+                "title": {
+                  "type": "Text"
+                }
+              },
+              "repeat": {
+                "description": {
+                  "type" : "StructuredText"
+                }
+              }
+            }
+        }
+    }
+}
+```
+
+Template JS
+```
+import { RichText } from 'prismic-dom'
+
+for(slice in doc.contentAsSlices) {
+    switch(slice.slice_type) {
+        case 'newslice':
+          //non repeatable part
+          slice.value.primary.title
+
+          //repeatable part
+          slice.value.items.forEach(item => {
+            RichText.asHtml(item.description, linkResolver)
+          })
+          break
+    }
+}
+
+```
+
+### Contribute to the kit
+
 #### Install the kit locally
@@ -109,3 +548,3 @@
 
-Copyright 2013-2016 Prismic.io (http://prismic.io).
+Copyright 2013-2017 Prismic.io (http://prismic.io).
 
@@ -112,0 +551,0 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this project except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1950436

increased by1.44%

Number of lines in readme file

548

increased by402.75%

No dependency changes