feat(ktl-4438): support kotlin tour progress tracking

.teamcity/documentation/builds/WritersideBuilder.kt

@@ -13,7 +13,7 @@ abstract class WritersideBuilder(
     customInit: BuildType.() -> Unit = {},
     postProcessAdditions: String = postProcessingScript(),
 ) : BuildType({
-    val dockerImageTag = "2.1.2180-p8506"
+    val dockerImageTag = "2.1.2233-p8891"
     val frontend = "file:///opt/static/"
 
     name = "${instance.uppercase()} documentation build"

docs/kr.tree

@@ -3,23 +3,28 @@
 <instance-profile id="kr" name="Kotlin" start-page="home.topic" status="release">
     <toc-element toc-title="Home" topic="home.topic"/>
     <toc-element toc-title="Get started" topic="getting-started.md"/>
-    <toc-element toc-title="Take Kotlin tour" topic="kotlin-tour-welcome.md">
-        <toc-element hidden="true" topic="kotlin-tour-hello-world.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-basic-types.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-collections.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-control-flow.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-functions.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-classes.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-null-safety.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-extension-functions.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-scope-functions.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-lambdas-receiver.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-classes-interfaces.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-objects.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-open-special-classes.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-properties.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-null-safety.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-libraries-and-apis.md"/>
+    <toc-element toc-title="Take Kotlin tour">
+        <toc-element toc-title="Kotlin tour overview" topic="kotlin-tour-welcome.md"/>
+        <toc-element toc-title="Beginner" progress-tracking="true" exclude-from-search="true">
+            <toc-element topic="kotlin-tour-hello-world.md"/>
+            <toc-element topic="kotlin-tour-basic-types.md"/>
+            <toc-element topic="kotlin-tour-collections.md"/>
+            <toc-element topic="kotlin-tour-control-flow.md"/>
+            <toc-element topic="kotlin-tour-functions.md"/>
+            <toc-element topic="kotlin-tour-classes.md"/>
+            <toc-element topic="kotlin-tour-null-safety.md"/>
+        </toc-element>
+        <toc-element toc-title="Intermediate" progress-tracking="true" exclude-from-search="true">
+            <toc-element topic="kotlin-tour-intermediate-extension-functions.md"/>
+            <toc-element topic="kotlin-tour-intermediate-scope-functions.md"/>
+            <toc-element topic="kotlin-tour-intermediate-lambdas-receiver.md"/>
+            <toc-element topic="kotlin-tour-intermediate-classes-interfaces.md"/>
+            <toc-element topic="kotlin-tour-intermediate-objects.md"/>
+            <toc-element topic="kotlin-tour-intermediate-open-special-classes.md"/>
+            <toc-element topic="kotlin-tour-intermediate-properties.md"/>
+            <toc-element topic="kotlin-tour-intermediate-null-safety.md"/>
+            <toc-element topic="kotlin-tour-intermediate-libraries-and-apis.md"/>
+        </toc-element>
     </toc-element>
     <toc-element toc-title="What's new in Kotlin">
         <toc-element toc-title="Kotlin 2.4.20-Beta1" topic="whatsnew-eap.md"/>

docs/topics/tour/kotlin-tour-basic-types.md

@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2.svg" width="20" alt="Second step" /> <strong>Basic types</strong><br />
-        <img src="icon-3-todo.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Every variable and data structure in Kotlin has a type. Types are important because they tell the compiler what you are allowed to 
 do with that variable or data structure. In other words, what functions and properties it has.
@@ -99,7 +90,7 @@ fun main() {
 
 Now that you know how to declare basic types, it's time to learn about [collections](kotlin-tour-collections.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -131,7 +122,14 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-basic-types-solution"}
 
-## Next step
+<seealso></seealso>
 
-[Collections](kotlin-tour-collections.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-hello-world.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-collections.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
 

docs/topics/tour/kotlin-tour-classes.md

@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6.svg" width="20" alt="Sixth step" /> <strong>Classes</strong><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Kotlin supports object-oriented programming with classes and objects. Objects are useful for storing data in your program.
 Classes allow you to declare a set of characteristics for an object. When you create objects from a class, you can save
@@ -255,7 +246,7 @@ For more information about data classes, see [Data classes](data-classes.md).
 
 The last chapter of this tour is about Kotlin's [null safety](kotlin-tour-null-safety.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -396,6 +387,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-classes-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Null safety](kotlin-tour-null-safety.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-functions.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-null-safety.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>

docs/topics/tour/kotlin-tour-collections.md

@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3.svg" width="20" alt="Third step" /> <strong>Collections</strong><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 When programming, it is useful to be able to group data into structures for later processing. Kotlin provides collections
 for exactly this purpose.
@@ -427,7 +418,7 @@ For more information on what you can do with collections, see [Collections](coll
 Now that you know about basic types and how to manage collections, it's time to explore the [control flow](kotlin-tour-control-flow.md)
 that you can use in your programs.
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -514,6 +505,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-collections-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Control flow](kotlin-tour-control-flow.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-basic-types.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-control-flow.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>

docs/topics/tour/kotlin-tour-control-flow.md

@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4.svg" width="20" alt="Fourth step" /> <strong>Control flow</strong><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Like other programming languages, Kotlin is capable of making decisions based on whether a piece of code is evaluated to
 be true. Such pieces of code are called **conditional expressions**. Kotlin is also able to create and iterate
@@ -391,7 +382,7 @@ For more information and examples of conditional expressions and loops, see [Con
 
 Now that you know the fundamentals of Kotlin control flow, it's time to learn how to write your own [functions](kotlin-tour-functions.md).
 
-## Loops practice
+## Loops practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="loops-exercise-1"}
 
@@ -532,6 +523,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-control-flow-loops-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Functions](kotlin-tour-functions.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-collections.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-functions.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>

docs/topics/tour/kotlin-tour-functions.md

@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5.svg" width="20" alt="Fifth step" /> <strong>Functions</strong><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 You can declare your own functions in Kotlin using the `fun` keyword.
 
@@ -561,7 +552,7 @@ For more information on lambda expressions, see [Lambda expressions and anonymou
 
 The next step in our tour is to learn about [classes](kotlin-tour-classes.md) in Kotlin.
 
-## Lambda expressions practice
+## Lambda expressions practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="lambdas-exercise-1"}
 
@@ -626,6 +617,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-lambdas-solution-2"}
 
-## Next step
+<seealso></seealso>
 
-[Classes](kotlin-tour-classes.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-control-flow.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-classes.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>

docs/topics/tour/kotlin-tour-hello-world.md

@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1.svg" width="20" alt="First step" /> <strong>Hello world</strong><br />
-        <img src="icon-2-todo.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-todo.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Here is a simple program that prints "Hello, world!":
 
@@ -105,7 +96,7 @@ For more information, see [String templates](strings.md#string-templates).
 You will notice that there aren't any types declared for variables. Kotlin has inferred the type itself: `Int`. This tour
 explains the different Kotlin basic types and how to declare them in the [next chapter](kotlin-tour-basic-types.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -131,6 +122,11 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-hello-world-solution"}
 
-## Next step
+<seealso></seealso>
+
+<list id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-basic-types.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
 
-[Basic types](kotlin-tour-basic-types.md)

docs/topics/tour/kotlin-tour-intermediate-classes-interfaces.md

@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Classes and interfaces)
+[//]: # (title: Classes and interfaces)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br /> 
-        <img src="icon-4.svg" width="20" alt="Fourth step" /> <strong>Classes and interfaces</strong><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In the beginner tour, you learned how to use classes and data classes to store data and maintain a collection of characteristics
 that can be shared in your code. Eventually, you will want to create a hierarchy to efficiently share code within your 
@@ -451,7 +440,7 @@ you don't have to add new lines of code for every inherited member function.
 
 For more information, see [Delegation](delegation.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="classes-interfaces-exercise-1"}
 
@@ -792,6 +781,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-classes-interfaces-solution-4"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Objects](kotlin-tour-intermediate-objects.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-lambdas-receiver.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-objects.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>