gosling.js icon indicating copy to clipboard operation
gosling.js copied to clipboard

Enhance the example gallery

Open sehilyi opened this issue 2 years ago • 1 comments

For future PR:

  • [ ] Automatic generation of at least static png files
  • [x] Navigation side bar
  • [ ] Compress image files for quick loading
  • [ ] Easy entry points for the community to add examples
  • [ ] Make a module for the example for the reuse in doc
  • [ ] Use varying aspect ratios of the image files (e.g., we can infer this from the spec)
  • [ ] Split examples

Originally posted by @sehilyi in https://github.com/gosling-lang/gosling.js/pull/657#issuecomment-1093302671

sehilyi avatar Apr 08 '22 19:04 sehilyi

Resources for automatic image exports:

  • vg2png: https://github.com/vega/vega-lite/blob/acc4f6b0b9668a925213b59a12301e53478dcbb6/scripts/build-example.sh#L44
  • pngExportTest in HiGlass: https://github.com/higlass/higlass/blob/54f5aae61d3474f9e868621228270f0c90ef9343/test/PngExportTest.js#L5
  • Visual regression testing: https://medium.com/@byrne.greg/creating-a-visual-regression-tool-for-your-web-app-f4920974e2ec
  • https://medium.com/@endingwithali/testing-with-images-in-javascript-52fcbe06961f
  • HiGlass social preview thumbnail: https://github.com/higlass/higlass-server/blob/8e388105f44052f29ee4c8629e7292be2d3a4703/website/views.py#L95

sehilyi avatar Apr 12 '22 19:04 sehilyi