Merge pull request #791 from CodeForAfrica/blog/feature/initial-setup

Setup the blog project

.gitignore

@@ -8,6 +8,7 @@ node_modules
 
 # typescript
 dist/
+**/next-env.d.ts
 
 # testing
 coverage
@@ -34,6 +35,7 @@ yarn-error.log*
 
 # Editors
 **/.vscode
+**/.idea
 
 # Vercel
 .vercel

README.md

@@ -9,6 +9,12 @@
 | [**PesaYetu**](./apps/pesayetu/)             | Data to hold your government accountable                  |
 | [**RoboShield**](./apps/roboshield/)         | Guard your website against AI Bots                        |
 
+## Blogs
+| Name                                         | Description                                               |
+| -------------------------------------------- | --------------------------------------------------------- |
+| [**CivicSignal Research**](./apps/civicsignalblog/)       | View the latest analysis from CivicSignal team     |
+| [**TechLab**](./apps/engineeringblog/)       | View the latest stories from the CFA engineering team     |
+
 ## Get started
 
 This project is using [pnpm](https://pnpm.io/) as a package manager. To setup the monorepo run the following:

apps/engineeringblog/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ["next/core-web-vitals", "plugin:prettier/recommended"],
+  settings: {
+    "import/resolver": {
+      webpack: {
+        config: "./eslint.webpack.config.js",
+      },
+    },
+  },
+};

apps/engineeringblog/.lintstagedrc.js

@@ -0,0 +1,14 @@
+const path = require("path");
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(" --file ")}`;
+
+module.exports = {
+  // Since we don't have eslint json/md plugins installed in this app, we can't
+  // use the eslint to lint json,md here
+  "*.{json,md,mdx}": ["prettier --write"],
+  "*.{yaml,yml}": "prettier --write",
+  "*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,mdx}": [buildEslintCommand],
+};

apps/engineeringblog/README.md

@@ -0,0 +1,20 @@
+# TechLab
+
+Techlab is the official blog of the Code For Africa engineering team.
+
+## Getting started
+
+### Dependencies and development server
+
+```sh
+pnpm --filter engineeringblog install
+```
+
+Then run the development server:
+
+```sh
+pnpm --filter engineeringblog dev
+```
+
+You can then open [http://localhost:3000](http://localhost:3000) in your browser to see the
+product.

apps/engineeringblog/app/StyledRoot.tsx

@@ -0,0 +1,17 @@
+"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 (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}

apps/engineeringblog/app/articles/page.tsx

@@ -0,0 +1,3 @@
+export default function ArticlesHome() {
+  return <div>List of Articles</div>;
+}

apps/engineeringblog/app/articles/sample-1/demo-1.tsx

@@ -0,0 +1,17 @@
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+
+export function Demo1() {
+  return (
+    <div>
+      <h1>Demo 1</h1>
+      <p>This is a demo component with MUI components belows.</p>
+
+      <Stack spacing={2} direction="row">
+        <Button variant="text">Text</Button>
+        <Button variant="contained">Contained</Button>
+        <Button variant="outlined">Outlined</Button>
+      </Stack>
+    </div>
+  );
+}

apps/engineeringblog/app/articles/sample-1/page.mdx

@@ -0,0 +1,14 @@
+import { Demo1 } from "./demo-1";
+
+# Sample article 1
+
+This is a sample article 1.
+
+<Demo1 />
+
+Sample React component above imported by the following code:
+
+````tsx
+<Demo1 />
+```tsx
+````

apps/engineeringblog/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import Navbar from "@/engineeringblog/components/Navbar";
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
+import StyledRoot from "./StyledRoot";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Code For Africa Engineering",
+  description: "The homepage of CFA engineering blog",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AppRouterCacheProvider>
+          <StyledRoot>
+            <Navbar />
+            {children}
+          </StyledRoot>
+        </AppRouterCacheProvider>
+      </body>
+    </html>
+  );
+}

apps/engineeringblog/app/page.tsx

@@ -0,0 +1,3 @@
+export default function index() {
+  return <div>Homepage</div>;
+}

apps/engineeringblog/components/Navbar.tsx

@@ -0,0 +1,40 @@
+"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 (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static" color="transparent">
+        <Toolbar sx={{ justifyContent: "center" }}>
+          <Box sx={{ mr: 2, py: 2 }}>
+            <Image src={logo} alt="CFA Logo" height={60} />
+          </Box>
+          <Typography variant="h6" component="div">
+            ENGINEERING
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}

apps/engineeringblog/eslint.webpack.config.js

@@ -0,0 +1,25 @@
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        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"],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      "@/engineeringblog": path.resolve(__dirname, "./"),
+    },
+    extensions: [".ts", ".tsx"],
+  },
+};

apps/engineeringblog/mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from "mdx/types";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  };
+}

apps/engineeringblog/next.config.mjs

@@ -0,0 +1,12 @@
+import createMDX from "@next/mdx";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ["mdx", "tsx"],
+};
+
+const withMDX = createMDX({
+  // Add markdown plugins here, as desired
+});
+
+export default withMDX(nextConfig);

apps/engineeringblog/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "engineeringblog",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint-check": "next lint",
+    "lint": "next lint --fix",
+    "clean": "rm -rf .next .turbo node_modules"
+  },
+  "dependencies": {
+    "@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": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-webpack": "^0.13.8",
+    "eslint-plugin-import": "^2.29.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5"
+  }
+}