Merge pull request #890 from CodeForAfrica/feat/engineeringblog_footer

@/engineeringblog Footer
CodeForAfrica · Sep 17, 2024 · a47f3e8 · a47f3e8
2 parents 1c58c3a + 85d77f8
commit a47f3e8
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 27 deletions.
diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -59,7 +59,7 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-ucmc6q-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
@@ -79,7 +79,7 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-ucmc6q-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"

diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -59,7 +59,7 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-rtpp6e-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
@@ -79,7 +79,7 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-rtpp6e-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"

diff --git a/apps/engineeringblog/app/layout.tsx b/apps/engineeringblog/app/layout.tsx
@@ -2,6 +2,7 @@ import { CssBaseline, ThemeProvider } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
 import type { Metadata } from "next";
 
+import Footer from "@/engineeringblog/components/Footer";
 import NavBar from "@/engineeringblog/components/NavBar";
 import theme from "@/engineeringblog/theme";
 
@@ -19,7 +20,8 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { primaryNavigation } = await getSettings();
+  const { connect, primaryNavigation, secondaryNavigation } =
+    await getSettings();
   // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
   const { blurWidth, blurHeight, ...logoProps } = logoLight;
   const logo = {
@@ -36,6 +38,11 @@ export default async function RootLayout({
             <CssBaseline enableColorScheme />
             <NavBar {...primaryNavigation} logo={logo} />
             {children}
+            <Footer
+              copyright={secondaryNavigation.copyright}
+              connect={connect}
+              secondaryMenus={secondaryNavigation.menus}
+            />
           </ThemeProvider>
         </AppRouterCacheProvider>
       </body>

diff --git a/apps/engineeringblog/components/Footer/Footer.tsx b/apps/engineeringblog/components/Footer/Footer.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { RichTypography, Section, StayInTouch } from "@commons-ui/core";
+import { StyledLink as Link } from "@commons-ui/next";
+import { Box, Grid } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import type { SxProps, Theme } from "@mui/material/styles";
+import React from "react";
+
+import NavBarNavList from "@/engineeringblog/components/NavBarNavList";
+import type { ConnectProps } from "@/engineeringblog/lib/data";
+import type { Menu } from "@/engineeringblog/components/NavBarNavList";
+
+interface FooterProps {
+  copyright?: string;
+  connect: ConnectProps;
+  secondaryMenus?: Menu[];
+  sx?: SxProps<Theme>;
+}
+
+const FooterRoot = styled("footer")(
+  ({ theme: { breakpoints, palette, typography } }) => ({
+    backgroundColor: palette.background.default,
+    borderTop: `1px solid ${palette.text.primary}`,
+    color: palette.text.primary,
+    mt: 2.5,
+    [breakpoints.up("md")]: {
+      mt: 5,
+    },
+  }),
+);
+
+const Footer = React.forwardRef(function Footer(
+  props: FooterProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { copyright, connect, secondaryMenus, sx } = props;
+  return (
+    <FooterRoot sx={sx} ref={ref}>
+      <Section sx={{ px: { xs: 2.5, sm: 0 }, py: { xs: 2.5 } }}>
+        <Grid container justifyContent="space-between">
+          <Grid
+            item
+            xs={12}
+            container
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Grid item xs={12} sm="auto" order={{ xs: 1, sm: 0 }}>
+              <RichTypography
+                textAlign={{ xs: "center", sm: "left" }}
+                pt={{ xs: 1, sm: 0 }}
+              >
+                {copyright}
+              </RichTypography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              sm="auto"
+              order={{ xs: 0, sm: 1 }}
+              container
+              alignItems={{ xs: "flex-start", sm: "center" }}
+            >
+              <Grid item xs={12} sm="auto">
+                <Box component="nav">
+                  <NavBarNavList
+                    NavListItemLinkProps={{
+                      flexBasis: "auto",
+                      variant: "body1",
+                      sx: {
+                        mr: { xs: 0, sm: 1.5, md: 2.5 },
+                        typography: { md: "body1" },
+                      },
+                    }}
+                    NavListItemProps={{
+                      sx: {
+                        borderBottom: { xs: "none" },
+                        py: { xs: 1, sm: 0 },
+                        mr: { xs: 0, sm: 1.5, md: 2.5 },
+                        "&:first-of-type": {
+                          pt: 0,
+                        },
+                      },
+                    }}
+                    direction="row"
+                    menus={secondaryMenus}
+                    sx={{
+                      alignItems: { xs: "flex-start", sm: "center" },
+                      display: "inline-flex",
+                      flexDirection: { xs: "column", sm: "row" },
+                      justifyContent: "flex-start",
+                    }}
+                  />
+                </Box>
+              </Grid>
+              <Grid item>
+                <StayInTouch
+                  {...connect}
+                  LinkProps={{
+                    component: Link,
+                    sx: (theme: Theme) => ({
+                      transition: theme.transitions.create(["opacity"]),
+                    }),
+                  }}
+                  TitleProps={{ variant: "footerCap" }}
+                  sx={{
+                    mt: "0px",
+                    py: { xs: 1, sm: 0 },
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Section>
+    </FooterRoot>
+  );
+});
+
+export type { FooterProps };
+export default Footer;
diff --git a/apps/engineeringblog/components/Footer/index.ts b/apps/engineeringblog/components/Footer/index.ts
@@ -0,0 +1,5 @@
+import type { FooterProps } from "./Footer";
+import Footer from "./Footer";
+
+export type { FooterProps };
+export default Footer;
diff --git a/apps/engineeringblog/components/Logo/Logo.tsx b/apps/engineeringblog/components/Logo/Logo.tsx
@@ -24,7 +24,7 @@ const Logo = React.forwardRef(function Logo(
     title,
     ...other // All next/image supported props
   } = props;
-  const logoHref = title?.length ? "https://codeforafrica.org" : "/";
+  const logoHref = title?.length ? "https://codeforafrica.org" : hrefProp;
 
   return (
     <Stack
@@ -78,6 +78,7 @@ const Logo = React.forwardRef(function Logo(
           style={{
             height: 32,
             width: "auto",
+            ...other?.style,
           }}
         />
       </Link>

diff --git a/apps/engineeringblog/components/NavBar/NavBarProps.tsx b/apps/engineeringblog/components/NavBar/NavBarProps.tsx
@@ -1,5 +1,5 @@
 import { Theme, SxProps } from "@mui/material/styles";
-import { LogoProps } from "@/engineeringblog/components/Logo";
+import type { LogoProps } from "@/engineeringblog/components/Logo";
 import type {
   Menu,
   SocialMediaLink,

diff --git a/apps/engineeringblog/components/NavBarNavList/NavBarNavList.tsx b/apps/engineeringblog/components/NavBarNavList/NavBarNavList.tsx
@@ -1,6 +1,6 @@
 import { NavList, NavListItem, SocialMediaIconLink } from "@commons-ui/core";
 import { StyledLink as Link } from "@commons-ui/next";
-import type { LinkProps } from "@mui/material";
+import type { LinkProps, StackOwnProps } from "@mui/material";
 import type { Theme } from "@mui/material/styles";
 import React from "react";
 
@@ -24,23 +24,31 @@ interface SocialMediaLink {
   url: string;
 }
 
-interface Props {
+interface NavBarNavListProps extends Pick<StackOwnProps, "direction" | "sx"> {
+  NavListItemLinkProps?: LinkProps;
   NavListItemProps?: NavListItemProps;
-  direction?: string;
   menus?: Menu[];
   socialLinks?: SocialMediaLink[];
 }
 
 const NavBarNavList = React.forwardRef(function NavBarNavList(
-  props: Props,
+  props: NavBarNavListProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { NavListItemProps, direction, menus, socialLinks, ...other } = props;
+  const {
+    NavListItemLinkProps,
+    NavListItemProps,
+    direction,
+    menus,
+    socialLinks,
+    ...other
+  } = props;
 
   return (
     <NavList direction={direction} {...other} ref={ref}>
       {menus?.map((item) => (
         <NavListItem
+          {...NavListItemProps}
           key={item.label}
           sx={(theme: Theme) => ({
             borderBottom: {
@@ -49,25 +57,26 @@ const NavBarNavList = React.forwardRef(function NavBarNavList(
             },
             py: { xs: 1, md: 0 },
             mr: { xs: 0, md: 2.5 },
+            ...NavListItemProps?.sx,
           })}
         >
           <Link
             color="inherit"
             underline="none"
             // in mobile h3 = h4 in desktop
             variant="h5"
-            {...NavListItemProps}
+            {...NavListItemLinkProps}
             href={item.href}
-            sx={{
+            sx={(theme: Theme) => ({
               display: "flex",
               flexBasis: { xs: 1, md: "auto" },
+              transition: theme.transitions.create(["opacity"]),
               typography: { md: "body3" },
               "&:hover, &:active, &:focus, &:focus-within": {
                 textDecoration: "none",
-                color: { xs: "inherit", md: "primary.main" },
               },
-              ...NavListItemProps?.sx,
-            }}
+              ...NavListItemLinkProps?.sx,
+            })}
           >
             {item.label}
           </Link>
@@ -86,12 +95,13 @@ const NavBarNavList = React.forwardRef(function NavBarNavList(
               href={url}
               platform={platform}
               variant="h5"
-              IconProps={{
+              IconProps={(theme: Theme) => ({
                 fontSize: "inherit",
+                transition: theme.transitions.create(["opacity"]),
                 sx: {
                   mt: direction === "column" ? 0 : 1,
                 },
-              }}
+              })}
               sx={{
                 display: "flex",
                 typography: { md: "h5" },

diff --git a/apps/engineeringblog/content/site/settings.mdx b/apps/engineeringblog/content/site/settings.mdx
@@ -14,13 +14,14 @@ primaryNavigation:
     - platform: Github
       url: https://github.com/CodeForAfrica
 secondaryNavigation:
+  copyright: © 2024 Code for Africa
   menus:
     - label: Privacy Policy
       href: https://cfa.dev.codeforafrica.org/privacy-policy
     - label: Imprint
       href: https://cfa.dev.codeforafrica.org/imprint
 connect:
-  title: "Follow Code for Africa on:"
+  title: ""
   links:
     - platform: Twitter
       url: https://twitter.com/Code4Africa

diff --git a/apps/engineeringblog/lib/data/index.ts b/apps/engineeringblog/lib/data/index.ts
@@ -72,6 +72,11 @@ export async function getContent(slug: string): Promise<ArticleProps> {
   };
 }
 
+type Menu = {
+  label: string;
+  href: string;
+};
+
 type ConnectPlatformProp =
   | "Facebook"
   | "Twitter"
@@ -85,28 +90,38 @@ type ConnectLinkProp = {
   url: string;
 };
 
-type ConnectProps = {
+export type ConnectProps = {
   title: string;
   links: ConnectLinkProp[];
 };
 
-type PrimaryNavigationProps = {
-  connect: ConnectPlatformProp;
+type NavigationProps = {
+  menus: Menu[];
 };
 
+interface PrimaryNavigationProps extends NavigationProps {
+  connect: ConnectPlatformProp;
+}
+
+interface SecondaryNavigationProps extends NavigationProps {
+  copyright: string;
+}
+
 type SettingsProps = {
   title: string;
   primaryNavigation: PrimaryNavigationProps;
+  secondaryNavigation: SecondaryNavigationProps;
   connect: ConnectProps;
 };
 
 async function readSettingsFile(filePath: string): Promise<SettingsProps> {
   const { data } = await readMdFile(filePath);
 
   return {
-    title: data.title,
-    primaryNavigation: data.primaryNavigation,
     connect: data.connect,
+    primaryNavigation: data.primaryNavigation,
+    secondaryNavigation: data.secondaryNavigation,
+    title: data.title,
   };
 }