chore: Updating final Attributes docs for v3

markdown/dev/reference/api/attributes/add/en.md

@@ -1,30 +1,25 @@
 ---
-title: add()
+title: Attributes.add()
 ---
 
+The `Attributes.add()` method adds `value` to the attribute identified by
+`key`.
+
+## Signature
+
 ```js
 Attributes attributes.add(string key, string value)
 ```
 
-Adds `value` to the attribute identified by `key`.
+## Example
+
+```js
+const attr = new Attributes()
+  .add('class', 'classA')
+  .add('class', 'classB')
+```
+
+## Notes
 
 Adding multiple values to the same key will result in them being joined together
 (with a space) when rendering.
-
-```js
-let { Path, paths } = part.shorthand();
-
-// This will render as: class="classA classB"
-paths.demo = new Path();
-paths.demo.attributes.add('class', 'classA');
-paths.demo.attributes.add('class', 'classB');
-
-// This does the same thing:
-paths.demo = new Path()
-  .attr('class', 'classA')
-  .attr('class', 'classB');
-
-// This also has the same result:
-paths.demo = new Path()
-  .attr('class', 'classA classB');
-```

markdown/dev/reference/api/attributes/aspropsifprefixis/en.md

@@ -0,0 +1,30 @@
+---
+title: Attributes.asPropsIfPrefixIs()
+---
+
+The `Attributes.asPropsIfPrefixIs()` method will return attribute values as a
+props object (a plain Javascript object) but only for those keys who start with
+`prefix`.
+
+## Signature
+
+```js
+Object attributes.asPropsIfPrefixIs(string prefix)
+```
+
+## Example
+
+```js
+const attr = new Attributes()
+  .add('class', 'various')
+  .add('stroke', 'red')
+  .add('stroke-width', 2)
+
+const props = attr.asPropsIfPrefixIs('stroke')
+/* Props holds:
+{
+  stroke: 'red',
+  stroke-width: 2
+}
+*/
+```

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

@@ -1,19 +1,23 @@
 ---
-title: clone()
+title: Attributes.clone()
 ---
 
+The `Attributes.clone()` method returns a new Attributes object that is a deep
+copy of this one.
+
+## Signature
+
 ```js
 Attributes attributes.clone()
 ```
 
-Returns a new Attributes object that is a deep copy of this one.
+## Example
 
 ```js
-let { Path, paths } = part.shorthand();
+const attr = new Attributes()
+  .add('class', 'classA')
+  .add('class', 'classB')
 
-paths.demo = new Path()
+const cloned = attr.clone()
-  .attr('class', 'classA')
-  .attr('class', 'classB');
-
-paths.clone = paths.demo.clone()
 ```
+

markdown/dev/reference/api/attributes/en.md

@@ -1,15 +1,29 @@
 ---
 title: Attributes
-order: 40
 ---
 
-Attributes is an object that holds attributes for a variety of other objects.
+An Attributes object holds attributes for a variety of other objects.
 
-Attributes are attached to [`Point`](/reference/api/point), [`Path`](/reference/api/path), and [`Snippet`](/reference/api/snippet) objects,
+## Signature
-as well as the internal [`Svg`](/reference/api/svg) object.
 
-All of these have an instantiated Attributes object in their `attributes` property.
+```js
+Attributes new Attributes()
+```
 
+The Attributes constructor takes no arguments.
+
+## Methods
 An Attributes object exposes the following methods:
 
 <ReadMore list />
+
+## Notes
+
+Attributes are attached to [`Point`](/reference/api/point),
+[`Path`](/reference/api/path), and [`Snippet`](/reference/api/snippet) objects,
+as well as the internal [`Svg`](/reference/api/svg) object.
+
+All of these have an instantiated Attributes object in their `attributes`
+property, as well as a number of (chainable) helper methods to manipulate the
+attributes. You will typically use these higher-level method and thus are
+unlikely to interact with an Attributes object directly.

markdown/dev/reference/api/attributes/get/en.md

@@ -1,22 +1,25 @@
 ---
-title: get()
+title: Attributes.get()
 ---
 
+The `Attributes.get()` method will return the value of attribute stored under
+`key`, or `false` if it's not set.
+
+## Signature
+
 ```js
 string attributes.get(string key)
 ```
 
-Will return the value of attribute stored under `key`, or `false` if it's not set.
-
 If key has multiple values, they will be joined together in a string, seperated by spaces.
 
+## Example
+
 ```js
-let { Path, paths } = part.shorthand();
+const attr = new Attributes()
+  .add('class', 'classA')
+  .add('class', 'classB')
 
-paths.demo = new Path()
+const class = attr.get('class')
-  .attr('class', 'classA')
-  .attr('class', 'classB');
-
-let class = paths.demo.attributes.get('class'); 
 // class now holds: "classA classB"
 ```

markdown/dev/reference/api/attributes/getasarray/en.md

@@ -1,20 +1,23 @@
 ---
-title: getAsArray()
+title: Attributes.getAsArray()
 ---
 
+The `Attributes.getAsArray()` method will return an array with the value of
+attribute stored under `key`, or `false` if it's not set.
+
+## Signature
+
 ```js
 array attributes.getAsArray(string key)
 ```
 
