cuelang.org: presenting long code listing with a visual "ellipsis"

[myitcv]

What page were you looking at?

https://cuelang.org/

What version of the site were you looking at?

cue-lang/cuelang.org@24ebac4

We need some way of allowing long code listings to be uploaded. These might come about for multiple reasons, but having a long code listing on the page isn't particularly practical because of the screen real estate taken up.

In such situations, we probably want to present the code listing "collapsed" with, say, the first 10 lines visible, some indication that there is more "hidden" code, the usual "copy" button on the right hand side, plus an "expand" button that allows it to the code listing to be fully expanded.

Relatedly, we need the ability to present a snippet of code before/after such a listing that is a "focus" on part of the code. Typically with long code listings, the following happens:

• You ask the user to copy-paste the contents into place
• You then spend the time focussing on explaining the code bit by bit, focussing on "blocks" of code.

So this issue is really about adding support for two components:

• A code tabs mode or similar that allows for the contents of a large file to be "hidden" (much like an ellipsis indicates there is more not shown), with a button to show/hide that content.
• Very related, a "focus" mode which shows part of a code listing, again indicating if there is more code before/after.

We can leverage the preprocessor to do most of the lifting here to ensure that we have the focus on the right lines of code. e.g. the preprocessor could allow for a block which references an earlier upload block, a file within that upload, and lines within that file. That would gives us the lines we want to see. The frontend component would then be responsible for rendering those lines.

Here is a possible way of rendering the "ellipsis" using a fade to white: