Automation script to download assets

Author: petermuessig

README.md

@@ -39,11 +39,11 @@ 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/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 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 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 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)) 

package-lock.json

@@ -11,6 +11,7 @@
     "@octokit/rest": "^21.1.1",
     "anchor-js": "^5.0.0",
     "archiver": "^7.0.1",
+    "axios": "^1.8.4",
     "browser-sync": "^3.0.3",
     "concurrently": "^9.1.2",
     "express": "^4.21.2",

package.json

@@ -14,7 +14,7 @@ We will now add a dialog to our app. Dialogs are special, because they open on t
 
 ### Preview
 
-![](https://sdk.openui5.org/docs/topics/loio0916080895e144ed8b31963bfb18e17f_LowRes.png "A dialog opens when the new \“Say Hello With Dialog\” button is clicked")
+![](https://sdk.openui5.org/docs/topics/loio0916080895e144ed8b31963bfb18e17f_LowRes.png "A dialog opens when the new "Say Hello With Dialog\” button is clicked")
 
 <sup>*A dialog opens when the new “Say Hello With Dialog” button is clicked*</sup>
 

steps/16/README.md

@@ -11,7 +11,7 @@ This system is the so-called back-end system that we will now simulate with anOp
 ### Preview
 
 
-![](https://sdk.openui5.org/docs/topics/_LowRes.png "Folder Structure for this Step")
+![](https://sdk.openui5.org/docs/topics/loiofe1403346ce9499f8bb102beaa4986d5_LowRes.png "Folder Structure for this Step")
 
 <sup>*The list of invoices is now served by the Mock Server*</sup>
 
@@ -27,7 +27,7 @@ The folder structure of our app project is clearly separating test and productiv
 
 The new `localService` folder contains a `metadata.xml` service description file for OData, the `mockserver.js` file that simulates a real service with local data, and the `mockdata` subfolder that contains the local test data \(`Invoices.json`\).
 
-![](https://sdk.openui5.org/docs/topics/_LowRes.png "Folder Structure for this Step")
+![](https://sdk.openui5.org/docs/topics/loiofe1403346ce9499f8bb102beaa4986d5_LowRes.png "Folder Structure for this Step")
 
 <sup>*Folder Structure for this Step*</sup>
 

steps/26/README.md

@@ -13,7 +13,7 @@ We haven’t thought about testing our interaction with the app yet, so in this
 
 ### Preview
 
-![](https://sdk.openui5.org/docs/topics/loio250d5b92921d44a4b432cc0fade88cc9_LowRes.png "An OPA test opens the "Hello" dialog from step 16")
+![](https://sdk.openui5.org/docs/topics/loio250d5b92921d44a4b432cc0fade88cc9_LowRes.png "An OPA test opens the "Hello" dialog from step 16")
 
 <sup>*An OPA test opens the "Hello" dialog from step 16*</sup>
 
@@ -28,7 +28,7 @@ Download solution for step 28 in [📥 TypeScript](https://sap-samples.github.io
 We add a new folder `integration` below the `test` folder, where we put our new test cases. Page objects that help structuring such integration tests are put in the `pages` subfolder that we also create now.
 
 
-![](https://sdk.openui5.org/docs/topics/_LowRes.png "Folder Structure for this Step")
+![](https://sdk.openui5.org/docs/topics/loio27e84d5bd72a485498564b92894869b5_LowRes.png "Folder Structure for this Step")
 <sup>*Folder Structure for this Step*</sup>
 
 

steps/28/README.md

@@ -13,7 +13,7 @@ To achieve this, we will add ARIA attributes. ARIA attributes are used by screen
 
 ### Preview
 
-![](https://sdk.openui5.org/docs/topics/loiod9c6cd32743d40629bec7d77590e2c58_HiRes.png "Landmarks in our app")
+![](https://sdk.openui5.org/docs/topics/loiob35deda1ebe1433fbf0ff066f6e3fc4b_LowRes.png "Landmarks in our app")
 
 <sup>*Landmarks in our app*</sup>
 

steps/37/README.md

@@ -38,8 +38,6 @@ async function getTemplate() {
 	return templateFn;
 }
 
-app.use("/assets", express.static(join(__dirname, "..", "assets")));
-
 app.use("/node_modules", express.static(join(__dirname, "..", "node_modules")));
 
 app.use(async (req, res, next) => {
@@ -60,12 +58,14 @@ app.use(async (req, res, next) => {
 			file = undefined;
 		}
 	}
-	if (file) {
+	if (file && file.endsWith(".md")) {
 		const md = readFileSync(file, { encoding: "utf-8" });
 		const bodyContent = await convertMarkdown(md);
 		const templateFn = await getTemplate();
 		const html = templateFn({ title: req.url, bodyContent });
 		res.send(html);
+	} else if (file) {
+		res.sendFile(file);
 	} else {
 		next();
 	}

tools/dev-server.js

@@ -0,0 +1,74 @@
+const fs = require('fs');
+const path = require('path');
+const axios = require('axios');
+
+const findMarkdownFiles = (dir) => {
+    let results = [];
+    const files = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const file of files) {
+        const fullPath = path.join(dir, file.name);
+        if (file.isDirectory() && file.name !== "node_modules" && file.name !== "dist") {
+            results = results.concat(findMarkdownFiles(fullPath));
+        } else if (file.isFile() && file.name.toLowerCase() === 'readme.md') {
+            results.push(fullPath);
+        }
+    }
+    return results;
+};
+
+const markdownFiles = [path.join(process.cwd(), "README.md"), findMarkdownFiles(path.join(process.cwd(), 'steps'))].flat();
+
+const downloadImage = async (url, outputPath) => {
+	const response = await axios({
+		method: 'GET',
+		url,
+		responseType: 'stream',
+	});
+
+	const writer = fs.createWriteStream(outputPath);
+	response.data.pipe(writer);
+
+	return new Promise((resolve, reject) => {
+		writer.on('finish', resolve);
+		writer.on('error', reject);
+	});
+};
+
+(async () => {
+
+	for await (const markdownFile of markdownFiles) {
+		let markdownContent = fs.readFileSync(markdownFile, 'utf8');
+		const imageUrls = [...markdownContent.matchAll(/!\[.*?\]\((\S+?)(?:\s+".*?")?\)/g)].map(match => match[1]);
+
+		const markdownDir = path.dirname(markdownFile);
+		const assetsDir = path.join(markdownDir, 'assets');
+
+		if (!fs.existsSync(assetsDir)) {
+			fs.mkdirSync(assetsDir, { recursive: true });
+		}
+
+		let updated = false;
+
+		for await (const url of imageUrls) {
+			if (url.startsWith('http') && url.endsWith('.png')) {
+				try {
+					const filename = path.basename(new URL(url).pathname);
+					const outputPath = path.join(assetsDir, filename);
+					await downloadImage(url, outputPath, filename);
+					// Update markdown content
+					markdownContent = markdownContent.replace(url, `assets/${filename}`);
+					updated = true;
+				} catch (error) {
+					console.error(`Invalid URL: ${url} found in ${markdownFile}`, error.message);
+				}
+			}
+		}
+
+		// Save updated markdown file
+		if (updated) {
+			fs.writeFileSync(markdownFile, markdownContent, 'utf8');
+		}
+	}
+
+})();

tools/download-assets.js

@@ -99,7 +99,7 @@ function zipDirectory(sourceDir, outPath) {
 						console.error("No JS file found for", source);
 					}
 				}
-			} else {
+			} else if (file !== "tsconfig.json") {
 				mkdirSync(dirname(target), { recursive: true });
 				copyFileSync(source, target);
 			}