From 99b29c66c3c298793f5c291e951990880b025f98 Mon Sep 17 00:00:00 2001 From: ShabMan01 <125848523+ShabMan01@users.noreply.github.com> Date: Fri, 14 Mar 2025 18:04:43 -0400 Subject: [PATCH] instagram embed + fixed newsletter links --- package.json | 1 + src/components/ArticleRow.tsx | 2 +- src/components/RecentNews.tsx | 143 ++++++++++++++++++++++++++++++---- src/css/RecentNews.css | 10 +++ yarn.lock | 37 ++++++++- 5 files changed, 174 insertions(+), 19 deletions(-) create mode 100644 src/css/RecentNews.css diff --git a/package.json b/package.json index b9910ad..7538321 100644 --- a/package.json +++ b/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", diff --git a/src/components/ArticleRow.tsx b/src/components/ArticleRow.tsx index 3a8b3a1..ecf9fdf 100644 --- a/src/components/ArticleRow.tsx +++ b/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 ( diff --git a/src/components/RecentNews.tsx b/src/components/RecentNews.tsx index 136b325..9a8d87f 100644 --- a/src/components/RecentNews.tsx +++ b/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( +// `*[_type == 'article'] | order (publish_date desc, title) [0...3]` +// ) ?? []; + +// const articleList = articles.map((article) => ( +// +// )); + +// return ( +//
+// Recent News + +// {articleList} + +// All News +//
+// ); +// } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +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 = - useQuery( - `*[_type == 'article'] | order (publish_date desc, title) [0...3]` - ) ?? []; + useEffect(() => { + // Load Instagram embed script + 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 () => { + // Cleanup script when component unmounts + document.body.removeChild(script); + }; + }, []); - return ( -
- Recent News - {articleList} - All News -
- ); -} + const articles = + useQuery( + `*[_type == 'article'] | order (publish_date desc, title) [0...3]` + ) ?? []; + + const articleList = articles.map((article) => ( + + )); + + return ( +
+ + {/* Instagram Embed */} + Recent News +
+
+
+
+ + + + + {/* spacer */} +


+


+ + + + + + {/* newsletters */} + Newsletters + {articleList} + View All Newsletters +
+ ); +} \ No newline at end of file diff --git a/src/css/RecentNews.css b/src/css/RecentNews.css new file mode 100644 index 0000000..5f1a90f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b470c35..68ffe44 100644 --- a/yarn.lock +++ b/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"