gridsomegridsome-plugingridsome-source-filesystem

Is it possible to use nested folders in gridsome when using the source-filesystem plugin?


My desired content folder structure is as follows:

- content (directory)
-- home.md

-- trip_A (directory)
--- intro.md
--- day_1.md
--- day_2.md

-- trip_B (directory)
--- intro.md
--- day_1.md

I would ideally like to define this as a single "source" for the @gridsome/source-filesystem plugin so that the addition of future sub-folders are automatically populated in the source.

However, it appears that I may have to manually specify a separate @gridsome/source-filesystem source for each of the sub-folders? Is this correct, or is there a workaround of sorts?

For example:


Solution

  • I found that the simplest solution to this problem is to manually assign the path in the Templates part of the gridsome config using a function

    IE, for this plugin setup...

    var plugins = [
     {
        use: '@gridsome/source-filesystem',
        options: {
          path: '**/*.md',
          baseDir: 'temp/docs',
          typeName: 'Doc'
        }
      }
    ];
    

    and this function to generate the path...

    function slugify(node) {
      var text = node.title;
      console.log(node);  
      var text = text.toString().toLowerCase()
        .replace(/\s+/g, '-')           // Replace spaces with -
        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
        .replace(/\-\-+/g, '-')         // Replace multiple - with single -
        .replace(/^-+/, '')             // Trim - from start of text
        .replace(/-+$/, '');            // Trim - from end of text
        return  node.fileInfo.directory + '/' + text;
    }
    

    and this Gridsome config that references the function in the templates object...

    var gridsomeConfig = {
      siteName: siteName,
      icon: {
        favicon: favicon,
        touchicon: favicon
      },
      plugins: plugins,
      templates: {
        Doc:
          (node) => {
            return `/docs/${slugify(node)}/`
          }    
      }
    }
    

    and given some markdown files in various subdirectories, i.e. /api and /ui...

    You will get content of type Doc at /docs/ui, /docs/api, etc. With the need for only one template (GraphQL type -- meaning same query for all docs).