-Will return an array with the value of attribute stored under `key`, or `false` if it's not set.
+## Example
 
 ```js
-let { Path, paths } = part.shorthand();
+const attr = new Attributes()
+  .add('class', 'classA')
+  .add('class', 'classB')
 
-paths.demo = new Path()
+const class = attr.getAsArray('class')
-  .attr('class', 'classA')
+// class now holds: [ "classA", "classB" ]
-  .attr('class', 'classB');
-
-let class = paths.demo.attributes.getAsArray('class'); 
-// class now holds: ["classA", "classB"]
 ```

markdown/dev/reference/api/attributes/remove/en.md

@@ -1,22 +1,23 @@
 ---
-title: remove()
+title: Attributes.remove()
 ---
 
+The `Attributes.remove()` method removes the attribute values under key and
+returns the Attributes object.
+
+## Signature
+
 ```js
 Attributes attributes.remove(string key)
 ```
 
-Removes the attribute values under key and returns the Attributes object.
+## Example
 
 ```js
-let { Path, paths } = part.shorthand();
+const attr = new Attributes()
+  .add('class', 'classA')
+  .add('class', 'classB')
+  .remove('class')
 
-paths.demo = new Path()
+// attr holds no data
-  .attr('class', 'classA')
-  .attr('class', 'classB');
-
-let class = paths.example.attributes
-  .remove()
-  .get('class'); 
-// class now holds: false
 ```

markdown/dev/reference/api/attributes/render/en.md

@@ -0,0 +1,23 @@
+---
+title: Attributes.render()
+---
+
+The `Attributes.render()` method will render attributes as a string suitable
+for inclusion in an SVG tag.
+
+## Signature
+
+```js
+string attributes.render()
+```
+
+## Example
+
+```js
+const attr = new Attributes()
+  .set('id', 'example')
+  .add('class', 'classA')
+  .add('class', 'classb')
+
+const paragraph = `<p ${attr.render()}>Hello</p>`
+```

markdown/dev/reference/api/attributes/renderascss/en.md

@@ -0,0 +1,27 @@
+---
+title: Attributes.renderAsCss()
+---
+
+The `Attributes.renderAsCss()` method will render attributes as a string
+suitable for inclusion in a CSS defninition.
+
+## Signature
+
+```js
+string attributes.renderAsCss()
+```
+
+## Example
+
+```js
+const attr = new Attributes()
+  .add('stroke', 'red')
+  .add('stroke-width', 2)
+  .add('stroke-dasharray', '3 1')
+
+const css = `
+path {
+  ${attr.renderAsCss()}
+}
+`
+```

markdown/dev/reference/api/attributes/renderifprefixis/en.md

@@ -0,0 +1,24 @@
+---
+title: Attributes.renderIfPrefixIs()
+---
+
+The `Attributes.renderIfPrefixIs()` method will render attributes as a string
+suitable for inclusion in an SVG tag, but only those attribute keys who start
+with `prefix`.
+
+## Signature
+
+```js
+string attributes.renderIfPrefixIs(string prefix)
+```
+
+## Example
+
+```js
+const attr = new Attributes()
+  .add('class', 'various')
+  .add('stroke', 'red')
+  .add('stroke-width', 2)
+
+const line = `<path ${attr.renderIfPrefixIs('stroke')} d="M 0,0 L 100.0" />`
+```

markdown/dev/reference/api/attributes/set/en.md

@@ -1,29 +1,29 @@
 ---
-title: set()
+title: Attributes.set()
 ---
 
+The `Attributes.set()` method sets the attribute identified by `key` to value
+`value`.
+
+## Signature
+
 ```js
 Attributes attributes.set(string key, string value)
 ```
 
-Sets the attribute identified by `key` to value `value`.
+## Example
-
-<Warning>
-
-This will overwrite any value that's currently set on the attribute identified by `key`.
-
-</Warning>
 
 ```js
-let { Path, paths } = part.shorthand();
+const attr = new Attributes()
+  .add('class', 'classA')
+  .add('class', 'classB')
 
-// This will render as: class="classB"
+const class = attr.get('class')
-paths.demo = new Path();
+// class now holds: "classA classB"
-paths.demo.attributes.set('class', 'classA');
-paths.demo.attributes.set('class', 'classB');
-
-// This does the same thing:
-paths.demo = new Path()
-  .attr('class', 'classA', true)
-  .attr('class', 'classB', true);
 ```
+
+## Notes
+
+This will overwrite any value that's currently set on the attribute identified
+by `key`.
+

markdown/dev/reference/api/attributes/setifunset/en.md

@@ -1,24 +1,27 @@
 ---
-title: setIfUnset()
+title: Attributes.setIfUnset()
 ---
 
+The `Attributes.setIfUnset()` method sets the attribute identified by `key` to
+value `value` but only if it's currently unset (`undefined`).
+
+## Signature
+
 ```js
 Attributes attributes.setIfUnset(string key, string value)
 ```
 
-Sets the attribute identified by `key` to value `value` but only if it's currently unset (`undefined`).
+## Example
-
-<Tip>
-
-This will never overwrite any value and thus is a safe way to set attributes
-
-</Tip>
 
 ```js
-let { Path, paths } = part.shorthand();
+const attr = new Attributes()
+  .setIfUnset('class', 'classA')
+  .setIfUnset('class', 'classB')
 
-// This will render as: class="classA"
+const class = attr.get('class')
-paths.demo = new Path();
+// class now holds: "classA"
-paths.demo.attributes.set('class', 'classA');
-paths.demo.attributes.setIfUnset('class', 'classB');
 ```
+
+## Notes
+
+This will never overwrite any value and thus is a safe way to set attributes