tuning continued

enonic · Dec 19, 2023 · a4e18ab · a4e18ab
1 parent c82a57e
commit a4e18ab
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.