1
0
Fork 0

chore: Port FreeSewing.dev to docusaurus

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

View file

@ -0,0 +1,102 @@
---
title: models
---
Published as [@freesewing/models][1], this package provides body
measurements data for a range of size models used by the FreeSewing project.
## Models
Models have names like `cisFemaleAdult34`, `cisMaleDoll30`,
and `cisFemaleGiant150`.
These names are constructed according to the 3 aspects that make up the model:
1. Gender: `cisFemale` or `cisMale`
2. Group: `Adult`, `Doll`, or `Giant`
3. Size: a number
- For Adult models, the size number is the neck circumference in millimeters, Example: `34` for 34 mm.
- For Doll and Giant models, the size number is a whole number which is the percentage to scale a base model. Examples: '30' for a 30% size reduction for a doll, and '150' for a 150% size increase for a giant.
## Available models
Available models are:
- cisFemaleAdult sizes 28, 30, 32, 34, 36, 38, 40, 42, 44, 46
- cisMaleAdult sizes 32, 34, 36, 38, 40, 42, 44, 46, 48, 50
- cisFemaleDoll sizes 10, 20, 30, 40, 50, 60
- cisMaleDoll sizes 10, 20, 30, 40, 50, 60
- cisFemaleGiant sizes 150, 200, 250, 300
- cisMaleGiant sizes 150, 200, 250, 300
## Exports
models: Objects with key-value pairs, with measurement name keys and measurement value (in mm) values.
`measurements`: Array of measurement name strings.
See [Measurements](/reference/measurements) for a list of measurement names.
`group` Array of the model group name strings (`adult`, `doll`, `giant`).
`sizes` Object with key-value pairs, with genderGroup keys and values that are Arrays of size numbers available for each genderGroup.
genderGroups: Each genderGroup is an object of key-value pairs, with size keys and model values.
Available genderGroups: `cisFemaleAdult`, `cisMaleAdult`, `cisFemaleDoll`, `cisMaleDoll`, `cisFemaleGiant`, `cisMaleGiant`.
groups: Each group is an object of key-value pairs, with gender keys and genderGroup values.
Available groups: `adult`, `doll`, `giant`.
## Installation
```sh
npm install @freesewing/models
```
## Example
In NodeJS:
```js
import { cisMaleAdult38 } from @freesewing/models
```
which will give you an object with measurement: value pairs.
The example above gives you:
```js
{
ankle: 235,
biceps: 350,
bustFront: 560,
bustPointToUnderbust: 60,
bustSpan: 190,
chesT: 1000,
crossSeam: 870
crossSeamFront: 410,
crotchDepth: 340,
heel, 360,
head: 590,
...
}
```
## Units
All measurements are in mm.
## Notes
These model measurement values were arbitrarily chosen by FreeSewing.
They do __not__ correspond to any existing statistical data or
official size charts.
You should not expect that these models will produce garments that fit
the same as clothing store sizes.
To create our models, measurement values for a base cisFemale
and cisMale model were first chosen.
Then, for all other models their measurement values were generated from
the base values using a mathematical formula which scales and adjusts
the values.
The mathematical formula is designed to produce approximate measurements
which are realistic enough to be useful.
[1]: https://www.npmjs.com/package/@freesewing/models

View file

