From eb87e0b852eea4706abfe25a373b9eb6e178b70c Mon Sep 17 00:00:00 2001
From: Peter Muessig <peter.muessig@sap.com>
Date: Mon, 24 Feb 2025 17:47:46 +0100
Subject: [PATCH] docs: generate JS variants from TS

---
 README.md                 | 74 +++++++++++++++++++--------------------
 steps/01/README.md        |  4 +--
 steps/02/README.md        |  4 +--
 steps/03/README.md        |  6 ++--
 steps/04/README.md        |  6 ++--
 steps/05/README.md        |  6 ++--
 steps/06/README.md        |  6 ++--
 steps/07/README.md        |  6 ++--
 steps/08/README.md        |  4 +--
 steps/09/README.md        |  4 +--
 steps/10/README.md        |  4 +--
 steps/11/README.md        |  6 ++--
 steps/12/README.md        |  6 ++--
 steps/13/README.md        |  6 ++--
 steps/14/README.md        |  6 ++--
 steps/15/README.md        |  4 +--
 steps/16/README.md        |  4 +--
 steps/17/README.md        |  4 +--
 steps/18/README.md        |  4 +--
 steps/19/README.md        |  4 +--
 steps/20/README.md        |  6 ++--
 steps/21/README.md        |  6 ++--
 steps/22/README.md        |  4 +--
 steps/23/README.md        |  4 +--
 steps/24/README.md        |  6 ++--
 steps/25/README.md        |  2 +-
 steps/26/README.md        |  4 +--
 steps/27/README.md        |  4 +--
 steps/28/README.md        |  4 +--
 steps/30/README.md        |  4 +--
 steps/31/README.md        |  4 +--
 steps/32/README.md        |  4 +--
 steps/33/README.md        |  4 +--
 steps/34/README.md        |  6 ++--
 steps/35/README.md        |  4 +--
 steps/36/README.md        |  4 +--
 steps/37/README.md        |  6 ++--
 steps/38/README.md        |  2 +-
 tools/prepare-gh-pages.js | 69 ++++++++++++++++++++++++++++++------
 39 files changed, 181 insertions(+), 134 deletions(-)

