feat(docs): add prettier-plugin-bootstrap for automatic class sorting

Add prettier-plugin-bootstrap@^0.2.1 to automatically sort Bootstrap
CSS classes following the framework's recommended order in site files.

- Add plugin as dev dependency
- Configure in site/.prettierrc.json (after prettier-plugin-astro)
- Apply class sorting to 28 .astro site files (no functional changes)

Signed-off-by: Pierluigi Lenoci <pierluigilenoci@gmail.com>

Author: pierluigilenoci

package-lock.json

@@ -167,6 +167,7 @@
     "postcss-cli": "^11.0.1",
     "prettier": "^3.8.3",
     "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-bootstrap": "^0.2.1",
     "rehype-autolink-headings": "^7.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",

package.json

@@ -4,5 +4,6 @@
   "printWidth": 120,
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-bootstrap"]
 }

site/.prettierrc.json

@@ -1,9 +1,9 @@
 ---
+
 ---
 
 <script
   is:inline
   async
   src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"
-  id="_carbonads_js"
-></script>
+  id="_carbonads_js"></script>

site/src/components/Ads.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <script src="../assets/stackblitz.js"></script>

site/src/components/DocsScripts.astro

@@ -7,8 +7,8 @@ import { getSlug } from '@libs/utils'
 const sidebar = getData('sidebar')
 ---
 
-<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation">
-  <ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
+<nav class="w-100 bd-links" id="bd-docs-nav" aria-label="Docs navigation">
+  <ul class="list-unstyled mb-0 pe-lg-2 pb-3 pb-md-2 bd-links-nav">
     {
       sidebar.map((group) => {
         const groupSlug = getSlug(group.title)

site/src/components/DocsSidebar.astro

@@ -4,12 +4,12 @@ import { getConfig } from '@libs/config'
 import { getVersionedDocsPath } from '@libs/path'
 ---
 
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
-  <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
+<footer class="mt-5 py-4 py-md-5 bg-body-tertiary bd-footer">
+  <div class="container px-4 px-md-3 py-4 py-md-5 text-body-secondary">
     <div class="row">
       <div class="col-lg-3 mb-3">
         <a
-          class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"
+          class="d-inline-flex align-items-center mb-2 text-decoration-none text-body-emphasis"
           href="/"
           aria-label="Bootstrap"
         >
@@ -32,7 +32,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2">Currently v{getConfig().current_version}.</li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+      <div class="col-lg-2 col-6 offset-lg-1 mb-3">
         <h5>Links</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href="/">Home</a></li>
@@ -43,7 +43,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2"><a href={getConfig().swag} target="_blank" rel="noopener">Swag Store</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="col-lg-2 col-6 mb-3">
         <h5>Guides</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
@@ -53,7 +53,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started/vite')}>Vite</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="col-lg-2 col-6 mb-3">
         <h5>Projects</h5>
         <ul class="list-unstyled">
           <li class="mb-2">
@@ -69,7 +69,7 @@ import { getVersionedDocsPath } from '@libs/path'
           </li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="col-lg-2 col-6 mb-3">
         <h5>Community</h5>
         <ul class="list-unstyled">
           <li class="mb-2">

site/src/components/footer/Footer.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <style is:global lang="scss">

site/src/components/head/Scss.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <style is:global lang="scss">

site/src/components/head/ScssProd.astro

@@ -13,7 +13,7 @@ const { active, class: className, track, ...props } = Astro.props
 const content = await Astro.slots.render('default')
 ---
 
-<li class="nav-item col-6 col-lg-auto">
+<li class="col-lg-auto col-6 nav-item">
   <a
     aria-current={active ? true : undefined}
     class:list={['nav-link py-2 px-0 px-lg-2', className, { active }]}