feat: Flat import of markdown repo

This is a flat (without history) import of (some of) the content
from our markdown module.

We've imported this without history because the repo contains our
blog posts and showcases posts content prior to porting them to strapi.

Since this contains many images, it would balloon the size of this repo
to import the full history.

Instead, please refer to the history of the (archived) markdown repo
at: https://github.com/freesewing/markdown

markdown/dev/howtos/code/accessing-measurements/en.md

@@ -0,0 +1,23 @@
+---
+title: Accessing measurements
+for: developers
+about: Shows you how to access user measurements from inside your pattern
+---
+
+Measurements are stored in `pattern.settings.measurements`.
+
+You can pull them out of there with 
+the [shorthand](/howtos/core/shorthand/) call:
+
+
+```js
+const  { measurements, options } = part.shorthand()
+
+let sleeveBonus = measurements.shoulderToWrist * (1 + options.sleeveLengthBonus);
+```
+
+<Note>
+
+Keep in mind that [FreeSewing uses millimeter for everything](/guides/prerequisites/units).
+
+</Note>

markdown/dev/howtos/code/accessing-options/en.md

@@ -0,0 +1,18 @@
+---
+title: Accessing user options
+for: developers
+about: Shows you how to access user options from inside your pattern
+---
+
+Options are stored in `pattern.settings.options`.
+
+You can pull them out of there with 
+the [shorthand](/howtos/core/shorthand/) call:
+
+
+```js
+const  { measurements, options } = part.shorthand()
+
+let sleeveBonus = measurements.shoulderToWrist * (1 + options.sleeveLengthBonus);
+```
+

markdown/dev/howtos/code/adding-instructions/en.md

@@ -0,0 +1,56 @@
+---
+title: Add instructions to your design
+for: developers
+about: While documentation is good, sometimes you want to add some instructions to your design itself
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/38d101b0415a4cbf3f9f86e006bd8cb7c43c703b/packages/jaeger/src/front.js#L411)
+
+</Note>
+
+Adding instructions to your pattern is _just_ a matter of adding text.
+The tricky part is to make sure your text can be translated.
+
+Below is a rather involved example from Aaron:
+
+```js
+points.bindinAnchor = new Point(points.armhole.x / 4, points.armhole.y)
+  .attr('data-text', 'cutTwoStripsToFinishTheArmholes')
+  .attr('data-text', ':\n')
+  .attr('data-text', 'width')
+  .attr('data-text', ':')
+  .attr('data-text', units(sa * 6 || 60))
+  .attr('data-text', '\n')
+  .attr('data-text', 'length')
+  .attr('data-text', ':')
+  .attr('data-text', units(armholeLength * 0.95 + 2 * sa))
+  .attr('data-text', '\n&#160;\n')
+  .attr('data-text', 'cutOneStripToFinishTheNeckOpening')
+  .attr('data-text', ':\n')
+  .attr('data-text', 'width')
+  .attr('data-text', ':')
+  .attr('data-text', units(sa * 6))
+  .attr('data-text', '\n')
+  .attr('data-text', 'length')
+  .attr('data-text', ':')
+  .attr('data-text', units(neckOpeningLength * 2 * 0.95 + 2 * sa))
+  .attr('data-text-lineheight', 6)
+```
+
+If you want to add text along a path, you can do that too:
+
+```js
+paths.breakLine.attr('data-text', 'breakLine').attr('data-text-class', 'center')
+paths.flb.attr('data-text', 'facingLiningBoundary')
+```
+
+<Tip>
+
+Refer to [the sprinkle macro documentation](/reference/macros/sprinkle/) for details on how
+to use this macro
+
+</Tip>

markdown/dev/howtos/code/adding-parts/en.md

@@ -0,0 +1,42 @@
+---
+title: Adding pattern parts
+for: developers
+about: Shows you how to add new parts to your pattern
+---
+
+Since the patterns parts are listed 
+in [the configuration file](/reference/config/), freesewing knows about
+all the parts that belong to your pattern.
+
+It expects that each pattern has its own draft method, that is called `draft`
+followed by the capitalized name of the pattern part.
+
+For example, if our pattern `Sorcha` has a part called `back`, you should
+have a `draftBack` method. It's good practice to keep each part in its own
+file, so create a file called `back.js`. Inside, you export your method
+to draft this part:
+
+```js
+export default part => {
+  // Your part code here
+
+  return part
+}
+```
+
+Then, in your `index.js` file, you import this file, and attach the
+method to your pattern's prototype:
+
+```js
+import freesewing from "freesewing"
+import plugins from "@freesewing/plugin-bundle"
+import config from "../config"
+// Parts
+import draftBack from "./back"
+
+// Create new design
+const Sorcha = new freesewing.Design(config, plugins)
+
+// Attach to pattern prototype
+Sorcha.prototype.draftBack = part => draftBack(part)
+```

