From a44906688699d6edd552f6a64dac05204c346ddf Mon Sep 17 00:00:00 2001
From: Christian Oliff <christianoliff@pm.me>
Date: Fri, 7 Jun 2024 18:06:46 +0900
Subject: [PATCH] Docs typo fixes (#4247)

+ Add lazy loading to the map examples page
REF: https://squidfunk.github.io/mkdocs-material/reference/images/?h=loading#image-lazy-loading

(Not tested this locally, Docker not working).
---
 build/generate-docs.ts | 6 +++---
 docs/README.md         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/build/generate-docs.ts b/build/generate-docs.ts
index 5a02c329b1..66e886e416 100644
--- a/build/generate-docs.ts
+++ b/build/generate-docs.ts
@@ -51,7 +51,7 @@ function generateMarkdownIndexFileOfAllExamples(indexArray: HtmlDoc[]): string {
         indexMarkdown += `
 ## [${indexArrayItem.title}](./${indexArrayItem.mdFileName})
 
-![${indexArrayItem.description}](../assets/examples/${indexArrayItem.mdFileName!.replace('.md', '.png')})
+![${indexArrayItem.description}](../assets/examples/${indexArrayItem.mdFileName!.replace('.md', '.png')}){ loading=lazy }
 
 ${indexArrayItem.description}
 `;
@@ -85,12 +85,12 @@ function generateExamplesFolder() {
     fs.mkdirSync(examplesDocsFolder);
     const examplesFolder = path.join('test', 'examples');
     const files = fs.readdirSync(examplesFolder).filter(f => f.endsWith('html'));
-    const maplibreUnpgk = `https://unpkg.com/maplibre-gl@${packageJson.version}/`;
+    const maplibreUnpkg = `https://unpkg.com/maplibre-gl@${packageJson.version}/`;
     const indexArray = [] as HtmlDoc[];
     for (const file of files) {
         const htmlFile = path.join(examplesFolder, file);
         let htmlContent = fs.readFileSync(htmlFile, 'utf-8');
-        htmlContent = htmlContent.replace(/\.\.\/\.\.\//g, maplibreUnpgk);
+        htmlContent = htmlContent.replace(/\.\.\/\.\.\//g, maplibreUnpkg);
         htmlContent = htmlContent.replace(/-dev.js/g, '.js');
         const htmlContentLines = htmlContent.split('\n');
         const title = htmlContentLines.find(l => l.includes('<title'))?.replace('<title>', '').replace('</title>', '').trim()!;
diff --git a/docs/README.md b/docs/README.md
index 36afccf661..3f15e5f5f7 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -25,7 +25,7 @@ Finally, run:
 npm run start-docs
 ```
 
-Navigate to [http://0.0.0.0:8000/](http://0.0.0.0:8000/) to view the docs. After making changes, run `npm run generate-docs` again to apply them. Some tile service providers of the docs example pages such as MapTiler or Staida Maps might only send you tiles if the host is localhost. In that case, try http://localhost:8000.
+Navigate to [http://0.0.0.0:8000/](http://0.0.0.0:8000/) to view the docs. After making changes, run `npm run generate-docs` again to apply them. Some tile service providers of the docs example pages such as MapTiler or Stadia Maps might only send you tiles if the host is localhost. In that case, try http://localhost:8000.
 
 The examples section of the locally run documentation will use the GL JS version released that has the same version as the in the package.json.