Closed sdhawley closed 2 years ago
Welcome @sdhawley! Here are a couple of things you could check:
configuration, compare with: https://github.com/styxlab/gatsby-theme-try-ghost/blob/68084f26125918980761de0c46a96aa3215cff44/demo/gatsby-config.js#L103
Use the graphql endpoint in development mode in order to verify that the CMS url is coming through. Query
query MyQuery {
ghostSettings {
url
}
}
should give a result in ghostSettings.url
:
{
"data": {
"ghostSettings": {
"url": "https://cms.gotsby.org"
}
},
"extensions": {}
}
This url is needed for the comparison in order to be able to produce relative links.
console.loog()
lines.Hope that helps to getting started. Joost
Thanks @styxlab I'll try that and post what I find
This might be unrelated but I think I found a problem in gatsby-transformer-rehype. When I tried loading a local copy (called 'localplugin') so that I could insert console.log statements and gatsby-transformer-rehype threw an error that it couldn't find 'localplugin'
module.exports = {
siteMetadata: {
siteUrl: config.siteUrl,
},
plugins: [
/**
* Content Plugins
*/
{
resolve: `gatsby-transformer-rehype`,
options: {
filter: node => (
node.internal.type === `GhostPost` ||
node.internal.type === `GhostPage`
),
plugins: [
{
resolve: `localplugin`,
},
],
},
},
Changing to require.resolve('./plugins/localplugin')
allowed it to continue but it did not execute the preInit hook.
Should gatsby-transformer-rehype know to look in the local plugins folder?
I don't see any indication of rehype running during the build, but when I run a query in the GraphiQL console it does trigger and I see some of my console statements.
If I do this query:
query MyQuery {
allHtmlRehype {
nodes {
html
}
}
}
I see an error in the response:
{
"errors": [
{
"message": "The \"url\" argument must be of type string. Received undefined",
"locations": [
{
"line": 4,
"column": 7
}
],
"path": [
"allHtmlRehype",
"nodes",
12,
"html"
],
"extensions": {
"stack": [
"TypeError [ERR_INVALID_ARG_TYPE]: The \"url\" argument must be of type string. Received undefined",
" at validateString (internal/validators.js:124:11)",
" at Url.parse (url.js:170:3)",
" at Object.urlParse [as parse] (url.js:157:13)",
And from my console.log statement I see that config is undefined
const config = getNode(`gatsby-theme-try-ghost-config`);
console.log(`config is ${config}`)
Should the getNode call be for a project specific config?
And like I said, the console statements don't show during the build so it doesn't look like the plugin is running during the build stage.
I copied gatsby-transformer-rehype into local plugins and confirmed that was running.
Digging further I see that the real issue is that I expected the original ghost page node to be modified with the new html, and that is not how this works.
It is not clear from the docs that you need to query data from the htmlRehype nodes to use the transformed html, but since that seems to be the expected behavior the mystery is solved.
The error I'm seeing in GraphiQL is coming from node.properties.href being undefined when a link doesn't have an href for example in <a>Hello</a>
, which is a valid html construct.
@sdhawley I no longer actively maintain this repo, because I now do everything with Next.js. However, If you want to submit a PR to fix the issue, you are most welcome.
Closing due to inactivity.
I could use a little help debugging the setup. It doesn't even look like the plugin is running.
I'm not deep into gatsby plugin development so I'm not sure where to look to see if it ran the plugin and why the urls aren't being transformed.
I suspect something else we have configured may interfere with whatever hook is supposed to run.