fix(docs) Add custom attributes and Snippets documentation

markdown/dev/howtos/code/attributes/en.md

@@ -5,12 +5,14 @@ title: Using attributes
 Points, Paths, and Snippets all have [attributes](/reference/api/attributes/)
 that you can use to influence how they behave.
 
-Under the hood, text, css classes, and even circles are all set in attributes.
+Under the hood, text, CSS classes, and even circles are all set in attributes.
 There are plenty of higher-level helper methods available, but knowing how to
 manipulate attributes is useful in case you want to accomplish something for
 which there is no higher-level helper method.
 
-Let's use an example to see the different ways we can assign a css class:
+## Example
+
+Let's use an example to see the different ways we can assign a CSS class:
 
 <Example caption="Various ways to set attributes on a point">
 ```mjs
@@ -45,9 +47,12 @@ Let's use an example to see the different ways we can assign a css class:
 ```
 </Example>
 
-kEven though there are helpers methods available for them.
+So, attributes can be set via low-level access even though there are helpers
+methods available for them.
 
-A common scenario is to apply CSS classes to style a path:
+## Common scenarios
+
+A common scenario is to apply [CSS classes](reference/css) to style a path:
 
 ```js
 paths.example.attributes.add('class', 'lining dashed');
@@ -71,10 +76,58 @@ The [adding-text](/howtos/code/adding-text) documentation explains this in detai
 
 </Note>
 
+## Custom attributes
+
+There are some custom attributes that FreeSewing uses to modify the appearance
+of Points, Paths, and Snippets.
+
+### Points
+
+The custom attributes that can be added to Points:
+
+| Attribute | Description |
+|----------:|-------------|
+| `data-text` | Text to display at the point |
+| `data-text-class` | CSS class to apply to the text to provide styling |
+| `data-circle` | 'Radius of the circle to display at the point |
+| `data-circle-class` | [CSS classes](/reference/css) to apply to the circle to provide styling |
+
+<Related>
+See [Drawing circles](/howtos/code/drawing-circles) for more information
+and other ways to draw circles.
+
+See [Adding text](/howtos/code/adding-text) for other ways to add text
+to points.
+</Related>
+
+### Paths
+
+The custom attributes that can be added to Paths:
+
+| Attribute | Description |
+|----------:|-------------|
+| `data-text` | Text to display at the point |
+| `data-text-class` | [CSS classes](/reference/css) to apply to the text to provide styling |
+
+<Related>
+See [Adding text](/howtos/code/adding-text) for other ways to add text
+to paths.
+</Related>
+
+### Snippets
+
+The custom attributes that can be added to Snippets:
+
+| Attribute | Description |
+|----------:|-------------|
+| `data-rotate` | Number of degrees to rotate the snippet |
+| `data-scale` | Scaling factor to apply to the snippet |
+
 <Tip>
 
-When rendering, FreeSewing will output all your attributes. This gives you the
+When rendering an SVG document, FreeSewing will output all your attributes.
-possiblity to use any valid attribute to control the appearance.
+This gives you the
+possibility to use any valid SVG attribute to control the appearance.
 
 This is also why we use the _data-_ prefix for those attributes that have
 special meaning within FreeSewing, such as `data-text`. Adding a `text` attribute

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

@@ -48,7 +48,9 @@ Path path.attr(
 Methods like 
 [`Path.addClass`](/reference/api/path/addclass),
 [`Path.setClass`](/reference/api/path/setclass),
-[`Path.adddText`](/reference/api/path/addtext), and 
+[`Path.addText`](/reference/api/path/addtext), and
 [`Path.setText`](/reference/api/path/settext)
 all call this method under the hood.
 
+See [Using Attributes](/howtos/code/attributes)
+for information about custom Attributes that can be used with Paths.

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

@@ -12,7 +12,7 @@ Path new Path()
 
 The Path constructor takes no arguments.
 
-## Attributes
+## Properties
 
 A Path objects comes with the following properties:
 
@@ -24,6 +24,10 @@ A Path objects comes with the following properties:
   [Path.setHidden()](/reference/api/path/sethidden) for various methods that
   allow setting this in a chainable way.
 
+<Related>
+See [Using Attributes](/howtos/code/attributes)
+for information about custom Attributes that can be used with Paths.
+</Related>
 ## Example
 
 <Example caption="Example of the Path contructor">

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

@@ -42,3 +42,7 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
 ```
 </Example>
 
+## Notes
+
+See [Using Attributes](/howtos/code/attributes)
+for information about custom Attributes that can be used with Points.

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

@@ -15,7 +15,7 @@ The point constructor takes two arguments:
 - `x` : The X-coordinate of the point
 - `y` : The Y-coordinate of the point
 
-## Attributes
+## Properties
 
 Point objects come with the following properties:
 
@@ -23,6 +23,11 @@ Point objects come with the following properties:
 - `y` : The Y-coordinate of the point
 - `attributes` : An [Attributes](/reference/api/attributes) instance holding the point's attributes
 
+<Related>
+See [Using Attributes](/howtos/code/attributes)
+for information about custom Attributes that can be used with Points.
+</Related>
+
 ## Example
 
 <Example caption="Example of the Point constructor">

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

@@ -41,3 +41,7 @@ Snippet snippet.attr(
 ```
 </Example>
 
+<Related>
+See [Using Attributes](/howtos/code/attributes)
+for information about what Attributes can be used with Snippets.
+</Related>

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

@@ -2,21 +2,22 @@
 title: Snippet
 ---
 
-A Snippet is a reuseable bit of markup for your pattern. They are added to the
+A Snippet is a reusable bit of markup for your pattern. Snippets are added to the
 SVG `defs` section, and rendered with the SVG `use` tag.
 
 ## Signature
 
 ```js
-Snippet new Snippet(def, Point);
+Snippet new Snippet(String def, Point anchor);
 ```
 
 The snippet constructor takes two arguments:
 
-- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section
+- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section.
+This is also the common name of the snippet (`logo`, `notch`, `button`, etc.)
 - `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet
 
-## Attributes
+## Properties
 
 A Snippet object comes with the following properties:
 
@@ -24,6 +25,11 @@ A Snippet object comes with the following properties:
 - `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet
 - `attributes` : An [`Attributes`](/reference/api/attributes) instance holding the snippet's attributes
 
+<Related>
+See [Using Attributes](/howtos/code/attributes)
+for information about custom Attributes that can be used with Snippets.
+</Related>
+
 ## Example
 
 <Example caption="Example of the Snippet constructor">

markdown/dev/reference/snippets/en.md

@@ -2,7 +2,28 @@
 title: Snippets
 ---
 
-A Snippet is a reuseable bit of markup for your pattern. They are provided by
+A Snippet is a reusable bit of markup that draws graphic elements on patterns.
-plugins. Below is an overview of all the different snippets we maintain.
+Snippets are provided by [plugins](/reference/plugins) and are implemented as
+[<defs> elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs)
+in the rendered SVG document.
+
+## Signature
+
+To place a Snippet at a given point:
+```js
+const snippet = new Snippet(String 'snippet name', Point anchor)
+```
+
+<Related>
+See the [Snippet API](/reference/api/snippet)
+for more information about how to use Snippets in code.
+
+See [Using Attributes](/howtos/code/attributes)
+for information about custom Attributes that can be used with Snippets.
+</Related>
+
+## List of snippets
+
+Below are all the different snippets we maintain.
 
 <ReadMore list />