rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-07 05:30:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

instagram embed + fixed newsletter links

Browse Source
This commit is contained in:
ShabMan01 2025-03-14 18:04:43 -04:00
parent b69a49b3ae
commit 99b29c66c3
5 changed files with 174 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

2
src/components/ArticleRow.tsx
View File

@ -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'>

143
src/components/RecentNews.tsx
View File

@ -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 =
useQuery<SGA.ArticleDocument[]>(
`*[_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) => (
<ArticleRow article={article} key={article._id} />
));
return () => {
// Cleanup script when component unmounts
document.body.removeChild(script);
};
}, []);
return (
<div>
<PrimaryHeader>Recent News</PrimaryHeader>
{articleList}
<Link to='/news'>All News</Link>
</div>
);
}
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>
{/* 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>
);
}

10
src/css/RecentNews.css Normal file
View File

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

37
yarn.lock
View File

@ -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"