prismic-demo
Advanced tools
It's meant to work with API v2 libs here: * [prismic-javascript](https://github.com/prismicio/prismic-javascript) is on Github. * [prismic-dom](https://github.com/prismicio/prismic-dom) is on Github.
It's meant to work with API v2 libs here:
Embed
Image
Text
Number
Date
Timestamp
Select
Color
StructuredText
WebLink
DocumentLink
ImageLink
FileLink
Separator
Group
GeoPoint
Slices
===================================================
npm install -g prismic-cli
prismic theme https://github.com/prismicio/prismic-demo
npm install
npm start
npm run dev
To fetch documents from your repository, you need to fetch the Api data first.
var Prismic = require('prismic-javascript');
Prismic.api("http://your_repository_name.prismic.io/api", function(error, api) {
var options = {}; // In Node.js, pass the request as 'req' to read the reference from the cookies
api.query("", options, function(err, response) { // An empty query will return all the documents
if (err) {
console.log("Something went wrong: ", err);
}
console.log("Documents: ", response.documents);
});
});
All asynchronous calls return ES2015 promises, so alternatively you can use them instead of callbacks.
var Prismic = require('prismic-javascript');
Prismic.api("https://your-repository-name.prismic.io/api").then(function(api) {
return api.query(""); // An empty query will return all the documents
}).then(function(response) {
console.log("Documents: ", response.results);
}, function(err) {
console.log("Something went wrong: ", err);
});
See the developer documentation or the API documentation for more details on how to use it.
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.
Custom type
"video" : {
"type" : "Embed"
}
Template JS
doc.data.video.embed_url
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
Custom type
"title" : {
"type" : "Text",
}
Template JS
doc.data.title
Custom type
"count" : {
"type" : "Text",
}
Template JS
doc.data.count
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)
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)
Custom type
"gender" : {
"type" : "Select",
}
Template JS
doc.data.gender
Custom type
"background" : {
"type" : "Color",
}
Template JS
doc.data.background
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)
Custom type
"linktoweb" : {
"type" : "Link",
"config" : {
"select" : "web"
}
}
Template JS
doc.data.linktoweb.url
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)
Custom type
"linktomedia" : {
"type" : "Link",
"config" : {
"select" : "media"
}
}
Template JS
doc.data.linktomedia.url
Custom type
"linktofile" : {
"type" : "Link",
"config" : {
"select" : "media"
}
}
Template JS
doc.data.linktofile.url
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)
})
Custom type
"location" : {
"type" : "GeoPoint",
}
Template JS
doc.data.latitude
doc.data.longitude
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
doc.data.contentAsSlices.map((slice) => {
switch(slice.slice_type) {
case 'slides':
slice.value.map((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'
doc.contentAsSlices.map((slice) => {
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'
doc.contentAsSlices.map((slice) => {
switch(slice.slice_type) {
case 'newslice':
//non repeatable part
slice.value.primary.title
//repeatable part
slice.value.items.map(item => {
RichText.asHtml(item.description, linkResolver)
})
break
}
})
Install dependencies:
npm install
Run the project in standard mode:
npm start
Run the project in dev mode: (start nodeJS Server + build sass files)
npm run dev
Stylesheets are written with the preprocessor sass in scss format.
They are localized in ./assets/stylesheets.
You must split each slice in a file to simplify modularity and public sharing.
Don't bother to prefix css properties for each browser, it's already done with autoprefixer when you start the project in dev mode.
Since there is no complex javascript required yet, you only have one file ./public/javascript/main.js to interact directly with the DOM and make any js client code.
How to build a slice named MyDemoSlice:
custom_types../assets/stylesheets/slices/my-demo-slice.scss and import it in ./assets/stylesheets/style.scss../views/slices/my-demo-slice.pug and you can import it from any pug template.The localization is implemented out of the box. You got 4 things to check if you wanna customize it:
In this demo, you can manage different profiles of users out of the box. It's handled with a basic cookies system. You can just switch profile directly in the footer and it will set a new profile.
How it works?
You must set your profiles in profiles.json according to the example in this file.
Each time you switch profile from the select in the footer, it create a cookie prismic.profile with the value of the profile you just selected.
You have now an easy access to the current profile directly from the cookies.
You can access it from the back with the following code:
res.locals.PrismicProfiles.current
You can also access the list of all profiles:
res.locals.PrismicProfiles.profiles
But also the default profile:
res.locals.PrismicProfiles.default
And finally you can access the same PrismicProfiles object from the client in window.PrismicProfiles. It contains exactly the same thing.
This software is licensed under the Apache 2 license, quoted below.
Copyright 2013-2017 Prismic.io (http://prismic.io).
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.
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.
FAQs
It's meant to work with API v2 libs here: * [prismic-javascript](https://github.com/prismicio/prismic-javascript) is on Github. * [prismic-dom](https://github.com/prismicio/prismic-dom) is on Github.
The npm package prismic-demo receives a total of 0 weekly downloads. As such, prismic-demo popularity was classified as not popular.
We found that prismic-demo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.