diff --git a/firebase.json b/firebase.json index 4fd74e4..57c8adc 100644 --- a/firebase.json +++ b/firebase.json @@ -15,6 +15,15 @@ } ] }, + { + "source": "**/*.html", + "headers": [ + { + "key": "X-Robots-Tag", + "value": "noindex, nofollow" + } + ] + }, { "source": "**/*.@(jpg|jpeg|gif|png)", "headers": [ diff --git a/public/index.html b/public/index.html index 89c63b8..9bf756c 100644 --- a/public/index.html +++ b/public/index.html @@ -28,7 +28,7 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> - 醇忆 Grad Mag + 醇憶 Grad Mag diff --git a/public/manifest.json b/public/manifest.json index cbc4bd7..c0c840d 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,5 +1,5 @@ { - "short_name": "醇忆 Grad Mag", + "short_name": "醇憶 Grad Mag", "name": "KMPk 16/17 Grad Mag", "icons": [ { diff --git a/src/components/common/BannerImage/index.tsx b/src/components/common/BannerImage/index.tsx new file mode 100644 index 0000000..a9f18e3 --- /dev/null +++ b/src/components/common/BannerImage/index.tsx @@ -0,0 +1,28 @@ +import CloudResponsiveImg from "components/common/CloudResponsiveImg"; +import React from "react"; + +interface BannerImageProps { + fileName: string; + className?: string; + imgProps?: React.DetailedHTMLProps< + React.ImgHTMLAttributes, + HTMLImageElement + >; +} + +const BannerImage: React.FC = ({ + fileName, + className, + imgProps, +}) => { + return ( + + ); +}; + +export default BannerImage; diff --git a/src/components/common/CloudResponsiveImg/index.tsx b/src/components/common/CloudResponsiveImg/index.tsx new file mode 100644 index 0000000..eda264c --- /dev/null +++ b/src/components/common/CloudResponsiveImg/index.tsx @@ -0,0 +1,40 @@ +import React from "react"; + +interface CloudResponsiveImgProps { + folderPath: string; + fileName: string; + className?: string; + imgProps?: React.DetailedHTMLProps< + React.ImgHTMLAttributes, + HTMLImageElement + >; +} + +const STORAGE_HOST = "https://storage.googleapis.com/ourpromise.appspot.com"; + +const CloudResponsiveImg: React.FC = ({ + folderPath, + fileName, + className, + imgProps, +}) => { + const uriEncodedFileName = encodeURI(fileName); + const path = `${STORAGE_HOST}/${folderPath}`; + return ( + {fileName} + ); +}; + +export default CloudResponsiveImg; diff --git a/src/components/styled/index.tsx b/src/components/styled/index.tsx index 933cc8e..4aca087 100644 --- a/src/components/styled/index.tsx +++ b/src/components/styled/index.tsx @@ -1,3 +1,4 @@ +import { CardContent } from "@mui/material"; import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; import { Link as ReactRouterLink } from "react-router-dom"; @@ -15,3 +16,10 @@ export const ContainedIconButton = styled(IconButton)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, }, })); + +export const StyledCardContent = styled(CardContent)(({ theme }) => ({ + padding: `${theme.spacing(1)} ${theme.spacing(2)}`, + "&:last-child": { + paddingBottom: theme.spacing(1), + }, +})); diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx index b22d028..23e947e 100644 --- a/src/layout/Footer.tsx +++ b/src/layout/Footer.tsx @@ -22,7 +22,7 @@ const classes = { const Root = styled("footer")(({ theme }) => ({ [`&.${classes.footer}`]: { position: "relative", - marginTop: "64px", + marginTop: 80, height: "256px", maxWidth: "100vw", backgroundImage: `url(${FooterImg})`, @@ -78,7 +78,7 @@ function Footer() {
- 醇忆 Grad Mag + 醇憶 Grad Mag ({ - [`& .${classes.container}`]: { - display: "flex", - flexDirection: "column", - flex: 1, - }, - - [`& .${classes.section}`]: { - margin: `${theme.spacing(2)} 0px`, - }, - - [`& .${classes.button}`]: { - width: "fit-content", - margin: "auto", - }, - - [`& .${classes.paragraph}`]: { - margin: theme.spacing(2), - }, - - [`& .${classes.card}`]: { - position: "relative", - }, - - [`& .${classes.cardMedia}`]: { - height: "280px", - }, - - [`& .${classes.cardContent}`]: { - position: "absolute", - bottom: 0, - margin: "0 32px", - marginBottom: "8px", - }, - - [`& .${classes.overlay}`]: { - position: "absolute", - bottom: 0, - right: 0, - left: 0, - paddingBottom: "100px", - backgroundImage: `linear-gradient(to bottom, transparent, ${theme.palette.background.paper})`, - opacity: 0.5, - }, -})); - -const cards = [ - { - title: "Graduates", - link: "graduates", - image: GraduatesImage, - }, - { - title: "KMPk TV", - link: "videos", - image: VideosImage, - }, -]; - -function Home() { - return ( - - - - - - About - - - This website serves as a platform to unite KMPk 16/17 graduates. The - admin is currently migrating the physical graduation magazine to - this website. - - - Stay tune for more interesting content and interactive features! - - - - - {cards.map((card) => ( - - {card.title} - - - - - - - - - ))} - - - - - ); -} - -export default Home; diff --git a/src/pages/Home/FeaturedContent/index.constants.ts b/src/pages/Home/FeaturedContent/index.constants.ts new file mode 100644 index 0000000..0505b12 --- /dev/null +++ b/src/pages/Home/FeaturedContent/index.constants.ts @@ -0,0 +1,12 @@ +export const FEAT_CARDS = [ + { + title: "Graduates", + link: "/graduates", + imgFileName: "graduates", + }, + { + title: "KMPk TV", + link: "/videos", + imgFileName: "videos", + }, +]; diff --git a/src/pages/Home/FeaturedContent/index.styled.ts b/src/pages/Home/FeaturedContent/index.styled.ts new file mode 100644 index 0000000..b6ffa95 --- /dev/null +++ b/src/pages/Home/FeaturedContent/index.styled.ts @@ -0,0 +1,6 @@ +import { styled } from "@mui/material/styles"; +import BannerImage from "components/common/BannerImage"; + +export const StyledCardImage = styled(BannerImage)({ + width: "100%", +}); diff --git a/src/pages/Home/FeaturedContent/index.tsx b/src/pages/Home/FeaturedContent/index.tsx new file mode 100644 index 0000000..13aab7b --- /dev/null +++ b/src/pages/Home/FeaturedContent/index.tsx @@ -0,0 +1,37 @@ +import { Card, CardActionArea, Grid, Typography } from "@mui/material"; +import * as SS from "components/styled"; +import React from "react"; +import { Link } from "react-router-dom"; +import { FEAT_CARDS } from "./index.constants"; +import * as S from "./index.styled"; + +const FeaturedContent = () => { + return ( + + {FEAT_CARDS.map((card) => ( + + + + + + + + + + {card.title} + + + + + ))} + + ); +}; + +export default FeaturedContent; diff --git a/src/pages/Home/index.styled.ts b/src/pages/Home/index.styled.ts new file mode 100644 index 0000000..136f7dc --- /dev/null +++ b/src/pages/Home/index.styled.ts @@ -0,0 +1,21 @@ +import { styled } from "@mui/material/styles"; +import BannerImage from "components/common/BannerImage"; + +export const HeroContainer = styled("div")(({ theme }) => ({ + [theme.breakpoints.up("md")]: { + display: "flex", + alignItems: "center", + height: "calc(100vh - 64px)", + overflow: "hidden", + width: "100%", + }, +})); + +export const HeroImg = styled(BannerImage)({ + width: "100%", +}); + +export const AboutBox = styled("div")(({ theme }) => ({ + marginTop: theme.spacing(2), + marginBottom: theme.spacing(3), +})); diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx new file mode 100644 index 0000000..3f94465 --- /dev/null +++ b/src/pages/Home/index.tsx @@ -0,0 +1,38 @@ +import Container from "@mui/material/Container"; +import Typography from "@mui/material/Typography"; +import React from "react"; +import FeaturedContent from "./FeaturedContent"; +import * as S from "./index.styled"; + +function Home() { + return ( + <> + + + + + + + About + + + This web app serves as a platform to unite KMPk 16/17 graduates. The + admin is currently migrating the physical graduation magazine to + this web app. + + + Stay tuned for more interesting content and features! + + + + + + ); +} + +export default Home; diff --git a/src/pages/graduates/GraduateCard/index.styled.ts b/src/pages/graduates/GraduateCard/index.styled.ts index 608f2b2..5e3d732 100644 --- a/src/pages/graduates/GraduateCard/index.styled.ts +++ b/src/pages/graduates/GraduateCard/index.styled.ts @@ -1,5 +1,4 @@ import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import GraduateImage from "pages/graduates/components/GraduateImage"; @@ -29,13 +28,6 @@ export const StyledGraduateImage = styled(GraduateImage)({ width: "100%", }); -export const StyledCardContent = styled(CardContent)(({ theme }) => ({ - padding: `${theme.spacing(1)} ${theme.spacing(2)}`, - "&:last-child": { - paddingBottom: theme.spacing(1), - }, -})); - /** * innerHTML will be hidden * but this element still occupies space diff --git a/src/pages/graduates/GraduateCard/index.tsx b/src/pages/graduates/GraduateCard/index.tsx index e17db98..9845159 100644 --- a/src/pages/graduates/GraduateCard/index.tsx +++ b/src/pages/graduates/GraduateCard/index.tsx @@ -23,13 +23,13 @@ const GraduateCard: React.FC = ({ graduate }) => { graduateName={graduate.name} imgProps={{ loading: "lazy", - sizes: "(max-width 600px) 100vw, 300px", + sizes: "(max-width: 600px) 100vw, 300px", }} /> - + {!graduate.name_ch && showNameChPlaceholder ? ( -- ) : ( @@ -38,7 +38,7 @@ const GraduateCard: React.FC = ({ graduate }) => { {graduate.name} - + ); }; diff --git a/src/pages/graduates/components/GraduateImage/index.tsx b/src/pages/graduates/components/GraduateImage/index.tsx index 98d0a91..4c11041 100644 --- a/src/pages/graduates/components/GraduateImage/index.tsx +++ b/src/pages/graduates/components/GraduateImage/index.tsx @@ -1,3 +1,4 @@ +import CloudResponsiveImg from "components/common/CloudResponsiveImg"; import React from "react"; interface GraduateImageProps { @@ -14,22 +15,12 @@ const GraduateImage: React.FC = ({ className, imgProps, }) => { - const uriEncodedGraduateName = encodeURI(graduateName); - const hostName = - "https://storage.googleapis.com/ourpromise.appspot.com/webp/graduates"; return ( - {graduateName} ); }; diff --git a/src/pages/graduates/details/ImageHolder/index.tsx b/src/pages/graduates/details/ImageHolder/index.tsx index b2b75d3..091ad01 100644 --- a/src/pages/graduates/details/ImageHolder/index.tsx +++ b/src/pages/graduates/details/ImageHolder/index.tsx @@ -21,7 +21,7 @@ const ImageHolder: React.FC = ({ graduate }) => { diff --git a/src/providers/app-title/AppTitleContext.tsx b/src/providers/app-title/AppTitleContext.tsx index d59fc39..a2d451e 100644 --- a/src/providers/app-title/AppTitleContext.tsx +++ b/src/providers/app-title/AppTitleContext.tsx @@ -5,7 +5,7 @@ export interface AppTitleContextValue { } const AppTitleContext = createContext({ - appTitle: "醇忆 Grad Mag", + appTitle: "醇憶 Grad Mag", }); export default AppTitleContext; diff --git a/src/providers/app-title/app-title.utils.ts b/src/providers/app-title/app-title.utils.ts index e1e5c9e..b468158 100644 --- a/src/providers/app-title/app-title.utils.ts +++ b/src/providers/app-title/app-title.utils.ts @@ -1,5 +1,5 @@ export function getAppTitle(url: string): string { if (url.startsWith("/graduates")) return "Graduates"; if (url.startsWith("/videos")) return "KMPk TV"; - return "醇忆 Grad Mag"; + return "醇憶 Grad Mag"; }