Merge pull request #31 from teovin/linter

[ENG-557] Add linting check to PRs, and disable PR if errors are found
harvard-lil · Jan 26, 2024 · 63ec88d · 63ec88d
2 parents e8242a1 + 408f0ff
commit 63ec88d
Show file tree

Hide file tree

Showing 23 changed files with 2,663 additions and 796 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -0,0 +1,36 @@
+name: Lint
+
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - main
+  # Replace pull_request with pull_request_target if you
+  # plan to use this action with forks, see the Limitations section
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 21
+
+      # Prettier must be in `package.json`
+      - name: Install Node.js dependencies
+        run: npm install
+
+      # only the format check command will run as part of the pipeline
+      # devs can format their coode using 'npm run prettier-format-fix' command during development
+      - name: Run linting check
+        run: npm run prettier-format-check
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+node_modules
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+src/data/redacted
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+	"scripts": {
+		"prettier-format-check": "prettier --check src/*",
+		"prettier-format-fix": "prettier --write src/*"
+	},
+	"devDependencies": {
+		"prettier": "3.2.4"
+	}
+}
diff --git a/src/about/index.html b/src/about/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<title>About | Caselaw Access Project</title>
@@ -16,15 +16,46 @@
 		<link href="/css/global.css" rel="stylesheet" />
 		<script type="module" src="/templates/cap-about-page.js"></script>
 
-		<link rel="apple-touch-icon" sizes="152x152" href="../images/favicon/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="192x192"  href="../images/favicon/android-chrome-144x144.png">
-		<link rel="icon" type="image/png" sizes="96x96" href="../images/favicon/favicon.ico">
-		<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon/favicon-16x16.png">
-		<link rel="mask-icon" href="../images/favicon/safari-pinned-tab.svg" color="#0075FF">
-		<meta name="msapplication-TileColor" content="#2b5797">
-		<meta name="msapplication-TileImage" content="../images/favicon/mstile-150x150.png">
-		<meta name="theme-color" content="#ffffff">
+		<link
+			rel="apple-touch-icon"
+			sizes="152x152"
+			href="../images/favicon/apple-touch-icon.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="192x192"
+			href="../images/favicon/android-chrome-144x144.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="96x96"
+			href="../images/favicon/favicon.ico"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="../images/favicon/favicon-32x32.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="../images/favicon/favicon-16x16.png"
+		/>
+		<link
+			rel="mask-icon"
+			href="../images/favicon/safari-pinned-tab.svg"
+			color="#0075FF"
+		/>
+		<meta name="msapplication-TileColor" content="#2b5797" />
+		<meta
+			name="msapplication-TileImage"
+			content="../images/favicon/mstile-150x150.png"
+		/>
+		<meta name="theme-color" content="#ffffff" />
 	</head>
 	<body>
 		<cap-about-page></cap-about-page>

diff --git a/src/caselaw/index.html b/src/caselaw/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<title>Caselaw | Caselaw Access Project</title>
@@ -18,23 +18,55 @@
 		<script type="module" src="/components/cap-footer.js"></script>
 		<script type="module" src="/components/cap-nav.js"></script>
 		<script>
-			window.BUCKET_ROOT = "https://cap-redacted-demo.s3.us-west-2.amazonaws.com";
+			window.BUCKET_ROOT =
+				"https://cap-redacted-demo.s3.us-west-2.amazonaws.com";
 		</script>
 
-		<link rel="apple-touch-icon" sizes="152x152" href="../images/favicon/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="192x192"  href="../images/favicon/android-chrome-144x144.png">
-		<link rel="icon" type="image/png" sizes="96x96" href="../images/favicon/favicon.ico">
-		<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon/favicon-16x16.png">
-		<link rel="mask-icon" href="../images/favicon/safari-pinned-tab.svg" color="#0075FF">
-		<meta name="msapplication-TileColor" content="#2b5797">
-		<meta name="msapplication-TileImage" content="../images/favicon/mstile-150x150.png">
-		<meta name="theme-color" content="#ffffff">
+		<link
+			rel="apple-touch-icon"
+			sizes="152x152"
+			href="../images/favicon/apple-touch-icon.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="192x192"
+			href="../images/favicon/android-chrome-144x144.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="96x96"
+			href="../images/favicon/favicon.ico"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="../images/favicon/favicon-32x32.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="../images/favicon/favicon-16x16.png"
+		/>
+		<link
+			rel="mask-icon"
+			href="../images/favicon/safari-pinned-tab.svg"
+			color="#0075FF"
+		/>
+		<meta name="msapplication-TileColor" content="#2b5797" />
+		<meta
+			name="msapplication-TileImage"
+			content="../images/favicon/mstile-150x150.png"
+		/>
+		<meta name="theme-color" content="#ffffff" />
 	</head>
 	<body>
 		<cap-nav></cap-nav>
 		<main id="main">
