Created check_website.yaml workflow and eliminated remaining lint errors

.github/workflows/check_website.yaml

@@ -0,0 +1,43 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Website Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up SvelteKit on Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Cache Dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Check code
+        run: npm run check

package.json

@@ -14,7 +14,7 @@
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
 		"preview": "svelte-kit preview",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore,unused-export-let:error\"",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."

src/lib/components/about/officer-profile-list.svelte

@@ -4,7 +4,7 @@
 	import { OFFICERS, TERMS } from '$lib/constants/officers';
 	import { termIndex } from '$lib/stores/term-index';
 
-	export let placeholderPicture: string;
+	export let placeholderPicture: string | undefined = undefined;
 	export let filter: (officer: any) => boolean;
 
 	/**
@@ -40,8 +40,7 @@
 					{name}
 					title={positions[TERMS[$termIndex]]}
 					{picture}
-					{placeholderPicture}
-				/>
+					{placeholderPicture} />
 			{/each}
 		</div>
 	</div>

src/lib/components/index/acm-paths.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { acmPaths } from '$lib/constants/acm-paths';
-	import { styleProps } from '$lib/actions/use-style-props';
 </script>
 
 <section>
@@ -18,7 +17,7 @@
 			<a class="path-item" target="_self" href={`/paths#${slug}`}>
 				<img src={picture} alt={`${slug}-logo`} />
 				<p class="size-m headers">
-					acm<span class="brand-em" use:styleProps={{ 'brand-color': color }}>
+					acm<span class="brand-em" style={`--brand-color=${color}`}>
 						{title}
 					</span>
 				</p>

src/lib/components/paths/path-section.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
 	import type { AcmPath } from '$lib/constants/acm-paths';
-	import { styleProps } from '$lib/actions/use-style-props';
-
-	enum TextAlignment {
-		Left = 'left',
-		Right = 'right',
-	}
+	import { TextAlignment } from '$lib/constants/text-alignment';
 
 	export let textAlign: TextAlignment = TextAlignment.Right;
 	export let info: AcmPath | undefined;
@@ -18,7 +13,7 @@
 			<div>
 				<h2>
 					<span class="headers size-l">
-						acm<span use:styleProps={{ 'font-color': info.color }}>
+						acm<span style={`--font-color: ${info.color}`}>
 							<span class="brand-em">{info.title}</span>
 						</span>
 					</span>

src/lib/components/utils/acm-select.svelte

@@ -9,7 +9,7 @@
 		active = !active;
 	};
 
-	const handleOption = (term) => {
+	const handleOption = (term: string) => {
 		currentValue = term;
 		defaultValue = currentValue;
 		active = false;

src/lib/constants/text-alignment.ts

@@ -0,0 +1,4 @@
+export enum TextAlignment {
+	Left = 'left',
+	Right = 'right',
+}

src/routes/__layout.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import Navbar from '$lib/components/sections/navbar.svelte';
 	import Footer from '$lib/components/sections/footer.svelte';
-
-	export let segment: string;
 </script>
 
-<Navbar {segment} />
+<Navbar />
 <main><slot /></main>
 <Footer />
 

src/routes/events.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { AcmEvent } from '$lib/parse-ical-data';
+	import type { AcmEvent } from '$lib/ical/parse';
 	import CommonHero from '$lib/components/sections/common-hero.svelte';
 	import Spacing from '$lib/components/sections/spacing.svelte';
 	import EventCarousel from '$lib/components/events/event-carousel.svelte';

src/routes/paths.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { acmAlgo, acmCreate, acmDev } from '$lib/constants/acm-paths';
+	import { TextAlignment } from '$lib/constants/text-alignment';
 	import CommonHero from '$lib/components/sections/common-hero.svelte';
 	import PathSection from '$lib/components/paths/path-section.svelte';
 	import Spacing from '$lib/components/sections/spacing.svelte';
@@ -18,7 +19,7 @@
 
 <Spacing --min="100px" --med="175px" --max="200px" />
 
-<PathSection info={acmAlgo} textAlign="right">
+<PathSection info={acmAlgo} textAlign={TextAlignment.Right}>
 	<p slot="content" class="size-xs">
 		This path is dedicated to building the programming proficiency of students.
 		<span class="brand-purple brand-em">Algo</span> focuses on mastering data structures and algorithms,
@@ -28,7 +29,7 @@
 
 <Spacing --med="64px" />
 
-<PathSection info={acmCreate} textAlign="left">
+<PathSection info={acmCreate} textAlign={TextAlignment.Left}>
 	<p slot="content" class="size-xs">
 		This path is dedicated to emphasizing the importance of product design and product management in
 		the tech industry. <span class="brand-pink brand-em">Create</span> focuses on educating students
@@ -39,7 +40,7 @@
 
 <Spacing --med="64px" />
 
-<PathSection info={acmDev} textAlign="right">
+<PathSection info={acmDev} textAlign={TextAlignment.Right}>
 	<p slot="content" class="size-xs">
 		This path is dedicated to giving students the opportunity to explore tech via hands-on projects
 		and activities. <span class="brand-em brand-bluer">Dev</span> focuses on introducing students to

src/service-worker.ts

@@ -1,5 +1,9 @@
 import { timestamp, files, build } from '$service-worker';
 
+declare type ExtendableEvent = any;
+declare type ServiceWorkerGlobalScope = any;
+declare type FetchEvent = any;
+
 const ASSETS = `cache${timestamp}`;
 
 // `build` is an array of all the files generated by the bundler,
@@ -11,33 +15,32 @@ self.addEventListener('install', (event: ExtendableEvent) => {
 	event.waitUntil(
 		caches
 			.open(ASSETS)
-			.then(cache => cache.addAll(to_cache))
+			.then((cache) => cache.addAll(to_cache))
 			.then(() => {
-				((self as any) as ServiceWorkerGlobalScope).skipWaiting();
+				(self as any as ServiceWorkerGlobalScope).skipWaiting();
 			})
 	);
 });
 
 self.addEventListener('activate', (event: ExtendableEvent) => {
 	event.waitUntil(
-		caches.keys().then(async keys => {
+		caches.keys().then(async (keys) => {
 			// delete old caches
 			for (const key of keys) {
 				if (key !== ASSETS) await caches.delete(key);
 			}
 
-			((self as any) as ServiceWorkerGlobalScope).clients.claim();
+			(self as any as ServiceWorkerGlobalScope).clients.claim();
 		})
 	);
 });
 
-
 /**
- * Fetch the asset from the network and store it in the cache. 
+ * Fetch the asset from the network and store it in the cache.
  * Fall back to the cache if the user is offline.
  */
 async function fetchAndCache(request: Request) {
-	const cache = await caches.open(`offline${timestamp}`)
+	const cache = await caches.open(`offline${timestamp}`);
 
 	try {
 		const response = await fetch(request);
@@ -58,7 +61,8 @@ self.addEventListener('fetch', (event: FetchEvent) => {
 
 	// don't try to handle e.g. data: URIs
 	const isHttp = url.protocol.startsWith('http');
-	const isDevServerRequest = url.hostname === self.location.hostname && url.port !== self.location.port;
+	const isDevServerRequest =
+		url.hostname === self.location.hostname && url.port !== self.location.port;
 	const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
 	const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
 
@@ -68,7 +72,7 @@ self.addEventListener('fetch', (event: FetchEvent) => {
 				// always serve static files and bundler-generated assets from cache.
 				// if your application has other URLs with data that will never change,
 				// set this variable to true for them and they will only be fetched once.
-				const cachedAsset = isStaticAsset && await caches.match(event.request);
+				const cachedAsset = isStaticAsset && (await caches.match(event.request));
 
 				// for pages, you might want to serve a build `service-worker-index.html` file,
 				// which Sapper has generated for you. It's not right for every

svelte.config.js

@@ -10,8 +10,8 @@ const config = {
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',
-		adapter: adapter()
-	}
+		adapter: adapter(),
+	},
 };
 
 export default config;