Skip to content

Commit 726ef71

Browse files
junjun107junjun107
authored
Add dynamic titile and description to each page (#2207)
1 parent c5aa0a2 commit 726ef71

File tree

7 files changed

+1023
-970
lines changed

7 files changed

+1023
-970
lines changed

‎client/src/components/FoodSeeker/Home.js

Lines changed: 152 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { useEffect, useState } from "react";
1616
import { Link as RouterLink, useNavigate } from "react-router-dom";
1717
import * as analytics from "services/analytics";
1818
import { useSiteContext } from "../../contexts/siteContext";
19+
import SEO from "../SEO";
1920

2021
const logoPaths = {
2122
1: require("images/foodoasis.svg").default,
@@ -80,178 +81,187 @@ const Home = () => {
8081
}, []);
8182

8283
return (
83-
<Box
84-
style={{ backgroundImage: bgImg }}
85-
sx={(theme) => ({
86-
backgroundSize: "cover",
87-
backgroundPosition: "center",
88-
backgroundImage: 'url("/landing-page/map.png")',
89-
minHeight: "max(100.7vh,20em)",
90-
display: "flex",
91-
flexDirection: "column",
92-
justifyContent: "center",
93-
alignItems: "center",
94-
[theme.breakpoints.down("sm")]: {
95-
height: "100%",
96-
},
97-
})}
98-
>
99-
<Container
100-
component="main"
101-
maxWidth={false}
84+
<>
85+
<SEO
86+
title="Home | Food Oasis"
87+
description="Food Oasis helps you find free food resources in Los Angeles. Learn more about our mission and services."
88+
url="https://www.foodoasis.la"
89+
/>
90+
<Box
91+
style={{ backgroundImage: bgImg }}
10292
sx={(theme) => ({
103-
maxWidth: "650px",
93+
backgroundSize: "cover",
94+
backgroundPosition: "center",
95+
backgroundImage: 'url("/landing-page/map.png")',
96+
minHeight: "max(100.7vh,20em)",
97+
display: "flex",
98+
flexDirection: "column",
99+
justifyContent: "center",
100+
alignItems: "center",
104101
[theme.breakpoints.down("sm")]: {
105-
padding: 0,
106102
height: "100%",
107103
},
108104
})}
109105
>
110-
<Paper
106+
<Container
107+
component="main"
108+
maxWidth={false}
111109
sx={(theme) => ({
112-
margin: "0 auto",
113-
padding: "3.5rem 0.5rem 3rem 0.5rem",
114-
display: "flex",
115-
flexDirection: "column",
116-
alignItems: "center",
117-
borderRadius: "24px",
118-
boxShadow: "0px 5px 8px 0px rgb(0, 0, 0, 40%)",
110+
maxWidth: "650px",
119111
[theme.breakpoints.down("sm")]: {
112+
padding: 0,
120113
height: "100%",
121-
borderRadius: "0",
122-
paddingTop: "10rem",
123-
justifyContent: "start",
124-
boxShadow: "none",
125114
},
126115
})}
127116
>
128-
<Box
117+
<Paper
129118
sx={(theme) => ({
130-
width: "60%",
131-
height: "auto",
132-
textAlign: "center",
133-
[theme.breakpoints.up("sm")]: {
134-
width: "40%",
135-
},
136-
})}
137-
>
138-
<img src={logoPaths[tenantId]} alt="logo" />
139-
</Box>
140-
<Box
141-
sx={(theme) => ({
142-
width: "100%",
143-
padding: "5px 15px 15px 15px",
144-
color: "#000000",
145-
[theme.breakpoints.up("sm")]: {
146-
paddingInline: "90px",
119+
margin: "0 auto",
120+
padding: "3.5rem 0.5rem 3rem 0.5rem",
121+
display: "flex",
122+
flexDirection: "column",
123+
alignItems: "center",
124+
borderRadius: "24px",
125+
boxShadow: "0px 5px 8px 0px rgb(0, 0, 0, 40%)",
126+
[theme.breakpoints.down("sm")]: {
127+
height: "100%",
128+
borderRadius: "0",
129+
paddingTop: "10rem",
130+
justifyContent: "start",
131+
boxShadow: "none",
147132
},
148133
})}
149134
>
150135
<Box
151-
component="form"
152-
onSubmit={() => navigate("/organizations")}
136+
sx={(theme) => ({
137+
width: "60%",
138+
height: "auto",
139+
textAlign: "center",
140+
[theme.breakpoints.up("sm")]: {
141+
width: "40%",
142+
},
143+
})}
144+
>
145+
<img src={logoPaths[tenantId]} alt="logo" />
146+
</Box>
147+
<Box
153148
sx={(theme) => ({
154149
width: "100%",
155-
marginTop: theme.spacing(1),
150+
padding: "5px 15px 15px 15px",
151+
color: "#000000",
152+
[theme.breakpoints.up("sm")]: {
153+
paddingInline: "90px",
154+
},
156155
})}
157156
>
158-
<Typography
159-
variant="h2"
157+
<Box
158+
component="form"
159+
onSubmit={() => navigate("/organizations")}
160160
sx={(theme) => ({
161+
width: "100%",
161162
marginTop: theme.spacing(1),
162-
fontWeight: "500",
163-
fontSize: "18.72px !important",
164-
marginBottom: "0.5em",
165-
textAlign: "center",
166163
})}
167164
>
168-
{taglineText}
169-
</Typography>
170-
<Box
171-
sx={{
172-
display: "flex",
173-
alignItems: "flex-start",
174-
justifyContent: "center",
175-
marginBottom: "1em",
176-
fontSize: "16px",
177-
}}
178-
>
179-
<AddressDropDown autoFocus={true} />
180-
</Box>
181-
<Box
182-
sx={{
183-
display: "flex",
184-
alignItems: "flex-start",
185-
justifyContent: "center",
186-
marginBottom: "1em",
187-
fontSize: "16px",
188-
}}
189-
>
190-
or
191-
</Box>
192-
<Box
193-
sx={{
194-
display: "flex",
195-
alignItems: "flex-start",
196-
justifyContent: "center",
197-
marginBottom: "1em",
198-
fontSize: "16px",
199-
}}
200-
>
201-
{isGettingLocation ? (
202-
<Stack justifyContent="center" alignContent="center">
203-
<CircularProgress />
204-
</Stack>
205-
) : (
206-
<div style={{ textAlign: "center" }}>
207-
<Tooltip
208-
enterTouchDelay={0}
209-
title={
210-
(locationPermission === "denied" || !!error) &&
211-
"Please allow location access"
212-
}
213-
>
214-
<div>
215-
<Button
216-
variant="contained"
217-
startIcon={<LocationOn />}
218-
onClick={useMyLocationTrigger}
219-
disabled={locationPermission === "denied" || !!error}
220-
>
221-
Use my current location
222-
</Button>
223-
</div>
224-
</Tooltip>
225-
</div>
226-
)}
227-
</Box>
228-
<Box
229-
sx={{
230-
display: "flex",
231-
alignItems: "flex-start",
232-
justifyContent: "center",
233-
marginBottom: "1em",
234-
fontSize: "16px",
235-
}}
236-
>
237-
<Link
238-
component={RouterLink}
239-
to="/about"
165+
<Typography
166+
variant="h2"
240167
sx={(theme) => ({
241-
fontSize: "16px",
242-
[theme.breakpoints.up("sm")]: {
243-
fontSize: "19px",
244-
},
168+
marginTop: theme.spacing(1),
169+
fontWeight: "500",
170+
fontSize: "18.72px !important",
171+
marginBottom: "0.5em",
172+
textAlign: "center",
245173
})}
246174
>
247-
Learn about this site
248-
</Link>
175+
{taglineText}
176+
</Typography>
177+
<Box
178+
sx={{
179+
display: "flex",
180+
alignItems: "flex-start",
181+
justifyContent: "center",
182+
marginBottom: "1em",
183+
fontSize: "16px",
184+
}}
185+
>
186+
<AddressDropDown autoFocus={true} />
187+
</Box>
188+
<Box
189+
sx={{
190+
display: "flex",
191+
alignItems: "flex-start",
192+
justifyContent: "center",
193+
marginBottom: "1em",
194+
fontSize: "16px",
195+
}}
196+
>
197+
or
198+
</Box>
199+
<Box
200+
sx={{
201+
display: "flex",
202+
alignItems: "flex-start",
203+
justifyContent: "center",
204+
marginBottom: "1em",
205+
fontSize: "16px",
206+
}}
207+
>
208+
{isGettingLocation ? (
209+
<Stack justifyContent="center" alignContent="center">
210+
<CircularProgress />
211+
</Stack>
212+
) : (
213+
<div style={{ textAlign: "center" }}>
214+
<Tooltip
215+
enterTouchDelay={0}
216+
title={
217+
(locationPermission === "denied" || !!error) &&
218+
"Please allow location access"
219+
}
220+
>
221+
<div>
222+
<Button
223+
variant="contained"
224+
startIcon={<LocationOn />}
225+
onClick={useMyLocationTrigger}
226+
disabled={
227+
locationPermission === "denied" || !!error
228+
}
229+
>
230+
Use my current location
231+
</Button>
232+
</div>
233+
</Tooltip>
234+
</div>
235+
)}
236+
</Box>
237+
<Box
238+
sx={{
239+
display: "flex",
240+
alignItems: "flex-start",
241+
justifyContent: "center",
242+
marginBottom: "1em",
243+
fontSize: "16px",
244+
}}
245+
>
246+
<Link
247+
component={RouterLink}
248+
to="/about"
249+
sx={(theme) => ({
250+
fontSize: "16px",
251+
[theme.breakpoints.up("sm")]: {
252+
fontSize: "19px",
253+
},
254+
})}
255+
>
256+
Learn about this site
257+
</Link>
258+
</Box>
249259
</Box>
250260
</Box>
251-
</Box>
252-
</Paper>
253-
</Container>
254-
</Box>
261+
</Paper>
262+
</Container>
263+
</Box>
264+
</>
255265
);
256266
};
257267

‎client/src/components/FoodSeeker/SearchResults/SearchResults.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Filters from "./ResultsFilters/ResultsFilters";
1616
import List from "./ResultsList/ResultsList";
1717
import Map from "./ResultsMap/ResultsMap";
1818
import { Desktop, Mobile, Tablet } from "./layouts";
19+
import SEO from "../../SEO";
1920

2021
const SearchResults = () => {
2122
const isListPanelVisible = useIsListPanelVisible();
@@ -157,12 +158,22 @@ const SearchResults = () => {
157158
handleReset={resetOrigin}
158159
/>
159160
);
160-
161-
if (isDesktop) return <Desktop filters={filters} map={map} list={list} />;
162-
163-
if (isTablet) return <Tablet filters={filters} map={map} list={list} />;
164-
165-
return <Mobile showList={showList} filters={filters} map={map} list={list} />;
161+
return (
162+
<>
163+
<SEO
164+
title="Map | Food Oasis"
165+
description="Enter your zip code or address to search for PANTRIES or MEALS"
166+
url="https://www.foodoasis.la/organizations"
167+
/>
168+
{isDesktop ? (
169+
<Desktop filters={filters} map={map} list={list} />
170+
) : isTablet ? (
171+
<Tablet filters={filters} map={map} list={list} />
172+
) : (
173+
<Mobile showList={showList} filters={filters} map={map} list={list} />
174+
)}
175+
</>
176+
);
166177
};
167178

168179
export default SearchResults;

0 commit comments

Comments
 (0)