Nuxt'ta .md dosyalarını zaman damgasıyla organize etmek

Statik site oluşturucuları kullanıyorsanız, .md uzantılı Markdown dosyalarıyla haşır neşirsinizdir. Bu dosyaların özellikle sayısı arttıkça karışıklıklar baş gösterir çünkü isimler düzensizdir.

Örneğin, aşağıdaki yapıya bakalım:

├── daphne-gunicorn.md
├── just-a-command-runner.md
└── django-serve-txt.md

Yukarıdaki klasör yapısı şöyle olsa daha iyi olmaz mıydı:

├── 2021-07-30--daphne-gunicorn.md
├── 2021-07-31--just-a-command-runner.md
└── 2021-08-07--django-serve-txt.md

Hem sıralama artık daha düzgün, hem de bir bakışta hangi dosyaların hangi yıla veya aya ait olduğunu kolaylıkla görebiliyoruz. Şimdi bu yapıyı Nuxt'ta nasıl yaratırız bunu anlatacağım.

Aşağıdaki değişikliği yaparak başlayalım.

export default {
  hooks: {
    // 2021-12-12--post-slug > post-slug
    'content:file:beforeInsert': (document) => {
      if (document.extension === '.md') {
        const regex = /^(\d{4}-\d{2}-\d{2})--/g
        if (document.slug.match(regex)) {
          document.slug = document.slug.replace(regexpRule, '')
        }
      }
    },
  },
}

Artık Nuxt bu dosyalar için slug oluştururken başlarındaki tarihi otomatik olarak kaldıracak.

Bu değişiklik, bir ufak başka değişikliği de zorunlu kılıyor. Normalde /notes/daphne-gunicorn adresi ziyaret edildiğinde slug olan daphne-gunicorn kısmını kullanarak notes klasörü içindeki dosyayı bulurduk:

const note = await $content('notes', params.slug)

Artık bu mümkün değil. Çünkü slug ile dosya adı arasındaki ilişki, yaptığımız değişiklikten dolayı bozuldu.

Aşağıdaki gibi bir kullanımla bunu çözebiliriz:

const [note] = await $content('notes')
  .where({ slug: params.slug })
  .limit(1)
  .fetch()