chore: Update "singleAttributePerLine" rule in .prettierrc

mate-academy · Feb 6, 2025 · fd6baf6 · fd6baf6
1 parent be3aea4
commit fd6baf6
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 52 deletions.
diff --git a/.linthtmlrc.json b/.linthtmlrc.json
@@ -43,7 +43,7 @@
   "text-ignore-regex": "&",
   "title-no-dup": true,
   "line-end-style": "lf",
-  "attr-new-line": 3,
+  "attr-new-line": false,
   "attr-name-style": "dash",
   "attr-no-unsafe-char": true
 }
diff --git a/.prettierrc b/.prettierrc
@@ -12,7 +12,7 @@
         "parser": "html",
         "insertPragma": false,
         "endOfLine": "auto",
-        "singleAttributePerLine": false,
+        "singleAttributePerLine": true,
         "htmlWhitespaceSensitivity": "ignore",
         "bracketSameLine": true
       }

diff --git a/src/index.html b/src/index.html
@@ -2,88 +2,168 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0" />
     <title>BOSE</title>
-    <link rel="shortcut icon" href="./images/icons/favicon.ico" type="image/x-icon" />
-    <link href="https://fonts.googleapis.com" rel="preconnect" />
-    <link href="https://fonts.gstatic.com" rel="preconnect" />
+    <link
+      rel="shortcut icon"
+      href="./images/icons/favicon.ico"
+      type="image/x-icon" />
+    <link
+      href="https://fonts.googleapis.com"
+      rel="preconnect" />
+    <link
+      href="https://fonts.gstatic.com"
+      rel="preconnect" />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet" />
-    <link href="./scss/main.scss" rel="stylesheet" />
-    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
+    <link
+      href="./scss/main.scss"
+      rel="stylesheet" />
+    <link
+      href="https://unpkg.com/[email protected]/dist/aos.css"
+      rel="stylesheet" />
   </head>
   <body class="body-page">
-    <header class="header" id="home">
+    <header
+      class="header"
+      id="home">
       <nav class="header__nav">
-        <a class="header__nav-logo" href="#home">
-          <img alt="Bose Logo" class="header__nav-logo-img" src="/src/images/icons/logo.svg" />
+        <a
+          class="header__nav-logo"
+          href="#home">
+          <img
+            alt="Bose Logo"
+            class="header__nav-logo-img"
+            src="/src/images/icons/logo.svg" />
         </a>
         <div class="header__nav-group">
-          <a class="header__nav-icon header__nav-icon--phone" href="tel:+12345555555">
+          <a
+            class="header__nav-icon header__nav-icon--phone"
+            href="tel:+12345555555">
             <span class="header__nav-icon-text">+1 234 555-55-55</span>
           </a>
-          <a class="header__nav-icon header__nav-icon--menu" href="#menu"></a>
+          <a
+            class="header__nav-icon header__nav-icon--menu"
+            href="#menu"></a>
         </div>
       </nav>
-      <h1 class="header__title" data-aos="fade-left">
+      <h1
+        class="header__title"
+        data-aos="fade-left">
         The world shades.
         <br />
         Your music shines.
       </h1>
     </header>
 
-    <div class="menu" id="menu">
+    <div
+      class="menu"
+      id="menu">
       <nav class="menu__nav">
-        <a class="menu__nav-logo" href="#home">
-          <img alt="Bose Logo" class="menu__nav-logo-img" src="./images/icons/_bose.svg" />
+        <a
+          class="menu__nav-logo"
+          href="#home">
+          <img
+            alt="Bose Logo"
+            class="menu__nav-logo-img"
+            src="./images/icons/_bose.svg" />
         </a>
-        <a aria-label="Close menu" class="menu__nav-icon menu__nav-icon--close" href="#"></a>
+        <a
+          aria-label="Close menu"
+          class="menu__nav-icon menu__nav-icon--close"
+          href="#"></a>
       </nav>
-      <div class="menu__group" data-aos="fade-left">
+      <div
+        class="menu__group"
+        data-aos="fade-left">
         <ul class="menu__group-list">
           <li class="menu__group-list-item">
