fix(markdown): Move caption to children

markdown/dev/guides/patterns/en.md

@@ -11,10 +11,9 @@ pattern is generated by FreeSewing.
 This illustration is a good starting point to gain a better 
 understanding of the structure of a FreeSewing pattern:
 
-<Example 
+<Example part="docs_overview">
-  part="docs_overview" 
+A schematic overview of FreeSewing
-  caption="A schematic overview of FreeSewing"
+</Example>
-/>
 
 If we look at our image, it can be divided into three areas:
 
@@ -24,7 +23,7 @@ If we look at our image, it can be divided into three areas:
 
 Let's take a closer look at everything that is contained within our central **Pattern** box:
 
-<ReadMore list />
+<ReadMore />
 
 <Note>
 

markdown/dev/guides/patterns/parts/en.md

@@ -3,11 +3,9 @@ title: Parts
 order: 20
 ---
 
-<Example 
+<Example part="docs_overview" options={{focus: "Part"}}>
-  part="docs_overview" 
+Parts divide your pattern into re-usable components
-  caption="Parts divide your pattern into re-usable components"
+</Example>
-  options={{focus: "Part"}}
-/>
 
 Parts are a container for the points, paths, and snippets of (a part of) your pattern.
 They are also re-usable by other patterns, which makes them a powerful tool to build 

markdown/dev/guides/patterns/paths/en.md

@@ -3,11 +3,9 @@ title: Paths
 order: 40
 ---
 
-<Example 
+<Example part="docs_overview" options={{focus: "Paths"}}>
-  part="docs_overview" 
+Paths are the lines and curves of your pattern
-  caption="Paths are the lines and curves of your pattern"
+</Example>
-  options={{focus: "Paths"}}
-/>
 
 Paths are the lines and curves that make up your pattern.
 

markdown/dev/guides/patterns/pattern/en.md

@@ -3,11 +3,9 @@ title: Pattern
 order: 80
 ---
 
-<Example 
+<Example part="docs_overview" options={{focus: "Pattern"}}>
-  part="docs_overview" 
+The pattern you create will be a constructor for instances of your pattern
-  caption="The pattern you create will be a constructor for instances of your pattern"
+</Example>
-  options={{focus: "Pattern"}}
-/>
 
 Last but not least, we've arrived at the level of the pattern itself.
 The pattern is a container that holds all your parts, along with the configuration

markdown/dev/guides/patterns/points/en.md

@@ -3,11 +3,9 @@ title: Points
 order: 30
 ---
 
-<Example 
+<Example part="docs_overview" options={{focus: "Points"}}>
-  part="docs_overview" 
+Points store coordinates
-  caption="Points store coordinates"
+</Example>
-  options={{focus: "Points"}}
-/>
 
 Developing a pattern with FreeSewing is similar to doing it on paper.
 But instead of using a pencil and paper, you'll be writing code.

markdown/dev/guides/patterns/snippets/en.md

@@ -3,11 +3,9 @@ title: Snippets
 order: 50
 ---
 
-<Example 
+<Example part="docs_overview" options={{focus: "Snippets"}}>
-  part="docs_overview" 
+Snippets are little embelishments that go on your pattern
-  caption="Snippets are little embelishments that go on your pattern"
+</Example>
-  options={{focus: "Snippets"}}
-/>
 
 Snippets are little embellishments you can use and re-use on your pattern.
 They are typically used for things like logos or buttons. 
@@ -20,8 +18,7 @@ Each snippet must have:
 Since our example image does not have any snippets in it, here's another example
 of a `button`, `buttonhole`, and `logo` snippet added to a FreeSewing pattern:
 
-<Example 
+<Example part="snippet">
-  part="snippet" 
+An example of the use of snippets
-  caption="An example of the use of snippets"
+</Example>
-/>
 

markdown/dev/guides/patterns/store/en.md

@@ -3,11 +3,9 @@ title: Store
 order: 60
 ---
 
-<Example 
+<Example part="docs_overview" options={{focus: "Store"}}>
-  part="docs_overview" 
+The store provides pattern-wide key/value storage
-  caption="The store provides pattern-wide key/value storage"
+</Example>
-  options={{focus: "Store"}}
-/>
 
 The store provides key-value storage that is shared across your pattern.
 

markdown/dev/guides/prerequisites/coordinate-system/en.md

@@ -7,7 +7,9 @@ The coordinate system in FreeSewing -- and in SVG -- follows the same rules as t
 You start at the top-left, and as you go to the right, the X-coordinate will increase.
 As you go down the Y-coordinate will increase.
 
-<Example part="docs_coords" caption="The SVG coordinate system" /> 
+<Example part="docs_coords">
+The SVG coordinate system
+</Example>
 
 The image above illustrates both the X-axis and Y-axis.
 On the X-axis, `20` is further to the right than `10`.

markdown/dev/howtos/code/adding-snippets/en.md