markdown/dev/howtos/code/adding-paths/en.md

@@ -0,0 +1,22 @@
+---
+title: Adding paths
+for: developers
+icon: pattern
+about: Shows you how to add paths to your pattern
+---
+
+After using the [shorthand](/howtos/core/shorthand/) call, 
+`Path` contains the path constructor, while `paths` is a reference to `part.paths`,
+which is where you should store your paths.
+
+Things will now *just work* when you do this:
+
+```js
+paths.example = new Path()
+```
+
+<Tip>
+
+The [Path API docs](/reference/api/path) list all the things you can do with a path object.
+
+</Tip>

markdown/dev/howtos/code/adding-points/en.md

@@ -0,0 +1,21 @@
+---
+title: Adding points
+for: developers
+about: Shows you how to add points to your pattern
+---
+
+After using the [shorthand](/howtos/core/shorthand/) call, 
+`Point` contains the point constructor, while `points` is a reference to `part.points`,
+which is where you should store your points.
+
+Things will now *just work* when you do this:
+
+```js
+points.centerBack  = new Point(0,0);
+```
+
+<Tip>
+
+The [Point API docs](/reference/api/point/) list many ways to create a point.
+
+</Tip>

markdown/dev/howtos/code/adding-snippets/en.md

@@ -0,0 +1,30 @@
+---
+title: Adding snippets
+for: developers
+about: Shows you how to add snippets to your pattern
+---
+
+After using the [shorthand](/howtos/core/shorthand/) call, 
+`Snippet` contains the path constructor, while `snippets` is a reference to `part.snippets`,
+which is where you should store your paths.
+
+Things will now *just work* when you do this:
+
+```js
+snippets.logo = new Snippet('logo', points.logoAnchor);
+```
+
+You can scale and rotate a snippet by setting the `data-scale` and `data-rotate` attributes respectively.
+
+ - **data-scale** : Either a single scale factor, or a set of 2 scale factors for the X and Y axis respectively. See [the SVG scale transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Scale) for details.
+ - **data-rotate**: A rotation in degrees. The center of the rotation will be the snippet's anchor point
+
+<Tip>
+
+See [Using attributes](/howtos/core/attributes/) for details on how to set attributes.
+
+</Tip>
+
+Below is an example of the available snippets, and the use of the `data-scale` and `data-rotate` attributes:
+
+<Example pattern="rendertest" caption="Overview of available snippets" options={{ colors: false, text: false, macros: false, circles: false, widthHd: false }} />

markdown/dev/howtos/code/adding-text/en.md

@@ -0,0 +1,54 @@
+---
+title: Adding text
+for: developers
+about: Shows you how to add text to your pattern
+---
+
+SVG is pretty great, but its text handling leaves much to be desired.
+
+To abstract away the intricacies of adding text to an SVG document, 
+FreeSewing lets you add text to patterns by adding it to the attributes 
+of points and paths.
+
+All you have to do is set the `data-text` attribute to the text you want to add to the pattern:
+
+```js
+points.anchor = new Point(100, 25)
+  .attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
+  .attr("data-text-class", "center");
+```
+
+<Example 
+  part="point_attr" 
+  caption="Text inserted in a FreeSewing pattern"
+/>
+
+<Note>
+
+You may have noticed that the text we inserted isn't the text that's shown.
+That is because, in line with our [best practices](/guides/best-practices) we allow translation of
+our pattern by inserting a key that is used to lookup the string in the language
+of the pattern, using [the i18n plugin](/reference/plugins/i18n).
+
+</Note>
+
+You can use the same approach to add text to a path:
+
+```js
+points.B = new Point(10, 50);
+points.BCp2 = new Point(40, 10);
+points.C = new Point(90, 30);
+points.CCp1 = new Point(50, 90);
+
+paths.example = new Path()
+  .move(points.B)
+  .curve(points.BCp2, points.CCp1, points.C)
+  .attr("class", "canvas")
+  .attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
+  .attr("data-text-class", "text-xs center");
+```
+
+<Example 
+  part="path_attr" 
+  caption="Text on a path"
+/>

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

