fix(ui): fix several non responsive elements (#43)

gatsby-node.js

@@ -18,43 +18,3 @@ require("ts-node").register({
 });
 
 // Import typescript files below
-
-exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions;
-
-  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`);
-
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___date] }
-        limit: 1000
-      ) {
-        edges {
-          node {
-            frontmatter {
-              slug
-            }
-          }
-        }
-      }
-    }
-  `);
-
-  // Handle errors
-  if (result.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`);
-    return;
-  }
-
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-    createPage({
-      component: blogPostTemplate,
-      context: {
-        // additional data can be passed via context
-        slug: node.frontmatter.slug,
-      },
-      path: node.frontmatter.slug,
-    });
-  });
-};

src/components/presentation.tsx

@@ -1,10 +1,11 @@
-import { Box, Grid } from "@material-ui/core";
+import { Box, Grid, Theme } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
 import { graphql, StaticQuery } from "gatsby";
 import Img from "gatsby-image";
 import React, { FC } from "react";
 
 import { presentationData } from "../display-data/presentation-data";
+import { makeStyles } from "@material-ui/styles";
 
 export const imageQuery = graphql`
   query {
@@ -18,29 +19,38 @@ export const imageQuery = graphql`
   }
 `;
 
-const Presentation: FC = () => (
-  <StaticQuery
-    query={imageQuery}
-    render={(data) => (
-      <Grid container spacing={1} alignItems="center">
-        <Grid item md={6}>
-          <Grid container spacing={6}>
-            {presentationData.map((presentationItem) => (
-              <Grid item md={6} key={presentationItem.title}>
-                <Typography variant="h6" color="textPrimary">
-                  <Box>{presentationItem.logo}</Box>
-                  <Box>{presentationItem.title}</Box>
-                </Typography>
-              </Grid>
-            ))}
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    width: "100%",
+  },
+}));
+
+const Presentation: FC = () => {
+  const classes = useStyles();
+  return (
+    <StaticQuery
+      query={imageQuery}
+      render={(data) => (
+        <Grid container spacing={1} alignItems="center" justify="center">
+          <Grid item md={6}>
+            <Grid container spacing={6} justify="center">
+              {presentationData.map((presentationItem) => (
+                <Grid item md={6} key={presentationItem.title}>
+                  <Typography variant="h6" color="textPrimary">
+                    <Box>{presentationItem.logo}</Box>
+                    <Box>{presentationItem.title}</Box>
+                  </Typography>
+                </Grid>
+              ))}
+            </Grid>
+          </Grid>
+          <Grid item md={6} className={classes.root}>
+            <Img fluid={data.file.childImageSharp.fluid} />
           </Grid>
         </Grid>
-        <Grid item md={6}>
-          <Img fluid={data.file.childImageSharp.fluid} />
-        </Grid>
-      </Grid>
-    )}
-  />
-);
+      )}
+    />
+  );
+};
 
 export default Presentation;

src/pages/co-construction.mdx

@@ -1,7 +1,20 @@
 import SEO from "../components/seo";
+import Img from "gatsby-image";
 
 <SEO title="Co-construction" />
 
+export const imageQuery = graphql`
+  query {
+    file(relativePath: { eq: "openlab.jpg" }) {
+      childImageSharp {
+        fluid(maxWidth: 600, maxHeight: 320) {
+          ...GatsbyImageSharpFluid
+        }
+      }
+    }
+  }
+`;
+
 <div align="center">
     <h1>Co-construction</h1>
 </div>
@@ -38,7 +51,7 @@ limité.
 ### Photos des openlabs précédents
 
 <div align="center">
-    <img src="images/openlab/openlab1.jpg" width="800px" alt="openlab Archifiltre"/>
+    <Img fluid={props.data.file.childImageSharp.fluid} alt="Openlab Archifiltre"/>
 </div>
 
 ## Devenez ambassadeur·drice·s Archifiltre !

src/pages/telechargements.tsx

@@ -36,7 +36,7 @@ const Telechargements: FC = () => (
             <Button
               color="primary"
               component={GatsbyLink}
-              to="/changelog"
+              to="/produit"
               size="small"
             >
               Nouveautés