chore: Updates to docs for new dev env

markdown/dev/howtos/dev/en.md

@@ -1,9 +0,0 @@
----
-title: Setting up your development environment
----
-
-If you're new to Javascript development, getting started is probably
-the hardest part. These guides will walk you through setting up your
-development environment on your operating system of choice.
-
-<ReadMore />

markdown/dev/howtos/dev/freesewing-dev/en.md

@@ -1,48 +0,0 @@
----
-title: Working on freesewing.dev
-for: developers
-about: Shows you how to setup your development environment to work on freesewing.dev, our website for developers
----
-
-freesewing.dev is built from a package in our monorepo. You will need the following setup and installed before you begin: Node, [lerna](https://lerna.js.org/) and [yarn](https://yarnpkg.com/).
-
-To get started, checkout the repository:
-
-```bash
-git@github.com:freesewing/freesewing.git
-```
-
-<Note>
-You should check out your own fork so you can write your changes to it.
-Update the command above with the path of your own fork on Github
-</Note>
-
-Enter the newly installed repository and run kickstart:
-
-```bash
-cd freesewing
-yarn kickstart
-```
-
-After that completes, navigate to the freesewing.dev package directory:
-
-```bash
-cd freesewing/packages/freesewing.dev
-```
-
-Now install the dependencies:
-
-```bash
-yarn install
-```
-
-This will take a while. When it's done, run the following commands to build and then start your development environment:
-
-```bash
-yarn prebuild
-yarn dev
-```
-
-Once the command builds the site, you can open your browser on http://localhost:3002 to see the site.
-
-As you make changes, they will automatically be loaded into your browser.

markdown/dev/howtos/dev/freesewing-org/en.md

@@ -1,59 +0,0 @@
----
-title: Working on freesewing.org
-for: developers
-about: Shows you how to setup your development environment to work on freesewing.org, our website for makers
----
-
-freesewing.org is being moved from its current location ([freesewing/freesewing.org](https://github.com/freesewing/freesewing.org)) to the monorepo ([freesewing/freesewing](https://github.com/freesewing/freesewing)). These instructions are subject to change and may be out of date. If you run into issues please reach out on #development-help in [Discord](https://discord.freesewing.org/). In the meantime, to work on freesewing.org, checkout the freesewing.org repository:
-
-```bash
-git@github.com:freesewing/freesewing.org.git
-```
-
-<Note>
-You should check out your own fork so you can write your changes to it.
-Update the command above with the path of your own fork on Github
-</Note>
-
-Enter the newly installed repository:
-
-```bash
-cd freesewing.org
-```
-
-Copy the `.env.example` file to `.env`. If you just want to get the site running you don't need to edit the values inside the `.env` file. But if you want to use any of the integrations (e.g. Google Authentication, Algolia search) you will need to enter your own values to this file.
-
-```bash
-cp .env.example .env
-```
-
-Because freesewing.org is in the process of moving to the monorepo, it's using shared components from the monorepo as a submodule. You will need to initialize the monorepo submodule. Do so with the following git commands:
-
-```bash
-git submodule init
-git submodule update
-```
-
-Before running the above command the `monorepo` folder will be empty. After running the above commands you should see files in the `monorepo` folder.
-
-Now install the dependencies:
-
-```bash
-yarn install
-```
-
-If you prefer, you can also use npm:
-
-```bash
-npm install
-```
-
-This will take a while. When it's done, run the following command to start your development environment:
-
-```bash
-npm run develop
-```
-
-Once the command builds the site, you can open your browser on http://localhost:8000 to see the site.
-
-As you make changes, they will automatically be loaded into your browser.

markdown/dev/tutorials/getting-started-gitpod/en.md

@@ -0,0 +1,18 @@
+---
+title: Getting started with GitPod
+order: 10
+---
+
+If you don't want to set up a dev environment, or just want to kick the 
+tires like, right now, you can run our development environment in your browser via Gitpod:
+
+https://gitpod.io/#https://github.com/freesewing/freesewing
+
+<Tip>
+We recommend that you fork our repository so you can push changes to the repository.
+To do so, simple adapt the URL above as follows:
+
+https://gitpod.io/#url-to-your-fork
+</Tip>
+
+

markdown/dev/tutorials/getting-started-linux/create-freesewing-pattern/en.md

@@ -1,33 +0,0 @@
----
-title: Setting up the FreeSewing development environment
-order: 40
----
-
-FreeSewing provides a development environment to help you design and develop patterns.
-
-With Node installed, all you need to do to setup this development environment is run this command:
-
-```bash
-npx create-freesewing-pattern
-```
-
-It will take a moment to download some dependencies, and then will ask you the following questions.
-
-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`.
-
-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.

markdown/dev/tutorials/getting-started-linux/dev-setup/en.md

@@ -0,0 +1,118 @@
+---
+title: Setting up the FreeSewing development environment
+order: 40
+---
+
+FreeSewing provides a development environment to help you design and develop patterns.
+
+There are two ways to run this development environment:
+
+- [**Monorepo development**](#monorepo-development): Use this if you intend to contribute your work to FreeSewing
+- [**Stand-alone development**](#stand-alone-development): Use this if you want to do your own thing, and not contribute to FreeSewing
+
+## Monorepo development
+
+<Note compact>This is the recommended way for (aspiring) FreeSewing contributors</Note>
+
+### TL;DR
+
+```bash
+git clone https://github.com/freesewing/freesewing
+cd freesewing
+yarn kickstart
+```
+
+<Tip>
+Even better: [clone your own fork](https://github.com/freesewing/freesewing/fork)
+
+```bash
+git clone https://github.com/your-username/freesewing
+cd freesewing
+yarn kickstart
+```
+
+</Tip>
+
+### Step by step
+
+<Comment by="joost">
+These docs assume you have git installed. 
+But if you're running Linux, you have git, right?
+</Comment>
+
+#### Install yarn
+Our repository uses yarn workspaces. So you'll need yarn to work with it. 
+
+To install it run:
+
+```bash
+npm i -G yarn
+```
+
+#### Fork our repository
+
+You'll want to fork our repository. This way you have your own copy where you can make
+all the changes you want. To do so, visit https://github.com/freesewing/freesewing/fork
+
+#### Clone the forked repository
+
+Now that you have your very own fork, time to clone it locally.
+
+```bash
+git clone <url to your fork>
+```
+
+Make sure to use the URL to your own fork, typically `https://github.com/your-username/freesewing` but
+obviously with your real username rather than `your-username`.
+
+#### Install dependencies
+
+Enter the directory that was created, and run the `yarn kickstart` command:
+
+```bash
+cd freesewing
+yarn kickstart
+```
+
+Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start).
+
+## Stand-alone development
+
+With NodeJS installed, all you need to do to setup the stand-alone development environment is run this command:
+
+```bash
+npx @freesewing/new-design
+```
+
+After you've answered [some questions](#questions), it will take a while to set everything up.
+When it's done, you will have a new folder with the development environent inside.
+
+Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start).
+
+<Tip compact>The folder will have the name you chose above</Tip>
+
+<Note>
+### Questions
+
+#### 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.org/designs/brian)
+- Use `Extend Bent` to start from [Bent](https://freesewing.org/designs/bent)
+- Use `Extend Bella` to start from [Bella](https://freesewing.org/designs/bella)
+- Use `Extend Breanna` to start from [Breanna](https://freesewing.org/designs/breanna)
+- Use `Extend Titan` to start from [Titan](https://freesewing.org/designs/titan)
+
+
+#### What name to use
+This will become the name of your design. Stick to [a-z] here to avoid problems.
+
+If you're not certain what to pick, just mash some keys, it doesn't matter.
+
+#### What package manager to use
+
+Chose `npm` if you don't have `yarn` are when you're not sure what the heck `yarn` is.
+
+</Note>
+
+

markdown/dev/tutorials/getting-started-linux/dev-start/en.md

@@ -0,0 +1,62 @@
+---
+title: Start the development environment
+order: 50
+---
+
+FreeSewing provides a development environment to help you design and develop patterns.
+
+There are two ways to run this development environment:
+
+- [**Monorepo development**](#monorepo-development): Use this if you intend to contribute your work to FreeSewing
+- [**Stand-alone development**](#stand-alone-development): Use this if you want to do your own thing, and not contribute to FreeSewing
+
+## Monorepo development
+
+Run `yarn lab` to start the development environment:
+
+```bash
+yarn lab
+```
+
+Then point your browser to http://localhost:8000
+
+<Tip>
+### Adding a new design
+This is all you need to work on existing designs. If you'd like to add a new design, run:
+
+```bash
+yarn new design
+```
+
+Just make sure to re-start the lab afterwards with `yarn lab`
+</Tip>
+
+## Standalone development
+
+You will have a new folder that has the name you picked for your design.
+If you chose `test`, you will have a `test` folder. If you chose `banana`, you'll have a `banana` folder.
+
+The `design` subfolder holds your design's configuration file and source code.
+You can ignore all other folders and files, they are part of the development environment.
+
+To start the development environment, enter the folder hat was created 
+and run `npm run start` (or `yarn start` if you're using Yarn as a package manager).
+
+Then open your browser and go to http://localhost:8000
+
+<Tip>
+The development environment will watch for any changes you make to
+the pattern's source code or configuration. 
+When you do, it will update automatically in your browser.
+</Tip>
+
+<Note>
+
+##### Yay, you're done!
+
+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
+
+</Note>

markdown/dev/tutorials/getting-started-linux/en.md

@@ -1,6 +1,6 @@
 ---
 title: Getting started on Linux
-order: 10
+order: 15
 for: developers
 icons: 
   - start

markdown/dev/tutorials/getting-started-linux/installing-node/en.md

@@ -6,9 +6,14 @@ order: 20
 Now we will use nvm to install Node JS. Run the following command:
 
 ```bash
-nvm install lts/*
+nvm install lts/fermium
 ```
 
-This will install the most recent so-called LTS version on your system.
+This will install the so-called LTS version of Node 14 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.
+
+<Note compact>
+Node 14 is required to use our monorepo [until we upgrade Strapi](https://github.com/freesewing/freesewing/issues/2351).
+</Note>

markdown/dev/tutorials/getting-started-linux/installing-nvm/en.md

@@ -14,16 +14,19 @@ 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
 
-To setup nvm, run the following command in a terminal:
+To setup nvm, [follow the install instructions in the nvm 
+README](https://github.com/nvm-sh/nvm#installing-and-updating).
+
+The TL;DR: is to run the following command in a terminal:
 
 ```bash
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 ```
 
 If you don't have `curl` on your system, here's an alternative approach using `wget`:
 
 ```bash
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 ```
 
 After the script is completed, try running the following command:

markdown/dev/tutorials/getting-started-linux/node-versions/en.md

@@ -52,3 +52,8 @@ 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!
+
+<Note compact>
+Node 14 is required to use our monorepo [until we upgrade Strapi](https://github.com/freesewing/freesewing/issues/2351).
+</Note>
+

markdown/dev/tutorials/getting-started-linux/start-development-environment/en.md

@@ -1,29 +0,0 @@
----
-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
-
-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.
-
-The development environment will watch for any changes you make to
-the pattern's source code. When you do, it will update automatically in your browser.
-
-<Note>
-
-##### Yay, you're done!
-
-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
-
-</Note>

markdown/dev/tutorials/getting-started-mac/create-freesewing-pattern/en.md

@@ -1,33 +0,0 @@
----
-title: Setting up the FreeSewing development environment
-order: 50
----
-
-FreeSewing provides a development environment to help you design and develop patterns.
-
-With Node installed, all you need to do to setup this development environment is run this command:
-
-```bash
-npx create-freesewing-pattern
-```
-
-It will take a moment to download some dependencies, and then will ask you the following questions.
-
-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`.
-
-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.

markdown/dev/tutorials/getting-started-mac/dev-setup/en.md

@@ -0,0 +1,118 @@
+---
+title: Setting up the FreeSewing development environment
+order: 40
+---
+
+FreeSewing provides a development environment to help you design and develop patterns.
+
+There are two ways to run this development environment:
+
+- [**Monorepo development**](#monorepo-development): Use this if you intend to contribute your work to FreeSewing
+- [**Stand-alone development**](#stand-alone-development): Use this if you want to do your own thing, and not contribute to FreeSewing
+
+## Monorepo development
+
+<Note compact>This is the recommended way for (aspiring) FreeSewing contributors</Note>
+
+### TL;DR
+
+```bash
+git clone https://github.com/freesewing/freesewing
+cd freesewing
+yarn kickstart
+```
+
+<Tip>
+Even better: [clone your own fork](https://github.com/freesewing/freesewing/fork)
+
+```bash
+git clone https://github.com/your-username/freesewing
+cd freesewing
+yarn kickstart
+```
+
+</Tip>
+
+### Step by step
+
+<Comment by="joost">
+These docs assume you have git installed. 
+But if you're running Linux, you have git, right?
+</Comment>
+
+#### Install yarn
+Our repository uses yarn workspaces. So you'll need yarn to work with it. 
+
+To install it run:
+
+```bash
+npm i -G yarn
+```
+
+#### Fork our repository
+
+You'll want to fork our repository. This way you have your own copy where you can make
+all the changes you want. To do so, visit https://github.com/freesewing/freesewing/fork
+
+#### Clone the forked repository
+
+Now that you have your very own fork, time to clone it locally.
+
+```bash
+git clone <url to your fork>
+```
+
+Make sure to use the URL to your own fork, typically `https://github.com/your-username/freesewing` but
+obviously with your real username rather than `your-username`.
+
+#### Install dependencies
+
+Enter the directory that was created, and run the `yarn kickstart` command:
+
+```bash
+cd freesewing
+yarn kickstart
+```
+
+Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start).
+
+## Stand-alone development
+
+With NodeJS installed, all you need to do to setup the stand-along development environment is run this command:
+
+```bash
+npx @freesewing/new-design
+```
+
+After you've answered [some questions](#questions), it will take a while to set everything up.
+When it's done, you will have a new folder with the development environent inside.
+
+Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start).
+
+<Tip compact>The folder will have the name you chose above</Tip>
+
+<Note>
+### Questions
+
+#### 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.org/designs/brian)
+- Use `Extend Bent` to start from [Bent](https://freesewing.org/designs/bent)
+- Use `Extend Bella` to start from [Bella](https://freesewing.org/designs/bella)
+- Use `Extend Breanna` to start from [Breanna](https://freesewing.org/designs/breanna)
+- Use `Extend Titan` to start from [Titan](https://freesewing.org/designs/titan)
+
+
+#### What name to use
+This will become the name of your design. Stick to [a-z] here to avoid problems.
+
+If you're not certain what to pick, just mash some keys, it doesn't matter.
+
+#### What package manager to use
+
+Chose `npm` if you don't have `yarn` are when you're not sure what the heck `yarn` is.
+
+</Note>
+
+

markdown/dev/tutorials/getting-started-mac/dev-start/en.md

@@ -0,0 +1,62 @@
+---
+title: Start the development environment
+order: 50
+---
+
+FreeSewing provides a development environment to help you design and develop patterns.
+
+There are two ways to run this development environment:
+
+- [**Monorepo development**](#monorepo-development): Use this if you intend to contribute your work to FreeSewing
+- [**Stand-alone development**](#stand-alone-development): Use this if you want to do your own thing, and not contribute to FreeSewing
+
+## Monorepo development
+
+Run `yarn lab` to start the development environment:
+
+```bash
+yarn lab
+```
+
+Then point your browser to http://localhost:8000
+
+<Tip>
+### Adding a new design
+This is all you need to work on existing designs. If you'd like to add a new design, run:
+
+```bash
+yarn new design
+```
+
+Just make sure to re-start the lab afterwards with `yarn lab`
+</Tip>
+
+## Standalone development
+
+You will have a new folder that has the name you picked for your design.
+If you chose `test`, you will have a `test` folder. If you chose `banana`, you'll have a `banana` folder.
+
+The `design` subfolder holds your design's configuration file and source code.
+You can ignore all other folders and files, they are part of the development environment.
+
+To start the development environment, enter the folder hat was created 
+and run `npm run start` (or `yarn start` if you're using Yarn as a package manager).
+
+Then open your browser and go to http://localhost:8000
+
+<Tip>
+The development environment will watch for any changes you make to
+the pattern's source code or configuration. 
+When you do, it will update automatically in your browser.
+</Tip>
+
+<Note>
+
+##### Yay, you're done!
+
+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
+
+</Note>

markdown/dev/tutorials/getting-started-mac/en.md

@@ -1,6 +1,6 @@
 ---
 title: Getting started on Mac
-order: 20
+order: 25
 for: developers
 icons: 
   - start

markdown/dev/tutorials/getting-started-mac/installing-node/en.md

@@ -1,14 +1,19 @@
 ---
 title: Installing Node
-order: 30
+order: 20
 ---
 
 Now we will use nvm to install Node JS. Run the following command:
 
 ```bash
-nvm install lts/*
+nvm install lts/fermium
 ```
 
-This will install the most recent so-called LTS version on your system.
+This will install the so-called LTS version of Node 14 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.
+
+<Note compact>
+Node 14 is required to use our monorepo [until we upgrade Strapi](https://github.com/freesewing/freesewing/issues/2351).
+</Note>

markdown/dev/tutorials/getting-started-mac/installing-nvm/en.md

@@ -1,6 +1,6 @@
 ---
 title: Installing nvm
-order: 20
+order: 10
 ---
 
 FreeSewing is built with [Node.js](https://nodejs.org/), a JavaScript runtime.
@@ -9,14 +9,15 @@ 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 Homebrew or your OS distribution:
+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
 
-The latest instructions for setting up nvm can be found [here](https://github.com/nvm-sh/nvm#installing-and-updating). If you want to just skip to the commands that most likely work, keep reading.
+To setup nvm, [follow the install instructions in the nvm 
+README](https://github.com/nvm-sh/nvm#installing-and-updating).
 
-To setup nvm, run the following command in a terminal window:
+The TL;DR: is to run the following command in a terminal:
 
 ```bash
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
@@ -38,7 +39,7 @@ If all goes well, it should show you the nvm help.
 
 <Tip>
 
-If you get `nvm: command not found` or something similar, close the Terminal
-application, and open a new one. Now `nvm` should be found.
+If you get `nvm: command not found` or something similar, close the current terminal
+window, and open a new one. Now `nvm` should be found.
 
 </Tip>

markdown/dev/tutorials/getting-started-mac/start-development-environment/en.md

@@ -1,29 +0,0 @@
----
-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
-
-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.
-
-The development environment will watch for any changes you make to
-the pattern's source code. When you do, it will update automatically in your browser.
-
-<Note>
-
-##### Yay, you're done!
-
-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
-
-</Note>

markdown/dev/tutorials/pattern-design/adding-measurements/en.md

@@ -15,7 +15,7 @@ So let's add it as a required measurement.
 
 ## Add required measurements
 
-Open the config file at `config/index.js` and update the `measurements` array with the name of our required measurement:
+Open the config file at `design/config.js` and update the `measurements` array with the name of our required measurement:
 
 ```js
 measurements: ["head"],
@@ -38,7 +38,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.
 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,
-which for now still looks like this:
+Enter `38` in the box, and click on **Draft Design** in the sidebar under the **View** heading.
+This brings you back to our work in progress:
 
 <Example pattern="tutorial" part="step1">Nothing has changed, yet</Example>

markdown/dev/tutorials/pattern-design/adding-options/en.md

@@ -20,7 +20,7 @@ flexible and let the user decide. All you have to do is add options to your patt
 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:
+Open the config file at `design/config.js` and add this to the options:
 
 ```js
   options: {
@@ -66,7 +66,7 @@ between their minimum and maximum values. At that time, you can still tweak thes
 
 </Note>
 
-Before you close the `config/index.js` file, make sure to update the `optionGroups` entry as follows:
+Before you close the `design/config.js` file, make sure to update the `optionGroups` entry as follows:
 
 ```js
 optionGroups: {

markdown/dev/tutorials/pattern-design/avoiding-overlap/en.md

@@ -11,7 +11,7 @@ The rest of your bib should stay as it is, so let's start by making a list of po
 to rotate:
 
 ```js
-let rotateThese = [
+const rotateThese = [
   "edgeTopLeftCp",
   "edgeTop",
   "tipRight",
@@ -34,7 +34,7 @@ Now you can rotate them. How far? Until the strap no longer overlaps:
 
 ```js
 while (points.tipRightBottomStart.x > -1) {
-  for (let p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft)
+  for (const p of rotateThese) points[p] = points[p].rotate(1, points.edgeLeft)
 }
 ```
 

markdown/dev/tutorials/pattern-design/completing-your-pattern/en.md

@@ -7,7 +7,7 @@ When we started out, we said a good part boilerplate looks like this:
 
 ```js
 export default function(part) {
-  let { Point, points, Path, paths, complete, sa, paperless } = part.shorthand()
+  const { Point, points, Path, paths, complete, sa, paperless } = part.shorthand()
   // Design pattern here
 
   // Complete?
@@ -42,7 +42,7 @@ To access the setting, we merely have to tell `part.shorthand()` that we'd like
 While we're at it, also add `snippets` and `Snippet`, like this:
 
 ```js
-let {
+const {
   Point,
   points,
   Path,

markdown/dev/tutorials/pattern-design/conclusion/en.md

@@ -6,7 +6,7 @@ order: 280
 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 learned how to [setup your development environment](/tutorials/pattern-design/create-freesewing-pattern) with `npx create-freesewing-pattern`
+- You learned how to [setup your development environment](/tutorials/pattern-design/new-design) with `npx @freesewing/new-design`
 - 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 learned [how to add points and draw paths](/tutorials/pattern-design/constructing-the-neck-opening)
@@ -19,7 +19,7 @@ you have learned a bunch of things along the way. Let's list some of the things
 - 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).
+You can find the complete code of the tutorial pattern [here on GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.js).
 
 ## More reading material
 
@@ -34,8 +34,6 @@ Now that you have learned how to create a pattern, why don't you make one?
 Think about what it is you would like to create, and just do it. If you get stuck at any moment,
 or need some help or advice, you can [join our chat room](https://discord.freesewing.org/) and we'll help you out.
 
-If you need some ideas or want to help on a pattern design take a look [at these open projects](https://github.com/freesewing/freesewing/discussions?discussions_q=label%3A%22%3Ashirt%3A+pattern+design%22+label%3A%22%3A%2B1%3A+good+first+issue%22) for patterns which are currently being worked on and are good patterns for a first time contributor to have a go at!
-
 <Note>
 
 ###### Tell us how we can improve this tutorial

markdown/dev/tutorials/pattern-design/constructing-the-neck-opening/en.md

@@ -14,7 +14,7 @@ to our measurements and options to do so. For this, you first update the shortha
 to indicate you also want access to `measurements` and `options`:
 
 ```js
-let {
+const {
   Point,
   points,
   Path,

markdown/dev/tutorials/pattern-design/create-freesewing-pattern/en.md

@@ -1,64 +0,0 @@
----
-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:
-
-```bash
-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.
-
-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.
-
-</Note>
-
-When it's ready, enter the directory that was just created for our `tutorial` pattern and navigate to the `example` subfolder. There, start the development environment:
-
-```bash
-cd tutorial/example
-npm start
-```
-
-Or if you chose to use Yarn as package manager:
-
-```bash
-cd tutorial/example
-yarn start
-```
-
-If all goes well, your browser will open and show the following landing page:
-
-![The FreeSewing development environment](./cfp.png)
-
-<Note>
-
-###### Need help?
-
-If you run into any issues, join [our chatroom](https://discord.freesewing.org/) and
-we'll figure it out together.
-
-</Note>

markdown/dev/tutorials/pattern-design/creating-the-closure/en.md

@@ -16,7 +16,7 @@ Before we can use it, we have to update our `part.shorthand()` call to indicate
 also like to make use of macros. Simply add `macro` at the end:
 
 ```js
-let {
+const {
   Point,
   points,
   Path,

markdown/dev/tutorials/pattern-design/en.md

@@ -51,4 +51,4 @@ node -v
 
 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/packages/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.js).

markdown/dev/tutorials/pattern-design/new-design/en.md

@@ -0,0 +1,53 @@
+---
+title: Setting up the development environment
+order: 100
+---
+
+Open a terminal and enter the following command:
+
+```bash
+npx @freesewing/new-design
+```
+
+You'll be asked some questions, use these answers:
+
+- **What template would you like to use?**: Pick the default `From scratch`
+- **What name would you like the design to have**: Enter `bib`
+- **What package manager do you use?**: Pick `npm` unless you are certain you have `yarn` installed
+
+After you've answered these questions, files will be copied, dependencies installed, and components downloaded.
+
+<Note>
+
+This will take a few minutes because we're loading some software for your development environment.
+
+</Note>
+
+When it's ready, enter the `bib` directory that was just created and run `npm run dev`:
+
+```bash
+cd bib
+npm run dev
+```
+
+Or if you chose to use Yarn as package manager:
+
+```bash
+cd bib
+yarn start
+```
+
+Now open your browser at http://localhost:8000
+
+If all goes well, you should see this landing page:
+
+![The FreeSewing development environment](./nd.png)
+
+<Note>
+
+###### Need help?
+
+If you run into any issues, join [our chatroom](https://discord.freesewing.org/) and
+we'll figure it out together.
+
+</Note>

markdown/dev/tutorials/pattern-design/paperless-bib/en.md

@@ -9,7 +9,7 @@ We can get that value of the setting from the `part.shorthand()` method.
 It will be the last shorthand we will put to use:
 
 ```js
-let {
+const {
   Point,
   points,
   Path,

markdown/dev/tutorials/pattern-design/part-structure/en.md

@@ -4,11 +4,11 @@ order: 150
 ---
 
 Let's get rid of the example box first.
-Open `src/bib.js` and make sure it looks like this:
+Open `design/src/bib.js` and make sure it looks like this:
 
 ```js
 export default function(part) {
-  let { Point, points, Path, paths, complete, sa, paperless } = part.shorthand()
+  const { Point, points, Path, paths, complete, sa, paperless } = part.shorthand()
   // Design pattern here
 
   // Complete?

markdown/dev/tutorials/pattern-design/testing-your-pattern/en.md

@@ -18,10 +18,16 @@ 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
-development environment, and you'll see a number of choices on the right:
+for you. Click the **Test Design** link in the sidebar under the **View** title.
 
-- Test pattern options
+<Fixme>
+The new development environment does not yet support all tests.
+Update these docs when that's completed
+</Fixme>
+
+You have a number of ways to test your pattern:
+
+- Test design options
 - Test measurements
 - Test models
 

markdown/dev/tutorials/pattern-design/your-first-part/en.md

@@ -9,7 +9,7 @@ Most patterns will have multiple parts. A sleeve, a back part, the collar, and s
 Our pattern is very simple, and only has one part: the bib.
 
 The pattern that's been created for us also just has one part to get you started.
-It's called **box** and it draws a box. If you click on the **Draft your pattern**
+It's called **box** and it draws a box. If you click on the **To your design**
 button in your browser, you'll get to see it:
 
 ![The default pattern with its box part](./step1.png)
@@ -18,11 +18,11 @@ Since we only need one part, we'll rename this _box_ part, and call it _bib_.
 
 ## Rename the box part to bib
 
-First, update the configuration file in `config/index.js`.
+First, update the configuration file in `design/config.js`.
 Update the **parts** array with `bib`, rather than `box`:
 
 ```js
-parts: ["bib"],
+parts: ['bib'],
 ```
 
 <Note>
@@ -33,9 +33,9 @@ This will (temporarily) cause en error to appear in your development environment
 
 </Note>
 
-When that's done, rename the `src/box.js` file into `src/bib.js`.
+When that's done, rename the `design/src/box.js` file into `design/src/bib.js`.
 
-Then, in the `src/index.js` file, change the import accordingly:
+Then, in the `design/src/index.js` file, change the import accordingly:
 
 ```js
 // Change this line
@@ -45,14 +45,14 @@ Then, in the `src/index.js` file, change the import accordingly:
 import draftBib from "./bib"
 ```
 
-Finally, still in the `src/index.js` file, update the draftmethod:
+Finally, still in the `design/src/index.js` file, update the draft method:
 
 ```js
 // Change this line
-//Pattern.prototype.draftBox = draftBox
+//Design.prototype.draftBox = draftBox
 
 // Into this
-Pattern.prototype.draftBib = draftBib
+Design.prototype.draftBib = draftBib
 ```
 
 <Tip>