chore(markdown): Updated snippets docs for v3

markdown/dev/reference/snippets/bnotch/en.md

@@ -7,8 +7,21 @@ need an alternative to the default `notch`.
 
 It is provided by [plugin-notches](/reference/plugins/notches/).
 
-```js
-snippets.demo = new Snippet('bnotch', points.anchor)
-```
+## Example
+
+<Example caption="An example of the bnotch snippet">
+```js
+({ Point, Path, paths, Snippet, snippets, part }) => {
+
+  snippets.demo = new Snippet('bnotch', new Point(0,0))
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
+</Example>
 
-<Example part="snippets_bnotch">An example of the bnotch snippet</Example>

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

@@ -2,13 +2,25 @@
 title: button
 ---
 
-The `button` snippet is used to mark button placement and is
-provided by [plugin-buttons](/reference/plugins/buttons/).
+The `button` snippet is used to mark button placement.
 
+It is provided by [plugin-buttons](/reference/plugins/buttons/).
+
+## Example
+
+<Example caption="An example of the button snippet">
 ```js
-snippets.demo = new Snippet('button', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_button">
-An example of the button snippet
+  snippets.demo = new Snippet('button', new Point(0,0))
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
+

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

@@ -2,25 +2,41 @@
 title: buttonhole-end
 ---
 
-The `buttonhole-end` snippet is used to mark buttonhole placement and is
-provided by [plugin-buttons](/reference/plugins/buttons/).
+The `buttonhole-end` snippet is used to mark buttonhole placement.
+This particular snippet places the buttonhole's end on its
+anchor point.
 
+It is provided by [plugin-buttons](/reference/plugins/buttons/).
+
+
+## Example
+
+<Example caption="An example of the buttonhole-end snippet">
 ```js
-snippets.demo = new Snippet('buttonhole-end', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_buttonhole_end">
-An example of the buttonhole-end snippet
+  snippets.demo = new Snippet('buttonhole-end', new Point(0,0))
+
+  // Show alignment
+  paths.anchor = new Path()
+    .move(new Point(-5, 0))
+    .line(new Point(5, 0))
+    .addClass('dotted note stroke-sm')
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
 
-<Note>
-
-##### Aligning your buttons and buttonholes
+## Notes
 
 We provide three buttonhole snippets with a different alignment:
 
-- [buttonhole](/reference/api/snippets/buttonhole/): Anchor point is the middle of the buttonhole
-- [buttonhole-start](/reference/api/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
-- [buttonhole-end](/reference/api/snippets/buttonhole-end/): Anchor point is the end of the buttonhole
-
-</Note>
+- [buttonhole](/reference/snippets/buttonhole/): Anchor point is the middle of the buttonhole
+- [buttonhole-start](/reference/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
+- [buttonhole-end](/reference/snippets/buttonhole-end/): Anchor point is the end of the buttonhole

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

@@ -2,25 +2,41 @@
 title: buttonhole-start
 ---
 
-The `buttonhole-start` snippet is used to mark buttonhole placement and is
-provided by [plugin-buttons](/reference/plugins/buttons/).
+The `buttonhole-start` snippet is used to mark buttonhole placement.
+This particular snippet places the buttonhole's start on its
+anchor point.
 
+It is provided by [plugin-buttons](/reference/plugins/buttons/).
+
+
+## Example
+
+<Example caption="An example of the buttonhole-start snippet">
 ```js
-snippets.demo = new Snippet('buttonhole-start', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_buttonhole_start">
-An example of the buttonhole-start snippet
+  snippets.demo = new Snippet('buttonhole-start', new Point(0,0))
+
+  // Show alignment
+  paths.anchor = new Path()
+    .move(new Point(-5, 0))
+    .line(new Point(5, 0))
+    .addClass('dotted note stroke-sm')
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
 
-<Note>
-
-##### Aligning your buttons and buttonholes
+## Notes
 
 We provide three buttonhole snippets with a different alignment:
 
-- [buttonhole](/reference/api/snippets/buttonhole/): Anchor point is the middle of the buttonhole
-- [buttonhole-start](/reference/api/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
-- [buttonhole-end](/reference/api/snippets/buttonhole-end/): Anchor point is the end of the buttonhole
-
-</Note>
+- [buttonhole](/reference/snippets/buttonhole/): Anchor point is the middle of the buttonhole
+- [buttonhole-start](/reference/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
+- [buttonhole-end](/reference/snippets/buttonhole-end/): Anchor point is the end of the buttonhole

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

@@ -2,25 +2,41 @@
 title: buttonhole
 ---
 
-The `buttonhole` snippet is used to mark buttonhole placement and is
-provided by [plugin-buttons](/reference/plugins/buttons/).
+The `buttonhole` snippet is used to mark buttonhole placement.
+This particular snippet places the buttonhole centrally on its
+anchor point.
 
+It is provided by [plugin-buttons](/reference/plugins/buttons/).
+
+
+## Example
+
+<Example caption="An example of the buttonhole snippet">
 ```js
-snippets.demo = new Snippet('buttonhole', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_buttonhole">
-An example of the buttonhole snippet
+  snippets.demo = new Snippet('buttonhole', new Point(0,0))
+
+  // Show alignment
+  paths.anchor = new Path()
+    .move(new Point(-5, 0))
+    .line(new Point(5, 0))
+    .addClass('dotted note stroke-sm')
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
 
-<Note>
-
-##### Aligning your buttons and buttonholes
+## Notes
 
 We provide three buttonhole snippets with a different alignment:
 
-- [buttonhole](/reference/api/snippets/buttonhole/): Anchor point is the middle of the buttonhole
-- [buttonhole-start](/reference/api/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
-- [buttonhole-end](/reference/api/snippets/buttonhole-end/): Anchor point is the end of the buttonhole
-
-</Note>
+- [buttonhole](/reference/snippets/buttonhole/): Anchor point is the middle of the buttonhole
+- [buttonhole-start](/reference/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
+- [buttonhole-end](/reference/snippets/buttonhole-end/): Anchor point is the end of the buttonhole

markdown/dev/reference/snippets/en.md

@@ -1,9 +1,8 @@
 ---
 title: Snippets
-for: developers
-about: Complete list of all the available snippets
 ---
 
-Snippets are provided by plugins. Follow the links below for more info on and an example of a specific snippet:
+A Snippet is a reuseable bit of markup for your pattern. They are provided by
+plugins. Below is an overview of all the different snippets we maintain.
 
 <ReadMore list />

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

@@ -2,13 +2,25 @@
 title: logo
 ---
 
-The `logo` snippet inserts the FreeSewing logo. It is
-provided by [plugin-logo](/reference/plugins/logo/).
+The `logo` snippet inserts the FreeSewing logo.
 
+It is provided by [plugin-logo](/reference/plugins/logo/).
+
+## Example
+
+<Example caption="An example of the logo snippet">
 ```js
-snippets.demo = new Snippet('logo', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_logo">
-An example of the logo snippet
+  snippets.demo = new Snippet('logo', new Point(0,0))
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-100,-40))
+    .move(new Point(100,20))
+
+  return part
+}
+```
 </Example>
+

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

@@ -2,13 +2,25 @@
 title: notch
 ---
 
-The `notch` snippet is intended for notches and is
-provided by [plugin-notches](/reference/plugins/notches/).
+The `notch` snippet is intended for notches.
 
+It is provided by [plugin-notches](/reference/plugins/notches/).
+
+## Example
+
+<Example caption="An example of the notch snippet">
 ```js
-snippets.demo = new Snippet('bnotch', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_notch">
-An example of the notch snippet
+  snippets.demo = new Snippet('notch', new Point(0,0))
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
+

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

@@ -6,10 +6,21 @@ The `snap-socket` snippet is used to mark the socket part of a snap button.
 
 It is provided by [plugin-buttons](/reference/plugins/buttons/).
 
-```js
-snippets.demo = new Snippet('snap-socket', points.anchor)
-```
+## Example
 
-<Example part="snippets_snapsocket">
-An example of the snap-socket snippet
+<Example caption="An example of the snap-socket snippet">
+```js
+({ Point, Path, paths, Snippet, snippets, part }) => {
+
+  snippets.demo = new Snippet('snap-socket', new Point(0,0))
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
+

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

@@ -5,11 +5,21 @@ title: snap-stud
 The `snap-stud` snippet is used to mark the stud part of a snap button.
 
 It is provided by [plugin-buttons](/reference/plugins/buttons/).
+## Example
 
+<Example caption="An example of the snap-stud snippet">
 ```js
-snippets.demo = new Snippet('snap-stud', points.anchor)
-```
+({ Point, Path, paths, Snippet, snippets, part }) => {
 
-<Example part="snippets_snapstud">
-An example of the snap-stud snippet
+  snippets.demo = new Snippet('snap-stud', new Point(0,0))
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-50,-4))
+    .move(new Point(50,4))
+
+  return part
+}
+```
 </Example>
+