diff --git a/README.md b/README.md
index 01cb7da3..fb0dfa58 100644
--- a/README.md
+++ b/README.md
@@ -39,44 +39,44 @@ We first introduce you to the basic development paradigms like *Model-View-Contr
 
 The tutorial consists of the following steps. To start, just open the first link - you`ll be guided from there.
 
-- **[Step 1: Hello World!](steps/01/README.md "As you know OpenUI5 is all about HTML5. Let’s get started with building a first \“Hello World\” with only HTML.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-01/index.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip))
-- **[Step 2: Bootstrap](steps/02/README.md "Before we can do something with OpenUI5, we need to load and initialize it. This process of loading and initializing OpenUI5 is called bootstrapping. Once this bootstrapping is finished, we simply	display an alert.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-02/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip))
-- **[Step 3: Controls](steps/03/README.md "Now it is time to build our first little UI by replacing the \“Hello World\” text in the HTML body by the OpenUI5 control sap/m/Text. In the beginning, we will use the	JavaScript control interface to set up the UI, the control instance is then placed into the HTML body. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-03/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip))
-- **[Step 4: XML Views](steps/04/README.md "Putting all our UI into the index.ts file will very soon result in a messy setup, and there is quite a bit of work ahead of us. So let’s do a first modularization by putting the sap/m/Text control into a dedicated view.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-04/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip))
-- **[Step 5: Controllers](steps/05/README.md "In this step, we replace the text with a button and show the \“Hello World\” message when the button is pressed. The handling of the button's press event is implemented in the controller of the view.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-05/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip))
-- **[Step 6: Modules](steps/06/README.md "In OpenUI5, resources are often referred to as modules. In this step, we replace the alert from the last exercise with a proper Message Toast from the sap.m library.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-06/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip))
-- **[Step 7: JSON Model](steps/07/README.md "Now that we have set up the view and controller, it’s about time to think about the M in MVC.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-07/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip))
-- **[Step 8: Translatable Texts](steps/08/README.md "In this step we move the texts of our UI to a separate resource file.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-08/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip)) 
-- **[Step 9: Component Configuration](steps/09/README.md "After we have introduced all three parts of the Model-View-Controller /(MVC/) concept, we now come to another important structural aspect of OpenUI5. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-09/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip))  
-- **[Step 10: Descriptor for Applications](steps/10/README.md "All application-specific configuration settings will now further be put in a separate descriptor file called manifest.json. This clearly separates the application coding from the configuration settings and makes our app even more flexible. For example, all SAP Fiori applications are realized as components and come with a descriptor file in order to be hosted in the SAP Fiori launchpad.")**  ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-10/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip))
-- **[Step 11: Pages and Panels](steps/11/README.md "After all the work on the app structure it’s time to improve the look of our app. We will use two controls from the sap.m library to add a bit more &quot;bling&quot; to our UI. You will also learn about control aggregations in this step.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-11/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip)) 
-- **[Step 12: Shell Control as Container](steps/12/README.md "Now we use a shell control as container for our app and use it as our new root element. The shell takes care of visual adaptation of the application to the device’s screen size by introducing a so-called letterbox on desktop screens.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-12/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip)) 
-- **[Step 13: Margins and Paddings](steps/13/README.md "Our app content is still glued to the corners of the letterbox. To fine-tune our layout, we can add margins and paddings to the controls that we added in the previous step. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-13/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip)) 
-- **[Step 14: Custom CSS and Theme Colors](steps/14/README.md "Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-14/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip)) 
-- **[Step 15: Nested Views](steps/15/README.md "Our panel content is getting more and more complex and now it is time to move the panel content to a separate view. With that approach, the application structure is much easier to understand, and the individual parts of the app can be reused.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-15/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip)) 
-- **[Step 16: Dialogs and Fragments](1/steps/16/README.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-16/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip)) 
-- **[Step 17: Fragment Callbacks](steps/17/README.md "Now that we have integrated the dialog, it's time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-17/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip))
-- **[Step 18: Icons](steps/18/README.md "Our dialog is still pretty much empty. Since OpenUI5 is shipped with a large icon font that contains more than 500 icons, we will add an icon to greet our users when the dialog is opened.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-18/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18.zip))  
-- **[Step 19: Aggregation Binding](steps/19/README.md "Now that we have established a good structure for our app, it's time to add some more functionality. We start exploring more features of data binding by adding some invoice data in JSON format that we display in a list below the panel.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-19/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19.zip)) 
-- **[Step 20: Data Types](steps/20/README.md "The list of invoices is already looking nice, but what is an invoice without a price assigned? Typically prices are stored in a technical format and with a /'./' delimiter in the data model. For example, our invoice for pineapples has the calculated price 87.2 without a currency. We are going to use the OpenUI5 data types to format the price properly, with a locale-dependent decimal separator and two digits after the separator.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-20/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20.zip)) 
-- **[Step 21: Expression Binding](steps/21/README.md "Sometimes the predefined types of OpenUI5 are not flexible enough and you want to do a simple calculation or formatting in the view - that is where expressions are really helpful. We use them to format our price according to the current number in the data model.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-21/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21.zip))  
-- **[Step 22: Custom Formatters](steps/22/README.md "If we want to do a more complex logic for formatting properties of our data model, we can also write a custom formatting function. We will now add a localized status with a custom formatter, because the status in our data model is in a rather technical format.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-22/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22.zip))
-- **[Step 23: Filtering](steps/23/README.md "In this step, we add a search field for our product list and define a filter that represents the search term. When searching, the list is automatically updated to show only the items that match the search term.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-23/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23.zip))
-- **[Step 24: Sorting and Grouping](steps/24/README.md "To make our list of invoices even more user-friendly, we sort it alphabetically instead of just showing the order from the data model. Additionally, we introduce groups and add the company that ships the products so that the data is easier to consume.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-24/index-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip))
-- **[Step 25: Remote OData Service](steps/25/README.md "So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.")** (🔗 Live Preview *unfeasible* \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip))
-- **[Step 26: Mock Server Configuration](steps/26/README.md "We just ran our app against a real service, but for developing and testing our app we do not want to rely on the availability of the “real” service or put additional load on the system where the data service is located.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-26/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip))
-- **[Step 27: Unit Test with QUnit](steps/27/README.md "Now that we have a test folder in the app, we can start to increase our test coverage. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip))
-- **[Step 28: Integration Test with OPA](steps/28/README.md "If we want to test interaction patterns or more visual features of our app, we can also write an integration test. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip))
+- **[Step 1: Hello World!](steps/01/README.md "As you know OpenUI5 is all about HTML5. Let’s get started with building a first \“Hello World\” with only HTML.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/01/index.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip))
+- **[Step 2: Bootstrap](steps/02/README.md "Before we can do something with OpenUI5, we need to load and initialize it. This process of loading and initializing OpenUI5 is called bootstrapping. Once this bootstrapping is finished, we simply	display an alert.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/02/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip))
+- **[Step 3: Controls](steps/03/README.md "Now it is time to build our first little UI by replacing the \“Hello World\” text in the HTML body by the OpenUI5 control sap/m/Text. In the beginning, we will use the	JavaScript control interface to set up the UI, the control instance is then placed into the HTML body. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/03/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03-js.zip))
+- **[Step 4: XML Views](steps/04/README.md "Putting all our UI into the index.ts file will very soon result in a messy setup, and there is quite a bit of work ahead of us. So let’s do a first modularization by putting the sap/m/Text control into a dedicated view.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/04/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04-js.zip))
+- **[Step 5: Controllers](steps/05/README.md "In this step, we replace the text with a button and show the \“Hello World\” message when the button is pressed. The handling of the button's press event is implemented in the controller of the view.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/05/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05-js.zip))
+- **[Step 6: Modules](steps/06/README.md "In OpenUI5, resources are often referred to as modules. In this step, we replace the alert from the last exercise with a proper Message Toast from the sap.m library.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/06/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06-js.zip))
+- **[Step 7: JSON Model](steps/07/README.md "Now that we have set up the view and controller, it’s about time to think about the M in MVC.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/07/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07-js.zip))
+- **[Step 8: Translatable Texts](steps/08/README.md "In this step we move the texts of our UI to a separate resource file.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/08/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08-js.zip)) 
+- **[Step 9: Component Configuration](steps/09/README.md "After we have introduced all three parts of the Model-View-Controller /(MVC/) concept, we now come to another important structural aspect of OpenUI5. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/09/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09-js.zip))  
+- **[Step 10: Descriptor for Applications](steps/10/README.md "All application-specific configuration settings will now further be put in a separate descriptor file called manifest.json. This clearly separates the application coding from the configuration settings and makes our app even more flexible. For example, all SAP Fiori applications are realized as components and come with a descriptor file in order to be hosted in the SAP Fiori launchpad.")**  ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/10/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10-js.zip))
+- **[Step 11: Pages and Panels](steps/11/README.md "After all the work on the app structure it’s time to improve the look of our app. We will use two controls from the sap.m library to add a bit more &quot;bling&quot; to our UI. You will also learn about control aggregations in this step.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/11/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11-js.zip)) 
+- **[Step 12: Shell Control as Container](steps/12/README.md "Now we use a shell control as container for our app and use it as our new root element. The shell takes care of visual adaptation of the application to the device’s screen size by introducing a so-called letterbox on desktop screens.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/12/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12-js.zip)) 
+- **[Step 13: Margins and Paddings](steps/13/README.md "Our app content is still glued to the corners of the letterbox. To fine-tune our layout, we can add margins and paddings to the controls that we added in the previous step. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/13/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13-js.zip)) 
+- **[Step 14: Custom CSS and Theme Colors](steps/14/README.md "Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip)) 
+- **[Step 15: Nested Views](steps/15/README.md "Our panel content is getting more and more complex and now it is time to move the panel content to a separate view. With that approach, the application structure is much easier to understand, and the individual parts of the app can be reused.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/15/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15-js.zip)) 
+- **[Step 16: Dialogs and Fragments](1/steps/16/README.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/16/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16-js.zip)) 
+- **[Step 17: Fragment Callbacks](steps/17/README.md "Now that we have integrated the dialog, it's time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/17/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17-js.zip))
+- **[Step 18: Icons](steps/18/README.md "Our dialog is still pretty much empty. Since OpenUI5 is shipped with a large icon font that contains more than 500 icons, we will add an icon to greet our users when the dialog is opened.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/18/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18-js.zip))  
+- **[Step 19: Aggregation Binding](steps/19/README.md "Now that we have established a good structure for our app, it's time to add some more functionality. We start exploring more features of data binding by adding some invoice data in JSON format that we display in a list below the panel.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/19/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19-js.zip)) 
+- **[Step 20: Data Types](steps/20/README.md "The list of invoices is already looking nice, but what is an invoice without a price assigned? Typically prices are stored in a technical format and with a /'./' delimiter in the data model. For example, our invoice for pineapples has the calculated price 87.2 without a currency. We are going to use the OpenUI5 data types to format the price properly, with a locale-dependent decimal separator and two digits after the separator.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/20/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20-js.zip)) 
+- **[Step 21: Expression Binding](steps/21/README.md "Sometimes the predefined types of OpenUI5 are not flexible enough and you want to do a simple calculation or formatting in the view - that is where expressions are really helpful. We use them to format our price according to the current number in the data model.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/21/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21-js.zip))  
+- **[Step 22: Custom Formatters](steps/22/README.md "If we want to do a more complex logic for formatting properties of our data model, we can also write a custom formatting function. We will now add a localized status with a custom formatter, because the status in our data model is in a rather technical format.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/22/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22-js.zip))
+- **[Step 23: Filtering](steps/23/README.md "In this step, we add a search field for our product list and define a filter that represents the search term. When searching, the list is automatically updated to show only the items that match the search term.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/23/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23-js.zip))
+- **[Step 24: Sorting and Grouping](steps/24/README.md "To make our list of invoices even more user-friendly, we sort it alphabetically instead of just showing the order from the data model. Additionally, we introduce groups and add the company that ships the products so that the data is easier to consume.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/24/index-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24-js.zip))
+- **[Step 25: Remote OData Service](steps/25/README.md "So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.")** (🔗 Live Preview *unfeasible* \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25-js.zip))
+- **[Step 26: Mock Server Configuration](steps/26/README.md "We just ran our app against a real service, but for developing and testing our app we do not want to rely on the availability of the “real” service or put additional load on the system where the data service is located.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/26/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26-js.zip))
+- **[Step 27: Unit Test with QUnit](steps/27/README.md "Now that we have a test folder in the app, we can start to increase our test coverage. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27-js.zip))
+- **[Step 28: Integration Test with OPA](steps/28/README.md "If we want to test interaction patterns or more visual features of our app, we can also write an integration test. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28-js.zip))
 - **[Step 29: Debugging Tools](steps/29/README.md "Even though we have added a basic test coverage in the previous steps, it seems like we accidentally broke our app, because it does not display prices to our invoices anymore. We need to debug the issue and fix it before someone finds out.")** (*code remains unchanged from the previous step*)
-- **[Step 30: Routing and Navigation](steps/30/README.md "So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-30/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip))
-- **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-31/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip))
-- **[Step 32: Routing Back and History](steps/32/README.md "Now we can navigate to our detail page and display an invoice, but we cannot go back to the overview page yet. We'll add a back button to the detail page and implement a function that shows our overview page again.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-32/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip))
-- **[Step 33: Custom Controls](steps/33/README.md "In this step, we are going to extend the functionality of OpenUI5 with a custom control. We want to rate the product shown on the detail page, so we create a composition of multiple standard controls using the OpenUI5 extension mechanism and add some glue code to make them work nicely together. This way, we can reuse the control across the app and keep all related functionality in one module.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-33/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip))
-- **[Step 34: Responsiveness](steps/34/README.md "In this step, we improve the responsiveness of our app. OpenUI5 applications can be run on phone, tablet, and desktop devices and we can configure the application to make best use of the screen estate for each scenario. Fortunately, OpenUI5 controls like the 	sap.m.Table already deliver a lot of features that we can use.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-34/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip))
-- **[Step 35: Device Adaptation](steps/35/README.md "We now configure the visibility and properties of controls based on the device that we run the application on. By making use of the sap.ui.Device API and defining a device model we will make the app look great on many devices.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-35/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35.zip))
-- **[Step 36: Content Density](steps/36/README.md "In this step of our Walkthrough tutorial, we adjust the content density based on the user’s device. OpenUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-36/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36.zip))
-- **[Step 37: Accessibility](steps/37/README.md "In this step we're going to improve the accessibility of our app.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-37/test/mockServer-cdn.html) \| [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37.zip))
-- **[Step 38: Build Your Application](steps/38/README.md "In this step we're going to build our application and consume the speed of a built OpenUI5 application.")** ([📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38.zip))
+- **[Step 30: Routing and Navigation](steps/30/README.md "So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/30/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30-js.zip))
+- **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/31/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip))
+- **[Step 32: Routing Back and History](steps/32/README.md "Now we can navigate to our detail page and display an invoice, but we cannot go back to the overview page yet. We'll add a back button to the detail page and implement a function that shows our overview page again.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/32/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32-js.zip))
+- **[Step 33: Custom Controls](steps/33/README.md "In this step, we are going to extend the functionality of OpenUI5 with a custom control. We want to rate the product shown on the detail page, so we create a composition of multiple standard controls using the OpenUI5 extension mechanism and add some glue code to make them work nicely together. This way, we can reuse the control across the app and keep all related functionality in one module.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/33/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33-js.zip))
+- **[Step 34: Responsiveness](steps/34/README.md "In this step, we improve the responsiveness of our app. OpenUI5 applications can be run on phone, tablet, and desktop devices and we can configure the application to make best use of the screen estate for each scenario. Fortunately, OpenUI5 controls like the 	sap.m.Table already deliver a lot of features that we can use.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/34/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34-js.zip))
+- **[Step 35: Device Adaptation](steps/35/README.md "We now configure the visibility and properties of controls based on the device that we run the application on. By making use of the sap.ui.Device API and defining a device model we will make the app look great on many devices.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/35/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35-js.zip))
+- **[Step 36: Content Density](steps/36/README.md "In this step of our Walkthrough tutorial, we adjust the content density based on the user’s device. OpenUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/36/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36-js.zip))
+- **[Step 37: Accessibility](steps/37/README.md "In this step we're going to improve the accessibility of our app.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/37/test/mockServer-cdn.html) \| [📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37-js.zip))
+- **[Step 38: Build Your Application](steps/38/README.md "In this step we're going to build our application and consume the speed of a built OpenUI5 application.")** ([📥 Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38.zip) \| [📥 Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38-js.zip))
 
 ## Requirements
 
diff --git a/steps/01/README.md b/steps/01/README.md
index 259a72ea..06c8dd7a 100644
--- a/steps/01/README.md
+++ b/steps/01/README.md
@@ -13,9 +13,9 @@ As you know OpenUI5 is all about HTML5. Let's get started with building a first
 
 <sup>*The browser shows the text \"Hello World\"*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/step-01/index.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/build/01/index.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip).
+Download solution for step 1 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip).
 
 ***
 
diff --git a/steps/02/README.md b/steps/02/README.md
index 00206b1c..a98a7354 100644
--- a/steps/02/README.md
+++ b/steps/02/README.md
@@ -13,9 +13,9 @@ Before we can do something with OpenUI5, we need to load and initialize it. This
 
 <sup>*An alert "UI5 is ready" is displayed*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/step-02/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/build/02/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip).
+Download solution for step 2 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip).
 
 ***
 
diff --git a/steps/03/README.md b/steps/03/README.md
index e9861aa4..7dd1ccbb 100644
--- a/steps/03/README.md
+++ b/steps/03/README.md
@@ -13,9 +13,9 @@ Now it is time to build our first little UI by replacing the “Hello World” t
 <sup>*The "Hello World" text is now displayed by an OpenUI5 control*</sup>
 
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/step-03/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/build/03/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip).
+Download solution for step 3 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03-js.zip).
 
 ***
 
@@ -124,4 +124,4 @@ ui5 add sap.m
 
 [API Reference: `sap.ui.core.Element`](https://sdk.openui5.orgapi/sap.ui.core.Element)
 
-[API Reference: `sap.ui.base.ManagedObject`](https://sdk.openui5.orgapi/sap.ui.base.ManagedObject)
\ No newline at end of file
+[API Reference: `sap.ui.base.ManagedObject`](https://sdk.openui5.orgapi/sap.ui.base.ManagedObject)
diff --git a/steps/04/README.md b/steps/04/README.md
index 82d90ab3..a58c6f6d 100644
--- a/steps/04/README.md
+++ b/steps/04/README.md
@@ -14,9 +14,9 @@ When working with OpenUI5, we recommend the use of XML views, as this produces t
 
 <sup>*The "The \"Hello World\" text is now displayed by an OpenUI5 control \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/step-04/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/build/04/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip).
+Download solution for step 4 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04-js.zip).
 
 ***
 
@@ -103,4 +103,4 @@ We have now embed our app view to the body of the HTML document.
 
 [XML View](https://sdk.openui5.org/topic/91f292806f4d1014b6dd926db0e91070.html "The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The file name and the folder structure together specify the name of the view that equals the OpenUI5 module name.")
 
-[API Reference: sap.ui.core.mvc.XMLView](https://sdk.openui5.org/api/sap.ui.core.mvc.xmlView)
\ No newline at end of file
+[API Reference: sap.ui.core.mvc.XMLView](https://sdk.openui5.org/api/sap.ui.core.mvc.xmlView)
diff --git a/steps/05/README.md b/steps/05/README.md
index bb5841ab..d2c19180 100644
--- a/steps/05/README.md
+++ b/steps/05/README.md
@@ -13,9 +13,9 @@ In this step, we replace the text with a button and show the “Hello World” m
 
 <sup>*A Say Hello button is added*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/step-05/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/build/05/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip).
+Download solution for step 5 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05-js.zip).
 
 ***
 
@@ -98,4 +98,4 @@ A view does not necessarily need an explicitly assigned controller. You do not h
 
 [Controller](https://sdk.openui5.org/topic/121b8e6337d147af9819129e428f1f75.html "A controller contains methods that define how models and views interact.")
 
-[API Reference: sap.ui.core.mvc.Controller](https://sdk.openui5.org/api/sap.ui.core.mvc.Controller)
\ No newline at end of file
+[API Reference: sap.ui.core.mvc.Controller](https://sdk.openui5.org/api/sap.ui.core.mvc.Controller)
diff --git a/steps/06/README.md b/steps/06/README.md
index a12c7613..13a6087e 100644
--- a/steps/06/README.md
+++ b/steps/06/README.md
@@ -12,9 +12,9 @@ In OpenUI5, resources are often referred to as modules. In this step, we replace
 
 <sup>*A message toast displays the "Hello World" message*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/step-06/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/build/06/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip).
+Download solution for step 5 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06-js.zip).
 
 ***
 
@@ -53,4 +53,4 @@ For now, the message toast just displays a static "Hello World" message. We will
 
 **Related Information**  
 
-[API Reference: `sap.m.MessageToast`](https://sdk.openui5.org/api/sap.m.MessageToast#methods)
\ No newline at end of file
+[API Reference: `sap.m.MessageToast`](https://sdk.openui5.org/api/sap.m.MessageToast#methods)
diff --git a/steps/07/README.md b/steps/07/README.md
index ff4b8bfa..61202db5 100644
--- a/steps/07/README.md
+++ b/steps/07/README.md
@@ -14,9 +14,9 @@ We'll create a view model in our controller, add an input field to our app, bind
 
 <sup>*An input field and a description displaying the value of the input field*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/step-07/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/build/07/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip).
+Download solution for step 7 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07-js.zip).
 
 ***
 
@@ -116,4 +116,4 @@ In addition to this, we create a greeting message. We combine the static text "H
 
 [Binding Path](https://ui5.sap.com/#/topic/2888af49635949eca14fa326d04833b9.html "Binding paths address the different properties and lists in a model and define how a node in the hierarchical data tree can be found.")
 
-[API Reference: `sap.ui.base.ManagedObject.PropertyBindingInfo`](https://sdk.openui5.org/api/sap.ui.base.ManagedObject.PropertyBindingInfo "Configuration for the binding of a managed property.")
\ No newline at end of file
+[API Reference: `sap.ui.base.ManagedObject.PropertyBindingInfo`](https://sdk.openui5.org/api/sap.ui.base.ManagedObject.PropertyBindingInfo "Configuration for the binding of a managed property.")
diff --git a/steps/08/README.md b/steps/08/README.md
index 3ae66536..1330e74e 100644
--- a/steps/08/README.md
+++ b/steps/08/README.md
@@ -14,9 +14,9 @@ This way, they are all in a central place and can be easily translated into othe
 
 <sup>*An input field and a description displaying the value of the input field \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/step-08/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/build/08/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip).
+Download solution for step 8 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08-js.zip).
 
 ***
 
diff --git a/steps/09/README.md b/steps/09/README.md
index 2e525b0f..9043cacb 100644
--- a/steps/09/README.md
+++ b/steps/09/README.md
@@ -17,7 +17,7 @@ By encapsulating our application as a component, we can seamlessly integrate it
 
 <sup>*An input field and a description displaying the value of the input field \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/step-09/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/build/09/index-cdn.html).
 
 After this step your project structure will look like the figure below. We will create the `Component.ts` file now and modify the related files in the app.
 
@@ -25,7 +25,7 @@ After this step your project structure will look like the figure below. We will
 
 <sup>*Folder Structure for this Step*</sup>
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip).
+Download solution for step 9 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09-js.zip).
 ***
 
 
diff --git a/steps/10/README.md b/steps/10/README.md
index eed67fbf..aad0554c 100644
--- a/steps/10/README.md
+++ b/steps/10/README.md
@@ -13,9 +13,9 @@ Instead of relying on a local HTML file for the bootstrap, the descriptor file i
 
 <sup>*An input field and a description displaying the value of the input field \(No visual changes to last step\)*</sub>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/step-10/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/build/10/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip).
+Download solution for step 10 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10-js.zip).
 
 ***
 
diff --git a/steps/11/README.md b/steps/11/README.md
index ea48f222..7e0852d6 100644
--- a/steps/11/README.md
+++ b/steps/11/README.md
@@ -12,9 +12,9 @@ After all the work on the app structure it’s time to improve the look of our a
 
 <sup>*A panel is now displaying the controls from the previous steps*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/step-11/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/build/11/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip).
+Download solution for step 11 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11-js.zip).
 ***
 
 ### Coding
@@ -103,4 +103,4 @@ The `App` control does the following important things for us:
 
 [API Reference: `sap.m.Page`](https://sdk.openui5.org/api/sap.m.Page)
 
-[Samples: `sap.m.Page` ](https://sdk.openui5.org/entity/sap.m.Page)
\ No newline at end of file
+[Samples: `sap.m.Page` ](https://sdk.openui5.org/entity/sap.m.Page)
diff --git a/steps/12/README.md b/steps/12/README.md
index a17c80eb..43c8160d 100644
--- a/steps/12/README.md
+++ b/steps/12/README.md
@@ -12,9 +12,9 @@ Now we use a shell control as container for our app and use it as our new root e
 
 <sup>*The app is now run in a shell that limits the app width*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/step-12/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/build/12/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip).
+Download solution for step 12 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12-js.zip).
 
 ***
 
@@ -74,4 +74,4 @@ There are further options to customize the shell, like setting a custom backgrou
 
 **Related Information**  
 
-[API Reference: `sap.m.Shell`](https://sdk.openui5.org/#/api/sap.m.Shell)
\ No newline at end of file
+[API Reference: `sap.m.Shell`](https://sdk.openui5.org/#/api/sap.m.Shell)
diff --git a/steps/13/README.md b/steps/13/README.md
index 3d1ed048..6cb1d60b 100644
--- a/steps/13/README.md
+++ b/steps/13/README.md
@@ -14,9 +14,9 @@ Instead of manually adding CSS to the controls, we will use the standard classes
 
 <sup>*The layout of the panel and its content now has margins and padding*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/step-13/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/build/13/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip).
+Download solution for step 13 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13-js.zip).
 
 ***
 
@@ -90,4 +90,4 @@ To format the output text individually, we remove the description from the input
 
 [Using Predefined CSS Margin Classes](https://sdk.openui5.org/topic/777168ffe8324873973151dae2356d1c.html "OpenUI5 gives you the option of adding spacing in between controls by adding a margin. A margin clears an area around its respective control, outside of its border.")
 
-[Using Container Content Padding CSS Classes](https://sdk.openui5.org/topic/c71f6df62dae47ca8284310a6f5fc80a.html "For many container controls in OpenUI5, such as a Dialog or a Page, you can define whether the container should have a padding within the content area. A padding clears the area between the container layout and the controls that are displayed in the content area.")
\ No newline at end of file
+[Using Container Content Padding CSS Classes](https://sdk.openui5.org/topic/c71f6df62dae47ca8284310a6f5fc80a.html "For many container controls in OpenUI5, such as a Dialog or a Page, you can define whether the container should have a padding within the content area. A padding clears the area between the container layout and the controls that are displayed in the content area.")
diff --git a/steps/14/README.md b/steps/14/README.md
index 1584d633..6a51893f 100644
--- a/steps/14/README.md
+++ b/steps/14/README.md
@@ -12,9 +12,9 @@ Sometimes we need to define some more fine-granular layouts and this is when we
 
 <sup>*The space between the button and the input field is now smaller and the output text is bold*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/step-14/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip).
+Download solution for step 14 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip).
 
 
 > ### 🚨 Caution:  
@@ -152,4 +152,4 @@ The actual color now depends on the selected theme which ensures that the color
 
 [API Reference: `sap.ui.core.theming`](https://sdk.openui5.org/api/sap.ui.core.theming)
 
-[Samples: `sap.ui.core.theming` ](https://sdk.openui5.org/entity/sap.ui.core.theming)
\ No newline at end of file
+[Samples: `sap.ui.core.theming` ](https://sdk.openui5.org/entity/sap.ui.core.theming)
diff --git a/steps/15/README.md b/steps/15/README.md
index 1eda8eef..325f34e6 100644
--- a/steps/15/README.md
+++ b/steps/15/README.md
@@ -12,9 +12,9 @@ Our panel content is getting more and more complex and now it is time to move th
 
 <sup>*The panel content is now refactored to a separate view \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/step-15/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/build/15/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip).
+Download solution for step 15 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15-js.zip).
 
 ***
 
diff --git a/steps/16/README.md b/steps/16/README.md
index 796cec4e..88433485 100644
--- a/steps/16/README.md
+++ b/steps/16/README.md
@@ -18,9 +18,9 @@ We will now add a dialog to our app. Dialogs are special, because they open on t
 
 <sup>*A dialog opens when the new “Say Hello With Dialog” button is clicked*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/step-16/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/build/16/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip).
+Download solution for step 16 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16-js.zip).
 
 ***
 
diff --git a/steps/17/README.md b/steps/17/README.md
index 50160684..76b8afff 100644
--- a/steps/17/README.md
+++ b/steps/17/README.md
@@ -12,9 +12,9 @@ Now that we have integrated the dialog, it's time to add some user interaction.
 
 <sup>*The dialog now has an \"OK\" button to close the dialog*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/step-17/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/build/17/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip).
+Download solution for step 17 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17-js.zip).
 
 ### Coding
 
diff --git a/steps/18/README.md b/steps/18/README.md
index a8be67f6..8722fb4f 100644
--- a/steps/18/README.md
+++ b/steps/18/README.md
@@ -12,9 +12,9 @@ Our dialog is still pretty much empty. Since OpenUI5 is shipped with a large ico
 
 <sup>*An icon is now displayed in the dialog box*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 18](https://sap-samples.github.io/ui5-typescript-walkthrough/step-18/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 18](https://sap-samples.github.io/ui5-typescript-walkthrough/build/18/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18.zip).
+Download solution for step 15 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18-js.zip).
 
 ***
 
diff --git a/steps/19/README.md b/steps/19/README.md
index a05c7e38..a5bab383 100644
--- a/steps/19/README.md
+++ b/steps/19/README.md
@@ -12,9 +12,9 @@ Now that we have established a good structure for our app, it's time to add some
 
 <sup>*A list of invoices is displayed below the panel*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/step-19/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/build/19/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19.zip).
+Download solution for step 19 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19-js.zip).
 
 ***
 
diff --git a/steps/20/README.md b/steps/20/README.md
index 1b90b4b7..a309335b 100644
--- a/steps/20/README.md
+++ b/steps/20/README.md
@@ -12,9 +12,9 @@ The list of invoices is already looking nice, but what is an invoice without a p
 
 <sup>*The list of invoices with prices and number units*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/step-20/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/build/20/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20.zip).
+Download solution for step 20 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20-js.zip).
 
 ### Coding
 
@@ -110,4 +110,4 @@ As you can see above, we are using a special binding syntax for the `number` pro
 
 [API Reference: sap.ui.model.type.Currency](https://sdk.openui5.org/api/sap.ui.model.type.Currency)
 
-[Samples: sap.ui.model.type.Currency](https://sdk.openui5.org/entity/sap.ui.model.type.Currency)
\ No newline at end of file
+[Samples: sap.ui.model.type.Currency](https://sdk.openui5.org/entity/sap.ui.model.type.Currency)
diff --git a/steps/21/README.md b/steps/21/README.md
index 83927afa..c1980f8d 100644
--- a/steps/21/README.md
+++ b/steps/21/README.md
@@ -12,9 +12,9 @@ Sometimes the predefined types of OpenUI5 are not flexible enough and you want t
 
 <sup>*The price is now formatted according to its number*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/step-21/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/build/21/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21.zip).
+Download solution for step 21 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21-js.zip).
 
 ***
 
@@ -78,4 +78,4 @@ Expressions are limited to a particular set of operations that help formatting t
 
 **Related Information**  
 
-[Expression Binding](https://sdk.openui5.org/topic/daf6852a04b44d118963968a1239d2c0.html "Expression binding is an enhancement of the OpenUI5 binding syntax, which allows for providing expressions instead of custom formatter functions.")
\ No newline at end of file
+[Expression Binding](https://sdk.openui5.org/topic/daf6852a04b44d118963968a1239d2c0.html "Expression binding is an enhancement of the OpenUI5 binding syntax, which allows for providing expressions instead of custom formatter functions.")
diff --git a/steps/22/README.md b/steps/22/README.md
index 5fbdbd71..bf3dc2aa 100644
--- a/steps/22/README.md
+++ b/steps/22/README.md
@@ -12,9 +12,9 @@ If we want to do a more complex logic for formatting properties of our data mode
 
 <sup>*A status is now displayed with a custom formatter*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/step-22/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/build/22/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22.zip).
+Download solution for step 22 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22-js.zip).
 
 ***
 
diff --git a/steps/23/README.md b/steps/23/README.md
index c3344393..d66244c7 100644
--- a/steps/23/README.md
+++ b/steps/23/README.md
@@ -12,9 +12,9 @@ In this step, we add a search field for our product list and define a filter tha
 
 <sup>*A search field is displayed above the list*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/step-23/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/build/23/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23.zip).
+Download solution for step 23 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23-js.zip).
 
 ***
 
diff --git a/steps/24/README.md b/steps/24/README.md
index 15ac4d8b..1c756980 100644
--- a/steps/24/README.md
+++ b/steps/24/README.md
@@ -13,9 +13,9 @@ To make our list of invoices even more user-friendly, we sort it alphabetically
 
 <sup>*The list is now sorted and grouped by the shipping company*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/step-24/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/build/24/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip).
+Download solution for step 24 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24-js.zip).
 
 ***
 
@@ -92,4 +92,4 @@ We could define a custom group header factory if we wanted by setting the `group
 
 [API Reference: `sap.ui.model.Sorter`](https://sdk.openui5.org/#/api/sap.ui.model.Sorter)
 
-[Sample: List - Grouping](https://sdk.openui5.org/#/entity/sap.m.List/sample/sap.m.sample.ListGrouping)
\ No newline at end of file
+[Sample: List - Grouping](https://sdk.openui5.org/#/entity/sap.m.List/sample/sap.m.sample.ListGrouping)
diff --git a/steps/25/README.md b/steps/25/README.md
index 7d420c37..12d80ea6 100644
--- a/steps/25/README.md
+++ b/steps/25/README.md
@@ -18,7 +18,7 @@ In the real world, data often resides on remote servers and is accessed via an O
 
 *A real-time preview utilizing data from the OData remote service is currently unavailable in this setup. However, we assure you that it will work on your local machine as long as you avoid making any mistakes. So, give it a try and see the results for yourself!*
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 25](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip).
+Download solution for step 25 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25-js.zip).
 
 ***
 
diff --git a/steps/26/README.md b/steps/26/README.md
index 153c140a..197b2507 100644
--- a/steps/26/README.md
+++ b/steps/26/README.md
@@ -15,9 +15,9 @@ This system is the so-called back-end system that we will now simulate with anOp
 
 <sup>*The list of invoices is now served by the Mock Server*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/step-26/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/build/26/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip).
