Feature: Surface console logs into the UI

[terichadbourne]

per a chat with @fsdiogo...

Currently there are a few lessons where we ask the user to open their console and see something printed there. For example, we might ask them to view a CID to see how it's different before and after an action. It would be great if we could print console logs (or even better, only specific ones) to the screen instead so the user doesn't need to figure out how to open the console and can keep their focus in our UI.

Something similar is done in IPLD Explorer.

[fsdiogo]

👋 I've been doing some experiments on how we could possibly tackle this and I've got two proposals:

1) Using JSON.stringify() with a bit of formatting;

• Pros
  • the result is clean and readable
  • we don't have to use any other third-party lib for this
  • as we're already using highlight.js, I'm trying to syntax highlight this output to make it easier on the eyes and more appealing (haven't got it working, but it should be something on my end)
• Cons
  • no expand/collapse functionality like in the dev tools, so if the output is big we'll get a lot of text

2) Using vue-object-view;

• Pros
  • gives us the ability to expand/collapse (but it's strict and not customizable)
• Cons
  • adding a third-party lib that doesn't seem to have any activity in a while
  • no syntax highlighting (or so it seems)

I'm in favour of using (1) and getting the syntax highlighting working, but as I lost some time on trying (2) it's worth mentioning it! Haven't found any other lib like vue-object-view, if you know some please mention it so I can try it out!

[fsdiogo]

Oh, I forgot to mention it, the way I've wired this up is that you just have to pass a key/value to the object of the return of the validate function, with log: foo (where foo is what you want to log) and logDesc: bar (where bar is the description below the Step 3: Check the data. If those keys aren't found that step is not shown.

[mikeal]

@fsdiogo for syntax highlighting, you should just be able to use the markdown library we’re already importing because it has syntax highlighting enabled and loaded.