fix(dev): One-liner admonitions
This commit is contained in:
Joost De Cock
parent
a6d656c19e
commit
da41cc0fc9
60 changed files with 860 additions and 659 deletions
|
|
@ -36,6 +36,7 @@ git clone https://github.com/your-username/freesewing
|
|||
cd freesewing
|
||||
yarn kickstart
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
This sets up the monorepo. If you would like to create a new design, run the
|
||||
|
|
@ -135,13 +136,15 @@ npx @freesewing/new-design
|
|||
```
|
||||
|
||||
After you've answered [some questions](#questions), it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
|
||||
:::tipThe folder will have the name you chose above.:::
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
|
|
|
|||
|
|
@ -10,4 +10,6 @@ We'll cover the following steps:
|
|||
|
||||
<ReadMore />
|
||||
|
||||
:::tipThese instructions are also valid for BSD or other Unix systems:::
|
||||
:::tip
|
||||
These instructions are also valid for BSD or other Unix systems
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ git clone https://github.com/your-username/freesewing
|
|||
cd freesewing
|
||||
yarn kickstart
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
This sets up the monorepo. If you would like to create a new design, run the
|
||||
|
|
@ -120,13 +121,15 @@ npx @freesewing/new-design
|
|||
```
|
||||
|
||||
After you've answered [some questions](#questions), it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
|
||||
:::tipThe folder will have the name you chose above.:::
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
|
|
|
|||
|
|
@ -35,11 +35,13 @@ FreeSewing project.
|
|||
|
||||
### Install WSL
|
||||
|
||||
:::warning This guide uses WSL version 2, which requires installing the Hyper-V
|
||||
:::warning
|
||||
This guide uses WSL version 2, which requires installing the Hyper-V
|
||||
virtualisation system. If you have another virtualisation system installed (such
|
||||
as VirtualBox or VMWare) you may run into conflicts which require either
|
||||
updating that system to a version which can use the HyperV backend or porting
|
||||
your existing machines to use HyperV. :::
|
||||
your existing machines to use HyperV.
|
||||
:::
|
||||
|
||||
Follow the [Windows Subsystem for Linux Installation Guide for Windows
|
||||
10](https://docs.microsoft.com/en-gb/windows/wsl/install-win10) (requires a
|
||||
|
|
@ -48,8 +50,8 @@ recent version of Windows 10).
|
|||
#### Install NVM
|
||||
|
||||
Open a new WSL terminal from the shortcuts created or by searching for "WSL
|
||||
Terminal" in the start menu. [Install NVM by following the NVM setup
|
||||
guide](https://github.com/nvm-sh/nvm#install--update-script). Once installed
|
||||
Terminal" in the start menu. [Install NVM by following the NVM setup
|
||||
guide](https://github.com/nvm-sh/nvm#install--update-script). Once installed
|
||||
you will need to activate NVM by either following the instructions printed to
|
||||
the screen or opening a new terminal.
|
||||
|
||||
|
|
@ -63,10 +65,12 @@ then activate using `nvm use <version>`. You can determine what version the
|
|||
FreeSewing project uses by checking
|
||||
[freesewing/freesewing/.nvmrc](https://github.com/freesewing/freesewing/blob/develop/.nvmrc).
|
||||
|
||||
:::warning At the time this guide was written the latest version of Node.js/npm has
|
||||
:::warning
|
||||
At the time this guide was written the latest version of Node.js/npm has
|
||||
a bug in the dependency resolution process which causes the freesewing project
|
||||
to fail to build. Use the latest LTS version (currently 18.17.0) or the specific
|
||||
version used by the main project to avoid this issue. :::
|
||||
version used by the main project to avoid this issue.
|
||||
:::
|
||||
|
||||
Node.js comes with the Node Package Manager (npm) by default which can be used to
|
||||
set up the project. The default package manager uses a fairly simplistic approach
|
||||
|
|
@ -122,7 +126,6 @@ this guide you have already done steps 1 and 2, you will only need to install
|
|||
the [remote development
|
||||
extension](https://aka.ms/vscode-remote/download/extension))
|
||||
|
||||
|
||||
## Setting up a development environment in Windows.
|
||||
|
||||
### Install NVM
|
||||
|
|
@ -165,9 +168,12 @@ In VSCode or in a terminal, navigate to the folder you wish to contain your new
|
|||
After you've answered [some questions](#questions), it will take a while to set everything up.
|
||||
When it's done, you will have a new folder with the development environment inside.
|
||||
|
||||
:::tipThe folder will have the name you chose above.:::
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
### Questions
|
||||
|
||||
#### What template to use
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@ tedious. There are macros to add titles to our pattern, or grainline
|
|||
indicators, a scalebox, and there's a macro to round corners. The `round`
|
||||
macro.
|
||||
|
||||
:::note You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).:::
|
||||
:::note
|
||||
You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).
|
||||
:::
|
||||
|
||||
We need a half circle here, but the `round` macro works on 90° angles, so
|
||||
we'll use it twice. As such, we'll add some points to guide the macro, and
|
||||
we'll use it twice. As such, we'll add some points to guide the macro, and
|
||||
then put it to work.
|
||||
|
||||
Like our neck opening, we've only drawn half since we can simply copy the
|
||||
|
|
@ -41,36 +43,38 @@ function draftBib({
|
|||
part,
|
||||
}) {
|
||||
|
||||
/*
|
||||
* Construct the quarter neck opening
|
||||
*/
|
||||
/\*
|
||||
|
||||
- Construct the quarter neck opening
|
||||
_/
|
||||
let tweak = 1
|
||||
let target = (measurements.head * options.neckRatio) /4
|
||||
let target = (measurements.head _ options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(
|
||||
tweak * measurements.head / 10,
|
||||
0
|
||||
)
|
||||
points.bottom = new Point(
|
||||
0,
|
||||
tweak * measurements.head / 12
|
||||
)
|
||||
|
||||
points.right = new Point(
|
||||
tweak _ measurements.head / 10,
|
||||
0
|
||||
)
|
||||
points.bottom = new Point(
|
||||
0,
|
||||
tweak _ measurements.head / 12
|
||||
)
|
||||
|
||||
|
||||
points.rightCp1 = points.right.shift(
|
||||
90,
|
||||
90,
|
||||
points.bottom.dy(points.right) / 2
|
||||
)
|
||||
points.bottomCp2 = points.bottom.shift(
|
||||
0,
|
||||
0,
|
||||
points.bottom.dx(points.right) / 2
|
||||
)
|
||||
|
||||
|
||||
paths.quarterNeck = new Path()
|
||||
.move(points.right)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
|
@ -78,11 +82,13 @@ function draftBib({
|
|||
delta = paths.quarterNeck.length() - target
|
||||
if (delta > 0) tweak = tweak * 0.99
|
||||
else tweak = tweak * 1.02
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
/*
|
||||
* Construct the complete neck opening
|
||||
*/
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
/\*
|
||||
|
||||
- Construct the complete neck opening
|
||||
\*/
|
||||
points.rightCp2 = points.rightCp1.flipY()
|
||||
points.bottomCp1 = points.bottomCp2.flipX()
|
||||
points.left = points.right.flipX()
|
||||
|
|
@ -92,83 +98,88 @@ function draftBib({
|
|||
points.topCp1 = points.bottomCp2.flipY()
|
||||
points.topCp2 = points.bottomCp1.flipY()
|
||||
|
||||
paths.neck = new Path()
|
||||
.move(points.top)
|
||||
.curve(points.topCp2, points.leftCp1, points.left)
|
||||
.curve(points.leftCp2, points.bottomCp1, points.bottom)
|
||||
.curve(points.bottomCp2, points.rightCp1, points.right)
|
||||
.curve(points.rightCp2, points.topCp1, points.top)
|
||||
.close()
|
||||
.addClass('fabric')
|
||||
paths.neck = new Path()
|
||||
.move(points.top)
|
||||
.curve(points.topCp2, points.leftCp1, points.left)
|
||||
.curve(points.leftCp2, points.bottomCp1, points.bottom)
|
||||
.curve(points.bottomCp2, points.rightCp1, points.right)
|
||||
.curve(points.rightCp2, points.topCp1, points.top)
|
||||
.close()
|
||||
.addClass('fabric')
|
||||
|
||||
/*
|
||||
* Drawing the bib outline
|
||||
*/
|
||||
const width = measurements.head * options.widthRatio
|
||||
const length = measurements.head * options.lengthRatio
|
||||
/\*
|
||||
|
||||
points.topLeft = new Point(
|
||||
width / -2,
|
||||
points.top.y - (width / 2 - points.right.x)
|
||||
)
|
||||
points.topRight = points.topLeft.shift(0, width)
|
||||
points.bottomLeft = points.topLeft.shift(-90, length)
|
||||
points.bottomRight = points.topRight.shift(-90, length)
|
||||
- Drawing the bib outline
|
||||
_/
|
||||
const width = measurements.head _ options.widthRatio
|
||||
const length = measurements.head \* options.lengthRatio
|
||||
|
||||
/*
|
||||
* Shape the straps
|
||||
*/
|
||||
points.topLeft = new Point(
|
||||
width / -2,
|
||||
points.top.y - (width / 2 - points.right.x)
|
||||
)
|
||||
points.topRight = points.topLeft.shift(0, width)
|
||||
points.bottomLeft = points.topLeft.shift(-90, length)
|
||||
points.bottomRight = points.topRight.shift(-90, length)
|
||||
|
||||
/\*
|
||||
|
||||
- Shape the straps
|
||||
\*/
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y)
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y)
|
||||
points.edgeTop = new Point(0, points.topLeft.y)
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5)
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX()
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
)
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX()
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5)
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX()
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
)
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX()
|
||||
|
||||
// highlight-start
|
||||
// Round the straps
|
||||
const strap = points.edgeTop.dy(points.top)
|
||||
// highlight-start
|
||||
// Round the straps
|
||||
const strap = points.edgeTop.dy(points.top)
|
||||
|
||||
points.tipRight = points.edgeTop.translate(strap / 2, strap / 2)
|
||||
points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y)
|
||||
points.tipRightBottom = new Point(points.tipRight.x, points.top.y)
|
||||
points.tipRight = points.edgeTop.translate(strap / 2, strap / 2)
|
||||
points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y)
|
||||
points.tipRightBottom = new Point(points.tipRight.x, points.top.y)
|
||||
|
||||
macro("round", {
|
||||
id: "tipRightTop",
|
||||
from: points.edgeTop,
|
||||
to: points.tipRight,
|
||||
via: points.tipRightTop,
|
||||
hide: false
|
||||
})
|
||||
macro("round", {
|
||||
id: "tipRightBottom",
|
||||
from: points.tipRight,
|
||||
to: points.top,
|
||||
via: points.tipRightBottom,
|
||||
hide: false
|
||||
})
|
||||
// highlight-end
|
||||
macro("round", {
|
||||
id: "tipRightTop",
|
||||
from: points.edgeTop,
|
||||
to: points.tipRight,
|
||||
via: points.tipRightTop,
|
||||
hide: false
|
||||
})
|
||||
macro("round", {
|
||||
id: "tipRightBottom",
|
||||
from: points.tipRight,
|
||||
to: points.top,
|
||||
via: points.tipRightBottom,
|
||||
hide: false
|
||||
})
|
||||
// highlight-end
|
||||
|
||||
/*
|
||||
* Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
*/
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close()
|
||||
|
||||
return part
|
||||
- Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
\*/
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close()
|
||||
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
Notice that we always draw our path at the end after we've manipulated our points.
|
||||
Notice that we always draw our path at the end after we've manipulated our points.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ does.
|
|||
## Destructuring the function parameter
|
||||
|
||||
If you're not familiar with the `({ part })` syntax you see above, this is a
|
||||
technique called *parameter destructuring* or more generally, [object
|
||||
technique called _parameter destructuring_ or more generally, [object
|
||||
destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
|
||||
|
||||
The draft method receives only 1 parameter: An object that holds everything we
|
||||
need to draft our method. Destructuring is a way to *pull things out of the
|
||||
object into their own variable*. It saves us a bunch of typing as these two are
|
||||
need to draft our method. Destructuring is a way to _pull things out of the
|
||||
object into their own variable_. It saves us a bunch of typing as these two are
|
||||
equivalent:
|
||||
|
||||
<Tabs>
|
||||
|
|
@ -53,7 +53,7 @@ function draftBib({ part }) {
|
|||
|
||||
As we'll make our way through this tutorial, we'll need more and more stuff, so
|
||||
we'll be pulling it out of the object passed to the draft method via
|
||||
*destructuring*.
|
||||
_destructuring_.
|
||||
|
||||
:::note
|
||||
|
||||
|
|
@ -92,7 +92,9 @@ Here's a brief summary of the things we've added above:
|
|||
- `points`: A container object to hold the part's points
|
||||
- `paths`: A container object to hold the part's paths
|
||||
|
||||
:::tipRemember: Constructors start with a **C**apital letter:::
|
||||
:::tip
|
||||
Remember: Constructors start with a **C**apital letter
|
||||
:::
|
||||
|
||||
Long story short: These will make it possible for us to draw points and paths easily.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@ title: Supporting translation
|
|||
order: 80
|
||||
---
|
||||
|
||||
:::note [FIXME]Write this section for v3:::
|
||||
|
||||
:::note [FIXME]
|
||||
Write this section for v3
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ If you set a `menu` property on your option, the FreeSewing frontend will use
|
|||
this to organize your various options in a menu structure.
|
||||
|
||||
### Sub menus
|
||||
|
||||
You can a nested menu structure with dot-notation. So `style.pockets` will
|
||||
create a `pockets` submenu under the `style` menu and put your option there.
|
||||
|
||||
|
|
@ -65,4 +66,6 @@ function(
|
|||
|
||||
This is typically used to hide options conditionally.
|
||||
|
||||
:::note [FIXME]Include example:::
|
||||
:::note [FIXME]
|
||||
Include example
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ title: Testing your designs
|
|||
order: 70
|
||||
---
|
||||
|
||||
:::note [FIXME] Update this for v3 :::
|
||||
|
||||
With the basic outline of our pattern ready, now would be a good time
|
||||
to test it to see how well it adapts to different measurements,
|
||||
and the range of options we provided.
|
||||
|
||||
:::note [FIXME]
|
||||
Update this for v3
|
||||
|
||||
This page needs to be updated with screenshots from the v3 development
|
||||
environment
|
||||
:::
|
||||
|
|
@ -40,7 +40,7 @@ these.
|
|||
## Testing pattern options
|
||||
|
||||
We used percentage options, which can vary between their minimum and maximum
|
||||
value. For these tests, FreeSewing will divide that range into 10 steps and
|
||||
value. For these tests, FreeSewing will divide that range into 10 steps and
|
||||
draft our pattern for each step.
|
||||
|
||||
Click on any of the options we've added to our pattern, and our bib will be
|
||||
|
|
@ -54,11 +54,13 @@ that it only influences the length:
|
|||
|
||||
|
||||
:::note [FIXME]Update screenshot for v3:::
|
||||
:::note [FIXME]
|
||||
Update screenshot for v3
|
||||
:::
|
||||
|
||||
### neckRatio
|
||||
|
||||
The `neckRatio` option will determine the size of the neck opening. For the
|
||||
The `neckRatio` option will determine the size of the neck opening. For the
|
||||
same `head` measurement, varying this option should result in bibs with
|
||||
increasingly larger neck opening.
|
||||
|
||||
|
|
@ -68,11 +70,13 @@ smaller, we will rotate the straps further out of the way to avoid overlap:
|
|||
|
||||
|
||||
:::note [FIXME]Update screenshot for v3:::
|
||||
:::note [FIXME]
|
||||
Update screenshot for v3
|
||||
:::
|
||||
|
||||
### widthRatio
|
||||
|
||||
The `widthRatio` option will determine the width of our bib. For the same
|
||||
The `widthRatio` option will determine the width of our bib. For the same
|
||||
`head` measurement, varying this option should result in increasingly wider
|
||||
bibs.
|
||||
|
||||
|
|
@ -84,7 +88,9 @@ bib shorter when it's worn.
|
|||
|
||||
|
||||
:::note [FIXME]Update screenshot for v3:::
|
||||
:::note [FIXME]
|
||||
Update screenshot for v3
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
|
|
@ -101,12 +107,14 @@ to the reader_.
|
|||
## Testing measurements
|
||||
|
||||
Testing a measurement will vary that measurement 10% up or down while leaving
|
||||
everything else the same. This gives us the option to determine how any given
|
||||
everything else the same. This gives us the option to determine how any given
|
||||
measurement is influencing the pattern.
|
||||
|
||||
For our bib, we only use one measurement, so it influences the entire pattern.
|
||||
|
||||
:::note [FIXME]Add screenshot:::
|
||||
:::note [FIXME]
|
||||
Add screenshot
|
||||
:::
|
||||
|
||||
## Testing measurments sets
|
||||
|
||||
|
|
@ -121,27 +129,31 @@ ends up being the same as testing a complete set of measurements.
|
|||
But most patterns use multiple measurements, and we'll find this test gives
|
||||
us insight into how our pattern will adapt to differently sized bodies.
|
||||
|
||||
:::note [FIXME]Add screenshot:::
|
||||
:::note [FIXME]
|
||||
Add screenshot
|
||||
:::
|
||||
|
||||
## The antperson test
|
||||
|
||||
A special case of model testing is the so-called _antperson test_. It drafts
|
||||
A special case of model testing is the so-called _antperson test_. It drafts
|
||||
our pattern with a set of _typical_ measurements , and then drafts it again
|
||||
with measurements that are 1/10th of those _typical_ measurements.
|
||||
|
||||
It is named after [the cartoon
|
||||
character](https://en.wikipedia.org/wiki/Ant-Man_\(film\)) who can shrink, yet
|
||||
character](<https://en.wikipedia.org/wiki/Ant-Man_(film)>) who can shrink, yet
|
||||
somehow his suit still fits.
|
||||
|
||||
The purpose of the antperson test is to bring out areas in our pattern where
|
||||
we made assumptions that will not properly scale. Many drafting books will
|
||||
we made assumptions that will not properly scale. Many drafting books will
|
||||
tell us to _add 3 cm there_ or _measure 2 inch to the right_. Those
|
||||
instructions don't scale, and we should avoid them.
|
||||
|
||||
The best patterns will pass the antperson test with 2 patterns exactly the
|
||||
same, where one will simply be 1/10th the scale of the other.
|
||||
|
||||
:::note [FIXME]Add screenshot:::
|
||||
:::note [FIXME]
|
||||
Add screenshot
|
||||
:::
|
||||
|
||||
When we're happy with how our pattern passes these tests, it's time to
|
||||
complete our design.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue