VSinerva/freesewing
1
0
Fork 0
Code Activity

chore: Port FreeSewing.dev to docusaurus

Browse source 
The replaces the NextJS site powering FreeSewing.dev with a Docusaurus
setup. It's part of my efforts to simplify FreeSewing's setup so we can
focus on our core value proposition.
This commit is contained in:
Joost De Cock 2024-09-28 13:13:48 +02:00
parent 497633d1d3
commit ab3204f9f1
692 changed files with 11037 additions and 20674 deletions
Download patch file Download diff file Expand all files Collapse all files

93
sites/dev/docs/howtos/environments/browser/readme.mdx Normal file
View file

@ -0,0 +1,93 @@
---
title: FreeSewing in the browser
---
Thanks to the advances in browser standardisation around JavaScript
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 using FreeSewing packages.
If you _just want a sewing pattern created for you,_
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
<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 { pluginTheme as 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/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 Node.js
example](/howtos/environments/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.

95
sites/dev/docs/howtos/environments/nodejs/readme.mdx Normal file
View file

@ -0,0 +1,95 @@
---
title: FreeSewing in Node.js
---
These instructions explain how you can generate patterns in Node.js.
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.
:::tip
##### Use FreeSewing.org if you just want a pattern
These instructions are intended for people who want to generate
their own patterns using FreeSewing packages.
If you _just want a sewing pattern created for you,_
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 { pluginTheme as 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)
```
:::note
##### 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/settings/measurements)
or you could use [our curated measurements sets](https://freesewing.org/curated-sets) to load measurements.
- We are using `@freesewing/plugin-theme` to theme our SVG, but you
could [pass in your own CSS](/reference/api/svg/style)
:::
## Dependencies
The code above will only work if you've got the required dependencies installed on your system.
Obviously you need Node.js, 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`
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/plugin-theme": "latest"
}
```

7
sites/dev/docs/howtos/environments/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: FreeSewing in different environments
---
You can use FreeSewing a different environments:
<ReadMore />