fix(docs): Update Guides documentation 2
This commit is contained in:
parent
d0415b33a5
commit
7cb6f11882
31 changed files with 81 additions and 81 deletions
|
@ -3,7 +3,7 @@ title: Construct paths counter-clockwise
|
|||
order: 70
|
||||
---
|
||||
|
||||
Construct your paths counter-clockwise. You have to pick a direction anyway, and going
|
||||
Construct your paths _counter-clockwise_ (anti-clockwise). You have to pick a direction anyway, and going
|
||||
counter-clockwise is a bit of a convention.
|
||||
|
||||
This applies both to naming points (specifically the control points of curves)
|
||||
|
@ -16,8 +16,8 @@ of (a part of) a garment.
|
|||
So pick a point, and make your way around counter-clockwise.
|
||||
|
||||
When naming control points for curves, re-use the name of the point they are attached to
|
||||
and add `Cp1` to the control point before and `Cp2` to the control point after the point if
|
||||
, once again, you'd follow your path counter-clockwise.
|
||||
and add `Cp1` to the control point before and `Cp2` to the control point after the point if,
|
||||
once again, you follow your path counter-clockwise.
|
||||
|
||||
For example:
|
||||
|
||||
|
|
|
@ -3,7 +3,8 @@ title: Re-use CSS classes
|
|||
order: 30
|
||||
---
|
||||
|
||||
While you can style your pattern however you want, try to re-use the CSS class names that
|
||||
are in use in our default [theme plugin](/reference/plugins/theme).
|
||||
While you can style your pattern however you want, try to re-use the
|
||||
[CSS class names](/reference/css) that
|
||||
are in use in our default `@freesewing/plugin-theme` plugin.
|
||||
|
||||
Doing so will ensure consistent styling for patterns.
|
||||
|
|
|
@ -5,14 +5,14 @@ order: 60
|
|||
|
||||
Don't insert literal text in your patterns. Instead, insert a key that can then be translated.
|
||||
|
||||
For example, if you want to put _Finish with bias tape_ on your pattern, don't be
|
||||
For example, if you want to put "_Finish with bias tape_" on your pattern, don't be
|
||||
tempted to do this:
|
||||
|
||||
```js
|
||||
path.seam.attr("data-text", "Finish with bias tape");
|
||||
```
|
||||
|
||||
That (English) string is now hard-coded in your pattern. As freesewing supports
|
||||
That (English) string is now hard-coded in your pattern. As FreeSewing supports
|
||||
translation out of the box, it would be a real shame not to make use of it.
|
||||
|
||||
Instead, insert a key to identify the string:
|
||||
|
@ -21,6 +21,10 @@ Instead, insert a key to identify the string:
|
|||
path.seam.attr("data-text", "finishWithBiasTape");
|
||||
```
|
||||
|
||||
This way, it can be translated.
|
||||
This way, different strings for different languages can be associated with
|
||||
the key, allowing translated text to be used.
|
||||
|
||||
You can find and browse the translations and available translation keys [in the freesewing/freesewing project](https://github.com/freesewing/freesewing/tree/develop/packages/i18n/src/locales).
|
||||
You can find and browse the translations and available translation keys in the
|
||||
[freesewing/freesewing project on GitHub][1].
|
||||
|
||||
[1]: https://github.com/freesewing/freesewing/tree/develop/packages/i18n/src/locales
|
||||
|
|
|
@ -10,6 +10,7 @@ A violation through a single incident or series of actions.
|
|||
##### Consequence
|
||||
|
||||
A warning with consequences for continued behavior.
|
||||
|
||||
No interaction with the people involved, including unsolicited
|
||||
interaction with those enforcing the Code of Conduct, for a
|
||||
specified period of time. This includes avoiding interactions
|
||||
|
|
|
@ -3,7 +3,7 @@ title: Scope
|
|||
order: 40
|
||||
---
|
||||
|
||||
This Code of Conduct applies within all FreeSewing community spaces, and also applies
|
||||
This Code of Conduct applies within all FreeSewing community spaces and also applies
|
||||
when an individual is officially representing the FreeSewing community in public spaces.
|
||||
|
||||
Examples of representing our community include using an official e-mail address,
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
title: How we structure our documentation
|
||||
---
|
||||
|
||||
Whether you're writing documenation for FreeSewing, or merely trying
|
||||
Whether you're writing documentation for FreeSewing or merely trying
|
||||
to find what you are looking for, understanding how we structure our
|
||||
documentation can help you find your feet, and figure out what goes where.
|
||||
documentation can help you find your feet and figure out what goes where.
|
||||
|
||||
## Types of documentation
|
||||
|
||||
|
@ -16,7 +16,7 @@ Our documentation is divided into four different types:
|
|||
- [**Reference**](/reference) holds technical descriptions of the underlying technology and how to make use of it.
|
||||
|
||||
Each time you write documentation, you have to ask yourself: Is it a tutorial? Is it a Guide?
|
||||
Is it a Howto? Or is it Reference documentation.
|
||||
Is it a Howto? Or, is it Reference documentation?
|
||||
|
||||
If you find it hard to answer that question, the illustration below might help you figure out
|
||||
where your documentation should go based on what it's trying to accomplish:
|
||||
|
@ -26,9 +26,9 @@ structure](docs.png "A visual representation of how our documentation is structu
|
|||
|
||||
- Write a **Tutorial** is your aim is to help people learn the platform
|
||||
- Write a **Guide** if your aim is to further people's understanding of a topic by going a bit deeper
|
||||
- Write a **Howto** if your ain is to help people accomplish a task
|
||||
- Write a **Howto** if your aim is to help people accomplish a task
|
||||
- Write **Reference** documentation to detail how things work under the hood
|
||||
- Refer people to **Discord or Github** for things that are not (yet) covered in our documentation
|
||||
- Refer people to **Discord** or **GitHub** for things that are not (yet) covered in our documentation
|
||||
|
||||
<Note>
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@ You can find a list of all FreeSewing guides below:
|
|||
|
||||
Guides tell a story to further your understanding of a specific topic.
|
||||
|
||||
Guides and howtos are on a spectrum with howtos being terse _do-this-then-that_ recipes, whereas
|
||||
Guides and Howtos are on a spectrum with Howtos being terse _do-this-then-that_ recipes, whereas
|
||||
guides take more time to explain in-depth what is being done and why.
|
||||
|
||||
For more details, refer to [How we structure our documentation](/guides/docs).
|
||||
|
|
|
@ -38,7 +38,7 @@ let me = 'you'
|
|||
|
||||
The following language codes are supported:
|
||||
|
||||
- `js` for Javascript code
|
||||
- `js` for JavaScript code
|
||||
- `markdown` for Markdown
|
||||
- `html` for HTML
|
||||
- `svg` for SVG
|
||||
|
|
|
@ -4,7 +4,7 @@ order: 900
|
|||
---
|
||||
|
||||
Markdown is a lightweight markup language with plain text formatting syntax.
|
||||
It is designed to be easily readable by humans, and computers alike.
|
||||
It is designed to be easily readable by humans and computers alike.
|
||||
|
||||
Markdown is often used to format documentation, online comments,
|
||||
or anywhere where you want rich text while using a plain text editor.
|
||||
|
|
|
@ -109,7 +109,7 @@ consectetur adipisci elit,
|
|||
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
|
||||
```
|
||||
|
||||
If you're using any markdown syntax within a custom component you want to also
|
||||
If you're using any Markdown syntax within a custom component you want to also
|
||||
leave an empty line at the start and end of your component.
|
||||
|
||||
```markdown
|
||||
|
|
|
@ -18,7 +18,7 @@ followed by a space and the image title between quotes.
|
|||
|
||||
<Tip>
|
||||
|
||||
##### Images go in the same folder as your markdown file
|
||||
##### Images go in the same folder as your Markdown file
|
||||
|
||||
The convention is to always place your images in the same folder as the
|
||||
text where you are including the image. That way, you just need to specify
|
||||
|
|
|
@ -3,7 +3,7 @@ title: Using jargon
|
|||
order: yyy
|
||||
---
|
||||
|
||||
Jargon are terminology that could throw off new users.
|
||||
Jargon are terms that could throw off new users.
|
||||
Rather than create a glossary on every page, we use a plugin to manage
|
||||
jargon terms for us. This page shows you how to use it.
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@ title: Line breaks
|
|||
order: 20
|
||||
---
|
||||
|
||||
If you want to force a linebreak, but not a new paragraph,
|
||||
If you want to force a line break but not a new paragraph,
|
||||
simply leave 2 spaces at the end of the line.
|
||||
|
||||
```md
|
||||
|
|
|
@ -29,11 +29,11 @@ See [the reference documentation][1] on [freesewing.dev][2]
|
|||
You don't have to use numbers, but can also use named references.
|
||||
|
||||
```md
|
||||
We moved the markdown content to [our monorepo][monorepo]
|
||||
We moved the Markdown content to [our monorepo][monorepo]
|
||||
|
||||
[monorepo]: https://github.com/freesewing/freesewing
|
||||
```
|
||||
|
||||
We moved the markdown content to [our monorepo][monorepo]
|
||||
We moved the Markdown content to [our monorepo][monorepo]
|
||||
|
||||
[monorepo]: https://github.com/freesewing/freesewing
|
||||
|
|
|
@ -4,7 +4,7 @@ order: 120
|
|||
---
|
||||
|
||||
A pattern is a container for a bunch of parts. And parts are in turn a
|
||||
container for the the points, paths, and snippets of (a part of) your pattern.
|
||||
container for the points, paths, and snippets of (a part of) your pattern.
|
||||
Parts can be re-used and mixed and matched to create other patterns, a powerful
|
||||
concept to build a pattern library.
|
||||
|
||||
|
|
|
@ -110,10 +110,12 @@ Understanding that each drawing operation builds upon the next one is an importa
|
|||
|
||||
<Tip>
|
||||
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing) has a lot of
|
||||
paths in it. Each box, the arrows, the lines in the React logo, and so on.
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing)
|
||||
has a lot of paths in it.
|
||||
Each box is a path made of 4 lines, and every text label is anchored on a path
|
||||
containing a hidden line.
|
||||
|
||||
Click the **X-Ray** tab to reveal them.
|
||||
Click the **X-Ray** tab to reveal some of the lines in the paths.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -3,10 +3,6 @@ title: Pattern
|
|||
order: 80
|
||||
---
|
||||
|
||||
<Example part="docs_overview" options_focus="Pattern">
|
||||
The pattern you create will be a constructor for instances of your pattern
|
||||
</Example>
|
||||
|
||||
Last but not least, we've arrived at the level of the pattern itself.
|
||||
The pattern is a container that holds all your parts, along with the configuration
|
||||
and the store.
|
||||
|
@ -16,4 +12,4 @@ input and will return a new instance of your pattern.
|
|||
|
||||
That pattern instance will have a `draft()` method which will do the actual work of
|
||||
drafting the pattern. Once drafted, you can either call the `render()` method on
|
||||
the pattern instance, or pass it to [our React component](/packages/components) to render it in the browser.
|
||||
the pattern instance, or pass it to our React component to render it in the browser.
|
||||
|
|
|
@ -207,8 +207,11 @@ This is illustrated below:
|
|||
|
||||
## One set is plenty
|
||||
|
||||
In the vast majority of cases, a pattern will only have one set of settings. As such, multiset support is not something you need to be intimately familiar with.
|
||||
But it is good to know it exists, and explain certain things that might seem _odd_ if you are unaware of multiset support, such as the fact that there's a pattern-wide store, and a different store per set, the so-called setStore(s).
|
||||
In the vast majority of cases, a pattern will only have one set of settings.
|
||||
As such, multiset support is not something you need to be intimately familiar with.
|
||||
But it is good to know it exists and explains certain things that might seem
|
||||
_odd_ if you were unaware of multiset support, such as the fact that there's a
|
||||
pattern-wide store and a different store per set, the so-called _setStore(s)_.
|
||||
|
||||
Below is an illustration of a pattern with a single set of settings which, once again, is the vast majority of use cases:
|
||||
|
||||
|
|
|
@ -90,15 +90,6 @@ Each snippet must have:
|
|||
```
|
||||
</Example>
|
||||
|
||||
<Tip>
|
||||
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing) has a lot of
|
||||
paths in it. Each box, the arrows, the lines in the React logo, and so on.
|
||||
|
||||
Click the **X-Ray** tab to reveal them.
|
||||
|
||||
</Tip>
|
||||
|
||||
Since our example image does not have any snippets in it, here's an example
|
||||
of a `button` snippet:
|
||||
|
||||
|
|
|
@ -3,12 +3,12 @@ title: Stacks
|
|||
order: 110
|
||||
---
|
||||
|
||||
Stacks come into play when layouting a pattern.
|
||||
Stacks come into play when laying out a pattern.
|
||||
The FreeSewing core library, by default, will handle the layout of a pattern
|
||||
for you by placing all parts next to each other in as small a space as
|
||||
possible.
|
||||
|
||||
That is _typically_ what you want, but not always. For example, when sampling,
|
||||
That is _typically_ what you want, but not always. For example, when sampling
|
||||
you want parts to be stacked on top of each other:
|
||||
|
||||
<Example settings="sample: { type: measurement, measurement: head }" withHead caption="A simple example of sampling the `head` measurement">
|
||||
|
@ -40,7 +40,7 @@ you want parts to be stacked on top of each other:
|
|||
```
|
||||
</Example>
|
||||
|
||||
Under the hood, sampling uses multiple sets of settings, and then uses stacks
|
||||
Under the hood, sampling uses multiple sets of settings and then uses stacks
|
||||
to place them on top of each other. But this functionality is also available
|
||||
to patterns designers who want to use it.
|
||||
|
||||
|
|
|
@ -5,15 +5,15 @@ order: 60
|
|||
|
||||
The store in a FreeSewing pattern provides shared key-value storage.
|
||||
If you have some information in one part that you want to make available
|
||||
outside that part (in another part) you can save it to the store.
|
||||
outside that part (to share it with another part) you can save it to the store.
|
||||
|
||||
There are two types of stores:
|
||||
|
||||
- A pattern-wide store that
|
||||
- A pattern-wide store that is shared across all parts in all sets
|
||||
- A store per set that is shared across parts in that set
|
||||
|
||||
When you interact with a store in your part code, it is almost certainly the
|
||||
so-called setStore, the store that is shared accross parts in the set.
|
||||
so-called setStore, the store that is shared across parts in the set.
|
||||
|
||||
The pattern-wide store is used for pattern initialization and storing logs and
|
||||
other data in the early stages of the pattern lifecycle.
|
||||
|
|
|
@ -15,7 +15,7 @@ A FreeSewing plugin can extend FreeSewing in 3 different ways:
|
|||
We have [a list of plugins](/reference/plugins/) that we maintain, but
|
||||
if you can't find what you're looking for, you can write your own plugin.
|
||||
|
||||
If you plan on doing that, or if you would like to understand how plugins work,
|
||||
If you plan on doing that or if you would like to understand how plugins work,
|
||||
this guide is for you.
|
||||
|
||||
We'll cover the following topics:
|
||||
|
|
|
@ -9,7 +9,7 @@ lifecycle.
|
|||
## Signature
|
||||
|
||||
To provide one or more hooks, your plugin should have a `hooks` property that
|
||||
is an object where the keys are the lifecycle hook name, and the value holds a
|
||||
is an object where the keys are the lifecycle hook name and the value holds a
|
||||
method. When the lifecycle hook is triggered, your method will be called.
|
||||
|
||||
```mjs
|
||||
|
|
|
@ -3,7 +3,8 @@ title: Loading plugins
|
|||
order: 140
|
||||
---
|
||||
|
||||
Plugins can be loaded at build time and added to the design. Or at run time and added to an instantiated pattern.
|
||||
Plugins can be loaded at build time and added to the design.
|
||||
Or, they can be added at run time and added to an instantiated pattern.
|
||||
|
||||
To load a plugin at build time, it should be added to [the `plugins` key of the part configuration](/reference/api/part/config/plugins).
|
||||
|
||||
|
|
|
@ -29,7 +29,7 @@ const myPlugin = {
|
|||
All macros receive two arguments:
|
||||
|
||||
- `so`: A plain object holding configuration object passed to the macro
|
||||
- `props`: The same object as passed to the Part.draft()` method that you can destructure
|
||||
- `props`: The same object as passed to the [`Part.draft()`](/reference/api/part/draft) method that you can destructure
|
||||
|
||||
<Note>
|
||||
###### Macros take only 1 argument
|
||||
|
|
|
@ -40,16 +40,17 @@ All store methods receive at least two arguments:
|
|||
## Overwriting store methods
|
||||
|
||||
You are allowed to overwrite existing store methods.
|
||||
As it happens, this is how you should implement a custom logging solution, but overwriting the logging methods under the store's `log` key,
|
||||
As it happens, this is how you should implement a custom logging solution,
|
||||
by overwriting the logging methods under the store's `log` key,
|
||||
|
||||
However, the following methods cannot be overwritten:
|
||||
However, the following store methods cannot be overwritten:
|
||||
|
||||
- `extend`
|
||||
- `get`
|
||||
- `push`
|
||||
- `set`
|
||||
- `setIfUnset`
|
||||
- `unset`
|
||||
- `extend()`
|
||||
- `get()`
|
||||
- `push()`
|
||||
- `set()`
|
||||
- `setIfUnset()`
|
||||
- `unset()`
|
||||
|
||||
## Return value
|
||||
|
||||
|
|
|
@ -18,8 +18,8 @@ Object plugin = {
|
|||
A plugin **must** have the `name` and `version` properties.
|
||||
The other properties are optional, and they map to the three different functionalities macros can provide:
|
||||
|
||||
- `hooks`: Holds an object with lifecycle hooks the plugin wants to hook into
|
||||
- `macros`: Holds and object with macros the plugin provides
|
||||
- `store`: Holds and Array with store methods the plugin provides.
|
||||
- [`hooks`](/guides/plugins/hooks): Holds an object with lifecycle hooks the plugin wants to hook into
|
||||
- [`macros`](/guides/plugins/macros): Holds and object with macros the plugin provides
|
||||
- [`store`](/guides/plugins/store): Holds and Array with store methods the plugin provides.
|
||||
|
||||
Click on the links above for more details on the structure of these properties.
|
||||
|
|
|
@ -41,7 +41,7 @@ The following illustration does a great job at explaining how they are construct
|
|||
|
||||

|
||||
|
||||
You don't need understand the mathematics behind Bézier Curves.
|
||||
You don't need to understand the mathematics behind Bézier Curves.
|
||||
As long as you intuitively _get_ how the control points influence the curve, you're good to go.
|
||||
|
||||
<Note>
|
||||
|
|
|
@ -6,7 +6,7 @@ Drawing lines and curves on paper is a skill most people have been practicing si
|
|||
In FreeSewing, we draw lines and curves with code, which is a bit more abstract
|
||||
but doesn't have to be complicated once you understand a few basic building blocks.
|
||||
|
||||
Understanding the concepts that are involved in designing sewing patterns in code will pay dividents later.
|
||||
Understanding the concepts that are involved in designing sewing patterns in code will pay dividends later.
|
||||
That is why we recommend you familiarize yourself with the following topics:
|
||||
|
||||
<ReadMore list />
|
||||
|
@ -16,10 +16,10 @@ That is why we recommend you familiarize yourself with the following topics:
|
|||
##### There's no need to know everything
|
||||
|
||||
FreeSewing sits at the intersection of the world of makers and developers.
|
||||
If your background is in development, you will need no explaining what SVG is, but might not
|
||||
If your background is in development, you will need no explaining what SVG is but might not
|
||||
know much about designing sewing patterns.
|
||||
If on the other hand your background is in sewing or pattern design, you might wonder what
|
||||
the heck Node JS is and why you should care.
|
||||
the heck NodeJS is and why you should care.
|
||||
|
||||
Few people straddle both worlds, so as you start using FreeSewing, chances are
|
||||
you'll learn a few new things along the way.
|
||||
|
|
|
@ -3,12 +3,12 @@ title: Units in FreeSewing
|
|||
order: 40
|
||||
---
|
||||
|
||||
FreeSewing uses millimeter for all its internal units.
|
||||
FreeSewing uses _millimeter (mm)_ for all its internal units.
|
||||
We do support both imperial and metrics units, which are displayed
|
||||
as cm or inch, but under the hood everything is handled in millimeter.
|
||||
as _cm_ or _inch_, but under the hood everything is handled in millimeter.
|
||||
|
||||
So as a pattern designer, you will work with mm.
|
||||
When you write `1`, that’s one mm. When you write `7.8`, that’s 7.8mm.
|
||||
When you write `1`, that’s one millimeter. When you write `7.8`, that’s 7.8 mm.
|
||||
|
||||
While you can use cm or inch on the FreeSewing website, that is merely a layer of
|
||||
abstration on top of the internal units, which are always mm.
|
||||
abstraction on top of the internal units, which are always mm.
|
||||
|
|
|
@ -19,11 +19,11 @@ website(s) or other more user-facing aspects.
|
|||
|
||||
FreeSewing is now ESM only. We no longer publish CJS modules.
|
||||
|
||||
To make this explicit, we now use `.mjs` as file extention for our source code.
|
||||
To make this explicit, we now use the `.mjs` file extension for our source code, instead of `js`.
|
||||
|
||||
### Named exports only
|
||||
|
||||
All our published packages now have only named exports, and no longer any
|
||||
All our published packages now have only named exports and no longer have any
|
||||
default exports.
|
||||
|
||||
Please refer to [the reference documentation](/reference/api#named-exports) to see what
|
||||
|
@ -38,7 +38,7 @@ FreeSewing now requires NodeJS version 16 or more recent.
|
|||
The following packages have been removed in v3:
|
||||
|
||||
- **@freesewing/pattern-info**
|
||||
- **gatsby-remark-jargon**: We no longer use gatsby
|
||||
- **gatsby-remark-jargon**: We no longer use Gatsby
|
||||
- **remark-jargon**: Use rehype-jargon instead
|
||||
- **@freesewing/mui-theme**: We no longer use Material-UI
|
||||
- **@freesewing/css-theme**: We now use TailwindCSS
|
||||
|
@ -69,9 +69,9 @@ Refer to [the `Store.log` documentation](/reference/api/store/log) for all detai
|
|||
|
||||
### Design configuration
|
||||
|
||||
In v2, a design had its own confifuration which contained all the info about
|
||||
In v2, a design had its own configuration which contained all the info about
|
||||
the design. In v3, all of that is migrated to the part level. A design is now
|
||||
merely a container of parts, but also allows you to pass in additional data:
|
||||
merely a container of parts, but it also allows you to pass in additional data:
|
||||
|
||||
```js
|
||||
import { Design } from '@freesewing/core' // Note: named export
|
||||
|
@ -88,7 +88,7 @@ export const MyDesign = new Design({
|
|||
})
|
||||
```
|
||||
|
||||
You pass the Design contructor a single object where the only required property
|
||||
You pass the Design constructor a single object where the only required property
|
||||
is the `parts` key that holds an array of part objects. The `data` property is
|
||||
optional, and allows you to add data/information to the design that you can use
|
||||
to facilitate frontend integration or a host of other things. Anything under
|
||||
|
@ -116,6 +116,6 @@ Apart from being attached at the part level, changes in comparison to v2 include
|
|||
|
||||
### File and directory structure changes
|
||||
|
||||
- We no longer use a `config` folder, instead keep the config next to the parts.
|
||||
- We use `.mjs` extentions rather than `.js`
|
||||
- Designs no longer use a `config` folder, instead keeping the config in the parts files.
|
||||
- We use `.mjs` extensions rather than `.js`
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue