Revert "chore: Linting for markdown and js"
This reverts commit 1c92e0f655.
This commit is contained in:
joostdecock
parent
994874fa72
commit
cba1ab19c8
6627 changed files with 25791 additions and 24211 deletions
|
|
@ -1,5 +1,5 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Tutorials
|
||||
order: 1010
|
||||
-----------
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Setting up the FreeSewing development environment
|
||||
order: 40
|
||||
---------
|
||||
---
|
||||
|
||||
FreeSewing provides a development environment to help you design and develop patterns.
|
||||
|
||||
|
|
@ -18,17 +17,19 @@ You can change all of these later. It's just to get you started.
|
|||
If you're not sure what to fill in, you can stick with the defaults or leave them blank.
|
||||
Only a few of these are mandatory.
|
||||
|
||||
* **Language**: Use the arrow keys to chose the language of your choice
|
||||
* **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
* **description**: A description of your pattern. It's not mandatory.
|
||||
* **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick
|
||||
* **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
* **Author**: You can enter your name, or leave this blank for now
|
||||
* **GitHub repository**: You can leave this blank for now
|
||||
* **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
- **Language**: Use the arrow keys to chose the language of your choice
|
||||
- **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
- **description**: A description of your pattern. It's not mandatory.
|
||||
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick
|
||||
- **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
- **Author**: You can enter your name, or leave this blank for now
|
||||
- **GitHub repository**: You can leave this blank for now
|
||||
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
|
||||
|
||||
When you've answered all questions, the command will download the development enviroment,
|
||||
and set it up based on the choices you made.
|
||||
|
||||
This step will take anywhere from a few to about 10 minutes to complete.
|
||||
But when it's done, you will have a new folder with the development environent inside.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Getting started on Linux
|
||||
order: 10
|
||||
for: developers
|
||||
icons:
|
||||
icons:
|
||||
- start
|
||||
- linux
|
||||
about: |
|
||||
You'll learn how to setup Node JS on a Linux system,
|
||||
as well as initialize the FreeSewing development environment
|
||||
goals:
|
||||
- Install Node JS using nvm
|
||||
- Chosing a Node version to use
|
||||
- Initializing the FreeSewing development environment
|
||||
- Starting the FreeSewing development environment
|
||||
---
|
||||
|
||||
* start
|
||||
* linux
|
||||
about: |
|
||||
You'll learn how to setup Node JS on a Linux system,
|
||||
as well as initialize the FreeSewing development environment
|
||||
goals:
|
||||
* Install Node JS using nvm
|
||||
* Chosing a Node version to use
|
||||
* Initializing the FreeSewing development environment
|
||||
* Starting the FreeSewing development environment
|
||||
|
||||
***
|
||||
|
||||
In this tutorial, we will setup Node JS and initialize the FreeSewing
|
||||
In this tutorial, we will setup Node JS and initialize the FreeSewing
|
||||
development environment on a Linux system.
|
||||
|
||||
We'll cover the following steps:
|
||||
|
|
@ -26,3 +23,4 @@ We'll cover the following steps:
|
|||
<ReadMore list />
|
||||
|
||||
<Tip>These instructions are also valid for BSD- or other unix systems</Tip>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Installing Node
|
||||
order: 20
|
||||
---------
|
||||
---
|
||||
|
||||
Now we will use nvm to install Node JS. Run the following command:
|
||||
|
||||
|
|
@ -13,3 +12,4 @@ nvm install lts/*
|
|||
This will install the most recent so-called LTS version on your system.
|
||||
LTS versions -- short for Long Term Support -- are good node versions
|
||||
to use because they are stable and supported for a long time.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Installing nvm
|
||||
order: 10
|
||||
---------
|
||||
---
|
||||
|
||||
FreeSewing is built with [Node.js](https://nodejs.org/), a JavaScript runtime.
|
||||
|
||||
You'll need to install Node JS on your system, and to do so, we'll
|
||||
use [nvm](https://github.com/nvm-sh/nvm), short for *Node version manager*.
|
||||
You'll need to install Node JS on your system, and to do so, we'll
|
||||
use [nvm](https://github.com/nvm-sh/nvm), short for _Node version manager_.
|
||||
|
||||
Using nvm has a number of benefits in comparison with installing Node from
|
||||
the node.js website, or from a package provided by your linux distribution:
|
||||
|
||||
* You can easily switch between different Node versions
|
||||
* Everything gets installed in your home folder, avoiding permission problems
|
||||
- You can easily switch between different Node versions
|
||||
- Everything gets installed in your home folder, avoiding permission problems
|
||||
|
||||
To setup nvm, run the following command in a terminal:
|
||||
|
||||
|
|
@ -33,7 +32,7 @@ After the script is completed, try running the following command:
|
|||
nvm
|
||||
```
|
||||
|
||||
If all goes well, it should show you the nvm help.
|
||||
If all goes well, it should show you the nvm help.
|
||||
|
||||
<Tip>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Using a different Node version
|
||||
order: 30
|
||||
---------
|
||||
---
|
||||
|
||||
Now that you've got Node setup, we can start setting up the FreeSewing
|
||||
development environment.
|
||||
|
|
@ -18,8 +17,8 @@ To see the different Node versions on your system, run this command:
|
|||
nvm ls
|
||||
```
|
||||
|
||||
It will show you a list of local node versions.
|
||||
Either the version number, or an *alias* that points to a specific version.
|
||||
It will show you a list of local node versions.
|
||||
Either the version number, or an _alias_ that points to a specific version.
|
||||
You should see the `lts/*` alias in the list which is what we've just installed.
|
||||
|
||||
### nvm ls-remote
|
||||
|
|
@ -53,3 +52,4 @@ nvm use v10.22.1
|
|||
|
||||
If you picked a version that is not installed, `nvm` will simply tell you
|
||||
and even suggest the command you should type to install it. Handy!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Start the development environment
|
||||
order: 50
|
||||
---------
|
||||
---
|
||||
|
||||
You will have a new folder that has the name you picked for your pattern.
|
||||
If you chose `test`, you will have a `test` folder. If you chose `banana`, you'll have a `banana` folder.
|
||||
|
||||
If you enter that folder, you'll find a couple of subfolders:
|
||||
|
||||
* `config` holds your pattern's configuration file
|
||||
* `src` holds your pattern's source code
|
||||
* `example` holds the development environment
|
||||
- `config` holds your pattern's configuration file
|
||||
- `src` holds your pattern's source code
|
||||
- `example` holds the development environment
|
||||
|
||||
To start the development environment, enter the `example` folder and run: `npm run start` (or `yarn start` if you're using Yarn as a package manager.
|
||||
|
||||
|
|
@ -25,6 +24,7 @@ the pattern's source code. When you do, it will update automatically in your bro
|
|||
All you have to do now, is design your pattern.
|
||||
Thankfully, we have a tutorial for that too:
|
||||
|
||||
* [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern
|
||||
- [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Setting up the FreeSewing development environment
|
||||
order: 50
|
||||
---------
|
||||
---
|
||||
|
||||
FreeSewing provides a development environment to help you design and develop patterns.
|
||||
|
||||
|
|
@ -18,17 +17,19 @@ You can change all of these later. It's just to get you started.
|
|||
If you're not sure what to fill in, you can stick with the defaults or leave them blank.
|
||||
Only a few of these are mandatory.
|
||||
|
||||
* **Language**: Use the arrow keys to chose the language of your choice
|
||||
* **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
* **description**: A description of your pattern. It's not mandatory.
|
||||
* **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick
|
||||
* **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
* **Author**: You can enter your name, or leave this blank for now
|
||||
* **GitHub repository**: You can leave this blank for now
|
||||
* **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
- **Language**: Use the arrow keys to chose the language of your choice
|
||||
- **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
- **description**: A description of your pattern. It's not mandatory.
|
||||
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick
|
||||
- **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
- **Author**: You can enter your name, or leave this blank for now
|
||||
- **GitHub repository**: You can leave this blank for now
|
||||
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
|
||||
|
||||
When you've answered all questions, the command will download the development enviroment,
|
||||
and set it up based on the choices you made.
|
||||
|
||||
This step will take anywhere from a few to about 10 minutes to complete.
|
||||
But when it's done, you will have a new folder with the development environent inside.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,22 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Getting started on Mac
|
||||
order: 20
|
||||
for: developers
|
||||
icons:
|
||||
icons:
|
||||
- start
|
||||
- apple
|
||||
about: |
|
||||
You'll learn how to setup Node JS on a Mac system,
|
||||
as well as initialize the FreeSewing development environment.
|
||||
goals:
|
||||
- Install Xcode command-line tools
|
||||
- Install Node JS using nvm
|
||||
- Chosing a Node version to use
|
||||
- Initializing the FreeSewing development environment
|
||||
- Starting the FreeSewing development environment
|
||||
---
|
||||
|
||||
* start
|
||||
* apple
|
||||
about: |
|
||||
You'll learn how to setup Node JS on a Mac system,
|
||||
as well as initialize the FreeSewing development environment.
|
||||
goals:
|
||||
* Install Xcode command-line tools
|
||||
* Install Node JS using nvm
|
||||
* Chosing a Node version to use
|
||||
* Initializing the FreeSewing development environment
|
||||
* Starting the FreeSewing development environment
|
||||
|
||||
***
|
||||
|
||||
In this tutorial, we will setup Node JS and initialize the FreeSewing
|
||||
In this tutorial, we will setup Node JS and initialize the FreeSewing
|
||||
development environment on a Mac system running OS X.
|
||||
|
||||
<Tip>
|
||||
|
|
@ -32,3 +29,4 @@ application at `/Applications/Utilities/`.
|
|||
We'll cover the following steps:
|
||||
|
||||
<ReadMore list />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Installing Node
|
||||
order: 30
|
||||
---------
|
||||
---
|
||||
|
||||
Now we will use nvm to install Node JS. Run the following command:
|
||||
|
||||
|
|
@ -13,3 +12,4 @@ nvm install lts/*
|
|||
This will install the most recent so-called LTS version on your system.
|
||||
LTS versions -- short for Long Term Support -- are good node versions
|
||||
to use because they are stable and supported for a long time.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Installing nvm
|
||||
order: 20
|
||||
---------
|
||||
---
|
||||
|
||||
FreeSewing is built with [Node.js](https://nodejs.org/), a JavaScript runtime.
|
||||
|
||||
You'll need to install Node JS on your system, and to do so, we'll
|
||||
use [nvm](https://github.com/nvm-sh/nvm), short for *Node version manager*.
|
||||
You'll need to install Node JS on your system, and to do so, we'll
|
||||
use [nvm](https://github.com/nvm-sh/nvm), short for _Node version manager_.
|
||||
|
||||
Using nvm has a number few benefits in comparison with installing Node from
|
||||
the node.js website, or from a package providide by your linux distribution:
|
||||
|
||||
* You can easily switch between different Node versions
|
||||
* Everything gets installed in your home folder, avoiding permission problems
|
||||
- You can easily switch between different Node versions
|
||||
- Everything gets installed in your home folder, avoiding permission problems
|
||||
|
||||
To setup nvm, run the following command in a terminal window:
|
||||
|
||||
|
|
@ -33,7 +32,7 @@ After the script is completed, try running the following command:
|
|||
nvm
|
||||
```
|
||||
|
||||
If all goes well, it should show you the nvm help.
|
||||
If all goes well, it should show you the nvm help.
|
||||
|
||||
<Tip>
|
||||
|
||||
|
|
@ -41,3 +40,4 @@ If you get `nvm: command not found` or something similar, close the Terminal
|
|||
application, and open a new one. Now `nvm` should be found.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Installing the Xcode command line tools
|
||||
order: 10
|
||||
---------
|
||||
---
|
||||
|
||||
Before we can get started, we need some basic tools for development.
|
||||
They are bundled in the *Xcode command-line tools* so let's install
|
||||
They are bundled in the _Xcode command-line tools_ so let's install
|
||||
that first.
|
||||
|
||||
Open the Terminal application, and type the following command:
|
||||
|
|
@ -16,3 +15,4 @@ xcode-select --install
|
|||
|
||||
A popup will appear asking you to confirm the installation.
|
||||
Confirm, and go make a cup of coffee while the install does its thing.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Using a different Node version
|
||||
order: 40
|
||||
---------
|
||||
---
|
||||
|
||||
Now that you've got Node setup, we can start setting up the FreeSewing
|
||||
development environment.
|
||||
|
|
@ -18,8 +17,8 @@ To see the different Node versions on your system, run this command:
|
|||
nvm ls
|
||||
```
|
||||
|
||||
It will show you a list of local node versions.
|
||||
Either the version number, or an *alias* that points to a specific version.
|
||||
It will show you a list of local node versions.
|
||||
Either the version number, or an _alias_ that points to a specific version.
|
||||
You should see the `lts/*` alias in the list which is what we've just installed.
|
||||
|
||||
### nvm ls-remote
|
||||
|
|
@ -53,3 +52,4 @@ nvm use v10.22.1
|
|||
|
||||
If you picked a version that is not installed, `nvm` will simply tell you
|
||||
and even suggest the command you should type to install it. Handy!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Start the development environment
|
||||
order: 60
|
||||
---------
|
||||
---
|
||||
|
||||
You will have a new folder that has the name you picked for your pattern.
|
||||
If you chose `test`, you will have a `test` folder. If you chose `banana`, you'll have a `banana` folder.
|
||||
|
||||
If you enter that folder, you'll find a couple of subfolders:
|
||||
|
||||
* `config` holds your pattern's configuration file
|
||||
* `src` holds your pattern's source code
|
||||
* `example` holds the development environment
|
||||
- `config` holds your pattern's configuration file
|
||||
- `src` holds your pattern's source code
|
||||
- `example` holds the development environment
|
||||
|
||||
To start the development environment, enter the `example` folder and run: `npm run start` (or `yarn start` if you're using Yarn as a package manager.
|
||||
|
||||
|
|
@ -25,6 +24,7 @@ the pattern's source code. When you do, it will update automatically in your bro
|
|||
All you have to do now, is design your pattern.
|
||||
Thankfully, we have a tutorial for that too:
|
||||
|
||||
* [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern
|
||||
- [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,20 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Getting started on Windows
|
||||
order: 30
|
||||
for: developers
|
||||
icons:
|
||||
|
||||
* start
|
||||
* windows
|
||||
about: |
|
||||
You'll learn how to setup Node JS on a Windows system,
|
||||
as well as initialize the FreeSewing development environment.
|
||||
goals:
|
||||
* Install Node JS using nvm
|
||||
* Chosing a Node version to use
|
||||
* Initializing the FreeSewing development environment
|
||||
* Starting the FreeSewing development environment
|
||||
|
||||
***
|
||||
|
||||
icons:
|
||||
- start
|
||||
- windows
|
||||
about: |
|
||||
You'll learn how to setup Node JS on a Windows system,
|
||||
as well as initialize the FreeSewing development environment.
|
||||
goals:
|
||||
- Install Node JS using nvm
|
||||
- Chosing a Node version to use
|
||||
- Initializing the FreeSewing development environment
|
||||
- Starting the FreeSewing development environment
|
||||
---
|
||||
## Setting up a development environment using Windows Subsystem for Linux (WSL) and Visual Studio Code (VSCode)
|
||||
|
||||
If you already have a working WSL environment and VSCode Remote configured you can follow the [getting started on Linux guide](/tutorials/getting-started-linux) or skip ahead to [Setting up the FreeSewing development environment (WSL)](#setting-up-the-freesewing-development-environment-wsl). If not, the following process is very similar but has some differences to avoid quirks specific to this environment.
|
||||
|
||||
Windows Subsystem for Linux allows you to run a Linux distribution as a development environment, with enough functionality to develop a FreeSewing pattern. While this approach offers some advantages this is not strictly necessary to develop patterns on Windows. If you would prefer a simpler setup process refer to [Setting up a development environment in Windows](#setting-up-a-development-environment-in-windows).
|
||||
|
|
@ -27,7 +22,6 @@ Windows Subsystem for Linux allows you to run a Linux distribution as a developm
|
|||
Installing and using an IDE is optional, you can skip that step or use a different editor if you'd like. This guide suggests VSCode as it is freely available on multiple platforms and provides enough functionality to build the FreeSewing project.
|
||||
|
||||
### Install WSL
|
||||
|
||||
<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.
|
||||
</Warning>
|
||||
|
|
@ -35,13 +29,11 @@ This guide uses WSL version 2, which requires installing the Hyper-V virtualisat
|
|||
Follow the [Windows Subsystem for Linux Installation Guide for Windows 10](https://docs.microsoft.com/en-gb/windows/wsl/install-win10) (requires a 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 you will need to activate NVM by either following the instructions printed to the screen or opening a new terminal.
|
||||
|
||||
#### Install Node (and optionally Yarn)
|
||||
|
||||
Now that you have NVM installed, you can install node. The latest version can be installed using `nvm install default`. You can also install a specific version using `nvm install v12.16.1`. For the purposes of debugging it can be useful to have the same version of node installed as the main project uses, which you can then activate using `nvm use <version>`. You can determine what version the FreeSewing project uses by checking [freesewing/freesewing/.node-version](https://github.com/freesewing/freesewing/blob/develop/.node-version).
|
||||
|
||||
<Warning>
|
||||
|
|
@ -51,9 +43,7 @@ At the time this guide was written the latest version of node/npm has a bug in t
|
|||
Node 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 aproach to dependency resolution which can make builds take a long time. Yarn is an alternative package manager which makes builds faster, especially for monolithic projects like FreeSewing. If you'd like to install yarn run `npm install yarn -g` (optional).
|
||||
|
||||
#### Install and configure Git (recommended)
|
||||
|
||||
The create-freesewing-pattern script will attempt to create a git repository as part of the setup. It's not strictly required to have git installed in the WSL environment but you will get errors during the project setup process if it isn't installed or configured correctly. As such it's recommended to have git installed on the WSL environment even if you're going to be using a GUI client from the windows side.
|
||||
|
||||
```bash
|
||||
sudo apt install git
|
||||
git config --global user.email "<the email address you use for your git account>"
|
||||
|
|
@ -61,41 +51,39 @@ git config --global user.name "<your display name for your git account>"
|
|||
```
|
||||
|
||||
### Install VSCode (optional)
|
||||
|
||||
[Download and install VSCode](https://code.visualstudio.com/).
|
||||
|
||||
<Note>
|
||||
|
||||
FreeSewing uses .editorconfig files to enforce a consistent style for the project. VSCode relies on extensions to provide this functionality and due to a design shortcoming it does not respect certain editorconfig options which will break certain files in the freesewing project ([see vscode/65663 for details](https://github.com/microsoft/vscode/issues/65663)). If you use this editor please ensure that your settings.json file is configured to not trim trailing whitespace from markdown files. The following snippet can be added to your settings.json file to add an exemption for this file type:
|
||||
|
||||
"[markdown]": {
|
||||
"files.trimTrailingWhitespace": false
|
||||
},
|
||||
```
|
||||
"[markdown]": {
|
||||
"files.trimTrailingWhitespace": false
|
||||
},
|
||||
```
|
||||
|
||||
</Note>
|
||||
|
||||
#### Install VSCode Remote
|
||||
|
||||
In order to be able to use VSCode's IDE features (such as the built in terminal) and also make use of the node installation we set up in the previous steps you will need to install VSCode Remote so that VSCode can make use of the linux environment. [Follow the getting started guide for VSCode Remote](https://code.visualstudio.com/docs/remote/wsl) (If you've been following 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 the FreeSewing development environment (WSL)
|
||||
|
||||
If you've chosen to use VSCode as your IDE open VSCode, and inside VSCode open the folder you wish to contain the pattern (e.g. `documents/my-freesewing-patterns`). Ensure VSCode Remote is active then open a terminal (this will automatically set your working directory to the folder open in VSCode) and run `npx create-freesewing-pattern`. If you are using a different IDE or just wish to use a bare terminal then you will need to navigate to the folder and run the same command.
|
||||
|
||||
This script will prompt you for certain options. Only "Pattern name" is mandatory, the other prompts are optional and/or suggest sensible defaults. You can change all of these later. It's just to get you started. If you're not sure what to fill in you can stick with the defaults or leave them blank.
|
||||
|
||||
* **Language**: Use the arrow keys to chose the language of your choice
|
||||
* **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
* **description**: A description of your pattern. It's not mandatory.
|
||||
* **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick.
|
||||
* **department**: Use the arrow keys to pick a department like `menswear`, `womenswear` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
* **Author**: You can enter your name, or leave this blank for now.
|
||||
* **GitHub repository**: You can leave this blank for now.
|
||||
* **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
- **Language**: Use the arrow keys to chose the language of your choice
|
||||
- **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
- **description**: A description of your pattern. It's not mandatory.
|
||||
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick.
|
||||
- **department**: Use the arrow keys to pick a department like `menswear`, `womenswear` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
- **Author**: You can enter your name, or leave this blank for now.
|
||||
- **GitHub repository**: You can leave this blank for now.
|
||||
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
|
||||
### Start the development environment (WSL)
|
||||
|
||||
After this process completes you will be ready to run the development environment.
|
||||
After this process completes you will be ready to run the development environment.
|
||||
|
||||
Navigate to the `example` folder and run `npm start`/`yarn start` to launch the development environment.
|
||||
|
||||
|
|
@ -104,13 +92,10 @@ Your browser will not automatically open if you are running the freesewing examp
|
|||
</Note>
|
||||
|
||||
## Setting up a development environment in Windows.
|
||||
|
||||
### Install NVM
|
||||
|
||||
While node can be installed directly on Windows, we strongly recommend using a version manager such as [Node Version Manager for Windows](https://github.com/coreybutler/nvm-windows/releases/latest). That link will take you to the latest release which provides an installer you can download and run. Once nvm-windows is installed you will be able to continue with the rest of this process.
|
||||
|
||||
### Install node
|
||||
|
||||
Open a Powershell terminal or command prompt. Run `nvm ls available` to show versions that can be installed. Choose the appropriate version (you should use the same version as the freesewing project or latest LTS version) then run `nvm install 14.15.4` and `nvm use 14.15.4` (where `14.15.4` is the full version string of the version you wish to use) to activate the newly installed version. You will receive a prompt for elevated permissions and will need to accept it in order to activate the new version of node.
|
||||
|
||||
<Warning>
|
||||
|
|
@ -120,20 +105,18 @@ At the time this guide was written the latest version of node/npm has a bug in t
|
|||
Node 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 aproach to dependency resolution which can make builds take a long time. Yarn is an alternative package manager which makes builds faster, especially for monolithic projects like FreeSewing. If you'd like to install yarn run (`npm install yarn -g`) (optional).
|
||||
|
||||
### Setting up the FreeSewing development environment
|
||||
|
||||
Open a terminal, then navigate to the folder you wish to contain the pattern (e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx create-freesewing-pattern`.
|
||||
|
||||
This script will prompt you for certain options. Only "Pattern name" is mandatory, the other prompts are optional and/or suggest sensible defaults. You can change all of these later. It's just to get you started. If you're not sure what to fill in you can stick with the defaults or leave them blank.
|
||||
|
||||
* **Language**: Use the arrow keys to chose the language of your choice
|
||||
* **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
* **description**: A description of your pattern. It's not mandatory.
|
||||
* **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick.
|
||||
* **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
* **Author**: You can enter your name, or leave this blank for now.
|
||||
* **GitHub repository**: You can leave this blank for now.
|
||||
* **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
- **Language**: Use the arrow keys to chose the language of your choice
|
||||
- **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
|
||||
- **description**: A description of your pattern. It's not mandatory.
|
||||
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick.
|
||||
- **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
|
||||
- **Author**: You can enter your name, or leave this blank for now.
|
||||
- **GitHub repository**: You can leave this blank for now.
|
||||
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
|
||||
|
||||
### Start the development environment
|
||||
|
||||
After this process completes you will be ready to run the development environment. In the current terminal (or a new window if you prefer) you will need to build the package. Navigate to the folder you created during the previous step (whatever you provided for the "Pattern name" option) and then to the `example` folder inside this folder, then run `npm start` or `yarn start` depending on the build system you chose. This will build the pattern package which is used by the development instance, build the example application, and start a local web server instance so you can test your changes.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Adding measurements
|
||||
order: 130
|
||||
----------
|
||||
---
|
||||
|
||||
FreeSewing is all about *made-to-measure* sewing patterns;
|
||||
FreeSewing is all about *made-to-measure* sewing patterns;
|
||||
we are going to draft our pattern according to the measurements provided to us.
|
||||
|
||||
Which begs the question, which measurements?
|
||||
|
|
@ -36,7 +35,7 @@ This change will also get picked up by the development environment, and you'll n
|
|||
|
||||
|
||||
|
||||
Since it's just one measurement, let's simply enter a value by hand.
|
||||
Since it's just one measurement, let's simply enter a value by hand.
|
||||
For example `38` as 38cm is a realistic head circumference measurement for a baby.
|
||||
|
||||
Enter `38` in the box, and click on **Draft your pattern** in the top navigation bar to get back to your draft,
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Adding options
|
||||
order: 140
|
||||
----------
|
||||
---
|
||||
|
||||
You know what your bib should look like, and you have the *head* measurement
|
||||
to work with. But there's still a number of choices you have to make:
|
||||
|
||||
* How large should the neck opening be?
|
||||
* How wide should the bib be?
|
||||
* How long should the bib be?
|
||||
- How large should the neck opening be?
|
||||
- How wide should the bib be?
|
||||
- How long should the bib be?
|
||||
|
||||
You can make all of these choices for the user and set them in stone, so to speak.
|
||||
|
||||
|
|
@ -18,7 +17,7 @@ flexible and let the user decide. All you have to do is add options to your patt
|
|||
|
||||
## Add the neckRatio option
|
||||
|
||||
The first option we're going to add controls the ratio between the neck opening
|
||||
The first option we're going to add controls the ratio between the neck opening
|
||||
and the head circumference. Let's call it `neckRatio`.
|
||||
|
||||
Open the config file at `config/index.js` and add this to the options:
|
||||
|
|
@ -34,10 +33,10 @@ Open the config file at `config/index.js` and add this to the options:
|
|||
|
||||
Can you guess what it means?
|
||||
|
||||
* We've added a option of type percentage
|
||||
* Its minimum value is 70%
|
||||
* Its maximum value is 90%
|
||||
* Its default value is 80%
|
||||
- We've added a option of type percentage
|
||||
- Its minimum value is 70%
|
||||
- Its maximum value is 90%
|
||||
- Its default value is 80%
|
||||
|
||||
<Note>
|
||||
|
||||
|
|
@ -56,9 +55,9 @@ options: {
|
|||
}
|
||||
```
|
||||
|
||||
* You've added `widthRatio` and `lengthRatio` options
|
||||
* You've given all options sensible defaults
|
||||
* You've given all options sensible maximum and minimum boundaries
|
||||
- You've added `widthRatio` and `lengthRatio` options
|
||||
- You've given all options sensible defaults
|
||||
- You've given all options sensible maximum and minimum boundaries
|
||||
|
||||
<Note>
|
||||
|
||||
|
|
@ -77,7 +76,7 @@ optionGroups: {
|
|||
|
||||
<Note>
|
||||
|
||||
The `optionGroups` entry does not do anything for your pattern as such.
|
||||
The `optionGroups` entry does not do anything for your pattern as such.
|
||||
Instead it signals to the frontend that this is how options should be grouped together and presented to the user.
|
||||
|
||||
</Note>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Avoiding overlap
|
||||
order: 220
|
||||
----------
|
||||
---
|
||||
|
||||
While you've only drawn the end of one strap, it's pretty obvious they overlap.
|
||||
Which is a big no-no in sewing patterns, so you're going to have to address that.
|
||||
|
|
@ -51,3 +50,4 @@ points.snapLeft = points.top.shiftFractionTowards(points.edgeTop, 0.5)
|
|||
<Example pattern="tutorial" part="step8" caption="The right part looks a bit wonky now, but we'll get to that" />
|
||||
|
||||
Now let's mirror this on the other side, and replace our `neck` and `rect` paths with a new path.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Completing the neck opening
|
||||
order: 180
|
||||
----------
|
||||
---
|
||||
|
||||
## Hiding our quarter neck
|
||||
|
||||
|
|
@ -66,3 +65,4 @@ paths.neck = new Path()
|
|||
```
|
||||
|
||||
<Example pattern="tutorial" part="step4" caption="And now you have a complete neck opening" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Completing your pattern
|
||||
order: 260
|
||||
----------
|
||||
---
|
||||
|
||||
When we started out, we said a good part boilerplate looks like this:
|
||||
|
||||
|
|
@ -23,8 +22,8 @@ export default function(part) {
|
|||
}
|
||||
```
|
||||
|
||||
So far, we've kept to the *// Design pattern here* area, but now we're going to work on
|
||||
the area under *// Complete?*
|
||||
So far, we've kept to the *// Design pattern here* area, but now we're going to work on
|
||||
the area under *// Complete?*
|
||||
|
||||
<Note>
|
||||
|
||||
|
|
@ -100,8 +99,8 @@ snippets.logo = new Snippet("logo", points.logo)
|
|||
|
||||
<Note>
|
||||
|
||||
You can find all possible snippets in [our documentation](/reference/snippets/).
|
||||
|
||||
You can find all possible snippets in [our documentation](/reference/snippets/).
|
||||
|
||||
</Note>
|
||||
|
||||
## Seam allowance
|
||||
|
|
@ -121,7 +120,7 @@ So you can simply remove that condition.
|
|||
|
||||
However, for future refefence, `sa` is a variable that you can get from `part.shorthand()`
|
||||
just like `complete`. But instead of `true` or `false` it will hold the amount of seam allowance
|
||||
in mm.
|
||||
in mm.
|
||||
|
||||
Note that you can still do `if (sa)` because zero is *falsy*.
|
||||
|
||||
|
|
@ -145,12 +144,12 @@ as explained in [Adding text](/concepts/adding-text).
|
|||
|
||||
## Scalebox and title
|
||||
|
||||
Two more macros and we're done.
|
||||
Two more macros and we're done.
|
||||
|
||||
The `title` macro adds a title to our part.
|
||||
It's not that big a deal here since we only have one part in our pattern.
|
||||
But patterns typically have many different parts, some of them which might look rather similar.
|
||||
That's why you should number your parts and give them a name.
|
||||
That's why you should number your parts and give them a name.
|
||||
|
||||
The `title` macro can help you with that:
|
||||
|
||||
|
|
@ -176,3 +175,4 @@ And with that, our pattern is now *complete*:
|
|||
<Example pattern="tutorial" part="step11" caption="We used attributes to add color, dashes, text on a path and even opacity" />
|
||||
|
||||
We're not done yet though. There's one more thing the user can ask for: a *paperless* pattern.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Conclusion
|
||||
order: 280
|
||||
----------
|
||||
---
|
||||
|
||||
Congratulations, you have created your first pattern. And while it's arguably rather simple,
|
||||
Congratulations, you have created your first pattern. And while it's arguably rather simple,
|
||||
you have learned a bunch of things along the way. Let's list some of the things you've learned:
|
||||
|
||||
* You have learned how to [setup your development environment](/tutorials/pattern-design/create-freesewing-pattern) with `npx create-freesewing-pattern`
|
||||
* You learned how to [add parts](/tutorials/pattern-design/your-first-part), [measurements](/tutorials/pattern-design/adding-measurements), and [options](/tutorials/pattern-design/adding-options) to your pattern's configuration file
|
||||
* You learned what [a good boilerplate is to start with a new part](/tutorials/pattern-design/part-structure)
|
||||
* You've learned [how to add points and draw paths](/tutorials/pattern-design/constructing-the-neck-opening)
|
||||
* You learned how you can make changes in a loop to [adapt the neck opening](/tutorials/pattern-design/fitting-the-neck-opening) or [rotate the straps](/tutorials/pattern-design/avoiding-overlap) until they were just right
|
||||
* You learned about [macros and how to use them](/tutorials/pattern-design/creating-the-closure)
|
||||
* You learned different methods to manipulate [points](/reference/api/point/) and [paths](/reference/api/path/)
|
||||
* You learned about using [attributes](/reference/api/attributes/) to influence the appearance of points and paths
|
||||
* Your learned about what it means to draft [a complete pattern](/tutorials/pattern-design/completing-your-pattern)
|
||||
* Your learned about [snippets and how to add them](/tutorials/pattern-design/completing-your-pattern#adding-snippets)
|
||||
* You learned [how to offset a path](/tutorials/pattern-design/completing-your-pattern#seam-allowance) to create seam allowance, or in our case, mark the bias tape line
|
||||
* You learned how to create a [paperless pattern](/tutorials/pattern-design/paperless-bib) by adding dimensions
|
||||
- You have learned how to [setup your development environment](/tutorials/pattern-design/create-freesewing-pattern) with `npx create-freesewing-pattern`
|
||||
- You learned how to [add parts](/tutorials/pattern-design/your-first-part), [measurements](/tutorials/pattern-design/adding-measurements), and [options](/tutorials/pattern-design/adding-options) to your pattern's configuration file
|
||||
- You learned what [a good boilerplate is to start with a new part](/tutorials/pattern-design/part-structure)
|
||||
- You've learned [how to add points and draw paths](/tutorials/pattern-design/constructing-the-neck-opening)
|
||||
- You learned how you can make changes in a loop to [adapt the neck opening](/tutorials/pattern-design/fitting-the-neck-opening) or [rotate the straps](/tutorials/pattern-design/avoiding-overlap) until they were just right
|
||||
- You learned about [macros and how to use them](/tutorials/pattern-design/creating-the-closure)
|
||||
- You learned different methods to manipulate [points](/reference/api/point/) and [paths](/reference/api/path/)
|
||||
- You learned about using [attributes](/reference/api/attributes/) to influence the appearance of points and paths
|
||||
- Your learned about what it means to draft [a complete pattern](/tutorials/pattern-design/completing-your-pattern)
|
||||
- Your learned about [snippets and how to add them](/tutorials/pattern-design/completing-your-pattern#adding-snippets)
|
||||
- You learned [how to offset a path](/tutorials/pattern-design/completing-your-pattern#seam-allowance) to create seam allowance, or in our case, mark the bias tape line
|
||||
- You learned how to create a [paperless pattern](/tutorials/pattern-design/paperless-bib) by adding dimensions
|
||||
|
||||
You can find the complete code of the tutorial pattern [here on GitHub](https://github.com/freesewing/freesewing/blob/develop/packages/tutorial/src/bib.js).
|
||||
|
||||
## More reading material
|
||||
|
||||
* If you haven't done so already, read through [the pattern guide](/guides/patterns/) which provides a good overview of how patterns work under the hood
|
||||
* Bookmark [the FreeSewing API docs](/reference/api/), they are your reference every time you're not entirely certain how something works
|
||||
* Have a look at [the design guide](/guides/best-practices/) for best practices that will help you make the best possible patterns
|
||||
- If you haven't done so already, read through [the pattern guide](/guides/patterns/) which provides a good overview of how patterns work under the hood
|
||||
- Bookmark [the FreeSewing API docs](/reference/api/), they are your reference every time you're not entirely certain how something works
|
||||
- Have a look at [the design guide](/guides/best-practices/) for best practices that will help you make the best possible patterns
|
||||
|
||||
## What to do next
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Constructing the neck opening
|
||||
order: 160
|
||||
----------
|
||||
---
|
||||
|
||||
Your goal is to construct a slightly oval neck opening that has a circumference that is
|
||||
the `head` measurements multiplied by the `neckRatio` option.
|
||||
|
||||
That might involve some trial and error. But since the neck opening will be symetric
|
||||
both horizontal and vertical, you only need to construct one quadrant.
|
||||
That might involve some trial and error. But since the neck opening will be symetric
|
||||
both horizontal and vertical, you only need to construct one quadrant.
|
||||
|
||||
We'll be adding some points to our pattern to do just that. But we want to have access
|
||||
to our measurements and options to do so. For this, you first update the shorthand call
|
||||
to indicate you also want access to `measurements` and `options`:
|
||||
|
||||
|
||||
```js
|
||||
let {
|
||||
Point,
|
||||
|
|
@ -51,10 +51,10 @@ You've added some points to your part, and drawn your first path. Let's look at
|
|||
points.right = new Point(measurements.head / 10, 0)
|
||||
```
|
||||
|
||||
* We're adding a point named `right` to `points` which holds our part's points
|
||||
* We're using the Point constructor, which takes two arguments: The point's X and Y values
|
||||
* The X value is `measurements.head / 10`
|
||||
* The Y value is `0`
|
||||
- We're adding a point named `right` to `points` which holds our part's points
|
||||
- We're using the Point constructor, which takes two arguments: The point's X and Y values
|
||||
- The X value is `measurements.head / 10`
|
||||
- The Y value is `0`
|
||||
|
||||
The `bottom` part is very similar, so let's skip to the next line:
|
||||
|
||||
|
|
@ -63,19 +63,19 @@ points.rightCp1 = points.right
|
|||
.shift(90, points.bottom.dy(points.right)/2)
|
||||
```
|
||||
|
||||
* We're adding a point named `rightCp1`, which will become the *control point* of the right part
|
||||
* Instead of using the Point constructor, we're calling the `Point.shift()` method on an existing point
|
||||
* It takes two arguments: The angle to shift towards, and the distance
|
||||
* You can see that we're shifting 90 degrees (that means up) but the distance uses another method
|
||||
* The `Point.dy()` method returns the delta along the Y axis between the point you call it on and the point you pass it
|
||||
* We shift half of the Y-delta
|
||||
- We're adding a point named `rightCp1`, which will become the *control point* of the right part
|
||||
- Instead of using the Point constructor, we're calling the `Point.shift()` method on an existing point
|
||||
- It takes two arguments: The angle to shift towards, and the distance
|
||||
- You can see that we're shifting 90 degrees (that means up) but the distance uses another method
|
||||
- The `Point.dy()` method returns the delta along the Y axis between the point you call it on and the point you pass it
|
||||
- We shift half of the Y-delta
|
||||
|
||||
The next point is very similar again, except that this time we're shifting to the right (0 degrees) for half of
|
||||
The next point is very similar again, except that this time we're shifting to the right (0 degrees) for half of
|
||||
the X-delta between points `bottom` and `right`.
|
||||
|
||||
<Tip>
|
||||
|
||||
Points come with a bunch of these methods.
|
||||
Points come with a bunch of these methods.
|
||||
You can find them all in [the Point API docs](/reference/api/point/).
|
||||
|
||||
</Tip>
|
||||
|
|
@ -88,10 +88,10 @@ paths.quarterNeck = new Path()
|
|||
.curve(points.rightCp1, points.bottomCp2, points.bottom)
|
||||
```
|
||||
|
||||
* We're adding a path named `quarterNeck` to `paths` which holds our part's paths
|
||||
* We're using the Path constructor, which takes no arguments
|
||||
* We're following up with a `Path.move()` call that takes one Point as argument
|
||||
* Then, there's a `Path.curve()` call that takes 3 points as arguments
|
||||
- We're adding a path named `quarterNeck` to `paths` which holds our part's paths
|
||||
- We're using the Path constructor, which takes no arguments
|
||||
- We're following up with a `Path.move()` call that takes one Point as argument
|
||||
- Then, there's a `Path.curve()` call that takes 3 points as arguments
|
||||
|
||||
If you've read through the high-level [Pattern guide](/guides/patterns/) you will have learned that paths
|
||||
always start with a `move()` operation. In this case, we moved to our `right` points.
|
||||
|
|
@ -105,3 +105,4 @@ When all is said and done, we now have a quarter of our neck opening:
|
|||
The only problem is, we have no guarantee whatsoever that this opening is the correct size.
|
||||
|
||||
Rather than hope it is the correct size, you'll make sure it is next.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Setting up the development environment
|
||||
order: 100
|
||||
----------
|
||||
---
|
||||
|
||||
<Note>
|
||||
|
||||
###### Already did the Getting started tutorial?
|
||||
|
||||
If you already set up the FreeSewing development environment and created a pattern, you can use that pattern and skip these steps. You can move on to [Your first part](/tutorials/pattern-design/your-first-part/).
|
||||
|
||||
|
||||
</Note>
|
||||
|
||||
Open a terminal and enter the following command:
|
||||
|
|
@ -20,20 +19,20 @@ npx create-freesewing-pattern
|
|||
|
||||
This will load a few dependencies, and then ask you the following questions:
|
||||
|
||||
* **Language**: Use the arrow keys to select the language of your choice
|
||||
* **Pattern name**: Enter `tutorial`
|
||||
* **description**: Enter `The FreeSewing tutorial`
|
||||
* **Pattern type**: Use the arrow key to select `Pattern`
|
||||
* **Department**: Use the arrow keys to select `Accessories`
|
||||
* **Author**: Enter your GitHub username
|
||||
* **GitHub repository**: This will be prefilled for you, so just hit Enter
|
||||
* **Package manager**: Use the arrow to choose. Pick `npm` if you're not sure.
|
||||
- **Language**: Use the arrow keys to select the language of your choice
|
||||
- **Pattern name**: Enter `tutorial`
|
||||
- **description**: Enter `The FreeSewing tutorial`
|
||||
- **Pattern type**: Use the arrow key to select `Pattern`
|
||||
- **Department**: Use the arrow keys to select `Accessories`
|
||||
- **Author**: Enter your GitHub username
|
||||
- **GitHub repository**: This will be prefilled for you, so just hit Enter
|
||||
- **Package manager**: Use the arrow to choose. Pick `npm` if you're not sure.
|
||||
|
||||
After you've answered these questions, the default template will be copied, after which all dependencies will be installed.
|
||||
|
||||
<Note>
|
||||
|
||||
This will take a few minutes because we're loading some software for your development environment.
|
||||
This will take a few minutes because we're loading some software for your development environment.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Creating the closure
|
||||
order: 210
|
||||
----------
|
||||
---
|
||||
|
||||
Things are starting to look good, but we can't fit the bib over the baby's head like this.
|
||||
So we must create a closure. We'll let the straps overlap at the end, and put in a snap.
|
||||
|
|
@ -66,3 +65,6 @@ Like our neck opening, we've only drawn half since we can simply copy the points
|
|||
|
||||
However, doing so would make both straps overlap. Which doesn't work for a pattern as it would make it
|
||||
impossible to cut it out of a single piece of fabric. So let's deal with the overlap next.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Drawing the bib outline
|
||||
order: 190
|
||||
----------
|
||||
---
|
||||
|
||||
With our neck opening in place, let's draw the basic outline of our bib:
|
||||
|
||||
|
|
@ -65,3 +64,4 @@ and the sides are equidistant from the neck neck opening.
|
|||
You didn't have to do that. But it looks nicely balanced this way:
|
||||
|
||||
<Example pattern="tutorial" part="step5" caption="Note how the neck opening is the same distance from the left, right, and top edge" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Drawing the straps
|
||||
order: 230
|
||||
----------
|
||||
---
|
||||
|
||||
All we have to do know is flip a bunch of points on the other side,
|
||||
and create one single path that follows our bib outline.
|
||||
|
|
@ -108,8 +107,8 @@ macro("round", {
|
|||
|
||||
<Note>
|
||||
|
||||
You can also remove the `render` line completely. More on this in the next section.
|
||||
|
||||
You can also remove the `render` line completely. More on this in the next section.
|
||||
|
||||
</Note>
|
||||
|
||||
With that out of the way, our bib now looks like this:
|
||||
|
|
@ -119,9 +118,10 @@ With that out of the way, our bib now looks like this:
|
|||
<Note>
|
||||
|
||||
We used the `part.attr()` method to style our path? But because the `fabric` class is drawn in black,
|
||||
it doesn't look much different. We'll use some other classes later that will make its effect more clear.
|
||||
it doesn't look much different. We'll use some other classes later that will make its effect more clear.
|
||||
|
||||
</Note>
|
||||
|
||||
It's looking pretty good. But those sharp corners at the bottom don't exactly say *baby* do they?
|
||||
Let's fix that.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Pattern design tutorial
|
||||
order: 50
|
||||
icons:
|
||||
|
||||
* javascript
|
||||
* pattern
|
||||
for: developers
|
||||
about: |
|
||||
You'll learn how to create a FreeSewing pattern.
|
||||
We will take you start to finish, from setting up the development environment
|
||||
up to a completed pattern.
|
||||
goals:
|
||||
* Setting up the development environment
|
||||
* Creating a pattern part
|
||||
* Using the user's measurements
|
||||
* Using pattern options
|
||||
* Using the shorthand method
|
||||
* Creating points
|
||||
* Creating paths
|
||||
* Using macros and snippets
|
||||
* Testing your pattern
|
||||
* Adding seam allowance
|
||||
* Adding dimentions for a paperless pattern
|
||||
|
||||
***
|
||||
icons:
|
||||
- javascript
|
||||
- pattern
|
||||
for: developers
|
||||
about: |
|
||||
You'll learn how to create a FreeSewing pattern.
|
||||
We will take you start to finish, from setting up the development environment
|
||||
up to a completed pattern.
|
||||
goals:
|
||||
- Setting up the development environment
|
||||
- Creating a pattern part
|
||||
- Using the user's measurements
|
||||
- Using pattern options
|
||||
- Using the shorthand method
|
||||
- Creating points
|
||||
- Creating paths
|
||||
- Using macros and snippets
|
||||
- Testing your pattern
|
||||
- Adding seam allowance
|
||||
- Adding dimentions for a paperless pattern
|
||||
---
|
||||
|
||||
Welcome to the FreeSewing tutorial, where you'll learn how to create a made-to-measure
|
||||
sewing pattern, start to finish.
|
||||
|
|
@ -36,14 +33,14 @@ At the end of this tutorial, you will have created this pattern:
|
|||
|
||||
<Example pattern="tutorial" part="bib" caption="Your end result" />
|
||||
|
||||
Before we can get started, let's make sure you have the required software
|
||||
Before we can get started, let's make sure you have the required software
|
||||
installed on your computer:
|
||||
|
||||
## Prerequisites
|
||||
|
||||
FreeSewing is a JavaScript library that runs on [Node.js](https://nodejs.org/).
|
||||
|
||||
If you don't have Node.js on your system, follow the link above and
|
||||
If you don't have Node.js on your system, follow the link above and
|
||||
install it on your system.
|
||||
|
||||
When you're done, you can test whether it works by running:
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Fitting the neck opening
|
||||
order: 170
|
||||
----------
|
||||
---
|
||||
|
||||
Here's how we'll make sure the neck opening is *just right*:
|
||||
|
||||
|
|
@ -29,17 +28,17 @@ do {
|
|||
|
||||
We've added a few new variables:
|
||||
|
||||
* `tweak`: A *tweak factor* that we'll use to increase or decrease the neck opening by making it more or less than 1
|
||||
* `target`: How long our (quarter) neck opening should be
|
||||
* `delta`: How far we're off. Positive numbers mean it's too long, negative means too short
|
||||
- `tweak`: A *tweak factor* that we'll use to increase or decrease the neck opening by making it more or less than 1
|
||||
- `target`: How long our (quarter) neck opening should be
|
||||
- `delta`: How far we're off. Positive numbers mean it's too long, negative means too short
|
||||
|
||||
Now that we know what `target` is, we construct our path as we did before.
|
||||
But this time around, we multiply our point coordinates with our `tweak` variable (1 at the start).
|
||||
|
||||
Then, we compare our `target` to the result of `paths.neck.length()` which — you guessed it — returns the
|
||||
Then, we compare our `target` to the result of `paths.neck.length()` which — you guessed it — returns the
|
||||
length of our neck path.
|
||||
|
||||
If the delta is positive, our path is too long and we reduce the tweak factor.\
|
||||
If the delta is positive, our path is too long and we reduce the tweak factor.
|
||||
If the delta is negative, our path is too short and we increase the tweak factor.
|
||||
|
||||
We keep on doing this until `Math.abs(delta)` is less than 1. Meaning that we are within 1mm of our target value.
|
||||
|
|
@ -47,3 +46,4 @@ We keep on doing this until `Math.abs(delta)` is less than 1. Meaning that we ar
|
|||
<Example pattern="tutorial" part="step2" caption="It might look the same as before, but now it's just right" />
|
||||
|
||||
Now that we're happy with the length of our quarter neck opening, let's construct the entire neck opening.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Making your pattern paperless
|
||||
order: 270
|
||||
-----------
|
||||
---
|
||||
|
||||
Users can request paperless patterns by setting the `paperless` setting to `true`.
|
||||
|
||||
|
|
@ -27,7 +26,7 @@ let {
|
|||
```
|
||||
|
||||
The idea behind *paperless patterns* is that users don't need to print your
|
||||
pattern in order to use it.
|
||||
pattern in order to use it.
|
||||
Instead, we include dimensions on the pattern that allows them to transfer
|
||||
the pattern directly onto fabric, or onto an intermediate medium such as tracing paper.
|
||||
|
||||
|
|
@ -37,10 +36,10 @@ markings, depending on the units requested by the user.
|
|||
While the grid gets added automatically, the dimensions you have to add yourself.
|
||||
Thankfully, there's macros that can help you with that, specifically:
|
||||
|
||||
* The `hd` macro adds a horizontal dimension
|
||||
* The `vd` macro adds a vertical dimension
|
||||
* The `ld` macro adds a linear dimension
|
||||
* The `pd` macro adds a path dimension that follows a given path
|
||||
- The `hd` macro adds a horizontal dimension
|
||||
- The `vd` macro adds a vertical dimension
|
||||
- The `ld` macro adds a linear dimension
|
||||
- The `pd` macro adds a path dimension that follows a given path
|
||||
|
||||
<Note> The documentation, as always, holds [all the information about the macros](/reference/macros/). </Note>
|
||||
|
||||
|
|
@ -84,12 +83,12 @@ if (paperless) {
|
|||
|
||||
There's a lot going on, but it's mostly repetition. To see what that did to your pattern, you have to enable *paperless mode* in your developing environment; you can find the option under *Pattern options* on the right. Let's look at the end result, and discuss:
|
||||
|
||||
\<Example pattern="tutorial" part="bib" caption="Your paperless bib" settings={{paperless: true}} />
|
||||
<Example pattern="tutorial" part="bib" caption="Your paperless bib" settings={{paperless: true}} />
|
||||
|
||||
We used the `hd` macro to add two horizontal dimensions:
|
||||
|
||||
* One at the bottom for the width of our bib
|
||||
* One for the width of the neck opening
|
||||
- One at the bottom for the width of our bib
|
||||
- One for the width of the neck opening
|
||||
|
||||
The `hd` macro takes a `from` and `to` point as well as a `y` value that says at what Y-value to draw the dimension.
|
||||
|
||||
|
|
@ -103,3 +102,4 @@ While most dimensions are horizontal or vertical, sometimes you want a straight
|
|||
The `ld` macro takes a `d` argument (short for delta) that indicates how far the dimension should be offset from the line from the `from` to the `to` point, if at all.
|
||||
|
||||
Making your pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Structure of a part
|
||||
order: 150
|
||||
----------
|
||||
---
|
||||
|
||||
Let's get rid of the example box first.
|
||||
Open `src/bib.js` and make sure it looks like this:
|
||||
|
|
@ -66,25 +65,25 @@ and you use JavaScript's *object destructuring* to only get what you need.
|
|||
|
||||
The example above makes the following variables available:
|
||||
|
||||
* `Point`: The Point constructor
|
||||
* `points`: A reference to the part's points
|
||||
* `Path`: The Path constructor
|
||||
* `paths`: A reference to the part's paths
|
||||
- `Point`: The Point constructor
|
||||
- `points`: A reference to the part's points
|
||||
- `Path`: The Path constructor
|
||||
- `paths`: A reference to the part's paths
|
||||
|
||||
These will make it possible for you to draw points and paths easily.
|
||||
|
||||
The following three variables are also needed to create a full-fledged FreeSewing pattern; their function and usage will
|
||||
be covered in detail [later on in this tutorial](/tutorials/pattern-design/completing-your-pattern/):
|
||||
|
||||
* `complete`: create a *complete* pattern (or not)
|
||||
* `sa`: include *seam allowance* (or not)
|
||||
* `paperless`: allow the pattern to be *paperless*
|
||||
- `complete`: create a *complete* pattern (or not)
|
||||
- `sa`: include *seam allowance* (or not)
|
||||
- `paperless`: allow the pattern to be *paperless*
|
||||
|
||||
For now, we only need these so that the pattern skeleton compiles properly.
|
||||
|
||||
<Note>
|
||||
|
||||
This will all become clear, but if you're curious, the API docs have all the details
|
||||
This will all become clear, but if you're curious, the API docs have all the details
|
||||
on [the Part.shorthand() method](/reference/api/part/#shorthand).
|
||||
|
||||
</Note>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Rounding the corners
|
||||
order: 240
|
||||
----------
|
||||
---
|
||||
|
||||
We already know how to round corners, let the `round` macro do it:
|
||||
|
||||
|
||||
```js
|
||||
macro("round", {
|
||||
from: points.topLeft,
|
||||
|
|
@ -30,8 +30,8 @@ you'll notice that we used this line in the beginning:
|
|||
render: true,
|
||||
```
|
||||
|
||||
This instructs the `round` macro create a path that draws the rounded corner.
|
||||
Whereas by default, it merely constructs the points required to round the corner.
|
||||
This instructs the `round` macro create a path that draws the rounded corner.
|
||||
Whereas by default, it merely constructs the points required to round the corner.
|
||||
|
||||
Typically, your rounded corner will be part of a larger path and so you don't want the macro
|
||||
to draw it. That's why the `round` macro's `render` property defaults to `false`.
|
||||
|
|
@ -40,9 +40,9 @@ We've left it out here, and you should also remove it from your earlier use of t
|
|||
We merely set `render` to `true` and then `false` at that time so you could see what the macro was doing.
|
||||
|
||||
<Note>
|
||||
|
||||
There is no need to explicitly specify a default value. While writing `render: false,` also works, it clutters up your code a bit.
|
||||
|
||||
|
||||
There is no need to explicitly specify a default value. While writing `render: false,` also works, it clutters up your code a bit.
|
||||
|
||||
</Note>
|
||||
|
||||
With our corners rounded, we should update our path.
|
||||
|
|
@ -73,3 +73,6 @@ and keep the rest of the path as it was.
|
|||
The shape our bib is now completed:
|
||||
|
||||
<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Shaping the straps
|
||||
order: 200
|
||||
----------
|
||||
---
|
||||
|
||||
Our straps should follow the neck opening, which isn't that hard to do.
|
||||
We just need to keep the control points of our curves at similar proportions.
|
||||
|
|
@ -46,3 +45,4 @@ paths.rect = new Path()
|
|||
All of a sudden, things are starting to look like a bib:
|
||||
|
||||
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Testing your pattern
|
||||
order: 250
|
||||
----------
|
||||
---
|
||||
|
||||
With the basic outline of your pattern ready, now would be a good time
|
||||
to test it to see how well it adapts to different measurements,
|
||||
With the basic outline of your 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.
|
||||
|
||||
<Tip>
|
||||
|
|
@ -19,12 +18,12 @@ for different measurements and options to see how well it adapts.
|
|||
</Tip>
|
||||
|
||||
If testing your pattern sounds like a lot of work, you're in luck. FreeSewing can do it
|
||||
for you. Click the **Test your pattern** button in the top navigation bar of your
|
||||
for you. Click the **Test your pattern** button in the top navigation bar of your
|
||||
development environment, and you'll see a number of choices on the right:
|
||||
|
||||
* Test pattern options
|
||||
* Test measurements
|
||||
* Test models
|
||||
- Test pattern options
|
||||
- Test measurements
|
||||
- Test models
|
||||
|
||||
The [API docs on sampling](/reference/api/pattern/#sample) have all the details on how this works, but
|
||||
for now we'll just look at the end result of each of these.
|
||||
|
|
@ -40,39 +39,39 @@ Click on any of the options we've added to our pattern, and your bib will be dra
|
|||
|
||||
The `lengthRatio` option controls the length of our bib. Testing it confirms that it only influences the length:
|
||||
|
||||
\<Example
|
||||
caption="Your bib with the lengthRatio option sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "option",
|
||||
option: "lengthRatio"
|
||||
}
|
||||
}}
|
||||
<Example
|
||||
caption="Your bib with the lengthRatio option sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "option",
|
||||
option: "lengthRatio"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
### neckRatio
|
||||
|
||||
The `neckRatio` option will determine the size of the neck opening.
|
||||
For a the same `head` measurement, varying this option should result in bibs with increasingly larger
|
||||
neck opening.
|
||||
neck opening.
|
||||
|
||||
Testing it confirms this. We can also see that as the neck opening gets smaller, we will rotate the straps
|
||||
further out of the way to avoid overlap:
|
||||
|
||||
\<Example
|
||||
caption="Your bib with the neckRatio option sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "option",
|
||||
option: "neckRatio"
|
||||
}
|
||||
}}
|
||||
<Example
|
||||
caption="Your bib with the neckRatio option sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "option",
|
||||
option: "neckRatio"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
### widthRatio
|
||||
|
|
@ -81,11 +80,11 @@ The `widthRatio` option will determine the width of our bib.
|
|||
For a the same `head` measurement, varying this option should result in increasingly wider bibs.
|
||||
|
||||
If we test it, we can see that it works as intended. But there's one thing that perhaps requires your attention.
|
||||
Making the bib wider shortens the length from the bottom of the neck opening to the bottom of the bib.
|
||||
Making the bib wider shortens the length from the bottom of the neck opening to the bottom of the bib.
|
||||
Thereby making the bib shorter when it's worn.
|
||||
|
||||
Even if the *total length* of the bib stays the same, the *useable length* shortens when the bib is made wider.
|
||||
Users will not expect this, so it's something that we should fix in our pattern.
|
||||
Users will not expect this, so it's something that we should fix in our pattern.
|
||||
|
||||
<Note>
|
||||
|
||||
|
|
@ -94,17 +93,17 @@ covered in this tutorial. It is left *as an exercise to the reader*.
|
|||
|
||||
</Note>
|
||||
|
||||
\<Example
|
||||
caption="Your bib with the widthRatio option sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "option",
|
||||
option: "widthRatio"
|
||||
}
|
||||
}}
|
||||
<Example
|
||||
caption="Your bib with the widthRatio option sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "option",
|
||||
option: "widthRatio"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
## Testing measurements
|
||||
|
|
@ -114,17 +113,17 @@ This gives you the option to determine how any given measurement is influencing
|
|||
|
||||
For our bib, we only use one measurement, so it influences the entire pattern:
|
||||
|
||||
\<Example
|
||||
caption="Your bib with the head circumference measurement sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "measurement",
|
||||
measurement: "head"
|
||||
}
|
||||
}}
|
||||
<Example
|
||||
caption="Your bib with the head circumference measurement sampled"
|
||||
sample
|
||||
part="bib"
|
||||
pattern="tutorial"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "measurement",
|
||||
measurement: "head"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
## Testing models
|
||||
|
|
@ -139,27 +138,27 @@ set of measurements.
|
|||
But most patterns use multiple measurements, and you'll find this test gives you insight into how your
|
||||
pattern will adapt to differently sized bodies.
|
||||
|
||||
\<Example
|
||||
sample
|
||||
caption="Your bib sampled for a range of baby sizes"
|
||||
pattern="tutorial"
|
||||
part="bib"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "models",
|
||||
models: {
|
||||
baby1: { head: 340 },
|
||||
baby2: { head: 350 },
|
||||
baby3: { head: 360 },
|
||||
baby4: { head: 370 },
|
||||
baby5: { head: 380 },
|
||||
baby6: { head: 390 },
|
||||
baby7: { head: 400 },
|
||||
baby8: { head: 410 },
|
||||
baby9: { head: 420 }
|
||||
}
|
||||
}
|
||||
}}
|
||||
<Example
|
||||
sample
|
||||
caption="Your bib sampled for a range of baby sizes"
|
||||
pattern="tutorial"
|
||||
part="bib"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "models",
|
||||
models: {
|
||||
baby1: { head: 340 },
|
||||
baby2: { head: 350 },
|
||||
baby3: { head: 360 },
|
||||
baby4: { head: 370 },
|
||||
baby5: { head: 380 },
|
||||
baby6: { head: 390 },
|
||||
baby7: { head: 400 },
|
||||
baby8: { head: 410 },
|
||||
baby9: { head: 420 }
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
## The antperson test
|
||||
|
|
@ -168,30 +167,30 @@ A special case of model testing is the so-called *antperson test*.
|
|||
It drafts your 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,
|
||||
It is named after [the cartoon 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 your pattern where you made assumptions
|
||||
that will not properly scale.
|
||||
Many drafting books will tell you to *add 3cm there* or *measure 2 inch to the right*. Those instructions
|
||||
don't scale, and you should avoid them.
|
||||
don't scale, and you 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.
|
||||
|
||||
\<Example
|
||||
sample
|
||||
caption="Congratulations, your bib passes the antperson test"
|
||||
pattern="tutorial"
|
||||
part="bib"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "models",
|
||||
models: {
|
||||
ant: { head: 39 },
|
||||
man: { head: 390 },
|
||||
}
|
||||
}
|
||||
}}
|
||||
<Example
|
||||
sample
|
||||
caption="Congratulations, your bib passes the antperson test"
|
||||
pattern="tutorial"
|
||||
part="bib"
|
||||
settings={{
|
||||
sample: {
|
||||
type: "models",
|
||||
models: {
|
||||
ant: { head: 39 },
|
||||
man: { head: 390 },
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
When you're happy with how your pattern passes these tests, it's time to complete it.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
***
|
||||
|
||||
---
|
||||
title: Your first part
|
||||
order: 120
|
||||
----------
|
||||
---
|
||||
|
||||
Much like garments themselves, patterns are made up of *parts*.
|
||||
Much like garments themselves, patterns are made up of *parts*.
|
||||
|
||||
Most patterns will have multiple parts. A sleeve, a back part, the collar, and so on.
|
||||
Our pattern is very simple, and only has one part: the bib.
|
||||
|
|
@ -25,15 +24,15 @@ Update the **parts** array with `bib`, rather than `box`:
|
|||
```js
|
||||
parts: ["bib"],
|
||||
```
|
||||
|
||||
<Note>
|
||||
|
||||
##### Don't worry about the big red error
|
||||
|
||||
This will (temporarily) cause en error to appear in your development environment, because the rest of the code is still expecting to find a part named `box`, but we will fix this in the next steps.
|
||||
|
||||
##### Don't worry about the big red error
|
||||
|
||||
This will (temporarily) cause en error to appear in your development environment, because the rest of the code is still expecting to find a part named `box`, but we will fix this in the next steps.
|
||||
|
||||
</Note>
|
||||
|
||||
|
||||
When that's done, rename the `src/box.js` file into `src/bib.js`.
|
||||
|
||||
Then, in the `src/index.js` file, change the import accordingly:
|
||||
|
|
@ -68,7 +67,7 @@ In our case, we have a part named `bib` so we're using `draftBib()` as the metho
|
|||
|
||||
</Tip>
|
||||
|
||||
Congratulations, your pattern now has a `bib` part, rather than a `box` part.
|
||||
Congratulations, your pattern now has a `bib` part, rather than a `box` part.
|
||||
It still looks the same though:
|
||||
|
||||
<Example pattern="tutorial" part="step1" caption="Our bib part, which is the renamed box part" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue