Merge pull request #884 from CodeForAfrica/feat/engineeringblog_navba…

…r_links

@/engineeringblog NavBar links

apps/civicsignalblog/src/components/FooterLinks/FooterLinks.js

@@ -1,10 +1,10 @@
+import { NavListItem } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
 import FooterNavList from "@/civicsignalblog/components/FooterNavList";
-import NavListItem from "@/civicsignalblog/components/NavListItem";
 
 const FooterLinks = React.forwardRef(function FooterLinks(props, ref) {
   const { primaryMenus, secondaryMenus, sx } = props;
@@ -46,8 +46,4 @@ FooterLinks.propTypes = {
   additionalLinks: PropTypes.shape({}),
 };
 
-FooterLinks.defaultProps = {
-  additionalLinks: undefined,
-};
-
 export default FooterLinks;

apps/civicsignalblog/src/components/FooterNavList/index.js

@@ -1,11 +1,9 @@
-import { NavList } from "@commons-ui/core";
+import { NavList, NavListItem } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import NavListItem from "@/civicsignalblog/components/NavListItem";
-
 function FooterNavList({ menus, children }) {
   if (!menus?.length) {
     return null;
@@ -58,8 +56,4 @@ FooterNavList.propTypes = {
   ),
 };
 
-FooterNavList.defaultProps = {
-  menus: undefined,
-};
-
 export default FooterNavList;

apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js

@@ -1,10 +1,8 @@
-import { NavList, SocialMediaIconLink } from "@commons-ui/core";
+import { NavList, NavListItem, SocialMediaIconLink } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import PropTypes from "prop-types";
 import React from "react";
 
-import NavListItem from "@/civicsignalblog/components/NavListItem";
-
 const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
   const { NavListItemProps, direction, menus, socialLinks, ...other } = props;
 

apps/codeforafrica/src/components/FooterLinks/FooterLinks.js

@@ -1,10 +1,10 @@
+import { NavListItem } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
 import FooterNavList from "@/codeforafrica/components/FooterNavList";
-import NavListItem from "@/codeforafrica/components/NavListItem";
 
 const FooterLinks = React.forwardRef(function FooterLinks(props, ref) {
   const { primaryMenus, secondaryMenus, sx } = props;
@@ -46,8 +46,4 @@ FooterLinks.propTypes = {
   additionalLinks: PropTypes.shape({}),
 };
 
-FooterLinks.defaultProps = {
-  additionalLinks: undefined,
-};
-
 export default FooterLinks;

apps/codeforafrica/src/components/FooterNavList/index.js

@@ -1,11 +1,9 @@
-import { NavList } from "@commons-ui/core";
+import { NavList, NavListItem } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import NavListItem from "@/codeforafrica/components/NavListItem";
-
 function FooterNavList({ menus, children }) {
   if (!menus?.length) {
     return null;
@@ -58,8 +56,4 @@ FooterNavList.propTypes = {
   ),
 };
 
-FooterNavList.defaultProps = {
-  menus: undefined,
-};
-
 export default FooterNavList;

apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js

@@ -1,10 +1,8 @@
-import { NavList, SocialMediaIconLink } from "@commons-ui/core";
+import { NavList, NavListItem, SocialMediaIconLink } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import PropTypes from "prop-types";
 import React from "react";
 
-import NavListItem from "@/codeforafrica/components/NavListItem";
-
 const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
   const { NavListItemProps, direction, menus, socialLinks, ...other } = props;
 

apps/engineeringblog/app/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 
 import Article from "@/engineeringblog/components/Article";
-import { ArticleProps, getContent } from "@/engineeringblog/utils";
+import { ArticleProps, getContent } from "@/engineeringblog/lib/data";
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const post: ArticleProps = await getContent(params.slug);

apps/engineeringblog/app/layout.tsx

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import NavBar from "@/engineeringblog/components/NavBar";
 import theme from "@/engineeringblog/theme";
 
+import { getSettings } from "@/engineeringblog/lib/data";
 import logoLight from "@/engineeringblog/assets/images/logo-light.png";
 
 export const metadata: Metadata = {
@@ -13,11 +14,12 @@ export const metadata: Metadata = {
     "Tech adventures in Africa's civic labs: Coding, innovating, and disrupting for good across the continent.",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const { primaryNavigation } = await getSettings();
   // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
   const { blurWidth, blurHeight, ...logoProps } = logoLight;
   const logo = {
@@ -32,7 +34,7 @@ export default function RootLayout({
         <AppRouterCacheProvider>
           <ThemeProvider theme={theme}>
             <CssBaseline enableColorScheme />
-            <NavBar logo={logo} />
+            <NavBar {...primaryNavigation} logo={logo} />
             {children}
           </ThemeProvider>
         </AppRouterCacheProvider>

apps/engineeringblog/app/page.tsx

@@ -1,7 +1,7 @@
 import { Section } from "@commons-ui/core";
 
 import ArticleList from "@/engineeringblog/components/ArticleList";
-import { getAllContents } from "@/engineeringblog/utils";
+import { getAllContents } from "@/engineeringblog/lib/data";
 
 export default async function index() {
   const posts = await getAllContents();

apps/engineeringblog/components/Article/ArticleSxProps.tsx

@@ -1,9 +1,9 @@
-import { SxProps } from "@mui/material/styles";
+import type { SxProps, Theme } from "@mui/material/styles";
 
-import { ArticleProps } from "@/engineeringblog/utils";
+import { ArticleProps } from "@/engineeringblog/lib/data";
 
 interface ArticleSxProps extends ArticleProps {
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
 }
 
 export type { ArticleSxProps };

apps/engineeringblog/components/ArticleList/ArticleCard.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mui/material";
 import React from "react";
 
-import { ArticleWithoutContentProps } from "@/engineeringblog/utils";
+import { ArticleWithoutContentProps } from "@/engineeringblog/lib/data";
 
 const ArticleCard = React.forwardRef(function ArticleCard(
   { title, publishedDate, featuredImage, slug }: ArticleWithoutContentProps,

apps/engineeringblog/components/ArticleList/ArticleList.tsx

@@ -4,7 +4,7 @@ import { Section } from "@commons-ui/core";
 import { Grid } from "@mui/material";
 import React from "react";
 
-import { ArticleWithoutContentProps } from "@/engineeringblog/utils";
+import { ArticleWithoutContentProps } from "@/engineeringblog/lib/data";
 import ArticleCard from "./ArticleCard";
 
 const ArticleList = React.forwardRef(function ArtilceList(

apps/engineeringblog/components/Logo/Logo.tsx

@@ -42,6 +42,7 @@ const Logo = React.forwardRef(function Logo(
         color="inherit"
         href={logoHref}
         sx={(theme: Theme) => ({
+          display: "flex",
           "&>svg,&>img": {
             transition: theme.transitions.create(["opacity", "transform"]),
           },

apps/engineeringblog/components/Markdown/Markdown.tsx

@@ -1,5 +1,4 @@
 // Addapted from https://amirardalan.com/blog/syntax-highlight-code-in-markdown
-import React from "react";
 import ReactMarkdown, { Components } from "react-markdown";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import bash from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
@@ -14,9 +13,9 @@ import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
 import typescript from "react-syntax-highlighter/dist/cjs/languages/prism/typescript";
 import CopyCodeButton from "./CopyCodeButton";
 
+import { Box } from "@mui/material";
 import rangeParser from "parse-numeric-range";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { Box } from "@mui/material";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
@@ -45,11 +44,11 @@ const Pre = ({ children }: { children: JSX.Element }) => (
   </Box>
 );
 
-const Markdown = React.forwardRef(function Markdown({
-  markdown,
-}: {
+type MarkdownProps = {
   markdown: string;
-}) {
+};
+
+function Markdown({ markdown }: MarkdownProps) {
   const syntaxTheme = oneDark;
 
   const MarkdownComponents: Components = {
@@ -98,6 +97,6 @@ const Markdown = React.forwardRef(function Markdown({
   return (
     <ReactMarkdown components={MarkdownComponents}>{markdown}</ReactMarkdown>
   );
-});
+}
 
 export default Markdown;

apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx

@@ -1,14 +1,15 @@
-import { Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 
 import Logo from "@/engineeringblog/components/Logo";
 import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps";
+import NavBarNavList from "@/engineeringblog/components/NavBarNavList";
 
 const DesktopNavBar = React.forwardRef(function DesktopNavBar(
   props: NavBarProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { logo, sx } = props;
+  const { logo, menus, socialLinks, sx } = props;
 
   return (
     <Grid
@@ -21,6 +22,15 @@ const DesktopNavBar = React.forwardRef(function DesktopNavBar(
       <Grid item>
         <Logo {...logo} />
       </Grid>
+      <Grid item>
+        <Box component="nav" sx={{ justifyContent: "flex-end" }}>
+          <NavBarNavList
+            menus={menus}
+            socialLinks={socialLinks}
+            direction="row"
+          />
+        </Box>
+      </Grid>
     </Grid>
   );
 });