diff --git a/docs/content.adoc b/docs/content.adoc index c6c6aaa..c4f0e51 100644 --- a/docs/content.adoc +++ b/docs/content.adoc @@ -1,6 +1,7 @@ :experimental: :imagesdir: media/ :sourcedir: ../ + = Content Introduction to Content Studio, content types and content items diff --git a/docs/go-online.adoc b/docs/go-online.adoc index 66eb787..49f2ac2 100644 --- a/docs/go-online.adoc +++ b/docs/go-online.adoc @@ -1,7 +1,6 @@ :imagesdir: media/ = Go Online - Now that the setup of `Hello World` site is completed, it's time to publish. . Select the `Hello World` site in the content browse panel diff --git a/docs/index.adoc b/docs/index.adoc index 3ddd31a..a1d83df 100644 --- a/docs/index.adoc +++ b/docs/index.adoc @@ -2,7 +2,7 @@ = My first site -Learn the fundameltal principals of pages, components, and rendering with the Enonic JS framework. +Learn the fundamental principals of pages, components, and rendering with the Enonic JS framework. TIP: If you are primarily interested in our headless API, visit https://developer.enonic.com/docs/intro[our hands on introduction], or the https://developer.enonic.com/docs/developer-101[developer 101 tutorial]. diff --git a/docs/layouts.adoc b/docs/layouts.adoc index 38f22b9..35a42f3 100644 --- a/docs/layouts.adoc +++ b/docs/layouts.adoc @@ -1,6 +1,7 @@ :imagesdir: media/ :sourcedir: ../ :experimental: + = Layouts If you have the need to have a customizable part that also accept some regions, then a layout is the feature you're looking for. @@ -70,11 +71,6 @@ image::two-column-layout-33-66-with-texts.png["Two column layout with 33/66 conf Follow these links for more details on https://developer.enonic.com/docs/xp/stable/framework/contributions[contributions^] and https://developer.enonic.com/docs/xp/stable/cms/pages/layouts[layouts^]. -== Text component - -Above, we added Text components into the regions. The Text component is a standard component included in Enonic XP, it has standard rendering, but can be customized if needed. - -Visit the refrence documentation for https://developer.enonic.com/docs/xp/stable/cms/pages/text[more details on the Text Component^]. == Summary diff --git a/docs/page-templates.adoc b/docs/page-templates.adoc index f74c007..0af1b97 100644 --- a/docs/page-templates.adoc +++ b/docs/page-templates.adoc @@ -1,5 +1,6 @@ :imagesdir: media/ :experimental: + = Page templates Create page templates to reuse a page across different content items diff --git a/docs/pages.adoc b/docs/pages.adoc index febbb24..aa64d56 100644 --- a/docs/pages.adoc +++ b/docs/pages.adoc @@ -1,18 +1,23 @@ -= Page :experimental: :imagesdir: media/ :sourcedir: ../ -Visualize your content with pages += Pages -NOTE: Using the headless API, Enonic supports use 3rd party front-end frameworks. Enonic also provides an embedded JavaScript runtime, and a https://developer.enonic.com/docs/xp/stable/framework[JS framework], which we will use for rendring here. +Visualize your content with pages. +NOTE: Enonic supports use 3rd party front-end frameworks, but also has its own https://developer.enonic.com/docs/xp/stable/framework[JS framework], which we will use throughout this tutorial. == Page component At the moment, we have some content, but no preview or rendering. 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. Your app includes a pre-defined page component named `hello`. + +TODO: Descriptor? + + + In addition to the controller, this component also uses an html template - a.k.a the View in the Model View Controller (MVC) pattern. It look like this: TIP: The JavaScript controller file must use the same name as the component directory. diff --git a/docs/parts.adoc b/docs/parts.adoc index 1c5ae3b..fdaea0a 100644 --- a/docs/parts.adoc +++ b/docs/parts.adoc @@ -1,7 +1,9 @@ :imagesdir: media/ :sourcedir: ../ + = Parts -A flexible component type to use for your pages + +A flexible component type for your pages == The country part @@ -30,9 +32,11 @@ include::{sourcedir}code-samples/parts/country/country.ts[] include::{sourcedir}code-samples/parts/country/country.html[] ---- + -. When done, the part can be added to the page by drag'n dropping a part from the right-hand-side, then select the `Country` component from the list. By the end, you should see something like this: +. *Add the part to the page* by drag'n dropping a part from the right-hand-side and select the `Country` component from the list. ++ +The result should look something like this: + -image::country-part-on-columbia.png["Result of inserting the country part on the columbia country content item",width=512px] +image::country-part-on-columbia.png["Result of inserting the country part on the columbia country content item",width=300px] NOTE: You may also use the form component tree (on the left, or floating above the page editor) to add components to your page. @@ -72,11 +76,11 @@ include::{sourcedir}code-samples/parts/city-list/city-list.html[] . Add the new part to the page you created earlier. . Finally, configure the part by selecting it and changing the settings in the right hand panel. + -NOTE: The controller is also configured to write the `model` object to the log. Check the sandbox log after visiting a country page to see what is happening. +TIP: The controller also writes the `model object` to the log. Check the sandbox log after visiting a country page to see what is happening. + -image::city-list-part-on-columbia.png["Result of adding city list part to page and configure it to show widescreen images", width=1024px] +image::city-list-part-on-columbia.png["Result of adding city list part to page and configure it to show widescreen images", width=1227px] + -TIP: The images are scaled and cropped in real-time by the https://developer.enonic.com/docs/xp/stable/runtime/engines/site-engine/image-service[Image service^]. The part controller uses the `imageUrl()` function to create a link to the desired image. +Images are scaled and cropped in real-time by the https://developer.enonic.com/docs/xp/stable/runtime/engines/site-engine/image-service[Image service^]. The part controller uses the `imageUrl()` function to create a link to the desired image. TIP: To learn more about parts, visit the https://developer.enonic.com/docs/xp/stable/cms/pages/parts[parts] documentation. diff --git a/docs/regions.adoc b/docs/regions.adoc index 933fe73..97ff67c 100644 --- a/docs/regions.adoc +++ b/docs/regions.adoc @@ -1,6 +1,8 @@ :imagesdir: media/ :sourcedir: ../ + = Regions + Support adding more components to your page, including drag'n drop. == Component dropzones @@ -38,13 +40,21 @@ Your sandbox should automatially pickup the changes, as we are running in dev mo . Activate the page editor (from the top right monitor icon), and select the `Hello` component. + image::hello-regions.gif["Setting up a page with a region", width=1024px] - ++ You now have a page with a single region! - -Try adding a text component to the region. It is available from the right hand side as drag-n-drop, or by using the right click menu. ++ +. Try to *add a text component to the region*. It is available from the right hand side as drag-n-drop, or by using the right click menu. TIP: To learn more about regions, visit the https://developer.enonic.com/docs/xp/stable/cms/pages/regions[regions] documentation. + +== Text component + +Above, we added a text component into the region. The Text component is a standard component included in Enonic XP, it has standard rendering, but can be customized if needed. + +Visit the refrence documentation for https://developer.enonic.com/docs/xp/stable/cms/pages/text[more details on the Text Component^]. + + == Summary You've been introduced to regions, a concept that can be used on a page, as you just saw, but also on layouts, a new component type you'll be introduced to soon. diff --git a/docs/setup.adoc b/docs/setup.adoc index 8066f42..673a39d 100644 --- a/docs/setup.adoc +++ b/docs/setup.adoc @@ -1,4 +1,5 @@ :imagesdir: media/ + = Setup Set up the developer environment, create, build, and deploy and application. @@ -57,28 +58,30 @@ build.gradle //<1> build/ //<2> code-samples/ //<3> docs/ //<4> +tsup/ //<5> src/ main/ resources/ - import/ //<5> - assets/ //<6> + import/ //<6> + assets/ //<7> sites/ - content-types/ //<7> + content-types/ //<8> country/ city/ - parts/ //<8> - pages/ //<9> + parts/ //<9> + pages/ //<10> ---- -<1> Gradle files are used by the build system +<1> Core build files <2> Contains output files produced by the build <3> Code samples that will be used in this tutorial <4> Contains the documentation you are reading now -<5> Contains sample content that is imported when the app starts -<6> Location for static assets -<7> Two pre-defined content types, country and city -<8> Part components - leaf components to place on pages -<9> Page components - root component for pages +<5> TSUP typescript compilation build files +<6> Contains sample content that is imported when the app starts +<7> Location for static assets +<8> Two pre-defined content types, country and city +<9> Part components - leaf components to place on pages +<10> Page components - root component for pages == Building diff --git a/docs/static-assets.adoc b/docs/static-assets.adoc index 5a32b38..1f1440e 100644 --- a/docs/static-assets.adoc +++ b/docs/static-assets.adoc @@ -1,9 +1,9 @@ :imagesdir: media/ :sourcedir: ../ + = Static assets Add static assets like icons, css and JavaScript to your website - == Serving a CSS file So far, the site is primarily made up of dynamic HTML and images.