Prettified code

.prettierrc

@@ -0,0 +1,13 @@
+{
+	"singleQuote": true,
+	"jsxSingleQuote": true,
+	"printWidth": 80,
+	"useTabs": true,
+	"semi": true,
+	"quoteProps": "consistent",
+	"trailingComma": "es5",
+	"bracketSpacing": true,
+	"jsxBracketSameLine": false,
+	"arrowParens": "always",
+	"endOfLine": "lf"
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Layout from './components/Layout';
 
@@ -9,19 +9,19 @@ import newsArticle from './pages/newsArticle';
 import notFound from './pages/404';
 
 function App() {
-  return (
-    <BrowserRouter>
-      <Layout>
-        <Switch>
-          <Route path="/initiatives" exact component={initiatives} />
-          <Route path="/news/:articleId" component={newsArticle} />
-          <Route path="/news" exact component={news} />
-          <Route path="/:path" component={notFound} />
-          <Route path="/" exact component={index} />
-        </Switch>
-      </Layout>
-    </BrowserRouter>
-  );
+	return (
+		<BrowserRouter>
+			<Layout>
+				<Switch>
+					<Route path='/initiatives' exact component={initiatives} />
+					<Route path='/news/:articleId' component={newsArticle} />
+					<Route path='/news' exact component={news} />
+					<Route path='/:path' component={notFound} />
+					<Route path='/' exact component={index} />
+				</Switch>
+			</Layout>
+		</BrowserRouter>
+	);
 }
 
 export default App;

src/components/ArticleList.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import useQuery from '../hooks/useInitiatives'
+import React from 'react';
+import useQuery from '../hooks/useInitiatives';
 import ArticleRow from './ArticleRow';
 
 export default function ArticleList() {
-	let articles = useQuery<SGA.ArticleDocument[]>('*[_type == "article"] | order(publish_date desc) [0...3]');
+	let articles = useQuery<SGA.ArticleDocument[]>(
+		'*[_type == "article"] | order(publish_date desc) [0...3]'
+	);
 
 	if (!articles) {
 		return null;
@@ -12,12 +14,10 @@ export default function ArticleList() {
 	console.log(articles);
 
 	return (
-		<div style={{display: "flex", flexDirection: "column"}}>
-			{
-				articles.map(article => {
-					return <ArticleRow key={article._id} article={article} />
-				})
-			}
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			{articles.map((article) => {
+				return <ArticleRow key={article._id} article={article} />;
+			})}
 		</div>
-	)
-}
+	);
+}

src/components/ArticleRow.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
-import imageUrl from '../imageUrl'
-import BlockContent from '@sanity/block-content-to-react'
+import React from 'react';
+import imageUrl from '../imageUrl';
+import BlockContent from '@sanity/block-content-to-react';
 import { Link } from 'react-router-dom';
 
-export default function ArticleRow({ article }: {article: SGA.ArticleDocument}) {
+export default function ArticleRow({
+	article,
+}: {
+	article: SGA.ArticleDocument;
+}) {
 	let thumbUrl: string | null = null;
 	if (article.thumbnail) {
 		thumbUrl = imageUrl(article.thumbnail).url();
@@ -11,26 +15,23 @@ export default function ArticleRow({ article }: {article: SGA.ArticleDocument})
 
 	const slug = (s: string) => {
 		return s.toLowerCase().replaceAll(' ', '-');
-	}
-	
+	};
+
 	return (
-		<div style={{display: "flex"}}>
-			<div style={{flex: 1, padding: "10px"}}>
-				{ thumbUrl ?
-					<img className="mb-4" src={thumbUrl} alt={article.title} />
-					: null
-				}
+		<div style={{ display: 'flex' }}>
+			<div style={{ flex: 1, padding: '10px' }}>
+				{thumbUrl ? (
+					<img className='mb-4' src={thumbUrl} alt={article.title} />
+				) : null}
 			</div>
-			<div style={{flex: 3, padding: "10px"}}>
+			<div style={{ flex: 3, padding: '10px' }}>
 				<Link to={'/news/' + article._id + '/' + slug(article.title)}>
-					<h3 className="font-bold text-3xl mb-6">
-						{ article.title }
-					</h3>
+					<h3 className='font-bold text-3xl mb-6'>{article.title}</h3>
 				</Link>
-				<i className="text-sm">{ article.publish_date }</i>
-				<br/>
+				<i className='text-sm'>{article.publish_date}</i>
+				<br />
 				<BlockContent blocks={article.content} />
 			</div>
 		</div>
 	);
-}
+}

src/components/Footer.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import '../css/footer.css'
+import React from 'react';
+import '../css/footer.css';
 import BlockContent from '@sanity/block-content-to-react';
 import useFooter from '../hooks/useFooter';
 
@@ -9,14 +9,22 @@ export default function Footer() {
 		return null;
 	}
 
-	return <section className="footer-wrapper">
-		<img className="footer-banner" src="/images/footer-banner.png" alt="Footer Banner" />
-		<div className="footer-container">
-			{ footer.columns.map(col => {
-				return <div className="footer-col" key={col._id}>
-					<BlockContent blocks={col.content}></BlockContent>
-				</div>
-			}) }
-		</div>
-	</section>
-}
+	return (
+		<section className='footer-wrapper'>
+			<img
+				className='footer-banner'
+				src='/images/footer-banner.png'
+				alt='Footer Banner'
+			/>
+			<div className='footer-container'>
+				{footer.columns.map((col) => {
+					return (
+						<div className='footer-col' key={col._id}>
+							<BlockContent blocks={col.content}></BlockContent>
+						</div>
+					);
+				})}
+			</div>
+		</section>
+	);
+}

