Initial working version with MDX remote

[zomars]

I've replaced the MDX loader with MDX remote

refs #4

I've got it working with nested directories, but I'm having trouble with wikilinks not rendering properly.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/yenly/foamy-nextjs/CBK1RbJXQQH6ukd4N7bq3ZJu5KYM
✅ Preview: https://foamy-nextjs-git-fork-zomars-main-yenly.vercel.app

[zomars]

Also updated foam settings from the upstream template #8

[yenly]

Would you explain more regarding 'wikilinks not rendering properly?' I find a screen capture would be helpful. I have MDX remote configured for my personal notes site (private repo) and have encountered a similar issue with nested directories. The technical decision I went with is a longer discussion and potentially too opinionated for this starter. Happy to discuss if you'd like.

I have special handling of the wikilinks in AnchorTag component in this file in case you may find it helpful to know.
https://github.com/yenly/foamy-nextjs/blob/main/components/AnchorTag.js

I see 1 failing check on vercel deployment and the error is:

11:05:33.356 | Failed to compile.
-- | --
11:05:33.356 | ModuleNotFoundError: Module not found: Error: Can't resolve '../components/Button' in '/vercel/workpath0/pages'
11:05:33.356 | > Build error occurred
11:05:33.358 | Error: > Build failed because of webpack errors
11:05:33.358 | at build (/vercel/workpath0/node_modules/next/dist/build/index.js:15:918)
11:05:33.358 | at processTicksAndRejections (internal/process/task_queues.js:97:5)
11:05:33.374 | error Command failed with exit code 1.
11:05:33.375 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11:05:33.387 | Error: Command "yarn run build" exited with 1

If you're still working on this PR, then let me know when you're ready or need help. I don't have time to pull it down and play with it today. I may have time in the next few days. I appreciate the work you're putting into this!

[zomars]

For some reason nested wikilinks lose their parent directory:

// index.mdx

### Examples
- [[note]] in subfolder using remark footnotes



[//begin]: # "Autogenerated link references for markdown compatibility"
[note]: notes/note "Note"
[//end]: # "Autogenerated link references"

This link is being rendered as href="/note" instead of href="/notes/note"

[yenly]

@zomars I'm excited to see you got nested directories to work with next-MDX-remote! One thing to clarify in issue #4 is I want to add support to pull MDX files from a directory source outside of pages directory. I don't want to remove MDX support in pages directory. The reason being is it will give developers more flexibility. _posts directory can be where all the second brain notes and pages directory can contain about-me.mdx, newsletter-signups.mdx, dashboard.mdx, project.mdx, conference-talks.mdx, etc. My aim for this starter is to be flexible to what others can easily build with their own opinions. I had set the pages to be compatible with pageExtensions: ['js', 'jsx', 'mdx', 'md'], because I remember there was some chatter in Foam Discord around it.

[yenly]

Looks like here is where remarkWikiLink is not returning the full path. Line 56 outputs /note instead of /note/note. A possible fix is to construct the correct href from postFilePath.

[yenly]

Smart idea to use remark-wiki-link to remove the [] but kebab case links aren't the desired look. My AnchorTag component converts it to use the title of the note. Here you are converting the link back to the kebab case. Capitalize case like how Foam documentation displays is best.

[zomars]

Thanks for the feedback @yenly. One question thought, wouldn't having both methods for generating pages from markdown be confusing? I'll check on the other feedback and get back to you ASAP.

[yenly]

Not at all and it depends on the developer. A really good example to look at is Lee Robinson's personal website. He open-sourced his codebase. https://github.com/leerob/leerob.io.
I realize he doesn't use a mix but he has it configured. 😅 As a starter template, I believe giving the developer the option to choose is ideal.

[zomars]

I've re-added local MDX support.

TODO:

Fix footnote links: DONE!

[krry]

Where is this imported?

[zomars]

Nowhere yet... I've kept it in case of wanting a blog listing somewhere

[krry]

This is great. Really close to what I'm aiming for. I really appreciate the next-mdx-remote implementation and the [...slug]. How did you figure those out?

I'm finding it tricky to get the nested dynamic routes to operate properly, as Foam generates relative link references without a leading ./ for files in the same directory (which links Next then interprets as absolute to the root). So linking downward from anywhere but root/index breaks. Does that make sense? Any idea how to hack around this?

I've enjoyed using next-remote-watch to enable hot reload of the remote MDX files may accompany these changes nicely.

Also, have you considered using fs-readdir-recursive within getAllFiles()?

Now I'm looking at passing the frontmatter along to the template for a meta layer of navigation. And maybe some listings as you mention.

[zomars]

This is great. Really close to what I'm aiming for. I really appreciate the next-mdx-remote implementation and the [...slug]. How did you figure those out?

I took inspiration from Lee's website and hacked my way trough it.

I'm finding it tricky to get the nested dynamic routes to operate properly, as Foam generates relative link references without a leading ./ for files in the same directory (which links Next then interprets as absolute to the root). So linking downward from anywhere but root/index breaks. Does that make sense? Any idea how to hack around this?

I would need to see a proper example to be able to debug this.

I've enjoyed using next-remote-watch to enable hot reload of the remote MDX files may accompany these changes nicely.

This seems a nice to have feature, although they mention that they use undocumented Next APIs and they're prone to change unexpectedly.

Also, have you considered using fs-readdir-recursive within getAllFiles()?

I don't see why not. :)