-	        <cap-content-router></cap-content-router>
+			<cap-content-router></cap-content-router>
 			<cap-footer></cap-footer>
 		</main>
 	</body>

diff --git a/src/components/accessible-map.js b/src/components/accessible-map.js
@@ -62,7 +62,7 @@ export class AccessibleMap extends LitElement {
 
 		const futureState = this._getFutureState({ key: keyName, currentState });
 		const futureStateElement = this.shadowRoot.querySelector(
-			`.map__link--${futureState}`
+			`.map__link--${futureState}`,
 		);
 		futureStateElement.focus();
 		this.activeState = futureState;
@@ -102,7 +102,7 @@ export class AccessibleMap extends LitElement {
 				<a data-abbreviation=${abbreviation} @focus="${this._handlePointerEvent}"  href="https://tinykitelab.com" class="map__link map__link--${abbreviation}" aria-labelledby=${abbreviation}>
 					<path data-abbreviation=${abbreviation} @mouseover="${this._handlePointerEvent}" class="map__path" d=${mapData[abbreviation].path} stroke-width="0.5" stroke="currentColor" />
 				</a>
-			</g>`
+			</g>`,
 				)}
 			</svg>
 		`;

diff --git a/src/components/cap-anchor-list.js b/src/components/cap-anchor-list.js
@@ -41,12 +41,11 @@ export class CapAnchorList extends LitElement {
 		return html`
 			<ul class="anchorList">
 				${this.data.map(
-					(link) =>
-						html`
-							<li>
-								<a class="anchorList__link" href="${link.url}">${link.title}</a>
-							</li>
-						`
+					(link) => html`
+						<li>
+							<a class="anchorList__link" href="${link.url}">${link.title}</a>
+						</li>
+					`,
 				)}
 			</ul>
 		`;

diff --git a/src/components/cap-case.js b/src/components/cap-case.js
@@ -23,14 +23,14 @@ export default class CapCase extends LitElement {
 			this.reporter,
 			this.volume,
 			this.case,
-			(data) => (this.caseBody = data)
+			(data) => (this.caseBody = data),
 		);
 
 		fetchCaseMetadata(
 			this.reporter,
 			this.volume,
 			this.case,
-			(data) => (this.caseMetadata = data)
+			(data) => (this.caseMetadata = data),
 		);
 	}
 

diff --git a/src/components/cap-footer.js b/src/components/cap-footer.js
@@ -109,15 +109,16 @@ export class CapFooter extends LitElement {
 						(link) =>
 							html`<li>
 								<a class="footer__textLink" href="${link.path}">${link.name}</a>
-							</li>`
+							</li>`,
 					)}
 				</ul>
 
 				<ul class="footer__list footer__navLinks">
 					${navLinks.map(
-						(link) => html` <li>
-							<a class="footer__textLink" href="${link.path}">${link.name}</a>
-						</li>`
+						(link) =>
+							html` <li>
+								<a class="footer__textLink" href="${link.path}">${link.name}</a>
+							</li>`,
 					)}
 				</ul>
 

