chore: Updating final Snippet docs for v3

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

@@ -1,7 +1,16 @@
 ---
-title: attr()
+title: Snippet.attr()
 ---
 
+The `Snippet.attr()` method can be used to add attributes to the Snippet
+object.  It calls `this.attributes.add()` under the hood, and returns the
+Snippet object.
+
+If the third parameter is set to `true` it will call `this.attributes.set()`
+instead, thereby overwriting the value of the attribute.
+
+## Signature
+
 ```js
 Snippet snippet.attr(
   string name, 
@@ -10,21 +19,25 @@ Snippet snippet.attr(
 )
 ```
 
-This `Snippet.attr()` method calls [`Attributes.add()`](/reference/api/attributes/add) under the hood,
-but returns the Snippet object.  This allows you to chain different calls together.
+<Tip compact>This method is chainable as it returns the `Snippet` object</Tip>
 
-If the third parameter is set to `true` it will call [`Attributes.set()`](/reference/api/attributes/set) instead,
-thereby overwriting the value of the attribute.
+## Example
 
-<Example part="snippet_attr">
-An example of the Snippet.attr() method
+<Example caption="An example of the Snippet.attr() method">
+```js
+({ Point, points, Path, paths, Snippet, snippets, part }) => {
+
+  snippets.logo = new Snippet('logo', new Point(0,0))
+    .attr("data-scale", 0.75)
+    .attr("data-rotate", 180)
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-25,-10))
+    .move(new Point(25,35))
+
+  return part
+}
+```
 </Example>
 
-```js
-let { Point, points, Snippet, snippets } = part.shorthand();
-
-points.anchor = new Point(50, 15);
-snippets.demo = new Snippet("logo", points.anchor)
-  .attr("data-scale", 0.8)
-  .attr("data-rotate", 180);
-```