Code Import

[heyAyushh]

Problem

Solves #170

Summary of Changes

• added a script to import code files

• does supports dev and build mode for md and mdx files

• supports this syntax (ignore square brackets)
  [```]language file="filepath.ext" .....
  [`` `]

• added pre-build script, before building, import code files and then builds contentlayer project

• added dev script to import code files at development

• to import code use yarn code-import

Example

markdown file

code file

[nickfrosty]

this is a very cool and nice feature you are adding!

a few things I noticed without performing a full review:

• you are only checking for files via git
  • not all content files are stored in git. specifically translation files, which are pulled from crowdin at build time and stored in the /i18n/** directory (which is ignored by git)
• you are only checking .md files
  • we also use .mdx files that will have code snippets in them. so we need to make sure we collect all content files in the /content directory and the /i18n directory
  • I manually adjusted the getMarkdownFiles function to look at the mdx files and as I suspected, the code script injects extra content which breaks the mdx render. this is a must fix! (also to note that any .md file can also use our custom components or standard html components)
• when I declare an code block with a file metadata that starts with a slash, it does not load the content
  • this should be supported. in fact, I think this should be required in order to auto load an external file like this, it should start with a / that represents the root of the repo. this way things stay consistent and are easier to maintain and test
  • then when we add support for external repos and urls, they can simply start with http:// and it is easily detected too
• you are proposing all code blocks be updated to have empty contents, which I think will result in the prettier formatting check to fail if saved/committed as such
  • an easy solution here is to add a single line of text that is the file name to load in. and then this content will be replaced by the script
• you are using the tsx cli tool which gets pretty flakey
  • lets use npx esrun instead since it is more reliable and works on more platforms

[mikemaccana]

Looking forward to getting this is - I love being able to use real files in our code examples (and run CI on them!). I'll leave this to @nickfrosty to sign off on, as he has more a strategic idea for .com, but here are some small and hopefully useful code suggestions, everything else looks great.

[heyAyushh]

No markdown file will be empty with code blocks,
Instead it will be synced and updated with codeblock everytime build or dev happens.

[heyAyushh]

@nickfrosty shall we update this repo to use pnpm instead of yarn?

[heyAyushh]

I am thinking of adding a code import chaining feature where we can chain the Lines to add multiple lines of codeblocks from the same file, will that be good idea?

eg. ```file=\code\hello.js#3-4#6-10#11-15

this way code files can exist as a test file instead of the exact code.