diff --git a/apps/civicsignalblog/src/components/FooterLinks/FooterLinks.js b/apps/civicsignalblog/src/components/FooterLinks/FooterLinks.js
index 6565e62a4..24e4bac71 100644
--- a/apps/civicsignalblog/src/components/FooterLinks/FooterLinks.js
+++ b/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;
diff --git a/apps/civicsignalblog/src/components/FooterNavList/index.js b/apps/civicsignalblog/src/components/FooterNavList/index.js
index 36f6ddca5..48eae7e74 100644
--- a/apps/civicsignalblog/src/components/FooterNavList/index.js
+++ b/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;
diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js
index 6f7199b1f..a749513f8 100644
--- a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js
+++ b/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;
diff --git a/apps/civicsignalblog/src/components/NavListItem/NavListItem.snap.js b/apps/civicsignalblog/src/components/NavListItem/NavListItem.snap.js
deleted file mode 100644
index fd7260624..000000000
--- a/apps/civicsignalblog/src/components/NavListItem/NavListItem.snap.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[` renders unchanged 1`] = `
-
-
-
-`;
diff --git a/apps/civicsignalblog/src/components/NavListItem/NavListItem.test.js b/apps/civicsignalblog/src/components/NavListItem/NavListItem.test.js
deleted file mode 100644
index b1f7dd98b..000000000
--- a/apps/civicsignalblog/src/components/NavListItem/NavListItem.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createRender } from "@commons-ui/testing-library";
-import React from "react";
-
-import NavListItem from "./NavListItem";
-
-import theme from "@/civicsignalblog/theme";
-
-// eslint-disable-next-line testing-library/render-result-naming-convention
-const render = createRender({ theme });
-
-describe("", () => {
- it("renders unchanged", () => {
- const { container } = render();
- expect(container).toMatchSnapshot();
- });
-});
diff --git a/apps/codeforafrica/src/components/FooterLinks/FooterLinks.js b/apps/codeforafrica/src/components/FooterLinks/FooterLinks.js
index 61ee11c2a..678a76a83 100644
--- a/apps/codeforafrica/src/components/FooterLinks/FooterLinks.js
+++ b/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;
diff --git a/apps/codeforafrica/src/components/FooterNavList/index.js b/apps/codeforafrica/src/components/FooterNavList/index.js
index 2dc14a0cb..48eae7e74 100644
--- a/apps/codeforafrica/src/components/FooterNavList/index.js
+++ b/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;
diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js
index 6d897125d..303c467d1 100644
--- a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js
+++ b/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;
diff --git a/apps/codeforafrica/src/components/NavListItem/NavListItem.js b/apps/codeforafrica/src/components/NavListItem/NavListItem.js
deleted file mode 100644
index c40589b46..000000000
--- a/apps/codeforafrica/src/components/NavListItem/NavListItem.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { styled } from "@mui/material/styles";
-import React from "react";
-
-const NavListItemRoot = styled("li")({
- listStyle: "none",
-});
-
-const NavListItem = React.forwardRef(function NavListItem(props, ref) {
- return ;
-});
-
-export default NavListItem;
diff --git a/apps/codeforafrica/src/components/NavListItem/NavListItem.snap.js b/apps/codeforafrica/src/components/NavListItem/NavListItem.snap.js
deleted file mode 100644
index fd7260624..000000000
--- a/apps/codeforafrica/src/components/NavListItem/NavListItem.snap.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[` renders unchanged 1`] = `
-
-
-
-`;
diff --git a/apps/codeforafrica/src/components/NavListItem/NavListItem.test.js b/apps/codeforafrica/src/components/NavListItem/NavListItem.test.js
deleted file mode 100644
index 19d1d3e27..000000000
--- a/apps/codeforafrica/src/components/NavListItem/NavListItem.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createRender } from "@commons-ui/testing-library";
-import React from "react";
-
-import NavListItem from "./NavListItem";
-
-import theme from "@/codeforafrica/theme";
-
-// eslint-disable-next-line testing-library/render-result-naming-convention
-const render = createRender({ theme });
-
-describe("", () => {
- it("renders unchanged", () => {
- const { container } = render();
- expect(container).toMatchSnapshot();
- });
-});
diff --git a/apps/codeforafrica/src/components/NavListItem/index.js b/apps/codeforafrica/src/components/NavListItem/index.js
deleted file mode 100644
index abc33a899..000000000
--- a/apps/codeforafrica/src/components/NavListItem/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import NavListItem from "./NavListItem";
-
-export default NavListItem;
diff --git a/apps/engineeringblog/app/[slug]/page.tsx b/apps/engineeringblog/app/[slug]/page.tsx
index 6ffb5f4ac..5fbf3d326 100644
--- a/apps/engineeringblog/app/[slug]/page.tsx
+++ b/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);
diff --git a/apps/engineeringblog/app/layout.tsx b/apps/engineeringblog/app/layout.tsx
index f92b117da..af15d39c2 100644
--- a/apps/engineeringblog/app/layout.tsx
+++ b/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({
-
+
{children}
diff --git a/apps/engineeringblog/app/page.tsx b/apps/engineeringblog/app/page.tsx
index 27b4dcf5f..fbb489819 100644
--- a/apps/engineeringblog/app/page.tsx
+++ b/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();
diff --git a/apps/engineeringblog/components/Article/ArticleSxProps.tsx b/apps/engineeringblog/components/Article/ArticleSxProps.tsx
index 7a64a420e..7a889ced7 100644
--- a/apps/engineeringblog/components/Article/ArticleSxProps.tsx
+++ b/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;
}
export type { ArticleSxProps };
diff --git a/apps/engineeringblog/components/ArticleList/ArticleCard.tsx b/apps/engineeringblog/components/ArticleList/ArticleCard.tsx
index c0aa8980e..61f332857 100644
--- a/apps/engineeringblog/components/ArticleList/ArticleCard.tsx
+++ b/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,
diff --git a/apps/engineeringblog/components/ArticleList/ArticleList.tsx b/apps/engineeringblog/components/ArticleList/ArticleList.tsx
index 93e179d72..fd79540be 100644
--- a/apps/engineeringblog/components/ArticleList/ArticleList.tsx
+++ b/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(
diff --git a/apps/engineeringblog/components/Logo/Logo.tsx b/apps/engineeringblog/components/Logo/Logo.tsx
index daf8d1b42..643dc5f99 100644
--- a/apps/engineeringblog/components/Logo/Logo.tsx
+++ b/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"]),
},
diff --git a/apps/engineeringblog/components/Markdown/Markdown.tsx b/apps/engineeringblog/components/Markdown/Markdown.tsx
index e23bfcdd7..f77aa08ad 100644
--- a/apps/engineeringblog/components/Markdown/Markdown.tsx
+++ b/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 }) => (
);
-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 (
{markdown}
);
-});
+}
export default Markdown;
diff --git a/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx
index 1d7d74916..59118ca97 100644
--- a/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx
+++ b/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,
) {
- const { logo, sx } = props;
+ const { logo, menus, socialLinks, sx } = props;
return (
+
+
+
+
+
);
});
diff --git a/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx
index 52d0e2764..51845c2ff 100644
--- a/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx
+++ b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx
@@ -1,3 +1,4 @@
+import { Section } from "@commons-ui/core";
import {
Dialog,
DialogContent,
@@ -7,16 +8,17 @@ import {
SlideProps,
SvgIcon,
} from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { alpha, styled } from "@mui/material/styles";
import React from "react";
-import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps";
-import Logo from "@/engineeringblog/components/Logo";
-import CloseIcon from "@/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
import MenuIcon from "@/engineeringblog/assets/icons/Type=menu, Size=24, Color=CurrentColor.svg";
+import CloseIcon from "@/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
+import Logo from "@/engineeringblog/components/Logo";
+import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps";
+import NavBarNavList from "@/engineeringblog/components/NavBarNavList";
const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({
- marginTop: "49px", // NavBar has 1px bottom border
+ marginTop: "48px", // NavBar has 1px bottom border
"& .MuiDialog-container": {
height: "100%",
},
@@ -24,9 +26,8 @@ const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({
background: "transparent",
},
"& .MuiDialogContent-root": {
- padding: spacing(5),
color: palette.text.primary,
- background: palette.background.default,
+ background: alpha(palette.background.default, 0.95),
},
}));
@@ -43,7 +44,7 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(
props: NavBarProps,
ref: React.ForwardedRef,
) {
- const { logo, sx } = props;
+ const { logo, menus, socialLinks, sx } = props;
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
@@ -80,7 +81,7 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(
({
+ alignItems: "flex-start",
+ borderTop: `1px solid ${theme.palette.divider}`,
color: "inherit",
+ display: "flex",
justifyContent: "space-between",
- alignItems: "flex-start",
- }}
- >
+ m: 0,
+ p: 0,
+ })}
+ >
+
+
diff --git a/apps/engineeringblog/components/NavBar/NavBar.tsx b/apps/engineeringblog/components/NavBar/NavBar.tsx
index 56a5d281a..8513d0f1c 100644
--- a/apps/engineeringblog/components/NavBar/NavBar.tsx
+++ b/apps/engineeringblog/components/NavBar/NavBar.tsx
@@ -32,7 +32,7 @@ function ScrollStyle({ children, sx, ...other }: ScrollStyleProps) {
sx: trigger
? {
...sx,
- backgroundColor: alpha(theme.palette.background.default, 0.9),
+ backgroundColor: alpha(theme.palette.background.default, 0.95),
borderBottom: `1px solid ${theme.palette.divider}`,
}
: sx,
@@ -40,7 +40,7 @@ function ScrollStyle({ children, sx, ...other }: ScrollStyleProps) {
: null;
}
-function NavBar({ logo }: NavBarProps) {
+function NavBar({ logo, menus, socialLinks }: NavBarProps) {
return (
;
}
diff --git a/apps/engineeringblog/components/NavBarNavList/NavBarNavList.tsx b/apps/engineeringblog/components/NavBarNavList/NavBarNavList.tsx
new file mode 100644
index 000000000..09f1e613b
--- /dev/null
+++ b/apps/engineeringblog/components/NavBarNavList/NavBarNavList.tsx
@@ -0,0 +1,108 @@
+import { NavList, NavListItem, SocialMediaIconLink } from "@commons-ui/core";
+import { StyledLink as Link } from "@commons-ui/next";
+import type { LinkProps } from "@mui/material";
+import type { Theme } from "@mui/material/styles";
+import React from "react";
+
+interface NavListItemProps extends LinkProps {}
+
+interface Menu {
+ label: string;
+ href: string;
+}
+
+type SocialMediaPlatform =
+ | "Facebook"
+ | "Github"
+ | "Instagram"
+ | "LinkedIn"
+ | "Slack"
+ | "Twitter";
+
+interface SocialMediaLink {
+ platform: SocialMediaPlatform;
+ url: string;
+}
+
+interface Props {
+ NavListItemProps?: NavListItemProps;
+ direction?: string;
+ menus?: Menu[];
+ socialLinks?: SocialMediaLink[];
+}
+
+const NavBarNavList = React.forwardRef(function NavBarNavList(
+ props: Props,
+ ref: React.ForwardedRef,
+) {
+ const { NavListItemProps, direction, menus, socialLinks, ...other } = props;
+
+ return (
+
+ {menus?.map((item) => (
+ ({
+ borderBottom: {
+ xs: `1px solid ${theme.palette.divider}`,
+ md: "none",
+ },
+ py: { xs: 1, md: 0 },
+ mr: { xs: 0, md: 2.5 },
+ })}
+ >
+
+ {item.label}
+
+
+ ))}
+ {socialLinks?.map(({ platform, url }) => {
+ return (
+
+
+
+ );
+ })}
+
+ );
+});
+
+export type { Menu, SocialMediaLink, SocialMediaPlatform };
+export default NavBarNavList;
diff --git a/apps/engineeringblog/components/NavBarNavList/index.ts b/apps/engineeringblog/components/NavBarNavList/index.ts
new file mode 100644
index 000000000..2144496f6
--- /dev/null
+++ b/apps/engineeringblog/components/NavBarNavList/index.ts
@@ -0,0 +1,5 @@
+import type { Menu, SocialMediaLink } from "./NavBarNavList";
+import NavBarNavList from "./NavBarNavList";
+
+export type { Menu, SocialMediaLink };
+export default NavBarNavList;
diff --git a/apps/engineeringblog/content/site/settings.mdx b/apps/engineeringblog/content/site/settings.mdx
new file mode 100644
index 000000000..b13e27970
--- /dev/null
+++ b/apps/engineeringblog/content/site/settings.mdx
@@ -0,0 +1,37 @@
+---
+title: "Technology at Code for Africa"
+primaryNavigation:
+ menus:
+ - label: Engineering
+ href: "/"
+ - label: Design
+ href: "/"
+ - label: AI
+ href: "/"
+ - label: Security
+ href: "/"
+ socialLinks:
+ - platform: Github
+ url: https://github.com/CodeForAfrica
+secondaryNavigation:
+ 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:"
+ links:
+ - platform: Twitter
+ url: https://twitter.com/Code4Africa
+ - platform: Slack
+ url: https://code4africa.slack.com
+ - platform: Linkedin
+ url: https://www.linkedin.com/company/code-for-africa
+ - platform: Facebook
+ url: https://www.facebook.com/CodeForAfrica
+ - platform: Instagram
+ url: https://www.instagram.com/code4africa__/
+ - platform: Github
+ url: https://github.com/CodeForAfrica
+---
diff --git a/apps/engineeringblog/utils/index.ts b/apps/engineeringblog/lib/data/index.ts
similarity index 58%
rename from apps/engineeringblog/utils/index.ts
rename to apps/engineeringblog/lib/data/index.ts
index 3046a8851..7053ee2f4 100644
--- a/apps/engineeringblog/utils/index.ts
+++ b/apps/engineeringblog/lib/data/index.ts
@@ -17,9 +17,13 @@ export interface ArticleProps extends MdFileContentProps {
export type ArticleWithoutContentProps = Omit;
-async function readMdFile(filePath: string): Promise {
+async function readMdFile(filePath: string) {
const fileContent = await fs.readFile(filePath, "utf8");
- const { data, content } = matter(fileContent);
+ return matter(fileContent);
+}
+
+async function readArticleFile(filePath: string): Promise {
+ const { data, content } = await readMdFile(filePath);
return {
title: data.title,
@@ -37,7 +41,7 @@ export async function getAllContents(): Promise {
.filter((fileName) => fileName.endsWith(".mdx"))
.map(async (fileName) => {
const filePath = path.join(contentDir, fileName);
- const { content, ...fileContent } = await readMdFile(filePath);
+ const { content, ...fileContent } = await readArticleFile(filePath);
return {
...fileContent,
@@ -60,10 +64,53 @@ export async function getAllContents(): Promise {
export async function getContent(slug: string): Promise {
const filePath = path.join(process.cwd(), "content", `${slug}.mdx`);
- const fileContent = await readMdFile(filePath);
+ const fileContent = await readArticleFile(filePath);
return {
...fileContent,
slug,
};
}
+
+type ConnectPlatformProp =
+ | "Facebook"
+ | "Twitter"
+ | "Instagram"
+ | "Linkedin"
+ | "Github"
+ | "Slack";
+
+type ConnectLinkProp = {
+ platform: ConnectPlatformProp;
+ url: string;
+};
+
+type ConnectProps = {
+ title: string;
+ links: ConnectLinkProp[];
+};
+
+type PrimaryNavigationProps = {
+ connect: ConnectPlatformProp;
+};
+
+type SettingsProps = {
+ title: string;
+ primaryNavigation: PrimaryNavigationProps;
+ connect: ConnectProps;
+};
+
+async function readSettingsFile(filePath: string): Promise {
+ const { data } = await readMdFile(filePath);
+
+ return {
+ title: data.title,
+ primaryNavigation: data.primaryNavigation,
+ connect: data.connect,
+ };
+}
+
+export async function getSettings(): Promise {
+ const filePath = path.join(process.cwd(), "content", "site", "settings.mdx");
+ return readSettingsFile(filePath);
+}
diff --git a/apps/engineeringblog/next.config.mjs b/apps/engineeringblog/next.config.mjs
index e2aecd6c1..378cf0147 100644
--- a/apps/engineeringblog/next.config.mjs
+++ b/apps/engineeringblog/next.config.mjs
@@ -6,19 +6,24 @@ const nextConfig = {
reactStrictMode: true,
transpilePackages: ["@commons-ui/core", "@commons-ui/next"],
webpack: (config) => {
+ const fileLoaderRule = config.module.rules.find((rule) =>
+ rule.test?.test?.(".svg"),
+ );
config.module.rules.push(
{
+ ...fileLoaderRule,
test: /\.svg$/i,
- type: "asset",
resourceQuery: /url/, // *.svg?url
},
{
test: /\.svg$/i,
- issuer: /\.[jt]sx?$/,
- resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+ issuer: fileLoaderRule.issuer,
+ resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
use: ["@svgr/webpack"],
},
);
+ // Since *.svg files are now handled ☝️, we can safely ignore file loader rule.
+ fileLoaderRule.exclude = /\.svg$/i;
config.experiments = { ...config.experiments, topLevelAwait: true }; // eslint-disable-line no-param-reassign
return config;
},
diff --git a/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx b/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx
index 1e512333d..737af8bf0 100644
--- a/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx
+++ b/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx
@@ -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 type { LinkProps } from "@mui/material";
import React from "react";
-import NavListItem from "@/roboshield/components/NavListItem";
-
interface NavListItemProps extends LinkProps {}
interface Menu {
diff --git a/apps/roboshield/src/components/NavListItem/NavListItem.tsx b/apps/roboshield/src/components/NavListItem/NavListItem.tsx
deleted file mode 100644
index e39b2fb45..000000000
--- a/apps/roboshield/src/components/NavListItem/NavListItem.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { styled } from "@mui/material/styles";
-import type { SxProps, Theme } from "@mui/material/styles";
-import React from "react";
-
-const NavListItemRoot = styled("li")({
- listStyle: "none",
-});
-
-interface NavListItemProps {
- children?: React.ReactNode;
- sx?: SxProps;
-}
-
-const NavListItem = React.forwardRef(function NavListItem(
- props: NavListItemProps,
- ref: React.ForwardedRef,
-) {
- return ;
-});
-
-export default NavListItem;
diff --git a/apps/roboshield/src/components/NavListItem/index.ts b/apps/roboshield/src/components/NavListItem/index.ts
deleted file mode 100644
index abc33a899..000000000
--- a/apps/roboshield/src/components/NavListItem/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import NavListItem from "./NavListItem";
-
-export default NavListItem;
diff --git a/apps/vpnmanager/src/components/NavBarNavList/NavBarNavList.tsx b/apps/vpnmanager/src/components/NavBarNavList/NavBarNavList.tsx
index b3768031e..f75bb15db 100644
--- a/apps/vpnmanager/src/components/NavBarNavList/NavBarNavList.tsx
+++ b/apps/vpnmanager/src/components/NavBarNavList/NavBarNavList.tsx
@@ -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 type { LinkProps } from "@mui/material";
import React from "react";
-import NavListItem from "@/vpnmanager/components/NavListItem";
-
interface NavListItemProps extends LinkProps {}
interface Menu {
diff --git a/apps/vpnmanager/src/components/NavListItem/NavListItem.tsx b/apps/vpnmanager/src/components/NavListItem/NavListItem.tsx
deleted file mode 100644
index e39b2fb45..000000000
--- a/apps/vpnmanager/src/components/NavListItem/NavListItem.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { styled } from "@mui/material/styles";
-import type { SxProps, Theme } from "@mui/material/styles";
-import React from "react";
-
-const NavListItemRoot = styled("li")({
- listStyle: "none",
-});
-
-interface NavListItemProps {
- children?: React.ReactNode;
- sx?: SxProps;
-}
-
-const NavListItem = React.forwardRef(function NavListItem(
- props: NavListItemProps,
- ref: React.ForwardedRef,
-) {
- return ;
-});
-
-export default NavListItem;
diff --git a/apps/vpnmanager/src/components/NavListItem/index.ts b/apps/vpnmanager/src/components/NavListItem/index.ts
deleted file mode 100644
index abc33a899..000000000
--- a/apps/vpnmanager/src/components/NavListItem/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import NavListItem from "./NavListItem";
-
-export default NavListItem;
diff --git a/apps/civicsignalblog/src/components/NavListItem/NavListItem.js b/packages/commons-ui-core/src/NavListItem/NavListItem.js
similarity index 95%
rename from apps/civicsignalblog/src/components/NavListItem/NavListItem.js
rename to packages/commons-ui-core/src/NavListItem/NavListItem.js
index c40589b46..6279865bb 100644
--- a/apps/civicsignalblog/src/components/NavListItem/NavListItem.js
+++ b/packages/commons-ui-core/src/NavListItem/NavListItem.js
@@ -1,3 +1,5 @@
+"use client";
+
import { styled } from "@mui/material/styles";
import React from "react";
diff --git a/apps/civicsignalblog/src/components/NavListItem/index.js b/packages/commons-ui-core/src/NavListItem/index.js
similarity index 100%
rename from apps/civicsignalblog/src/components/NavListItem/index.js
rename to packages/commons-ui-core/src/NavListItem/index.js
diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js b/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js
index 28bb59dc3..a06acb5f4 100644
--- a/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js
+++ b/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js
@@ -1,3 +1,5 @@
+"use client";
+
import { Link, SvgIcon } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js
index 785ce5396..dab74f109 100644
--- a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js
+++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js
@@ -1,3 +1,5 @@
+"use client";
+
import PropTypes from "prop-types";
import React from "react";
diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.js
index 67fd017d4..ff63dcbda 100644
--- a/packages/commons-ui-core/src/StayInTouch/StayInTouch.js
+++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.js
@@ -1,3 +1,5 @@
+"use client";
+
import { Stack } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
diff --git a/packages/commons-ui-core/src/index.js b/packages/commons-ui-core/src/index.js
index 867d144b3..6e7cc784e 100644
--- a/packages/commons-ui-core/src/index.js
+++ b/packages/commons-ui-core/src/index.js
@@ -4,6 +4,7 @@ export * from "./styles";
export { default as ImageButton } from "./ImageButton";
export { default as NavBar } from "./NavBar";
export { default as NavList } from "./NavList";
+export { default as NavListItem } from "./NavListItem";
export { default as RichTypography } from "./RichTypography";
export { default as Section } from "./Section";
export { default as SocialMediaIconLink } from "./SocialMediaIconLink";