Made articles look nicer

src/App.css

@@ -27,6 +27,10 @@
 	text-align: center;
 }
 
+.text-sm {
+	font-size: 0.75rem;
+}
+
 .row {
 	display: flex;
 	flex-direction: row;
@@ -56,3 +60,8 @@
 	color: #38A3BD;
 	display: inline-block;
 }
+
+.clickable-link {
+	text-decoration: underline;
+	color: #38A3BD;
+}

src/App.tsx

@@ -9,7 +9,7 @@ import initiatives from './pages/initiatives';
 import involved from './pages/involved';
 import mission from './pages/mission';
 import news from './pages/news';
-import newsArticle from './pages/newsArticle';
+import newsarticle from './pages/newsarticle';
 import notFound from './pages/404';
 import officers from './pages/officers';
 import committee from './pages/committee';
@@ -22,7 +22,7 @@ export default function App() {
 				<Switch>
 					<Route path='/initiatives' exact component={initiatives} />
 					<Route path='/involved' exact component={involved} />
-					<Route path='/news/:articleId' component={newsArticle} />
+					<Route path='/news/:articleId' component={newsarticle} />
 					<Route path='/news' exact component={news} />
 					<Route path='/mission' exact component={mission} />
 					<Route path='/officers' exact component={officers} />

src/components/ArticleRow.tsx

@@ -25,7 +25,7 @@ export default function ArticleRow({
 				) : null}
 			</div>
 			<div className='article-row-content'>
-				<Link to={'/news/' + article._id + '/' + slug(article.title)}>
+				<Link to={'/news/' + article._id + '/' + slug(article.title)} className="clickable-link">
 					<h3>{article.title}</h3>
 				</Link>
 				<i className='text-sm'>

src/css/article.css

@@ -22,3 +22,9 @@
   flex: 3;
   padding: 10px;
 }
+
+.article-paragraphs {
+	font-size: 22px;
+	line-height: 33px;
+	font-weight: 400;
+}

src/pages/newsArticle.tsx

@@ -4,34 +4,45 @@ import Hero from '../components/Hero';
 import useQuery from '../hooks/useQuery';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
+import '../css/article.css';
 
 export default function NewsArticle() {
 	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) {
+	if (article?.thumbnail) {
 		thumbUrl = imageUrl(article.thumbnail).url() || undefined;
+	} else {
+		thumbUrl = '/images/hero.png';
 	}
 
 	return (
 		<>
-			<Hero heading={article.title} imageURL={thumbUrl} />
+			<Hero heading='News' imageURL={thumbUrl} />
-			<div style={{ maxWidth: '640px' }} className='mx-auto mt-4 mb-8'>
+			<Link to='/news' className='clickable-link'>
-				<i className='text-sm'>
+				Go to all news articles
-					{article.publish_date} - {article.author || 'No author'}
+			</Link>
-				</i>
 			<br />
-				<Link to='/news'>Go to all news articles</Link>
+			{article ? (
+				<div style={{ maxWidth: '640px', margin: '2rem auto' }}>
+					<h1>{article.title}</h1>
+					<i className='text-sm'>{article.publish_date}</i>
 					<br />
-				<BlockContent blocks={article.content}></BlockContent>
+					<i>{article.author || 'No author'}</i>
 					<br />
+					{/* Wrap the BlockContent in a div because it expands to <></> */}
+					<div className='article-paragraphs'>
+						<BlockContent blocks={article.content} />
 					</div>
+					<br />
+					<Link to='/news' className='clickable-link'>
+						Go to all news articles
+					</Link>
+				</div>
+			) : null}
 		</>
 	);
 }