-            <a class="menu__group-list-link" href="#home">Home</a>
+            <a
+              class="menu__group-list-link"
+              href="#home">
+              Home
+            </a>
           </li>
           <li class="menu__group-list-item">
-            <a class="menu__group-list-link" href="#recommended">Recommended</a>
+            <a
+              class="menu__group-list-link"
+              href="#recommended">
+              Recommended
+            </a>
           </li>
           <li class="menu__group-list-item">
-            <a class="menu__group-list-link" href="#categories">Categories</a>
+            <a
+              class="menu__group-list-link"
+              href="#categories">
+              Categories
+            </a>
           </li>
           <li class="menu__group-list-item">
-            <a class="menu__group-list-link" href="#howtobuy">How to Buy</a>
+            <a
+              class="menu__group-list-link"
+              href="#howtobuy">
+              How to Buy
+            </a>
           </li>
           <li class="menu__group-list-item">
-            <a class="menu__group-list-link" href="#contacts">Contacts</a>
+            <a
+              class="menu__group-list-link"
+              href="#contacts">
+              Contacts
+            </a>
           </li>
         </ul>
         <p class="menu__group-phone">+1 234 5555-55-55</p>
-        <a class="menu__group-link" href="tel:+12345555555">Call to Order</a>
+        <a
+          class="menu__group-link"
+          href="tel:+12345555555">
+          Call to Order
+        </a>
       </div>
     </div>
 
     <main class="main">
-      <section class="products" id="recommended">
-        <h2 class="products__title" data-aos="fade-left">Recommended</h2>
+      <section
+        class="products"
+        id="recommended">
+        <h2
+          class="products__title"
+          data-aos="fade-left">
+          Recommended
+        </h2>
         <div class="products__grid">
-          <article class="product" data-aos="fade-right">
-            <img alt="Bose portable Smart speaker" class="product__image" src="./images/products/product-1.jpg" />
+          <article
+            class="product"
+            data-aos="fade-right">
+            <img
+              alt="Bose portable Smart speaker"
+              class="product__image"
+              src="./images/products/product-1.jpg" />
             <div class="product__info">
               <h3 class="product__text product__text--title">Bose portable Smart speaker</h3>
               <p class="product__text product__text--description">Smart home</p>
               <p class="product__text product__text--price">$ 399.00</p>
             </div>
           </article>
-          <article class="product" data-aos="fade-right">
-            <img alt="SoundLink Flex Bluetooth speaker" class="product__image" src="./images/products/product-2.jpg" />
+          <article
+            class="product"
+            data-aos="fade-right">
+            <img
+              alt="SoundLink Flex Bluetooth speaker"
+              class="product__image"
+              src="./images/products/product-2.jpg" />
             <div class="product__info">
               <h3 class="product__text product__text--title">SoundLink Flex Bluetooth speaker</h3>
               <p class="product__text product__text--description">Portable bluetooth</p>
               <p class="product__text product__text--price">$ 149.00</p>
             </div>
           </article>
-          <article class="product" data-aos="fade-right">
+          <article
+            class="product"
+            data-aos="fade-right">
             <img
               alt="SoundLink Color Bluetooth speaker II"
               class="product__image"
@@ -97,35 +177,63 @@ <h3 class="product__text product__text--title">SoundLink Color Bluetooth speaker
         </div>
       </section>
 
-      <section class="categories" id="categories">
-        <h2 class="categories__title" data-aos="fade-right">
+      <section
+        class="categories"
+        id="categories">
+        <h2
+          class="categories__title"
+          data-aos="fade-right">
           Browse Bose
           <br />
           products by
           <br />
           category
         </h2>
         <div class="categories__grid">
-          <article class="categories__item" data-aos="fade-left">
+          <article
+            class="categories__item"
+            data-aos="fade-left">
             <div class="categories__item-images categories__item-images--type1">
-              <img alt="Earbuds" class="categories__item-image" src="./images/category/category-1-1.jpg" />
-              <img alt="Headphones" class="categories__item-image" src="./images/category/category-1-2.jpg" />
+              <img
+                alt="Earbuds"
+                class="categories__item-image"
+                src="./images/category/category-1-1.jpg" />
+              <img
+                alt="Headphones"
+                class="categories__item-image"
+                src="./images/category/category-1-2.jpg" />
             </div>
             <h3 class="categories__item-text">Headphones & earbuds</h3>
           </article>
 
