Docs: unminify package example HTML files (#41637)

Author: julien-deramond

build/zip-examples.mjs

@@ -11,6 +11,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import sh from 'shelljs'
+import { format } from 'prettier'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
@@ -83,16 +84,34 @@ for (const file of staticJsFiles) {
 sh.rm(`${distFolder}/index.html`)
 
 // get all examples' HTML files
-for (const file of sh.find(`${distFolder}/**/*.html`)) {
+const htmlFiles = sh.find(`${distFolder}/**/*.html`)
+
+const formatPromises = htmlFiles.map(async file => {
   const fileContents = sh.cat(file)
     .toString()
     .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../')
     .replace(/"..\/dist\//g, '"../assets/dist/')
     .replace(/(<link href="\.\.\/[^"]*"[^>]*) integrity="[^"]*"/g, '$1')
     .replace(/<link[^>]*href="\.\.\/assets\/img\/favicons\/[^"]*"[^>]*>/g, '')
     .replace(/(<script src="\.\.\/[^"]*"[^>]*) integrity="[^"]*"/g, '$1')
-  new sh.ShellString(fileContents).to(file)
-}
+
+  let formattedHTML
+  try {
+    formattedHTML = await format(fileContents, {
+      parser: 'html',
+      filepath: file
+    })
+  } catch (error) {
+    console.error(`\nError formatting ${file}:`)
+    console.error(`Message: ${error.message}`)
+    console.error('\nSkipping formatting for this file...\n')
+    formattedHTML = fileContents
+  }
+
+  new sh.ShellString(formattedHTML).to(file)
+})
+
+await Promise.all(formatPromises)
 
 // create the zip file
 sh.exec(`zip -qr9 "${distFolder}.zip" "${distFolder}"`)

site/src/assets/examples/cheatsheet-rtl/index.astro

@@ -1209,8 +1209,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
-              <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
-                   style="filter: invert(1) grayscale(100%) brightness(200%);">
+              <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" style="filter: invert(1) grayscale(100%) brightness(200%);">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل">
               <span class="navbar-toggler-icon"></span>
@@ -1249,7 +1248,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
-              <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
+              <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل">
               <span class="navbar-toggler-icon"></span>

site/src/assets/examples/cheatsheet/index.astro

@@ -1187,8 +1187,7 @@ export const body_class = 'bg-body-tertiary'
           <nav class="navbar navbar-expand-lg bg-body-tertiary">
             <div class="container-fluid">
               <a class="navbar-brand" href="#">
-                <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
-                     style="filter: invert(1) grayscale(100%) brightness(200%);">
+                <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" style="filter: invert(1) grayscale(100%) brightness(200%);">
               </a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
@@ -1227,7 +1226,7 @@ export const body_class = 'bg-body-tertiary'
           <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
             <div class="container-fluid">
               <a class="navbar-brand" href="#">
-                <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
+                <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
               </a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>