src/components/Hero.tsx

@@ -1,28 +1,41 @@
-import React from 'react'
+import React from 'react';
 
 type HeroProps = {
-	imageURL?: string,
-	heading?: string
-}
+	imageURL?: string;
+	heading?: string;
+};
 
-export default function Hero({ imageURL = "/images/hero.png", heading = "TJHSST SGA"}: HeroProps) {
-	return <div className="hero relative">
-		<span style={{
-			display: "flex",
-			fontSize: "4rem",
-			fontWeight: "bold",
-			textShadow: "1px 1px rgba(48, 48, 48, 0.5)",
-			color: "white",
-			position: "absolute",
-			height: "100%",
-			width: "100%",
-			justifyContent: "center",
-			alignItems: "center",
-		}}>{ heading }</span>
-		<img src={imageURL} alt="Background" style={{
-			width: "100vw",
-			height: "60vh",
-			objectFit: "cover"
-		}}></img>
-	</div>
-}
+export default function Hero({
+	imageURL = '/images/hero.png',
+	heading = 'TJHSST SGA',
+}: HeroProps) {
+	return (
+		<div className='hero relative'>
+			<span
+				style={{
+					display: 'flex',
+					fontSize: '4rem',
+					fontWeight: 'bold',
+					textShadow: '1px 1px rgba(48, 48, 48, 0.5)',
+					color: 'white',
+					position: 'absolute',
+					height: '100%',
+					width: '100%',
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}
+			>
+				{heading}
+			</span>
+			<img
+				src={imageURL}
+				alt='Background'
+				style={{
+					width: '100vw',
+					height: '60vh',
+					objectFit: 'cover',
+				}}
+			/>
+		</div>
+	);
+}

src/components/InitiativeColumn.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import BlockContent from '@sanity/block-content-to-react';
 import imageUrl from '../imageUrl';
 
@@ -8,14 +8,13 @@ export default function InitiativeColumn({ name, thumbnail, content }) {
 		thumbUrl = imageUrl(thumbnail).url();
 	}
 
-	return <div className="lg:w-1/3 w-full lg:px-4 mb-4">
-		<h3 className="text-center font-bold text-3xl text-secondary mb-6">
-			{ name }
-		</h3>
-		{ thumbUrl ?
-			<img className="mb-4" src={thumbUrl} alt={name} />
-			: null
-		}
-		<BlockContent blocks={content} style={{fontSize: "1.5rem"}} />
-	</div>
+	return (
+		<div className='lg:w-1/3 w-full lg:px-4 mb-4'>
+			<h3 className='text-center font-bold text-3xl text-secondary mb-6'>
+				{name}
+			</h3>
+			{thumbUrl ? <img className='mb-4' src={thumbUrl} alt={name} /> : null}
+			<BlockContent blocks={content} style={{ fontSize: '1.5rem' }} />
+		</div>
+	);
 }

src/components/InitiativeList.tsx