+Download solution for step 26 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26-js.zip).
 
 ***
 
diff --git a/steps/27/README.md b/steps/27/README.md
index 5dcbc9f1..996c5e97 100644
--- a/steps/27/README.md
+++ b/steps/27/README.md
@@ -17,9 +17,9 @@ Actually, every feature that we added to the app so far, would require a separat
 
 <sup>*A unit test for our formatters is now available*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/step-27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/build/27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip).
+Download solution for step 27 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27-js.zip).
 
 ***
 
diff --git a/steps/28/README.md b/steps/28/README.md
index d1a368b2..f90eb86f 100644
--- a/steps/28/README.md
+++ b/steps/28/README.md
@@ -17,9 +17,9 @@ We haven’t thought about testing our interaction with the app yet, so in this
 
 <sup>*An OPA test opens the "Hello" dialog from step 16*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/step-28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip).
+Download solution for step 28 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28-js.zip).
 
 ***
 
diff --git a/steps/30/README.md b/steps/30/README.md
index 75bb18c7..cc146c4d 100644
--- a/steps/30/README.md
+++ b/steps/30/README.md
@@ -15,9 +15,9 @@ In this step, we will use the OpenUI5 navigation features to load and show a sep
 
 <sup>*A second page is added to display the invoice*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 30](https://sap-samples.github.io/ui5-typescript-walkthrough/step-30/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 30](https://sap-samples.github.io/ui5-typescript-walkthrough/build/30/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 30](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip).
+Download solution for step 30 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30-js.zip).
 
 ***
 
