diff --git a/markdown/dev/howtos/environments/browser/en.md b/markdown/dev/howtos/environments/browser/en.md new file mode 100644 index 00000000000..a78d19b27fe --- /dev/null +++ b/markdown/dev/howtos/environments/browser/en.md @@ -0,0 +1,95 @@ +--- +title: FreeSewing in the browser +--- + +Thanks to the advances in browser standardisation around Javascrip +ESM modules, not to mention [the new Skypack CDN](https://www.skypack.dev/), +you can generate patterns in the browser with a few lines of Javascript. + + + +##### Use FreeSewing.org if you just want a pattern + +These instructions are intended for people who want to generate +their own patterns. If you *just want a sewing pattern* you can +get all our designs on [FreeSewing.org](https://FreeSewing.org/), +our website for makers. + + + +## High level overview + +To generate a pattern, you will need to: + + - Instantiate the pattern (`new ...`) + - Pass it the settings and measurements you want to use (`{ ... }`) + - Load the theme plugin (using `use()`) + - Draft the pattern (using `draft()`) + - Render it to SVG (using `render()`) + +Which can be done as a one-liner since `use()`, `draft()` and +`render()` are all chainable, as shown below. + +## Code example + +Below is a complete example. + + +```html + + + + FreeSewing browser example + + + + +
SVG output will appear here
+ + +``` + +## Dependencies + +If you compare this example with [our NodeJS +example](/reference/howtos/nodejs) you'll notice that you do not +need to worry about loading any dependencies. Not even `@freesewing/core` +is loaded, because Skypack will pull in all dependencies for you. + + diff --git a/markdown/dev/howtos/environments/en.md b/markdown/dev/howtos/environments/en.md new file mode 100644 index 00000000000..8bf00a574e5 --- /dev/null +++ b/markdown/dev/howtos/environments/en.md @@ -0,0 +1,6 @@ +--- +title: FreeSewing in different environments +--- + +You can use FreeSewing a different environments: + diff --git a/markdown/dev/howtos/environments/nodejs/en.md b/markdown/dev/howtos/environments/nodejs/en.md new file mode 100644 index 00000000000..31be0020200 --- /dev/null +++ b/markdown/dev/howtos/environments/nodejs/en.md @@ -0,0 +1,98 @@ +--- +title: FreeSewing in NodeJS +--- + +These instructions explain how you can generate patterns in NodeJS. +Whether it's in a backend application or on the command line, all +it takes is a few lines of code — and a couple of dependencies — to +generate a pattern. + + + +##### Use FreeSewing.org if you just want a pattern + +These instructions are intended for people who want to generate +their own patterns. If you *just want a sewing pattern* you can +get all our designs on [FreeSewing.org](https://FreeSewing.org/), +our website for makers. + + + +## High level overview + +To generate a pattern, you will need to: + + - Instantiate the pattern (`new ...`) + - Pass it the settings and measurements you want to use (`{ ... }`) + - Load the theme plugin (using `use()`) + - Draft the pattern (using `draft()`) + - Render it to SVG (using `render()`) + +Which can be done as a one-liner since `use()`, `draft()` and +`render()` are all chainable, as shown below. + +## Code example + +```js +import Aaron from '@freesewing/aaron' // Design to use +import theme from '@freesewing/plugin-theme' // SVG theme + +const svg = new Aaron( // Instantiate pattern + { // Pass in settings. See reference > core > settings + sa: 10, // Seam allowance + // ... + measurements: { // Pass in measurements + biceps: 387, + chest: 1105, + hips: 928, + hpsToWaistBack: 502, + neck: 420, + shoulderSlope: 13, + shoulderToShoulder: 481, + waistToHips: 139, + } + }) + .use(theme) // Load theme plugin + .draft() // Draft the pattern + .render() // Render to SVG + +// svg now holds the generated SVG code +console.log(svg) +``` + + + +##### Remarks on the example code + +- We are using `@freesewing/aaron` as the design, but you could use any design +- You probably want to [use your own measurements](/reference/api/settings/measurements) +or you could use `@freesewing/models` to load measurements from [our sizing grid](https://freesewing.org/sizes/) +- We are using `@freesewing/plugin-theme` to theme our SVG, but you +could [pass in your own CSS](/guides/plugins/using-hooks-without-plugin) + + + +## Dependencies + +The code above will only work if you've got the required dependencies installed on your system. +Obviously you need NodeJS, but you will also need the following packages: + + - `@freesewing/core`: Our core library + - `@freesewing/plugin-bundle`: Set of common plugins + - `@freesewing/aaron` or any design you want to use + - Any design on which the design you choose is built. In this case, Aaron depends on `@freesewing/brian` + - `@freesewing/utils` + +For the example above, your `package.json` **dependencies** section will look like this: + +```json + "dependencies": { + "@freesewing/core": "latest" + "@freesewing/aaron": "latest", + "@freesewing/brian": "latest", + "@freesewing/models": "latest", + "@freesewing/plugin-bundle": "latest", + "@freesewing/plugin-theme": "latest", + "@freesewing/utils": "latest" + } +```