chore: Port FreeSewing.dev to docusaurus

The replaces the NextJS site powering FreeSewing.dev with a Docusaurus
setup. It's part of my efforts to simplify FreeSewing's setup so we can
focus on our core value proposition.

sites/dev/docs/howtos/code/attributes/readme.mdx

@@ -0,0 +1,138 @@
+---
+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.
+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.
+
+## 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
+({ points, Point, paths, Path, part }) => {
+  /*
+   * Via the high-level Point.addText method
+   */
+  points.a = new Point(0,0)
+    .addText('I am bold and colorful', 'bold fill-note')
+
+  /*
+   * Via the lower-level Point.attr method
+   */
+  points.b = new Point(0,10)
+    .attr('data-text', 'I am bold and colorful')
+    .attr('data-text-class', 'bold fill-lining')
+
+  /*
+   * Via low-level access to the attributes property
+   */
+  points.c = new Point(0,20)
+  points.c.attributes.add('data-text', 'I am bold and colorful')
+  points.c.attributes.add('data-text-class', 'bold fill-contrast')
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-10,-5))
+    .move(new Point(80,25))
+
+  return part
+  }
+```
+</Example>
+
+So, attributes can be set via low-level access even though there are helpers
+methods available for them.
+
+## Common scenarios
+
+A common scenario is to apply [CSS classes](/reference/css) to style a path:
+
+```js
+paths.example.attributes.add('class', 'lining dashed');
+```
+
+Because it's so common to set attributes, Points, Paths and Snippets all have
+the `attr()` helper method.
+
+Not only is less more, the method is also _chainable_, which allows you to do this:
+
+```js
+points.message = new Point(0,0)
+  .attr("data-text", "Hello world!")
+  .attr("data-text-class", "note");
+```
+
+:::note
+
+In this example, we're using attributes to add text to our pattern.
+The [adding-text](/howtos/code/adding-text) documentation explains this in detail.
+
+:::
+
+## 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 classes](/reference/css) to apply to the text to provide styling |
+| `data-text-lineheight` | Line height for the text, in mm |
+| `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 |
+
+:::note 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.
+:::
+
+### Paths
+
+The custom attributes that can be added to Paths:
+
+| Attribute | Description |
+|----------:|-------------|
+| `data-text` | Text to display along the path |
+| `data-text-class` | [CSS classes](/reference/css) to apply to the text to provide styling |
+
+:::note RELATED
+See [Adding text](/howtos/code/adding-text) for other ways to add text
+to paths.
+:::
+
+### 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. Either a single number or an array of 2 numbers for separate X and Y scaling factors |
+
+:::tip
+
+When rendering an SVG document, FreeSewing will output all your attributes.
+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
+would result in invalid SVG as there is no such thing as a text attribute. But `data-text`
+is fine because the `data-` prefix indicates it is a [custom attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*).
+
+:::