diff --git a/sites/dev/docs/tutorials/getting-started-linux/dev-setup/readme.mdx b/sites/dev/docs/tutorials/getting-started-linux/dev-setup/readme.mdx index 9e4bff43dcf..ed9ff47eeac 100644 --- a/sites/dev/docs/tutorials/getting-started-linux/dev-setup/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-linux/dev-setup/readme.mdx @@ -3,17 +3,16 @@ title: Setting up the FreeSewing development environment sidebar_position: 40 --- -FreeSewing provides a development environment to help you design and develop -patterns. +FreeSewing provides the studio, a development environment to help you design and develop patterns. -There are two ways to run this development environment: +There are two ways to run this studio: -- [**Monorepo development**](#monorepo-development): Use this if you intend to +- [**Repository studio**](#monorepo-studio): Use this if you intend to contribute your work to FreeSewing -- [**Stand-alone development**](#stand-alone-development): Use this if you want +- [**Stand-alone studio**](#stand-alone-studio): Use this if you want to do your own thing, and not contribute to FreeSewing -## Monorepo development +## Repository studio :::note This is the recommended way for (aspiring) FreeSewing contributors @@ -24,7 +23,7 @@ This is the recommended way for (aspiring) FreeSewing contributors ```bash git clone https://codeberg.org/freesewing/freesewing.git cd freesewing -yarn kickstart +npm run kickstart ``` :::tip @@ -34,22 +33,16 @@ fork](https://codeberg.org/freesewing/freesewing/fork) ```bash git clone https://codeberg.org/your-username/freesewing.git cd freesewing -yarn kickstart +npm run kickstart ``` ::: -This sets up the monorepo. If you would like to create a new design, run the +This sets up the monorepo. If you would like to create a new design or plugin, run the following command: ```sh -yarn new design -``` - -If you'd like to create a new plugin, run this variant instead: - -```sh -yarn new plugin +npm run add ``` ### Step by step @@ -59,16 +52,6 @@ These docs assume you have git installed. But if you're running Linux, you have git, right? ::: -#### Install yarn - -Our repository uses yarn workspaces. So you'll need `yarn` to work with it. - -To install it run: - -```bash -npm install yarn --global -``` - #### Fork our repository You'll want to fork our repository. This way you have your own copy where you can make @@ -87,91 +70,71 @@ obviously with your real username rather than `your-username`. #### Install dependencies -Enter the directory that was created, and run the `yarn kickstart` command: +Enter the directory that was created, and run the `npm run kickstart` command: ```bash cd freesewing -yarn kickstart +npm run kickstart ``` Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start). -:::note +### Creating a new design or plugin -There is another `yarn` command that comes with some Linux distributions, -installed as part of the `cmdtest` package and used for command line -scenario testing. -If you get an `ERROR: There are no scenarios; must have at least one.` -message when trying to run the `yarn` command, it may be because the wrong -`yarn` is being used. - -Possible workarounds for this include uninstalling the `cmdtest` package -or making sure that npm `yarn` is installed and comes first in your `PATH` -environment variable. - -::: - -## Creating a new design - -If you would like to create a new design, run the following command: +If you would like to create a new design or plugin, run the following command: ```sh -yarn new design +npm run add ``` -## Creating a new plugin +After you've answered [some questions](#questions), it create a new +sub-folder for your design in the `designs` folder. -If you'd like to create a new plugin, run the following command: - -```sh -yarn new plugin -``` +Now you're ready to [start the development +environment](/tutorials/getting-started-linux/dev-start). ## Stand-alone development With Node.js installed, all you need to do to setup the stand-alone development environment is run this command: ```bash -npx @freesewing/new-design +npx @freesewing/studio ``` -After you've answered [some questions](#questions), it will take a while to set +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. +### 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: + +```sh +npm run add +``` + +After you've answered [some questions](#questions), it create a new +sub-folder for your design in the `designs` folder. + Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start). -:::tip -The folder will have the name you chose above. -::: - :::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.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 - -You may wish to choose `yarn` since that is the package manager -that we use when doing work in the monorepo, -and many of our tutorials are written to use `yarn`. -However, it doesn't really matter. -You can choose either `yarn` or `npm` as you wish. +- 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) ::: diff --git a/sites/dev/docs/tutorials/getting-started-linux/dev-start/readme.mdx b/sites/dev/docs/tutorials/getting-started-linux/dev-start/readme.mdx index 1577a04548d..4a25e735e5c 100644 --- a/sites/dev/docs/tutorials/getting-started-linux/dev-start/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-linux/dev-start/readme.mdx @@ -3,55 +3,70 @@ title: Start the development environment sidebar_position: 50 --- -FreeSewing provides a development environment to help you design and develop patterns. +FreeSewing provides the studio, a development environment to help you design and develop patterns. -There are two ways to run this development environment: +There are two ways to run this studio: -- [**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 +- [**Repository studio**](#repository-studio): Use this if you intend to contribute your work to FreeSewing +- [**Stand-alone studio**](#stand-alone-studio): Use this if you want to do your own thing, and not contribute to FreeSewing -## Monorepo development +## Repository Studio -Run `yarn lab` to start the development environment: +Run `npm run studio` to start the repository studio development environment: ```bash -yarn lab +npm run studio ``` -Then point your browser to http://localhost:8000 +Then point your browser to http://localhost:3000 + +Your new design will appear in the Local Designs page. :::tip -### Adding a new design +### Adding another new design -This is all you need to work on existing designs. If you'd like to add a new design, run: +This is all you need to work on existing designs. If you'd like to add another new design, run: ```bash -yarn new design +npm run add ``` -Just make sure to re-start the lab afterwards with `yarn lab` +Just make sure to re-start the repository studio afterwards with `npm run studio` + ::: -## Stand-alone development +## Stand-alone studio -You will have a new folder that has the name you picked for your design. -If you chose `test`, you will have a folder named `test`. -If you chose `banana`, you'll have a folder named `banana`. -(Within this new folder, the `design` subfolder holds your design's configuration file and source code. +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.) To start the development environment, enter the folder that was created -and run `yarn dev` (or `npm run dev` if you're using npm as a package manager). +and run `npm run start`. -Then open your browser and go to http://localhost:8000 +```bash +npm run start +``` + +Then open your browser and go to http://localhost:3000 :::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. +When you do, the pattern will update automatically in your browser. ::: +### Adding another new design + +This is all you need to work on existing designs. If you'd like to add another new design, run: + +```bash +npm run add +``` + +Just make sure to re-start the stand-alone studio afterwards with `npm run start`. + :::note ##### Yay, you're done! diff --git a/sites/dev/docs/tutorials/getting-started-linux/installing-node/readme.mdx b/sites/dev/docs/tutorials/getting-started-linux/installing-node/readme.mdx index d506696a944..eed39beba8d 100644 --- a/sites/dev/docs/tutorials/getting-started-linux/installing-node/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-linux/installing-node/readme.mdx @@ -6,10 +6,10 @@ sidebar_position: 20 Now we will use `nvm` to install Node.js. Run the following command: ```bash -nvm install lts/hydrogen +nvm install lts/iron ``` -This will install the so-called LTS version of Node.js 18 on your system. +This will install the so-called LTS version of Node.js 20 on your system. LTS versions -- short for Long Term Support -- are good Node.js versions to use because they are stable and supported for a long time. diff --git a/sites/dev/docs/tutorials/getting-started-linux/node-versions/readme.mdx b/sites/dev/docs/tutorials/getting-started-linux/node-versions/readme.mdx index 8e9de71159d..208d4501004 100644 --- a/sites/dev/docs/tutorials/getting-started-linux/node-versions/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-linux/node-versions/readme.mdx @@ -47,7 +47,7 @@ With multiple Node.js versions installed, `nvm` allows you to switch between dif versions. Just tell it which version you want to use: ```bash -nvm use lts/hydrogen +nvm use lts/iron ``` If you picked a version that is not installed, `nvm` will simply tell you diff --git a/sites/dev/docs/tutorials/getting-started-mac/dev-setup/readme.mdx b/sites/dev/docs/tutorials/getting-started-mac/dev-setup/readme.mdx index c79874869af..96ef4a30c44 100644 --- a/sites/dev/docs/tutorials/getting-started-mac/dev-setup/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-mac/dev-setup/readme.mdx @@ -3,17 +3,16 @@ title: Setting up the FreeSewing development environment sidebar_position: 40 --- -FreeSewing provides a development environment to help you design and develop -patterns. +FreeSewing provides the studio, a development environment to help you design and develop patterns. -There are two ways to run this development environment: +There are two ways to run this studio: -- [**Monorepo development**](#monorepo-development): Use this if you intend to +- [**Repository studio**](#monorepo-studio): Use this if you intend to contribute your work to FreeSewing -- [**Stand-alone development**](#stand-alone-development): Use this if you want +- [**Stand-alone studio**](#stand-alone-studio): Use this if you want to do your own thing, and not contribute to FreeSewing -## Monorepo development +## Repository studio :::note This is the recommended way for (aspiring) FreeSewing contributors @@ -22,57 +21,41 @@ This is the recommended way for (aspiring) FreeSewing contributors ### TL;DR ```bash -git clone https://github.com/freesewing/freesewing +git clone https://codeberg.org/freesewing/freesewing.git cd freesewing -yarn kickstart +npm run kickstart ``` :::tip Even better: [clone your own -fork](https://github.com/freesewing/freesewing/fork) +fork](https://codeberg.org/freesewing/freesewing/fork) ```bash -git clone https://github.com/your-username/freesewing +git clone https://codeberg.org/your-username/freesewing.git cd freesewing -yarn kickstart +npm run kickstart ``` ::: -This sets up the monorepo. If you would like to create a new design, run the +This sets up the monorepo. If you would like to create a new design or plugin, run the following command: ```sh -yarn new design -``` - -If you'd like to create a new plugin, run this variant instead: - -```sh -yarn new plugin +npm run add ``` ### Step by step :::note These docs assume you have git installed. -But if you're running macOS, you have git, right? +But if you're running on a Mac system, you have git, right? ::: -#### Install yarn - -Our repository uses yarn workspaces. So you'll need `yarn` to work with it. - -To install it run: - -```bash -npm install yarn --global -``` - #### 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 +all the changes you want. To do so, visit https://codeberg.org/freesewing/freesewing/fork #### Clone the forked repository @@ -82,81 +65,76 @@ Now that you have your very own fork, it's time to clone it locally. git clone ``` -Make sure to use the URL to your own fork, typically `https://github.com/your-username/freesewing` but +Make sure to use the URL to your own fork, typically `https://codeberg.org/your-username/freesewing.git` but obviously with your real username rather than `your-username`. #### Install dependencies -Enter the directory that was created, and run the `yarn kickstart` command: +Enter the directory that was created, and run the `npm run kickstart` command: ```bash cd freesewing -yarn kickstart +npm run kickstart ``` Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start). -## Creating a new design +### Creating a new design or plugin -If you would like to create a new design, run the following command: +If you would like to create a new design or plugin, run the following command: ```sh -yarn new design +npm run add ``` -## Creating a new plugin +After you've answered [some questions](#questions), it create a new +sub-folder for your design in the `designs` folder. -If you'd like to create a new plugin, run the following command: - -```sh -yarn new plugin -``` +Now you're ready to [start the development +environment](/tutorials/getting-started-mac/dev-start). ## Stand-alone development With Node.js installed, all you need to do to setup the stand-alone development environment is run this command: ```bash -npx @freesewing/new-design +npx @freesewing/studio ``` -After you've answered [some questions](#questions), it will take a while to set +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. -Now you're ready to [start the development -environment](/tutorials/getting-started-linux/dev-start). +### Creating a new design -:::tip -The folder will have the name you chose above. -::: +If you would like to create a new design, enter the folder that was just created and run the following command: + +```sh +npm run add +``` + +After you've answered [some questions](#questions), it create a new +sub-folder for your design in the `designs` folder. + +Now you're ready to [start the development +environment](/tutorials/getting-started-mac/dev-start). :::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.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 - -You may wish to choose `yarn` since that is the package manager -that we use when doing work in the monorepo, -and many of our tutorials are written to use `yarn`. -However, it doesn't really matter. -You can choose either `yarn` or `npm` as you wish. +- 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) ::: diff --git a/sites/dev/docs/tutorials/getting-started-mac/dev-start/readme.mdx b/sites/dev/docs/tutorials/getting-started-mac/dev-start/readme.mdx index 1577a04548d..4a25e735e5c 100644 --- a/sites/dev/docs/tutorials/getting-started-mac/dev-start/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-mac/dev-start/readme.mdx @@ -3,55 +3,70 @@ title: Start the development environment sidebar_position: 50 --- -FreeSewing provides a development environment to help you design and develop patterns. +FreeSewing provides the studio, a development environment to help you design and develop patterns. -There are two ways to run this development environment: +There are two ways to run this studio: -- [**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 +- [**Repository studio**](#repository-studio): Use this if you intend to contribute your work to FreeSewing +- [**Stand-alone studio**](#stand-alone-studio): Use this if you want to do your own thing, and not contribute to FreeSewing -## Monorepo development +## Repository Studio -Run `yarn lab` to start the development environment: +Run `npm run studio` to start the repository studio development environment: ```bash -yarn lab +npm run studio ``` -Then point your browser to http://localhost:8000 +Then point your browser to http://localhost:3000 + +Your new design will appear in the Local Designs page. :::tip -### Adding a new design +### Adding another new design -This is all you need to work on existing designs. If you'd like to add a new design, run: +This is all you need to work on existing designs. If you'd like to add another new design, run: ```bash -yarn new design +npm run add ``` -Just make sure to re-start the lab afterwards with `yarn lab` +Just make sure to re-start the repository studio afterwards with `npm run studio` + ::: -## Stand-alone development +## Stand-alone studio -You will have a new folder that has the name you picked for your design. -If you chose `test`, you will have a folder named `test`. -If you chose `banana`, you'll have a folder named `banana`. -(Within this new folder, the `design` subfolder holds your design's configuration file and source code. +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.) To start the development environment, enter the folder that was created -and run `yarn dev` (or `npm run dev` if you're using npm as a package manager). +and run `npm run start`. -Then open your browser and go to http://localhost:8000 +```bash +npm run start +``` + +Then open your browser and go to http://localhost:3000 :::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. +When you do, the pattern will update automatically in your browser. ::: +### Adding another new design + +This is all you need to work on existing designs. If you'd like to add another new design, run: + +```bash +npm run add +``` + +Just make sure to re-start the stand-alone studio afterwards with `npm run start`. + :::note ##### Yay, you're done! diff --git a/sites/dev/docs/tutorials/getting-started-mac/installing-node/readme.mdx b/sites/dev/docs/tutorials/getting-started-mac/installing-node/readme.mdx index d506696a944..eed39beba8d 100644 --- a/sites/dev/docs/tutorials/getting-started-mac/installing-node/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-mac/installing-node/readme.mdx @@ -6,10 +6,10 @@ sidebar_position: 20 Now we will use `nvm` to install Node.js. Run the following command: ```bash -nvm install lts/hydrogen +nvm install lts/iron ``` -This will install the so-called LTS version of Node.js 18 on your system. +This will install the so-called LTS version of Node.js 20 on your system. LTS versions -- short for Long Term Support -- are good Node.js versions to use because they are stable and supported for a long time. diff --git a/sites/dev/docs/tutorials/getting-started-mac/node-versions/readme.mdx b/sites/dev/docs/tutorials/getting-started-mac/node-versions/readme.mdx index fa7409296c3..208d4501004 100644 --- a/sites/dev/docs/tutorials/getting-started-mac/node-versions/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-mac/node-versions/readme.mdx @@ -47,7 +47,7 @@ With multiple Node.js versions installed, `nvm` allows you to switch between dif versions. Just tell it which version you want to use: ```bash -nvm use v10.22.1 +nvm use lts/iron ``` If you picked a version that is not installed, `nvm` will simply tell you diff --git a/sites/dev/docs/tutorials/getting-started-windows/readme.mdx b/sites/dev/docs/tutorials/getting-started-windows/readme.mdx index e612048cb2e..65bb7d3479c 100644 --- a/sites/dev/docs/tutorials/getting-started-windows/readme.mdx +++ b/sites/dev/docs/tutorials/getting-started-windows/readme.mdx @@ -55,11 +55,11 @@ 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.js (and optionally Yarn) +#### Install Node.js Now that you have NVM installed, you can install Node.js. The latest version can be installed using `nvm install default`. You can also install a specific version -using `nvm install v18.17.0`. For the purposes of debugging it can be useful to +using `nvm install v20.19.1`. For the purposes of debugging it can be useful to have the same version of Node.js installed as the main project uses, which you can then activate using `nvm use `. You can determine what version the FreeSewing project uses by checking @@ -68,16 +68,12 @@ FreeSewing project uses by checking :::warning At the time this guide was written the latest version of Node.js/npm has a bug in the dependency resolution process which causes the freesewing project -to fail to build. Use the latest LTS version (currently 18.17.0) or the specific +to fail to build. Use the latest LTS version (currently 20.19.1) or the specific version used by the main project to avoid this issue. ::: -Node.js 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 approach -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 ---global` (optional, but recommended). +Node.js comes with the Node Package Manager (npm) by default which is used to +set up the project. #### Install and configure Git (recommended) @@ -137,12 +133,12 @@ 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.js (and optionally Yarn) +### Install Node.js 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 18.17.0` and `nvm use 18.17.0` (where `18.17.0` is the full version +install 20.19.1` and `nvm use 20.19.1` (where `20.19.1` 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.js. @@ -150,20 +146,16 @@ order to activate the new version of Node.js. :::warning At the time this guide was written the latest version of Node.js/npm has a bug in the dependency resolution process which causes the freesewing project -to fail to build. Use the latest LTS version (currently 18.17.0) or the specific +to fail to build. Use the latest LTS version (currently 20.19.1 or the specific version used by the main project to avoid this issue. ::: -Node.js 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 approach -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). +Node.js comes with the Node Package Manager (npm) by default which is used to +set up the project. ## Setting up the FreeSewing development environment -In VSCode or in a terminal, navigate to the folder you wish to contain your new patterns (e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx @freesewing/new-design`. +In VSCode or in a terminal, navigate to the folder you wish to contain your new patterns (e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx @freesewing/studio`. 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 environment inside. @@ -192,14 +184,6 @@ 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 - -You may wish to choose `yarn` since that is the package manager -that we use when doing work in the monorepo, -and many of our tutorials are written to use `yarn`. -However, it doesn't really matter. -You can choose either `yarn` or `npm` as you wish. - ::: ## Start the development environment @@ -211,7 +195,7 @@ If you chose `banana`, you'll have a folder named `banana`. You can ignore all other subfolders and files; they are part of the development environment.) To start the development environment, navigate to the folder that was created -and run `yarn dev` (or `npm run dev` if you're using npm as a package manager). +and run `npm run org`. Then open your browser and go to http://localhost:8000 diff --git a/sites/dev/docs/tutorials/pattern-design/part1/new-design/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part1/new-design/readme.mdx index 0cfd2e1b3f0..b02b0793547 100644 --- a/sites/dev/docs/tutorials/pattern-design/part1/new-design/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part1/new-design/readme.mdx @@ -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: - -![The FreeSewing development environment](./nd.png) +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. ::: diff --git a/sites/dev/docs/tutorials/pattern-design/part1/nodejs/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part1/nodejs/readme.mdx index 5600b135cb6..249def14c04 100644 --- a/sites/dev/docs/tutorials/pattern-design/part1/nodejs/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part1/nodejs/readme.mdx @@ -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 diff --git a/sites/dev/docs/tutorials/pattern-design/part1/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part1/readme.mdx index 03cb888bba4..1acc688f6dd 100644 --- a/sites/dev/docs/tutorials/pattern-design/part1/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part1/readme.mdx @@ -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,23 @@ 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. - diff --git a/sites/dev/docs/tutorials/pattern-design/part1/sde/readme.mdx b/sites/dev/docs/tutorials/pattern-design/part1/sde/readme.mdx index 2ca7d18ff8c..2910a8cd869 100644 --- a/sites/dev/docs/tutorials/pattern-design/part1/sde/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/part1/sde/readme.mdx @@ -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. diff --git a/sites/dev/docs/tutorials/pattern-design/readme.mdx b/sites/dev/docs/tutorials/pattern-design/readme.mdx index 9f5ca17253c..a11bc7de5d3 100644 --- a/sites/dev/docs/tutorials/pattern-design/readme.mdx +++ b/sites/dev/docs/tutorials/pattern-design/readme.mdx @@ -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.