Better spacing, external links open in new windows

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>

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>
 					);

src/imageUrl.js

@@ -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);
-}

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);
+}