gatsby-theme-minimal-blog: postsPrefix being added inconsistently

[kenjdavidson]

First off thanks for such great themes/contributions. As someone pretty much starting out playing with Gatsby you're style and documentation of your projects is fantastic. Maybe I'm just doing something wrong with how you envisioned the theme being used.

Description

When applying the following configuration to the gatsby-theme-minimal-blog

        blogPath: '/writing',
        tagsPath: '/writing/tags',
        postsPrefix: '/writing',
        postsPath: `content/writing`,

The posts are configured to the appropriate url ${basepath}${postsPrefix}${post.slug} but the blog-list-item is not being updated with basePath nor postsPrefix. Note that the tagPath also has been updated with /writing/tags as it doesn't apply the prefix either (this is more debatable).

Steps to reproduce

I haven't posted my project yet, but I can do so if needed. I can also PR if you're accepting them.

1. Clone the starter project

git clone https://github.com/LekoArts/gatsby-starter-minimal-blog project-name
cd project-name

2. Update the configuration as seen above

        blogPath: '/writing',
        tagsPath: '/writing/tags',
        postsPrefix: '/writing',
        postsPath: `content/writing`,

3. Create a new post with the frontmatter:

title: "This is a title"
description: "This is a description"
date: 2021-10-11
slug: "/2021/10/11/this-is-a-title"

Expected result

I would expect that the following pages are created:

• /writing displays the list of posts (working)
• /writing/tags displays the tags (working)
• /writing/2021/10/11/this-is-a-title displays the post itself (working

I would also expect that:

• The links to the post on the /writing page would be /writing/2021/10/11/this-is-a-title

Actual result

The link(s) on the /writing page are actually /2021/10/11/this-is-a-title

Workaround

I've been able to workaround this by shadowing components/blog-list-item.tsx and hardcoding /writing${post.slug} (quick and dirty but working).

I would assume that a better option for this would be to:

1. During the creation of the nodes replace the node slug with the combination of basePath, postsPrefix, and slug so that it's consistent throughout everything - even if creating custom queries for extending.

2. Update all the extra places so that the links use the same logic in the gatsby-node file for generating the slugs.

Environment

System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i7-5650U CPU @ 2.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.19.1 - ~/.nvm/versions/node/v12.19.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.19.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 94.0.4606.81
Safari: 15.0
npmPackages:
gatsby: ^3.6.1 => 3.14.2
gatsby-omni-font-loader: ^1.3.1 => 1.3.1
gatsby-plugin-feed: ^3.6.0 => 3.14.0
gatsby-plugin-gatsby-cloud: ^2.6.1 => 2.11.0
gatsby-plugin-google-analytics: ^3.6.0 => 3.14.0
gatsby-plugin-manifest: ^3.6.0 => 3.14.0
gatsby-plugin-netlify: ^3.6.1 => 3.14.0
gatsby-plugin-offline: ^4.6.0 => 4.14.0
gatsby-plugin-sitemap: ^4.2.0 => 4.10.0
gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.25

[LekoArts]

Hi, thanks for the issue!

You're correct, the slug is not respecting the postsPrefix. I've fixed this in #641 - it'll be only in this release as it might be a breaking change for some people that rely on the old behavior of slug and maybe fixed it themselves.

The new major release should go out soon, so won't be long until you can use the theme version with the fix :)