diff --git a/steps/31/README.md b/steps/31/README.md
index 753a1404..bea21988 100644
--- a/steps/31/README.md
+++ b/steps/31/README.md
@@ -15,9 +15,9 @@ To make this work, we have to pass over the information which item has been sele
 
 <sup>*The selected invoice details are now shown in the details page*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 31](https://sap-samples.github.io/ui5-typescript-walkthrough/step-31/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 31](https://sap-samples.github.io/ui5-typescript-walkthrough/build/31/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 31](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip).
+Download solution for step 31 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip).
 
 ***
 
diff --git a/steps/32/README.md b/steps/32/README.md
index 5919bc32..c14efb7d 100644
--- a/steps/32/README.md
+++ b/steps/32/README.md
@@ -13,9 +13,9 @@ Now we can navigate to our detail page and display an invoice, but we cannot go
 
 <sup>*A back button is now displayed on the detail page*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 32](https://sap-samples.github.io/ui5-typescript-walkthrough/step-32/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 32](https://sap-samples.github.io/ui5-typescript-walkthrough/build/32/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 32](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip).
+Download solution for step 32 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32-js.zip).
 
 ***
 
diff --git a/steps/33/README.md b/steps/33/README.md
index ac5899b3..a4139c0b 100644
--- a/steps/33/README.md
+++ b/steps/33/README.md
@@ -12,9 +12,9 @@ In this step, we are going to extend the functionality of OpenUI5 with a custom
 
 <sup>*A custom product rating control is added to the detail page*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 33](https://sap-samples.github.io/ui5-typescript-walkthrough/step-33/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 33](https://sap-samples.github.io/ui5-typescript-walkthrough/build/33/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 33](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip).
+Download solution for step 33 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33-js.zip).
  
 ***
 
