Issues when using a folder structure for markdown files

[joostdecock]

I am porting a Jekyll site to nuxtent and I am running into some issues.

I have three content sections:

• Blog posts
• Showcases (like blog posts, but different type of content)
• Pages (regular non-post content)

My config for this is as such:

    content: [
        ['blog', {
            page: '/blog/_post',
            permalink: '/blog/:slug',
            isPost: true,
            anchorLevel: 4,
            generate: [
                'get',
                'getAll'
            ]
        }],
        ['showcase', {
            page: '/showcase/_showcase',
            permalink: '/showcase/:slug',
            isPost: true,
            anchorLevel: 4,
            generate: [
                'get',
                'getAll'
            ]
        }],
        ['pages', {
            page: '/_page',
            permalink: ':section/:slug',
            isPost: false,
            anchorLevel: 4,
            generate: [
                'get',
                'getAll'
            ]
        }],
    ],

Posts and showcases work as expected, because it's just a bunch of .md files in a single directory.

But things are different for pages, which is a hierarchical structure with a mix of folders and markdown files. I've run into a number of issues:

Top level files not allowed with nested registered directories First, I wanted to have the pages in / so that the markdown files would mimic the URL structure. This gave me the Top level files not allowed with nested registered directories error. I tried working around it, or even disabling that check in the module to see how bad it would break, but nothing seemed to work.

Ok, I can live with having to put pages in /pages so this is not a deal breaker. I just wish I understood better why this was an issue. Something about conflicting routes, but I don't think I fully understand it.

How do you serve a directory index

I've copied over some of my jekyll pages, and I don't need many to hit this problem. Given this page structure:

• pages
  • welcome.md <== this won't work, I think because section is empty so the :section/:slug permalink is not ok
  • docs
  • index.md <== This will be accessible as /docs/index but not as /docs or /docs
  • install.md

As you know, index has special status on webservers, and it seems contra-intuitive that this module would break that.

I also tried this page structure to work around this:

• pages
  • welcome.md <== this won't work, I think because section is empty so the :section/:slug permalink is
  • docs.md <== I wanted to be clever, but this doesn't work either
  • docs
  • install.md

But that doesn't work either.

Note that the nuxtent content api does have the /pages/docs entry. So it's known in the api. But when I try to navigate to it, the nuxt router does not match it to my _page.vue page.

Questions

• What's the exact nature of the top level files/registered directories problem, and can one work around it?
• Is there a way for me to get index.md to register under the directory path?
• Is there a better way to get a nested structure of markdown files to work?

_{This question is available on Nuxt.js community (#c117)}

[joostdecock]

I've made some progress on this. After reading the path-to-regexp documentation (which is used by vue-router to match dynamic routes), I learned that you can use a parameter modifier to make a parameter optional.

So I've updated my config like this:

        ['pages', {
            page: '/_page',
            permalink: ':section?/:slug',
            isPost: false,
            anchorLevel: 4,
            generate: [
                'get',
                'getAll'
            ]
        }],

note the ? after :section to make it optional

And I've updated my markdown directory structure like this:

• pages
  • docs.md
  • docs
    • install.md

Now I can access /docs and /docs/install and they both work.

Which leaves me with:

Question

• What's the exact nature of the top level files/registered directories problem, and can one work around it?

Forgive me for mostly talking to myself here. I hope this is useful for others as I don't think this is documented

[joostdecock]

My solution above only partially fixes the issue. Specifically, using :section?/:slug as the permalink pattern will only work for pages one directory deep.

That's because ? is the 0 or 1 modifier. What we need is the 0 or more modifier so that vue-router will match when we have a page like docs/some/deep/link/with/many/slashes.

Using :section*/:slug as permalink pattern will take care of that.

[dimitrieh]

@joostdecock would love to play around with this myself as well. Do you perhaps have an example or existing repository where you (can) show this off?

found your site :wink: https://github.com/joostdecock/site/ taking a look there!

[joostdecock]

The dev branch has my latest work. I have 3 content types for nuxtent, and I want different languages.

I'm currently having dinner, but if you have questions/suggestions I'll look in to them later.

Or go to the nuxtent slack channel

[dimitrieh]

@joostdecock do you mind taking a look at https://gitlab.com/dimitrieh/nuxtent-section-demo ? trying to get a really simple demo going showing off this feature! 😄

Something is going wrong 🐙

[joostdecock]

Connect your browser to http://localhost:3000/content-api I think it will give you a better understanding of what to expect from that api, and what the influence is of changing the path and permalink settings in the nuxtent.config.js file.

[dimitrieh]

@joostdecock I got it working 😄

thanks for the tip, helped a lot!