Upgrade SvelteKit

.eslintrc.cjs

@@ -1,11 +1,16 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
   plugins: ["svelte3", "@typescript-eslint"],
   rules: {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
   },
   ignorePatterns: ["*.cjs", "*.config.js", "*.d.ts"],
   overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
@@ -14,7 +19,7 @@ module.exports = {
   },
   parserOptions: {
     sourceType: "module",
-    ecmaVersion: 2019,
+    ecmaVersion: 2020,
   },
   env: {
     browser: true,

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

README.md

@@ -30,7 +30,7 @@ Most crucially, Contentful's rich text support is utilized in our project pages
 
 ### Setup
 
-This website requires Node 14 in order to support SvelteKit.
+This website requires Node 16 in order to support SvelteKit.
 
 #### Dependencies
 

package.json

@@ -3,30 +3,31 @@
   "description": "Hack4Impact UIUC's chapter website.",
   "version": "0.0.1",
   "scripts": {
-    "build": "svelte-kit build && npm run build:404 && npm run minify && npm run build:images",
-    "build:404": "mv build/404/index.html build/404.html && rm -rf build/404",
-    "build:images": "node scripts/loadImages.js",
+    "build": "vite build",
+    "postbuild": "node scripts/loadImages.js",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "dev": "svelte-kit dev",
+    "dev": "vite dev",
     "format": "prettier --write --plugin-search-dir=. .",
     "format:check": "prettier --check --plugin-search-dir=. .",
-    "minify": "html-minifier-terser --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css --minify-js --collapse-boolean-attributes --input-dir build --output-dir build --file-ext html",
     "lint": "eslint src",
     "lint:fix": "eslint --fix src",
     "prebuild": "rm -rf build",
-    "preview": "svelte-kit preview"
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync"
   },
   "devDependencies": {
     "@contentful/rich-text-html-renderer": "^15.0.0",
     "@contentful/rich-text-types": "^15.0.0",
-    "@sveltejs/adapter-static": "1.0.0-next.22",
-    "@sveltejs/kit": "1.0.0-next.202",
+    "@sveltejs/adapter-static": "1.0.0-next.37",
+    "@sveltejs/kit": "1.0.0-next.377",
     "@types/ackee-tracker": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
+    "@types/html-minifier-terser": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
     "dotenv": "^10.0.0",
     "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^3.2.0",
     "html-minifier-terser": "^6.1.0",
     "prettier": "~2.5.1",
@@ -35,13 +36,14 @@
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",
     "tslib": "^2.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "^4.0.0",
+    "vite": "^3.0.0"
   },
-  "type": "module",
   "dependencies": {
     "@svicons/boxicons-regular": "^0.1.3",
     "@svicons/boxicons-solid": "^0.1.3",
     "ackee-tracker": "^5.1.0",
     "contentful": "^9.1.5"
-  }
+  },
+  "type": "module"
 }

src/additional-svelte-jsx.d.ts

@@ -1,5 +1,5 @@
 declare namespace svelte.JSX {
-  interface HTMLProps<T> {
+  interface HTMLAttributes<T> {
     onenterViewport?: () => void;
   }
 }

src/app.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+  // interface Locals {}
+  // interface Platform {}
+  // interface Session {}
+  // interface Stuff {}
+}

src/app.html

@@ -9,7 +9,7 @@
       content="Hack4Impact, Hack, Impact, Software for good, UIUC, University of Illinois, University of Illinois Urbana-Champaign, Nonprofit, Social good, Civic tech"
     />
 
-    %svelte.head%
+    %sveltekit.head%
 
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
     <link rel="icon" type="image/png" href="/logo-16.png" sizes="16x16" />
@@ -254,7 +254,8 @@
       }
     </style>
   </head>
+
   <body>
-    %svelte.body%
+    %sveltekit.body%
   </body>
 </html>

src/components/Button.svelte

@@ -13,13 +13,11 @@
 
   // append hover-animated arrow
   export let arrow: boolean | undefined = false;
-
-  export let onClick: () => void | undefined = undefined;
 </script>
 
 <button
   class="button-{type}{arrow ? ' arrow' : ''}"
