chore(markdown): Linting of dev docs
This commit is contained in:
Joost De Cock
parent
1d8beedd44
commit
265ad404da
317 changed files with 1281 additions and 1503 deletions
|
|
@ -6,10 +6,9 @@ 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
|
||||
You can pull them out of there with
|
||||
the [shorthand](/howtos/code/shorthand/) call:
|
||||
|
||||
|
||||
```js
|
||||
const { measurements, options } = part.shorthand()
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,11 @@ 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
|
||||
You can pull them out of there with
|
||||
the [shorthand](/howtos/code/shorthand/) call:
|
||||
|
||||
|
||||
```js
|
||||
const { measurements, options } = part.shorthand()
|
||||
|
||||
let sleeveBonus = measurements.shoulderToWrist * (1 + options.sleeveLengthBonus);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ about: While documentation is good, sometimes you want to add some instructions
|
|||
|
||||
##### 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)
|
||||
- [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.
|
||||
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:
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ for: developers
|
|||
about: Shows you how to add new parts to your pattern
|
||||
---
|
||||
|
||||
Since the patterns parts are listed
|
||||
Since the patterns parts are listed
|
||||
in [the configuration file](/reference/config/), freesewing knows about
|
||||
all the parts that belong to your pattern.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ icon: pattern
|
|||
about: Shows you how to add paths to your pattern
|
||||
---
|
||||
|
||||
After using the [shorthand](/howtos/code/shorthand/) call,
|
||||
After using the [shorthand](/howtos/code/shorthand/) call,
|
||||
`Path` contains the path constructor, while `paths` is a reference to `part.paths`,
|
||||
which is where you should store your paths.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ for: developers
|
|||
about: Shows you how to add points to your pattern
|
||||
---
|
||||
|
||||
After using the [shorthand](/howtos/code/shorthand/) call,
|
||||
After using the [shorthand](/howtos/code/shorthand/) call,
|
||||
`Point` contains the point constructor, while `points` is a reference to `part.points`,
|
||||
which is where you should store your points.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ for: developers
|
|||
about: Shows you how to add snippets to your pattern
|
||||
---
|
||||
|
||||
After using the [shorthand](/howtos/code/shorthand/) call,
|
||||
After using the [shorthand](/howtos/code/shorthand/) call,
|
||||
`Snippet` contains the path constructor, while `snippets` is a reference to `part.snippets`,
|
||||
which is where you should store your paths.
|
||||
|
||||
|
|
@ -16,8 +16,8 @@ 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
|
||||
- **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>
|
||||
|
||||
|
|
@ -30,4 +30,3 @@ Below is an example of the available snippets, and the use of the `data-scale` a
|
|||
<Example pattern="rendertest" options_only="snippets">
|
||||
Overview of available snippets
|
||||
</Example>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ title: Adding text
|
|||
|
||||
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
|
||||
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:
|
||||
|
|
@ -48,4 +48,3 @@ paths.example = new Path()
|
|||
<Example part="path_attr">
|
||||
Text on a path
|
||||
</Example>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ 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.
|
||||
the `attr()` helper method.
|
||||
|
||||
Not only is less more, the method is also *chainable*, which allows you to do this:
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ The [adding-text](/concepts/adding-text) documentation explains this in detail.
|
|||
|
||||
<Tip>
|
||||
|
||||
When rendering, FreeSewing will output all your attributes. This gives you the
|
||||
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
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ about: Shows you how to create a new design
|
|||
---
|
||||
|
||||
To create a new pattern, call `new freesewing.Design()`.
|
||||
It takes your pattern configuration,
|
||||
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`:
|
||||
|
|
@ -19,7 +19,7 @@ import config from "../config"
|
|||
const Sorcha = new freesewing.Design(config, plugins)
|
||||
```
|
||||
|
||||
This method does not return a `Design` object. Instead it returns
|
||||
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:
|
||||
|
|
@ -35,7 +35,7 @@ let pattern = new Sorcha()
|
|||
|
||||
##### Design() is a super-constructor
|
||||
|
||||
Constructors are functions you can call with `new` to create an object.
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ dependencies: {
|
|||
}
|
||||
```
|
||||
|
||||
This could be from a T-shirt pattern where the `front` and `back` patterns are very similar,
|
||||
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](/reference/api/store) and
|
||||
|
|
@ -26,9 +26,9 @@ 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
|
||||
- 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ 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,
|
||||
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
|
||||
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.
|
||||
|
|
@ -15,4 +15,3 @@ In addition, all attributes that have a `data-circle-` prefix will apply to the
|
|||
<Example pattern="rendertest" options_only="circles">
|
||||
Circles
|
||||
</Example>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,49 +8,52 @@ about: Shows how to create a variation of a pre-existing design
|
|||
|
||||
##### 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)
|
||||
- [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>
|
||||
|
||||
## Setup
|
||||
|
||||
To be able to extend existing patterns, you will have to access them on your local machine. There are two ways to do this:
|
||||
- add needed dependencies when using `npx create-freesewing-pattern`
|
||||
- create your new pattern in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing)
|
||||
|
||||
- add needed dependencies when using `npx create-freesewing-pattern`
|
||||
- create your new pattern in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing)
|
||||
|
||||
### When using `npx create-freesewing-pattern`
|
||||
|
||||
If you want to use existing patterns when creating your new pattern with `npx create-freesewing-pattern`, you have to install the needed dependencies.
|
||||
Let's say you want to extend Brian.
|
||||
In your freshly created pattern folder, you now have to run
|
||||
If you want to use existing patterns when creating your new pattern with `npx create-freesewing-pattern`, you have to install the needed dependencies.\
|
||||
Let's say you want to extend Brian.\
|
||||
In your freshly created pattern folder, you now have to run
|
||||
|
||||
```bash
|
||||
npm install --save @freesewing/brian
|
||||
```
|
||||
This will install Brian as a dependency, which you can then access in your pattern (see [examples](/howtos/code/extend-pattern/#examples) below on how to do that).
|
||||
|
||||
This will install Brian as a dependency, which you can then access in your pattern (see [examples](/howtos/code/extend-pattern/#examples) below on how to do that).\
|
||||
This has to be repeated for every new pattern you create.
|
||||
|
||||
<Tip>
|
||||
|
||||
Some packages need more than one dependency. Carlton, for example, is based on Bent, which in turn is based on Brian. You will have to install all dependencies in the way shown above. If something is still missing, error messages will tell you what you still need to install.
|
||||
|
||||
|
||||
Some packages need more than one dependency. Carlton, for example, is based on Bent, which in turn is based on Brian. You will have to install all dependencies in the way shown above. If something is still missing, error messages will tell you what you still need to install.
|
||||
|
||||
</Tip>
|
||||
|
||||
### Using the freesewing monorepo
|
||||
|
||||
You can use the power of robots to install the needed dependencies if you work in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing).
|
||||
- First, clone the monorepo (or your fork of it) to your local machine.
|
||||
- Go to the root and run `yarn kickstart`. This will take a while, so grab a coffee and come back later.
|
||||
- Once that is done, edit the file `config/descriptions.yaml` to include the name and description of your new pattern (take care to start the description with `A FreeSewing pattern`).
|
||||
- Create a folder for your new pattern in `packages`.
|
||||
- Run `yarn reconfigure`. This will read the changes in `config/descriptions.yaml` and create the needed files in your new folder.
|
||||
- If you haven't already, now is also a good time to create a feature branch so that you don't work directly in the `develop`-branch of the git-repository: `git checkout -b mycoolnewpattern` (adjust name accordingly).
|
||||
- You can now start the actual pattern design work (i.e. editing and adding `src` and `config` files for your pattern.
|
||||
- For dependencies, configure them in `config/dependencies.yaml`.
|
||||
- Run `yarn reconfigure` again, and the magic will make sure that your `package.json` is updated accordingly.
|
||||
- You can set yourself as an author in `config/exceptions.yaml`, and - you guessed it - run `yarn reconfigure` again.
|
||||
You can use the power of robots to install the needed dependencies if you work in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing).
|
||||
|
||||
- First, clone the monorepo (or your fork of it) to your local machine.
|
||||
- Go to the root and run `yarn kickstart`. This will take a while, so grab a coffee and come back later.
|
||||
- Once that is done, edit the file `config/descriptions.yaml` to include the name and description of your new pattern (take care to start the description with `A FreeSewing pattern`).
|
||||
- Create a folder for your new pattern in `packages`.
|
||||
- Run `yarn reconfigure`. This will read the changes in `config/descriptions.yaml` and create the needed files in your new folder.
|
||||
- If you haven't already, now is also a good time to create a feature branch so that you don't work directly in the `develop`-branch of the git-repository: `git checkout -b mycoolnewpattern` (adjust name accordingly).
|
||||
- You can now start the actual pattern design work (i.e. editing and adding `src` and `config` files for your pattern.
|
||||
- For dependencies, configure them in `config/dependencies.yaml`.
|
||||
- Run `yarn reconfigure` again, and the magic will make sure that your `package.json` is updated accordingly.
|
||||
- You can set yourself as an author in `config/exceptions.yaml`, and - you guessed it - run `yarn reconfigure` again.
|
||||
|
||||
Now you can work on extending existing patterns into something new and exciting. And the best part about using this method is that making a pull request will be much easier once you're done developing your new pattern.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ about: When you inherit a part, it comes with a bunch of paths. Here'show to hid
|
|||
|
||||
##### 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)
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L22)
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ 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
|
||||
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
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@ inject: {
|
|||
}
|
||||
```
|
||||
|
||||
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,
|
||||
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
|
||||
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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,10 @@ about: When you inherit a part, it comes with a bunch of paths. Here'show to rem
|
|||
|
||||
##### 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)
|
||||
- [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]
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,17 +8,16 @@ about: Shows how to share dimensions between similar pattern parts
|
|||
|
||||
##### 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)
|
||||
- [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
|
||||
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 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:
|
||||
|
|
@ -49,8 +48,7 @@ import { dimensions } from './shared'
|
|||
|
||||
<Note>
|
||||
|
||||
Since our shared dimension method is a so-called _named export_ we need to
|
||||
Since our shared dimension method is a so-called *named export* we need to
|
||||
import it with the syntax you see above.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ The [Part.shorthand()](/reference/api/part/#shorthand) method will become your b
|
|||
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
|
||||
[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
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ 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
|
||||
For this, you should use the [Store](/reference/api/store/), which is available via
|
||||
the [shorthand](/howtos/code/shorthand/) call:
|
||||
|
||||
```js
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ about: Shows how to store a seam length so you can true the seam of another part
|
|||
|
||||
##### 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)
|
||||
- [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
|
||||
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:
|
||||
|
|
@ -27,4 +27,3 @@ The example below is from Aaron and stores the length of the armhole seam:
|
|||
.length()
|
||||
)
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -52,5 +52,3 @@ points.example.attr(
|
|||
|
||||
Whether you're rendering to SVG or React, by using ` ` your spaces
|
||||
will be properly rendered in both environments.
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue