A way to organize files in "blog" folder?

[auracheeze]

Is there a way to better organize large number of files in the blog folder? At the moment I have about 100 files in the folder. I was wondering it will become really unwieldy when that number really becomes large.

Creating a subfolder inside blog (e.g. blog/archives) does not work because it changes the slug (e.g. instead of /blog/2008/05/15/post-1 it changes to /blog/2008/05/15/archives/post-1).

[slorber]

You can use the slug frontmatter explicitly to decouple the FS structure from the slug: this makes it possible to use the FS structure that you prefers.

We do this on Docusaurus blog: https://github.com/facebook/docusaurus/tree/main/website/blog

• first: used simple mdx files
• 2nd: used folders
• 3rd: create a ./releases subfolder

[slorber]

I think if you transform:

/blog/2008-05-15-post-1.mdx
/blog/2008-05-16-post-2.mdx
/blog/2008-05-17-post-3.mdx

to

/blog/2008/05-15-post-1.mdx
/blog/2008/05-16-post-2.mdx
/blog/2008/05-17-post-3.mdx

or

/blog/2008/05/15-post-1.mdx
/blog/2008/05/16-post-2.mdx
/blog/2008/05/17-post-3.mdx

Then the date can still be inferred and the URL would stay the same.

Didn't try but as far as I remember this should work

[slorber]

Regexp used:

const DATE_FILENAME_REGEX =
  /^(?<folder>.*)(?<date>\d{4}[-/]\d{1,2}[-/]\d{1,2})[-/]?(?<text>.*?)(?:\/index)?.mdx?$/;

Related unit tests:

  it('parses folder name respecting date convention', () => {
    expect(
      parseBlogFileName('2021-05-12-announcing-docusaurus-two-beta/index.md'),
    ).toEqual({
      date: new Date('2021-05-12Z'),
      text: 'announcing-docusaurus-two-beta',
      slug: '/2021/05/12/announcing-docusaurus-two-beta',
    });
  });

  it('parses folder tree respecting date convention', () => {
    expect(
      parseBlogFileName('2021/05/12/announcing-docusaurus-two-beta/index.md'),
    ).toEqual({
      date: new Date('2021-05-12Z'),
      text: 'announcing-docusaurus-two-beta',
      slug: '/2021/05/12/announcing-docusaurus-two-beta',
    });
  });

  it('parses folder name/tree (mixed) respecting date convention', () => {
    expect(
      parseBlogFileName('2021/05-12-announcing-docusaurus-two-beta/index.md'),
    ).toEqual({
      date: new Date('2021-05-12Z'),
      text: 'announcing-docusaurus-two-beta',
      slug: '/2021/05/12/announcing-docusaurus-two-beta',
    });
  });

  it('parses nested folder tree respecting date convention', () => {
    expect(
      parseBlogFileName(
        '2021/05/12/announcing-docusaurus-two-beta/subfolder/file.md',
      ),
    ).toEqual({
      date: new Date('2021-05-12Z'),
      text: 'announcing-docusaurus-two-beta/subfolder/file',
      slug: '/2021/05/12/announcing-docusaurus-two-beta/subfolder/file',
    });
  });

[auracheeze]

My goodness! You are right! This deserves a mention in the docs! I'd like to make a PR to add this valuable piece of info.

[slorber]

@auracheeze please do :)

We probably don't document this date filename convention properly but just expect people to find out it works fine out of the box

[auracheeze]

Upon closer look, I realised that the patterns are already listed in a summary section. I've added a small PR to draw more attention to this capability.