A single page starter template for cafes utilising Gatsby, Contentful and LeafletJS
🚀 Here is a live demo of the website
These are the Contentful Content Models which make up the menu section of the site:
Create a .env file in your root directory:
CONTENTFUL_SPACEID=YOUR_SPACE_ID
CONTENTFUL_ACCESS_TOKEN=YOUR_ACCESS_TOKENInstall dependencies:
npm install
To add your instagram username, change the gatsby-config.js file:
{
resolve: `gatsby-source-instagram`,
options: {
username: `YOUR_INSTAGRAM_USERNAME`,
},
},To add your business' coordinates onto the map, change the index.js file:
{typeof window !== 'undefined' &&
<LeafletMap
position={[55.952103, -3.196175]} // Your Coordinates
zoom={18} // Zoom Level
markerText={"Local Cafe, 65 Park Row"} // Icon text
/>
}IMPORTANT NOTE: In order for the site to run, Contentful has to set up in exactly as shown in the pictures above. If you want to create different content models then some static queries and files will have to be updated or this will cause an error. These queries can be found in the following files: breakfast.js lunch.js hotDrinks.js coldDrink.js
Any questions or problems please open an issue I'll be happy to help.
Happy Coding!! 💻
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.