WIP: add `LocalRemoteCard` and `LocalRemoteSection`

[johnnychen94]

This is the first step towards #72 LocalRemotePage is just a normal DemoPage as far as I'm understanding.

Todo:

• [x] LocalRemoteCard
• [x] LocalRemoteSection
• [ ] documentation

LocalRemoteCard as a virtual card placeholder will be generated if "remote" is specified in section level:

{
    "remote": {
        "julia_card.jl": "../../card/julia/title_1.jl",
        "markdown_card.md": "../../card/markdown/title_3.md"
    },
    "order": [
        "julia_card.jl",
        "markdown_card.md",
        "title_2.md"
    ]
}

Efforts are paid to support:

• mixed usage of LocalRemoteCard and normal demo files, as well as order
• LocalRemoteCard can be either an absolute path or a relative path (wrt the config.json)

[durden]

Another possibility here is using margin notes for the diffs.

[durden]

Any thoughts on this @paulocheque or @prtkgpt?

[paulocheque]

I guess the diff would be line by line. I mean, depending on the change, it would not be feasible to use the margin notes, or we would need to turn the entire line a link and this would be ugly.

So I believe the [1] option would be simpler and better. Maybe some original, master or some self explained icon.

About the backend view, are you referring to this https://github.com/pluralsight/guides-cms/blob/master/pskb_website/views.py#L343 ?

[durden]

I stumbled on this blog post that's semi-related to this subject. The author is exploring the idea of visualizing how a paragraph changes over time. Here's an example showing a paragraph through time.

The display isn't very useful for our purposes because it shows every little change to a paragraph, which would result in too much noise for our long-form guides. However, maybe we can learn something from the experiment.

For example, maybe we could include margin notes on hover of a paragraph. The margin notes could include a list of every revision of the paragraph and/or guide. Then clicking that link would show the guide at that version.

Another idea would be clicking the margin note would show a diff version between the currently visible version and the version clicked.

Any thoughts? @prtkgpt @paulocheque

This is a fringe feature, but it could be very useful for editors and readers of an old, often updated guide.

[paulocheque]

We will have the current/latest version of the article and the past ones. The current version should be, in 99% of the times, the most important version, right?. The past versions should be important only to fix some mistakes, for audition or something.

What I am trying to say is that I dont think the past version are too important to turn the interface more complex because of them. Maybe we could let the article page clean with the latest version, and we could add a button like "history of the article" that links to the GitHub log or to another page only with the diffs.

[durden]

Right, I don't think we should clutter the UI for history purposes. However, the margin notes feature stays out of the way unless you hover over it so that seemed like an unobtrusive way to do this. Again, this is not a critical feature at all. It's more of a cool feature that would be useful for some editors. I'm just detailing the thought process and options here so we could implement this if needed. Also, this issue also allows the discussion to be open to all potential contributors so they could work on this if it's something that sounds useful to them.

[prtkgpt]

@durden That was a great read. Thanks for sharing the link. We should explore this definitely as it's important to tell our audience about the changes and who proposed those changes. I think we can make a proper engagement for editors here by having margin notes like feature. It would be a good thing for contributors page and will grow the list allowing us the better present that data in their user profiles. We can even compile things like stack logos of tutorials I interact with, and # of contributions can earn me certain types of badges. New hack.guides() logo on staging site look pretty good. I like the "BY PLURALSIGHT" as the site still has its look and keeping the balance of our image. On the tutorial page, we can make hack.guides() logo in dark like we currently show hack.summit() in black color.

[paulocheque]

PS: I changed the logo to be black in the PR https://github.com/pluralsight/guides-cms/pull/87