-          <article class="categories__item" data-aos="fade-right">
+          <article
+            class="categories__item"
+            data-aos="fade-right">
             <div class="categories__item-images categories__item-images--type1">
-              <img alt="Speakers" class="categories__item-image" src="./images/category/category-2-1.jpg" />
-              <img alt="Speakers" class="categories__item-image" src="./images/category/category-2-2.jpg" />
+              <img
+                alt="Speakers"
+                class="categories__item-image"
+                src="./images/category/category-2-1.jpg" />
+              <img
+                alt="Speakers"
+                class="categories__item-image"
+                src="./images/category/category-2-2.jpg" />
             </div>
             <h3 class="categories__item-text">Speakers</h3>
           </article>
 
-          <article class="categories__item" data-aos="fade-left">
+          <article
+            class="categories__item"
+            data-aos="fade-left">
             <div class="categories__item-images categories__item-images--type2">
-              <img alt="Audio sunglasses" class="categories__item-image" src="./images/category/category-3-1.jpg" />
-              <img alt="Audio sunglasses" class="categories__item-image" src="./images/category/category-3-2.jpg" />
+              <img
+                alt="Audio sunglasses"
+                class="categories__item-image"
+                src="./images/category/category-3-1.jpg" />
+              <img
+                alt="Audio sunglasses"
+                class="categories__item-image"
+                src="./images/category/category-3-2.jpg" />
             </div>
             <h3 class="categories__item-text">Audio sunglasses</h3>
           </article>
@@ -135,13 +243,19 @@ <h3 class="categories__item-text">Audio sunglasses</h3>
         </div>
       </section>
 
-      <section class="article" id="howtobuy">
-        <h2 class="article__title" data-aos="fade-up">
+      <section
+        class="article"
+        id="howtobuy">
+        <h2
+          class="article__title"
+          data-aos="fade-up">
           Why buy direct
           <br />
           from Bose
         </h2>
-        <div class="article__text" data-aos="fade-down">
+        <div
+          class="article__text"
+          data-aos="fade-down">
           <h3 class="article__text-title">Free 2-day shipping and returns</h3>
           <h3 class="article__text-title">90-day risk-free trial</h3>
           <h3 class="article__text-title">World class customer service</h3>
@@ -154,12 +268,21 @@ <h3 class="article__text-title">My Bose account management</h3>
         </div>
       </section>
 
-      <section class="contacts" data-aos="fade-left" id="contacts">
+      <section
+        class="contacts"
+        data-aos="fade-left"
+        id="contacts">
         <h2 class="contacts__title">Contact us</h2>
         <div class="contacts__group">
-          <form class="contacts__form form" method="GET">
+          <form
+            class="contacts__form form"
+            method="GET">
             <div class="form__item">
-              <label class="form__label" for="name">Name</label>
+              <label
+                class="form__label"
+                for="name">
+                Name
+              </label>
               <input
                 class="form__input form__input--name"
                 id="name"
@@ -169,7 +292,11 @@ <h2 class="contacts__title">Contact us</h2>
                 type="text" />
             </div>
             <div class="form__item">
-              <label class="form__label" for="email">Email</label>
+              <label
+                class="form__label"
+                for="email">
+                Email
+              </label>
               <input
                 class="form__input form__input--email"
                 id="email"
@@ -179,7 +306,11 @@ <h2 class="contacts__title">Contact us</h2>
                 type="email" />
             </div>
             <div class="form__item">
-              <label class="form__label" for="message">Message</label>
+              <label
+                class="form__label"
+                for="message">
+                Message
+              </label>
               <textarea
                 class="form__input form__input--textarea"
                 id="message"
@@ -188,7 +319,11 @@ <h2 class="contacts__title">Contact us</h2>
                 placeholder="Write your message here (max. 500 characters)"
                 required></textarea>
             </div>
-            <button class="form__button" type="submit">Send</button>
+            <button
+              class="form__button"
+              type="submit">
+              Send
+            </button>
           </form>
           <address class="contacts__address address">
             <h3 class="address__label">Phone</h3>