From b29bdb4e05d248f17c22e7935cd3a65d7b376264 Mon Sep 17 00:00:00 2001
From: James Calcaben <jcalcaben+github@gmail.com>
Date: Sat, 22 Apr 2023 03:05:25 -0500
Subject: [PATCH 1/4] Fix font flashing bug by pre-loading font

---
 next.config.js | 15 +++++++++++-
 package.json   |  7 +++---
 pages/_app.tsx | 29 ++++++++++++++--------
 yarn.lock      | 66 +++++++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 102 insertions(+), 15 deletions(-)

diff --git a/next.config.js b/next.config.js
index 28b694f..d11822d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,4 +3,17 @@ module.exports = {
   reactStrictMode: true,
   // exportPathMap: () => {}
   swcMinify: true,
-}
+  webpack: (config) => {
+    config.module = {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.(woff|woff2)$/,
+          type: 'asset/resource'
+        },
+      ],
+    };
+    return config;
+  },
+};
diff --git a/package.json b/package.json
index e934804..74ed6c9 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
     "@vercel/analytics": "^0.1.6",
     "framer-motion": "^6",
     "next": "12.3.1",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "4.7.1",
-    "react": "18.2.0"
+    "react-icons": "4.7.1"
   },
   "devDependencies": {
     "@types/node": "18.7.2",
@@ -28,6 +28,7 @@
     "@types/react-dom": "18.0.6",
     "eslint": "8.24.0",
     "eslint-config-next": "12.3.1",
-    "typescript": "4.9.4"
+    "typescript": "4.9.4",
+    "url-loader": "^4.1.1"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c1a2d70..b6cd554 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,16 +1,18 @@
 // Importing fonts (there's probably a better way to do this...)
-import '@fontsource/crimson-text'
+
+import "@fontsource/crimson-text";
+import crimsonTextLatin from "@fontsource/crimson-text/files/crimson-text-latin-400-normal.woff2";
 
 // Setup for Chakra and Next environments
-import { ChakraProvider } from '@chakra-ui/react'
-import { Analytics } from '@vercel/analytics/react'
+import { ChakraProvider } from "@chakra-ui/react";
+import { Analytics } from "@vercel/analytics/react";
 
-import { type AppProps } from 'next/app'
-import Head from 'next/head'
+import { type AppProps } from "next/app";
+import Head from "next/head";
 
-import { theme } from '../lib/theme'
-import { Header } from '../components/header'
-import { Footer } from '../components/footer'
+import { theme } from "../lib/theme";
+import { Header } from "../components/header";
+import { Footer } from "../components/footer";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -22,13 +24,20 @@ function MyApp({ Component, pageProps }: AppProps) {
           content="Open Austin is a volunteer citizen brigade advocating for open government, open data, and civic application development since 2009."
         />
         <link rel="icon" href="/favicon.ico" />
+        <link
+          rel="preload"
+          href={crimsonTextLatin}
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
       </Head>
       <Header />
       <Analytics />
       <Component {...pageProps} />
       <Footer />
     </ChakraProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/yarn.lock b/yarn.lock
index c33d54d..05bc987 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -904,6 +904,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/json-schema@^7.0.8":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -1030,7 +1035,12 @@ acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
-ajv@^6.10.0, ajv@^6.12.4:
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -1144,6 +1154,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1349,6 +1364,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2089,6 +2109,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.1.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
@@ -2122,6 +2147,15 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+loader-utils@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -2174,6 +2208,18 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.27:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2598,6 +2644,15 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
+schema-utils@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -2820,6 +2875,15 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-loader@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 use-callback-ref@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"

From 31800372c3443f42a10b6ccffa03405e756670e2 Mon Sep 17 00:00:00 2001
From: James Calcaben <jcalcaben+github@gmail.com>
Date: Sat, 22 Apr 2023 03:06:06 -0500
Subject: [PATCH 2/4] Fix layout shift caused by useBreakpointValue() hook

---
 components/footer.tsx | 101 ++++++++++++++++++++----------------------
 components/hero.tsx   |  51 +++++++++++----------
 2 files changed, 75 insertions(+), 77 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index f036e9b..1ce436e 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 import {
   Box,
   Container,
@@ -7,29 +7,24 @@ import {
   Link as ChakraLink,
   Text,
   useColorModeValue,
-  useBreakpointValue,
   Heading,
-} from '@chakra-ui/react'
-import { ReactNode } from 'react'
-import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
-import { Link, LinkProps } from './link'
+} from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
+import { Link, LinkProps } from "./link";
 
 export const Footer = () => (
   <Box
-    bg={useColorModeValue('gray.50', 'gray.900')}
-    color={useColorModeValue('gray.700', 'gray.200')}
+    bg={useColorModeValue("gray.50", "gray.900")}
+    color={useColorModeValue("gray.700", "gray.200")}
   >
-    <Container
-      as={Stack}
-      maxW={'6xl'}
-      py={useBreakpointValue({ base: 4, md: 10 })}
-    >
+    <Container as={Stack} maxW={"6xl"} py={[4, 10]}>
       <SimpleGrid
-        templateColumns={{ base: '1fr 1fr', md: '2fr 1fr 1fr' }}
-        templateRows={{ base: '1fr 1fr', md: '1fr' }}
+        templateColumns={{ base: "1fr 1fr", md: "2fr 1fr 1fr" }}
+        templateRows={{ base: "1fr 1fr", md: "1fr" }}
         spacing={8}
       >
-        <Stack order={useBreakpointValue({ base: 1, md: 2 })}>
+        <Stack order={[1, 2]}>
           <Heading as="h2">More Info</Heading>
           {FOOTER_ITEMS_MORE_INFO.map((link) => (
             <Link href={link.href} key={link.key}>
@@ -37,7 +32,7 @@ export const Footer = () => (
             </Link>
           ))}
         </Stack>
-        <Stack order={useBreakpointValue({ base: 2, md: 3 })}>
+        <Stack order={[2, 3]}>
           <Heading as="h2">Support</Heading>
           {FOOTER_ITEMS_SUPPORT.map((link) => (
             <ChakraLink
@@ -52,22 +47,22 @@ export const Footer = () => (
         </Stack>
         <Stack
           spacing={6}
-          gridColumn={{ base: '1 / -1', md: '1' }}
-          order={useBreakpointValue({ base: 3, md: 1 })}
+          gridColumn={{ base: "1 / -1", md: "1" }}
+          order={[3, 1]}
         >
           <Box alignSelf="center">
             <Image
               alt="Open Austin's logo; a five-pointed star in orange and black"
               priority
-              src={'/assets/logo.svg'}
+              src={"/assets/logo.svg"}
               width={60}
               height={60}
             />
           </Box>
-          <Text fontSize={'sm'} alignSelf="center">
+          <Text fontSize={"sm"} alignSelf="center">
             © 2022 Open Austin. All rights reserved
           </Text>
-          <Stack direction={'row'} spacing={6} justifyContent="center">
+          <Stack direction={"row"} spacing={6} justifyContent="center">
             {SOCIAL_ITEMS.map((link) => (
               <ChakraLink
                 href={link.href}
@@ -85,60 +80,60 @@ export const Footer = () => (
       </SimpleGrid>
     </Container>
   </Box>
-)
+);
 
 type FooterItems = LinkProps & {
-  key: string
-  label: string
-  icon?: ReactNode
-}
+  key: string;
+  label: string;
+  icon?: ReactNode;
+};
 
 const FOOTER_ITEMS_MORE_INFO: ReadonlyArray<FooterItems> = [
-  { href: 'about', label: 'About', key: 'About' },
-  { href: 'portfolio', label: 'Portfolio', key: 'Portfolio' },
+  { href: "about", label: "About", key: "About" },
+  { href: "portfolio", label: "Portfolio", key: "Portfolio" },
   {
-    href: 'mailto:info@open-austin.org',
-    label: 'Contact us',
-    key: 'Contact-Us',
+    href: "mailto:info@open-austin.org",
+    label: "Contact us",
+    key: "Contact-Us",
   },
-]
+];
 
 const FOOTER_ITEMS_SUPPORT: ReadonlyArray<FooterItems> = [
   {
-    href: 'https://opencollective.com/open-austin',
-    label: 'Open Collective',
-    key: 'oc',
+    href: "https://opencollective.com/open-austin",
+    label: "Open Collective",
+    key: "oc",
   },
   {
-    href: 'https://github.com/sponsors/open-austin',
-    label: 'GitHub Sponsor',
-    key: 'github',
+    href: "https://github.com/sponsors/open-austin",
+    label: "GitHub Sponsor",
+    key: "github",
   },
-]
+];
 
 const SOCIAL_ITEMS: ReadonlyArray<FooterItems> = [
   {
-    label: 'Twitter',
-    href: 'https://twitter.com/openaustin',
+    label: "Twitter",
+    href: "https://twitter.com/openaustin",
     icon: <FaTwitter />,
-    key: 'twitter',
+    key: "twitter",
   },
   {
-    label: 'Youtube',
-    href: 'https://www.youtube.com/channel/UCSDcLeHsq8k-WLaJaRQHh4w',
+    label: "Youtube",
+    href: "https://www.youtube.com/channel/UCSDcLeHsq8k-WLaJaRQHh4w",
     icon: <FaYoutube />,
-    key: 'youtube',
+    key: "youtube",
   },
   {
-    label: 'LinkedIn',
-    href: 'https://www.linkedin.com/company/open-austin/about/',
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/company/open-austin/about/",
     icon: <FaLinkedin />,
-    key: 'linkedin',
+    key: "linkedin",
   },
   {
-    label: 'GitHub',
-    href: 'https://github.com/open-austin',
+    label: "GitHub",
+    href: "https://github.com/open-austin",
     icon: <FaGithub />,
-    key: 'github',
+    key: "github",
   },
-]
+];
diff --git a/components/hero.tsx b/components/hero.tsx
index 2716007..7fb519b 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
 import {
   Box,
   Button,
@@ -8,49 +8,48 @@ import {
   Flex,
   Text,
   VStack,
-  useBreakpointValue,
   Heading,
-} from '@chakra-ui/react'
+} from "@chakra-ui/react";
 
 const Hero = () => (
-  <Flex minH={'calc(100vh - 335px)'} pos="relative">
+  <Flex minH={"calc(100vh - 335px)"} pos="relative">
     <Image
       priority
       alt="Gathering of volunteers at an Open Austin event"
-      src={'/assets/code-across-2015-pano.png'}
+      src={"/assets/code-across-2015-pano.png"}
       layout="fill"
       objectFit="cover"
       quality={80}
     />
     <VStack
-      w={'full'}
+      w={"full"}
       zIndex={1}
-      justify={'center'}
-      bgGradient={'linear(to-r, blackAlpha.600, transparent)'}
+      justify={"center"}
+      bgGradient={"linear(to-r, blackAlpha.600, transparent)"}
     >
       <Box
         boxShadow="2xl"
-        maxW={useBreakpointValue({ base: 'full', md: 600 })}
-        p={useBreakpointValue({ base: 4, md: 12 })}
+        maxW={["full", 600]}
+        p={[4, 12]}
         rounded="md"
-        bgColor={'blackAlpha.300'}
+        bgColor={"blackAlpha.300"}
       >
         <Heading
           as="h1"
-          color={'orange.300'}
+          color={"orange.300"}
           textAlign="center"
-          fontSize={useBreakpointValue({ base: '6xl', md: '7xl' })}
+          fontSize={["6xl", "7xl"]}
           fontWeight={900}
         >
           Open Austin
         </Heading>
         <Text
-          color={'gray.200'}
+          color={"gray.200"}
           align="center"
           fontWeight={500}
           lineHeight={1.2}
           p={4}
-          fontSize={useBreakpointValue({ base: 'xl', md: 'lg' })}
+          fontSize={["xl", "lg"]}
         >
           Open Austin addresses local social and civic challenges through
           creative uses of technology. We foster relationships between
@@ -59,26 +58,30 @@ const Hero = () => (
 
         <Heading
           as="h2"
-          color={'gray.100'}
+          color={"gray.100"}
           textAlign="center"
-          fontSize={useBreakpointValue({ base: '3xl', md: '5xl' })}
+          fontSize={["3xl", "5xl"]}
           fontWeight={700}
           pb={4}
         >
           All are welcome!
         </Heading>
 
-        <Stack direction={'row'} align={'flex-end'} justifyContent="center">
+        <Stack direction={"row"} align={"flex-end"} justifyContent="center">
           <Link href="about" passHref>
-            <Button variant="primary" as="a">About</Button>
+            <Button variant="primary" as="a">
+              About
+            </Button>
           </Link>
           <Link href="portfolio" passHref>
-            <Button variant="primary" as="a">Projects</Button>
+            <Button variant="primary" as="a">
+              Projects
+            </Button>
           </Link>
         </Stack>
       </Box>
     </VStack>
   </Flex>
-)
+);
 
-export default Hero
+export default Hero;

From cf7afc57a1dc139d5ff4b2d59d2ef6fac3c14636 Mon Sep 17 00:00:00 2001
From: James Calcaben <jcalcaben+github@gmail.com>
Date: Mon, 15 May 2023 22:39:22 -0500
Subject: [PATCH 3/4] Run prettier and remove unused dependency

---
 components/footer.tsx | 90 +++++++++++++++++++++----------------------
 components/hero.tsx   | 40 +++++++++----------
 package.json          |  3 +-
 yarn.lock             | 66 +------------------------------
 4 files changed, 67 insertions(+), 132 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index 1ce436e..ebf86be 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from 'next/image'
 import {
   Box,
   Container,
@@ -8,20 +8,20 @@ import {
   Text,
   useColorModeValue,
   Heading,
-} from "@chakra-ui/react";
-import { ReactNode } from "react";
-import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
-import { Link, LinkProps } from "./link";
+} from '@chakra-ui/react'
+import { ReactNode } from 'react'
+import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
+import { Link, LinkProps } from './link'
 
 export const Footer = () => (
   <Box
-    bg={useColorModeValue("gray.50", "gray.900")}
-    color={useColorModeValue("gray.700", "gray.200")}
+    bg={useColorModeValue('gray.50', 'gray.900')}
+    color={useColorModeValue('gray.700', 'gray.200')}
   >
-    <Container as={Stack} maxW={"6xl"} py={[4, 10]}>
+    <Container as={Stack} maxW={'6xl'} py={[4, 10]}>
       <SimpleGrid
-        templateColumns={{ base: "1fr 1fr", md: "2fr 1fr 1fr" }}
-        templateRows={{ base: "1fr 1fr", md: "1fr" }}
+        templateColumns={{ base: '1fr 1fr', md: '2fr 1fr 1fr' }}
+        templateRows={{ base: '1fr 1fr', md: '1fr' }}
         spacing={8}
       >
         <Stack order={[1, 2]}>
@@ -47,22 +47,22 @@ export const Footer = () => (
         </Stack>
         <Stack
           spacing={6}
-          gridColumn={{ base: "1 / -1", md: "1" }}
+          gridColumn={{ base: '1 / -1', md: '1' }}
           order={[3, 1]}
         >
           <Box alignSelf="center">
             <Image
               alt="Open Austin's logo; a five-pointed star in orange and black"
               priority
-              src={"/assets/logo.svg"}
+              src={'/assets/logo.svg'}
               width={60}
               height={60}
             />
           </Box>
-          <Text fontSize={"sm"} alignSelf="center">
+          <Text fontSize={'sm'} alignSelf="center">
             © 2022 Open Austin. All rights reserved
           </Text>
-          <Stack direction={"row"} spacing={6} justifyContent="center">
+          <Stack direction={'row'} spacing={6} justifyContent="center">
             {SOCIAL_ITEMS.map((link) => (
               <ChakraLink
                 href={link.href}
@@ -80,60 +80,60 @@ export const Footer = () => (
       </SimpleGrid>
     </Container>
   </Box>
-);
+)
 
 type FooterItems = LinkProps & {
-  key: string;
-  label: string;
-  icon?: ReactNode;
-};
+  key: string
+  label: string
+  icon?: ReactNode
+}
 
 const FOOTER_ITEMS_MORE_INFO: ReadonlyArray<FooterItems> = [
-  { href: "about", label: "About", key: "About" },
-  { href: "portfolio", label: "Portfolio", key: "Portfolio" },
+  { href: 'about', label: 'About', key: 'About' },
+  { href: 'portfolio', label: 'Portfolio', key: 'Portfolio' },
   {
-    href: "mailto:info@open-austin.org",
-    label: "Contact us",
-    key: "Contact-Us",
+    href: 'mailto:info@open-austin.org',
+    label: 'Contact us',
+    key: 'Contact-Us',
   },
-];
+]
 
 const FOOTER_ITEMS_SUPPORT: ReadonlyArray<FooterItems> = [
   {
-    href: "https://opencollective.com/open-austin",
-    label: "Open Collective",
-    key: "oc",
+    href: 'https://opencollective.com/open-austin',
+    label: 'Open Collective',
+    key: 'oc',
   },
   {
-    href: "https://github.com/sponsors/open-austin",
-    label: "GitHub Sponsor",
-    key: "github",
+    href: 'https://github.com/sponsors/open-austin',
+    label: 'GitHub Sponsor',
+    key: 'github',
   },
-];
+]
 
 const SOCIAL_ITEMS: ReadonlyArray<FooterItems> = [
   {
-    label: "Twitter",
-    href: "https://twitter.com/openaustin",
+    label: 'Twitter',
+    href: 'https://twitter.com/openaustin',
     icon: <FaTwitter />,
-    key: "twitter",
+    key: 'twitter',
   },
   {
-    label: "Youtube",
-    href: "https://www.youtube.com/channel/UCSDcLeHsq8k-WLaJaRQHh4w",
+    label: 'Youtube',
+    href: 'https://www.youtube.com/channel/UCSDcLeHsq8k-WLaJaRQHh4w',
     icon: <FaYoutube />,
-    key: "youtube",
+    key: 'youtube',
   },
   {
-    label: "LinkedIn",
-    href: "https://www.linkedin.com/company/open-austin/about/",
+    label: 'LinkedIn',
+    href: 'https://www.linkedin.com/company/open-austin/about/',
     icon: <FaLinkedin />,
-    key: "linkedin",
+    key: 'linkedin',
   },
   {
-    label: "GitHub",
-    href: "https://github.com/open-austin",
+    label: 'GitHub',
+    href: 'https://github.com/open-austin',
     icon: <FaGithub />,
-    key: "github",
+    key: 'github',
   },
-];
+]
diff --git a/components/hero.tsx b/components/hero.tsx
index 7fb519b..aad0847 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
 import {
   Box,
   Button,
@@ -9,47 +9,47 @@ import {
   Text,
   VStack,
   Heading,
-} from "@chakra-ui/react";
+} from '@chakra-ui/react'
 
 const Hero = () => (
-  <Flex minH={"calc(100vh - 335px)"} pos="relative">
+  <Flex minH={'calc(100vh - 335px)'} pos="relative">
     <Image
       priority
       alt="Gathering of volunteers at an Open Austin event"
-      src={"/assets/code-across-2015-pano.png"}
+      src={'/assets/code-across-2015-pano.png'}
       layout="fill"
       objectFit="cover"
       quality={80}
     />
     <VStack
-      w={"full"}
+      w={'full'}
       zIndex={1}
-      justify={"center"}
-      bgGradient={"linear(to-r, blackAlpha.600, transparent)"}
+      justify={'center'}
+      bgGradient={'linear(to-r, blackAlpha.600, transparent)'}
     >
       <Box
         boxShadow="2xl"
-        maxW={["full", 600]}
+        maxW={['full', 600]}
         p={[4, 12]}
         rounded="md"
-        bgColor={"blackAlpha.300"}
+        bgColor={'blackAlpha.300'}
       >
         <Heading
           as="h1"
-          color={"orange.300"}
+          color={'orange.300'}
           textAlign="center"
-          fontSize={["6xl", "7xl"]}
+          fontSize={['6xl', '7xl']}
           fontWeight={900}
         >
           Open Austin
         </Heading>
         <Text
-          color={"gray.200"}
+          color={'gray.200'}
           align="center"
           fontWeight={500}
           lineHeight={1.2}
           p={4}
-          fontSize={["xl", "lg"]}
+          fontSize={['xl', 'lg']}
         >
           Open Austin addresses local social and civic challenges through
           creative uses of technology. We foster relationships between
@@ -58,16 +58,16 @@ const Hero = () => (
 
         <Heading
           as="h2"
-          color={"gray.100"}
+          color={'gray.100'}
           textAlign="center"
-          fontSize={["3xl", "5xl"]}
+          fontSize={['3xl', '5xl']}
           fontWeight={700}
           pb={4}
         >
           All are welcome!
         </Heading>
 
-        <Stack direction={"row"} align={"flex-end"} justifyContent="center">
+        <Stack direction={'row'} align={'flex-end'} justifyContent="center">
           <Link href="about" passHref>
             <Button variant="primary" as="a">
               About
@@ -82,6 +82,6 @@ const Hero = () => (
       </Box>
     </VStack>
   </Flex>
-);
+)
 
-export default Hero;
+export default Hero
diff --git a/package.json b/package.json
index 74ed6c9..6414f7c 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "@types/react-dom": "18.0.6",
     "eslint": "8.24.0",
     "eslint-config-next": "12.3.1",
-    "typescript": "4.9.4",
-    "url-loader": "^4.1.1"
+    "typescript": "4.9.4"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 05bc987..c33d54d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -904,11 +904,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@types/json-schema@^7.0.8":
-  version "7.0.11"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
-  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
-
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -1035,12 +1030,7 @@ acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
-ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
-ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.10.0, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -1154,11 +1144,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1364,11 +1349,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2109,11 +2089,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
@@ -2147,15 +2122,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-loader-utils@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
-  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -2208,18 +2174,6 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-mime-db@1.52.0:
-  version "1.52.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
-  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
-
-mime-types@^2.1.27:
-  version "2.1.35"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
-  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
-  dependencies:
-    mime-db "1.52.0"
-
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2644,15 +2598,6 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
-  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
-  dependencies:
-    "@types/json-schema" "^7.0.8"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
 semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -2875,15 +2820,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-url-loader@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
-  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
-  dependencies:
-    loader-utils "^2.0.0"
-    mime-types "^2.1.27"
-    schema-utils "^3.0.0"
-
 use-callback-ref@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"

From bcaffe26fa4aeb1386b6c4d3c5a55892c217190e Mon Sep 17 00:00:00 2001
From: James Calcaben <jcalcaben+github@gmail.com>
Date: Thu, 18 May 2023 20:26:39 -0500
Subject: [PATCH 4/4] Run prettier on _app.tsx

---
 pages/_app.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index b6cd554..5ad6d6b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,18 +1,18 @@
 // Importing fonts (there's probably a better way to do this...)
 
-import "@fontsource/crimson-text";
-import crimsonTextLatin from "@fontsource/crimson-text/files/crimson-text-latin-400-normal.woff2";
+import '@fontsource/crimson-text'
+import crimsonTextLatin from '@fontsource/crimson-text/files/crimson-text-latin-400-normal.woff2'
 
 // Setup for Chakra and Next environments
-import { ChakraProvider } from "@chakra-ui/react";
-import { Analytics } from "@vercel/analytics/react";
+import { ChakraProvider } from '@chakra-ui/react'
+import { Analytics } from '@vercel/analytics/react'
 
-import { type AppProps } from "next/app";
-import Head from "next/head";
+import { type AppProps } from 'next/app'
+import Head from 'next/head'
 
-import { theme } from "../lib/theme";
-import { Header } from "../components/header";
-import { Footer } from "../components/footer";
+import { theme } from '../lib/theme'
+import { Header } from '../components/header'
+import { Footer } from '../components/footer'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -37,7 +37,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       <Component {...pageProps} />
       <Footer />
     </ChakraProvider>
-  );
+  )
 }
 
-export default MyApp;
+export default MyApp