@@ -1,17 +1,21 @@
-import React from 'react'
+import React from 'react';
 import useQuery from '../hooks/useInitiatives';
 import InitiativeColumn from './InitiativeColumn';
 
 export default function InitiativeList() {
-	let initiatives = useQuery<SGA.InitiativeDocument[]>('*[_type == "initiative"]');
-	
+	let initiatives = useQuery<SGA.InitiativeDocument[]>(
+		'*[_type == "initiative"]'
+	);
+
 	if (!initiatives) {
 		return null;
 	}
 
-	return <section className="container mx-auto px-8 my-8 flex flex-wrap">
-		{ initiatives.map(initiative => {
-			return <InitiativeColumn key={initiative._id} {...initiative} />
-		}) }
-	</section>
-}
+	return (
+		<section className='container mx-auto px-8 my-8 flex flex-wrap'>
+			{initiatives.map((initiative) => {
+				return <InitiativeColumn key={initiative._id} {...initiative} />;
+			})}
+		</section>
+	);
+}

src/components/InitiativeRow.tsx

@@ -1,27 +1,28 @@
-import React from 'react'
+import React from 'react';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
 
-export default function InitiativeRow({ initiative }: { initiative: SGA.InitiativeDocument }) {
+export default function InitiativeRow({
+	initiative,
+}: {
+	initiative: SGA.InitiativeDocument;
+}) {
 	let thumbUrl: string | null = null;
 	if (initiative.thumbnail) {
 		thumbUrl = imageUrl(initiative.thumbnail).url();
 	}
-	
+
 	return (
-		<div style={{display: "flex"}}>
-			<div style={{flex: 1, padding: "10px"}}>
-				{ thumbUrl ?
-					<img className="mb-4" src={thumbUrl} alt={initiative.name} />
-					: null
-				}
+		<div style={{ display: 'flex' }}>
+			<div style={{ flex: 1, padding: '10px' }}>
+				{thumbUrl ? (
+					<img className='mb-4' src={thumbUrl} alt={initiative.name} />
+				) : null}
 			</div>
-			<div style={{flex: 3, padding: "10px"}}>
-				<h3>
-					{ initiative.name }
-				</h3>
+			<div style={{ flex: 3, padding: '10px' }}>
+				<h3>{initiative.name}</h3>
 				<BlockContent blocks={initiative.content} />
 			</div>
 		</div>
 	);
-}
+}

src/components/Layout.tsx

@@ -5,25 +5,22 @@
  * See: https://www.gatsbyjs.com/docs/use-static-query/
  */
 
-import React from "react"
+import React from 'react';
 
 import Navbar from './Navbar';
 import Footer from './Footer';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <div className="bg-light text-dark">
-        <Navbar></Navbar>
+	return (
+		<>
+			<div className='bg-light text-dark'>
+				<Navbar></Navbar>
 
-        <main id="page">
-          { children }
-        </main>
-        <hr />
+				<main id='page'>{children}</main>
+				<hr />
 
-        <Footer />
-      </div>
-    </>
-  )
+				<Footer />
+			</div>
+		</>
+	);
 }
-

src/components/Mission.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import useMission from '../hooks/useMission';
 
 export default function Mission() {
@@ -7,23 +7,19 @@ export default function Mission() {
 		return null;
 	}
 
-	return <section className="text-center bg-secondary text-light">
-		<div className="container mx-auto px-8 py-8">
-			<h3 className="text-center font-bold text-3xl text-secondary mb-6">
-				Mission
-			</h3>
-			<p>
-				{ mission.mission }
-			</p>
-			<h3 className="text-center font-bold text-3xl text-secondary mb-6">
-				Vision
-			</h3>
-			<p>
-				{ mission.vision }
-			</p>
-			<blockquote>
-				{ mission.quote_text }
-			</blockquote>
-		</div>
-	</section>
-}
+	return (
+		<section className='text-center bg-secondary text-light'>
+			<div className='container mx-auto px-8 py-8'>
+				<h3 className='text-center font-bold text-3xl text-secondary mb-6'>
+					Mission
+				</h3>
+				<p>{mission.mission}</p>
+				<h3 className='text-center font-bold text-3xl text-secondary mb-6'>
+					Vision
+				</h3>
+				<p>{mission.vision}</p>
+				<blockquote>{mission.quote_text}</blockquote>
+			</div>
+		</section>
+	);
+}

src/components/Navbar.tsx

