[gatsby-theme-minimal-blog]: Unable to change channel title value in RSS feed

sidm1983 commented 4 years ago

Description

I have set all the site metadata in my gatsby-config.js file including the siteTitleAlt property, but I am unable to change the channel title shown in the /rss.xml page of my website that uses the minimal blog theme. Did some quick investigation and found that the newsletterFeed.js file (located at themes/gatsby-theme-minimal-blog/src/utils/newsletterFeed.js) has the title of the RSS channel hard-coded to Minimal Blog - @lekoarts/gatsby-theme-minimal-blog. I even attempted to override the newsletterFeed.js file using shadowing, but was unable to get it working properly.

Steps to reproduce

Create a new gatsby website using the minimal blog theme.
Update all the site title related metadata in the gatsby-config.js file of the website.
The channel title always remains hard-coded as Minimal Blog - @lekoarts/gatsby-theme-minimal-blog no matter what values are entered into the properties of the siteMetadata section in the gatsby-config.js file

Expected result

Channel title value in the RSS feed output should use the site.siteMetadata.siteTitleAlt value from the gatsby-config.js file and not be hard-coded to the title of the theme.

Actual result

Channel title value in the RSS feed output is hard-coded to Minimal Blog - @lekoarts/gatsby-theme-minimal-blog.

Environment

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.7.1
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.13.3 => 2.19.17 
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.35 
    gatsby-plugin-manifest: ^2.2.3 => 2.2.41 
    gatsby-plugin-netlify: ^2.1.3 => 2.1.32 
    gatsby-plugin-offline: ^2.2.4 => 2.2.10 
    gatsby-plugin-sitemap: ^2.2.19 => 2.2.27 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.8 => 1.1.8

LekoArts commented 4 years ago

Try copy & pasting the contents of newsletterFeed into your own gatsby-config.js. This should be a workaround until I think of a better workaround (since it's an upstream issue that newsletterFeed isn't shadowed).

sidm1983 commented 4 years ago

Thanks for your prompt response. I will try that and see how it goes. Also, is it not possible to have the newsletterFeed.js file not hard-code the title value and instead get its value from the siteTitleAlt property in siteMetadata? I tried to do this myself, but as I am new to Gatsby and don’t fully understand how it works, I wasn’t able to get that working. The newsletterFeed.js file has a couple of graphql queries in it. Is it not possible to set the channel title to data coming out of the query? Sorry, if what I am asking is dumb and doesn’t make sense. Just thinking out loud.

Will let you know how I go with copying the contents of the newsletterFeed.js file into my gatsby-config.js.

Thank you for your help and also for this really awesome minimalist theme.

sidm1983 commented 4 years ago

@LekoArts, I have tried your workaround and it worked well. The channel title on the /rss.xml URL now has the correct title. There is just one minor issue now that I am not sure how to fix. There are now two RSS declarations in the head section of all my pages:

<link rel="alternate" type="application/rss+xml" title="Minimal Blog - @lekoarts/gatsby-theme-minimal-blog" href="/rss.xml"/>

<link rel="alternate" type="application/rss+xml" title="My Test RSS Feed Title" href="/rss.xml"/>

As you can see the first one is the original one that comes from the theme's newsletterFeed.js and the second is the one that comes from the workaround you suggested in the gatsby.config.js file.

I am not sure how to prevent the theme's newsletterFeed.js file from executing so that the first <link /> element is not rendered. This affects what title user's see in their RSS readers. If they add my RSS feed to their reader by using the homepage URL of my blog, then their reader uses the Minimal Blog - @lekoarts/gatsby-theme-minimal-blog title. However, if they add my RSS feed to their reader using the /rss.xml, then it uses the My Test RSS Feed Title title from the RSS feed channel title. Here is what my gatsby-config.js looks like with the workaround you suggested:

require(`dotenv`).config({
  path: `.env`,
})

module.exports = {
  siteMetadata: {
    author: `@testuser`,
    siteDescription: `Test site description`,
    siteHeadline: `Test site headline`,
    siteImage: ``,
    siteLanguage: `en`,
    siteTitle: `Test site title`,
    siteTitleAlt: `Test site title alt`,
    siteUrl: `https://test.test`
  },
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      options: {
        navigation: [
          {
            title: `About`,
            slug: `/about`
          },
          {
            title: `Blog`,
            slug: `/blog`
          }
        ],
        externalLinks: [
          {
            name: `Twitter`,
            url: `https://twitter.com/testuser`,
          },
          {
            name: `Instagram`,
            url: `https://www.instagram.com/testuser/`,
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_ID,
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Test Site Title`,
        short_name: `test-blog`,
        description: `Test site description`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#6B46C1`,
        display: `standalone`,
        icons: [
          {
            src: `/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-netlify`,
    // `gatsby-plugin-webpack-bundle-analyser-v2`,
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title: siteTitle
                description: siteDescription
                siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allPost } }) => {
              return allPost.nodes.map(post => {
                return {
                  title: post.title,
                  date: post.date,
                  excerpt: post.excerpt,
                  url: site.siteMetadata.siteUrl + post.slug,
                  guid: site.siteMetadata.siteUrl + post.slug,
                  custom_elements: [{ "content:encoded": post.html }],
                }
              })
            },
            query: `
              {
                allPost(sort: { fields: date, order: DESC }) {
                  nodes {
                    title
                    date(formatString: "MMMM D, YYYY")
                    excerpt
                    slug
                    html
                  }
                }
              }
            `,
            output: `rss.xml`,
            title: `My Test RSS Feed Title`,
          }
        ]
      }
    }
  ],
}

Please let me know if I am missing something or if I have implemented the workaround incorrectly. Any help to remove the first <link /> element would be greatly appreciated.

LekoArts commented 4 years ago

I went ahead and added two more options in 2.2.2 which should fix your issue.

sidm1983 commented 4 years ago

Hi @LekoArts, thank you so much for this. I did an npm update in my repo and I can now set the title properly via the feedTitle property. I also no longer have a duplicate of the <link /> element. However, I have a new issue that seems to only happen when deploying to netlify. I get the following error during the build process in netlify only (it works fine on my local dev environment):

2:44:32 AM: error Building static HTML failed for path "/"
2:44:32 AM:   62 |
2:44:32 AM:   63 |   if (typeof setColorMode !== 'function') {
2:44:32 AM: > 64 |     throw new Error(`[useColorMode] requires the ThemeProvider component`)
2:44:32 AM:      |           ^
2:44:32 AM:   65 |   }
2:44:32 AM:   66 |
2:44:32 AM:   67 |   return [colorMode, setColorMode]
2:44:32 AM: 
2:44:32 AM:   WebpackError: [useColorMode] requires the ThemeProvider component
2:44:32 AM:   
2:44:32 AM:   - color-modes.js:64 useColorMode
2:44:32 AM:     src/color-modes.js:64:11
2:44:32 AM:   
2:44:32 AM:   - header.tsx:14 Header
2:44:32 AM:     node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/header.tsx:1    4:49

Not sure if this helps, but here is a link to the feature branch I am using to test version 2.2.2 of the theme: https://github.com/sidm1983/vicious-volumes/tree/package-update

I am not sure what I am missing here. Any help would be greatly appreciated. Thank you for your time and effort with this issue.

sidm1983 commented 4 years ago

@LekoArts actually, don't worry about the above error. I fixed it. It was because of the yarn.lock file that I had in the repo. I think it went out of sync after I did the update to version 2.2.2 via NPM. I fixed it by deleting the yarn.lock file. Thank you for the fix in version 2.2.2. 🙏😄

LekoArts / gatsby-themes