@ -0,0 +1,29 @@
---
title: new-design
---
Published as [@freesewing/new-design][1], this is an
initializer package for a new FreeSewing design.
## Usage
```sh
npx @freesewing/new-design
```
## Notes
The package will run an interactive script and install a standalone
development environment which can be used to develop and test a new
FreeSewing design and to generate patterns from that design.
:::note RELATED
Please see our
[Getting Started tutorial](/tutorials/getting-started-linux/dev-setup#stand-alone-development)
for more information about how to set up and start the standalone
development environment.
:::
[1]: https://www.npmjs.com/package/@freesewing/new-design

View file

@ -0,0 +1,44 @@
---
title: prettier-config
---
Published as [@freesewing/prettier-config][1], this package is
FreeSewing's shared configuration for [Prettier](https://prettier.io/).
## Installation
```sh
npm install @freesewing/prettier-config
```
## Usage
Edit package.json:
```json
{
// ...
"prettier": "@freesewing/prettier-config"
}
```
## Prettier options
The Prettier options configured by this package:
| Option | Value |
|--------|-------|
| semi | `false` |
| singleQuote | `true` |
| trailingComma | "es5" |
| printWidth | 100 |
:::note RELATED
Please see the
[Prettier options documentation](https://prettier.io/docs/en/options.html)
for information about the effects of each option.
:::
[1]: https://www.npmjs.com/package/@freesewing/prettier-config

View file

@ -0,0 +1,38 @@
---
title: react-components
---
Published as [@freesewing/react-components][1], this package provides
various React components to render FreeSewing patterns, as well as
some utilities to facilitate frontend integration.
## Exports
FreeSewing uses named exports, and below is a list of all exports:
- `Pattern`: Renders a FreeSewing pattern
- `Svg`: Renders the svg section of a FreeSewing pattern
- `Defs`: Renders the defs of a FreeSewing pattern
- `Group`: Renders an SVG group of a FreeSewing pattern
- `Stack`: Renders a stack of a FreeSewing pattern
- `Part`: Renders a part of a FreeSewing pattern
- `Point`: Renders a point of a FreeSewing pattern
- `Path`: Renders a path of a FreeSewing pattern
- `Snippet`: Renders a snippet of a FreeSewing pattern
- `Grid`: Renders the grid of a FreeSewing pattern
- `Text`: Renders text of a FreeSewing pattern
- `TextOnPath`: Renders text on path of a FreeSewing pattern
- `PatternXray`: Renders the Xray/inspector variant of a FreeSewing pattern
- `utils`: A plain object holding the following utilities:
- `getProps`
- `withinPartBounds`
- `getId`
- `translateStrings`
## Installation
```sh
npm install @freesewing/react-components
```
[1]: https://www.npmjs.com/package/@freesewing/react-components

View file

@ -0,0 +1,11 @@
---
title: Packages
---
Aside from the main `core` package that provides our pattern-generating
library, FreeSewing provides other packages used to provide functionality
for our designs, websites, and infrastructure.
## Packages we maintain
<ReadMore />

View file

@ -0,0 +1,74 @@
---
title: rehype-highlight-lines
---
Published as [@freesewing/rehype-highlight-lines][1], this package provides
a [Rehype](https://github.com/rehypejs/rehype)
plugin to format highlighted and struck-out lines in code blocks.
## Installation
```sh
npm install @freesewing/rehype-highlight-lines
```
## Usage
In NodeJS:
```js
import rehypeHighlightLines from @freesewing/rehype-highlight-lines
...
rehypePlugins: [
[
rehypeHighlightLines,
{
highlightClass: ['highlight-lines', 'border-l-4'],
strikeoutClass: [
'strikeout-lines',
'bg-orange-300',
'bg-opacity-5',
'border-l-4',
'opacity-80',
'line-through',
'decoration-orange-500',
],
},
],
],
```
### Example
```js
// These 3 lines will be highlighted:
// highlight-start
const a = 1
const b = 2
const c = 3
// highlight-end
const d = 4
// These 2 lines will be struck out:
// strikeout-start
const e = 5
const f = 6
// strikeout-end
```
## Configuration
| Property | Type | Default | Description |
|----------|------|---------|-------|
| commentTag | String | 'span' | Tag that identifies a comment. |
| commentClass | String | 'hljs-comment' | CSS class that identifies a comment.|
| openingCommentHighlight | String | 'highlight-start' | Comment text to start formatting lines as highlighted. |
| closingCommentHighlight | String | 'highlight-end' | Comment text to stop formatting lines as highlighted. |
| openingCommentStrikeout | String | 'strikeout-start' | Comment text to start formatting lines as struck-out. |
| closingCommentStrikeout | String | 'strikeout-end' | Comment text to stop formatting lines as struck-out. |
| highlightTag | String | 'section' | Tag to apply to the block of highlighted or struck-out lines. |
| highlightClass | Array|String | 'highlight-lines' | CSS classes to apply to highlighted lines. |
| strikeoutClass | Array|String | 'strikeout-lines' | CSS classes to apply to struck-out lines. |
| swallow | Boolean | `true` | Remove extra linebreaks before the start of highlighted/struck-out lines. |
[1]: https://www.npmjs.com/package/@freesewing/rehype-highlight-lines

View file

@ -0,0 +1,76 @@
---
title: rehype-jargon
---
Published as [@freesewing/rehype-jargon][1], this package provides
a [Rehype](https://github.com/rehypejs/rehype)
plugin for adding HTML markup for jargon terms.
It allows you to use jargon in your markdown/mdx/html content and use
a centrally managed file of jargon terms and their definitions.
## Installation
```sh
npm install @freesewing/rehype-jargon
```
## Usage
In file `jargon.mjs`:
```js
export const jargon = {
term: '<b>term</b> has this description',
term2: 'A <i>differenti</i> description',
}
```
In NodeJS:
```js
import rehypeJargon from @freesewing/rehype-jargon
import { jargon } from './jargon.mjs'
...
rehypePlugins: [
[rehypeJargon, { jargon: jargon }],
],
```
### Example
Here is an example of _jargon_ in markdown.
## Configuration
| Property | Type | Default | Description |
|----------|------|---------|-------|
| jargon | Object | | Key/Value pairs where the key is a jargon term and the value is the jargon description. The description is a string that can contain HTML tags. Required. |
| transform | Function | (see below) | Given the jargon term and description, returns a string with the final HTML to output. |
### Default transform function
The default `transform` function is:
```js
(term, html) =>
`<span class="jargon-term">${term}<span class="jargon-info">${html}</span></span>`
```
The default `transform` function applies these CSS classes:
- `jargon-term` is applied to jargon terms
- `jargon-info` is applied to jargon descriptions
You can style your jargon by adding styles to these CSS classes.
## Notes
- Markup will be added to jargon only if the terms are _emphasized_.
- Keys should be in all lowercase characters in the jargon file.
This is because terms are converted to lowercase before they are matched
against the jargon file.
- How terms are capitalized does not matter, for the same reason.
- If you use HTML in your jargon descriptions, use only inline elements such as adding bold/italic formatting and inserting links.
[1]: https://www.npmjs.com/package/@freesewing/rehype-jargon

View file

@ -0,0 +1,61 @@
---
title: snapseries
---
Published as [@freesewing/snapseries][1], this package provides series
of common sizes for elastics and zippers and series of common intervals
to be used with snapped percentage options.
## Exports
All exports are plain objects with `metric` and `imperial` properties
that can be used as the `snap` property for snapped percentage options.
Some exports have `metric` and `imperial` properties that are
arrays of numbers.
These exports and their properties are:
- `elastics`: Arrays of common elastic widths
- `zippers`: Arrays of common zipper lengths
Other exports have `metric` and `imperial` properties that are
numbers to allow options to be _snapped_ to multiples of the value.
These exports and properties are:
- `smallSteps`: Intervals of 1 mm or 1/32 inch
- `steps`: Intervals of 5 mm or 1/8 inch
- `bigSteps`: Intervals of 10 mm or 1/2 inch
## Installation
```sh
npm install @freesewing/snapseries
```
## Example
In NodeJS:
```js
import { elastics } from @freesewing/snapseries
myOption: {
pct: 10,
min: 5
max: 35,
snap: elasitcs,
}
```
## Units
All measurements are in mm.
:::note RELATED
Please see
[Snapped percentage options](/reference/api/part/config/options/pct/snap)
to learn more about how snapped percentage options are used.
:::
[1]: https://www.npmjs.com/package/@freesewing/snapseries