@@ -1,35 +1,43 @@
-import React from 'react'
-import "../css/navbar.css"
+import React from 'react';
+import '../css/navbar.css';
 import { Link } from 'react-router-dom';
 
 let pages = [
 	{
-		url: "/",
-		title: "Home"
+		url: '/',
+		title: 'Home',
 	},
 	{
-		url: "/news",
-		title: "News"
+		url: '/news',
+		title: 'News',
 	},
 	{
-		url: "/initiatives",
-		title: "Initiatives"
-	}
-]
+		url: '/initiatives',
+		title: 'Initiatives',
+	},
+];
 
 export default function Navbar() {
-	return <div className="nav">
-		<Link to="/">
-			<img src="/images/banner.png" alt="TJ SGA" style={{
-				height: "2rem",
-				alignSelf: "center",
-				margin: "1rem"
-			}}/>
-		</Link>
-		{ pages.map(page => {
-			return <Link key={page.url} className="nav-link" to={page.url}>
-				{ page.title }
+	return (
+		<div className='nav'>
+			<Link to='/'>
+				<img
+					src='/images/banner.png'
+					alt='TJ SGA'
+					style={{
+						height: '2rem',
+						alignSelf: 'center',
+						margin: '1rem',
+					}}
+				/>
 			</Link>
-		}) }
-	</div>
-}
+			{pages.map((page) => {
+				return (
+					<Link key={page.url} className='nav-link' to={page.url}>
+						{page.title}
+					</Link>
+				);
+			})}
+		</div>
+	);
+}

src/hooks/useFooter.tsx

@@ -1,20 +1,22 @@
-import React from 'react'
+import React from 'react';
 import sanity from '../sanity';
 import { SanityDocument } from '@sanity/client/sanityClient';
 
 interface FooterDocument {
 	columns: {
-		_id: string
-		content: any[]
-	}[]
+		_id: string;
+		content: any[];
+	}[];
 }
 
 export default function useFooter() {
-	let [footer, setFooter] = React.useState<SanityDocument<FooterDocument> | undefined>();
+	let [footer, setFooter] = React.useState<
+		SanityDocument<FooterDocument> | undefined
+	>();
 
 	React.useEffect(() => {
-		sanity.getDocument<FooterDocument>('footer').then(setFooter)
-	}, [])
+		sanity.getDocument<FooterDocument>('footer').then(setFooter);
+	}, []);
 
 	return footer;
 }

src/hooks/useInitiatives.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React from 'react';
 import sanity from '../sanity';
 
 export default function useQuery<T>(query: string, params?: any) {
 	let [result, setResult] = React.useState<T>();
 
-  React.useEffect(() => {
-    sanity.fetch(query, params).then(setResult);
-	}, [])
-	
+	React.useEffect(() => {
+		sanity.fetch(query, params).then(setResult);
+	}, [query, params]);
+
 	return result;
-}
+}

src/hooks/useMission.tsx

@@ -1,22 +1,24 @@
-import React from 'react'
+import React from 'react';
 import sanity from '../sanity';
 import { SanityDocument } from '@sanity/client/sanityClient';
 
 interface MissionDocument {
-	mission: string
-	vision: string
-	quote_text: string
-	quote_author: string
+	mission: string;
+	vision: string;
+	quote_text: string;
+	quote_author: string;
 }
 
 function useMission() {
-	let [mission, setMission] = React.useState<SanityDocument<MissionDocument> | undefined>();
+	let [mission, setMission] = React.useState<
+		SanityDocument<MissionDocument> | undefined
+	>();
 
 	React.useEffect(() => {
-		sanity.getDocument<MissionDocument>('mission').then(setMission)
-	}, [])
+		sanity.getDocument<MissionDocument>('mission').then(setMission);
+	}, []);
 
 	return mission;
 }
 
-export default useMission;
+export default useMission;

src/index.d.ts

@@ -1,16 +1,16 @@
 declare namespace SGA {
 	interface InitiativeDocument {
-		name: string,
-		thumbnail: {},
-		content: any[],
-		_id: string
+		name: string;
+		thumbnail: {};
+		content: any[];
+		_id: string;
 	}
 
 	interface ArticleDocument {
-		title: string,
-		thumbnail: {},
-		content: any[],
-		publish_date: string,
-		_id: string
+		title: string;
+		thumbnail: {};
+		content: any[];
+		publish_date: string;
+		_id: string;
 	}
-}
+}

src/index.tsx

@@ -5,10 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/404.tsx

@@ -1,10 +1,10 @@
-import React from "react"
+import React from 'react';
 
 const NotFoundPage = () => (
-  <div style={{textAlign: "center"}}>
-    <h1>404: Not Found</h1>
-    <p>This page wasn't found...</p>
-  </div>
-)
+	<div style={{ textAlign: 'center' }}>
+		<h1>404: Not Found</h1>
+		<p>This page wasn't found...</p>
+	</div>
+);
 
-export default NotFoundPage
+export default NotFoundPage;

src/pages/index.tsx

@@ -1,25 +1,25 @@
-import React from "react"
-import Hero from "../components/Hero"
+import React from 'react';
+import Hero from '../components/Hero';
 