diff --git a/steps/34/README.md b/steps/34/README.md
index dbc04b78..d4c5b173 100644
--- a/steps/34/README.md
+++ b/steps/34/README.md
@@ -13,9 +13,9 @@ In this step, we improve the responsiveness of our app. OpenUI5 applications can
 
 <sup>*A responsive table is hiding some of the columns on small devices*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 34](https://sap-samples.github.io/ui5-typescript-walkthrough/step-34/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 34](https://sap-samples.github.io/ui5-typescript-walkthrough/build/34/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 34](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip).
+Download solution for step 34 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34-js.zip).
 
 ***
 
@@ -203,4 +203,4 @@ We can see the results when we decrease the browser's screen size or open the ap
 
 **Related Information**  
 
-[Configuring Responsive Behavior of a Table](https://sdk.openui5.org/topic/38855e06486f4910bfa6f4485f7c2bac.html "OpenUI5 supports column-based and row-based solutions to support flexible and clearly arranged tables.")
\ No newline at end of file
+[Configuring Responsive Behavior of a Table](https://sdk.openui5.org/topic/38855e06486f4910bfa6f4485f7c2bac.html "OpenUI5 supports column-based and row-based solutions to support flexible and clearly arranged tables.")
diff --git a/steps/35/README.md b/steps/35/README.md
index 9c5b0255..df788f2d 100644
--- a/steps/35/README.md
+++ b/steps/35/README.md
@@ -12,9 +12,9 @@ We now configure the visibility and properties of controls based on the device t
 
 <sup>*On phone devices, the panel is collapsed to save screen space and a button is hidden*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 35](https://sap-samples.github.io/ui5-typescript-walkthrough/step-35/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 35](https://sap-samples.github.io/ui5-typescript-walkthrough/build/35/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 35](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35.zip).
+Download solution for step 35 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35-js.zip).
 
 ***
 
diff --git a/steps/36/README.md b/steps/36/README.md
index 1002bce4..0d8569b7 100644
--- a/steps/36/README.md
+++ b/steps/36/README.md
@@ -12,9 +12,9 @@ In this step of our Walkthrough tutorial, we adjust the content density based on
 
 <sup>*The content density is compact on desktop devices and cozy on touch-enabled devices*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 36](https://sap-samples.github.io/ui5-typescript-walkthrough/step-36/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 36](https://sap-samples.github.io/ui5-typescript-walkthrough/build/36/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 36](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36.zip).
+Download solution for step 36 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36-js.zip).
 
 ***
 
