authorea bugs

SVG

• clip-path doesn't seem to work
  • possibly because using clip-path="url(#plot1clip) we refer to elements like #plot1clip which are local to the iframe? Weird, just guessing

HTML

• doesn't accept <div id='id'>, pretends <div id="id"> (not sure this is a bug but I use ' usually)

500 pages

• css and json files aren't rendered if we don't use ?raw=true. Examples:
  • https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/index.css 500
  • https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/index.css?raw=true OK
  • https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/data.json 500
  • https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/data.json?raw=true OK

RESPONSIVE LAYOUT

The website is responsive hence when resizing the window the width changes, while the figures width is fixed (being set by size.md). To clarify this, I usually set a window.onresize function to update all geometries so that everything is OK at all window sizes. It's a bit of work to keep track of everything but it pays off with responsive sites. For those who care, I'd give the chance to have the frame change its size.
A possible solution would be setting a resize parameter in size.md:

width: 800
height: 600
resize: true

This could also keep the width/height proportion in case the width of the frame changes because of the responsive layout.

Another problem is being able to set a width greater than the authorea column width or a height greater than the window innerHeight. A possible solution would be:

width: max, 4
height: max, 3

This would keep the frame size at a ratio width/height = 4/3, maximizing width or height depending on window innerWidth/innerHeight (resize would be true by default in this case).

PRODUCTIVITY

• can't link local resources even using ?raw=true because of bad encoding

  • see https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/index.js?raw=true (look for d3.select('viz') see how it gets encoded)
  • we have to use external resources like <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/14774950/index.js"> instead
  • resources have to be https: if we use external sites that don't provide https, this is a problem (d3 website for example)

• if this gets fixed, to avoid overhead when developing locally, I'd prefer not having to use master/file/ but rather:

  • refer to the "local" path of the article (<script type="text/javascript" src="figures/figure_1/index.js?raw=true">)
  • even better, refer to the "local" path of the figures (<script type="text/javascript" src="figure_1/index.js"> or <link rel="stylesheet" href="commons/scaffolding.css"> / <link rel="stylesheet" href="figure_1/style.css">)

• also if this gets fixed, for the same reason I'd avoid using ?raw=true, like:

  • https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/index.js/show to see the files in editable mode
  • https://www.authorea.com/users/2092/articles/7393/master/file/figures/figure_1/index.js for html inclusion