quiver icon indicating copy to clipboard operation
quiver copied to clipboard

Static HTML export

Open plt-amy opened this issue 2 years ago • 4 comments

So I have a very specific problem. At the 1Lab, we're currently discussing how to implement a dark theme: https://github.com/plt-amy/1lab/issues/75. Part of the problem is that, right now, our commutative diagrams are (though made with Quiver), rendered with tikz-cd and converted to svg with pdftocairo, which is.. suboptimal. One of the problems is that tikz-cd is much worse at rendering commutative diagrams than Quiver is, but the bigger problem is that tikz-cd really really wants to draw on a white canvas. Not great when you're trying to display the resulting diagrams on a black backdrop!

The "proper" solution to our problem would be #8, but AIUI (from the comments on that issue), SVG isn't quite up to the task yet. While there is support for embedding quiver in a website using an <iframe>, this doesn't really work for our use case: we have a principle that the mathematical content of the website should work with noscript, and JS should be reserved for chrome. I think this precludes using the <iframe> embed, since aiui that'll use the JS renderer from q.uiver.app, but I'd be happy to be wrong about this!

There's really two things I want:

  1. A human readable/writable import/export format, since we embed commutative diagrams inline (example). But if designing and implementing quiver's own "commutative diagram language" is out of scope, I'd be more than happy to put the 1lab's diagrams in separate files, and use JSON (or something like); I just don't think it's appropriate to include big base64 blobs in the 1lab's source control.

  2. The ability to render offline. The concrete use-case would be loading up quiver as a node.js library, giving it the description of a commutative diagram, and have it render the corresponding HTML.

I'd be more than happy to PR support for (2) if you tell me where in the code I should start poking!

plt-amy avatar May 25 '22 17:05 plt-amy

It is json befor they convert it to the base64 string so it’s just removing that call wrapper at the call site of the export class implementing url exporting. Just duplicate the export class and make that change if you want the base quiver to be updated. Then you have to add in a quiver gui button in your.is

On Wed, May 25, 2022 at 10:08 AM Amélia @.***> wrote:

So I have a very specific problem. At the 1Lab https://1lab.dev, we're currently discussing how to implement a dark theme: plt-amy/1lab#75 https://github.com/plt-amy/1lab/issues/75. Part of the problem is that, right now, our commutative diagrams are (though made with Quiver), rendered with tikz-cd and converted to svg with pdftocairo, which is.. suboptimal. One of the problems is that tikz-cd is much worse at renderi commutative diagrams than Quiver is, but the bigger problem is that tikz-cd really really wants to draw on a white canvas. Not great when you're trying to display the resulting diagrams on a black backdrop!

The "proper" solution to our problem would be #8 https://github.com/varkor/quiver/issues/8, but AIUI (from the comments on that issue), SVG isn't quite up to the task yet. While there is support for embedding quiver in a website using an

There's really two things I want:

A human readable/writable import/export format, since we embed commutative diagrams inline (example https://github.com/plt-amy/1lab/blob/main/src/1Lab/Path.lagda.md#L167-L172). But if designing and implementing quiver's own "commutative diagram language" is out of scope, I'd be more than happy to put the 1lab's diagrams in separate files, and use JSON (or something like); I just don't think it's appropriate to include big base64 blobs in the 1lab's source control. 2.

The ability to render offline. The concrete use-case would be loading up quiver as a node.js library, giving it the description of a commutative diagram, and have it render the corresponding HTML.

I'd be more than happy to PR support for (2) if you tell me where in the code I should start poking!

— Reply to this email directly, view it on GitHub https://github.com/varkor/quiver/issues/139, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMIF5Z5ENCJM5H73O2APQLVLZNBDANCNFSM5W5ZXQGQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

enjoysmath avatar May 25 '22 18:05 enjoysmath

Ui.js *

On Wed, May 25, 2022 at 11:52 AM Luna Tuna @.***> wrote:

It is json befor they convert it to the base64 string so it’s just removing that call wrapper at the call site of the export class implementing url exporting. Just duplicate the export class and make that change if you want the base quiver to be updated. Then you have to add in a quiver gui button in your.is

On Wed, May 25, 2022 at 10:08 AM Amélia @.***> wrote:

So I have a very specific problem. At the 1Lab https://1lab.dev, we're currently discussing how to implement a dark theme: plt-amy/1lab#75 https://github.com/plt-amy/1lab/issues/75. Part of the problem is that, right now, our commutative diagrams are (though made with Quiver), rendered with tikz-cd and converted to svg with pdftocairo, which is.. suboptimal. One of the problems is that tikz-cd is much worse at renderi commutative diagrams than Quiver is, but the bigger problem is that tikz-cd really really wants to draw on a white canvas. Not great when you're trying to display the resulting diagrams on a black backdrop!

The "proper" solution to our problem would be #8

https://github.com/varkor/quiver/issues/8, but AIUI (from the comments on that issue), SVG isn't quite up to the task yet. While there is support for embedding quiver in a website using an

There's really two things I want:

A human readable/writable import/export format, since we embed commutative diagrams inline (example https://github.com/plt-amy/1lab/blob/main/src/1Lab/Path.lagda.md#L167-L172). But if designing and implementing quiver's own "commutative diagram language" is out of scope, I'd be more than happy to put the 1lab's diagrams in separate files, and use JSON (or something like); I just don't think it's appropriate to include big base64 blobs in the 1lab's source control. 2.

The ability to render offline. The concrete use-case would be loading up quiver as a node.js library, giving it the description of a commutative diagram, and have it render the corresponding HTML.

I'd be more than happy to PR support for (2) if you tell me where in the code I should start poking!

— Reply to this email directly, view it on GitHub https://github.com/varkor/quiver/issues/139, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMIF5Z5ENCJM5H73O2APQLVLZNBDANCNFSM5W5ZXQGQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

enjoysmath avatar May 25 '22 18:05 enjoysmath

  1. While a flexible DSL for commutative diagrams would be a nice thing to have, I do think it's out-of-scope for the time being. Regarding instead representing diagrams as JSON instead of base64: as @enjoysmath says, quiver already has an internal JSON representation for diagrams (which is stable, as it's how quiver generates links). So depending on your set up, you should be able to decode the base64 into JSON and store that instead. While this still may not be very human readable, it should be slightly more amenable to diffs than the base64 string is.
  2. I think this would not be a lot of work. I may be able to give a more detailed outline later, but for now, the main method you should look at is QuiverImportExport.base64.import. In theory, one could pass a base64 string to this method, get a quiver: Quiver out (which contains the data of a diagram) and then call quiver.rerender to draw the diagram to a <div>. However, at the moment, this logic is not decoupled from the specific interface that quiver uses, so will take some refactoring to make this actually true. I think this shouldn't be too painful, but I haven't thought too long about it. After this, one should then just be able to include quiver.js and a few dependencies and make a call to draw a diagram in a specified <div>. (Interacting with the diagram would not be possible, but this wouldn't be necessary to simply see the diagrams.)

varkor avatar May 26 '22 17:05 varkor

@plt-amy Have you resolved this issue, and what did you do to resolve it?

enjoysmath avatar Oct 09 '22 23:10 enjoysmath