Merge branch 'develop' into cdocs
This commit is contained in:
joostdecock
commit
b914b6299f
89 changed files with 1571 additions and 737 deletions
|
|
@ -1,28 +1,22 @@
|
|||
---
|
||||
title: Setting up the development environment
|
||||
title: Setting up the FreeSewing development environment
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
FreeSewing provides a development environment that visualizes your design for
|
||||
you. This tutorial is for the stand-alone development environment, not the
|
||||
monorepo development environment (which you may have set up if you followed a
|
||||
FreeSewing provides the studio, a development environment that visualizes your design for
|
||||
you. This tutorial is for the stand-alone studio, not the
|
||||
repository studio (which you may have set up if you followed a
|
||||
getting started tutorial).
|
||||
|
||||
To set it up, I will open a terminal and enter the following command:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design
|
||||
npx @freesewing/studio
|
||||
```
|
||||
|
||||
It will ask if it is ok to install the development environment in a new folder
|
||||
named `freesewing`. You can accept the default, or pick a different folder name
|
||||
if you prefer.
|
||||
|
||||
It will also ask what package manager you would like to use.
|
||||
Here too the default (`npm`) is fine., unless you are certain you have **yarn** installed.
|
||||
|
||||
After answering these questions, files will be downloaded, dependencies installed,
|
||||
and it will also initialize a git repository for you (if you have git on your system).
|
||||
After you enter the folder name to create, it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
||||
:::note
|
||||
|
||||
|
|
@ -31,29 +25,58 @@ of dependencies that need to be downloaded.
|
|||
|
||||
:::
|
||||
|
||||
When it's ready, you can enter the `freesewing` directory that was just created and run `npm run dev`:
|
||||
You will have a new folder that contains the stand-alone studio development environment.
|
||||
(Within this new folder, the `design` subfolder holds your design's configuration files and source code.
|
||||
You can ignore all other subfolders and files; they are part of the development environment.)
|
||||
|
||||
```sh
|
||||
cd freesewing
|
||||
npm run dev
|
||||
### Creating a new design
|
||||
|
||||
If you would like to create a new design, enter the folder that was just
|
||||
created and run the following command:
|
||||
|
||||
```bash
|
||||
npm run add
|
||||
```
|
||||
|
||||
Or if you want to use yarn as package manager:
|
||||
After you've answered [some questions](#questions), it create a new
|
||||
sub-folder for your design in the `designs` folder.
|
||||
|
||||
```sh
|
||||
cd freesewing
|
||||
yarn dev
|
||||
:::note
|
||||
|
||||
### Questions
|
||||
|
||||
#### What design name to use
|
||||
|
||||
Please stick to a single word name using \[a-z] to avoid problems.
|
||||
|
||||
#### What template to use
|
||||
|
||||
Use `From scratch` unless you want to start from our of our blocks:
|
||||
|
||||
- Use `Extend Brian` to start from [Brian](https://freesewing.eu/designs/brian)
|
||||
- Use `Extend Bent` to start from [Bent](https://freesewing.eu/designs/bent)
|
||||
- Use `Extend Bella` to start from [Bella](https://freesewing.eu/designs/bella)
|
||||
- Use `Extend Breanna` to start from [Breanna](https://freesewing.eu/designs/breanna)
|
||||
- Use `Extend Titan` to start from [Titan](https://freesewing.eu/designs/titan)
|
||||
|
||||
:::
|
||||
|
||||
### Starting the development environment
|
||||
|
||||
To start the development environment, enter the folder containing the
|
||||
stand-alone studio and run `npm run start`.
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
Now open a browser and go to http://localhost:8000
|
||||
|
||||
If all goes well, we'll should see this landing page:
|
||||
|
||||
|
||||
Then open your browser and go to http://localhost:3000
|
||||
|
||||
:::tip
|
||||
|
||||
##### More detailed setup tutorials are available
|
||||
The development environment will watch for any changes you make to
|
||||
the pattern's source code or configuration.
|
||||
When you do, the pattern will update automatically in your browser.
|
||||
:::
|
||||
|
||||
This pattern design tutorial contains only an abbreviated overview
|
||||
of the setup process.
|
||||
|
|
@ -69,7 +92,7 @@ For more detailed instructions, please refer to one of our setup tutorials:
|
|||
|
||||
##### Need help?
|
||||
|
||||
If you run into any issues, head over to [FreeSewing.org/support](https://next.freesewing.org/support)
|
||||
If you run into any issues, head over to [FreeSewing.eu/support](https://freesewing.eu/support)
|
||||
which lists the various ways in which you can get help.
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ If you don't have NodeJS on your system, you can go to
|
|||
|
||||
##### NodeJS versions
|
||||
|
||||
You need Node.js 18 (lts/hydrogen) or higher to use FreeSewing
|
||||
You need Node.js 20 (lts/iron) or higher to use FreeSewing
|
||||
|
||||
If you're looking to use different versions, I can recommend using `nvm` which makes this very easy: https://github.com/nvm-sh/nvm
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Part 1: Prerequisites"
|
||||
title: 'Part 1: Prerequisites'
|
||||
---
|
||||
|
||||
In this first part, I will get your up and running with the FreeSewing
|
||||
|
|
@ -10,24 +10,35 @@ this section. If not, I have good news and bad news (and then some more good
|
|||
news) for you.
|
||||
|
||||
The good news is that JavaScript is an easy language to pick up. It is also a
|
||||
very popular and versatile language and the skills you learn here will serve
|
||||
very popular and versatile language and the skills you learn here will serve
|
||||
you well.
|
||||
|
||||
The bad news is that the JavaScript ecosystem is vast, and unfortunately
|
||||
The bad news is that the JavaScript ecosystem is vast, and unfortunately
|
||||
somewhat fractured. Most of the problems people need help with are not so much
|
||||
in the code itself, but rather getting everything to work together.
|
||||
This is true not just for FreeSewing, but pretty much all modern JavaScript.
|
||||
|
||||
But, no need to despair, FreeSewing provides a development environment that
|
||||
But, no need to despair, FreeSewing provides a development environment that
|
||||
will take care of all of this for you. So you can focus on designing patterns.
|
||||
|
||||
If you have NodeJS on your system, getting that development environment up
|
||||
If you have NodeJS on your system, getting that development environment up
|
||||
and running takes only a single command:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design
|
||||
npx @freesewing/studio
|
||||
```
|
||||
|
||||
If you don't have NodeJS on your system --- or if you're not sure what
|
||||
NodeJS is to begin with --- read on to learn how to install it.
|
||||
|
||||
:::danger[Windows users also need to install `git`]
|
||||
|
||||
The `git` command line utility is also a requirement for installing the
|
||||
FreeSewing development environment. Linux and Mac systems come with
|
||||
`git` pre-installed, but Windows users will need to install it manually.
|
||||
|
||||
Please see the
|
||||
[Getting started on Windows](/tutorials/getting-started-windows/)
|
||||
tutorial for instructions on how to install `git` on a Windows system.
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: The FreeSewing development environment
|
|||
sidebar_position: 30
|
||||
---
|
||||
|
||||
If you have been to FreeSewing.org the FreeSewing development environment will look familiar.
|
||||
If you have been to FreeSewing.eu the FreeSewing development environment will look familiar.
|
||||
That's because under the hood, it re-uses the same building blocks.
|
||||
|
||||
At the top of the page is the header with a row of icons that lay out what is available to you.
|
||||
|
|
|
|||
|
|
@ -60,27 +60,28 @@ function draftBib({
|
|||
tweak _ measurements.head / 12
|
||||
)
|
||||
|
||||
points.rightCp1 = points.right.shift(
|
||||
90,
|
||||
points.bottom.dy(points.right) / 2
|
||||
)
|
||||
points.bottomCp2 = points.bottom.shift(
|
||||
0,
|
||||
points.bottom.dx(points.right) / 2
|
||||
)
|
||||
|
||||
paths.quarterNeck = new Path()
|
||||
.move(points.right)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
points.rightCp1 = points.right.shift(
|
||||
90,
|
||||
points.bottom.dy(points.right) / 2
|
||||
)
|
||||
points.bottomCp2 = points.bottom.shift(
|
||||
0,
|
||||
points.bottom.dx(points.right) / 2
|
||||
)
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
if (delta > 0) tweak = tweak _ 0.99
|
||||
else tweak = tweak _ 1.02
|
||||
paths.quarterNeck = new Path()
|
||||
.move(points.right)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
||||
delta = paths.quarterNeck.length() - target
|
||||
if (delta > 0) tweak = tweak * 0.99
|
||||
else tweak = tweak * 1.02
|
||||
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
|
|
|
|||
|
|
@ -9,22 +9,22 @@ how to design a bespoke sewing pattern, start to finish.
|
|||
This tutorial is divided into three parts, allowing you to speedrun or entirely
|
||||
skip certain parts depending on your interests or prior experience:
|
||||
|
||||
## Part 1: Prerequisites
|
||||
## Part 1: Prerequisites
|
||||
|
||||
The first sections of this tutorial, [Part 1](/tutorials/pattern-design/part1),
|
||||
deals with the prerequisites. Installing node, setting up the FreeSewing
|
||||
development environment on your system, and so on. If you are familiar with
|
||||
deals with the prerequisites. Installing node, setting up the FreeSewing
|
||||
development environment on your system, and so on. If you are familiar with
|
||||
the JavaScript ecosystem, I can summarize that entire section in this one-liner
|
||||
that sets up the FreeSewing development environment on your system:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design
|
||||
npx @freesewing/studio
|
||||
```
|
||||
|
||||
## Part 2: Parametric design
|
||||
|
||||
In [Part 2](/tutorials/pattern-design/part2) I will show you how to design a
|
||||
parametric sewing pattern with FreeSewing. We'll create a part, add a bunch of
|
||||
parametric sewing pattern with FreeSewing. We'll create a part, add a bunch of
|
||||
points, draw lines and curves, and so on.
|
||||
All the basic skills required to create a sewing pattern in code.
|
||||
|
||||
|
|
@ -39,10 +39,9 @@ There is more to FreeSewing patterns than meets the eye, and in [Part
|
|||
further value to your designs.
|
||||
|
||||
This includes things like translation, supporting laser cutters, avoiding the
|
||||
need to printing with so-called *paperless patterns*, as well as how you can
|
||||
need to printing with so-called _paperless patterns_, as well as how you can
|
||||
configure your pattern to integrate with FreeSewing.org, or your own
|
||||
frontend.
|
||||
|
||||
|
||||
You can follow this tutorial start to finish, or skip ahead and back, the
|
||||
choice is yours.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue