feat(markdown): Added dev docs for different environments

2021-12-28 11:03:28 +01:00 · 2021-12-28 11:03:28 +01:00 · a91726ea2f
commit a91726ea2f
parent 01cf9d5254
3 changed files with 199 additions and 0 deletions
--- a/markdown/dev/howtos/environments/browser/en.md
+++ 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.
+
+<Tip>
+
+##### 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.
+
+</Tip> 
+
+## 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
+<html>
+  <head>
+    <!-- This entire head tag is optional/cosmetic -->
+    <title>FreeSewing browser example</title>
+    <style>
+      body {
+        font-size: 24px;
+        padding: 1rem;
+      }
+      svg {
+        max-width: calc(100vw - 4rem);
+        max-height: calc(100vh - 4rem);
+        margin: 0 auto;
+      }
+      #container {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import Aaron from 'https://cdn.skypack.dev/@freesewing/aaron';
+      import theme from 'https://cdn.skypack.dev/@freesewing/plugin-theme';
+      const svg = new Aaron({ 
+        sa: 10, // Seam allowance
+        paperless: true, // Enable paperless mode
+        // More settings, see: https://FreeSewing.dev/reference/api/settings
+        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
+      // Update DOM
+      document.getElementById("container").innerHTML = svg
+    </script>
+    <div id='container'>SVG output will appear here</div>
+  </body>
+</html>
+```
+
+## 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.
+
+