@@ -0,0 +1,44 @@
+---
+title: Using attributes
+for: developers
+about: Show s you have to use attributes on points, paths, and snippets
+---
+
+Points, Paths, and Snippets all have [attributes](/reference/api/attributes/) that you can use to
+influence how they behave.
+
+A common scenario is to apply CSS classes 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](/concepts/adding-text) documentation explains this in detail.
+
+</Note>
+
+<Tip>
+
+When rendering, FreeSewing will output all your attributes. This gives you the 
+possiblity to use any valid 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-*).
+
+</Tip>

markdown/dev/howtos/code/create-new-design/en.md

@@ -0,0 +1,42 @@
+---
+title: Creating a new pattern design
+for: developers
+about: Shows you how to create a new design
+---
+
+To create a new pattern, call `new freesewing.Design()`.
+It takes your pattern configuration, 
+and any plugins you want to load as parameters.
+
+For example, if we were creating a new pattern called `Sorcha`:
+
+```js
+import freesewing from "@freesewing/core"
+import plugins from "@freesewing/plugin-bundle"
+import config from "../config"
+
+// Create new design
+const Sorcha = new freesewing.Design(config, plugins)
+```
+
+This method does not return a `Design` object. Instead it returns 
+a constructor method for your pattern.
+
+When importing your pattern, it is itself a constructor:
+
+```js
+import Sorcha from "@freesewing/sorcha"
+
+// Sorcha is a constructor for your pattern. 
+let pattern = new Sorcha()
+```
+
+<Tip>
+
+##### Design() is a super-constructor
+
+Constructors are functions you can call with `new` to create an object. 
+As `freesewing.Design()` returns a constructor, you can think of it
+as a super-constructor.
+
+</Tip>

markdown/dev/howtos/code/de.md

@@ -0,0 +1,5 @@
+---
+title: Core library
+---
+
+<ReadMore root='howtos/core' />

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

@@ -0,0 +1,39 @@
+---
+title: Part dependencies
+for: developers
+about: Shows you how to create dependencies between pattern parts
+---
+
+Part dependencies are set in the [pattern configuration](/config), and
+control the order in which parts are drawn. FreeSewing will make sure
+that before drafting a part, it will first draft all its dependencies.
+
+Let's look at an example:
+
+```js
+dependencies: {
+  front: "base",
+  back: "base",
+  sleeve: ["front", "back"]
+}
+```
+
+This could be from a T-shirt pattern where the `front` and `back` patterns are very similar, 
+so they both are inheriting a `base` part.
+In addition, the `sleeve` part needs to be drafted after the `front` and `back` part because
+in `front` and `back` we store the length of the armhole seam in the [store](/api/store) and
+we need that info to fit the sleevecap to the armhole.
+
+Now if a user requests to draft only the `sleeve` part, FreeSewing will still draft:
+
+ - First the `base` part
+ - Then the `front` and `back` parts
+ - Finally the `sleeve` part
+
+but it will only render the `sleeve` part, as that's the only thing the user requested.
+
+<Note>
+
+For inheriting parts, please refer to [part inheritance](/howtos/core/inject/).
+
+</Note>

markdown/dev/howtos/code/drawing-circles/en.md

@@ -0,0 +1,16 @@
+---
+title: Drawing circles
+for: developers
+about: Shows how you can add circles to your pattern
+---
+
+Real circles are rarely used in pattern design, and they are not part of the SVG path specification, 
+but rather a different SVG element.
+
+Still, if you want a circle, you can draw one by setting a Point's `data-circle` attribute 
+to the radius of the circle you want to draw.
+
+In addition, all attributes that have a `data-circle-` prefix will apply to the circle, rather than the point.
+
+<Example pattern="rendertest" caption="Circles" options={{ colors: false, text: false, macros: false, snippets: false, widthHd: false }} />
+

markdown/dev/howtos/code/en.md

@@ -0,0 +1,7 @@
+---
+title: Common code challenges
+---
+
+Below is a list of examples of how to implement common tasks in code:
+
+<ReadMore list />

markdown/dev/howtos/code/es.md

@@ -0,0 +1,5 @@
+---
+title: Core library
+---
+
+<ReadMore root='howtos/core' />

markdown/dev/howtos/code/extend-pattern/en.md

