feat: add services

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log*
 
 # Sentry Auth Token
 .sentryclirc
+
+# Sentry Auth Token
+.sentryclirc

backend/filesystem.js

@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+import glob from 'glob';
+// const glob = require('glob')
+
+export async function getAllFiles(filePath) {
+    const contentDir = 'content'
+    const targetDir = filePath ? path.join(process.cwd(), contentDir, filePath) : path.join(process.cwd(), 'content')
+
+    return new Promise((resolve, reject) => {
+      glob(targetDir + '/**/*.md*', (err, files) => {
+        if (err) {
+          reject(err)
+        } else {
+          const relativeFiles = files.map((file) => {
+            const relativePath = path.relative(process.cwd(), file)
+            if (path.basename(file) === 'index.md') {
+                return path.dirname(relativePath.replace(contentDir , ""))
+            } else {
+            return relativePath.replace(contentDir , "")
+            }
+          })
+          resolve(relativeFiles.filter(Boolean))
+        }
+      })
+    })
+  }
+
+
+
+
+export async function getFileContent(filePath) {
+  try {
+    const absolutePath = path.join(process.cwd(), 'content', filePath)
+    const fileContent = fs.readFileSync(absolutePath, 'utf-8')
+    return fileContent
+  } catch (error) {
+    throw new Error('Failed to read the file: ' + error)
+  }
+}

