feat: add tips to loading screen

[debs-obrien]

[debs-obrien]

WORK IN PROGRESS @pimlie this is not finished yet but wanted you to take a look as it is using your package for the random tips to show. was wondering if you could take a look and tell me what you think. For now there is just a messages.json file in there with 3 random tips but this will need to be moved to a separate npm package but for now please take a look and let me know what you think. cc @pi0 @Atinux

[pimlie]

@debs-obrien Wow, forgot all about this stuff :)

My idea for implementing was to create a different nuxt package that lists all the tips: https://github.com/nuxt-community/motd That lib exports a createGenerator method that you feed in the config and returns a generator fn, by default it already adds module names. Then any time you run that fn another tip / motd is returned.

// lib/module.js
const createGenerator = require('@nuxtjs/motd')
const motdGenerator = createGenerator(/* ...extra config */)
const interval = setInterval(() => {
  loading.setMotd(motdGenerator())
}, 10000)

Having motd as a separate package would make it easier for the community to add tips, eg we could have some kind of scoring mechanism to also let the community vote on whether a proposed tip is good or not.

When I was looking into this I wanted the motd to cycle during loading, so that eg every 10s another tip was shown. If I remember correctly I ran into an issue with that tho, not entirely sure anymore what the issue was but the only thing I can think of is that it had probably to do with sending the motd as part of the webpack state from nuxt to the loading-screen. But again, not totally sure anymore.

[pi0]

@pimlie Indeed fully agree we should move it out to nuxt/tips. Also there is a TODO in code to change the tip on each build

[pi0]

Comments from slack:

• UI: Maybe we can inline docs link on same line like (docs) ?
• UI: We need to parse string to add code block
• CLI: it is breaking consola style with double emojis
  • It is possible to override ! icon
  • It is possible to put tip in boxen
• CLI: we may also find a way for having short links

[debs-obrien]

@pi0 adding boxen removes the styles from the code. Any ideas of how to add both?

[atinux]

TODOS:

• [ ] Transfer https://github.com/nuxt-community/motd to nuxt/tips
• [ ] Move tips messages there
• [ ] Use @nuxt/tips here
• [ ] Use Nuxt boxen to add the tip there

[debs-obrien]

@Atinux when using boxen it removes the styling for links and highlighting - see message above for example unless there is another boxen package I don't know about