@@ -0,0 +1,88 @@
+---
+title: Create a new design based on an existing design
+for: developers
+about: Shows how to create a variation of a pre-existing design
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/aaron/config/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/config/index.js#L34)
+ - [packages/aaron/src/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/index.js#L2)
+ - [packages/carlita/src/index.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlita/src/index.js#L25)
+
+</Note>
+
+The example below is from Aaron, which is based on Brian.
+
+Brian has a part called `base` that is hidden by default.
+We will use this part as a dependency, and also hide it.
+
+This is what it looks like in the Aaron config file:
+
+```js
+  dependencies: {
+    front: 'base',
+    back: 'front'
+  },
+  inject: {
+    front: 'base',
+    back: 'front'
+  },
+  hide: ['base'],
+```
+
+And here is the code:
+
+```js
+import freesewing from '@freesewing/core'
+import Brian from '@freesewing/brian'
+import plugins from '@freesewing/plugin-bundle'
+import config from '../config'
+// Parts
+import draftBack from './back'
+import draftFront from './front'
+
+// Create design
+const Pattern = new freesewing.Design(config, plugins)
+
+// Attach draft methods to prototype
+Pattern.prototype.draftBase = function(part) {
+  // Getting the base part from Brian
+  return new Brian(this.settings).draftBase(part)
+}
+Pattern.prototype.draftFront = part => draftFront(part)
+Pattern.prototype.draftBack = part => draftBack(part)
+
+export default Pattern
+```
+
+If you have a lot of parts to inherit, you can create a loop like in this
+example from Carlita:
+
+```js
+// Attach draft methods from Carlton to prototype
+for (let m of [
+  'draftBack',
+  'draftTail',
+  'draftTopSleeve',
+  'draftUnderSleeve',
+  'draftBelt',
+  'draftCollarStand',
+  'draftCollar',
+  'draftCuffFacing',
+  'draftPocket',
+  'draftPocketFlap',
+  'draftPocketLining',
+  'draftChestPocketWelt',
+  'draftChestPocketBag',
+  'draftInnerPocketWelt',
+  'draftInnerPocketBag',
+  'draftInnerPocketTab'
+]) {
+  Pattern.prototype[m] = function(part) {
+    return new Carlton(this.settings)[m](part)
+  }
+}
+```

markdown/dev/howtos/code/fr.md

@@ -0,0 +1,5 @@
+---
+title: Core library
+---
+
+<ReadMore root='howtos/core' />

markdown/dev/howtos/code/hide-paths/en.md

@@ -0,0 +1,22 @@
+---
+title: Hide paths from an inherited part
+for: developers
+about: When you inherit a part, it comes with a bunch of paths. Here'show to hide them
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L22)
+
+</Note>
+
+The example below is from Aaron which inherits from Brian.
+
+We iterate over the paths and set their render property to false.
+
+```js
+  // Hide Brian paths
+  for (let key of Object.keys(paths)) paths[key].render = false
+```

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

@@ -0,0 +1,52 @@
+---
+title: Design inheritance
+for: developers
+about: Shows how you can use one design as the basis for another
+---
+
+If your pattern is based on, or extending, another pattern (some of) your
+pattern parts will need to be drafted by the parent pattern.
+
+In such a case, rather than return our own draft method for the part, you 
+should instantiate the parent pattern, and return its part draft method:
+
+```js
+import freesewing from "@freesewing/core";
+import Brian from "@freesewing/brian";
+import plugins from "@freesewing/plugin-bundle";
+import config from "../config";
+// Parts
+import draftBack from "./back";
+
+// Create new design
+const Sorcha = new freesewing.Design(config, plugins);
+
+// Attach our own draft method to the prototype
+Sorcha.prototype.draftBack = part => draftBack(part);
+
+// Attach the inherited draft method to the prototype
+Sorcha.prototype.draftBase = function(part) {
+  // Getting the base part from Brian
+  return new Brian(this.settings).draftBase(part);
+};
+```
+
+<Warning>
+
+Because we're using the `this` keyword here, you cannot use the arrow notation.
+
+</Warning>
+
+## Configuration
+
+The inherited pattern parts will use the configuration of your pattern.
+You must take care to make sure that
+your pattern has all the options the parent pattern requires.
+
+For example, if you inherit from a pattern that has a `chestEase` option, you will
+need to add that option to your own patter, because the inherited parts will depend on it.
+
+## Dependencies
+
+When extending a pattern, you should add it as a peer dependency, rather than a regular dependency.
+Doing so will avoid that the parent pattern will get bundled with your own pattern.

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

@@ -0,0 +1,34 @@
+---
+title: Part inheritance
+for: developers
+about: Shows how you can use one part of your pattern as the basis for another
+---
+
+Part inheritance within your own pattern is handled via the `inject` settings in
+the [pattern configuration](/reference/config/). Here is a simple example:
+
+```js
+inject: {
+  front: "base",
+  back: "base",
+
+}
+```
+
+The `front` and `back` parts will be *injected* with the `base` part. As a result, both 
+the `front` and `back` parts will be instantiated with a cloned copy of all the points, paths, 
+and snippets of the `base` part.
+
+This is a common design pattern where one part builds on another. In our example, we can imagine
+a T-shirt pattern where the front and back are rather similar, apart from the neckline.
+So rather than repeating ourselves, we draft a `base` part and inject that in the `front` and 
+`back` parts.
+
+Using `inject` will cause FreeSewing to always draft the injected part prior to 
+drafting the part it gets injected to. It will, in other words, influece the draft order.
+
+<Note>
+
+For inheriting parts from other patterns, please refer to [Design inheritance](/howtos/code/inheritance/).
+
+</Note>

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

@@ -0,0 +1,16 @@
+---
+title: Using macros
+for: developers
+about: Shows how you can use macros within your pattern
+---
+
+Macros are a way to facilitate pattern design by bundling a bunch of individual actions
+into a little routine.
+
+Macros are provided by [plugins](/reference/plugins/). Here are some examples:
+
+<Example pattern="rendertest" options={{ colors: false, circles: false, snippets: false, text: false, widthHd: false }}/>
+
+Refer to [macro documentation](/reference/api/macro/) for details on how to use macros,
+and the [plugins](/reference/plugins/) documentation for info on how to create your
+own macros.

markdown/dev/howtos/code/nl.md

@@ -0,0 +1,5 @@
+---
+title: Core library
+---
+
+<ReadMore root='howtos/core' />

markdown/dev/howtos/code/remove-paths/en.md

@@ -0,0 +1,18 @@
+---
+title: Remove paths from an inherited part
+for: developers
+about: When you inherit a part, it comes with a bunch of paths. Here'show to remove them
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/carlton/src/back.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlton/src/back.js#L62)
+
+</Note>
+
+
+```js
+  for (let i in paths) delete paths[i]
+```

markdown/dev/howtos/code/shared-dimensions/en.md

@@ -0,0 +1,56 @@
+---
+title: Share dimensions between pattern parts
+for: developers
+about: Shows how to share dimensions between similar pattern parts
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/aaron/src/shared.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/shared.js)
+ - [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/front.js#L160)
+
+</Note>
+
+
+When you have different pattern parts that look similar -- like the front
+and back of a garment -- you may find that there's a lot of dimensions 
+shared between them.
+
+The example below is from Aaron where dimensions are shared between 
+the back and front part.
+
+Aaron has a file called `shared.js` that looks like this:
+
+```js
+export function dimensions(macro, points, sa) {
+  macro('hd', {
+    from: points.cfHem,
+    to: points.hem,
+    y: points.hem.y + sa * 2.5 + 15
+  })
+  // more dimensions here
+}
+```
+
+In both `front.js` and `back.js` we use this code to add these shared dimensions:
+
+```js
+import { dimensions } from './shared'
+
+// ...
+
+  if (paperless) {
+    dimensions(macro, points, sa)
+    // ... specific dimensions 
+  }
+```
+
+<Note>
+
+Since our shared dimension method is a so-called _named export_ we need to
+import it with the syntax you see above.
+
+</Note>
+

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

@@ -0,0 +1,40 @@
+---
+title:  Using shorthand
+for: developers
+about: Shows you how to use our shorthand method and notation
+---
+
+The [Part.shorthand()](/reference/api/part/#shorthand) method will become your best friend.
+
+By using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) you'll get access to a bunch
+of handy variables to make your code more concise and readable.
+
+[Part.shorthand()](/reference/api/part/#shorthand) provides a lot of things, and you typically 
+don't need all of them, but here's everything it has to offer:
+
+```js
+  const {
+    options,      // Pattern options
+    measurements, // Model measurements
+    Point,        // Point constructor
+    Path,         // Path constructor
+    Snippet,      // Snippet constructor
+    points,       // Holds part points
+    paths,        // Holds part paths
+    snippets,     // Holds part snippets
+    store,        // The store allows you to share data between parts
+    utils,        // A collection of utilities
+    macro,        // Method to call a macro
+    debug,        // Method to log debug info
+    sa,           // Requested seam allowance
+    final,        // Whether to draft a complete pattern or not
+    paperless,    // Whether to draft a paperless pattern or not
+    units,        // Requested units
+  } = part.shorthand();
+```
+
+<Note>
+
+Many examples throughout our documentation use shorthand notation.
+
+</Note>

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

@@ -0,0 +1,33 @@
+---
+title: Sharing data between parts
+for: developers
+about: Shows how you use the pattern store to share data between parts
+---
+
+Sometimes, you'll want to access data from one part into another part.
+For example, you may store the length of the armhole in your front and back parts,
+and then read that value when drafting the sleeve so you can verify the sleeve fits the armhole.
+
+For this, you should use the [Store](/reference/api/store/), which is available via 
+the [shorthand](/howtos/core/shorthand/) call:
+
+```js
+export default function(part) {
+  let { store } = part.shorthand();
+  store.set('hello', 'world');
+
+  return part();
+}
+```
+
+```js
+export default function(part) {
+  let { store } = part.shorthand();
+  store.get('hello'); // Returns 'world'
+
+  return part();
+}
+```
+
+In a case like this, the order in which parts are drafted becomes important, so you
+should reflect that in the [pattern configuration](/reference/config/).

markdown/dev/howtos/code/storing-path-length/en.md

@@ -0,0 +1,30 @@
+---
+title: Storing the seam length to use in another part
+for: developers
+about: Shows how to store a seam length so you can true the seam of another part
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L103)
+
+</Note>
+
+Often when designing patterns, we need to _true a seam_ which means to make sure
+that two parts that need to be joined together are the same distance.
+
+The example below is from Aaron and stores the length of the armhole seam:
+
+```js
+  // Store length of armhole and neck opening
+  store.set(
+    'frontArmholeLength',
+    new Path()
+      .move(points.armhole)
+      .curve(points.armholeCp2, points.strapRightCp1, points.strapRight)
+      .length()
+  )
+```
+

markdown/dev/howtos/de.md

@@ -0,0 +1,5 @@
+---
+title: Howtos
+---
+
+<ReadMore root='howtos' recurse />

markdown/dev/howtos/design/en.md

@@ -0,0 +1,7 @@
+---
+title: Common design challenges
+---
+
+Below is a list of examples of how to implement common design challenges in code:
+
+<ReadMore list />

markdown/dev/howtos/design/fit-sleeve/en.md

@@ -0,0 +1,87 @@
+---
+title: Adapt the sleevecap length to fit the armhole
+for: developers
+about: Shows how to adapt the length of the sleevecap to fit your armhole
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/bent/src/sleeve.js](https://github.com/freesewing/freesewing/blob/develop/packages/bent/src/sleeve.js)
+
+</Note>
+
+Fitting the sleevecap to the armhole means that we need to make sure the length
+of the seams match.  
+A similar challenge is to fit the collar to the neck opening and so on.
+
+For all of these situations where you have to create curved seams with matching
+length, it's impossible to get it right from the first attempt.
+
+Instead, we try, and then course-correct until we get it right, or close enough.
+
+This pattern is rather common, and we will unpack an example from Bent below.
+
+Before we dive in, here's a few things to keep in mind:
+
+  - In Javascript, you can create a function within your function and call it
+  - Bent extends Brian which sets both the `frontArmholeLength` and `backArmholeLength` values in the store with the length of those seams
+  - We need to match the length of the sleevecap + sleeve cap ease to the length of the front and back armhole
+
+Here's how you can handle this in code:
+
+ - We create a method that does teh actual drafting of our sleevecap
+ - We use a `tweak` value to influence the process, we start with a value of `1`
+ - We check the length after every attempt, and adjust the `tweak` value
+
+```js
+export default function (part) {
+  let { Path, paths, points, store, options } = part.shorthand()
+
+  // we'll call this function repeatedly until it gets it right
+  function draftSleeve(part, tweak) {
+    // Sleeve frame
+    points.top = new Point(0, 0)
+    // Note the use of tweak in the line above
+    points.boxTopRight = points.top.shift(0, (store.get('sleevecapTarget') / 5.8) * tweak)
+    // ... draft sleevecap here
+  }
+
+  // Get values from the store, and save our own
+  let armholeLength = store.get('frontArmholeLength') + store.get('backArmholeLength')
+  let sleevecapEase = armholeLength * options.sleevecapEase
+  store.set('sleevecapEase', sleevecapEase)
+  store.set('sleevecapTarget', armholeLength + sleevecapEase)
+
+  // Initialize
+  // delta holds by how far we're off
+  let delta = 0 
+  // runs holds our number of attempts
+  let runs = 0 // number of attempts
+  // tweak holds our tweak factor
+  let tweak = 1 // tweak factor
+  // target holds our goal
+  let target = store.get('sleevecapTarget')
+  // using a do...while loop so this runs at least once
+  do { 
+    // Draft our sleevecap
+    draftSleeve(part, tweak)
+    // Increate the run count
+    runs++
+    // Re-calculate by how far we're off
+    delta = store.get('sleevecapLength') - target 
+    // If we overshot, decrease the tweak factor
+    if (delta > 0) tweak = tweak * 0.99 
+    // If we're short, increase the tweak factor
+    else tweak = tweak * 1.02 
+  } while (Math.abs(delta) > 2 && runs < 25) 
+  // Keep doing this until we're off by less than 2mm or we tried 25 times
+```
+
+A few things that are important:
+
+ - We check to see how close we are by using `Math.abs(delta)` which gives us the absolute value of our delta
+ - We guard against an endless loop by keeping track of the runs and giving up after 25
+ - We multiply by `0.99` and `1.02` to respectively decrease and increase our `tweak` factor. 
+   This assymetric approach avoids that we end up ping-ponging around our target value and never land somewhere in the middle

markdown/dev/howtos/design/seam-allowance/en.md

@@ -0,0 +1,64 @@
+---
+title: Add seam allowance and/or hem allowance
+for: developers
+about: Adding seam allowance or hem allowance is easy to do
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/bruce/src/inset.js](https://github.com/freesewing/freesewing/blob/develop/packages/bruce/src/inset.js#L34)
+
+</Note>
+
+Adding seam allowance is something that has to happen in every pattern.
+We might also have a hem where we need to add more seam allowance, or hem allowance.
+
+When doing this, it's best to split up your path so in those sections that share the same
+seam allowance.
+
+In the example below we have two such paths:
+
+  - `paths.saBase` is the path that will require regular seam allowance
+  - `paths.hemBase` is the path that will require more seam allowance, or hem allowance
+
+When creating them, we disable rendering, effectively hiding them.
+Then we string together our real path and our seam allowance based on them:
+
+```js
+  paths.saBase = new Path()
+    .move(points.bottomRight)
+    .line(points.tip)
+    .curve(points.tipCpBottom, points.tipCpTop, points.topLeft)
+    .line(points.bottomLeft)
+    .setRender(false)
+  paths.hemBase = new Path()
+    .move(points.bottomLeft)
+    .line(points.bottomRight)
+    .setRender(false)
+
+  paths.seam = paths.saBase.join(paths.hemBase)
+    .close()
+    .attr('class', 'fabric')
+
+  if (complete) {
+    if (sa) {
+      paths.sa = paths.saBase.offset(sa)
+        .join(paths.hemBase.offset(sa * 2))
+        .close()
+        .attr('class', 'fabric sa')
+    }
+    // ...
+  }
+```
+
+<Tip>
+
+##### Use a multiple of `sa` for your hem allowance
+
+Resist the temptation to use an absolute value for any seam allowance, including at the hem.
+
+Always use a multiple of the `sa` value.
+
+</Tip>

markdown/dev/howtos/design/slash-spread/en.md

@@ -0,0 +1,46 @@
+---
+title: Slash and spread
+for: developers
+about: Slash and spread is easy enough on paper, here's how to do it in code
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L64)
+
+</Note>
+
+When we _slash and spread_ a pattern, we cut out a triangle, and then rotate it
+around the tip of the triangle.
+
+And that's exactly what we do in code. We just need to know:
+
+ - What point we want to rotate around
+ - Which points we want to rotate
+ - By how much we want to rotate
+
+```js
+let rotate = [
+  'splitEdge',
+  'neckEdge',
+  'cfNeck',
+  'cfNeckCp1',
+  'neckCp2Front',
+  'neck',
+  'shoulder',
+  'shoulderCp1',
+  'armholePitchCp2',
+  'armholePitch',
+  'armholePitchCp1',
+  'armholeHollowCp2',
+  'armholeHollow',
+  'armholeHollowCp1',
+  'splitCp2',
+  'frontNeckCpEdge'
+]
+for (let p of rotate) {
+  points[p] = points[p].rotate(options.chestShapingMax * options.chestShaping * -1, points.split)
+}
+```