components/TopBar.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import AppBar from '@mui/material/AppBar';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { Menu as MenuIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Link from '@mui/material/Link';
+import CloseIcon from "@mui/icons-material/Close";
+import { styled } from "@mui/material/styles";
+import logo from '../public/logos/airwalk-logo.png';
+const Logo = styled("img")({
+    display: "block",
+    width: "auto",
+    height: 30,
+  });
+
+function Topbar({
+    onNavButtonClick, navOpen, menu=false, back=false, topBarHeight=64 }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [activeMenu, setActiveMenu] = useState('');
+
+    const handleMenuOpen = (event, id) => {
+      setAnchorEl(event.currentTarget);
+      setActiveMenu(id);
+    };
+
+    const handleMenuClose = () => {
+      setAnchorEl(null);
+      setActiveMenu('');
+    };
+
+
+
+
+    return (
+      <AppBar position="fixed" color="white" elevation={0}>
+        <Toolbar>
+        {menu &&  <><IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={onNavButtonClick}
+          >
+            {navOpen ? <CloseIcon /> : <MenuIcon />}
+          </IconButton>
+          <Logo src={logo} alt="Airview" /></> }
+        {back && <Link href="/" sx={{ textDecoration: 'none' }}>
+            <ArrowBackIosNewOutlinedIcon color='text'/>
+          </Link>}
+
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          </Typography>
+
+          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none' }} onClick={(event) => handleMenuOpen(event, 'content')} >Content</Button>
+          <Menu
+            id="menu-content"
+            anchorEl={anchorEl}
+            open={activeMenu === 'content'}
+            onClose={handleMenuClose}
+            onClick={handleMenuClose}
+          >
+            <Link href="/etherpad" sx={{ textDecoration: 'none' }}>
+              <MenuItem>
+                Etherpads
+              </MenuItem>
+            </Link>
+          </Menu>
+          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none' }} onClick={(event) => handleMenuOpen(event, 'compliance')} >Compliance</Button>
+          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none' }} onClick={(event) => handleMenuOpen(event, 'applications')} >Applications</Button>
+
+        </Toolbar>
+      </AppBar>
+    );
+  };
+
+  export default Topbar;

components/airview-ui/aside-and-main/aside-and-main.js

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Container as MuiContainer, Box } from "@mui/material";
+
+export function AsideAndMainContainer({ children }) {
+  return (
+    <MuiContainer maxWidth={false} sx={{ paddingTop: 6, paddingBottom: 6 }}>
+      <Box sx={{ display: "flex" }}>{children}</Box>
+    </MuiContainer>
+  );
+}
+
+AsideAndMainContainer.propTypes = {
+  children: PropTypes.node,
+};
+
+export function Main({ children }) {
+  return (
+    <Box component="main" sx={{ flex: "1 1 auto" }}>
+      {children}
+    </Box>
+  );
+}
+
+Main.propTypes = {
+  children: PropTypes.node,
+};
+
+export function Aside({ children }) {
+  return (
+    <Box
+      component="aside"
+      sx={{ flex: "0 0 auto", width: 300, paddingLeft: 4 }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+Aside.propTypes = {
+  children: PropTypes.node,
+};

components/airview-ui/aside-and-main/index.js

@@ -0,0 +1 @@
+export { AsideAndMainContainer, Aside, Main } from "./aside-and-main";

components/airview-ui/index.js

@@ -0,0 +1,7 @@
+// export * from "./airview-ui-theme-provider";
+export * from "./top-bar";
+export * from "./navigation-drawer";
+export * from "./menu";
+export * from "./page-title";
+export * from "./aside-and-main";
+export * from "./styled-wysiwyg";

components/airview-ui/is-link-url-internal.js

@@ -0,0 +1,3 @@
+export function isLinkInternal(url) {
+  return /^\/(?!\/)/.test(url);
+}

components/airview-ui/menu/index.js

@@ -0,0 +1 @@
+export { Menu } from "./menu";

components/airview-ui/menu/menu.js

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Box,
+  Collapse,
+  IconButton,
+  Typography,
+  Skeleton,
+  Link,
+} from "@mui/material";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { isLinkInternal } from "../is-link-url-internal";
+
+export function Menu({
+  menuTitle,
+  menuTitleElement = "h3",
+  loading = false,
+  fetching = false,
+  menuItems,
+  collapsible = true,
+  initialCollapsed = true,
+  linkComponent,
+  currentRoute,
+  sx,
+  ...rest
+}) {
+  const [collapsed, setCollapsed] = useState(
+    collapsible ? initialCollapsed : false
+  );
+
+  return (
+    <Box
+      component="nav"
+      sx={{
+        ...(fetching && {
+          opacity: 0.5,
+          pointerEvents: "none",
+        }),
+        ...sx,
+      }}
+      {...rest}
+    >
+      <Box
+        component="header"
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 0,
+        }}
+      >
+        <Typography
+          component={menuTitleElement}
+          variant="subtitle2"
+          sx={{ display: "block", flex: "1 1 auto", fontSize: 16 }}
+        >
+          {loading ? <Skeleton width="90%" /> : menuTitle}
+        </Typography>
+
+        {collapsible && (
+          <IconButton
+            onClick={() => setCollapsed((prevState) => !prevState)}
+            size="medium"
+            aria-label={collapsed ? "Expand menu" : "Collapse menu"}
+            disabled={loading}
+            sx={{
+              marginLeft: 1,
+              padding: 0,
+              color: "primary.main",
+            }}
+          >
+            {collapsed ? (
+              <KeyboardArrowRightIcon fontSize="inherit" />
+            ) : (
+              <KeyboardArrowDownIcon fontSize="inherit" />
+            )}
+          </IconButton>
+        )}
+      </Box>
+
+      <Collapse in={!collapsed}>
+        {menuItems?.map(({ groupTitle, links }, index) => (
+          <Box aria-hidden={collapsed} key={index}>
+            {groupTitle && (
+              <Typography
+                component="span"
+                variant="subtitle2"
+                sx={{
+                  display: "block",
+                  marginTop: 2,
+                  marginBottom: -1,
+                  color: "text.secondary",
+                  textTransform: "uppercase",
+                  fontSize: 12,
+                }}
+              >
+                {loading ? <Skeleton width="90%" /> : groupTitle}
+              </Typography>
+            )}
+            <Box
+              component="ul"
+              sx={{
+                margin: 0,
+                marginTop: 2,
+                padding: 0,
+                listStyle: "none",
+                "& > li": {
+                  fontSize: 14,
+                  marginBottom: 1,
+                  color: "text.secondary",
+                },
+              }}
+            >
+              {loading
+                ? [...Array(6)].map((item, index) => (
+                    <Skeleton key={index} component="li" />
+                  ))
+                : links?.map(({ label, url }, index) => {
+                    return (
+                      <Box component="li" key={index}>
+                        <Link
+                          underline="hover"
+                          component={linkComponent}
+                          to={url}
+                          target={isLinkInternal(url) ? "_self" : "_blank"}
+                          sx={{
+                            ...(url === currentRoute && { fontWeight: "bold" }),
+                          }}
+                        >
+                          {label}
+                        </Link>
+                      </Box>
+                    );
+                  })}
+            </Box>
+          </Box>
+        ))}
+      </Collapse>
+    </Box>
+  );
+}
+
+Menu.propTypes = {
+  menuTitle: PropTypes.string.isRequired,
+  menuTitleElement: PropTypes.string,
+  loading: PropTypes.bool,
+  fetching: PropTypes.bool,
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      groupTitle: PropTypes.string,
+      links: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string.isRequired,
+          url: PropTypes.string.isRequired,
+        })
+      ).isRequired,
+    })
+  ).isRequired,
+  collapsible: PropTypes.bool,
+  initialCollapsed: PropTypes.bool,
+  linkComponent: PropTypes.any,
+  currentRoute: PropTypes.string,
+  sx: PropTypes.object,
+};

components/airview-ui/navigation-drawer/index.js

@@ -0,0 +1 @@
+export { NavigationDrawer } from "./navigation-drawer";