Add metadata for restaurants

gatsby-node.js

@@ -1,4 +1,5 @@
 const path = require(`path`);
+const fs = require(`fs`);
 const { createFilePath } = require(`gatsby-source-filesystem`);
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
@@ -29,12 +30,17 @@ exports.createPages = async({ graphql, actions }) => {
     }
   `);
   result.data.allDataCsv.edges.forEach(({ node }) => {
+    const fileName = node.fields.slug.slice(1, -1);
+    const metadata = JSON.parse(
+      fs.readFileSync(`./metadata/${fileName}.json`, 'utf-8')
+    );
     createPage({
       path: node.fields.slug,
       component: path.resolve(`./src/templates/restaurant.jsx`),
       context: {
         // Data passed to context is available
         // in page queries as GraphQL variables.
+        metadata,
         slug: node.fields.slug
       }
     });

metadata/demo.json

@@ -0,0 +1,10 @@
+{
+  "restaurantName": "My restaurant",
+  "restaurantLogo": "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80",
+  "restaurantDescription": "This is a story about a humble restaurant. Everybody wanted burgers, so we made burgers. Then they wanted beer, so we served beer. Now we are a cool restaurant somewhere with food and beer and music and dance, dance, dance with your bellies full of mead and meat.",
+  "restaurantFooter": "Cool restaurant located at a place far far away. Owned by: Chew Bacca",
+  "instagramLink": "https://instagram.com/my-restaurant",
+  "facebookLink": "https://facebook.com/my-restaurant",
+  "twitterLink": "https://twitter.com/my-restaurant",
+  "websiteLink": "https://my-restaurant.com"
+}

metadata/other.json

@@ -0,0 +1,8 @@
+{
+  "restaurantName": "The pizza corner",
+  "restaurantLogo": "https://images.unsplash.com/photo-1574071318508-1cdbab80d002?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
+  "restaurantDescription": "This is a story about a little Italian pizzeria on 0th street. Everybody wanted burgers, so we made tomato ketchup. Then they wanted beer, so we served wine. Now we are another restaurant somewhere with pizza. Lots of pizza, friends. We serve you all the pizza we can make. Come and taste that sweet sweet pepperoni.",
+  "restaurantFooter": "Pizza house located on 0th street. Owned by: Han Solo",
+  "instagramLink": "https://instagram.com/my-restaurant",
+  "facebookLink": "https://facebook.com/my-restaurant"
+}

src/components/addView.jsx

@@ -37,7 +37,7 @@ const AddView = ({
             </div>
           }
           <h1 className="text-3xl text-center">{selectedItem.name}</h1>
-          <p className="text-md pt-2 pb-4 text-gray-800">{selectedItem.description}</p>
+          <p className="text-md pt-2 px-4 pb-4 text-gray-800">{selectedItem.description}</p>
           {
             withVariations ? (
               <div className="flex flex-col divide-y-2 divide-gray-300 divide-double w-full">

src/components/categoryView.jsx

@@ -5,15 +5,20 @@ import { changeView } from '../state';
 
 const CategoryView = ({
   categories,
-  title = '',
+  metadata,
   changeView
 }) => {
   return (
     <>
       <div>
-        <div className="flex flex-col items-center mt-2 mb-4">
-          {/* TODO: Add custom HTML etc. */}
-          <h1 className="text-3xl text-center">My restaurant</h1>
+        <div className="flex flex-col items-center mt-2 mb-2">
+          <div
+            className="max-h-64 max-w-64 p-4 bg-cover rounded-lg inline-block mb-4 object-contain"
+          >
+            <img src={metadata.restaurantLogo} alt="" />
+          </div>
+          <h1 className="text-3xl text-center mb-4">{metadata.restaurantName}</h1>
+          <p className="px-4 mb-4 text-gray-800 text-sm">{metadata.restaurantDescription}</p>
         </div>
         <div className="flex flex-col divide-y-2 divide-gray-300 divide-double">
           {
@@ -32,15 +37,41 @@ const CategoryView = ({
         </div>
       </div>
       <div>
-        <p className="text-gray-700 text-sm text-center mt-4 mb-2">Cool restaurant located at a place far far away</p>
+        <p className="text-gray-700 text-sm text-center mt-4 mb-8 px-4">{metadata.restaurantFooter}</p>
+        <div className="flex flex-row justify-evenly mb-2">
+          {
+            Boolean(metadata.instagramLink && metadata.instagramLink.trim()) &&
+            <a href={metadata.instagramLink} rel="nofollow noreferrer" target="_blank">
+              <img src="/instagram.svg" alt="Instagram" />
+            </a>
+          }
+          {
+            Boolean(metadata.facebookLink && metadata.facebookLink.trim()) &&
+            <a href={metadata.facebookLink} rel="nofollow noreferrer" target="_blank">
+              <img src="/facebook.svg" alt="Facebook" />
+            </a>
+          }
+          {
+            Boolean(metadata.twitterLink && metadata.twitterLink.trim()) &&
+            <a href={metadata.twitterLink} rel="nofollow noreferrer" target="_blank">
+              <img src="/twitter.svg" alt="Twitter" />
+            </a>
+          }
+          {
+            Boolean(metadata.websiteLink && metadata.websiteLink.trim()) &&
+            <a href={metadata.websiteLink} rel="nofollow noreferrer" target="_blank">
+              <img src="/globe.svg" alt="Website" />
+            </a>
+          }
+        </div>
       </div>
     </>
   );
 };
 
 const mapStateToProps = state => {
   return {
-    // TODO: Clean me if you have to
+    metadata: state.menuMetadata
   };
 };
 

src/state/index.js

@@ -10,15 +10,17 @@ const initialState = {
     searchQuery: '',
     fromSearch: false
   },
-  menu: {}
+  menu: {},
+  menuMetadata: {}
 };
 
 const reducer = (state, action) => {
   switch (action.type) {
   case 'INIT_MENU':
     return {
       ...state,
-      menu: action.menu
+      menu: action.menu,
+      menuMetadata: action.metadata
     };
   case 'CHANGE_VIEW':
     return {
@@ -164,7 +166,7 @@ export const changeView = (view, selection) => {
   }
 };
 
-export const initializeMenu = rawMenuData => {
+export const initializeMenu = (rawMenuData, metadata) => {
   const menuData = rawMenuData
     .reduce((menu, rawItem) => {
       // Parse data
@@ -216,7 +218,8 @@ export const initializeMenu = rawMenuData => {
 
   return {
     type: 'INIT_MENU',
-    menu: menuData
+    menu: menuData,
+    metadata
   };
 };
 

src/templates/restaurant.jsx

@@ -12,15 +12,18 @@ import { initializeMenu, changeView } from '../state';
 
 const RestaurantPage = ({
   data,
+  pageContext: {
+    metadata
+  },
   initializeMenu,
   changeView,
   menuData,
   view,
   category
 }) => {
   useEffect(() => {
-    initializeMenu(data.dataCsv.menu);
-  }, [data, initializeMenu]);
+    initializeMenu(data.dataCsv.menu, metadata);
+  }, [data, initializeMenu, metadata]);
 
   useEffect(() => {
     if (!view) changeView('categories');
@@ -29,7 +32,7 @@ const RestaurantPage = ({
   if (!menuData || !menuData.categories || !menuData.categories.length) return null;
 
   return (
-    <Layout title="">
+    <Layout title={metadata.restaurantName}>
       {
         view === 'categories' &&
         <CategoryView