@@ -27,4 +27,7 @@ See [Using attributes](/howtos/code/attributes/) for details on how to set attri
 
 Below is an example of the available snippets, and the use of the `data-scale` and `data-rotate` attributes:
 
-<Example pattern="rendertest" caption="Overview of available snippets" options={{ colors: false, text: false, macros: false, circles: false, widthHd: false }} />
+<Example pattern="rendertest" options={{ colors: false, text: false, macros: false, circles: false, widthHd: false }}>
+Overview of available snippets 
+</Example>
+

markdown/dev/howtos/code/adding-text/en.md

@@ -16,10 +16,9 @@ points.anchor = new Point(100, 25)
   .attr("data-text-class", "center");
 ```
 
-<Example 
+<Example part="point_attr">
-  part="point_attr" 
+Text inserted in a FreeSewing pattern
-  caption="Text inserted in a FreeSewing pattern"
+</Example>
-/>
 
 <Note>
 
@@ -46,7 +45,7 @@ paths.example = new Path()
   .attr("data-text-class", "text-xs center");
 ```
 
-<Example 
+<Example part="path_attr">
-  part="path_attr" 
+Text on a path
-  caption="Text on a path"
+</Example>
-/>
+

markdown/dev/howtos/code/drawing-circles/en.md

@@ -12,5 +12,7 @@ to the radius of the circle you want to draw.
 
 In addition, all attributes that have a `data-circle-` prefix will apply to the circle, rather than the point.
 
-<Example pattern="rendertest" caption="Circles" options={{ colors: false, text: false, macros: false, snippets: false, widthHd: false }} />
+<Example pattern="rendertest" options={{ colors: false, text: false, macros: false, snippets: false, widthHd: false }}>
+Circles
+</Example>
 

markdown/dev/reference/api/macros/bartack/en.md

@@ -5,7 +5,9 @@ title: bartack
 The `bartack` macro allows you to add a *bartack* marker to your sewing pattern.
 It is provided by the [bartack plugin](/reference/plugins/bartack/).
 
-<Example part="plugin_bartack" caption="Example of the bartack macro" />
+<Example part="plugin_bartack">
+Example of the bartack macro
+</Example>
 
 ```js
 points.a = new Point(15, 15)

markdown/dev/reference/api/macros/bartackalong/en.md

@@ -6,7 +6,9 @@ The `bartackAlong` macro allows you to add a *bartack* marker to your sewing pat
 More specifically, a bartack along a path.
 It is provided by the [bartack plugin](/reference/plugins/bartack/).
 
-<Example part="plugin_bartackalong" caption="Example of the bartackAlong macro" />
+<Example part="plugin_bartackalong">
+Example of the bartackAlong macro
+</Example>
 
 ```js
 points.a = new Point(15, 15)

markdown/dev/reference/api/macros/bartackfractionalong/en.md

@@ -6,7 +6,9 @@ The `bartackFractionAlong` macro allows you to add a *bartack* marker to your se
 More specifically, a bartack along a fraction of a path.
 It is provided by the [bartack plugin](/reference/plugins/bartack/).
 
