Skip to content

Add support for special projects #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rich0011 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add support for special projects #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63b1aec
Add support for special projects
rich0011 Jul 2, 2025
4c2556e
Update for Special Page posts and 'More' link
rich0011 Jul 18, 2025
fce2de2
Remove console debug
rich0011 Jul 18, 2025
8ff1943
Update More articles grid
rich0011 Jul 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 33 additions & 30 deletions src/components/SectionRecentArticles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const useStyles = makeStyles(() => ({
}));

const SectionRecentArticles = (props) => {
const { articles } = props;
const { articles, viewMore } = props;
const classes = useStyles();

return (
Expand All @@ -93,40 +93,42 @@ const SectionRecentArticles = (props) => {
Latest
</Typography>
</Grid>
<Grid item>
<Link
href="/search"
sx={{
height: 24,
textDecoration: "none",
width: 162,
"&:hover": {
textDecoration: "underline",
},
}}
>
<Typography
component="div"
variant="h5"
{viewMore !== false && (
<Grid item>
<Link
href="/search"
sx={{
backgroundColor: "#FFF",
borderRadius: "4px",
color: "#FF0033",
fontWeight: 500,
paddingX: "10px",
paddingY: "6px",
boxShadow: "0px 2px 2px 0px #0000001F",
"&:active, & :focus, &:hover": {
color: "#FF0033",
height: 24,
textDecoration: "none",
width: 162,
"&:hover": {
textDecoration: "underline",
},
marginBottom: "7px",
}}
>
View more
</Typography>
</Link>
</Grid>
<Typography
component="div"
variant="h5"
sx={{
backgroundColor: "#FFF",
borderRadius: "4px",
color: "#FF0033",
fontWeight: 500,
paddingX: "10px",
paddingY: "6px",
boxShadow: "0px 2px 2px 0px #0000001F",
"&:active, & :focus, &:hover": {
color: "#FF0033",
textDecoration: "underline",
},
marginBottom: "7px",
}}
>
View more
</Typography>
</Link>
</Grid>
)}
</Grid>
</Grid>
<Grid container item flexDirection="column">
Expand Down Expand Up @@ -184,6 +186,7 @@ const SectionRecentArticles = (props) => {

SectionRecentArticles.propTypes = {
articles: PropTypes.array,
viewMore: PropTypes.boolean,
};

export default SectionRecentArticles;
197 changes: 197 additions & 0 deletions src/components/SpecialProjects/MoreArticles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
// base imports
import React from "react";
import PropTypes from "prop-types";
import { DateTime } from "luxon";

// Material UI imports
import { makeStyles } from "@mui/styles";
import Grid from "@mui/material/Grid";
import Link from "@mui/material/Link";
import Typography from "@mui/material/Typography";
import Badge from "../Badge";

const useStyles = makeStyles((theme) => ({
article: {
paddingTop: "0!important",
marginBottom: 20,
},
lastArticle: {
marginBottom: 20,
},
articleTitle: {
color: "#000 !important",
fontSize: "1em",
fontWeight: "700",
"&:hover": {
color: "#225C9D !important",
textDecoration: "none",
},
},
articlePublication: {
color: "rgba(0, 0, 0, 0.6)",
marginTop: 25,
marginBottom: 8,
position: "relative",
},
articleGrid: {
borderBottom: "1px solid",
borderBottomColor: "#DCDCDC",
paddingBottom: 20,
flexDirection: "column",
flexWrap: "nowrap",
columnGap: "16px",
rowGap: "8px",
[theme.breakpoints.down("md")]: {
flexDirection: "column",
},
},
em: {
fontSize: "0.81em",
fontStyle: "italic",
},
authors: {
color: "rgba(0, 0, 0, 0.6)",
fontFamily: "Lexend",
fontSize: "10px",
fontWeight: "700",
textTransform: "uppercase",
},
grid: {
marginTop: 20,
marginBottom: 60,
},
gridTitle: {
borderBottom: "1px solid #000",
marginBottom: 32,
width: "100%",
},
link: {
textDecoration: "none !important",
},
more: {
textDecoration: "none",
width: 200,
"&:active, & :focus, &:hover": {
color: "#FF0033",
textDecoration: "underline",
},
},
moreText: {
backgroundColor: "#FFE5EA",
borderRadius: 2,
color: "#FF0033",
fontWeight: 500,
padding: 6,
},
}));

function MoreArticles({ articles, topics }) {
const classes = useStyles();

const drawArticle = (article) => {
return (
<Grid key={article._id} item className={classes.article}>
<Grid container className={classes.articleGrid}>
<Grid item>
{article.badge && <Badge badge={article.badge} variant={"link"} />}
<Link href={`/${article.slug.current}`} className={classes.link}>
<Typography
component="div"
variant="body1"
className={classes.articleTitle}
>
{article.title}
</Typography>
</Link>
<Typography
component="span"
variant="body2"
sx={{
color: "#a7a7a7",
fontSize: 14,
fontWeight: 400,
marginTop: "8px",
textTransform: "uppercase",
lineHeight: 1.75,
display: "inline-block",
}}
>
{DateTime.fromISO(article.date)
.setZone("America/New_York")
.setLocale("en-us")
.toLocaleString(DateTime.DATE_FULL)}
</Typography>
</Grid>
</Grid>
</Grid>
);
};

const columns = [[], [], []];

articles.forEach((article, index) => {
columns[index % 3].push(article);
});

return (
<Grid container className={classes.grid}>
<Grid item className={classes.gridTitle}>
<Typography component="h2" variant="h4" sx={{ marginBottom: 1 }}>
More
</Typography>
</Grid>
<Grid container spacing={4} sx={{ paddingTop: "0px" }}>
{columns.map((col, colIndex) => (
<Grid item xs={12} md={4} key={colIndex}>
<Grid container item flexDirection="column">
{col.map((article) => drawArticle(article))}
</Grid>
</Grid>
))}
</Grid>
{topics && topics.length > 0 && (
<Grid item>
<Link
href={"/search/?filter=" + topics[0]._id}
sx={{
height: 24,
textDecoration: "none",
display: "inline-block",
"&:hover": {
textDecoration: "underline",
},
}}
>
<Typography
component="div"
variant="h5"
sx={{
backgroundColor: "#ffe5eaFF",
borderRadius: "4px",
color: "#FF0033",
fontWeight: 500,
paddingX: "10px",
paddingY: "6px",
boxShadow: "0px 2px 2px 0px #0000001F",
"&:active, & :focus, &:hover": {
color: "#FF0033",
textDecoration: "underline",
},
marginBottom: "7px",
}}
>
View more
</Typography>
</Link>
</Grid>
)}
</Grid>
);
}

MoreArticles.propTypes = {
articles: PropTypes.array,
topics: PropTypes.array,
};

export default MoreArticles;
41 changes: 40 additions & 1 deletion src/layouts/advanced.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";

// components
import components, { Layout } from "../components/index";
Expand All @@ -24,12 +25,13 @@ import SpotlightArticles from "../components/Homepage/SpotlightArticles";
import AroundGlobe from "../components/Homepage/AroundGlobe";
import PolicyTracker from "../components/Homepage/PolicyTracker";
import Announcements from "../components/Homepage/Announcements";
import MoreArticles from "../components/SpecialProjects/MoreArticles";

const Advanced = (props) => {
const { path, page, featured, articles } = props;

const latest =
path === "/"
(path === "/" || (page && page.layout === "project")) && articles
? articles.filter(
(article) => featured.find((a) => a._id === article._id) == null
)
Expand Down Expand Up @@ -193,6 +195,43 @@ const Advanced = (props) => {
</Grid>
</Container>
</>
) : page && page.layout === "project" ? (
<>
<Container>
<Typography
component="h1"
variant="h2_article"
sx={{ borderBottom: "1px solid #8AA29D", paddingBottom: 2 }}
>
{page.title}
</Typography>
<Grid
container
spacing={4}
alignItems="flex-start"
justifyContent="space-between"
>
{featured && (
<Grid item xs={12} md={8}>
<FeaturedHero article={featured[0]} />
<FeaturedStories articles={featured.slice(1)} />
</Grid>
)}
<Grid container item xs={12} md={4}>
<Grid item>
<SectionRecentArticles
articles={latest.slice(0, 5)}
viewMore={false}
/>
</Grid>
</Grid>
</Grid>
<MoreArticles
articles={latest.slice(5, 23)}
topics={page.projectTopics}
/>
</Container>
</>
) : (
<>
{path === "/tracker" ? (
Expand Down
8 changes: 7 additions & 1 deletion src/pages/[...slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export async function getStaticProps(props) {
);

let [page] = await client.fetch(
`*[!(_id in path("drafts.**")) && _type in ["advanced", "page", "post"] && (slug.current == "${slug}" || stackbit_url_path == "/${slug}")]{_id, _type, stackbit_url_path, trackerText, _createdAt, _updatedAt, badge, date, slug, title, body, toc, tocTitle, featuredImage, seo, disableNewsletterSignup, authors[]->{slug, name, photo, bio}, heroContent, layout, sections, sidebar_content[type == "sidebar_about"]{staff[]->, board[]->, masthead[]->}, relatedTopics[]->{displayName, name, type, slug, stackbit_model_type}, relatedArticles[]->{date,badge,title,slug,authors[]->{firstName, lastName}},relatedCommentary[]->}`
`*[!(_id in path("drafts.**")) && _type in ["advanced", "page", "post"] && (slug.current == "${slug}" || stackbit_url_path == "/${slug}")]{_id, _type, stackbit_url_path, trackerText, _createdAt, _updatedAt, badge, date, slug, title, body, toc, tocTitle, featuredImage, seo, disableNewsletterSignup, authors[]->{slug, name, photo, bio}, heroContent, layout, sections, sidebar_content[type == "sidebar_about"]{staff[]->, board[]->, masthead[]->}, relatedTopics[]->{displayName, name, type, slug, stackbit_model_type}, relatedArticles[]->{date,badge,title,slug,authors[]->{firstName, lastName}},relatedCommentary[]->,featuredPosts[]->{_id, title, author, badge, date, featuredImage, category, date, type, slug, stackbit_model_type},projectTopics[]->{_id}}`
);

let path;
Expand Down Expand Up @@ -83,6 +83,11 @@ export async function getStaticProps(props) {
const articlesQuery = `*[!(_id in path("drafts.**")) && _type == "post"]{ title, date, slug, badge, 'key': slug } | order(date desc)`;

articles = await client.fetch(articlesQuery);
} else if (page && page.layout === "project") {
const refs = page.projectTopics.map((ref) => `references("${ref._id}")`).join(" || ");
articles = await client.fetch(
`*[!(_id in path("drafts.**")) && (${refs}) && _type=="post"]{ _id, title, slug, featuredImage, date, badge } | order(date desc)[0...29]`
)
}

return {
Expand All @@ -91,6 +96,7 @@ export async function getStaticProps(props) {
articles: articles.length ? articles : null,
_type: page ? page._type : null,
authors: authors.length ? authors : null,
featured: page ? page.featuredPosts : null,
path: path,
data: { config, topics },
},
Expand Down
Loading