v6: Move some Getting Started content into new Guides section (#41797)

* Move some docs content around

* Update links

Author: mdo

site/data/sidebar.yml

@@ -10,12 +10,17 @@
     - title: Contents
     - title: Browsers & devices
     - title: JavaScript
-    - title: Webpack
-    - title: Parcel
-    - title: Vite
     - title: Accessibility
     - title: RFS
     - title: RTL
+
+- title: Guides
+  icon: map
+  icon_color: green
+  pages:
+    - title: Webpack
+    - title: Parcel
+    - title: Vite
     - title: Contribute
 
 - title: Customize

site/src/assets/examples/starter-template/index.astro

@@ -75,25 +75,25 @@ export const title = 'Starter Template'
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/webpack')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/webpack')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Webpack guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/parcel')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/parcel')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Parcel guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/vite')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/vite')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Vite guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/contribute')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/contribute')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Contributing to Bootstrap
             </a>

site/src/components/footer/Footer.astro

@@ -48,9 +48,9 @@ import { getVersionedDocsPath } from '@libs/path'
         <ul class="list-unstyled">
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
           <li class="mb-2"><a href={getVersionedDocsPath('examples/starter-template')}>Starter template</a></li>
-          <li class="mb-2"><a href={getVersionedDocsPath('getting-started/webpack')}>Webpack</a></li>
-          <li class="mb-2"><a href={getVersionedDocsPath('getting-started/parcel')}>Parcel</a></li>
-          <li class="mb-2"><a href={getVersionedDocsPath('getting-started/vite')}>Vite</a></li>
+          <li class="mb-2"><a href={getVersionedDocsPath('guides/webpack')}>Webpack</a></li>
+          <li class="mb-2"><a href={getVersionedDocsPath('guides/parcel')}>Parcel</a></li>
+          <li class="mb-2"><a href={getVersionedDocsPath('guides/vite')}>Vite</a></li>
         </ul>
       </div>
       <div class="col-6 col-lg-2 mb-3">

site/src/components/home/GetStarted.astro

@@ -70,7 +70,7 @@ import Code from '@shortcodes/Code.astro'
     <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
-        href={getVersionedDocsPath('getting-started/webpack/')}
+        href={getVersionedDocsPath('guides/webpack/')}
       >
         <img
           class="d-block mb-2"
@@ -84,7 +84,7 @@ import Code from '@shortcodes/Code.astro'
       </a>
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
-        href={getVersionedDocsPath('getting-started/parcel/')}
+        href={getVersionedDocsPath('guides/parcel/')}
       >
         <img
           class="d-block mb-2"
@@ -98,7 +98,7 @@ import Code from '@shortcodes/Code.astro'
       </a>
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
-        href={getVersionedDocsPath('getting-started/vite/')}
+        href={getVersionedDocsPath('guides/vite/')}
       >
         <img
           class="d-block mb-2"

site/src/components/icons/Symbols.astro

@@ -96,6 +96,9 @@
       d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"
     ></path>
   </symbol>
+  <symbol id="map" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.5.5 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103M10 1.91l-4-.8v12.98l4 .8zm1 12.98 4-.8V1.11l-4 .8zm-6-.8V1.11l-4 .8v12.98z"/>
+  </symbol>
   <symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
     <path
       d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"

site/src/content/docs/customize/overview.mdx

@@ -59,4 +59,4 @@ Several Bootstrap components include embedded SVGs in our CSS to style component
 - [Form validation icons]([[docsref:/forms/validation#server-side]])
 - [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])
 
-Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/getting-started/webpack#extracting-svg-files]]), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/guides/webpack#extracting-svg-files]]), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.

site/src/content/docs/customize/sass.mdx

@@ -107,7 +107,7 @@ sass --watch ./scss/custom.scss ./css/custom.css
 Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
 
 <Callout>
-**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]([[docsref:/getting-started/webpack]]), [Parcel]([[docsref:/getting-started/parcel]]), or [Vite]([[docsref:/getting-started/vite]]). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
+**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]([[docsref:/guides/webpack]]), [Parcel]([[docsref:/guides/parcel]]), or [Vite]([[docsref:/guides/vite]]). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
 </Callout>
 
 ## Including

site/src/content/docs/getting-started/download.mdx

@@ -19,10 +19,10 @@ This doesn’t include documentation, source files, or any optional JavaScript d
 
 Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:
 
-- [Sass compiler]([[docsref:/getting-started/contribute#sass]]) for compiling Sass source files into CSS files
+- [Sass compiler]([[docsref:/guides/contribute#sass]]) for compiling Sass source files into CSS files
 - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
 
-Should you require our full set of [build tools]([[docsref:/getting-started/contribute#tooling-setup]]), they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.
+Should you require our full set of [build tools]([[docsref:/guides/contribute#tooling-setup]]), they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.
 
 <a href="[[config:download.source]]" class="btn btn-bd-primary">Download source</a>
 
@@ -68,7 +68,7 @@ openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
 
 ## Package managers
 
-Pull in Bootstrap’s **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]([[docsref:/getting-started/contribute#sass]]) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
+Pull in Bootstrap’s **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]([[docsref:/guides/contribute#sass]]) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
 
 ### npm