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

* Move some docs content around

* Update links

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 61cfd55260560c096e04b0844cbf05ddd7f5dbfc..f31bd5aff3b39ea5ef58c03426ce295d1495e9da 100644 (file)
--- a/site/data/sidebar.yml
+++ b/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

diff --git a/site/src/assets/examples/starter-template/index.astro b/site/src/assets/examples/starter-template/index.astro
index 0af3165384bc5094791c7b2abb74b2c8f014d3b1..af09274d0aedbc71c43530c875b48487b818d064 100644 (file)
--- a/site/src/assets/examples/starter-template/index.astro
+++ b/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>

diff --git a/site/src/components/footer/Footer.astro b/site/src/components/footer/Footer.astro
index ab4e19a1e1dc08a056294301ef356ccf8863643f..d8144c280fdd3ec7355452b3e65cbcbcc3a1fe1e 100644 (file)
--- a/site/src/components/footer/Footer.astro
+++ b/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">

diff --git a/site/src/components/home/GetStarted.astro b/site/src/components/home/GetStarted.astro
index 4ad6807c76b0232f3d9b639acf57f4be7e89c18e..817d72969882d00ece0044aaf854bde08df9e75f 100644 (file)
--- a/site/src/components/home/GetStarted.astro
+++ b/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"

diff --git a/site/src/components/icons/Symbols.astro b/site/src/components/icons/Symbols.astro
index 44d3e7310f6a9a8ea26a142ca35857beb19a3ef5..0bb9ed7c3e12cf58d3805dd3e4be09bbf2687c7b 100644 (file)
--- a/site/src/components/icons/Symbols.astro
+++ b/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"

diff --git a/site/src/content/docs/customize/overview.mdx b/site/src/content/docs/customize/overview.mdx
index 5ae98cb79747feec380722bbc1c4b066fbd0d982..cf4289dbe21328b738de99481bb0a0b68cb5ffb2 100644 (file)
--- a/site/src/content/docs/customize/overview.mdx
+++ b/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.

diff --git a/site/src/content/docs/customize/sass.mdx b/site/src/content/docs/customize/sass.mdx
index 6352de40250b63e371b9a7858474b47c8b8e53ed..3245f1c3cf921643a24bb94c2287e807206c6a19 100644 (file)
--- a/site/src/content/docs/customize/sass.mdx
+++ b/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

diff --git a/site/src/content/docs/getting-started/download.mdx b/site/src/content/docs/getting-started/download.mdx
index 4088b79d30ef40da89c1f85c492cb7a1ba4b8b60..bc2cc8da8cbd371e9120d303528e02b1e29c1d40 100644 (file)
--- a/site/src/content/docs/getting-started/download.mdx
+++ b/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
 

diff --git a/site/src/content/docs/getting-started/contribute.mdx b/site/src/content/docs/guides/contribute.mdx
similarity index 100%
rename from site/src/content/docs/getting-started/contribute.mdx
rename to site/src/content/docs/guides/contribute.mdx

diff --git a/site/src/content/docs/getting-started/parcel.mdx b/site/src/content/docs/guides/parcel.mdx
similarity index 100%
rename from site/src/content/docs/getting-started/parcel.mdx
rename to site/src/content/docs/guides/parcel.mdx

diff --git a/site/src/content/docs/getting-started/vite.mdx b/site/src/content/docs/guides/vite.mdx
similarity index 100%
rename from site/src/content/docs/getting-started/vite.mdx
rename to site/src/content/docs/guides/vite.mdx

diff --git a/site/src/content/docs/getting-started/webpack.mdx b/site/src/content/docs/guides/webpack.mdx
similarity index 100%
rename from site/src/content/docs/getting-started/webpack.mdx
rename to site/src/content/docs/guides/webpack.mdx