diff --git a/apps/engineeringblog/app/StyledRoot.tsx b/apps/engineeringblog/app/StyledRoot.tsx deleted file mode 100644 index c86e74e25..000000000 --- a/apps/engineeringblog/app/StyledRoot.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; -import { ThemeProvider } from "@mui/material/styles"; -import theme from "@/engineeringblog/theme"; -import { CssBaseline } from "@mui/material"; - -export default function StyledRoot({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} - - ); -} diff --git a/apps/engineeringblog/app/apple-touch.png b/apps/engineeringblog/app/apple-touch.png new file mode 100644 index 000000000..451a89ef7 Binary files /dev/null and b/apps/engineeringblog/app/apple-touch.png differ diff --git a/apps/engineeringblog/app/favicon.ico b/apps/engineeringblog/app/favicon.ico index 718d6fea4..a1d054c5d 100644 Binary files a/apps/engineeringblog/app/favicon.ico and b/apps/engineeringblog/app/favicon.ico differ diff --git a/apps/engineeringblog/app/icon.png b/apps/engineeringblog/app/icon.png new file mode 100644 index 000000000..f47760d72 Binary files /dev/null and b/apps/engineeringblog/app/icon.png differ diff --git a/apps/engineeringblog/app/layout.tsx b/apps/engineeringblog/app/layout.tsx index c5049d60b..32ce49b59 100644 --- a/apps/engineeringblog/app/layout.tsx +++ b/apps/engineeringblog/app/layout.tsx @@ -1,14 +1,17 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import Navbar from "@/engineeringblog/components/Navbar"; +import { CssBaseline, ThemeProvider } from "@mui/material"; import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter"; -import StyledRoot from "./StyledRoot"; +import type { Metadata } from "next"; -const inter = Inter({ subsets: ["latin"] }); +import NavBar from "@/engineeringblog/components/NavBar"; +import theme from "@/engineeringblog/theme"; + +// TODO: blurWidth/blueHeight https://github.com/vercel/next.js/issues/56511 +import logoLight from "@/engineeringblog/assets/images/logo-light.png"; export const metadata: Metadata = { - title: "Code For Africa Engineering", - description: "The homepage of CFA engineering blog", + title: "Technology | Code for Africa", + description: + "Tech adventures in Africa's civic labs: Coding, innovating, and disrupting for good across the continent.", }; export default function RootLayout({ @@ -16,14 +19,21 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const logo = { + ...logoLight, + alt: "Technology | Code for Africa", + title: "Technology", + }; + return ( - + - - + + + {children} - + diff --git a/apps/engineeringblog/app/openGraphImage.jpg b/apps/engineeringblog/app/openGraphImage.jpg new file mode 100644 index 000000000..327e45f84 Binary files /dev/null and b/apps/engineeringblog/app/openGraphImage.jpg differ diff --git a/apps/engineeringblog/app/page.tsx b/apps/engineeringblog/app/page.tsx index 208faa4be..424794867 100644 --- a/apps/engineeringblog/app/page.tsx +++ b/apps/engineeringblog/app/page.tsx @@ -1,3 +1,9 @@ +import { Box, Container } from "@mui/material"; + export default function index() { - return
Homepage
; + return ( + + Homepage + + ); } diff --git a/apps/engineeringblog/app/robots.txt b/apps/engineeringblog/app/robots.txt new file mode 100644 index 000000000..2df101e7f --- /dev/null +++ b/apps/engineeringblog/app/robots.txt @@ -0,0 +1,6 @@ +# Disallow specifies the paths that are not allowed to be crawled by the robot. +User-agent: * +Disallow: / + + +# Generatedy by RoboShield (https://roboshield.trustlab.africa) diff --git a/apps/engineeringblog/assets/icons/Type=chevron-left, Size=24, Color=CurrentColor.svg b/apps/engineeringblog/assets/icons/Type=chevron-left, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..0b40930e2 --- /dev/null +++ b/apps/engineeringblog/assets/icons/Type=chevron-left, Size=24, Color=CurrentColor.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/engineeringblog/assets/icons/Type=menu, Size=24, Color=CurrentColor.svg b/apps/engineeringblog/assets/icons/Type=menu, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..2c00a8dcc --- /dev/null +++ b/apps/engineeringblog/assets/icons/Type=menu, Size=24, Color=CurrentColor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg b/apps/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..93fbad2f7 --- /dev/null +++ b/apps/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/engineeringblog/assets/images/logo-dark-mode.png b/apps/engineeringblog/assets/images/logo-dark-mode.png deleted file mode 100644 index 78594c18d..000000000 Binary files a/apps/engineeringblog/assets/images/logo-dark-mode.png and /dev/null differ diff --git a/apps/engineeringblog/assets/images/logo-dark.png b/apps/engineeringblog/assets/images/logo-dark.png new file mode 100644 index 000000000..570eda132 Binary files /dev/null and b/apps/engineeringblog/assets/images/logo-dark.png differ diff --git a/apps/engineeringblog/assets/images/logo-light-mode.png b/apps/engineeringblog/assets/images/logo-light-mode.png deleted file mode 100644 index 933495f49..000000000 Binary files a/apps/engineeringblog/assets/images/logo-light-mode.png and /dev/null differ diff --git a/apps/engineeringblog/assets/images/logo-light.png b/apps/engineeringblog/assets/images/logo-light.png new file mode 100644 index 000000000..ad5134108 Binary files /dev/null and b/apps/engineeringblog/assets/images/logo-light.png differ diff --git a/apps/engineeringblog/components/Logo/Logo.tsx b/apps/engineeringblog/components/Logo/Logo.tsx new file mode 100644 index 000000000..2f44cdc06 --- /dev/null +++ b/apps/engineeringblog/components/Logo/Logo.tsx @@ -0,0 +1,105 @@ +import { Link, Stack, SvgIcon } from "@mui/material"; +import { SxProps, Theme } from "@mui/material/styles"; +import Image, { ImageProps } from "next/image"; +import React from "react"; + +import PreviousIcon from "@/engineeringblog/assets/icons/Type=chevron-left, Size=24, Color=CurrentColor.svg"; + +export interface LogoProps extends ImageProps { + href?: string; + sx?: SxProps; + title?: string; +} + +const Logo = React.forwardRef(function Logo( + props: LogoProps, + ref: React.ForwardedRef, +) { + const { + alt, + href: hrefProp, + src, + sx, + title, + ...other // All next/image supported props + } = props; + const logoHref = title?.length ? "https://codeforafrica.org" : "/"; + + return ( + + ({ + "&>svg,&>img": { + transition: theme.transitions.create(["opacity", "transform"]), + }, + "&:hover": { + "&>svg,&>img": { + opacity: 0.65, + }, + "&>svg": { + transform: "translateX(-5px)", + }, + }, + })} + > + {title?.length ? ( + ({ + fill: { xs: "none" }, + fontSize: 32, + left: -24, + opacity: 0, + position: "absolute", + right: 0, + })} + > + + + ) : null} + {alt} + + {title?.length ? ( + ({ + display: "flex", + fontFamily: typography.fontFamilyMono, + transition: transitions.create(["opacity", "transform"]), + "&:hover": { + opacity: 0.65, + }, + })} + > + Technology + + ) : null} + + ); +}); + +export default Logo; diff --git a/apps/engineeringblog/components/Logo/index.ts b/apps/engineeringblog/components/Logo/index.ts new file mode 100644 index 000000000..ef29c030a --- /dev/null +++ b/apps/engineeringblog/components/Logo/index.ts @@ -0,0 +1,5 @@ +import type { LogoProps } from "./Logo"; +import Logo from "./Logo"; + +export type { LogoProps }; +export default Logo; diff --git a/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx new file mode 100644 index 000000000..1d7d74916 --- /dev/null +++ b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx @@ -0,0 +1,28 @@ +import { Grid } from "@mui/material"; +import React from "react"; + +import Logo from "@/engineeringblog/components/Logo"; +import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps"; + +const DesktopNavBar = React.forwardRef(function DesktopNavBar( + props: NavBarProps, + ref: React.ForwardedRef, +) { + const { logo, sx } = props; + + return ( + + + + + + ); +}); + +export default DesktopNavBar; diff --git a/apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts b/apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts new file mode 100644 index 000000000..3919164ee --- /dev/null +++ b/apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts @@ -0,0 +1,3 @@ +import DesktopNavBar from "./DesktopNavBar"; + +export default DesktopNavBar; diff --git a/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx new file mode 100644 index 000000000..52d0e2764 --- /dev/null +++ b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx @@ -0,0 +1,107 @@ +import { + Dialog, + DialogContent, + Grid, + IconButton, + Slide, + SlideProps, + SvgIcon, +} from "@mui/material"; +import { 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"; + +const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({ + marginTop: "49px", // NavBar has 1px bottom border + "& .MuiDialog-container": { + height: "100%", + }, + "& .MuiBackdrop-root": { + background: "transparent", + }, + "& .MuiDialogContent-root": { + padding: spacing(5), + color: palette.text.primary, + background: palette.background.default, + }, +})); + +interface TransitionProps extends SlideProps {} + +const Transition = React.forwardRef(function Transition( + props: TransitionProps, + ref, +) { + return ; +}); + +const MobileNavBar = React.forwardRef(function MobileNavBar( + props: NavBarProps, + ref: React.ForwardedRef, +) { + const { logo, sx } = props; + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + }; + const MenuActionIcon = open ? CloseIcon : MenuIcon; + + return ( + + + + + + + + + + + + + + + + ); +}); + +export default MobileNavBar; diff --git a/apps/engineeringblog/components/NavBar/MobileNavBar/index.ts b/apps/engineeringblog/components/NavBar/MobileNavBar/index.ts new file mode 100644 index 000000000..b19184643 --- /dev/null +++ b/apps/engineeringblog/components/NavBar/MobileNavBar/index.ts @@ -0,0 +1,3 @@ +import MobileNavBar from "./MobileNavBar"; + +export default MobileNavBar; diff --git a/apps/engineeringblog/components/NavBar/NavBar.tsx b/apps/engineeringblog/components/NavBar/NavBar.tsx new file mode 100644 index 000000000..56a5d281a --- /dev/null +++ b/apps/engineeringblog/components/NavBar/NavBar.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { NavBar as NavigationBar, Section } from "@commons-ui/core"; +import { + AppBarProps, + ToolbarProps, + alpha, + useScrollTrigger, + useTheme, +} from "@mui/material"; +import React from "react"; + +import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps"; +import DesktopNavBar from "./DesktopNavBar"; +import MobileNavBar from "./MobileNavBar"; + +interface ScrollStyleProps extends AppBarProps { + ToolbarProps: ToolbarProps; + children: React.ReactElement; +} + +function ScrollStyle({ children, sx, ...other }: ScrollStyleProps) { + const theme = useTheme(); + const trigger = useScrollTrigger({ + disableHysteresis: true, + threshold: 0, + }); + + return children + ? React.cloneElement(children, { + ...other, + sx: trigger + ? { + ...sx, + backgroundColor: alpha(theme.palette.background.default, 0.9), + borderBottom: `1px solid ${theme.palette.divider}`, + } + : sx, + }) + : null; +} + +function NavBar({ logo }: NavBarProps) { + return ( + + +
+ + +
+ + + ); +} + +export default NavBar; diff --git a/apps/engineeringblog/components/NavBar/NavBarProps.tsx b/apps/engineeringblog/components/NavBar/NavBarProps.tsx new file mode 100644 index 000000000..9f626be59 --- /dev/null +++ b/apps/engineeringblog/components/NavBar/NavBarProps.tsx @@ -0,0 +1,9 @@ +import { Theme, SxProps } from "@mui/material/styles"; +import { LogoProps } from "@/engineeringblog/components/Logo"; + +interface NavBarProps { + logo: LogoProps; + sx?: SxProps; +} + +export default NavBarProps; diff --git a/apps/engineeringblog/components/NavBar/index.ts b/apps/engineeringblog/components/NavBar/index.ts new file mode 100644 index 000000000..757a2207f --- /dev/null +++ b/apps/engineeringblog/components/NavBar/index.ts @@ -0,0 +1,5 @@ +import NavBar from "./NavBar"; +import type NavBarProps from "./NavBarProps"; + +export type { NavBarProps }; +export default NavBar; diff --git a/apps/engineeringblog/components/Navbar.tsx b/apps/engineeringblog/components/Navbar.tsx deleted file mode 100644 index 078e917de..000000000 --- a/apps/engineeringblog/components/Navbar.tsx +++ /dev/null @@ -1,40 +0,0 @@ -"use client"; - -import AppBar from "@mui/material/AppBar"; -import Box from "@mui/material/Box"; -import { useTheme } from "@mui/material/styles"; -import Toolbar from "@mui/material/Toolbar"; -import Typography from "@mui/material/Typography"; -import Image from "next/image"; -import { useMemo } from "react"; - -import cfaLogoDark from "@/engineeringblog/assets/images/logo-dark-mode.png"; -import cfaLogoLight from "@/engineeringblog/assets/images/logo-light-mode.png"; - -export default function Navbar() { - const theme = useTheme(); - const logo = useMemo(() => { - // Cannot dymaically import the image according to the docs that's why we must import both - // regardless of the theme palette mode. Leaving this here as a potential optimization in the future. - // - // https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images - // > Warning: Dynamic await import() or require() are not supported. The import must be static so it can be analyzed at build time. - - return theme.palette.mode === "light" ? cfaLogoLight : cfaLogoDark; - }, [theme.palette.mode]); - - return ( - - - - - CFA Logo - - - ENGINEERING - - - - - ); -} diff --git a/apps/engineeringblog/next.config.mjs b/apps/engineeringblog/next.config.mjs index 371c445b1..e2aecd6c1 100644 --- a/apps/engineeringblog/next.config.mjs +++ b/apps/engineeringblog/next.config.mjs @@ -3,6 +3,25 @@ import createMDX from "@next/mdx"; /** @type {import('next').NextConfig} */ const nextConfig = { pageExtensions: ["mdx", "tsx"], + reactStrictMode: true, + transpilePackages: ["@commons-ui/core", "@commons-ui/next"], + webpack: (config) => { + config.module.rules.push( + { + test: /\.svg$/i, + type: "asset", + resourceQuery: /url/, // *.svg?url + }, + { + test: /\.svg$/i, + issuer: /\.[jt]sx?$/, + resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url + use: ["@svgr/webpack"], + }, + ); + config.experiments = { ...config.experiments, topLevelAwait: true }; // eslint-disable-line no-param-reassign + return config; + }, }; const withMDX = createMDX({ diff --git a/apps/engineeringblog/package.json b/apps/engineeringblog/package.json index 6a43007da..00218ad5a 100644 --- a/apps/engineeringblog/package.json +++ b/apps/engineeringblog/package.json @@ -11,22 +11,24 @@ "clean": "rm -rf .next .turbo node_modules" }, "dependencies": { + "@commons-ui/core": "workspace:*", + "@commons-ui/next": "workspace:*", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mdx-js/loader": "^3.0.1", "@mdx-js/react": "^3.0.1", - "@mui/icons-material": "^5.16.1", "@mui/material": "^5.16.1", "@mui/material-nextjs": "^5.16.1", "@mui/utils": "^5.16.6", "@next/mdx": "^14.2.5", - "@types/mdx": "^2.0.13", "next": "^14.2.5", "react": "^18", "react-dom": "^18" }, "devDependencies": { + "@svgr/webpack": "^8.1.0", + "@types/mdx": "^2.0.13", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -37,5 +39,8 @@ "eslint-plugin-import": "^2.29.1", "prettier": "^3.3.3", "typescript": "^5" + }, + "engines": { + "node": "20.x" } } diff --git a/apps/engineeringblog/theme/index.ts b/apps/engineeringblog/theme/index.ts index fda604905..126bef355 100644 --- a/apps/engineeringblog/theme/index.ts +++ b/apps/engineeringblog/theme/index.ts @@ -1,20 +1,12 @@ "use client"; -import { createTheme, ThemeOptions } from "@mui/material"; +import { ThemeOptions, createTheme } from "@mui/material/styles"; import { deepmerge } from "@mui/utils"; -import { Merriweather, Open_Sans } from "next/font/google"; -const openSans = Open_Sans({ - weight: ["300", "400", "600", "700", "800"], - subsets: ["latin"], -}); - -const merriWeather = Merriweather({ - weight: ["300", "400", "700"], - subsets: ["latin"], -}); -const FONT_FAMILY_PRIMARY = openSans.style.fontFamily; -const FONT_FAMILY_SECONDARY = merriWeather.style.fontFamily; +const FONT_FAMILY_SANS = + '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'; +const FONT_FAMILY_MONO = + 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important'; const palette = { mode: "light", @@ -39,6 +31,17 @@ const breakpoints = { }, }; +declare module "@mui/material/styles" { + interface TypographyOptions { + fontFamilyMono: string; + } + interface Theme { + typography: { + fontFamilyMono: string; + }; + } +} + const theme = createTheme({ palette, breakpoints, @@ -52,99 +55,100 @@ const theme = createTheme({ unit: "px", }, typography: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, + fontFamilyMono: FONT_FAMILY_MONO, display1: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 300, lineHeight: 72 / 72, }, display2: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, lineHeight: 72 / 60, letterSpacing: "-0.04em", }, h1: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, letterSpacing: "-0.04em", }, h2: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, letterSpacing: "-0.04em", }, h3: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, letterSpacing: "-0.02em", }, h4: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, letterSpacing: "-0.02em", }, h5: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, letterSpacing: "-0.02em", }, h6: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 700, letterSpacing: "-0.02em", }, subheading: { - fontFamily: FONT_FAMILY_SECONDARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 300, }, subtitle1: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, }, subtitle2: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, }, body1: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, }, body2: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, }, body3: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, }, button: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 600, }, caption: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, lineHeight: 14 / 12, }, footer: { - fontFamily: FONT_FAMILY_PRIMARY, + fontFamily: FONT_FAMILY_SANS, fontStyle: "normal", fontWeight: 400, lineHeight: 14 / 12, @@ -373,10 +377,6 @@ deepmerge( body1: { fontSize: pxToRem(14), lineHeight: 23 / 14, - marginTop: pxToRem(28), - "&:first-of-type": { - marginTop: 0, - }, }, body1SemiBold: { ...theme.typography.body1, @@ -398,10 +398,6 @@ deepmerge( body2: { fontSize: pxToRem(16), lineHeight: 26 / 16, - marginTop: pxToRem(28), - "&:first-of-type": { - marginTop: 0, - }, }, body2SemiBold: { ...theme.typography.body2, diff --git a/apps/engineeringblog/tsconfig.json b/apps/engineeringblog/tsconfig.json index bb4124b36..d1475f39d 100644 --- a/apps/engineeringblog/tsconfig.json +++ b/apps/engineeringblog/tsconfig.json @@ -18,7 +18,9 @@ } ], "paths": { - "@/engineeringblog/*": ["./*"] + "@/engineeringblog/*": ["./*"], + "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], + "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], diff --git a/apps/engineeringblog/types.d.ts b/apps/engineeringblog/types.d.ts new file mode 100644 index 000000000..33ce257b0 --- /dev/null +++ b/apps/engineeringblog/types.d.ts @@ -0,0 +1,2 @@ +declare module "@commons-ui/core"; +declare module "@commons-ui/next"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ab6659c27..9303013f3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -97,7 +97,7 @@ importers: version: 1.0.7(@swc/core@1.7.6(@swc/helpers@0.5.5))(ajv@8.17.1)(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))(sass@1.69.4) '@payloadcms/db-mongodb': specifier: ^1.7.1 - version: 1.7.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.621.0))(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0))) + version: 1.7.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0))) '@payloadcms/plugin-cloud-storage': specifier: ^1.1.3 version: 1.1.3(@aws-sdk/client-s3@3.623.0)(@aws-sdk/lib-storage@3.623.0(@aws-sdk/client-s3@3.623.0))(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0))) @@ -133,7 +133,7 @@ importers: version: 1.9.4 migrate-mongo: specifier: ^11.0.0 - version: 11.0.0(mongodb@4.17.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.621.0))) + version: 11.0.0(mongodb@4.17.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))) monaco-editor: specifier: ^0.50.0 version: 0.50.0 @@ -903,6 +903,12 @@ importers: apps/engineeringblog: dependencies: + '@commons-ui/core': + specifier: workspace:* + version: link:../../packages/commons-ui-core + '@commons-ui/next': + specifier: workspace:* + version: link:../../packages/commons-ui-next '@emotion/cache': specifier: ^11.11.0 version: 11.13.1 @@ -918,9 +924,6 @@ importers: '@mdx-js/react': specifier: ^3.0.1 version: 3.0.1(@types/react@18.3.3)(react@18.3.1) - '@mui/icons-material': - specifier: ^5.16.1 - version: 5.16.6(@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/material': specifier: ^5.16.1 version: 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -933,9 +936,6 @@ importers: '@next/mdx': specifier: ^14.2.5 version: 14.2.6(@mdx-js/loader@3.0.1(webpack@5.93.0))(@mdx-js/react@3.0.1(@types/react@18.3.3)(react@18.3.1)) - '@types/mdx': - specifier: ^2.0.13 - version: 2.0.13 next: specifier: ^14.2.5 version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4) @@ -946,6 +946,12 @@ importers: specifier: ^18 version: 18.3.1(react@18.3.1) devDependencies: + '@svgr/webpack': + specifier: ^8.1.0 + version: 8.1.0(typescript@5.5.4) + '@types/mdx': + specifier: ^2.0.13 + version: 2.0.13 '@types/node': specifier: ^20 version: 20.14.14 @@ -18215,7 +18221,7 @@ snapshots: - utf-8-validate - webpack-dev-server - '@payloadcms/db-mongodb@1.7.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.621.0))(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))': + '@payloadcms/db-mongodb@1.7.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))': dependencies: bson-objectid: 2.0.4 deepmerge: 4.3.1 @@ -26985,7 +26991,7 @@ snapshots: braces: 3.0.3 picomatch: 2.3.1 - migrate-mongo@11.0.0(mongodb@4.17.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.621.0))): + migrate-mongo@11.0.0(mongodb@4.17.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))): dependencies: cli-table3: 0.6.5 commander: 9.5.0