-  on:click={onClick}
+  on:click
   style={type.endsWith("custom")
     ? `background-color: ${
         type.startsWith("primary") ? backgroundColor : "transparent"

src/components/Footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { semesterToId } from "$lib/utils/schema";
+  import { semesterToId } from "$utils/schema";
 
   export let semesters: string[];
 </script>

src/components/Head.svelte

@@ -1,33 +1,31 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-
   export let title: string;
   export let description: string;
   export let url: string;
   export let image: string | undefined;
-
-  onMount(() => (document.title = title));
 </script>
 
-<title>{title}</title>
-<meta name="description" content={description} />
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
 
-<meta property="og:type" content="website" />
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-<meta property="og:url" content={url} />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content={title} />
+  <meta property="og:description" content={description} />
+  <meta property="og:url" content={url} />
 
-<meta name="twitter:domain" value="https://uiuc.hack4impact.org" />
-<meta name="twitter:title" content={title} />
-<meta name="twitter:description" content={description} />
-<meta name="twitter:url" content={url} />
+  <meta name="twitter:domain" value="https://uiuc.hack4impact.org" />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:description" content={description} />
+  <meta name="twitter:url" content={url} />
 
-<meta
-  name="twitter:card"
-  content={image !== undefined ? "summary_large_image" : "summary"}
-/>
+  <meta
+    name="twitter:card"
+    content={image !== undefined ? "summary_large_image" : "summary"}
+  />
 
-{#if image !== undefined}
-  <meta property="og:image" content={image} />
-  <meta name="twitter:image" content={image} />
-{/if}
+  {#if image !== undefined}
+    <meta property="og:image" content={image} />
+    <meta name="twitter:image" content={image} />
+  {/if}
+</svelte:head>

src/components/Member.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Member, setImageHeight } from "$lib/utils/schema";
+  import { type Member, setImageHeight } from "$utils/schema";
 
   export let member: Member;
 </script>

src/components/Nav.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
-  export let path: string | undefined;
+  import { afterNavigate } from "$app/navigation";
+  import { page } from "$app/stores";
 
   const dropdownRoutes = ["Nonprofits", "Sponsors", "Students"];
+  const workWithUsTabLimit = 792;
 
-  let windowWidth: number | undefined;
+  let windowWidth: number = workWithUsTabLimit + 1; // By default, make "Work With Us" tabbable
   let showMobileMenu = false;
+
+  $: workWithUsTabIndex = windowWidth > workWithUsTabLimit ? 0 : -1;
+  $: path = $page.url.pathname;
+
+  afterNavigate(() => (showMobileMenu = false));
 </script>
 
-<svelte:window
-  bind:innerWidth={windowWidth}
-  on:sveltekit:navigation-end={() => (showMobileMenu = false)}
-/>
+<svelte:window bind:innerWidth={windowWidth} />
 
 <nav class="row-center">
   <div class="row-center" id="nav-contents">
@@ -48,7 +52,7 @@
       >
       <span
         class="navlink dropdown"
-        tabindex={windowWidth > 792 ? 0 : -1}
+        tabindex={workWithUsTabIndex}
         aria-current={path && path.startsWith("/join") ? "page" : undefined}
       >
         <h2>Work With Us<span id="caret"> &#9660;</span></h2>

src/components/Step.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import Icon, { IconType } from "$lib/components/Icon.svelte";
+  import Icon, { type IconType } from "$components/Icon.svelte";
 </script>
 
 <script lang="ts">

src/components/Testimonial.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { setImageHeight } from "$lib/utils/schema";
+  import { setImageHeight } from "$utils/schema";
 
   import Button from "./Button.svelte";
   import Row from "./Row.svelte";

src/components/projects/FeaturedBanner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { setImageHeight } from "$lib/utils/schema";
-  import type { Project } from "$lib/utils/schema";
+  import { setImageHeight } from "$utils/schema";
+  import type { Project } from "$utils/schema";
 
   export let project: Project;
 </script>

src/components/projects/Member.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Member, setImageHeight } from "$lib/utils/schema";
+  import { type Member, setImageHeight } from "$utils/schema";
 
   export let member: Member;
   export let role: string;

src/components/projects/ProjectCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Button from "$lib/components/Button.svelte";
-  import { setImageHeight } from "$lib/utils/schema";
-  import type { Project } from "$lib/utils/schema";
+  import Button from "$components/Button.svelte";
+  import { setImageHeight } from "$utils/schema";
+  import type { Project } from "$utils/schema";
 
   export let project: Project;
 </script>

src/hooks.ts

@@ -1,13 +1,43 @@
 import dotenv from "dotenv";
-import { ContentWrapper } from "./utils/api";
+import { ContentWrapper } from "$utils/api";
+import { minify, type Options } from "html-minifier-terser";
+import { prerendering } from "$app/env";
+import type { Handle } from "@sveltejs/kit";
 
 dotenv.config();
 
 const { CONTENTFUL_DELIVERY_KEY, CONTENTFUL_SPACE_ID } = process.env;
 
-const contentWrapper = new ContentWrapper(
-  CONTENTFUL_SPACE_ID,
-  CONTENTFUL_DELIVERY_KEY
+export const contentWrapper = new ContentWrapper(
+  CONTENTFUL_SPACE_ID!,
+  CONTENTFUL_DELIVERY_KEY!
 );
 
-export { contentWrapper };
+const minificationOptions: Options = {
+  collapseBooleanAttributes: true,
+  collapseWhitespace: true,
+  minifyCSS: true,
+  minifyJS: true,
+  removeComments: true,
+  removeOptionalTags: true,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeTagWhitespace: true,
+  useShortDoctype: true,
+};
+
+export const handle: Handle = async ({ event, resolve }) => {
+  const response = await resolve(event);
+
+  if (prerendering && response.headers.get("content-type") === "text/html") {
+    return new Response(
+      await minify(await response.text(), minificationOptions),
+      {
+        status: response.status,
+        headers: response.headers,
+      }
+    );
+  }
+
+  return response;
+};