Format documents with Prettier to fix lint (#12)

julien-deramond · Mar 24, 2023 · 2a6c6d9 · 2a6c6d9
1 parent 3653abc
commit 2a6c6d9
Show file tree

Hide file tree

Showing 10 changed files with 207 additions and 41 deletions.
diff --git a/site-new/components/Ads.astro b/site-new/components/Ads.astro
@@ -1,3 +1,5 @@
 ---
 ---
-<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
+
+<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"
+></script>
diff --git a/site-new/components/header/Navigation.astro b/site-new/components/header/Navigation.astro
@@ -84,7 +84,7 @@ const { layout, title } = Astro.props
             href={getVersionedDocsPath('getting-started/introduction/')}
             text="Docs"
           />
-          <LinkItem active={title === "Examples"} href={getVersionedDocsPath('examples/')} text="Examples" />
+          <LinkItem active={title === 'Examples'} href={getVersionedDocsPath('examples/')} text="Examples" />
           <LinkItem href={getConfig().params.icons} target="_blank" rel="noopener" text="Icons" />
           <LinkItem href={getConfig().params.themes} target="_blank" rel="noopener" text="Themes" />
           <LinkItem href={getConfig().params.blog} target="_blank" rel="noopener" text="Blog" />

diff --git a/site-new/components/home/CSSVariables.astro b/site-new/components/home/CSSVariables.astro
@@ -1,14 +1,19 @@
 ---
 import { getVersionedDocsPath } from '../../libs/config'
 ---
+
 <section class="row g-md-5 pb-md-5 mb-5 align-items-center">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
       <svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
     <p class="lead fw-normal">
-      Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
+      Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual
+      components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code
+        >:root</code
+      > level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily
+      be modified.
     </p>
     <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
       <a href={getVersionedDocsPath('customize/css-variables')} class="icon-link icon-link-hover fw-semibold mb-3">
@@ -20,12 +25,17 @@ import { getVersionedDocsPath } from '../../libs/config'
   <div class="row gx-md-5">
     <div class="col-lg-6 mb-3">
       <h3 class="fw-semibold">Using CSS variables</h3>
-      <p>Use any of our <a href={getVersionedDocsPath('customize/css-variables/#root-variables')}>global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
+      <p>
+        Use any of our <a href={getVersionedDocsPath('customize/css-variables/#root-variables')}
+          >global <code>:root</code> variables</a
+        > to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children
+        elements.
+      </p>
       <!-- TODO: replace by Astro stuff
       * 'highlight' is a feature provided by Hugo
       * We use Chroma style overriden in _syntax.scss
     -->
-    <!--
+      <!--
       {{ highlight (printf `.component {
   color: var(--bs-gray-800);
   background-color: var(--bs-gray-100);
@@ -40,7 +50,10 @@ import { getVersionedDocsPath } from '../../libs/config'
     </div>
     <div class="col-lg-6 mb-3">
       <h3 class="fw-semibold">Customizing via CSS variables</h3>
-      <p>Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.</p>
+      <p>
+        Override global, component, or utility class variables to customize Bootstrap just how you like. No need to
+        redeclare each rule, just a new variable value.
+      </p>
       <!-- TODO: replace by Astro stuff
         * 'highlight' is a feature provided by Hugo
         * We use Chroma style overriden in _syntax.scss

diff --git a/site-new/components/home/ComponentUtilities.astro b/site-new/components/home/ComponentUtilities.astro
@@ -1,6 +1,7 @@
 ---
 import { getVersionedDocsPath } from '../../libs/config'
 ---
+
 <section class="pb-md-5 mb-5">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
@@ -12,34 +13,93 @@ import { getVersionedDocsPath } from '../../libs/config'
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
     <p class="lead fw-normal">
-      New in Bootstrap 5, our utilities are now generated by our <a href={getVersionedDocsPath('utilities/api')}>Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
+      New in Bootstrap 5, our utilities are now generated by our <a href={getVersionedDocsPath('utilities/api')}
+        >Utility API</a
+      >. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to
+      add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them
+      custom names.
     </p>
   </div>
   <div class="row gx-md-5">
     <div class="col-lg-6">
       <h3 class="fw-semibold">Quickly customize components</h3>
-      <p>Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from <a href={getVersionedDocsPath('utilities/position')}>positioning</a> and <a href={getVersionedDocsPath('utilities/sizing')}>sizing</a> to <a href={getVersionedDocsPath('utilities/colors')}>colors</a> and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for even more control.</p>
+      <p>
+        Apply any of our included utility classes to our components to customize their appearance, like the navigation
+        example below. There are hundreds of classes available—from <a href={getVersionedDocsPath('utilities/position')}
+          >positioning</a
+        > and <a href={getVersionedDocsPath('utilities/sizing')}>sizing</a> to <a
+          href={getVersionedDocsPath('utilities/colors')}>colors</a
+        > and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for
+        even more control.
+      </p>
       <div class="p-4 border rounded-3 mb-4">
         <ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
           <li class="nav-item" role="presentation">
-            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
+            <button
+              class="nav-link active"
+              id="home-tab"
+              data-bs-toggle="tab"
+              type="button"
+              role="tab"
+              aria-selected="true">Home</button
+            >
           </li>
           <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
+            <button
+              class="nav-link"
+              id="profile-tab"
+              data-bs-toggle="tab"
+              type="button"
+              role="tab"
+              aria-selected="false">Profile</button
+            >
           </li>
           <li class="nav-item" role="presentation">
-            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
+            <button
+              class="nav-link"
+              id="contact-tab"
+              data-bs-toggle="tab"
+              type="button"
+              role="tab"
+              aria-selected="false">Contact</button
+            >
           </li>
         </ul>
-        <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
+        <ul
+          class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm"
+          id="pillNav2"
+          role="tablist"
+          style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"
+        >
           <li class="nav-item" role="presentation">
-            <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
+            <button
+              class="nav-link active rounded-5"
+              id="home-tab2"
+              data-bs-toggle="tab"
+              type="button"
+              role="tab"
+              aria-selected="true">Home</button
+            >
           </li>
           <li class="nav-item" role="presentation">
-            <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
+            <button
+              class="nav-link rounded-5"
+              id="profile-tab2"
+              data-bs-toggle="tab"
+              type="button"
+              role="tab"
+              aria-selected="false">Profile</button
+            >
           </li>
           <li class="nav-item" role="presentation">
-            <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
+            <button
+              class="nav-link rounded-5"
+              id="contact-tab2"
+              data-bs-toggle="tab"
+              type="button"
+              role="tab"
+              aria-selected="false">Contact</button
+            >
           </li>
         </ul>
       </div>
@@ -70,7 +130,10 @@ import { getVersionedDocsPath } from '../../libs/config'
     </div>
     <div class="col-lg-6">
       <h3 class="fw-semibold">Create and extend utilities</h3>
-      <p>Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.</p>
+      <p>
+        Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any
+        project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.
+      </p>
       <!-- TODO: replace by Astro stuff
         * 'highlight' is a feature provided by Hugo
         * We use Chroma style overriden in _syntax.scss

diff --git a/site-new/components/home/Customize.astro b/site-new/components/home/Customize.astro
@@ -1,13 +1,15 @@
 ---
 import { getVersionedDocsPath } from '../../libs/config'
 ---
+
 <section class="col-lg-7 mb-5">
   <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
     <svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   <p class="lead fw-normal">
-    Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
+    Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable
+    global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
   </p>
   <p class="d-flex justify-content-start lead fw-normal">
     <a href={getVersionedDocsPath('customize/overview')} class="icon-link icon-link-hover fw-semibold">

diff --git a/site-new/components/home/GetStarted.astro b/site-new/components/home/GetStarted.astro
@@ -1,6 +1,7 @@
 ---
 import { getVersionedDocsPath } from '../../libs/config'
 ---
+
 <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
   <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
     <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
@@ -22,7 +23,10 @@ import { getVersionedDocsPath } from '../../libs/config'
     <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
     <h3 class="fw-semibold">Install via package manager</h3>
     <p class="pe-lg-5">
-      Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
+      Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed
+      installs don’t include documentation or our full build scripts. You can also <a
+        href="https://github.com/twbs/examples/">use any demo from our Examples repo</a
+      > to quickly jumpstart Bootstrap projects.
     </p>
     <!-- TODO: replace by Astro stuff
       * 'highlight' is a feature provided by Hugo
@@ -33,14 +37,22 @@ import { getVersionedDocsPath } from '../../libs/config'
     {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
     -->
     <p>
-      <a href={getVersionedDocsPath('getting-started/download')}>Read our installation docs</a> for more info and additional package managers.
+      <a href={getVersionedDocsPath('getting-started/download')}>Read our installation docs</a> for more info and additional
+      package managers.
     </p>
   </div>
   <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
     <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
     <h3 class="fw-semibold">Include via CDN</h3>
     <p class="pe-lg-5">
-      When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href={getVersionedDocsPath('getting-started/introduction/#quick-start')}>quick start</a>, or <a href={getVersionedDocsPath('examples')}>browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href={getVersionedDocsPath('getting-started/introduction/#separate')}>separately</a>.
+      When you only need to include Bootstrap’s compiled CSS or JS, you can use <a
+        href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a
+      >. See it in action with our simple <a href={getVersionedDocsPath('getting-started/introduction/#quick-start')}
+        >quick start</a
+      >, or <a href={getVersionedDocsPath('examples')}>browse the examples</a> to jumpstart your next project. You can also
+      choose to include Popper and our JS <a href={getVersionedDocsPath('getting-started/introduction/#separate')}
+        >separately</a
+      >.
     </p>
     <!-- TODO: replace by Astro stuff
       * 'highlight' is a feature provided by Hugo
@@ -56,16 +68,46 @@ import { getVersionedDocsPath } from '../../libs/config'
     <h4 class="fw-semibold">Read our getting started guides</h4>
     <p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
     <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')}>
-        <img class="d-block mb-2" src={getVersionedDocsPath('assets/img/webpack.svg')} alt="" width="72" height="72" loading="lazy">
+      <a
+        class="d-flex flex-column align-items-center text-decoration-none animate-img"
+        href={getVersionedDocsPath('getting-started/webpack')}
+      >
+        <img
+          class="d-block mb-2"
+          src={getVersionedDocsPath('assets/img/webpack.svg')}
+          alt=""
+          width="72"
+          height="72"
+          loading="lazy"
+        />
         <span class="text-body-secondary">Webpack</span>
       </a>
-      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href={getVersionedDocsPath('getting-started/parcel')}>
-        <img class="d-block mb-2" src={getVersionedDocsPath('assets/img/parcel.png')} alt="" width="72" height="72" loading="lazy">
+      <a
+        class="d-flex flex-column align-items-center text-decoration-none animate-img"
+        href={getVersionedDocsPath('getting-started/parcel')}
+      >
+        <img
+          class="d-block mb-2"
+          src={getVersionedDocsPath('assets/img/parcel.png')}
+          alt=""
+          width="72"
+          height="72"
+          loading="lazy"
+        />
         <span class="text-body-secondary">Parcel</span>
       </a>
-      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href={getVersionedDocsPath('getting-started/vite')}>
-        <img class="d-block mb-2" src={getVersionedDocsPath('assets/img/vite.svg')} alt="" width="72" height="72" loading="lazy">
+      <a
+        class="d-flex flex-column align-items-center text-decoration-none animate-img"
+        href={getVersionedDocsPath('getting-started/vite')}
+      >
+        <img
+          class="d-block mb-2"
+          src={getVersionedDocsPath('assets/img/vite.svg')}
+          alt=""
+          width="72"
+          height="72"
+          loading="lazy"
+        />
         <span class="text-body-secondary">Vite</span>
       </a>
     </div>

diff --git a/site-new/components/home/Icons.astro b/site-new/components/home/Icons.astro
@@ -1,6 +1,7 @@
 ---
 import { getVersionedDocsPath } from '../../libs/config'
 ---
+
 <section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
   <div class="col-lg-6">
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
@@ -23,9 +24,15 @@ import { getVersionedDocsPath } from '../../libs/config'
     </p>
   </div>
   <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset={`${getVersionedDocsPath('assets/img/bootstrap-icons.png')},
+    <img
+      class="img-fluid mt-3 mx-auto"
+      srcset={`${getVersionedDocsPath('assets/img/bootstrap-icons.png')},
                                                   ${getVersionedDocsPath('assets/img/[email protected]')} 2x"
                                           src=${getVersionedDocsPath('assets/img/bootstrap-icons.png')}`}
-                                          alt="Bootstrap Icons" width="700" height="425" loading="lazy">
+      alt="Bootstrap Icons"
+      width="700"
+      height="425"
+      loading="lazy"
+    />
   </div>
 </section>