Merge pull request #92 from kachun333/dev

Release as v3.0.2
kachun333 · Feb 11, 2023 · c6cbfef · c6cbfef
2 parents e1ef8fe + 015f5df
commit c6cbfef
Show file tree

Hide file tree

Showing 19 changed files with 214 additions and 167 deletions.
diff --git 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
@@ -28,7 +28,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>醇忆 Grad Mag</title>
+    <title>醇憶 Grad Mag</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git 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
@@ -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>,
+    HTMLImageElement
+  >;
+}
+
+const BannerImage: React.FC<BannerImageProps> = ({
+  fileName,
+  className,
+  imgProps,
+}) => {
+  return (
+    <CloudResponsiveImg
+      folderPath="webp/banners"
+      fileName={fileName}
+      className={className}
+      imgProps={imgProps}
+    />
+  );
+};
+
+export default BannerImage;
diff --git a/src/components/common/CloudResponsiveImg/index.tsx 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>,
+    HTMLImageElement
+  >;
+}
+
+const STORAGE_HOST = "https://storage.googleapis.com/ourpromise.appspot.com";
+
+const CloudResponsiveImg: React.FC<CloudResponsiveImgProps> = ({
+  folderPath,
+  fileName,
+  className,
+  imgProps,
+}) => {
+  const uriEncodedFileName = encodeURI(fileName);
+  const path = `${STORAGE_HOST}/${folderPath}`;
+  return (
+    <img
+      className={className}
+      src={`${path}/300x200/${uriEncodedFileName}.webp`}
+      srcSet={`
+        ${path}/300x200/${uriEncodedFileName}.webp 300w,
+        ${path}/600x400/${uriEncodedFileName}.webp 600w,
+        ${path}/900x600/${uriEncodedFileName}.webp 900w,
+        ${path}/1200x800/${uriEncodedFileName}.webp 1200w,
+        ${path}/2400x1600/${uriEncodedFileName}.webp 2400w
+      `}
+      alt={fileName}
+      {...imgProps}
+    />
+  );
+};
+
+export default CloudResponsiveImg;
diff --git 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
@@ -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() {
       <div className={classes.overlay} />
       <Box id="footer-content" className={classes.box}>
         <Typography variant="h6" gutterBottom>
-          醇忆 Grad Mag
+          醇憶 Grad Mag
         </Typography>
         <Link
           target="_blank"

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
diff --git a/src/pages/Home/FeaturedContent/index.constants.ts 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
@@ -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
@@ -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 (
+    <Grid container spacing={4}>
+      {FEAT_CARDS.map((card) => (
+        <Grid item key={card.title} xs={12} sm={6}>
+          <Card>
+            <CardActionArea>
+              <Link to={card.link}>
+                <S.StyledCardImage
+                  fileName={card.imgFileName}
+                  imgProps={{
+                    sizes:
+                      "(min-width: 1536px) 768px, (min-width: 1200px) 600px, (min-width: 900px) 450px, (min-width: 600px) 300px, 100vw",
+                  }}
+                />
+              </Link>
+            </CardActionArea>
+            <SS.StyledCardContent>
+              <Typography variant="h6" gutterBottom>
+                {card.title}
+              </Typography>
+            </SS.StyledCardContent>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default FeaturedContent;
diff --git a/src/pages/Home/index.styled.ts 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
@@ -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 (
+    <>
+      <S.HeroContainer>
+        <S.HeroImg
+          fileName="home"
+          imgProps={{
+            alt: "A group photo of KMPk 16/17 students",
+          }}
+        />
+      </S.HeroContainer>
+      <Container>
+        <S.AboutBox>
+          <Typography variant="h3" gutterBottom>
+            About
+          </Typography>
+          <Typography variant="body1" gutterBottom>
+            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.
+          </Typography>
+          <Typography variant="body1" gutterBottom>
+            Stay tuned for more interesting content and features!
+          </Typography>
+        </S.AboutBox>
+        <FeaturedContent />
+      </Container>
+    </>
+  );
+}
+
+export default Home;