diff --git a/steps/37/README.md b/steps/37/README.md
index 1a4b1b05..90a687bd 100644
--- a/steps/37/README.md
+++ b/steps/37/README.md
@@ -17,9 +17,9 @@ To achieve this, we will add ARIA attributes. ARIA attributes are used by screen
 
 <sup>*Landmarks in our app*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 37](https://sap-samples.github.io/ui5-typescript-walkthrough/step-37/test/mockServer-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 37](https://sap-samples.github.io/ui5-typescript-walkthrough/build/37/test/mockServer-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 37](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37.zip).
+Download solution for step 37 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37-js.zip).
 
 ***
 
@@ -194,4 +194,4 @@ As you can see, we now have four landmarks on our page. The top three landmarks
 
 [Screen Reader Support for OpenUI5 Controls](https://sdk.openui5.org/topic/656e825c5f1548e6b1d0acb5586f2a2a.html "OpenUI5 offers screen reader support in order to aid people with visual impairments. The implementation is based on the ARIA and HTML standards.")
 
-[API Reference: `sap.m.PageAccessibleLandmarkInfo`](https://sdk.openui5.org/api/sap.m.PageAccessibleLandmarkInfo)
\ No newline at end of file
+[API Reference: `sap.m.PageAccessibleLandmarkInfo`](https://sdk.openui5.org/api/sap.m.PageAccessibleLandmarkInfo)
diff --git a/steps/38/README.md b/steps/38/README.md
index abd14400..66ea0550 100644
--- a/steps/38/README.md
+++ b/steps/38/README.md
@@ -13,7 +13,7 @@ In this step we're going to build our application and consume the speed of a bui
 
 <sup>*The OpenUI5 application is built and served*</sup>
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 38](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38.zip).
+Download solution for step 38 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38-js.zip).
 
 ***
 
diff --git a/tools/prepare-gh-pages.js b/tools/prepare-gh-pages.js
index 6f9343e8..f9209b6c 100644
--- a/tools/prepare-gh-pages.js
+++ b/tools/prepare-gh-pages.js
@@ -1,5 +1,5 @@
-const { join } = require("path");
-const { readdirSync, existsSync, rmSync, mkdirSync, createWriteStream, copyFileSync, readFileSync, writeFileSync } = require("fs");
+const { join, dirname } = require("path");
+const { readdirSync, existsSync, statSync, rmSync, mkdirSync, createWriteStream, copyFileSync, readFileSync, writeFileSync } = require("fs");
 const { exec } = require("child_process");
 const utils = require("util");
 const execute = utils.promisify(exec);
@@ -28,38 +28,85 @@ function zipDirectory(sourceDir, outPath) {
 
 (async function() {
 
-	const steps = readdirSync(join(process.cwd(), "steps"));
+	let steps = readdirSync(join(process.cwd(), "steps"));
+	// only consider directories
+	steps = steps.filter((step) => statSync(join(process.cwd(), "steps", step)).isDirectory());
+
 	if (existsSync(join(process.cwd(), "dist"))) {
 		rmSync(join(process.cwd(), "dist"), { recursive: true });
 	}
+
 	mkdirSync(join(process.cwd(), "dist"), { recursive: true });
+	mkdirSync(join(process.cwd(), "dist/build"), { recursive: true });
+
 	await Promise.all(steps.map((step) => {
 		return zipDirectory(join(process.cwd(), "steps", step), join(process.cwd(), "dist", `ui5-typescript-walkthrough-step-${step}.zip`))
 	}));
 	for (const step of steps) {
-		console.log(`npx ui5 build --dest ${join(process.cwd(), "dist", `step-${step}`)}`);
-		await execute(`npx ui5 build --dest ${join(process.cwd(), "dist", `step-${step}`)}`, {
+		console.log(`npx ui5 build --dest ${join(process.cwd(), "dist", "build", `${step}`)}`);
+		await execute(`npx ui5 build --dest ${join(process.cwd(), "dist", "build", `${step}`)}`, {
 			cwd: join(process.cwd(), "steps", step)
 		});
 	}
 
 	function rewriteLinks(file, path) {
 		let content = `---\npermalink: ${path ? path.replace(".md", ".html") : "index.html"}\n---\n\n${readFileSync(file, { encoding: "utf8"})}`;
-		content = content.replace(/steps\/(\d{2})/g, "step-$1");
-		content = content.replace(/\.\.\/(\d{2})/g, "../step-$1");
+		content = content.replace(/steps\/(\d{2})/g, "build/$1");
+		content = content.replace(/\.\.\/(\d{2})/g, "../$1");
 		content = content.replace(/README\.md/g, "README.html");
 		writeFileSync(file, content, { encoding: "utf8" });
 	}
 
-	mkdirSync(join(process.cwd(), "dist"), { recursive: true });
 	copyFileSync(join(process.cwd(), "README.md"), join(process.cwd(), "dist/index.md"));
 	rewriteLinks(join(process.cwd(), "dist/index.md"));
 	const readmes = fg.globSync(["steps/**/README.md"]);
 	readmes.forEach((readme) => {
 		const [, path, step] = readme.match("steps/((.*)/README.md)");
-		mkdirSync(join(process.cwd(), `dist/step-${step}`), { recursive: true });
-		copyFileSync(join(process.cwd(), readme), join(process.cwd(), `dist/step-${path}`));
-		rewriteLinks(join(process.cwd(), `dist/step-${path}`), `step-${path}`);
+		mkdirSync(join(process.cwd(), `dist/build/${step}`), { recursive: true });
+		copyFileSync(join(process.cwd(), readme), join(process.cwd(), `dist/build/${path}`));
+		rewriteLinks(join(process.cwd(), `dist/build/${path}`), `${path}`);
 	});
 
+	await Promise.all(steps.map((step) => {
+		const jsStepBaseDir = join(process.cwd(), "steps", step);
+		const buildOutputDir = join(process.cwd(), "dist", "build", `${step}`);
+		const targetDir = join(process.cwd(), "dist", "steps", `${step}`);
+
+		// copy all files from buildOutputDir to targetDir except of TS files
+		const files = fg.sync(["**/*"], { cwd: jsStepBaseDir, dot: true });
+		files.forEach((file) => {
+			const source = join(jsStepBaseDir, file);
+			const target = join(targetDir, file);
+			if (file.endsWith(".ts") && file.startsWith("webapp")) {
+				const outputFile = file.substring(7, file.length - 3);
+				let sourceJS;
+				if (file.endsWith("controller.ts")) {
+					sourceJS = join(buildOutputDir, `${outputFile.substring(0, outputFile.length - 11)}-dbg.controller.js`);
+				} else if (file.endsWith(".ts") && !file.endsWith(".d.ts")) {
+					sourceJS = join(buildOutputDir, `${outputFile}-dbg.js`);
+				}
+
+				if (!file.endsWith(".d.ts")) {
+					if (existsSync(sourceJS)) {
+						const targetJS = target.replace(/\.ts$/, ".js");
+						mkdirSync(dirname(targetJS), { recursive: true });
+						// rewrite content of the JS file
+						let content = readFileSync(sourceJS, { encoding: "utf8" });
+						content = content.replaceAll(/\/\*\*.*[\n\s]+\* @namespace.*[\n\s]+\*\/[\n\s]+/g, "");
+						content = content.replaceAll(/\/\/# sourceMappingURL=.*[\n\s]+/g, "");
+						writeFileSync(targetJS, content, { encoding: "utf8" });
+					} else {
+						console.error("No JS file found for", source);
+					}
+				}
+			} else {
+				mkdirSync(dirname(target), { recursive: true });
+				copyFileSync(source, target);
+			}
+		});
+
+		console.log(`${jsStepBaseDir} -> ${buildOutputDir}`);
+		return zipDirectory(join(process.cwd(), "dist", "steps", `${step}`), join(process.cwd(), "dist", `ui5-typescript-walkthrough-step-${step}-js.zip`))
+	}));
+
 }());