1
0
Fork 0

wip(markdown): Work on tutorial

This commit is contained in:
Joost De Cock 2022-10-04 23:36:08 +02:00
parent 8152d65947
commit 6f0b1a6ce3
3 changed files with 34 additions and 36 deletions

View file

@ -1,54 +1,40 @@
--- ---
title: Pattern design tutorial 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
--- ---
Welcome to the FreeSewing tutorial, where you'll learn how to create a made-to-measure Welcome to the FreeSewing pattern design tutorial, where you'll learn how to
sewing pattern, start to finish. design a made-to-measure sewing pattern, start to finish.
You will be designing a pattern for a baby bib. It's a very simple pattern, but that's the point. You will be designing a pattern for a baby bib. It's a very simple pattern, but
Your focus today is on learning FreeSewing and how to translate your designs into code. that's the point. Your focus today is on learning FreeSewing and how to
translate your designs into code.
At the end of this tutorial, you will have created this pattern: At the end of this tutorial, you will have created this pattern:
<Example pattern="tutorial" part="bib">Your end result</Example> <Examples part="tutorial.step11">Your end result</Examples>
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: installed on your computer:
## Prerequisites ## Prerequisites
FreeSewing is a JavaScript library that runs on [Node.js](https://nodejs.org/). FreeSewing is a JavaScript library that can run in the browser, on
[Node.js](https://nodejs.org/), or a variety of other runtimes such as Deno,
AWS Lambda, and so on.
If you don't have Node.js on your system, follow the link above and For development, we'll use NodeJS. If you don't have Node.js on your system,
install it on your system. follow the link above and install it on your system.
<Tip compact>You need NodeJS 16 or higher to use FreeSewing</Tip>
When you're done, you can test whether it works by running: When you're done, you can test whether it works by running:
```bash ```sh
node -v node -v
``` ```
If you get the node version number, you're all set. If you get the node version number, you're all set.
You can find the complete code of the tutorial pattern for the final result to help make sure you're following the steps correctly [here on GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.js). You can find the complete code of the tutorial pattern for the final result to
help make sure you're following the steps correctly [here on
GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.mjs).

View file

@ -5,7 +5,7 @@ order: 100
Open a terminal and enter the following command: Open a terminal and enter the following command:
```bash ```sh
npx @freesewing/new-design npx @freesewing/new-design
``` ```
@ -25,14 +25,14 @@ This will take a few minutes because we're loading some software for your develo
When it's ready, enter the `bib` directory that was just created and run `npm run dev`: When it's ready, enter the `bib` directory that was just created and run `npm run dev`:
```bash ```sh
cd bib cd bib
npm run dev npm run dev
``` ```
Or if you chose to use Yarn as package manager: Or if you chose to use Yarn as package manager:
```bash ```sh
cd bib cd bib
yarn dev yarn dev
``` ```
@ -47,7 +47,7 @@ If all goes well, you should see this landing page:
###### Need help? ###### Need help?
If you run into any issues, join [our chatroom](https://discord.freesewing.org/) and If you run into any issues, [join our **#development-help** chat room on on
we'll figure it out together. Discord](https://discord.freesewing.org/) and we'll figure it out together.
</Note> </Note>

View file

@ -0,0 +1,12 @@
---
title: Files and folder structure
order: 110
---
With our development setup, let's take a moment to see what sort of files and
folders have been created for us, what they all mean, and where to find what.
You will find the following files and folders inside the newly created folder
that holds your development environment:
<Fixme compact>Update this for v3</Fixme>