style(prettier): format all files and add CI check

rbardini · Oct 7, 2023 · 0826784 · 0826784
1 parent a1d06cd
commit 0826784
Show file tree

Hide file tree

Showing 24 changed files with 597 additions and 567 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -26,6 +26,9 @@ jobs:
       - name: Test
         run: npm test -- --coverage
 
+      - name: Format-check
+        run: npm run format -- --check
+
       - name: Build
         run: npm run build
 

diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,4 +1,4 @@
 {
   "*.js": ["eslint --fix", "prettier --write"],
-  "*.{css,json,md,yml}": "prettier --write"
+  "*.{css,html,json,md,yml}": "prettier --write"
 }
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,6 @@
 {
   "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"],
   "printWidth": 120,
   "semi": false,
   "singleQuote": true

diff --git a/components/awards.js b/components/awards.js
@@ -7,27 +7,27 @@ import Date from './date.js'
  * @returns {string | false}
  */
 export default function Awards(awards = []) {
-  return awards.length > 0 && html`
-    <section id="awards">
-      <h3>Awards</h3>
-      <div class="stack">
-        ${awards.map(({ awarder, date, summary, title }) => html`
-          <article>
-            <header>
-              <h4>${title}</h4>
-              <div class="meta">
-                ${awarder && html`
-                  <div>
-                    Awarded by <strong>${awarder}</strong>
+  return (
+    awards.length > 0 &&
+    html`
+      <section id="awards">
+        <h3>Awards</h3>
+        <div class="stack">
+          ${awards.map(
+            ({ awarder, date, summary, title }) => html`
+              <article>
+                <header>
+                  <h4>${title}</h4>
+                  <div class="meta">
+                    ${awarder && html`<div>Awarded by <strong>${awarder}</strong></div>`} ${date && Date(date)}
                   </div>
-                `}
-                ${date && Date(date)}
-              </div>
-            </header>
-            ${summary && markdown(summary)}
-          </article>
-        `)}
-      </div>
-    </section>
-  `
+                </header>
+                ${summary && markdown(summary)}
+              </article>
+            `,
+          )}
+        </div>
+      </section>
+    `
+  )
 }
diff --git a/components/certificates.js b/components/certificates.js
@@ -7,26 +7,26 @@ import Link from './link.js'
  * @returns {string | false}
  */
 export default function Certificates(certificates = []) {
-  return certificates.length > 0 && html`
-    <section id="certificates">
-      <h3>Certificates</h3>
-      <div class="stack">
-        ${certificates.map(({ date, issuer, name, url }) => html`
-          <article>
-            <header>
-              <h4>${Link(url, name)}</h4>
-              <div class="meta">
-                ${issuer && html`
-                  <div>
-                    Issued by <strong>${issuer}</strong>
+  return (
+    certificates.length > 0 &&
+    html`
+      <section id="certificates">
+        <h3>Certificates</h3>
+        <div class="stack">
+          ${certificates.map(
+            ({ date, issuer, name, url }) => html`
+              <article>
+                <header>
+                  <h4>${Link(url, name)}</h4>
+                  <div class="meta">
+                    ${issuer && html`<div>Issued by <strong>${issuer}</strong></div>`} ${date && Date(date)}
                   </div>
-                `}
-                ${date && Date(date)}
-              </div>
-            </header>
-          </article>
-        `)}
-      </div>
-    </section>
-  `
+                </header>
+              </article>
+            `,
+          )}
+        </div>
+      </section>
+    `
+  )
 }
diff --git a/components/education.js b/components/education.js
@@ -8,29 +8,35 @@ import Link from './link.js'
  * @returns {string | false}
  */
 export default function Education(education = []) {
-  return education.length > 0 && html`
-    <section id="education">
-      <h3>Education</h3>
-      <div class="stack">
-        ${education.map(({ area, courses = [], institution, startDate, endDate, studyType, url }) => html`
-          <article>
-            <header>
-              <h4>${Link(url, institution)}</h4>
-              <div class="meta">
-                ${area && html`<strong>${area}</strong>`}
-                ${startDate && html`<div>${Duration(startDate, endDate)}</div>`}
-              </div>
-            </header>
-            ${studyType && markdown(studyType)}
-            ${courses.length > 0 && html`
-              <h5>Courses</h5>
-              <ul>
-                ${courses.map(course => html`<li>${markdown(course)}</li>`)}
-              </ul>
-            `}
-          </article>
-        `)}
-      </div>
-    </section>
-  `
+  return (
+    education.length > 0 &&
+    html`
+      <section id="education">
+        <h3>Education</h3>
+        <div class="stack">
+          ${education.map(
+            ({ area, courses = [], institution, startDate, endDate, studyType, url }) => html`
+              <article>
+                <header>
+                  <h4>${Link(url, institution)}</h4>
+                  <div class="meta">
+                    ${area && html`<strong>${area}</strong>`}
+                    ${startDate && html`<div>${Duration(startDate, endDate)}</div>`}
+                  </div>
+                </header>
+                ${studyType && markdown(studyType)}
+                ${courses.length > 0 &&
+                html`
+                  <h5>Courses</h5>
+                  <ul>
+                    ${courses.map(course => html`<li>${markdown(course)}</li>`)}
+                  </ul>
+                `}
+              </article>
+            `,
+          )}
+        </div>
+      </section>
+    `
+  )
 }
diff --git a/components/header.js b/components/header.js
@@ -7,9 +7,8 @@ import Link from './link.js'
  * @param {string} countryCode
  * @returns {string | undefined}
  */
-const formatCountry = countryCode => Intl.DisplayNames
-  ? new Intl.DisplayNames(['en'], { type: 'region' }).of(countryCode)
-  : countryCode
+const formatCountry = countryCode =>
+  Intl.DisplayNames ? new Intl.DisplayNames(['en'], { type: 'region' }).of(countryCode) : countryCode
 
 /**
  * @param {import('../schema.d.ts').ResumeSchema['basics']} basics
@@ -20,44 +19,39 @@ export default function Header(basics = {}) {
 
   return html`
     <header class="masthead">
-      ${image && html`<img src="${image}" alt="">`}
-      <div>
-        ${name && html`<h1>${name}</h1>`}
-        ${label && html`<h2>${label}</h2>`}
-      </div>
+      ${image && html`<img src="${image}" alt="" />`}
+      <div>${name && html`<h1>${name}</h1>`} ${label && html`<h2>${label}</h2>`}</div>
       ${summary && html`<article>${markdown(summary)}</article>`}
       <ul class="icon-list">
-        ${location?.city && html`
+        ${location?.city &&
+        html`
           <li>
-            ${Icon('map-pin')}
-            ${location.city}${location.countryCode && html`, ${formatCountry(location.countryCode)}`}
+            ${Icon('map-pin')} ${location.city}${location.countryCode && html`, ${formatCountry(location.countryCode)}`}
           </li>
         `}
-        ${email && html`
+        ${email &&
+        html`
           <li>
             ${Icon('mail')}
             <a href="mailto:${email}">${email}</a>
           </li>
         `}
-        ${phone && html`
+        ${phone &&
+        html`
           <li>
             ${Icon('phone')}
             <a href="tel:${phone.replace(/\s/g, '')}">${phone}</a>
           </li>
         `}
-        ${url && html`
-          <li>
-            ${Icon('link')}
-            ${Link(url)}
-          </li>
-        `}
-        ${profiles.map(({ network, url, username }) => html`
-          <li>
-            ${network && Icon(network, 'user')}
-            ${Link(url, username)}
-            ${network && html`<span class="network">(${network})</span>`}
-          </li>
-        `)}
+        ${url && html`<li>${Icon('link')} ${Link(url)}</li>`}
+        ${profiles.map(
+          ({ network, url, username }) => html`
+            <li>
+              ${network && Icon(network, 'user')} ${Link(url, username)}
+              ${network && html`<span class="network">(${network})</span>`}
+            </li>
+          `,
+        )}
       </ul>
     </header>
   `

diff --git a/components/interests.js b/components/interests.js
@@ -5,21 +5,27 @@ import html from '../utils/html.js'
  * @returns {string | false}
  */
 export default function Interests(interests = []) {
-  return interests.length > 0 && html`
-    <section id="interests">
-      <h3>Interests</h3>
-      <div class="grid-list">
-        ${interests.map(({ keywords = [], name }) => html`
-          <div>
-            ${name && html`<h4>${name}</h4>`}
-            ${keywords.length > 0 && html`
-              <ul class="tag-list">
-                ${keywords.map(keyword => html`<li>${keyword}</li>`)}
-              </ul>
-            `}
-          </div>
-        `)}
-      </div>
-    </section>
-  `
+  return (
+    interests.length > 0 &&
+    html`
+      <section id="interests">
+        <h3>Interests</h3>
+        <div class="grid-list">
+          ${interests.map(
+            ({ keywords = [], name }) => html`
+              <div>
+                ${name && html`<h4>${name}</h4>`}
+                ${keywords.length > 0 &&
+                html`
+                  <ul class="tag-list">
+                    ${keywords.map(keyword => html`<li>${keyword}</li>`)}
+                  </ul>
+                `}
+              </div>
+            `,
+          )}
+        </div>
+      </section>
+    `
+  )
 }
diff --git a/components/languages.js b/components/languages.js
@@ -5,17 +5,17 @@ import html from '../utils/html.js'
  * @returns {string | false}
  */
 export default function Languages(languages = []) {
-  return languages.length > 0 && html`
-    <section id="languages">
-      <h3>Languages</h3>
-      <div class="grid-list">
-        ${languages.map(({ fluency, language }) => html`
-          <div>
-            ${language && html`<h4>${language}</h4>`}
-            ${fluency}
-          </div>
-        `)}
-      </div>
-    </section>
-  `
+  return (
+    languages.length > 0 &&
+    html`
+      <section id="languages">
+        <h3>Languages</h3>
+        <div class="grid-list">
+          ${languages.map(
+            ({ fluency, language }) => html`<div>${language && html`<h4>${language}</h4>`} ${fluency}</div>`,
+          )}
+        </div>
+      </section>
+    `
+  )
 }
diff --git a/components/link.js b/components/link.js
@@ -12,7 +12,5 @@ const formatURL = url => url.replace(/^(https?:|)\/\//, '').replace(/\/$/, '')
  * @returns {string | undefined}
  */
 export default function Link(url, name) {
-  return name
-    ? (url ? html`<a href="${url}">${name}</a>` : name)
-    : url && html`<a href="${url}">${formatURL(url)}</a>`
+  return name ? (url ? html`<a href="${url}">${name}</a>` : name) : url && html`<a href="${url}">${formatURL(url)}</a>`
 }
diff --git a/components/meta.js b/components/meta.js
@@ -10,6 +10,6 @@ export default function Meta(basics = {}) {
 
   return html`
     ${name && html`<title>${name}</title>`}
-    ${summary && html`<meta name="description" content="${markdown(summary, true)}">`}
+    ${summary && html`<meta name="description" content="${markdown(summary, true)}" />`}
   `
 }