instagram embed + fixed newsletter links

package.json

@@ -13,6 +13,7 @@
     "iframe-resizer-react": "^1.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-instagram-feed": "^0.1.3-alpha",
     "react-router-dom": "6",
     "react-scripts": "^5.0.1",
     "typescript": "^4.1.2",

src/components/ArticleRow.tsx

@@ -21,7 +21,7 @@ export default function ArticleRow({
 	}
 
 	const slug = (s: string) => s.toLowerCase().replace(/ /g, '-');
-	const articleUrl = '/news/' + article._id + '/' + slug(article.title);
+	const articleUrl = '/news/' + article._id;// + '/' + slug(article.title);
 
 	return (
 		<FlexRow marginTop='4em' marginBottom='4em'>

src/components/RecentNews.tsx

@@ -1,24 +1,135 @@
-import React from 'react';
+
+
+
+
+// import React from 'react';
+// import { Link } from 'react-router-dom';
+// import useQuery from '../hooks/useQuery';
+// import ArticleRow from './ArticleRow';
+// import PrimaryHeader from './PrimaryHeader';
+
+// export default function RecentNews() {
+// 	const articles =
+// 		useQuery<SGA.ArticleDocument[]>(
+// 			`*[_type == 'article'] | order (publish_date desc, title) [0...3]`
+// 		) ?? [];
+
+// 	const articleList = articles.map((article) => (
+// 		<ArticleRow article={article} key={article._id} />
+// 	));
+
+// 	return (
+// 		<div>
+// 			<PrimaryHeader>Recent News</PrimaryHeader>
+
+// 			{articleList}
+			
+// 			<Link to='/news'>All News</Link>
+// 		</div>
+// 	);
+// }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import useQuery from '../hooks/useQuery';
 import ArticleRow from './ArticleRow';
 import PrimaryHeader from './PrimaryHeader';
 
+import '../css/RecentNews.css';
+
 export default function RecentNews() {
-	const articles =
+    useEffect(() => {
-		useQuery<SGA.ArticleDocument[]>(
+        // Load Instagram embed script
-			`*[_type == 'article'] | order (publish_date desc, title) [0...3]`
+        const script = document.createElement('script');
-		) ?? [];
+        script.src = '//www.instagram.com/embed.js';
+        script.async = true;
+        document.body.appendChild(script);
 
-	const articleList = articles.map((article) => (
+        return () => {
-		<ArticleRow article={article} key={article._id} />
+            // Cleanup script when component unmounts
-	));
+            document.body.removeChild(script);
+        };
+    }, []);
 
-	return (
+    const articles =
-		<div>
+        useQuery<SGA.ArticleDocument[]>(
-			<PrimaryHeader>Recent News</PrimaryHeader>
+            `*[_type == 'article'] | order (publish_date desc, title) [0...3]`
-			{articleList}
+        ) ?? [];
-			<Link to='/news'>All News</Link>
+
-		</div>
+    const articleList = articles.map((article) => (
-	);
+        <ArticleRow article={article} key={article._id} />
-}
+    ));
+
+    return (
+        <div>
+
+			{/* Instagram Embed */}
+            <PrimaryHeader>Recent News</PrimaryHeader>
+            <div className="instagram-container">
+                <blockquote 
+                    className="instagram-media" 
+                    data-instgrm-permalink="https://www.instagram.com/tj.sga/?utm_source=ig_embed&amp;utm_campaign=loading"
+                    data-instgrm-version="14"
+                    style={{
+                        background: '#FFF',
+                        border: '0',
+                        borderRadius: '3px',
+                        boxShadow: '0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15)',
+                        margin: '1px',
+                        maxWidth: '700px',
+                        minWidth: '500px',
+                        padding: '0',
+                        width: 'calc(100% - 2px)'
+                    }}
+                >
+                </blockquote>
+			</div>
+
+
+
+
+			{/* spacer */}
+			<div><br></br></div>
+			<div><br></br></div>
+
+
+
+
+
+			{/* newsletters */}
+			<PrimaryHeader>Newsletters</PrimaryHeader>
+            {articleList}
+            <Link to='/news'>View All Newsletters</Link>
+        </div>
+    );
+}

src/css/RecentNews.css

@@ -0,0 +1,10 @@
+.instagram-container {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    width: 100%;
+}
+
+.instagram-container .instagram-media {
+    margin: 0 auto !important;
+}

yarn.lock

@@ -5481,6 +5481,13 @@ immer@^9.0.7:
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
+immutability-helper@^2.6.6:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.9.1.tgz#71c423ba387e67b6c6ceba0650572f2a2a6727df"
+  integrity sha512-r/RmRG8xO06s/k+PIaif2r5rGc3j4Yhc01jSBfwPCXDLYZwp/yxralI37Df1mwmuzcCsen/E/ITKcTEvc1PQmQ==
+  dependencies:
+    invariant "^2.2.0"
+
 import-fresh@^3.1.0, import-fresh@^3.2.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
@@ -5552,6 +5559,13 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
+invariant@^2.2.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -6749,7 +6763,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8090,7 +8104,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8226,6 +8240,16 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.1.0.tgz#22b86256beb1c5856f08a9a228adb8121dd985f2"
   integrity sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==
 
+react-instagram-feed@^0.1.3-alpha:
+  version "0.1.3-alpha"
+  resolved "https://registry.yarnpkg.com/react-instagram-feed/-/react-instagram-feed-0.1.3-alpha.tgz#320737d919f3509e54ea2df5ba2280483bf27fa9"
+  integrity sha512-c+1rPLNv/IugtGrKtbqZG8vxctgomdiTUhHljt+LiuSGumXh2dhTD3L0DqB7jiQi0s7vGpQ/BjpZN5rXUhvPVg==
+  dependencies:
+    immutability-helper "^2.6.6"
+    lodash "^4.17.5"
+    prop-types "^15.6.1"
+    react "^16.3.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8316,6 +8340,15 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react@^16.3.1:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"