diff --git a/src/components/cap-jurisdictions.js b/src/components/cap-jurisdictions.js
@@ -174,17 +174,18 @@ export default class CapJurisdictions extends LitElement {
 									<h2 class="jurisdiction__heading">${jurisdiction}</h2>
 									<ul class="jurisdiction__reporterList">
 										${this.jurisdictionsData[jurisdiction].map(
-											(reporter) => html`<li>
-												<a
-													class="jurisdiction__link"
-													href="/caselaw/?reporter=${reporter.slug}"
-													>${reporter.short_name}</a
-												>: ${reporter.full_name}
-												(${reporter.start_year}-${reporter.end_year})
-											</li>`
+											(reporter) =>
+												html`<li>
+													<a
+														class="jurisdiction__link"
+														href="/caselaw/?reporter=${reporter.slug}"
+														>${reporter.short_name}</a
+													>: ${reporter.full_name}
+													(${reporter.start_year}-${reporter.end_year})
+												</li>`,
 										)}
 									</ul>
-								</article>`
+								</article>`,
 						)}
 				</div>
 			</cap-caselaw-layout>

diff --git a/src/components/cap-map.js b/src/components/cap-map.js
@@ -27,7 +27,7 @@ export class CapMap extends LitElement {
 	// Fetching this for now, in case we move the file to S3
 	async fetchCaselawMapData() {
 		const response = await fetch(
-			"http://127.0.0.1:5501/data/caselawMapDictionary.json"
+			"http://127.0.0.1:5501/data/caselawMapDictionary.json",
 		);
 		const jsonResponse = await response.json();
 		this.caselawData = jsonResponse;

diff --git a/src/components/cap-nav.js b/src/components/cap-nav.js
@@ -96,14 +96,14 @@ class CapNav extends LitElement {
 
 	_handleCloseAnimation() {
 		this.shadowRoot.querySelector(
-			".nav__mobileMenuPath--middle"
+			".nav__mobileMenuPath--middle",
 		).style.opacity = "1";
 
 		this.shadowRoot.querySelector(".nav__mobileMenuPath--top").style.transform =
 			"unset";
 
 		this.shadowRoot.querySelector(
-			".nav__mobileMenuPath--bottom"
+			".nav__mobileMenuPath--bottom",
 		).style.transform = "unset";
 
 		this.shadowRoot.querySelector(".nav__mobileMenuIcon").style.transform =
@@ -112,14 +112,14 @@ class CapNav extends LitElement {
 
 	_handleOpenAnimation() {
 		this.shadowRoot.querySelector(
-			".nav__mobileMenuPath--middle"
+			".nav__mobileMenuPath--middle",
 		).style.opacity = "0";
 
 		this.shadowRoot.querySelector(".nav__mobileMenuPath--top").style.transform =
 			"rotate(45deg)";
 
 		this.shadowRoot.querySelector(
-			".nav__mobileMenuPath--bottom"
+			".nav__mobileMenuPath--bottom",
 		).style.transform = "rotate(-45deg)";
 
 		this.shadowRoot.querySelector(".nav__mobileMenuIcon").style.transform =

diff --git a/src/components/cap-reporter.js b/src/components/cap-reporter.js
@@ -39,7 +39,7 @@ export default class CapReporter extends LitElement {
 										.reporter}&volume=${v.volume_number}"
 									>${v.volume_number}</a
 								>
-							</li>`
+							</li>`,
 					)}
 			</ul>
 		`;

diff --git a/src/components/cap-social-group.js b/src/components/cap-social-group.js
@@ -33,14 +33,13 @@ export class CapSocialGroup extends LitElement {
 		return html`
 			<ul class="socialGroup">
 				${socialLinks.map(
-					(socialLink) => html` <a
-						class="socialGroup__iconLink"
-						href=${socialLink.path}
-						><cap-social-icon
-							theme=${this.theme}
-							icon=${socialLink.icon}
-						></cap-social-icon
-					></a>`
+					(socialLink) =>
+						html` <a class="socialGroup__iconLink" href=${socialLink.path}
+							><cap-social-icon
+								theme=${this.theme}
+								icon=${socialLink.icon}
+							></cap-social-icon
+						></a>`,
 				)}
 			</ul>
 		`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,7 @@ export default class CapReporter extends LitElement { @@
     										.reporter}&volume=${v.volume_number}"
     									>${v.volume_number}</a
     								>
-    							</li>`
+    							</li>`,
     					)}
     			</ul>
     		`;
@@ Expand Down @@