deploy: 16ac34a

enonic · Dec 18, 2023 · f604b97 · f604b97
1 parent 08f13ff
commit f604b97
Show file tree

Hide file tree

Showing 21 changed files with 739 additions and 47 deletions.
diff --git a/next/appendix.ahtml b/next/appendix.ahtml
@@ -480,7 +480,10 @@ Once installed, edit your site and add the application to the list of linked app
 <div class="sect2">
 <h3 id="logging"><a class="link" href="#logging">Logging</a></h3>
 <div class="paragraph">
-<p>While developing an app, it can be helpful to see the structure of objects returned by library functions.</p>
+<p>If the JavaScript code you write is going to be executed on the browser, you can simply use the <code>console.log</code> for logging as usual.</p>
+</div>
+<div class="paragraph">
+<p>Now, if your code is going to be processed on the server, which is the case when writing any of the controllers mentioned in this guide, there will be no <code>console.log</code>, so Enonic provides the <code>log.info</code> function to log things to the server.</p>
 </div>
 <div class="paragraph">
 <p>A way to do this is by creating up a small utility script.</p>
@@ -513,7 +516,7 @@ util.log(content);</code></pre>
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/content-types.ahtml b/next/content-types.ahtml
@@ -5,7 +5,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="generator" content="Asciidoctor 2.0.20">
-<title>Content</title>
+<title>Content Items</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
 <style>
 /*! Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
@@ -439,15 +439,15 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 <div id="toc" class="toc2">
 <div id="toctitle">Table of Contents</div>
 <ul class="sectlevel1">
-<li><a href="#content">Content</a></li>
+<li><a href="#content_items">Content Items</a></li>
 <li><a href="#content_types">Content Types</a></li>
 <li><a href="#summary">Summary</a></li>
 </ul>
 </div>
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="content"><a class="link" href="#content">Content</a></h2>
+<h2 id="content_items"><a class="link" href="#content_items">Content Items</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>On the <code>Dashboard</code>, a Content Studio widget should now have appeared. It shows that we already have some sample content available.</p>
@@ -565,7 +565,7 @@ Visit these links for more information about <a href="https://developer.enonic.c
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/go-online.ahtml b/next/go-online.ahtml
@@ -499,7 +499,7 @@ You can see the published site and the master branch on this url: <code><a href=
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/index.ahtml b/next/index.ahtml
@@ -496,7 +496,7 @@ If you are primarily looking to use Enonic&#8217;s headless API, visit <a href="
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/layouts.ahtml b/next/layouts.ahtml
diff --git a/next/media/css.png b/next/media/css.png
diff --git a/next/media/page-template-1.png b/next/media/page-template-1.png
diff --git a/next/media/page-template-2.png b/next/media/page-template-2.png
diff --git a/next/media/page-template-3.png b/next/media/page-template-3.png
diff --git a/next/media/page-template-4.png b/next/media/page-template-4.png
diff --git a/next/media/page-template-5.png b/next/media/page-template-5.png
diff --git a/next/media/two-column-layout-33-66-with-texts.png b/next/media/two-column-layout-33-66-with-texts.png
diff --git a/next/media/two-column-layout-with-texts.png b/next/media/two-column-layout-with-texts.png
diff --git a/next/media/two-column-layout.png b/next/media/two-column-layout.png
diff --git a/next/page-templates.ahtml b/next/page-templates.ahtml
@@ -5,7 +5,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="generator" content="Asciidoctor 2.0.20">
-<title>Page Templates</title>
+<title>Mapping content types to views</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
 <style>
 /*! Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
@@ -439,52 +439,73 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 <div id="toc" class="toc2">
 <div id="toctitle">Table of Contents</div>
 <ul class="sectlevel1">
-<li><a href="#page_templates">Page Templates</a>
-<ul class="sectlevel2">
+<li><a href="#mapping_content_types_to_views">Mapping content types to views</a></li>
 <li><a href="#toggle_template">Toggle template</a></li>
-</ul>
-</li>
+<li><a href="#summary">Summary</a></li>
 </ul>
 </div>
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="page_templates"><a class="link" href="#page_templates">Page Templates</a></h2>
+<h2 id="mapping_content_types_to_views"><a class="link" href="#mapping_content_types_to_views">Mapping content types to views</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
+<p>On the Content types chapter we mentioned that you&#8217;d get to know the <code>Templates</code> child content of the root site later&#8230;&#8203; now&#8217;s the time!</p>
+</div>
+<div class="paragraph">
 <p>With our current approach, you would have to configure a new page for every country in the list. A slightly more efficient approach is to use page templates.</p>
 </div>
 <div class="paragraph">
 <p>By creating a page template, and map it to a specific content types, all items of this type - i.e. countries - will be rendered by the page template.</p>
 </div>
 <div class="paragraph">
-<p>Let&#8217;s create a page template from the country page you just made:</p>
+<p>Let&#8217;s create a page template for the country content type:</p>
 </div>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Edit the country page made in the previous step, in the visual editor - select the page and choose "Save as Page template" from the right hand component panel.</p>
+<p>Select the <code>Templates</code> content item and then click on btn:[new]</p>
+<div class="imageblock">
+<div class="content">
+<img src="media/page-template-1.png" alt="List of content types under the root site content, with the Templates highlighted" width="1024px">
+</div>
+</div>
 </li>
 <li>
-<p>A new browser tab will open with the new template. Rename it and save.</p>
-<div class="admonitionblock tip">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-tip" title="Tip"></i>
-</td>
-<td class="content">
-The <code>Supports</code> field defines which content type(s) the template will apply to.
-</td>
-</tr>
-</table>
+<p>Select the <code>Page template</code> content type</p>
+<div class="imageblock">
+<div class="content">
+<img src="media/page-template-2.png" alt="Modal showing the page template content type" width="1024px">
+</div>
+</div>
+</li>
+<li>
+<p>On supports, select <code>Country</code> content type and click on <code>Apply</code></p>
+<div class="imageblock">
+<div class="content">
+<img src="media/page-template-3.png" alt="List of available content types under the support filter, with the Country content type highlighted" width="1024px">
+</div>
+</div>
+</li>
+<li>
+<p>On the right section, select the <code>Hello Regions!</code> page</p>
+<div class="imageblock">
+<div class="content">
+<img src="media/page-template-4.png" alt="List of available pages, with the Hello Regions! page highlighted" width="1024px">
+</div>
 </div>
+</li>
+<li>
+<p>Right click on <code>Drop here</code> region in the added page, then <code>insert</code> and <code>part</code> and select the <code>Country</code> part</p>
 <div class="imageblock">
 <div class="content">
-<img src="media/page-template.gif" alt="Creating a page template from the country page" width="1024px">
+<img src="media/page-template-5.png" alt="List of available parts to be added withing a region, with the Country part highlighted" width="1024px">
 </div>
 </div>
 </li>
+<li>
+<p>Then finally give this page template a name, such as "Country Page Template" and save it.</p>
+</li>
 </ol>
 </div>
 <div class="admonitionblock note">
@@ -499,8 +520,11 @@ Try clicking the other countries to verify that the template actually works as i
 </tr>
 </table>
 </div>
-<div class="sect2">
-<h3 id="toggle_template"><a class="link" href="#toggle_template">Toggle template</a></h3>
+</div>
+</div>
+<div class="sect1">
+<h2 id="toggle_template"><a class="link" href="#toggle_template">Toggle template</a></h2>
+<div class="sectionbody">
 <div class="paragraph">
 <p>Your originally edited country still uses the custom page you created - you can change it to use the new page template as well.</p>
 </div>
@@ -528,11 +552,21 @@ For each content item, you can select a specific template, or customize the pres
 </div>
 </div>
 </div>
+<div class="sect1">
+<h2 id="summary"><a class="link" href="#summary">Summary</a></h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>You&#8217;ve just learned about page templates, which is a way to map certain configurations of views to the existing content types of your application.</p>
+</div>
+<div class="paragraph">
+<p>This is a crucial feature of the CMS since its usage guarantees consistency of views throughout same types of contents.</p>
+</div>
+</div>
 </div>
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/pages.ahtml b/next/pages.ahtml
@@ -5,7 +5,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="generator" content="Asciidoctor 2.0.20">
-<title>Pages</title>
+<title>Your first page</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
 <style>
 /*! Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
@@ -439,7 +439,7 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 <div id="toc" class="toc2">
 <div id="toctitle">Table of Contents</div>
 <ul class="sectlevel1">
-<li><a href="#pages">Pages</a>
+<li><a href="#your_first_page">Your first page</a>
 <ul class="sectlevel2">
 <li><a href="#page_component">Page component</a></li>
 <li><a href="#create_page">Create page</a></li>
@@ -451,7 +451,7 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="pages"><a class="link" href="#pages">Pages</a></h2>
+<h2 id="your_first_page"><a class="link" href="#your_first_page">Your first page</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>At the moment, we have some content, but no preview or rendering.</p>
@@ -460,7 +460,7 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 <p>As a headless CMS, Enonic supports use 3rd party front-ends, but Enonic also has an an embedded JavaScript runtime, and a <a href="https://developer.enonic.com/docs/xp/stable/framework">JS framework</a>.</p>
 </div>
 <div class="paragraph">
-<p>This can be used to customize the platform, or, like in our case render pages for a website.</p>
+<p>This can be used to customize the platform, or, like in our case, render pages for a website.</p>
 </div>
 <div class="paragraph">
 <p>Pages are essentially composed from one or more components. Using the Enonic framework, each component will have a JavaScript controller which is responsible for rendering it.</p>
@@ -596,7 +596,7 @@ To learn more about pages, visit the <a href="https://developer.enonic.com/docs/
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/parts.ahtml b/next/parts.ahtml
@@ -745,7 +745,7 @@ To learn more about parts, visit the <a href="https://developer.enonic.com/docs/
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/regions.ahtml b/next/regions.ahtml
@@ -5,7 +5,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="generator" content="Asciidoctor 2.0.20">
-<title>Regions</title>
+<title>Regions: injectable slots</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
 <style>
 /*! Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
@@ -439,14 +439,14 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 <div id="toc" class="toc2">
 <div id="toctitle">Table of Contents</div>
 <ul class="sectlevel1">
-<li><a href="#regions">Regions</a></li>
+<li><a href="#regions_injectable_slots">Regions: injectable slots</a></li>
 <li><a href="#summary">Summary</a></li>
 </ul>
 </div>
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="regions"><a class="link" href="#regions">Regions</a></h2>
+<h2 id="regions_injectable_slots"><a class="link" href="#regions_injectable_slots">Regions: injectable slots</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Content Studio&#8217;s page editor also supports adding more components to a page, using drag&#8217;n drop.</p>
@@ -503,8 +503,8 @@ export function get(): Response {
 
     // Prepare the response object
     const response: Response = {
-		body: render(VIEW, model)
-	};
+		  body: render(VIEW, model)
+	  };
 
     return response;
 }</code></pre>
@@ -583,7 +583,7 @@ To learn more about regions, visit the <a href="https://developer.enonic.com/doc
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/setup.ahtml b/next/setup.ahtml
@@ -768,7 +768,7 @@ For further details on the dev command, check the <a href="https://developer.eno
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/next/static-assets.ahtml b/next/static-assets.ahtml
@@ -445,6 +445,7 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
 <li><a href="#lib_static">Lib static</a></li>
 </ul>
 </li>
+<li><a href="#summary">Summary</a></li>
 </ul>
 </div>
 </div>
@@ -538,10 +539,18 @@ When running in dev mode (like you do now), cache headers are deactivated
 </div>
 </div>
 </div>
+<div class="sect1">
+<h2 id="summary"><a class="link" href="#summary">Summary</a></h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>The journey on this docs so far provided you a starting ground to build your first website. Let&#8217;s now take a look on how you can publish everything you&#8217;ve done so far and finally Go online!</p>
+</div>
+</div>
+</div>
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:17 UTC
+Last updated 2023-12-18 14:03:04 UTC
 </div>
 </div>
 </body>

diff --git a/stable/index.ahtml b/stable/index.ahtml
@@ -1619,7 +1619,7 @@ util.log(content);</code></pre>
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2023-12-13 23:37:05 UTC
+Last updated 2023-12-18 14:02:49 UTC
 </div>
 </div>
 </body>