markdown/dev/howtos/design/sprinkle-snippets/en.md

@@ -0,0 +1,46 @@
+---
+title: Add several of the same snippets with the sprinkle macro
+for: developers
+about: Adding multiple snippets doesn't need to be a chore with this handy macro
+---
+
+<Note>
+
+##### See this example in our source code
+
+ - [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L381)
+
+</Note>
+
+Adding multiple snippets at the same time results in a lot of repetitive code.
+
+Better to use the `sprinkle` macro instead:
+
+```js
+macro('sprinkle', {
+  snippet: 'notch',
+  on: [
+    'neck',
+    'shoulder',
+    'armholePitch',
+    'chestPocketBottomLeft',
+    'chestPocketBottomRight',
+    'lapelBreakPoint',
+    'notchMax',
+    'notch',
+    'innerPocketLeft',
+    'innerPocketRight',
+    'frontPocketTopLeft',
+    'frontPocketBottomLeft',
+    'armholeHollow',
+    'waist'
+  ]
+})
+```
+
+<Tip>
+
+Refer to [the sprinkle macro documentation](/reference/macros/sprinkle/) for details on how
+to use this macro
+
+</Tip>

markdown/dev/howtos/dev/en.md

@@ -0,0 +1,6 @@
+---
+title: Setting up your development environment
+---
+
+<ReadMore />
+

