Merge branch 'main' into ui-outline-vpn-user-stats

Dockerfile

@@ -146,6 +146,7 @@ ARG NEXT_TELEMETRY_DISABLED \
   NEXT_PUBLIC_APP_NAME="charterAFRICA" \
   NEXT_PUBLIC_APP_URL \
   NEXT_PUBLIC_SENTRY_DSN \
+  NEXT_PUBLIC_SEO_DISABLED \
   # Payload (runtime)
   MONGO_URL \
   # TODO(koech): Standadise naming of Payload Secret. Our options:
@@ -167,6 +168,7 @@ COPY apps/charterafrica ./apps/charterafrica/
 
 # When building Next.js app, Next.js needs to connect to local Payload
 ENV PAYLOAD_PUBLIC_APP_URL=http://localhost:3000
+ENV NEXT_PUBLIC_SEO_DISABLED=${NEXT_PUBLIC_SEO_DISABLED}
 RUN pnpm --filter "./apps/charterafrica/" build-next
 
 # When building Payload app, Payload needs to have final app URL

apps/charterafrica/contrib/dokku/Dockerfile

@@ -1 +1 @@
-FROM codeforafrica/charterafrica-ui:0.1.31
+FROM codeforafrica/charterafrica-ui:0.1.33

apps/charterafrica/package.json

@@ -1,6 +1,6 @@
 {
   "name": "charterafrica",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "private": true,
   "author": "Code for Africa <[email protected]>",
   "description": "This is the official code for https://charter.africa site",

apps/engineeringblog/app/layout.tsx

@@ -1,13 +1,13 @@
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import type { Metadata } from "next";
 
+import logoLight from "@/engineeringblog/assets/images/logo-light.png";
 import Footer from "@/engineeringblog/components/Footer";
 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";
+import theme from "@/engineeringblog/theme";
 
 export const metadata: Metadata = {
   title: "Technology | Code for Africa",
@@ -20,7 +20,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { connect, primaryNavigation, secondaryNavigation } =
+  const { analytics, connect, primaryNavigation, secondaryNavigation } =
     await getSettings();
   // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
   const { blurWidth, blurHeight, ...logoProps } = logoLight;
@@ -46,6 +46,7 @@ export default async function RootLayout({
           </ThemeProvider>
         </AppRouterCacheProvider>
       </body>
+      <GoogleAnalytics gaId={analytics?.analyticsId} />
     </html>
   );
 }

apps/engineeringblog/content/site/settings.mdx

@@ -35,4 +35,6 @@ connect:
       url: https://www.instagram.com/code4africa__/
     - platform: Github
       url: https://github.com/CodeForAfrica
+analytics:
+  analyticsId: "G-TN1WGZVHLE"
 ---

apps/engineeringblog/lib/data/index.ts

@@ -107,17 +107,23 @@ interface SecondaryNavigationProps extends NavigationProps {
   copyright: string;
 }
 
+export type AnalyticsProps = {
+  analyticsId: string;
+};
+
 type SettingsProps = {
   title: string;
   primaryNavigation: PrimaryNavigationProps;
   secondaryNavigation: SecondaryNavigationProps;
   connect: ConnectProps;
+  analytics: AnalyticsProps;
 };
 
 async function readSettingsFile(filePath: string): Promise<SettingsProps> {
   const { data } = await readMdFile(filePath);
 
   return {
+    analytics: data.analytics,
     connect: data.connect,
     primaryNavigation: data.primaryNavigation,
     secondaryNavigation: data.secondaryNavigation,

apps/engineeringblog/package.json

@@ -22,6 +22,7 @@
     "@mui/material-nextjs": "catalog:",
     "@mui/utils": "catalog:",
     "@next/mdx": "catalog:",
+    "@next/third-parties": "catalog:",
     "date-fns": "catalog:",
     "gray-matter": "catalog:",
     "@types/mdx": "catalog:",