-import InitiativeList from "../components/InitiativeList"
-import Mission from "../components/Mission"
+import InitiativeList from '../components/InitiativeList';
+import Mission from '../components/Mission';
 
 const IndexPage = () => {
-  return <>
-    {/* Hero image */}
-    <Hero></Hero>
+	return (
+		<>
+			{/* Hero image */}
+			<Hero></Hero>
 
-    {/* Initiatives section */}
-    <InitiativeList />
+			{/* Initiatives section */}
+			<InitiativeList />
 
-    {/* Mission */}
-    <Mission />
+			{/* Mission */}
+			<Mission />
 
-    {/* News articles section */}
-    <section className="container mx-auto px-8 my-8">
-      
-    </section>
-  </>
-}
+			{/* News articles section */}
+			<section className='container mx-auto px-8 my-8'></section>
+		</>
+	);
+};
 
-export default IndexPage
+export default IndexPage;

src/pages/initiatives.tsx

@@ -1,25 +1,25 @@
-import React from 'react'
+import React from 'react';
 import Hero from '../components/Hero';
 import InitiativeRow from '../components/InitiativeRow';
-import useQuery from '../hooks/useInitiatives'
+import useQuery from '../hooks/useInitiatives';
 
 export default function Initiatives() {
-	let initiatives = useQuery<SGA.InitiativeDocument[]>('*[_type == "initiative"]');
-	
+	let initiatives = useQuery<SGA.InitiativeDocument[]>(
+		'*[_type == "initiative"]'
+	);
+
 	if (!initiatives) {
 		return null;
 	}
 
 	return (
 		<>
-			<Hero heading="Initiatives"></Hero>
-			<div style={{display: "flex", flexDirection: "column"}}>
-				{
-					initiatives.map(initiative => {
-						return <InitiativeRow initiative={initiative} />
-					})
-				}
+			<Hero heading='Initiatives'></Hero>
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				{initiatives.map((initiative) => {
+					return <InitiativeRow initiative={initiative} />;
+				})}
 			</div>
 		</>
-	)
-}
+	);
+}

src/pages/news.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
-import ArticleList from '../components/ArticleList'
-import Hero from '../components/Hero'
+import React from 'react';
+import ArticleList from '../components/ArticleList';
+import Hero from '../components/Hero';
 
 export default function News() {
-	return (<>
-		<Hero heading="News"></Hero>
-		<ArticleList></ArticleList>
-	</>)
-}
+	return (
+		<>
+			<Hero heading='News'></Hero>
+			<ArticleList></ArticleList>
+		</>
+	);
+}

src/pages/newsArticle.tsx

@@ -1,17 +1,19 @@
-import React from 'react'
-import { Link, useParams } from 'react-router-dom'
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
 import Hero from '../components/Hero';
 import useQuery from '../hooks/useInitiatives';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
 
 export default function NewsArticle() {
-	let { articleId } = useParams<{articleId: string}>();
-	let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {articleId});
+	let { articleId } = useParams<{ articleId: string }>();
+	let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {
+		articleId,
+	});
 	if (!article) {
 		return null;
 	}
-	
+
 	let thumbUrl: string | undefined = undefined;
 	if (article.thumbnail) {
 		thumbUrl = imageUrl(article.thumbnail).url() || undefined;
@@ -22,14 +24,14 @@ export default function NewsArticle() {
 	return (
 		<>
 			<Hero heading={article.title} imageURL={thumbUrl} />
-			<div style={{maxWidth: "640px"}} className="mx-auto my-8">
-				<i className="text-sm">Published: {article.publish_date}</i>
-				<br/>
-				<Link to="/news">Go to all news articles</Link>
-				<br/>
+			<div style={{ maxWidth: '640px' }} className='mx-auto my-8'>
+				<i className='text-sm'>Published: {article.publish_date}</i>
+				<br />
+				<Link to='/news'>Go to all news articles</Link>
+				<br />
 				<BlockContent blocks={article.content}></BlockContent>
-				<br/>
+				<br />
 			</div>
 		</>
-	)
-}
+	);
+}

src/sanity.js

@@ -1,9 +1,9 @@
-import sanityClient from '@sanity/client'
+import sanityClient from '@sanity/client';
 
 const sanity = sanityClient({
-  projectId: "yi263kzm",
-  dataset: "production",
-  useCdn: true
+	projectId: 'yi263kzm',
+	dataset: 'production',
+	useCdn: true,
 });
 
-export default sanity;
+export default sanity;

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noImplicitAny": false
   },
   "include": [