From 22d038e17e41862499a2b54ec12730bb16956cce Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 16 Dec 2020 21:55:00 -0500
Subject: [PATCH] Better spacing, external links open in new windows

---
 src/components/ArticleRow.tsx |  3 +-
 src/components/Navbar.tsx     | 53 +++++++++++++++++++++++++++++------
 src/imageUrl.js               |  7 -----
 src/imageUrl.ts               | 12 ++++++++
 4 files changed, 58 insertions(+), 17 deletions(-)
 delete mode 100644 src/imageUrl.js
 create mode 100644 src/imageUrl.ts

diff --git a/src/components/ArticleRow.tsx b/src/components/ArticleRow.tsx
index 5091645..0f6ef20 100644
--- a/src/components/ArticleRow.tsx
+++ b/src/components/ArticleRow.tsx
@@ -18,7 +18,7 @@ export default function ArticleRow({
 	};
 
 	return (
-		<div className='d-flex'>
+		<div className='d-flex my-4'>
 			<div className='article-row-thumbnail'>
 				{thumbUrl ? <img src={thumbUrl} alt={article.title} /> : null}
 			</div>
@@ -26,6 +26,7 @@ export default function ArticleRow({
 				<Link
 					to={'/news/' + article._id + '/' + slug(article.title)}
 					className='clickable-link'
+					target='_blank'
 				>
 					<h3 style={{ margin: '0px' }}>{article.title}</h3>
 				</Link>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0ff4100..ff9b211 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -17,8 +17,18 @@ let pages = [
 		],
 	},
 	{
-		url: '/news',
+		url: '#',
 		title: 'News',
+		items: [
+			{
+				url: '/news',
+				title: 'News',
+			},
+			{
+				url: '#',
+				title: 'Newsletter (In development!)',
+			},
+		],
 	},
 	{
 		url: '/initiatives',
@@ -72,14 +82,39 @@ export default function Navbar() {
 							</Link>
 							<div className='submenu-content'>
 								{/* Most of these are external so we use <a> tags instead of <Link> */}
-								{page.items?.map((item) => (
-									<>
-										<a key={item.url} className='submenu-link' href={item.url}>
-											{item.title}
-										</a>
-										<br />
-									</>
-								))}
+								{page.items?.map((item) => {
+									let isExternal = /https?:\/\//.test(item.url);
+									if (isExternal) {
+										// Treat external links differently; add 'target=_blank' so they
+										// open in a new window
+										return (
+											<>
+												<a
+													key={item.url}
+													className='submenu-link'
+													href={item.url}
+													target='_blank'
+													rel='noreferrer'
+												>
+													{item.title}
+												</a>
+												<br />
+											</>
+										);
+									}
+									return (
+										<>
+											<Link
+												key={item.url}
+												className='submenu-link'
+												to={item.url}
+											>
+												{item.title}
+											</Link>
+											<br />
+										</>
+									);
+								})}
 							</div>
 						</div>
 					);
diff --git a/src/imageUrl.js b/src/imageUrl.js
deleted file mode 100644
index 92b3160..0000000
--- a/src/imageUrl.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import imageUrlBuilder from '@sanity/image-url';
-import sanity from './sanity';
-
-const builder = imageUrlBuilder(sanity);
-export default function imageUrl(source) {
-	return builder.image(source);
-}
diff --git a/src/imageUrl.ts b/src/imageUrl.ts
new file mode 100644
index 0000000..4b5828e
--- /dev/null
+++ b/src/imageUrl.ts
@@ -0,0 +1,12 @@
+import { default as ImageUrlBuilder } from '@sanity/image-url';
+import sanity from './sanity';
+
+const builder = ImageUrlBuilder(sanity);
+
+/**
+ * Build a URL for an image based on specified attributes
+ * @param {SanityImageSource} source The source image
+ */
+export default function imageUrl(source: any): any {
+	return builder.image(source);
+}