Merge pull request #53 from hicsail/individuate-headers

Individuate headers and pull from strapi

Guide-to-Strapi.md

@@ -54,6 +54,8 @@ Each Team Member can belong to one or more Team Categories.
 
 Blog post categories are not currently configurable by RESTORE; contact SAIL to change them.
 
+Headers: Each page of the website has a header, and each header has a corresponding Single Type on strapi where you can configure it. You can set the Title, Subtitle, Background Color Hex Code, and Background Image. The background image is drawn _on top_ of the background color. The background color defaults to RESTORE purple (dark shade). If you set a background color, make sure to prefix your hex code with a `#`, e.g. `#755f8b`. To remove a page's header entirely, go to that page's Single Type and click the trash can icon on the top right of the Header field/box.
+
 ### Notes on the Media Library
 
 - When organizing assets in the Media Library, when moving assets into different folders, you will be presented with a dropdown menu of Locations; the dropdown may appear to only contain 'Media Library'; **click the caret** on the right end of this menu item to expand the location list.

packages/client/src/components/Header.jsx

@@ -1,26 +1,15 @@
 import { Box, Typography } from '@mui/material';
 import { theme } from '../theme.jsx';
 
-// Turns out we want the same header across pages...
-export function UniversalHeader() {
-  return (
-    <Header
-      title="Multi-Level Interventions to Reduce the Burden of Trauma on the Health of Communities"
-      subtitle="Improve Equitable Access. Promote Quality and Cultural Responsiveness of Care. Build Trust."
-      bgColor={theme.palette.purple.dark}
-    />
-  );
-}
-
-// ...Still, will keep Header function for future flexibility.
 export function Header({ title, subtitle, imageUrl, bgColor }) {
   return (
     <Box
       sx={{
-        height: { xs: '300px', sm: '400px', md: '500px' }, // Responsive height
+        minHeight: { md: '500px' },
         display: 'flex',
         backgroundImage: `url(${imageUrl})`,
-        bgcolor: bgColor || 'grey',
+        backgroundSize: 'cover',
+        bgcolor: bgColor || theme.palette.purple.dark,
         [theme.breakpoints.down('sm')]: {
           // Adjust styles for small screens
           flexDirection: 'column'

packages/client/src/gql.jsx

@@ -17,6 +17,50 @@ export const GET_LOGO_FULL_SVG = gql`
     }
   }
 `;
+const headerdata = gql`
+  {
+    data {
+      attributes {
+        Header {
+          Title
+          Subtitle
+          BackgroundColorHexCode
+          BackgroundImage {
+            data {
+              attributes {
+                url
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export const GET_HOMEPAGE_HEADER = gql`
+  query GetHomePageHeader { homePageHeader ${headerdata} }
+`;
+export const GET_ABOUTPAGE_HEADER = gql`
+  query GetAboutPageHeader { aboutPageHeader ${headerdata} }
+`;
+export const GET_TREATMENTSANDSERVICESPAGE_HEADER = gql`
+  query GetTreatmentsAndServicesPageHeader { treatmentsAndServicesPageHeader ${headerdata} }
+`;
+export const GET_TEAMPAGE_HEADER = gql`
+  query GetTeamPageHeader { teamPageHeader ${headerdata} }
+`;
+export const GET_TESTIMONIALSPAGE_HEADER = gql`
+  query GetTestimonialsPageHeader { testimonialsPageHeader ${headerdata} }
+`;
+export const GET_RESEARCHANDEVALUATIONPAGE_HEADER = gql`
+  query GetResearchAndEvaluationPageHeader { researchAndEvaluationPageHeader ${headerdata} }
+`;
+export const GET_GETINVOLVEDPAGE_HEADER = gql`
+  query GetGetInvolvedPageHeader { getInvolvedPageHeader ${headerdata} }
+`;
+export const GET_BLOGPAGE_HEADER = gql`
+  query GetBlogPageHeader { blogPageHeader ${headerdata} }
+`;
 export const GET_HOMEPAGE_CARDGRID = gql`
   query GetHomePageCardGrid {
     homePageCardGrids {

packages/client/src/main.jsx

@@ -15,7 +15,7 @@ import Layout from './pages/Layout.jsx';
 import About from './pages/About.jsx';
 import TreatmentsServices from './pages/TreatmentsServices.jsx';
 import { ServicesToTheHealthSystem, ServicesToOurPatients } from './pages/TreatmentsServices.jsx';
-import TeamMemberGrid from './pages/Team.jsx';
+import Team from './pages/Team.jsx';
 import Testimonials from './pages/Testimonials.jsx';
 import ResearchAndEvals from './pages/Research.jsx';
 import GetInvolved from './pages/GetInvolved.jsx';
@@ -76,7 +76,7 @@ const router = createBrowserRouter([
       },
       {
         path: 'our-team',
-        element: <TeamMemberGrid />
+        element: <Team />
       },
       {
         path: 'testimonials',

packages/client/src/pages/About.jsx

@@ -1,9 +1,10 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
+import { Header } from '../components/Header.jsx';
 import { InfoPanelA } from '../components/InfoPanelA.jsx';
 import { prependStrapiURL } from '../utils.jsx';
 import { theme } from '../theme.jsx';
 import { useQuery } from '@apollo/client';
-import { GET_WHYOURWORK_IMG } from '../gql.jsx';
+import { GET_ABOUTPAGE_HEADER, GET_WHYOURWORK_IMG } from '../gql.jsx';
 
 function Mission() {
   return (
@@ -87,12 +88,30 @@ function WhyOurWorkIsImportant() {
   );
 }
 
+function AboutHeader() {
+  const { data } = useQuery(GET_ABOUTPAGE_HEADER);
+  if (!data?.aboutPageHeader.data?.attributes.Header) return;
+  const { Title, Subtitle, BackgroundColorHexCode, BackgroundImage } = data.aboutPageHeader.data.attributes.Header;
+
+  return (
+    <Header
+      title={Title}
+      subtitle={Subtitle}
+      imageUrl={BackgroundImage.data && prependStrapiURL(BackgroundImage.data.attributes.url)}
+      bgColor={BackgroundColorHexCode}
+    />
+  );
+}
+
 export default function About() {
   return (
     <>
-      <Mission />
-      <WhyOurWorkIsImportant />
-      <Strategies />
+      <AboutHeader />
+      <Container sx={{ margin: '1rem auto' }}>
+        <Mission />
+        <WhyOurWorkIsImportant />
+        <Strategies />
+      </Container>
     </>
   );
 }

packages/client/src/pages/Blog.jsx

@@ -1,11 +1,12 @@
 import { useQuery } from '@apollo/client';
 
-import { GET_BLOG_POSTS_BY_CATEGORY } from '../gql.jsx';
+import { GET_BLOGPAGE_HEADER, GET_BLOG_POSTS_BY_CATEGORY } from '../gql.jsx';
 import { useState } from 'react';
-import { Box, Grid, Pagination, Tab, Tabs } from '@mui/material';
+import { Box, Container, Grid, Pagination, Tab, Tabs } from '@mui/material';
+import { Header } from '../components/Header.jsx';
 import { BlogCard } from '../components/BlogCard.jsx';
 
-export default function Blog() {
+function BlogBrowser() {
   const { loading, error, data, refetch } = useQuery(GET_BLOG_POSTS_BY_CATEGORY, {
     variables: { category: '', page: 1, pageSize: 9 }
   });
@@ -68,3 +69,29 @@ export default function Blog() {
     </>
   );
 }
+
+function BlogHeader() {
+  const { data } = useQuery(GET_BLOGPAGE_HEADER);
+  if (!data?.blogPageHeader.data?.attributes.Header) return;
+  const { Title, Subtitle, BackgroundColorHexCode, BackgroundImage } = data.blogPageHeader.data.attributes.Header;
+
+  return (
+    <Header
+      title={Title}
+      subtitle={Subtitle}
+      imageUrl={BackgroundImage.data && prependStrapiURL(BackgroundImage.data.attributes.url)}
+      bgColor={BackgroundColorHexCode}
+    />
+  );
+}
+
+export default function Blog() {
+  return (
+    <>
+      <BlogHeader />
+      <Container sx={{ margin: '1rem auto' }}>
+        <BlogBrowser />
+      </Container>
+    </>
+  );
+}

packages/client/src/pages/GetInvolved.jsx

@@ -1,9 +1,10 @@
-import { Typography } from '@mui/material';
+import { Container, Typography } from '@mui/material';
+import { Header } from '../components/Header.jsx';
 import { SectionedHeader } from '../components/SectionedHeader.jsx';
 import { CardGrid } from '../components/CardGrid.jsx';
 
 import { useQuery } from '@apollo/client';
-import { GET_GETINVOLVED_CARDGRID } from '../gql.jsx';
+import { GET_GETINVOLVEDPAGE_HEADER, GET_GETINVOLVED_CARDGRID } from '../gql.jsx';
 
 function GetInvolvedCardGrid() {
   const { loading, error, data } = useQuery(GET_GETINVOLVED_CARDGRID);
@@ -21,10 +22,29 @@ function GetInvolvedCardGrid() {
   );
 }
 
+function GetInvolvedHeader() {
+  const { data } = useQuery(GET_GETINVOLVEDPAGE_HEADER);
+  if (!data?.getInvolvedPageHeader.data?.attributes.Header) return;
+  const { Title, Subtitle, BackgroundColorHexCode, BackgroundImage } =
+    data.getInvolvedPageHeader.data.attributes.Header;
+
+  return (
+    <Header
+      title={Title}
+      subtitle={Subtitle}
+      imageUrl={BackgroundImage.data && prependStrapiURL(BackgroundImage.data.attributes.url)}
+      bgColor={BackgroundColorHexCode}
+    />
+  );
+}
+
 export default function GetInvolved() {
   return (
     <>
-      <GetInvolvedCardGrid />
+      <GetInvolvedHeader />
+      <Container sx={{ margin: '1rem auto' }}>
+        <GetInvolvedCardGrid />
+      </Container>
     </>
   );
 }

packages/client/src/pages/Home.jsx

@@ -1,23 +1,23 @@
 import { NavLink } from 'react-router-dom';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Container, Typography } from '@mui/material';
 
+import { Header } from '../components/Header.jsx';
 import { InfoPanelA } from '../components/InfoPanelA.jsx';
 import { SectionedHeader } from '../components/SectionedHeader.jsx';
 import { CardGrid } from '../components/CardGrid.jsx';
 import { BlogCard } from '../components/BlogCard.jsx';
 
 import { useQuery } from '@apollo/client';
 import {
+  GET_HOMEPAGE_HEADER,
   GET_HOMEPAGE_CARDGRID,
   GET_HOMEPAGE_INFOPANEL_TOP,
   GET_HOMEPAGE_INFOPANEL_BOTTOM,
   GET_RECENT_BLOG_POSTS
 } from '../gql.jsx';
+import { prependStrapiURL } from '../utils.jsx';
 
-// Some random placeholder icon options...
-import GestureIcon from '@mui/icons-material/Gesture';
-import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
-import SquareIcon from '@mui/icons-material/Square';
+import { theme } from '../theme.jsx';
 
 function HomepageInfoPanelTop() {
   const { loading, error, data } = useQuery(GET_HOMEPAGE_INFOPANEL_TOP);
@@ -107,13 +107,31 @@ function HomepageBlogPreview() {
   );
 }
 
+function HomeHeader() {
+  const { data } = useQuery(GET_HOMEPAGE_HEADER);
+  if (!data?.homePageHeader.data?.attributes.Header) return;
+  const { Title, Subtitle, BackgroundColorHexCode, BackgroundImage } = data.homePageHeader.data.attributes.Header;
+
+  return (
+    <Header
+      title={Title}
+      subtitle={Subtitle}
+      imageUrl={BackgroundImage.data && prependStrapiURL(BackgroundImage.data.attributes.url)}
+      bgColor={BackgroundColorHexCode}
+    />
+  );
+}
+
 export default function Home() {
   return (
     <>
-      <HomepageInfoPanelTop />
-      <HomepageCardGrid />
-      <HomepageInfoPanelBottom />
-      <HomepageBlogPreview />
+      <HomeHeader />
+      <Container sx={{ margin: '1rem auto' }}>
+        <HomepageInfoPanelTop />
+        <HomepageCardGrid />
+        <HomepageInfoPanelBottom />
+        <HomepageBlogPreview />
+      </Container>
     </>
   );
 }

packages/client/src/pages/Layout.jsx

@@ -1,7 +1,5 @@
 import { Outlet } from 'react-router-dom';
 
-import { Container } from '@mui/material';
-import { UniversalHeader } from '../components/Header.jsx';
 import { Footer } from '../components/Footer.jsx';
 import { NavBar } from '../components/NavBar.jsx';
 
@@ -17,10 +15,7 @@ function Layout() {
     <>
       <HashLinkObserver />
       <NavBar />
-      <UniversalHeader />
-      <Container sx={{ margin: '1rem auto' }}>
-        <Outlet />
-      </Container>
+      <Outlet />
       <Footer />
     </>
   );

packages/client/src/pages/Research.jsx

@@ -1,9 +1,10 @@
 import { useQuery } from '@apollo/client';
 import ReactMarkdown from 'react-markdown';
-import { Box, Card, CardContent, CardMedia, Typography } from '@mui/material';
+import { Box, Card, CardContent, CardMedia, Container, Typography } from '@mui/material';
+import { Header } from '../components/Header.jsx';
 import { SectionedHeader } from '../components/SectionedHeader.jsx';
 
-import { GET_CURRENT_STUDIES, GET_RESEARCH_AND_EVALUATIONS } from '../gql.jsx';
+import { GET_RESEARCHANDEVALUATIONPAGE_HEADER, GET_CURRENT_STUDIES, GET_RESEARCH_AND_EVALUATIONS } from '../gql.jsx';
 import { prependStrapiURL } from '../utils';
 
 function CurrentStudies() {
@@ -53,6 +54,22 @@ function CurrentStudies() {
   );
 }
 
+function ResearchAndEvaluationHeader() {
+  const { data } = useQuery(GET_RESEARCHANDEVALUATIONPAGE_HEADER);
+  if (!data?.researchAndEvaluationPageHeader.data?.attributes.Header) return;
+  const { Title, Subtitle, BackgroundColorHexCode, BackgroundImage } =
+    data.researchAndEvaluationPageHeader.data.attributes.Header;
+
+  return (
+    <Header
+      title={Title}
+      subtitle={Subtitle}
+      imageUrl={BackgroundImage.data && prependStrapiURL(BackgroundImage.data.attributes.url)}
+      bgColor={BackgroundColorHexCode}
+    />
+  );
+}
+
 export default function ResearchAndEvals() {
   const { loading, error, data } = useQuery(GET_RESEARCH_AND_EVALUATIONS);
 
@@ -61,8 +78,11 @@ export default function ResearchAndEvals() {
 
   return (
     <>
-      <CurrentStudies />
-      <ReactMarkdown>{data.researchAndEvaluation.data.attributes.Body}</ReactMarkdown>
+      <ResearchAndEvaluationHeader />
+      <Container sx={{ margin: '1rem auto' }}>
+        <CurrentStudies />
+        <ReactMarkdown>{data.researchAndEvaluation.data.attributes.Body}</ReactMarkdown>
+      </Container>
     </>
   );
 }