make excomm photos uniform width and height

src/components/ArticleRow.tsx

@@ -1,7 +1,9 @@
-import React, { DetailedHTMLProps } from 'react';
+import React from 'react';
 import imageUrl from '../lib/imageUrl';
 import '../css/article.css';
 import ClickableLink from './ClickableLink';
+import FlexRow from './FlexRow';
+import FlexRowSection from './FlexRowSection';
 
 export default function ArticleRow({
 	article,
@@ -15,18 +17,16 @@ export default function ArticleRow({
 		);
 	}
 
-	const slug = (s: string) => {
-		return s.toLowerCase().replaceAll(' ', '-');
-	};
+	const slug = (s: string) => s.toLowerCase().replace(/ /g, '-');
+	const articleUrl = '/news/' + article._id + '/' + slug(article.title);
 
 	return (
-		<div className='d-flex my-4'>
-			<div className='article-row-thumbnail'>{thumbnail}</div>
-			<div className='article-row-content'>
-				<ClickableLink
-					href={'/news/' + article._id + '/' + slug(article.title)}
-					target='_blank'
-				>
+		<FlexRow marginTop='4em' marginBottom='4em'>
+			<FlexRowSection flex={1} paddingY='0.5em' paddingRight='1em'>
+				{thumbnail}
+			</FlexRowSection>
+			<FlexRowSection flex={3} paddingY='0.5em' paddingRight='1em'>
+				<ClickableLink href={articleUrl} target='_blank'>
 					<h3 style={{ margin: '0px' }}>{article.title}</h3>
 				</ClickableLink>
 
@@ -37,7 +37,7 @@ export default function ArticleRow({
 				<br />
 
 				<p>{article.summary}</p>
-			</div>
-		</div>
+			</FlexRowSection>
+		</FlexRow>
 	);
 }

src/components/ConstrainedImage.tsx

@@ -0,0 +1,35 @@
+import { CSSProperties } from 'react';
+
+export default function ConstrainedImage({
+	alt,
+	src,
+	style,
+}: {
+	alt: string;
+	src: string;
+	style?: CSSProperties;
+}) {
+	return (
+		<div
+			style={{
+				// required: center the image with flexbox
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				overflow: 'hidden',
+				...style,
+			}}
+		>
+			<img
+				src={src}
+				alt={alt}
+				style={{
+					minWidth: '100%',
+					minHeight: '100%',
+					flexShrink: 0,
+					objectFit: 'cover',
+				}}
+			/>
+		</div>
+	);
+}

src/components/FlexRow.tsx

@@ -0,0 +1,28 @@
+export default function FlexRow({
+	paddingLeft,
+	paddingRight,
+	marginTop,
+	marginBottom,
+	children,
+}: {
+	paddingLeft?: string;
+	paddingRight?: string;
+	marginTop?: string;
+	marginBottom?: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				paddingLeft,
+				paddingRight,
+				marginTop,
+				marginBottom,
+			}}
+		>
+			{children}
+		</div>
+	);
+}

src/components/FlexRowSection.tsx

@@ -0,0 +1,31 @@
+export default function FlexRowSection({
+	children,
+	flex,
+	paddingLeft,
+	paddingRight,
+	paddingTop,
+	paddingBottom,
+	paddingX,
+	paddingY,
+}: {
+	children: React.ReactNode;
+	flex: number;
+	paddingLeft?: string;
+	paddingRight?: string;
+	paddingTop?: string;
+	paddingBottom?: string;
+	paddingX?: string;
+	paddingY?: string;
+}) {
+	if (paddingX != null) {
+		paddingLeft = paddingRight = paddingX;
+	}
+	if (paddingY != null) {
+		paddingTop = paddingBottom = paddingY;
+	}
+	return (
+		<div style={{ flex, paddingLeft, paddingRight, paddingTop, paddingBottom }}>
+			{children}
+		</div>
+	);
+}

src/components/MemberRow.tsx

@@ -1,6 +1,8 @@
 import imageUrl from '../lib/imageUrl';
 import '../css/article.css';
 import RowItemHeader from './RowItemHeader';
+import ConstrainedImage from './ConstrainedImage';
+import RowItemSubheader from './RowItemSubheader';
 
 export default function MemberRow({
 	member,
@@ -9,29 +11,35 @@ export default function MemberRow({
 	member: SGA.MemberDocument;
 	limitPhotoHeight?: boolean;
 }) {
-	let thumbnail: React.ReactElement | null = null;
-	if (member.profile_photo) {
-		thumbnail = (
-			<img src={imageUrl(member.profile_photo).url()} alt={member.name} />
-		);
-	}
+	let thumbnail = member.profile_photo
+		? imageUrl(member.profile_photo).url()
+		: undefined;
 
 	return (
 		<div className='d-flex my-4'>
-			<div
-				className={
-					limitPhotoHeight
-						? 'article-row-thumbnail-height-constrained'
-						: 'article-row-thumbnail'
-				}
-			>
-				{thumbnail}
+			<div style={{ flex: 1, textAlign: 'right' }}>
+				{thumbnail ? (
+					limitPhotoHeight ? (
+						<ConstrainedImage
+							src={thumbnail}
+							alt={member.name}
+							style={{
+								marginLeft: 'auto',
+								marginRight: '2em',
+								width: '10em',
+								height: '15em',
+							}}
+						/>
+					) : (
+						<img src={thumbnail} alt={member.name} />
+					)
+				) : null}
 			</div>
-			<div className='article-row-content'>
+			<div style={{ flex: 3 }}>
 				<RowItemHeader>{member.name}</RowItemHeader>
-				<i>
+				<RowItemSubheader>
 					{member.role}, {member.year}
-				</i>
+				</RowItemSubheader>
 				<br />
 				<p>{member.bio}</p>
 			</div>

src/components/Mission.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import '../css/mission.css';
 import useMission from '../hooks/useMission';
+import BlueButtonLink from './BlueButtonLink';
 
 export default function Mission() {
 	let mission = useMission();
@@ -13,9 +13,7 @@ export default function Mission() {
 		<section className='text-center'>
 			<div className='mission-box'>
 				<p className='mission-landing-page-text'>“{mission.vision}”</p>
-				<Link to='/mission' className='blue-button'>
-					Our Mission
-				</Link>
+				<BlueButtonLink href='/mission'>Our Mission</BlueButtonLink>
 			</div>
 		</section>
 	);

src/components/RowItemSubheader.tsx

@@ -0,0 +1,3 @@
+export default function RowItemSubheader({ children }) {
+	return <i>{children}</i>;
+}

src/components/Segment.tsx

@@ -15,14 +15,14 @@ function SegmentHeader({ children }: { children: React.ReactNode }) {
 	);
 }
 
-export default function Segment({ title, content, imageURL, infoURL }) {
+export default function Segment({ title, content, imageUrl, infoUrl }) {
 	return (
 		<div className='segment'>
 			<SegmentHeader>{title}</SegmentHeader>
-			<img src={imageURL} alt={title} />
+			<img src={imageUrl} alt={title} />
 			<p className='strong-paragraph'>{content}</p>
 
-			<BlueButtonLink href={infoURL}>MORE INFO</BlueButtonLink>
+			<BlueButtonLink href={infoUrl}>MORE INFO</BlueButtonLink>
 		</div>
 	);
 }

src/components/SegmentGroup.tsx

@@ -1,26 +1,35 @@
 import Segment from './Segment';
 
+export const segments = [
+	{
+		imageUrl: '/images/segments/news-and-happenings.jpg',
+		infoUrl: '/news',
+		title: 'News and Happenings',
+		content:
+			'Read about SGA initiatives, goals, and progress from SGA officers, as well as from other student leaders, students, and student organizations.',
+	},
+	{
+		imageUrl: '/images/segments/who-we-are.jpg',
+		title: 'Who We Are',
+		infoUrl: '/officers',
+		content:
+			"Learn about your representatives, and how they're working to advance the common agenda that SGA has set to improve your experience at TJ.",
+	},
+	{
+		imageUrl: '/images/segments/get-involved.jpg',
+		infoUrl: '/involved',
+		title: 'Get Involved',
+		content:
+			'Any questions or concerns? Have an idea for how SGA could be doing more to advocate for students? Want to get involved? Contact Us!',
+	},
+];
+
 export default function InfoColumnGroup() {
 	return (
 		<div className='d-flex'>
-			<Segment
-				imageURL='/images/segments/news-and-happenings.jpg'
-				title='News and Happenings'
-				content={`Read about SGA initiatives, goals, and progress from SGA officers, as well as from other student leaders, students, and student organizations.`}
-				infoURL='/news'
-			/>
-			<Segment
-				imageURL='/images/segments/who-we-are.jpg'
-				title='Who We Are'
-				content={`Learn about your representatives, and how they're working to advance the common agenda that SGA has set to improve your experience at TJ.`}
-				infoURL='/officers'
-			/>
-			<Segment
-				imageURL='/images/segments/get-involved.jpg'
-				title='Get Involved'
-				content={`Any questions or concerns? Have an idea for how SGA could be doing more to advocate for students? Want to get involved? Contact Us!`}
-				infoURL='/involved'
-			/>
+			{segments.map((segment) => (
+				<Segment key={segment.title} {...segment} />
+			))}
 		</div>
 	);
 }

src/css/article.css

@@ -12,8 +12,13 @@
   text-align: center;
 }
 
+.article-row-thumbnail-height-constrained {
+  width: 100px;
+  height: 200px;
+}
+
 .article-row-thumbnail-height-constrained>img {
-  max-height: 200px;
+  object-fit: cover;
 }
 
 .article-row-content {

src/pages/classcouncil.tsx

@@ -24,8 +24,6 @@ export default function ClassCouncil() {
 		return null;
 	}
 
-	console.log(members);
-
 	let years: [string, SGA.MemberDocument[]][] = [];
 	let currentYearMembers: SGA.MemberDocument[] = [];
 	let currentYear = '';

src/pages/index.tsx

@@ -6,16 +6,10 @@ import SegmentGroup from '../components/SegmentGroup';
 export default function IndexPage() {
 	return (
 		<>
-			{/* Hero image */}
 			<Hero />
-
 			<main>
-				{/* Info columns */}
 				<SegmentGroup />
-
 				<hr />
-
-				{/* Mission */}
 				<NewsAndMission />
 			</main>
 		</>

src/pages/mission.tsx

@@ -24,24 +24,29 @@ export default function Mission() {
 	return (
 		<>
 			<Hero heading='Mission and History' />
-			{mission ? (
-				<main>
-					<MissionQuote
-						author={mission.quote_author}
-						text={mission.quote_text}
-					/>
+			<main>
+				{mission && (
+					<>
+						<MissionQuote
+							author={mission.quote_author}
+							text={mission.quote_text}
+						/>
 
-					<ParagraphWithHeader title='Vision' body={mission.vision} />
-					<ParagraphWithHeader title='Mission' body={mission.mission} />
-					<ParagraphWithHeader title='Inspiration' body={mission.inspiration} />
+						<ParagraphWithHeader title='Vision' body={mission.vision} />
+						<ParagraphWithHeader title='Mission' body={mission.mission} />
+						<ParagraphWithHeader
+							title='Inspiration'
+							body={mission.inspiration}
+						/>
+					</>
+				)}
 
-					<Centered>
-						<BlueButtonLink href={SGA_PREVIOUS_LEADERSHIP_URL}>
-							Previous Leadership
-						</BlueButtonLink>
-					</Centered>
-				</main>
-			) : null}
+				<Centered>
+					<BlueButtonLink href={SGA_PREVIOUS_LEADERSHIP_URL}>
+						Previous Leadership
+					</BlueButtonLink>
+				</Centered>
+			</main>
 		</>
 	);
 }

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+	if (onPerfEntry && onPerfEntry instanceof Function) {
+		import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+			getCLS(onPerfEntry);
+			getFID(onPerfEntry);
+			getFCP(onPerfEntry);
+			getLCP(onPerfEntry);
+			getTTFB(onPerfEntry);
+		});
+	}
+};
+
+export default reportWebVitals;