-<Example part="plugin_bartackfractionalong" caption="Example of the bartackFractionAlong macro" />
+<Example part="plugin_bartackfractionalong">
+Example of the bartackFractionAlong macro
+</Example>
 
 ```js
 points.a = new Point(15, 15)

markdown/dev/reference/api/macros/cutonfold/en.md

@@ -5,7 +5,9 @@ title: cutonfold
 The `cutonfold` macro adds a *cut on fold* indicator to your pattern.  
 It is provided by the [cutonfold plugin](/reference/plugins/cutonfold).
 
-<Example part="plugin_cutonfold" caption="Example of the cut on fold indicator added by this macro" />
+<Example part="plugin_cutonfold">
+Example of the cut on fold indicator added by this macro
+</Example>
 
 ```js
 macro('cutonfold', {

markdown/dev/reference/api/macros/grainline/en.md

@@ -5,7 +5,9 @@ title: grainline
 The `grainline` macro adds a *grainline* indicator to your pattern.  
 It is provided by the [grainline plugin](/reference/plugins/grainline/).
 
-<Example part="plugin_grainline" caption="Example of the grainline indicator added by this macro" />
+<Example part="plugin_grainline">
+Example of the grainline indicator added by this macro
+</Example>
 
 ```js
 macro("grainline", {

markdown/dev/reference/api/macros/hd/en.md

@@ -5,10 +5,9 @@ title: hd
 The `hd` macro adds a *horizontal dimension* to your pattern.  
 It is provided by the [dimension plugin](/reference/plugins/dimension/).
 
-<Example 
+<Example part="point_dx">
-  part="point_dx"
+An example of a horizontal dimension
-  caption="An example of a horizontal dimension"
+</Example>
-/>
 
 ```js
 macro('hd', {

markdown/dev/reference/api/macros/ld/en.md

@@ -5,10 +5,9 @@ title: ld
 The `ld` macro adds a *linear dimension* to your pattern.  
 It is provided by the [dimension plugin](/reference/plugins/dimension/).
 
-<Example 
+<Example part="point_dist">
-  part="point_dist"
+An example of a linear dimension
-  caption="An example of a linear dimension"
+</Example>
-/>
 
 ```js
 macro('ld', {

markdown/dev/reference/api/macros/miniscale/en.md

@@ -8,7 +8,9 @@ users to verify their pattern is printed to scale.
 The `miniscale` macro is provided by the [scalebox plugin](/reference/plugins/scalebox).
 It is the mini version of [the scalebox macro](/reference/macros/scalebox/).
 
-<Example part="plugin_scalebox" caption="Example of a scalebox (left) and miniscale (right)" />
+<Example part="plugin_scalebox">
+Example of a scalebox (left) and miniscale (right)
+</Example>
 
 ```js
 macro('miniscale', {

markdown/dev/reference/api/macros/mirror/en.md

@@ -5,7 +5,9 @@ title: mirror
 The `mirror` macro allows you to mirror points and/or paths around a mirror line.
 It is provided by the [mirror plugin](/reference/plugins/mirror/).
 
-<Example part="plugin_mirror" caption="Example of the mirror plugin" />
+<Example part="plugin_mirror">
+Example of the mirror plugin
+</Example>
 
 ```js
 points.a = new Point(5,5)

markdown/dev/reference/api/macros/pd/en.md

@@ -5,7 +5,9 @@ title: pd
 The `pd` macro adds a *path dimension* to your pattern, indicating the length of a path.  
 It is provided by the [dimension plugin](/reference/plugins/dimension/).
 
-<Example part="path_length" caption="Example of a multiple path dimensions" />
+<Example part="path_length"><
+Example of a multiple path dimensions
+</Example>
 
 ```js
 macro('pd', {

markdown/dev/reference/api/macros/round/en.md

@@ -6,7 +6,9 @@ The `round` macro rounds a corner. It is provided by the [round plugin](/referen
 
 Note that this is only intended for 90 degree corners.
 
-<Example part="plugin_round" caption="Example of corners rounded with the round plugin" />
+<Example part="plugin_round">
+Example of corners rounded with the round plugin
+</Example>
 
 ```js
 macro('round', {

markdown/dev/reference/api/macros/scalebox/en.md

@@ -7,7 +7,9 @@ users to verify their pattern is printed to scale.
 
 The `scalebox` macro is provided by the [scalebox plugin](/reference/plugins/scalebox).
 
-<Example part="plugin_scalebox" caption="Example of the scalebox added by this macro" />
+<Example part="plugin_scalebox">
+Example of the scalebox added by this macro
+</Example>
 
 ```js
 macro('scalebox', {

markdown/dev/reference/api/path/_curve/en.md

@@ -24,7 +24,9 @@ So the only purpose of this method is to save your some typing.
 
 </Tip>
 
-<Example part="path__curve" caption="Example of the Path._curve() method" />
+<Example part="path__curve">
+Example of the Path.\_curve() method
+</Example>
 
 ```js
   let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/attr/en.md

@@ -16,7 +16,9 @@ This allows you to chain different calls together as in the example below.
 
 If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
 
-<Example part="path_attr" caption="Example of the Path.attr() method" />
+<Example part="path_attr">
+Example of the Path.attr() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/clone/en.md

@@ -9,7 +9,9 @@ Path path.clone()
 
 Returns a new Path that is a deep copy of this path.
 
-<Example part="path_clone" caption="Example of the Path.clone() method" />
+<Example part="path_clone">
+Example of the Path.clone() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/close/en.md

@@ -8,7 +8,9 @@ Path path.close()
 
 Closes a path by drawing a straight line from the current position to the path's start.
 
-<Example part="path_close" caption="Example of the Path.close() method" />
+<Example part="path_close">
+Example of the Path.close() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/curve/en.md

@@ -8,7 +8,9 @@ Path path.curve(Point cp1, Point cp2, Point to)
 
 Draws a cubic Bezier curve from the current position via two control points to a given endpoint.
 
-<Example part="path_curve" caption="Example of the Path.curve() method" />
+<Example part="path_curve">
+Example of the Path.curve() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/curve_/en.md

@@ -24,7 +24,9 @@ So the only purpose of this method is to save your some typing;
 
 </Tip>
 
-<Example part="path_curve_" caption="Example of the Path.curve_() method" />
+<Example part="path_curve_">
+Example of the Path.curve\_() method
+</Example>
 
 ```js
   let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/divide/en.md

@@ -9,7 +9,9 @@ array path.divide()
 Breaks a path apart in an array of atomic paths. An atomic path is a path that can't be divided further and is
 always made up of one move + one drawing operation.
 
-<Example part="path_divide" caption="Example of the Path.divide() method" />
+<Example part="path_divide">
+Example of the Path.divide() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/edge/en.md

@@ -17,7 +17,9 @@ Returns the Point object at the edge of the path you specify. Edge must be one o
  - `bottomLeft`
  - `bottomRight`
 
-<Example part="path_edge" caption="Example of the Path.edge() method" />
+<Example part="path_edge">
+Example of the Path.edge() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/end/en.md

@@ -8,7 +8,9 @@ Point path.end()
 
 Returns the Point object at the end of the path.
 
-<Example part="path_end" caption="Example of the Path.end() method" />
+<Example part="path_end">
+Example of the Path.end() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/intersects/en.md

@@ -19,7 +19,9 @@ If you do know, use one of the intersection methods in [Utils](/reference/api/ut
 
 </Tip>
 
-<Example part="path_intersects" caption="Example of the Path.intersects() method" />
+<Example part="path_intersects">
+Example of the Path.intersects() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/intersectsx/en.md

@@ -8,7 +8,9 @@ array|false path.intersectsX(float x)
 
 Returns the Point object(s) where the path intersects with a given X-value.
 
-<Example part="path_intersectsx" caption="Example of the Path.intersectsX() method" />
+<Example part="path_intersectsx">
+Example of the Path.intersectsX() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/intersectsy/en.md

@@ -8,7 +8,9 @@ array|false path.intersectsY(float y)
 
 Returns the Point object(s) where the path intersects with a given Y-value.
 
-<Example part="path_intersectsy" caption="Example of the Path.intersectsY() method" />
+<Example part="path_intersectsy">
+Example of the Path.intersectsY() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/join/en.md

@@ -14,7 +14,9 @@ You cannot join a closed path to another path
 
 </Warning>
 
-<Example part="path_join" caption="Example of the Path.join() method" />
+<Example part="path_join">
+Example of the Path.join() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/length/en.md

@@ -8,7 +8,9 @@ float path.length()
 
 Returns the length of the path.
 
-<Example part="path_length" caption="Example of the Path.length() method" />
+<Example part="path_length">
+Example of the Path.length() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();

markdown/dev/reference/api/path/line/en.md

@@ -8,7 +8,9 @@ Path path.line(Point to)
 
 Draws a straight line from the current position to a given point.
 
-<Example part="path_line" caption="Example of the Path.line() method" />
+<Example part="path_line">
+Example of the Path.line() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/move/en.md

@@ -30,7 +30,9 @@ paths.example = new Path()
 </Tip>
 
 
-<Example part="path_move" caption="Example of the Path.move() method" />
+<Example part="path_move">
+Example of the Path.move() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/offset/en.md

@@ -8,7 +8,9 @@ Path path.offset(float distance)
 
 Returns a new Path that is offset by distance from the original path.
 
-<Example part="path_offset" caption="Example of the Path.offset() method" />
+<Example part="path_offset">
+Example of the Path.offset() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/reverse/en.md

@@ -17,7 +17,9 @@ If you want a deep copy, including the attributes, use `Path.clone().reverse()`.
 
 </Note>
 
-<Example part="path_reverse" caption="Example of the Path.reverse() method" />
+<Example part="path_reverse">
+Example of the Path.reverse() method
+</Example>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/path/shiftalong/en.md

@@ -8,7 +8,9 @@ Point path.shiftAlong(float distance[, int stepsPerMm=25])
 
 Returns a point that lies at distance travelled along the path.
 
-<Example part="path_shiftalong" caption="Example of the Path.shiftAlong() method" />
+<Example part="path_shiftalong">
+Example of the Path.shiftAlong() method
+</Example>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/shiftfractionalong/en.md

@@ -8,10 +8,9 @@ Point path.shiftFractionAlong(float fraction[, int stepsPerMm=25])
 
 Returns a point that lies at fraction of the length of the path travelled along the path.
 
-<Example 
+<Example part="path_shiftfractionalong">
-  part="path_shiftfractionalong" 
+Example of the Path.shiftFractionAlong() method
-  caption="Example of the Path.shiftFractionAlong() method" 
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/split/en.md

@@ -8,10 +8,9 @@ array path.split(Point splitPoint)
 
 Splits a path in two halves, on a point along that path that you pass it.
 
-<Example 
+<Example part="path_split">
-  part="path_split" 
+Example of the Path.split() method
-  caption="Example of the Path.split() method" 
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/start/en.md

@@ -8,10 +8,9 @@ Point path.start()
 
 Returns the Point object at the start of the path.
 
-<Example 
+<Example part="path_start">
-  part="path_start" 
+Example of the Path.start() method
-  caption="Example of the Path.start() method" 
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/path/translate/en.md

@@ -10,10 +10,9 @@ Returns a path with
 [a translate transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Translate)
 applied.
 
-<Example 
+<Example part="path_translate">
-  part="path_translate" 
+Example of the Path.translate() method
-  caption="Example of the Path.translate() method" 
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();

markdown/dev/reference/api/path/trim/en.md

@@ -28,10 +28,9 @@ You can see an example of this
 
 </Warning>
 
-<Example 
+<Example part="path_trim">
-  part="path_trim" 
+Example of the Path.trim() method
-  caption="Example of the Path.trim() method" 
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/point/angle/en.md

@@ -13,10 +13,9 @@ float point.angle(Point pointB)
 
 ## Point.angle() Example
 
-<Example
+<Example part="point_angle">
-  part="point_angle"
+An example of the Point.angle() method
-  caption="An example of the Point.angle() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/point/attr/en.md

@@ -22,10 +22,9 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
 
 ## Point.attr() example
 
-<Example
+<Example part="point_attr">
-  part="point_attr"
+An example of the Point.attr() method
-  caption="An example of the Point.attr() method"
+</Example>
-/>
 
 ```js
 let { Point, points } = part.shorthand();

markdown/dev/reference/api/point/clone/en.md

@@ -21,10 +21,9 @@ The [`Point.copy()`](reference/api/point/copy/) method will only copy the point'
 
 ## Point.clone() example
 
-<Example
+<Example part="point_clone">
-  part="point_clone"
+An example of the Point.clone() method
-  caption="An example of the Point.clone() method"
+</Example>
-/>
 
 ```js
   let { Point, points, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/point/copy/en.md

@@ -21,10 +21,9 @@ To also copy the attributes, use [`Point.clone()`](reference/api/point/clone/) i
 
 ## Point.copy() example
 
-<Example
+<Example part="point_copy">
-  part="point_copy"
+An example of the Point.copy() method
-  caption="An example of the Point.copy() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/point/dist/en.md

@@ -12,10 +12,9 @@ float point.dist(Point point)
 
 ## Point.dist() example
 
-<Example
+<Example part="point_dist">
-  part="point_dist"
+An example of the Point.dist() method
-  caption="An example of the Point.dist() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand()

markdown/dev/reference/api/point/dx/en.md

@@ -12,10 +12,9 @@ float point.dx(Point point)
 
 ## Point.dx() example
 
-<Example
+<Example part="point_dx">
-  part="point_dx"
+An example of the Point.dx() method
-  caption="An example of the Point.dx() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand()

markdown/dev/reference/api/point/dy/en.md

@@ -12,10 +12,9 @@ float point.dy(Point point)
 
 ## Point.dy() example
 
-<Example
+<Example part="point_dy">
-  part="point_dy"
+An example of the Point.dy() method
-  caption="An example of the Point.dy() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand()

markdown/dev/reference/api/point/flipx/en.md

@@ -13,10 +13,9 @@ Point point.flipX(Point mirror = false)
 
 ## Point.flipX() example
 
-<Example
+<Example part="point_flipx">
-  part="point_flipx"
+An example of the Point.flipX() method
-  caption="An example of the Point.flipX() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/point/flipy/en.md

@@ -13,10 +13,9 @@ Point point.flipY(Point mirror = false)
 
 ## Point.flipY() example
 
-<Example
+<Example part="point_flipy">
-  part="point_flipy"
+An example of the Point.flipY() method
-  caption="An example of the Point.flipY() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths } = part.shorthand();

markdown/dev/reference/api/point/rotate/en.md

@@ -15,10 +15,9 @@ Point point.rotate(float angle, Point center)
 
 ## Point.rotate() example
 
-<Example
+<Example part="point_rotate">
-  part="point_rotate"
+An example of the4Point.rotate() method
-  caption="An example of the Point.rotate() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/point/shift/en.md

@@ -13,10 +13,9 @@ Point point.shift(float angle, float distance)
 
 ## Point.shift() example
 
-<Example
+<Example part="point_shift">
-  part="point_shift"
+An example of the Point.shift() method
-  caption="An example of the Point.shift() method"
+</Example>
-/>
 
 ```js
 let { Point, points, macro } = part.shorthand();

markdown/dev/reference/api/point/shiftfractiontowards/en.md

@@ -18,10 +18,9 @@ Point point.shiftFractionTowards(Point target, float fraction)
 
 ## Point.shiftFractionTowards() example
 
-<Example
+<Example part="point_shiftfractiontowards">
-  part="point_shiftfractiontowards"
+An example of the Point.shiftFractionTowards() method
-  caption="An example of the Point.shiftFractionTowards() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();

markdown/dev/reference/api/point/shiftoutwards/en.md

@@ -12,10 +12,9 @@ Point point.shiftOutwards(Point target, float distance)
 
 ## Point.shiftOutwards() example
 
-<Example
+<Example part="point_shiftoutwards">
-  part="point_shiftoutwards"
+An example of the Point.shiftOutwards() method
-  caption="An example of the Point.shiftOutwards() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();

markdown/dev/reference/api/point/shifttowards/en.md

@@ -14,10 +14,9 @@ Point point.shiftTowards(Point target, float distance)
 
 ## Point.shiftTowards() example
 
-<Example
+<Example part="point_shifttowards">
-  part="point_shifttowards"
+An example of the Point.shiftTowards() method
-  caption="An example of the Point.shiftTowards() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Path, paths, macro } = part.shorthand();

markdown/dev/reference/api/point/sitson/en.md

@@ -24,10 +24,9 @@ bool point.sitsOn(Point check)
 
 ## Point.sitsOn() example
 
-<Example
+<Example part="point_sitson">
-  part="point_sitson"
+An example of the Point.sitsOn() method
-  caption="An example of the Point.sitsOn() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/point/sitsroughlyon/en.md

@@ -21,10 +21,9 @@ that this one rounds things down to the nearest integer (thus mm) before checkin
 
 ## Point.sitsRoughlyOn() example
 
-<Example 
+<Example part="point_sitsroughlyon">
-  part="point_sitsroughlyon"
+An example of the Point.sitsRoughlyOn() method
-  caption="An example of the Point.sitsRoughlyOn() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/point/translate/en.md

@@ -19,10 +19,9 @@ Positive values for `deltaX` will move the point to the right. Positive values f
 
 ## Point.translate() example
 
-<Example
+<Example part="point_translate">
-  part="point_translate"
+An example of the Point.translate() method
-  caption="An example of the Point.translate() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Snippet, snippets, macro } = part.shorthand();

markdown/dev/reference/api/snippet/attr/en.md

@@ -16,10 +16,9 @@ but returns the Snippet object.  This allows you to chain different calls togeth
 If the third parameter is set to `true` it will call [`Attributes.set()`](./attributes#set) instead, 
 thereby overwriting the value of the attribute.
 
-<Example
+<Example part="snippet_attr">
-  part="snippet_attr"
+An example of the Snippet.attr() method
-  caption="An example of the Snippet.attr() method"
+</Example>
-/>
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/snippet/clone/en.md

@@ -8,10 +8,10 @@ Snippet snippet.clone()
 
 Returns a new Snippets object that is a deep copy of this one.
 
-<Example
+<Example part="snippet_clone">
-  part="snippet_clone"
+An example of the Snippet.clone() method
-  caption="An example of the Snippet.clone() method"
+</Example>
-/>
+
 
 ```js
 let { Point, points, Snippet, snippets } = part.shorthand();

markdown/dev/reference/api/snippets/button/en.md

@@ -9,5 +9,7 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('button', points.anchor)
 ```
 
-<Example part="snippets_button" caption="An example of the button snippet" />
+<Example part="snippets_button">
+An example of the button snippet
+</Example>
 

markdown/dev/reference/api/snippets/buttonhole-end/en.md

@@ -9,7 +9,9 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('buttonhole-end', points.anchor)
 ```
 
-<Example part="snippets_buttonhole_end" caption="An example of the buttonhole-end snippet" />
+<Example part="snippets_buttonhole_end">
+An example of the buttonhole-end snippet
+</Example>
 
 <Note>
 

markdown/dev/reference/api/snippets/buttonhole-start/en.md

@@ -9,7 +9,10 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('buttonhole-start', points.anchor)
 ```
 
-<Example part="snippets_buttonhole_start" caption="An example of the buttonhole-start snippet" />
+<Example part="snippets_buttonhole_start">
+An example of the buttonhole-start snippet
+</Example>
+
 
 <Note>
 

markdown/dev/reference/api/snippets/buttonhole/en.md

@@ -9,7 +9,9 @@ provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('buttonhole', points.anchor)
 ```
 
-<Example part="snippets_buttonhole" caption="An example of the buttonhole snippet" />
+<Example part="snippets_buttonhole">
+An example of the buttonhole snippet
+</Example>
 
 <Note>
 

markdown/dev/reference/api/snippets/logo/en.md

@@ -9,5 +9,7 @@ provided by [plugin-logo](/reference/plugins/logo/).
 snippets.demo = new Snippet('logo', points.anchor)
 ```
 
-<Example part="snippets_logo" caption="An example of the logo snippet" />
+<Example part="snippets_logo">
+An example of the logo snippet
+</Example>
 

markdown/dev/reference/api/snippets/notch/en.md

@@ -8,5 +8,7 @@ provided by [plugin-theme](/reference/plugins/theme/).
 ```js
 snippets.demo = new Snippet('bnotch', points.anchor)
 ```
-<Example part="snippets_notch" caption="An example of the notch snippet" />
+<Example part="snippets_notch">
+An example of the notch snippet
+</Example>
 

markdown/dev/reference/api/snippets/snap-socket/en.md

@@ -10,5 +10,7 @@ It is provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('snap-socket', points.anchor)
 ```
 
-<Example part="snippets_snapsocket" caption="An example of the snap-socket snippet" />
+<Example part="snippets_snapsocket">
+An example of the snap-socket snippet
+</Example>
 

markdown/dev/reference/api/snippets/snap-stud/en.md

@@ -10,5 +10,7 @@ It is provided by [plugin-buttons](/reference/plugins/buttons/).
 snippets.demo = new Snippet('snap-stud', points.anchor)
 ```
 
-<Example part="snippets_snapstud" caption="An example of the snap-stud snippet" />
+<Example part="snippets_snapstud">
+An example of the snap-stud snippet
+</Example>
 

markdown/dev/reference/api/utils/beamintersectscircle/en.md

@@ -24,7 +24,9 @@ Set sort to:
  - `x` : The point with the lowest X-coordinate will go first (left to right)
  - `y` : The point with the lowest Y-coordinate will go first (top to bottom)
 
-<Example part="utils_beamintersectscircle" caption="A Utils.beamIntersectsCircle() example" />
+<Example part="utils_beamintersectscircle">
+A Utils.beamIntersectsCircle() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/beamintersectsx/en.md

@@ -9,7 +9,9 @@ Point | false utils.beamIntersectsX(Point A, Point B, float X)
 Finds the intersection between an endless line and a given X-value. Returns a [Point](#point) object
 for the intersection, or `false` there is no intersection.
 
-<Example part="utils_beamintersectsx" caption="A Utils.beamIntersectsX() example" />
+<Example part="utils_beamintersectsx">
+A Utils.beamIntersectsX() example
+</Example>
 
 ```js
   let {

markdown/dev/reference/api/utils/beamintersectsy/en.md

@@ -9,7 +9,9 @@ Point | false utils.beamIntersectsY(Point A, Point B, float Y)
 Finds the intersection between an endless line and a given Y-value. Returns a [Point](#point) object
 for the intersection, or `false` there is no intersection.
 
-<Example part="utils_beamintersectsy" caption="A Utils.beamIntersectsY() example" />
+<Example part="utils_beamintersectsy">
+A Utils.beamIntersectsY() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/beamsintersect/en.md

@@ -14,7 +14,9 @@ Point | false utils.beamsIntersect(
 Finds the intersection between two endless lines (beams). Returns a [Point](#point) object
 for the intersection, or `false` if the lines don't intersect.
 
-<Example part="utils_beamsintersect" caption="A Utils.beamIntersect() example" />
+<Example part="utils_beamsintersect">
+A Utils.beamIntersect() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/circlesintersect/en.md

@@ -22,7 +22,9 @@ Set sort to:
  - `x` : The point with the lowest X-coordinate will go first (left to right)
  - `y` : The point with the lowest Y-coordinate will go first (top to bottom)
 
-<Example part="utils_circlesintersect" caption="A Utils.circlesIntersect() example" />
+<Example part="utils_circlesintersect">
+A Utils.circlesIntersect() example
+</Example>
 
 ```js
 let { Point, points, Snippet, snippets, utils } = part.shorthand();

markdown/dev/reference/api/utils/curvesintersect/en.md

@@ -16,7 +16,9 @@ array | false utils.curvesIntersect(
 
 Finds the intersections between two curves described by 4 points each.
 
-<Example part="utils_curvesintersect" caption="A Utils.curvesIntersect() example" />
+<Example part="utils_curvesintersect">
+A Utils.curvesIntersect() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/lineintersectscircle/en.md

@@ -23,7 +23,9 @@ Set sort to:
  - `x` : The point with the lowest X-coordinate will go first (left to right)
  - `y` : The point with the lowest Y-coordinate will go first (top to bottom)
 
-<Example part="utils_lineintersectscircle" caption="A Utils.lineIntersectsCircle() example" />
+<Example part="utils_lineintersectscircle">
+A Utils.lineIntersectsCircle() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/lineintersectscurve/en.md

@@ -16,7 +16,9 @@ array | false utils.lineIntersectsCurve(
 Finds the intersection between a line segment from point `from` to point `to`
 and a curve described by points `start`, `cp1`, `cp2, and `end`.
 
-<Example part="utils_lineintersectscurve" caption="A Utils.lineIntersectsCurve() example" />
+<Example part="utils_lineintersectscurve">
+A Utils.lineIntersectsCurve() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/linesintersect/en.md

@@ -14,7 +14,9 @@ Point | false utils.linesIntersect(
 Finds the intersection between two line segments. Returns a [Point](#point) object
 for the intersection, or `false` if the lines don't intersect.
 
-<Example part="utils_linesintersect" caption="A Utils.linesIntersect() example" />
+<Example part="utils_linesintersect">
+A Utils.linesIntersect() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/pointonbeam/en.md

@@ -26,7 +26,9 @@ When that happens, you can lower the precision so you get what you expect.
 
 </Note>
 
-<Example part="utils_pointonbeam" caption="A Utils.pointOnBeam() example" />
+<Example part="utils_pointonbeam">
+A Utils.pointOnBeam() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/pointoncurve/en.md

@@ -20,7 +20,9 @@ Keep in mind that calculations with Bezier curves are often aproximations.
 
 </Note>
 
-<Example part="utils_pointoncurve" caption="A Utils.pointOnCurve() example" />
+<Example part="utils_pointoncurve">
+A Utils.pointOnCurve() example
+</Example>
 
 ```js
 let {

markdown/dev/reference/api/utils/pointonline/en.md

@@ -15,7 +15,9 @@ Returns `true` if the point `check` lies on a line segment from point `from` to
 
 The fourth parameter controls the precision. See [pointOnBeam](#utilspointonbeam).
 
-<Example part="utils_pointonline" caption="A Utils.pointOnLine() example" />
+<Example part="utils_pointonline">
+A Utils.pointOnLine() example
+</Example>
 
 ```js
 let {

markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md

@@ -47,7 +47,10 @@ While we're at it, let's add a point where the closure's snap should go:
 points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5)
 ```
 
-<Example pattern="tutorial" part="step8" caption="The right part looks a bit wonky now, but we'll get to that" />
+<Example pattern="tutorial" part="step8">
+The right part looks a bit wonky now, but we'll get to that
+</Example>
+
 
 Now let's mirror this on the other side, and replace our `neck` and `rect` paths with a new path.
 

markdown/dev/tutorials/pattern-design/completing-the-neck-opening/en.md

@@ -64,5 +64,7 @@ paths.neck = new Path()
   .close()
 ```
 
-<Example pattern="tutorial" part="step4" caption="And now you have a complete neck opening" />
+<Example pattern="tutorial" part="step4">
+And now you have a complete neck opening
+</Example>
 

markdown/dev/tutorials/pattern-design/completing-your-pattern/en.md

@@ -172,7 +172,10 @@ macro("scalebox", { at: points.scalebox })
 
 And with that, our pattern is now *complete*:
 
-<Example pattern="tutorial" part="step11" caption="We used attributes to add color, dashes, text on a path and even opacity" />
+<Example pattern="tutorial" part="step11">
+We used attributes to add color, dashes, text on a path and even opacity
+</Example>
+
 
 We're not done yet though. There's one more thing the user can ask for: a *paperless* pattern.
 

markdown/dev/tutorials/pattern-design/creating-the-closure/en.md

@@ -59,7 +59,9 @@ macro("round", {
 
 <Note> You can find more information on the `round` macro in [the macros docs](/reference/api/macros/round/).</Note>
 
-<Example pattern="tutorial" part="step7" caption="Pretty good, but how are we going to fit it over the baby's head?" />
+<Example pattern="tutorial" part="step7">
+Pretty good, but how are we going to fit it over the baby's head?
+</Example>
 
 Like our neck opening, we've only drawn half since we can simply copy the points to the other side.
 

markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/en.md

@@ -63,5 +63,8 @@ and the sides are equidistant from the neck neck opening.
 
 You didn't have to do that. But it looks nicely balanced this way:
 
-<Example pattern="tutorial" part="step5" caption="Note how the neck opening is the same distance from the left, right, and top edge" />
+<Example pattern="tutorial" part="step5">
+Note how the neck opening is the same distance from the left, right, and top edge
+</Example>
+
 

markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md

@@ -113,7 +113,10 @@ macro("round", {
 
 With that out of the way, our bib now looks like this:
 
-<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
+<Example pattern="tutorial" part="step9">
+That is looking a lot like a bib
+</Example>
+
 
 <Note> 
 

markdown/dev/tutorials/pattern-design/paperless-bib/en.md

@@ -83,7 +83,9 @@ if (paperless) {
 
 There's a lot going on, but it's mostly repetition. To see what that did to your pattern, you have to enable *paperless mode* in your developing environment; you can find the option under *Pattern options* on the right. Let's look at the end result, and discuss:
 
-<Example pattern="tutorial" part="bib" caption="Your paperless bib" settings={{paperless: true}} />
+<Example pattern="tutorial" part="bib" setting={{paperless: true }}>
+Your paperless bib
+</Example>
 
 We used the `hd` macro to add two horizontal dimensions:
 

markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md

@@ -72,7 +72,9 @@ and keep the rest of the path as it was.
 
 The shape our bib is now completed:
 
-<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />
+<Example pattern="tutorial" part="step10">
+That is looking a lot like a bib
+</Example>
 
 
 

markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md

@@ -44,5 +44,7 @@ paths.rect = new Path()
 
 All of a sudden, things are starting to look like a bib:
 
-<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
+<Example pattern="tutorial" part="step6">
+Pretty good, but how are we going to fit it over the baby's head?
+</Example>
 

markdown/dev/tutorials/pattern-design/your-first-part/en.md

@@ -70,6 +70,9 @@ In our case, we have a part named `bib` so we're using `draftBib()` as the metho
 Congratulations, your pattern now has a `bib` part, rather than a `box` part. 
 It still looks the same though:
 
-<Example pattern="tutorial" part="step1" caption="Our bib part, which is the renamed box part" />
+<Example pattern="tutorial" part="step1">
+Our bib part, which is the renamed box part
+</Example>
+
 
 This `bib` part is where we'll do some real work. But first, we have some more configuration to do.