markdown/dev/howtos/dev/freesewing-dev/en.md

@@ -0,0 +1,44 @@
+---
+title: Working on freesewing.dev
+for: developers
+about: Shows you how to setup your development environment to work on freesewing.dev, our website for developers
+---
+
+To work on freesewing.dev, checkout the repository:
+
+```bash
+git@github.com:freesewing/freesewing.dev.git
+```
+
+<Note>
+You should check out your own fork so you can write your changes to it.
+Update the command above with the path of your own fork on Github
+</Note>
+
+Enter the newly installed repository:
+
+```bash
+cd freesewing.dev
+```
+
+Now let NPM install the dependencies:
+
+```bash
+npm install
+```
+
+If you prefer, you can also use yarn:
+
+```bash
+yarn install
+```
+
+This will take a while. Then it's done, run the following command to start your development environment:
+
+```bash
+npm run develop
+```
+
+Once the command builds the site, you can open your browser on http://localhost:8000 to see the site.
+
+As you make changes, they will automatically be loaded into your browser.

markdown/dev/howtos/dev/freesewing-org/en.md

@@ -0,0 +1,51 @@
+---
+title: Working on freesewing.org
+for: developers
+about: Shows you how to setup your development environment to work on freesewing.org, our website for makers
+---
+
+To work on freesewing.org, checkout the repository:
+
+```bash
+git@github.com:freesewing/freesewing.org.git
+```
+
+<Note>
+You should check out your own fork so you can write your changes to it.
+Update the command above with the path of your own fork on Github
+</Note>
+
+Enter the newly installed repository:
+
+```bash
+cd freesewing.dev
+```
+
+Copy the `.env.example` file to `.env`
+
+```bash
+cp .env.example .env
+```
+
+Now let NPM install the dependencies:
+
+```bash
+npm install
+```
+
+If you prefer, you can also use yarn:
+
+```bash
+yarn install
+```
+
+This will take a while. When it's done, 
+run the following command to start your development environment:
+
+```bash
+npm run develop
+```
+
+Once the command builds the site, you can open your browser on http://localhost:8000 to see the site.
+
+As you make changes, they will automatically be loaded into your browser.

markdown/dev/howtos/en.md

@@ -0,0 +1,5 @@
+---
+title: Howtos
+order: 1020
+---
+

markdown/dev/howtos/es.md

@@ -0,0 +1,5 @@
+---
+title: Howtos
+---
+
+<ReadMore root='howtos' recurse />

markdown/dev/howtos/fr.md

@@ -0,0 +1,5 @@
+---
+title: Howtos
+---
+
+<ReadMore root='howtos' recurse />

markdown/dev/howtos/nl.md

@@ -0,0 +1,5 @@
+---
+title: Howtos
+---
+
+<ReadMore root='howtos' recurse />