Product Analysis: Gatsby Contentful Photo Blog

Overview:

The Gatsby Contentful Photo Blog is a theme that allows users to set up their own personal photo blog using markdown, hashtags, and pagination. It requires a free Contentful account to get started and utilizes Gatsby and Contentful for development and production.

Features:

• Environment Variables: Uses environment variables to securely store and pass connection credentials for Contentful.
• Contentful Integration: Connects to Contentful and creates new content delivery tokens.
• GraphQL Query: Runs GraphQL queries to fetch and render posts from Contentful.
• Image Rendering: Utilizes Contentful's Image API and gatsby-plugin-image to render multiple variants of post images.
• Pagination: Implements pagination for the listing pages, allowing for navigation between different pages of posts.
• Post Detail Pages: Creates a separate detail page for each post, allowing users to view individual posts in more detail.
• Markdown Rendering: Uses the gatsby-transformer-remark plugin to render post markdown as HTML, both in the detail page and teaser.
• Detail Page Pagination: Adds previous and next buttons to the post detail page for easy navigation between posts.

Step 0 - Preparation:

1. Install dotenv: npm i dotenv
2. Add the following line to the top of your gatsby-config.js file:

   require('dotenv').config()
   

Step 1 - Connect to Contentful:

1. Create new content delivery tokens via https://app.contentful.com/spaces/YOUR_SPACE_ID/api/keys
2. Install the source plugin: npm i gatsby-source-contentful
3. Duplicate the .env.example file and rename it to .env.development and .env.production
4. Adjust the .env files:
   • Both should contain your Space ID
   • env.development should use your Content Preview API access token
   • Uncomment the line in env.development that sets the host to https://cpa.contentful.com
   • env.production should use your Content Delivery API access token
5. Enable the gatsby-source-contentful plugin in your gatsby-config.js file:

   plugins: [
     // ...
     {
       resolve: `gatsby-source-contentful`,
       options: {
         // ...
       },
     },
     // ...
   ]
   

Step 1b - Starting the server and executing the first GraphQL query:

1. Execute npm start to start the server.
2. Visit http://localhost:8000 to view the website.
3. Run the first GraphQL query to see all the posts added to Contentful.

Step 2 - Render posts on the home page:

1. Add a page query to src/pages/index.js and render the results.
2. Adjust the query to tell Gatsby to generate multiple variants of the post images.
3. Adjust the rendering in src/components/post-teaser.js.

Step 3 - Add pagination:

1. Move ./src/pages/index.html to ./src/templates/post-listing.html.
2. Move and rename index.module.css as well.
3. Install the plugin: npm i gatsby-awesome-pagination.
4. Create the listing pages in gatsby-node.js.
5. Adjust the query and rendering of the post listing.
6. Add sort, skip, and limit filters to the page query to ensure the desired page's posts are fetched.
7. Add pagination links to allow navigation back and forth.

Step 4 - Create a detail page for every post:

1. Create a new template for the post detail pages: ./src/templates/post.js.
2. Use the template to create the detail pages in gatsby-node.js.
3. Link the posts from the listing pages in ./src/templates/post-teaser.js.

Step 4b - Render markdown:

1. Install the Remark transformer plugin for markdown transformation: npm i gatsby-transformer-remark.
2. Add the plugin to the plugins in your gatsby-config.js file.
3. Render the post body markdown as HTML in ./src/templates/post.js.
4. Render the post body in the teaser as an excerpt in ./src/components/post-teaser.js and ./src/templates/post-listing.js.

Step 5 - Add detail page pagination:

1. Add paths to previous and next post to the post detail page context in gatsby-node.js.
2. Render previous and next buttons based on the post detail page's context.

Summary:

The Gatsby Contentful Photo Blog theme allows users to easily set up their own photo blog using Gatsby and Contentful. It provides features such as content delivery token integration, GraphQL queries for fetching and rendering posts, pagination for easy navigation between pages of posts, separate detail pages for each post, markdown rendering, and detail page pagination. It offers a comprehensive solution for creating and managing a personal photo blog.