docs: introduce js to readme (#134)

* Add JS/TS switches to Step 1-10

* docs: add js parts to readme

* Fix visualization of JS/TS block switches

* docs: add missing js parts to readme

* Adapt links with current language; make dev server support URL params

This ensures that after navigating to another page the current language
is still active

* Let browsersync popup not cover the language switch

* Update README.md

* Update 01/README

* Update 02/README

* Update 16/README and 17/README

---------

Co-authored-by: Peter Muessig <peter.muessig@sap.com>
Co-authored-by: akudev <andreas.kunz@sap.com>

Author: 3 people

README.md

@@ -24,21 +24,15 @@ To immediately preview the markdown document you are writing *including* the two
 npm i
 ```
 
-in the root folder of this project once for the setup, then to actually run the server, run
+in the root folder of this project once for the setup.
 
-```sh
-npm start
-```
-
-Then, open http://localhost:1337/README.md in your browser.
-
-Alternatively, and even easier, run 
+Then, to actually start the server, run
 
 ```sh
-npm run watch
+npm start
 ```
 
-And the browser will automatically open (on port 3000) and automatically reload on every saved change.
+A browser window will automatically open (on port 3000 or the next free port) and automatically reload on every saved change.
 
 
 ## Writing *one* document which covers both JavaScript and TypeScript without duplication

README_AUTHORS.md

@@ -114,6 +114,10 @@ body.page-language-ts .language-switch-button.lang-ts {
     border-color: var(--active-border);
 }
 
+li > section.ts-only, li > section.js-only {
+	display: inline;
+}
+
 .language-switch-button:hover {
     opacity: 0.8;
     background-color: rgba(20, 20, 20, 0.8);
@@ -134,3 +138,8 @@ body.page-language-ts .language-switch-button.lang-ts {
         border-color: var(--active-border);
     }
 }
+
+#__bs_notify__ {
+    background-color: rgba(27, 32, 50, 0.3) !important;
+    top: 40px !important;
+}

assets/css/custom.css

@@ -164,7 +164,10 @@ function replaceDetailSections() {
 			if (child.tagName.toLocaleUpperCase() === "SUMMARY") {
 				return;
 			}
-			sectionTag.appendChild(child);
+			// only add the child if it has content
+			if (child.innerHTML.trim()) {
+				sectionTag.appendChild(child);
+			}
 		});
 
 		// remove the detail tag
@@ -205,6 +208,27 @@ function replaceFileExtensions(lang) {
 	}
 }
 
+function updatePrevNextLinks(lang) {
+    const links = document.querySelectorAll('a[href$="README.md"], a[href$="/"], a[href$="README.md?lang=js"], a[href$="/?lang=js"]');
+    links.forEach(link => {
+		// Only handle relative links (not starting with http://, https://, or //)
+        if (/^(https?:)?\/\//.test(link.getAttribute("href"))) {
+            return;
+        }
+
+        let url = new URL(link.href, window.location.origin);
+
+        // Remove any existing lang param
+        url.searchParams.delete("lang");
+
+        if (lang === "js") {
+            url.searchParams.set("lang", "js");
+        }
+
+        link.href = url.pathname + url.search + url.hash;
+    });
+}
+
 // dynamic overall language switching
 
 function addLanguageSwitchButtons() {
@@ -233,6 +257,7 @@ function switchLanguage(newLang) {
 	replaceFileExtensions(lang);
 	resetCodeCoupleButtons();
 	updateAllCodeCouples(lang);
+	updatePrevNextLinks(lang);
 }
 
 function updateAllCodeCouples(globalLang) {
@@ -252,5 +277,6 @@ document.addEventListener("DOMContentLoaded", (event) => {
 		replaceFileExtensions(lang);
 		addLanguageSwitchButtons();
 		updateAllCodeCouples(lang);
+		updatePrevNextLinks(lang);
 	});
 });

assets/js/custom.js

@@ -1,6 +1,6 @@
 ## Step 1: Hello World!
 
-As you know OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
+As you know, OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
 
  
 
@@ -15,12 +15,23 @@ As you know OpenUI5 is all about HTML5. Let's get started with building a first
 
 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).
 
-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).
-
 ***
 
 ### Coding
 
+<details class="ts-only">
+
+You can download the solution for this step here: [📥 Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip). 
+
+</details>
+
+<details class="js-only">
+
+You can download the solution for this step here: [📥 Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip).
+
+</details>
+***
+
 ### webapp \(New\)
 
 We create a folder on our local machine which will contain all the sources of the app we're going to build. We'll refer to this folder as the “app root directory".
@@ -154,7 +165,7 @@ This will open a new browser window hosting your newly created `index.html`.
 
 ### Conventions
 
--   The `index.html` file is located in the `webapp` folder if it is used productively.
+-   The `index.html` file is located in the `webapp` folder.
 
 &nbsp;
 

steps/01/README.md

@@ -15,11 +15,23 @@ Before we can do something with OpenUI5, we need to load and initialize it. This
 
 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).
 
-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).
+***
+### Coding
+
+<details class="ts-only">
+
+You can download the solution for this step here: [📥 Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip).
+
+</details> 
+
+<details class="js-only">
 
+You can download the solution for this step here: [📥 Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip).
+
+</details>
 ***
 
-### Tooling
+### UI5 Tooling
 
 First, let's set up our UI5 Tooling to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project's UI5 Tooling configuration.
 
@@ -37,26 +49,28 @@ ui5 add sap.ui.core themelib_sap_horizon
 
 The `ui5 add` command adds specific libraries as dependency to the projects UI5 Tooling configuration. In this case, we'e adding the `sap.ui.core` library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we're adding the `themelib_sap_horizon` library which provides the visual styles for the Horizon theme. We'll use this theme with our application. 
 
-***
 
-### package.json
+<details class="ts-only">
+
+### TypeScript Setup
 
 To work with TypeScript, we must install it in our project. To do this, we execute the following command in the terminal:
 
+
 ```sh
 npm install typescript --save-dev
 ```
 
 By running this command, npm will download the TypeScript package from the npm registry and install it in our project's "node_modules" directory. It will also add an entry for TypeScript in the "devDependencies" section of our package.json file, so that other developers working on the project can easily install the same version of TypeScript.
 
-***
 
 ### tsconfig.json \(New\)
 
 As a next step, we need to create the file `tsconfig.json` in the app root directory to indicate that this folder is the root of a TypeScript project. This file specifies various compiler options and project settings that affect how TypeScript code is compiled into JavaScript.
 
 We specify the compiler options as follow:
 
+
 ```json
 {
     "compilerOptions": {
@@ -101,18 +115,16 @@ Let's go through the compiler options specified in the file:
 
 ***
 
-### Coding
+</details>
 
-### webapp/index.ts \(New\)
+### webapp/index.?s \(New\)
 
-Now let's move on to the UI work. We create a new `index.ts` script in the webapp folder. In this script, we add a native `alert()` method with the message "UI5 is ready".
+Now let's move on to the UI work. We create a new `index.?s` script in the webapp folder. In this script, we add a native `alert()` method with the message "UI5 is ready".
 
-```ts
+```js
 alert("UI5 is ready");
 ```
 
-***
-
 ### webapp/index.html
 
 Next, we'll integrate the script we just created into the `index.html` page to signal when the OpenUI5 framework has finished loading. This process involves first incorporating the OpenUI5 framework into our HTML page by adding a script tag specifically for loading OpenUI5. 
@@ -157,22 +169,30 @@ We initialize the core modules with the following configuration options:
 </html>
 ```
 
-> 📝 **Note:**
+> 📝 **Note:**<br>
 > The namespace is a unique identifier for your application file. It helps prevent naming conflicts with other modules or libraries.
 
 ***
 
-### Tooling
-
-### package.json
+### UI5 Tooling
 
 Let's enhance our tooling setup once again by installing some custom middleware for the ui5-server. This will help us handle our development project more efficiently.
 
 We open a terminal and navigate to the root folder of our app. Then, we execute the following command:
 
+<details class="ts-only">
+
 ```sh
 npm install ui5-middleware-livereload ui5-middleware-serveframework ui5-tooling-transpile --save-dev
 ```
+</details>
+
+<details class="js-only">
+
+```sh
+npm install ui5-middleware-livereload ui5-middleware-serveframework --save-dev
+```
+</details>
 
 When you run the command, npm will download the specified packages from the npm registry and store them in a folder called `node_modules` within your project directory. The `--save-dev` flag instructs npm to save these packages as development dependencies in the `devDependencies` section of the `package.json` file. Development dependencies are packages that are only needed during development and not in production. By separating them from production dependencies, we can keep our project clean and ensure that only the required packages are included when deploying the application.
 
@@ -182,21 +202,28 @@ Let's break down what each package does:
 
 -	`ui5-middleware-serveframework` is another middleware plugin for the UI5 Tooling that provides a web server to serve your OpenUI5 project during development. It allows you to easily serve the necessary OpenUI5 libraries and resources required by your application from your development environment.
 
+<details class="ts-only">
+
 - `ui5-tooling-transpile` is a plugin for the UI5 Tooling that transpiles modern JavaScript (ES6+) and TypeScript into a compatible version for OpenUI5. OpenUI5 is based on older versions of JavaScript, so this plugin allows you to take advantage of the latest language features and syntax while ensuring that your code remains compatible with OpenUI5.
 
-***
+</details>
 
 ### ui5.yaml
 
 Next,  we have to configure the tooling extension we installed from npm to our UI5 Tooling setup, so we can use them in our project. To hook a custom task into a certain build phase of a project, it needs to reference another task that will get executed before or after it. The same applies for a custom middleware:
+<details class="ts-only">
 
 -   For the `ui5-tooling-transpile-task` we specify that this should happen after the`replaceVersion` task.
 
+</details>
+
 -   All our custom middleware extensions will be called after the `compression` middleware.
 
 > 📌 **Important:** <br>
 > Middleware configurations are applied in the order in which they are defined. 
 
+<details class="ts-only">
+
 ```yaml
 framework:
   name: OpenUI5
@@ -219,7 +246,31 @@ server:
 ```
 Now you can benefit from live reload on changes, built framework resources at development time, and make use of TypeScript in OpenUI5.
 
-> 📝 **Note:** <br>
+</details>
+
+<details class="js-only">
+
+```yaml
+framework:
+  name: OpenUI5
+  version: "1.132.1"
+  libraries:
+    - name: sap.ui.core
+    - name: themelib_sap_horizon
+builder:
+server:
+  customMiddleware:
+  - name: ui5-middleware-serveframework
+    afterMiddleware: compression
+  - name: ui5-middleware-livereload
+    afterMiddleware: compression
+```
+Now you can benefit from live reload on changes and built framework resources at development time.
+
+</details>
+
+<br>
+> 📝 **Note:**<br>
 > During its initial run, the `ui5-middleware-serveframework` middleware will build the framework, which can take a while. In all following steps, the build will not happen again and the framework is served from the built resources.
 
 &nbsp;