[WIP] Add frontend

.eslintrc.js

@@ -1,13 +1,13 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es2021": true
+    env: {
+        browser: true,
+        commonjs: true,
+        es2021: true,
+        ecmaVersion: true,
     },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 12
+    extends: 'eslint:recommended',
+    parserOptions: {
+        ecmaVersion: 12,
     },
-    "rules": {
-    }
-};
+    rules: {},
+}

gatsby-browser.js

@@ -1,7 +1,2 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/browser-apis/
- */
-
-// You can delete this file if you're not using it
+import './src/assets/fonts/Inter/Inter.css'
+import './src/assets/fonts/RobotoMono/RobotoMono.css'

gatsby-config.js

@@ -1,34 +1,56 @@
+const path = require('path')
+const colours = require('./src/constants/ui/colours')
+
+const title = 'Dev Resources API'
+
 module.exports = {
-  siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
-  },
-  plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
+    siteMetadata: {
+        title,
+        description: `The Dev Resources API.`,
+        author: 'Marcel Cruz',
     },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
-      },
-    },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
-  ],
+    plugins: [
+        `gatsby-plugin-react-helmet`,
+        `gatsby-transformer-sharp`,
+        `gatsby-plugin-sharp`,
+        `gatsby-transformer-remark`,
+        {
+            resolve: `gatsby-source-filesystem`,
+            options: {
+                path: `${__dirname}/src/markdown-pages`,
+                name: `markdown-pages`,
+            },
+        },
+        {
+            resolve: 'gatsby-plugin-root-import',
+            options: {
+                src: path.join(__dirname, 'src'),
+                fonts: path.join(__dirname, 'src/assets/fonts'),
+                images: path.join(__dirname, 'src/assets/images'),
+                components: path.join(__dirname, 'src/components'),
+                constants: path.join(__dirname, 'src/constants'),
+                pages: path.join(__dirname, 'src/pages'),
+                styles: path.join(__dirname, 'src/styles'),
+                utils: path.join(__dirname, 'src/utils'),
+            },
+        },
+        {
+            resolve: `gatsby-plugin-layout`,
+            options: {
+                component: require.resolve(`./src/components/layout.js`),
+            },
+        },
+        {
+            resolve: `gatsby-plugin-manifest`,
+            options: {
+                name: title,
+                short_name: title,
+                start_url: `/`,
+                background_color: colours.black,
+                theme_color: colours.black,
+                display: `standalone`,
+                icon: 'src/assets/images/favicon.png',
+            },
+        },
+    ],
 }

gatsby-node.js

@@ -1,7 +1,34 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/node-apis/
- */
+exports.createPages = async ({ actions, graphql, reporter }) => {
+    const { createPage } = actions
 
-// You can delete this file if you're not using it
+    const markdownTemplate = require.resolve(`./src/templates/markdown.js`)
+
+    const result = await graphql(`
+        {
+            allMarkdownRemark {
+                edges {
+                    node {
+                        frontmatter {
+                            slug
+                        }
+                    }
+                }
+            }
+        }
+    `)
+
+    if (result.errors) {
+        reporter.panicOnBuild(`Error while running GraphQL query.`)
+        return
+    }
+
+    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+        createPage({
+            path: node.frontmatter.slug,
+            component: markdownTemplate,
+            context: {
+                slug: node.frontmatter.slug,
+            },
+        })
+    })
+}