chore: Updated tutorial for v3

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

@@ -1,6 +1,6 @@
 ---
 title: Setting up the development environment
-order: 100
+order: 20
 ---
 
 FreeSewing provides a development environment that visualizes your design for you.
@@ -12,13 +12,15 @@ npx @freesewing/new-design@next
 ```
 <Fixme compact>Remove `@next` suffix once v3 is in production</Fixme>
 
-It will ask some questions.
-All the defaults will do, but here are the details:
+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.
 
-- *What template would you like to use?* — Pick the default: **Tutorial**
-- *What package manager should we use?* — Pick the default: **npm**, unless you are certain you have **yarn** installed
+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 copied, dependencies installed, and requirements downloaded.
+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).
 
 <Note>
 
@@ -27,17 +29,17 @@ of dependencies that need to be downloaded.
 
 </Note>
 
-When it's ready, you can enter the `tutorial` directory that was just created and run `npm run dev`:
+When it's ready, you can enter the `freesewing` directory that was just created and run `npm run dev`:
 
 ```sh
-cd tutorial
+cd freesewing
 npm run dev
 ```
 
 Or if you want to use yarn as package manager:
 
 ```sh
-cd tutorial
+cd freesewing
 yarn dev
 ```
 
@@ -47,10 +49,11 @@ If all goes well, we'll should see this landing page:
 
 ![The FreeSewing development environment](./nd.png)
 
-## Notes
+<Tip>
 
-### Need help?
+##### Need help?
 
 If you run into any issues, head over to [FreeSewing.org/support](https://next.freesewing.org/support)
 which lists the various ways in which you can get help.
 
+</Tip>

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

@@ -0,0 +1,47 @@
+---
+title: The FreeSewing development environment
+order: 30
+---
+
+If you have been to FreeSewing.org 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.
+
+![The icons in the header of the FreeSewing development environment](./header.png)
+
+From left to right you can see:
+
+- **Home** will take you to the home page / welcome page
+- **Design** will offer you a list of templates to start a design from (more on this below)
+- **Documentation** will show a page with links to our documentation
+- **Code** will show a page with links to our source code
+- **Support** will show a page with the various ways you can get help
+- **Theme** allows you to change the theme (in other works the color scheme)
+- **Language** allows you to change the language
+- **Sign In** allows you to sign in to your FreeSewing account so you can use
+  your (and our) measurements sets while designing
+
+## Design templates
+
+If you click he **Design** icon it will show this menu:
+
+![Design templates provided by the FreeSewing development environment](./templates.png)
+
+It allows you to choose a desing template to start from. The following templates are included:
+
+- **From scratch**: Start with an (almost) empty design
+- **Tutorial**: Start with the end result of this very tutorial
+- **From Brian**: Start with a design that extends [Brian]('https://freesewing.org/designs/brian)
+- **From Bent**: Start with a design that extends [Bent]('https://freesewing.org/designs/bent)
+- **From Titan**: Start with a design that extends [Titan]('https://freesewing.org/designs/titan)
+- **From Bella**: Start with a design that extends [Bella]('https://freesewing.org/designs/bella)
+- **From Breanna**: Start with a design that extends [Breanna]('https://freesewing.org/designs/breanna)
+
+For the following along this tutorial, you have two options:
+
+- Pick **Tutorial** if you prefer to read along, make small changes, and see how they affect the design.
+- Pick **From scratch** if you prefer to actively participate be recreating the desing in this tutorial.
+
+I recommend the latter. You will learn (and remember) a lot more if you are activele engaging.
+

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

@@ -1,45 +1,32 @@
 ---
-title: Files and folder structure
-order: 110
+title: Folder structure
+order: 40
 ---
 
-Inside our `tutorial` folder, the `design/src` folder holds the source code for
-the new pattern we will create.
+Inside the `freesewing` folder -- which might have a different name if that is
+the choice you made -- you will find a bunch of files and folders.  
 
-If you want to support internationalization in your design, your translations 
-go in the `design/i18n` folder. 
+The one that matter is the `design` folder. In it, you will find the followin
+subfolders:
 
-We can safely ignore all other files and folders, as they are part of the
-FreeSewing development environment.
-So feel free to skip ahead to [Our first part](/tutorials/pattern-design/our-first-part).
+- `from-bella`
+- `from-bent`
+- `from-breanna`
+- `from-brian`
+- `from-scratch`
+- `from-titan`
+- `tutorial`
 
-## Notes
+Remember when you click the **Design** icon in the header it would bring up
+this menu:
 
-If you'd like to learn about those other files and folders, here's what they do:
+![Design templates provided by the FreeSewing development environment](./templates.png)
 
-### folders
+As you might have guessed by now, each of these options is contained in its
+own subfolder under `designs`. 
 
-- `design`: Holds the source code for our design
-- `lab`: Holds [React][react] hooks and components specific to the development environment
-- `node_modules`: Holds installed dependencies
-- `pages`: Holds [NextJS][next] client-side routes, aka pages
-- `public`: Holds pre-generated translation files
-- `shared`: Holds files from FreeSewing's shared codebase for frontend development
+You can edit the files under `designs/[template]/src/` and the changes you make
+will be reflected in the development environment.
 
-### files
-
-- `next.config.mjs`: The [NextJS][next] configuration file
-- `next-i18next.config.js`: The configuration file for [next-i18next][i18n] which handles translation within NextJS
-- `package.json`: Every Node.js project has a [package.json][pkg] file which holds important metadata and lists dependencies
-- `package-lock.json`: This *lockfile* will only exist if we use the npm package manager
-- `postcss.config.js`: Configuration file for [PostCSS][postcss], a tool to transform CSS with JavaScript
-- `tailwind.config.js`: Configuration file for the [TailwindCSS][tailwind] framework
-- `yarn.lock`: This *lockfile* will only exist if we use [the yarn package manager][yarn]
-
-[next]: https://nextjs.org/
-[tailwind]: https://tailwindcss.com/
-[postcss]: https://postcss.org/
-[yarn]: https://yarnpkg.com/
-[pkg]: https://docs.npmjs.com/cli/v8/configuring-npm/package-json
-[react]: https://reactjs.org/
-[i18n]: https://next.i18next.com
+Don't take my word for it though. Let's start doing exactly that 
+in [Part 2](/tutorials/pattern-design/part2).