Contrib modules/projects listing page

src/components/contrib-module.js

@@ -0,0 +1,70 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { Link } from 'gatsby-material-ui-components';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import WarningIcon from '@material-ui/icons/Warning';
+import InfoIcon from '@material-ui/icons/Info';
+import Paper from '@material-ui/core/Paper';
+import theme from '../theme';
+
+const useStyles = makeStyles({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  title: {
+    fontSize: '1.3rem !important',
+    marginTop: '0 !important',
+  },
+  pos: {
+    marginBottom: 12,
+  },
+  consideration: {
+    background: theme.palette.primary.light,
+    display: 'flex',
+    alignItems: 'center',
+    padding: '5px',
+    fontSize: '.8rem',
+    lineHeight: '1.2',
+    marginTop: '.5rem',
+    color: 'white',
+  },
+  'consideration--warning': {
+    background: '#ffc107'
+  },
+  icon: {
+    marginRight: '5px',
+    fontSize: '1.3rem'
+  }
+});
+
+export default function ContribModule({module}) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <CardContent className={classes.content}>
+        <Typography variant="h6" component="h2" className={classes.title}>{module.name}</Typography>
+        <Typography variant="body2" component="p" color='textSecondary'>{module.description}</Typography>
+        {module.considerations && module.considerations.map(info => {
+          return (
+            <Paper className={classes.consideration + ' ' + classes['consideration--' + info.type]}>
+              { info.type === 'info' && (<InfoIcon className={classes.icon} />)}
+              { info.type === 'warning' && (<WarningIcon className={classes.icon} />)}
+              {info.value}
+            </Paper>
+          )
+        })}
+      </CardContent>
+      <CardActions>
+        <Button component={Link} to={'https://www.drupal.org/project/' + module['id']} size="small" variant='contained' color='primary'>Learn More</Button>
+      </CardActions>
+    </Card>
+  );
+}

src/content/config.yml

@@ -11,3 +11,4 @@ nav:
     - Press: community/press.md
     - Trademark: community/trademark.md
     - Donate: donate.md
+    - Contrib modules: community/modules

src/pages/community/modules/index.js

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { useEffect, useState } from "react";
+import { Helmet } from "react-helmet";
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Typography } from '@material-ui/core';
+import theme from '../../../theme';
+import ContribModule from '../../../components/contrib-module';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles({
+  main: {
+    '& h1': {
+      color: theme.palette.text.secondary,
+      fontWeight: 300,
+      fontSize: '2rem',
+      lineHeight: 1.3,
+      letterSpacing: '-.01em',
+      margin: '0 0 1.25rem',
+    },
+    '& h2': {
+      margin: '1.6rem 0 0.64rem',
+      fontSize: '1.5625rem',
+      fontWeight: 300,
+      lineHeight: 1.4,
+      letterSpacing: '-.01em',
+    }
+  },
+  modules: {
+    flexGrow: 1,
+  }
+});
+
+const ProjectsPage = () => {
+  const classes = useStyles();
+  const [contribModules, setContribModules] = useState([]);
+  useEffect(() => {
+    async function fetchData() {
+      const response = await fetch(`https://raw.githubusercontent.com/wotnak/farmos-community-projects/main/projects.json`)
+      const data = await response.json();
+      if (data.projects) {
+        setContribModules(data.projects)
+      }
+    }
+    fetchData();
+  }, []);
+  return (
+    <>
+      <Helmet title="Contrib modules"></Helmet>
+      <Box component='main' className={classes.main}>
+        <Typography variant='h1'>Contrib modules</Typography>
+        <Grid container className={classes.modules} spacing={2}>
+          {contribModules.length > 0 && contribModules.map(module => {
+            return (<Grid item xs={12} md={6}><ContribModule module={module} /></Grid>)
+          })}
+        </Grid>
+      </Box>
+    </>
+  );
+};
+
+export default ProjectsPage;