diff --git a/public/stylesheets/vendors/help.min.css b/public/stylesheets/vendors/help.min.css index 1d8669b..16e0f59 100644 --- a/public/stylesheets/vendors/help.min.css +++ b/public/stylesheets/vendors/help.min.css @@ -1 +1 @@ -#prismic-help *{outline:0}#prismic-help strong{color:#68D496;font-weight:500;}#prismic-help a{color:#68D496;text-decoration:none}#prismic-help a:hover{text-decoration:underline}#prismic-help code.tag{box-sizing:border-box;display:inline-block;font-size:16px;line-height:24px;padding:0 5px;color:#57bf83;background:#fafcfc;border-radius:4px;border:1px solid #f0f4f7}#prismic-help{margin:auto;background-color:#fff}#prismic-help header{color:#fff;background-image:linear-gradient(-180deg,#4545AE 0,#673AB7 100%);padding:35px 50px 0;line-height:1.6em;margin:auto;height:900px;position:relative}#prismic-help header .hero-curve{-webkit-clip-path:polygon(100% 100%,100% 0,0 100%);-moz-clip-path:polygon(100% 100%,100% 0,0 100%);-o-clip-path:polygon(100% 100%,100% 0,0 100%);clip-path:polygon(100% 100%,100% 0,0 100%);display:block;position:absolute;bottom:0;left:0;z-index:1;width:100%;height:300px;background-color:#fff}#prismic-help header nav{display:flex;justify-content:space-between;max-width:960px;margin:auto}#prismic-help header nav a{color:#fff;text-decoration:none;font-size:16px}#prismic-help header nav a.doc{color:#d8d8ff;display:flex}#prismic-help header nav a.doc img{margin-left:10px}#prismic-help header nav a strong{font-weight:700}#prismic-help header nav a:hover{text-decoration:underline}#prismic-help header .wrapper{max-width:500px;margin:70px auto 0;text-align:center}#prismic-help header h1{font-weight:700;font-size:26px;letter-spacing:.3}#prismic-help header .wrapper p{font-size:18px;font-weight:400;text-align:center;line-height:30px;letter-spacing:.3}#prismic-help header .flip-flap{width:960px;max-width:90%;position:absolute;left:50%;transform:translateX(-50%);bottom:40px;z-index:1;perspective:960px}#prismic-help header .flip-flap .flipper{transition:.6s;transform-style:preserve-3d;position:relative;animation-name:flipFlap;animation-duration:4s;animation-delay:2s;animation-iteration-count:1;animation-timing-function:ease-in-out}@-webkit-keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}@-moz-keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}@-o-keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}@keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}#prismic-help header .flip-flap .gif,#prismic-help header .flip-flap .guide{backface-visibility:hidden}#prismic-help header .flip-flap .guide{padding:60px 80px 80px;box-sizing:border-box;background-color:#fff;box-shadow:0 10px 17px 0 rgba(44,49,126,.2);transform:rotateX(0);position:relative;z-index:2;border-radius:4px}#prismic-help header .flip-flap .gif{height:480px;background-image:url(../../../images/bb.gif);background-size:102%;background-position:-3px 90%;box-shadow:0 10px 17px 0 rgba(44,49,126,.2);transform:rotateX(180deg);position:absolute;top:-35px;left:0;right:0;bottom:0}#prismic-help header .guide a{color:#516677;text-decoration:none}#prismic-help header .guide a:hover{text-decoration:underline}#prismic-help section{max-width:800px;margin:auto;padding:100px 50px 50px}#prismic-help h1{margin:10px 0;font-size:28px;font-weight:500;letter-spacing:.5;line-height:52px;text-align:center}#prismic-help h2,#prismic-help h3{letter-spacing:.25;font-size:24px;color:#324150}#prismic-help h2{margin-bottom:30px;font-weight:600}#prismic-help h3{position:relative;margin-bottom:15px;font-weight:400;padding:0 0 0 45px}#prismic-help h3 span:first-child,#prismic-help ul li span:first-child{position:absolute;background:#FFCE80;border-radius:100%;padding:0 13px;font-weight:600;font-size:14px;color:#fff;left:0;top:3px}#prismic-help ul li span:first-child{top:20px;padding:0 10px}#prismic-help .guide ul li span:first-child{top:35px}#prismic-help h4{font-size:18px;line-height:32px;font-weight:600;letter-spacing:.18;margin-bottom:15px;color:#324150}#prismic-help section p{margin-bottom:40px}#prismic-help ul{list-style:none;padding:0;margin:0}#prismic-help ul li{align-items:center;color:#516677;font-size:16px;font-weight:700;position:relative;padding:35px 0 35px 45px;border-bottom:1px solid #E0EAF1}#prismic-help ul li img{position:absolute;right:0}#prismic-help ul li.done{opacity:.4}#prismic-help ul li.done:after{content:'Done!';position:absolute;right:0;font-weight:initial}#prismic-help ul li:last-child{border-bottom:none;padding-bottom:0}#prismic-help .source-code{position:relative;width:100%;margin:40px 0}#prismic-help .source-code code{box-sizing:border-box;width:100%;padding:20px;line-height:1.8rem}.hljs{display:block;overflow-x:auto;padding:.5em;background:#F1F6F8;border-radius:10px;font-size:16px;color:#506677}.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title{color:#506677;font-weight:400}.hljs-comment{color:#9AACBB}.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-meta,.hljs-name,.hljs-quote,.hljs-regexp,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-subst,.hljs-symbol,.hljs-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{color:#506677}.hljs-string{color:#68D496}.hljs-emphasis{font-style:italic} +#prismic-help *{outline:0}#prismic-help a{color:#68D496;text-decoration:none}#prismic-help a:hover{text-decoration:underline}#prismic-help code.tag{box-sizing:border-box;display:inline-block;font-size:16px;line-height:24px;padding:0 5px;color:#57bf83;background:#fafcfc;border-radius:4px;border:1px solid #f0f4f7}#prismic-help{margin:auto;background-color:#fff}#prismic-help header{color:#fff;background-image:linear-gradient(-180deg,#4545AE 0,#673AB7 100%);padding:35px 50px 0;line-height:1.6em;margin:auto;height:900px;position:relative}#prismic-help header .hero-curve{-webkit-clip-path:polygon(100% 100%,100% 0,0 100%);-moz-clip-path:polygon(100% 100%,100% 0,0 100%);-o-clip-path:polygon(100% 100%,100% 0,0 100%);clip-path:polygon(100% 100%,100% 0,0 100%);display:block;position:absolute;bottom:0;left:0;z-index:1;width:100%;height:300px;background-color:#fff}#prismic-help header nav{display:flex;justify-content:space-between;max-width:960px;margin:auto}#prismic-help header nav a{color:#fff;text-decoration:none;font-size:16px}#prismic-help header nav a.doc{color:#d8d8ff;display:flex}#prismic-help header nav a.doc img{margin-left:10px}#prismic-help header nav a strong{font-weight:700}#prismic-help header nav a:hover{text-decoration:underline}#prismic-help header .wrapper{max-width:500px;margin:70px auto 0;text-align:center}#prismic-help header h1{font-weight:700;font-size:26px;letter-spacing:.3}#prismic-help header .wrapper p{font-size:18px;font-weight:400;text-align:center;line-height:30px;letter-spacing:.3}#prismic-help header .flip-flap{width:960px;max-width:90%;position:absolute;left:50%;transform:translateX(-50%);bottom:40px;z-index:1;perspective:960px}#prismic-help header .flip-flap .flipper{transition:.6s;transform-style:preserve-3d;position:relative;animation-name:flipFlap;animation-duration:4s;animation-delay:2s;animation-iteration-count:1;animation-timing-function:ease-in-out}@-webkit-keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}@-moz-keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}@-o-keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}@keyframes flipFlap{0%,100%{transform:rotateX(0)}10%,90%{transform:rotateX(180deg)}}#prismic-help header .flip-flap .gif,#prismic-help header .flip-flap .guide{backface-visibility:hidden}#prismic-help header .flip-flap .guide{padding:60px 80px 80px;box-sizing:border-box;background-color:#fff;box-shadow:0 10px 17px 0 rgba(44,49,126,.2);transform:rotateX(0);position:relative;z-index:2;border-radius:4px}#prismic-help header .flip-flap .gif{height:480px;background-image:url(../../../images/bb.gif);background-size:102%;background-position:-3px 90%;box-shadow:0 10px 17px 0 rgba(44,49,126,.2);transform:rotateX(180deg);position:absolute;top:-35px;left:0;right:0;bottom:0}#prismic-help header .guide a{color:#516677;text-decoration:none}#prismic-help header .guide a:hover{text-decoration:underline}#prismic-help section{max-width:800px;margin:auto;padding:100px 50px 50px}#prismic-help h1{margin:10px 0;font-size:28px;font-weight:500;letter-spacing:.5;line-height:52px;text-align:center}#prismic-help h2,#prismic-help h3{letter-spacing:.25;font-size:24px;color:#324150}#prismic-help h2{margin-bottom:30px;font-weight:600}#prismic-help h3{position:relative;margin-bottom:15px;font-weight:400;padding:0 0 0 45px}#prismic-help h3 span:first-child,#prismic-help ul li span:first-child{position:absolute;background:#FFCE80;border-radius:100%;padding:0 13px;font-weight:600;font-size:14px;color:#fff;left:0;top:3px}#prismic-help ul li span:first-child{top:20px;padding:0 10px}#prismic-help .guide ul li span:first-child{top:35px}#prismic-help h4{font-size:18px;line-height:32px;font-weight:600;letter-spacing:.18;margin-bottom:15px;color:#324150}#prismic-help section p{margin-bottom:40px}#prismic-help ul{list-style:none;padding:0;margin:0}#prismic-help ul li{align-items:center;color:#516677;font-size:16px;font-weight:700;position:relative;padding:35px 0 35px 45px;border-bottom:1px solid #E0EAF1}#prismic-help ul li img{position:absolute;right:0}#prismic-help ul li.done{opacity:.4}#prismic-help ul li.done:after{content:'Done!';position:absolute;right:0;font-weight:initial}#prismic-help ul li:last-child{border-bottom:none;padding-bottom:0}#prismic-help .source-code{position:relative;width:100%;margin:40px 0}#prismic-help .source-code code{box-sizing:border-box;width:100%;padding:20px;line-height:1.8rem}#prismic-help .note{display:block;margin:20px 0;font-weight:700}#prismic-help .tag strong{font-weight:700;color:inherit}#prismic-help code strong{font-weight:700;color:#000}.hljs{display:block;overflow-x:auto;padding:.5em;background:#F1F6F8;border-radius:10px;font-size:16px;color:#506677}.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title{color:#506677;font-weight:400}.hljs-comment{color:#9AACBB}.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-meta,.hljs-name,.hljs-quote,.hljs-regexp,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-subst,.hljs-symbol,.hljs-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{color:#506677}.hljs-string{color:#68D496}.hljs-emphasis{font-style:italic} \ No newline at end of file diff --git a/views/help.pug b/views/help.pug index ead769f..4bf7d0a 100644 --- a/views/help.pug +++ b/views/help.pug @@ -21,20 +21,28 @@ body else a(href="#config") strong Configure a repository - a.doc(href="https://prismic.io/docs") Documentation + a.doc(href="https://prismic.io/docs/nodejs/getting-started/prismic-from-scratch-with-nodejs") Documentation img(src="images/open.svg" alt="") .wrapper img(src="images/rocket.svg" alt="") h1 High five, you deserve it! - p Grab a well deserved cup of coffee, you're two steps away from creating a page with dynamic content. + - var stepCount = isConfigured ? 'two' : 'three' + p Grab a well deserved cup of coffee, you're !{stepCount} steps away from creating a page with dynamic content. .hero-curve .flip-flap .flipper .guide ul - li.done - span 1 - |Bootstrap your project + if isConfigured + li.done + span 1 + |Bootstrap your project + else + li + a(href="#config") + span 1 + |Bootstrap your project + img(src="images/arrow.svg" alt="") li a(href="#query") span 2 @@ -68,7 +76,7 @@ body .source-code pre - code + code.js |// In prismic-configuration.js |apiEndpoint: "http://your-repo-name.prismic.io/api/v2", @@ -78,28 +86,30 @@ body |Create a route and retrieve content p - h4 You need to publish your content first ! + h4 You need to publish your content first! |To add a page to your project, you need to first specify a route. The route contains the URL and performs queries for the needed content. - br + span.note Note that you will need to include a UID field in your Custom Type in order for this to work. |In the following example we set a /page/:uid URL to fetch content of your custom type by its UID. The route then calls the page template and passes it the retrieved content. .source-code pre - code - // Using NodeJS + code.js |// add a new route in ./app.js |app.get('/page/:uid', (req, res, next) => { + | | // We store the param uid in a variable | const uid = req.params.uid; - | // We are using the function to get a document by its uid + | + | // We are using the function to get a document by its uid field | req.prismic.api.getByUID('#{''}', uid) - | .then((pageContent) => { - | if (pageContent) { - | // pageContent is a document, or null if there is no match - | res.render('page', { - | // Where 'page' is the name of your pug template file (page.pug) - | pageContent, - | }); + | .then((document) => { + | + | // document is a document object, or null if there is no match + | if (document) { + | + | // Render the 'page' pug template file (page.pug) + | res.render('page', { document }); + | | } else { | res.status(404).send('404 not found'); | } @@ -111,30 +121,32 @@ body p |To discover all the functions you can use to query your documents go to  - a(href="https://prismic.io/docs/custom-types#query?lang=javascript" target="_blank") the prismic documentation + a(href="https://prismic.io/docs/nodejs/query-the-api/how-to-query-the-api" target="_blank") the prismic documentation h3#done span 3 - |Fill a template - p Now all that's left to be done is insert your content into the template. + |Fill your template + p Now all that's left to be done is to insert your content into the template. br - |You can get the content using the pageContent object we defined above. Each content field is accessed using the custom type API-ID and the field key defined in the custom type (for example page.image). + |You can get the content using the document object we defined above. All the content fields are accessed using their API-IDs. For example if you have an image field with the API-ID main_image, then you can access the image content with document.data.!{`main_image`}. .source-code pre - code + code.js |//- Create template views/page.pug |extends ./layout.pug + | | //- Create a block |block body - | div(data-wio-id=pageContent.id) + | div + | | //- This is how to get an image into your template - | img(src=pageContent.data.!{`your_field_image_id`}.url) + | img(src=document.data.!{`your_iamge_field_id`}.url) + | | //- This is how to get a structured text into your template - | != PrismicDOM.RichText.asHtml(pageContent.data.!{`your_field_text_id`}, ctx.linkResolver) - | != PrismicDOM.RichText.asHtml(pageContent.data.!{`your_field_text_id`}, ctx.linkResolver) + | != PrismicDOM.RichText.asHtml(document.data.!{`your_text_field_id`}, ctx.linkResolver) br br p |To discover how to get all the field go to  - a(href="https://prismic.io/docs/fields/structuredtext#?lang=javascript" target="_blank") the prismic documentation + a(href="https://prismic.io/docs/nodejs/templating/the-response-object" target="_blank") the prismic documentation