Blog

Nuxt Content Git Submodules?

7/26/2020

Here's a thought: All that time spent messing about with a misbehvaing Vuex store, the GitHub API's rate limiting, and a very complicated git client and file system approach... is it possible to just include the actual Git repository in a child directory and pull content from it?

The Nuxt content module will parse .md, .yaml, .yml, .csv, .json, .json5 and .xml files. My project repository has, initially, only a couple of files that I'm interested in: README.md and CHANGELOG.md. It also has a package.json and other projects I'd like to include might well have other files with those extensions. But... even though the content module will parse them, it won't actually generate pages for them unless I've set up my Nuxt pages to do so. So... that's fine.

I can therefore just have a git submodule in my projects folder and tell my Nuxt page exactly how to utilise the submodule's contents. Awesome! This should work, this is going to work. I would argue here that pulling many submodules might significantly increase build time, but I don't anticipate this getting all that out of hand.

The only problem is... this site is itself one of the projects I would like to list. Can a git repository contain a submodule of itself?

Actually, second problem: Updating the project repos will not automatically update the submodules in my content site. That's a problem too, but not a major one. It might be solvable down the line with webhooks that are fired on a push and a little tweak to a custom build script used by the server that deploys my site. That's... not a huge issue. Whatever...

The main thing on my mind right now is: Can a git repository contain a submodule of itself?

I'm not the only person who's asked this question: https://stackoverflow.com/questions/5296236/how-to-add-a-git-repo-as-a-submodule-of-itself-or-how-to-generate-github-page

The problem faced in that question is similar, but not quite the same as mine... Ah well, no harm in giving this a shot.

I've ran the command:

git submodule add https://github.com/thombruce/thombruce.com.git content/projects/thombruce

...which has indeed added the git repo as a submodule of itself in the folder content/projects/thombruce. Is it really that easy?

It works! With just some slight tweaks to my queries and a minor modification of what info is displayed, I can display projects from this directory just fine!

The query differences are below. On both list and single pages, I now aim to find the package.json file. This requires a deep query on the list page and a where to filter for the appropriate files. And because I'm looking for package.json, rather than a more typical content file, I have to look for the slug package in my single page query.

It also renders some of the nice auto-generated properties of the Nuxt content module useless, but what have you... It's a working solution, and I dig it.

// list
const section = 'projects'
const articles = await $content(section, { deep: true })
  .where({ slug: 'package', extension: '.json' })
  .fetch()

// single
const section = 'projects'
const project = await $content(section, params.slug, 'package')
  .fetch()

And that's for THIS project. It's a git repo containing itself as a submodule. Note to self: NEVER use the --recursive flag when updating the submodule. That way, the Kraken waits!