Another concepts file reorg

gatsby-node.js

@@ -1,9 +1,9 @@
 exports.createPages = async ({ actions }) => {
-	const conceptIds = ['flappy-tanooki', 'day-and-nite'];
+	const conceptIds = ['Flappy-Tanooki', 'Day-And-Nite'];
 	conceptIds.forEach((id) => {
 		actions.createPage({
 			path: `/concept/${id}`,
-			component: require.resolve('./src/pages/concepts/ConceptTemplate.js'),
+			component: require.resolve('./src/pages/ConceptTemplate.js'),
 			context: {
 				id,
 			},

src/pages/concepts/index.js → src/concepts-config.js

@@ -1,6 +1,6 @@
-import DayAndNite from './DayAndNite';
-import FlappyTanooki from './FlappyTanooki';
-import StartScreen from './StartScreen';
+import DayAndNite from './pages/DayAndNite';
+import FlappyTanooki from './pages/FlappyTanooki';
+import StartScreen from './pages/StartScreen';
 
 export default [
 	{
@@ -9,12 +9,12 @@ export default [
 		component: StartScreen,
 	},
 	{
-		id: 'flappy-tanooki',
+		id: 'Flappy-Tanooki',
 		name: 'Flappy Tanooki',
 		component: FlappyTanooki,
 	},
 	{
-		id: 'day-and-nite',
+		id: 'Day-And-Nite',
 		name: `Day And Nite`,
 		component: DayAndNite,
 	},

src/pages/concepts/ConceptTemplate.js → src/pages/ConceptTemplate.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import Layout from '../../components/layout';
-import Menu from '../../components/Menu';
+import Layout from '../components/layout';
+import Menu from '../components/Menu';
 import { navigate } from 'gatsby';
-import { SEO } from '../../components/seo';
-import Concepts from '.';
+import { SEO } from '../components/seo';
+import Concepts from '../concepts-config';
 
 /**
  * Template that renders the applicable concept component

src/pages/concepts/FlappyTanooki.js → src/pages/FlappyTanooki.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { withPrefix } from 'gatsby';
 import styled from 'styled-components';
-import MarioCurtainImg from '../../assets/mario-curtain.png';
+import MarioCurtainImg from '../assets/mario-curtain.png';
 
 const Container = styled.div`
 	background: url(${MarioCurtainImg});

src/pages/concepts/StartScreen.js → src/pages/StartScreen.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import COIN_SOUND_IMPORT from '../../assets/coin-sound.mp3';
-import Marquee from '../../components/Marquee';
+import COIN_SOUND_IMPORT from '../assets/coin-sound.mp3';
+import Marquee from '../components/Marquee';
 import { Link } from 'gatsby';
 
 const Container = styled.div`
@@ -162,8 +162,8 @@ const DefaultOptions = ({ setOptions } = {}) => (
 
 const ConceptOptions = ({ setOptions }) => (
 	<>
-		<InternalOption to='/concept/flappy-tanooki'>1 FLAPPY TANOOKI</InternalOption>
-		<InternalOption to='/concept/day-and-nite'>2 DAY AND NITE</InternalOption>
+		<InternalOption to='/concept/Flappy-Tanooki'>1 FLAPPY TANOOKI</InternalOption>
+		<InternalOption to='/concept/Day-And-Nite'>2 DAY AND NITE</InternalOption>
 		<ButtonOption onClick={() => setOptions(() => DefaultOptions)}>← MAIN MENU</ButtonOption>
 	</>
 );

src/pages/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StartScreen from './concepts/StartScreen';
+import StartScreen from './StartScreen';
 import Layout from '../components/layout';
 import { SEO } from '../components/seo';