run prettier on all code in CI (github#23482)

* run prettier on all code in CI * rename * test .tsx too * ignore more * prettier the stragglers * minimal permission
syaifulnizamiphone7 · Dec 8, 2021 · 7f6f20a · 7f6f20a
1 parent 0bd69f1
commit 7f6f20a
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 81 deletions.
diff --git a/.github/workflows/js-lint.yml → .github/workflows/code-lint.yml b/.github/workflows/js-lint.yml → .github/workflows/code-lint.yml
@@ -1,9 +1,12 @@
-name: Lint JS
+name: Lint code
 
-# **What it does**: Lints our JavaScript to ensure the code matches the specified code style.
-# **Why we have it**: We want some level of consistency to our JavaScript.
+# **What it does**: Lints our code to ensure the code matches the specified code style.
+# **Why we have it**: We want some level of consistency to our code.
 # **Who does it impact**: Docs engineering, open-source engineering contributors.
 
+permissions:
+  contents: read
+
 on:
   workflow_dispatch:
   push:
@@ -15,10 +18,13 @@ on:
       - '**.mjs'
       - '**.ts'
       - '**.tsx'
+      - '**.yaml'
+      - '**.yml'
+      - '**.scss'
       # In case something like eslint or tsc or prettier upgrades
       - 'package-lock.json'
       # Ultimately, for debugging this workflow itself
-      - .github/workflows/js-lint.yml
+      - .github/workflows/code-lint.yml
 
 jobs:
   lint:
@@ -39,5 +45,8 @@ jobs:
       - name: Run linter
         run: npm run lint
 
+      - name: Run Prettier
+        run: npm run prettier-check
+
       - name: Run TypeScript
         run: npm run tsc
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,3 @@
 translations/
-includes/
+includes/
+data/release-notes/
diff --git a/components/guides/ArticleCards.tsx b/components/guides/ArticleCards.tsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import {
-  ArticleGuide,
-  useProductGuidesContext,
-} from 'components/context/ProductGuidesContext'
+import { ArticleGuide, useProductGuidesContext } from 'components/context/ProductGuidesContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArticleCard } from './ArticleCard'
 import { DropdownMenu } from '@primer/components'
@@ -35,20 +32,16 @@ export const ArticleCards = () => {
   const guides = isUserFiltering ? filteredResults : includeGuides || []
 
   const types = Object.entries(guideTypes).map(([key, val]) => {
-    return (
-      {text: val, key: key}
-    )
+    return { text: val, key: key }
   }) as ItemInput[]
-  
-  types.unshift({text: t('filters.all'), key: undefined})
-  
+
+  types.unshift({ text: t('filters.all'), key: undefined })
+
   const topics = allTopics?.map((topic) => {
-    return (
-      {text: topic, key: topic}
-    )
+    return { text: topic, key: topic }
   }) as ItemInput[]
 
-  topics.unshift({text: t('filters.all'), key: undefined})
+  topics.unshift({ text: t('filters.all'), key: undefined })
 
   return (
     <div>
@@ -58,26 +51,28 @@ export const ArticleCards = () => {
           <label htmlFor="type" className="text-uppercase f6 color-fg-muted d-block">
             {t('filters.type')}
           </label>
-            <DropdownMenu
-              aria-label="guide types"
-              data-testid="types-dropdown"
-              placeholder={t('filters.all')}
-              items={types}
-              selectedItem={typeFilter}
-              onChange={setTypeFilter} />
+          <DropdownMenu
+            aria-label="guide types"
+            data-testid="types-dropdown"
+            placeholder={t('filters.all')}
+            items={types}
+            selectedItem={typeFilter}
+            onChange={setTypeFilter}
+          />
         </div>
 
         <div data-testid="card-filter-topics" className="mx-4">
           <label htmlFor="topic" className="text-uppercase f6 color-fg-muted d-block">
             {t('filters.topic')}
           </label>
-            <DropdownMenu
-              aria-label="guide topics"
-              data-testid="topics-dropdown"
-              placeholder={t('filters.all')}
-              items={topics}
-              selectedItem={topicFilter}
-              onChange={setTopicFilter} />
+          <DropdownMenu
+            aria-label="guide topics"
+            data-testid="topics-dropdown"
+            placeholder={t('filters.all')}
+            items={topics}
+            selectedItem={topicFilter}
+            onChange={setTopicFilter}
+          />
         </div>
       </form>
 

diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
@@ -20,54 +20,71 @@ export const TableOfContents = (props: Props) => {
       className={cx(variant === 'compact' ? 'list-style-outside pl-2' : 'list-style-none')}
     >
       <ActionList
-        items=
-          {(items || []).filter(item => typeof item !== 'undefined').map((item) => {
+        items={(items || [])
+          .filter((item) => typeof item !== 'undefined')
+          .map((item) => {
             const { fullPath: href, title, intro, childTocItems } = item
             const isActive = router.pathname === href
-            return (variant === 'compact') ? {
-                key: href,
-                text: title,
-                renderItem: () => (
-                  <ActionList.Item>
-                    <li key={href} className="f4 d-list-item width-full">
-                      <Link className="d-block width-full" href={href}>{title}</Link>
-                      {(childTocItems || []).length > 0 && (
-                        <ul
-                          className={cx(
-                            variant === 'compact' ? 'list-style-circle pl-5 my-3' : 'list-style-none'
-                          )}
+            return variant === 'compact'
+              ? {
+                  key: href,
+                  text: title,
+                  renderItem: () => (
+                    <ActionList.Item>
+                      <li key={href} className="f4 d-list-item width-full">
+                        <Link className="d-block width-full" href={href}>
+                          {title}
+                        </Link>
+                        {(childTocItems || []).length > 0 && (
+                          <ul
+                            className={cx(
+                              variant === 'compact'
+                                ? 'list-style-circle pl-5 my-3'
+                                : 'list-style-none'
+                            )}
+                          >
+                            {(childTocItems || []).map((childItem) => {
+                              if (!childItem) {
+                                return null
+                              }
+                              return (
+                                <li key={childItem.fullPath} className="f4 d-block width-full">
+                                  <Link className="d-block width-full" href={childItem.fullPath}>
+                                    {childItem.title}
+                                  </Link>
+                                </li>
+                              )
+                            })}
+                          </ul>
+                        )}
+                      </li>
+                    </ActionList.Item>
+                  ),
+                }
+              : {
+                  key: href,
+                  title: title,
+                  renderItem: () => (
+                    <ActionList.Item className={cx('border-bottom')}>
+                      <li key={href} className={cx('mt-2', isActive && 'color-fg-muted')}>
+                        <BumpLink
+                          as={Link}
+                          href={href}
+                          title={<h2 className="py-1 h4">{title}</h2>}
                         >
-                          {(childTocItems || []).map((childItem) => {
-                            if (!childItem) {
-                              return null
-                            }
-                            return (
-                              <li key={childItem.fullPath} className="f4 d-block width-full">
-                                <Link className="d-block width-full" href={childItem.fullPath}>{childItem.title}</Link>
-                              </li>
-                            )
-                          })}
-                        </ul>
-                      )}
-                    </li>
-                  </ActionList.Item>
-                )
-            } : {
-              key: href,
-              title: title,
-              renderItem: () => (
-                <ActionList.Item className={cx('border-bottom')}>
-                  <li key={href} className={cx('mt-2', isActive && 'color-fg-muted')}>
-                    <BumpLink as={Link} href={href} title={<h2 className="py-1 h4">{title}</h2>}>
-                      {intro && (
-                        <p className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
-                      )}
-                    </BumpLink>
-                  </li>
-                </ActionList.Item>
-              )
-            }
-          })} />
+                          {intro && (
+                            <p
+                              className="f4 color-fg-muted"
+                              dangerouslySetInnerHTML={{ __html: intro }}
+                            />
+                          )}
+                        </BumpLink>
+                      </li>
+                    </ActionList.Item>
+                  ),
+                }
+          })}
+      />
     </ul>
   )
 }
diff --git a/package.json b/package.json
@@ -210,6 +210,7 @@
     "prebrowser-test": "npm run build",
     "prepare": "husky install",
     "prettier": "prettier -w \"**/*.{ts,tsx,js,mjs,scss,yml,yaml}\"",
+    "prettier-check": "prettier -c \"**/*.{ts,tsx,js,mjs,scss,yml,yaml}\"",
     "prevent-pushes-to-main": "node script/prevent-pushes-to-main.js",
     "rest-dev": "script/rest/update-files.js && npm run dev",
     "start": "cross-env NODE_ENV=development ENABLED_LANGUAGES='en,ja' nodemon server.mjs",

diff --git a/script/i18n/liquid-diff.js b/script/i18n/liquid-diff.js
@@ -7,7 +7,10 @@ import languages from '../../lib/languages.js'
 program
   .argument('<files...>', 'The file name(s) without the language dir. \nI.E. content/foo.md')
   .description('Shows the differences of liquid tags between two files')
-  .requiredOption('-l, --language <language>', `Choose one of these languages to compare: ${Object.keys(languages).filter(l => l !== 'en')}`)
+  .requiredOption(
+    '-l, --language <language>',
+    `Choose one of these languages to compare: ${Object.keys(languages).filter((l) => l !== 'en')}`
+  )
   .parse(process.argv)
 
 function reportFileDifference(diff) {

diff --git a/stylesheets/images.scss b/stylesheets/images.scss
@@ -12,8 +12,9 @@
     padding: 0;
     box-shadow: var(--color-shadow-medium);
   }
-
-  img[src*="https://github.githubassets.com/images/icons/emoji"] {
+
+  img[src*="https://github.githubassets.com/images/icons/emoji"]
+  {
     box-shadow: none;
   }
 }