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";