docs(Widgets): Add a widget gallery in landing page

Issue #2890

CONTRIBUTING.md

@@ -119,6 +119,10 @@ To create and debug a test:
 The vtk.js documentation is part of the code repository and is entirely written in 
 [markdown](https://daringfireball.net/projects/markdown/).
 
+If you create an example, please list it in the [examples landing page](Documentation/content/examples/index.md).
+
+Images and GIF videos added to the [gallery](Documentation/content/docs/gallery) must be compressed as much as possible. You may want to use [ezgif.com](https://ezgif.com/).
+
 ## Reporting Issues
 
 If you encounter problems using vtk.js you may be able to find the solutions in the

Documentation/content/examples/index.md

@@ -1,53 +1,86 @@
-title: Examples
----
-
-<style>
-  .categories {
-    columns: 2 200px;
-    column-gap: 1rem;
-  }
-
-  .category {
-    break-inside: avoid;
-    display: inline-block;
-    width: 100%;
-  }
-
-  .categories br {
-    display: none;
-  }
-
-  .category ul {
-    margin-top: 0;
-  }
-
-  .gallery img {
-    width: 32%;
-    display: inline-block;
-    padding: 2px;
-  }
-
-  .gallery br {
-    display: none;
-  }
-</style>
-
-This will allow you to see the some live code running in your browser. Just pick a class on the left menu or in the category grouping below. The [Simple Cone](SimpleCone.html) is a good example to start with if you are new to VTK.
-
-<div class="gallery">
-
-[![PDBReader Example][PDBReader]](./PDBReader.html)
-[![ElevationReader Example][ElevationReader]](./ElevationReader.html)
-[![VolumeContour Example][VolumeContour]](./VolumeContour.html)
-[![MultiSliceImageMapper Example][MultiSliceImageMapper]](./MultiSliceImageMapper.html)
-[![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html)
-[![ZipHttpReader Example][ZipHttpReader]](./ZipHttpReader.html)
-
-</div>
-
-[ElevationReader]: ../docs/gallery/ElevationReader.jpg
-[MultiSliceImageMapper]: ../docs/gallery/MultiSliceImageMapper.jpg
-[PDBReader]: ../docs/gallery/PDBReader.jpg
-[PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg
-[VolumeContour]: ../docs/gallery/VolumeContour.jpg
-[ZipHttpReader]: ../docs/gallery/ZipHttpReader.jpg
+title: Examples
+---
+
+<style>
+  .categories {
+    columns: 2 200px;
+    column-gap: 1rem;
+  }
+
+  .category {
+    break-inside: avoid;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .categories br {
+    display: none;
+  }
+
+  .category ul {
+    margin-top: 0;
+  }
+
+  .gallery img {
+    width: 32%;
+    display: inline-block;
+    padding: 2px;
+  }
+
+  .gallery br {
+    display: none;
+  }
+</style>
+
+This will allow you to see the some live code running in your browser. Just pick a class on the left menu or in the category grouping below. The [Simple Cone](SimpleCone.html) is a good example to start with if you are new to VTK.
+
+<div class="gallery">
+
+[![PDBReader Example][PDBReader]](./PDBReader.html "PDBReader Example")
+[![ElevationReader Example][ElevationReader]](./ElevationReader.html)
+[![VolumeContour Example][VolumeContour]](./VolumeContour.html)
+[![MultiSliceImageMapper Example][MultiSliceImageMapper]](./MultiSliceImageMapper.html)
+[![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html)
+[![ZipHttpReader Example][ZipHttpReader]](./ZipHttpReader.html)
+
+</div>
+
+[ElevationReader]: ../docs/gallery/ElevationReader.jpg
+[MultiSliceImageMapper]: ../docs/gallery/MultiSliceImageMapper.jpg
+[PDBReader]: ../docs/gallery/PDBReader.jpg
+[PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg
+[VolumeContour]: ../docs/gallery/VolumeContour.jpg
+[ZipHttpReader]: ../docs/gallery/ZipHttpReader.jpg
+
+
+## Widgets
+
+<div class="gallery">
+
+[![AngleWidget Example][AngleWidget]](./AngleWidget.html "Angle (radian, degree) widget example")
+[![ImageCroppingWidget Example][ImageCroppingWidget]](./ImageCroppingWidget.html "Crop/Clip volume rendering with a bounding box/cube/orthogonal planes")
+[![ImplicitPlaneWidget Example][ImplicitPlaneWidget]](./ImplicitPlaneWidget.html "Translate and orient an implicit plane with normal and origin")
+[![InteractiveOrientationWidget Example][InteractiveOrientationWidget]](./InteractiveOrientationWidget.html "Corner coordinate system orientation widget")
+[![LabelWidget Example][LabelWidget]](./LabelWidget.html "Place, edit text size and color of label widget")
+[![LineWidget Example][LineWidget]](./LineWidget.html "Place and edit line/distance widget with handles")
+[![PaintWidget Example][PaintWidget]](./PaintWidget.html "Draw strokes, create rectangle, square, ellipse and disk 2D widgets")
+[![PolyLineWidget Example][PolyLineWidget]](./PolyLineWidget.html "Place multiple connected handles with text")
+[![ResliceCursorWidget Example][ResliceCursorWidget]](./ResliceCursorWidget.html "Axial Coronal and Sagittal MPR/Oblique/Reformatted/Resliced/Slab/MIP views")
+[![ShapeWidget Example][ShapeWidget]](./ShapeWidget.html "2D shape widgets with text information")
+[![SphereWidget Example][SphereWidget]](./SphereWidget.html "2D sphere widget controlled with radius")
+[![SplineWidget Example][SplineWidget]](./PaintWidget.html "Widget to draw open or closed (triangularized) sharp/smooth polygon widget")
+
+</div>
+
+[AngleWidget]: ../docs/gallery/AngleWidget.png
+[ImageCroppingWidget]: ../docs/gallery/ImageCroppingWidget.jpg
+[ImplicitPlaneWidget]: ../docs/gallery/ImplicitPlaneWidget.png
+[InteractiveOrientationWidget]: ../docs/gallery/InteractiveOrientationWidget.png
+[LabelWidget]: ../docs/gallery/LabelWidget.png
+[LineWidget]: ../docs/gallery/LineWidget.png
+[PaintWidget]: ../docs/gallery/PaintWidget.gif
+[PolyLineWidget]: ../docs/gallery/PolyLineWidget.png
+[ResliceCursorWidget]: ../docs/gallery/ResliceCursorWidget.jpg
+[ShapeWidget]: ../docs/gallery/ShapeWidget.png
+[SphereWidget]: ../docs/gallery/SphereWidget.jpg
+[SplineWidget]: ../docs/gallery/SplineWidget.gif