Issues With Setting Up Johackim Theme

[Cloufish]

Why is that the case? :/ If there's any more information I can provide tell me

[johackim]

Hello @Cloufish, thanks for your issue.

Can you provide your gatsby-node.js, gatsby-config.js and markdown files ?

You can go to this example if you want inspiration : https://github.com/johackim/gatsby-remark-obsidian/tree/master/examples/remark

[Cloufish]

I'm so confused, so sorry ;_;.
I've stumbled upon your repo from here -> mathieudutour/gatsby-digital-garden#85. And I thought that It's just as easy as adding a new plugin into gatsby-config.js. Turns out it's not ;-;.

I've also tried using this theme from scratch, using your instructions (mostly! 😄 ):
1, Make a new directory and cd into it
2. Run npm install gatsby-remark-obsidian
3. Copied the contents of example's gatsby-config.js into my gatsby-config.js. Later I copied also gatsby-node.js
4. Run npm install && npm start

• And I got `missing script: "start" issue. And yeah I'm not surprised because the directory structure (right now) lacks compared to your remark examples!

gatsby-config.js

module.exports = {
    plugins: [
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                path: './content',
            },
        },
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [
                    {
                        resolve: 'gatsby-remark-obsidian',
                        options: {
                            titleToURL: (title) => `/${title}`,
                        },
                    },
                ],
            },
        },
    ],
};

gatsby-node.js

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions;

    const result = await graphql(`
        {
            allMarkdownRemark {
                edges {
                    node {
                        id
                        html
                        parent {
                            ... on File {
                                name
                            }
                        }
                    }
                }
            }
        }
    `);

    if (result.errors) {
        reporter.panicOnBuild('Error while running GraphQL query.');
        return;
    }

    const markdowns = result.data.allMarkdownRemark.edges;

    const noteTemplate = require.resolve('./src/templates/noteTemplate.js');

    markdowns.forEach(({ node }) => {
        const { id, html } = node;

        createPage({
            path: `/${node.parent.name}`,
            component: noteTemplate,
            context: { id, html },
        });
    });
};

[Cloufish]

Update - Wait, so is this a plugin or a theme? I managed to start one of the examples you provided, but it seems like the main purpose of this is to support aliases!

I went with the original plan - Adding the Plugin to the existing gatsby-digital-garden. What I've done is:

1. Added the plugin into my gatsby-config.js, here're the contents the it:

module.exports = {
  pathPrefix: `/knowledge-base`,
  plugins: [
    {
      resolve: `gatsby-theme-garden`,
      options: {
        contentPath: `${__dirname}/content/garden`,
        rootNote: `/HELLO-WORLD`,
      },
      resolve: "gatsby-transformer-remark",
        options: {
            plugins: [
                {
                    resolve: 'gatsby-remark-obsidian',
                    options: {
                        titleToURL: (title) => `/${title}`, // optional
                        markdownFolder: `${__dirname}/content`, // optional
                        highlightClassName: 'highlight', // optional
                    },
                },
            ]
    },
  }
  ],
  siteMetadata: {
    title: `Cloufish's Knowledge Base`,
  },
}

• Adding pathPrefix: parameter at the beginning is optional. I added It because It's the requirement in hosting the Page on GitHub Pages

1. Changed the gatsby dependency to latest the snippet under, to solve the issue of Is there any starter that use this plugin? #1

  "dependencies": {
    "gatsby": "latest",

2. Then executes npm install gatsby-transformer-remark and npm install gatsby-remark-obsidian
3. **But I Got the GRAPHQL Issue **:

Failed to compile
There was an error in your GraphQL query:

Cannot query field "localSearchPaths" on type "Query".

If you don't expect "localSearchPaths" to exist on the type "Query" it is most likely a typo.
However, if you expect "localSearchPaths" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "localSearchPaths" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /home/cloufish/Projects/knowledge-base/node_modules/gatsby-theme-garden/src/use-search.js

There was an error in your GraphQL query:

Cannot query field "localSearchTitles" on type "Query".

If you don't expect "localSearchTitles" to exist on the type "Query" it is most likely a typo.
However, if you expect "localSearchTitles" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "localSearchTitles" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /home/cloufish/Projects/knowledge-base/node_modules/gatsby-theme-garden/src/use-search.js

There was an error in your GraphQL query:

Cannot query field "localSearchBodies" on type "Query".

If you don't expect "localSearchBodies" to exist on the type "Query" it is most likely a typo.
However, if you expect "localSearchBodies" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "localSearchBodies" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /home/cloufish/Projects/knowledge-base/node_modules/gatsby-theme-garden/src/use-search.js
This error occurred during the build time and cannot be dismissed.

Don't know how to proceed from there. Pls I ask for help, over!

[vlwkaos]

Try config for mdx plugin not gatsby-transformer-remark.

    {
      resolve: "gatsby-plugin-mdx",
      options: {
        extensions: [".md", ".mdx"],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-obsidian",
            options: {
              titleToURL: (title) => `/${title}`,
            }
          },

        ],
      },
    },

Note that using this creates normal <a> link that does not providing stacking note functionality of gatsby-theme-garden theme.