1
0
Fork 0

feat: Flat import of markdown repo

This is a flat (without history) import of (some of) the content
from our markdown module.

We've imported this without history because the repo contains our
blog posts and showcases posts content prior to porting them to strapi.

Since this contains many images, it would balloon the size of this repo
to import the full history.

Instead, please refer to the history of the (archived) markdown repo
at: https://github.com/freesewing/markdown
This commit is contained in:
Joost De Cock 2021-08-25 16:09:31 +02:00
parent 1671a896b5
commit b34a2ee2ed
6132 changed files with 244167 additions and 0 deletions

View file

@ -0,0 +1,80 @@
---
title: 140|Adding options
---
You know what your bib should look like, and you have the *head* measurement to work with. But there's still a number of choices you have to make:
- How large should the neck opening be?
- How wide should the bib be?
- How long should the bib be?
You can make all of these choices for the user and set them in stone, so to speak.
But since you're designing a pattern in code, it's trivial to make your pattern flexible and let the user decide. All you have to do is add options to your pattern.
## Add the neckRatio option
The first option we're going to add controls the ratio between the neck opening and the head circumference. Let's call it `neckRatio`.
Open the config file at `config/index.js` and add this to the options:
```js
options: {
// Remove this size option
//size: { pct: 50, min: 10, max: 100 }
// And add the neckRatio options
neckRatio: { pct: 80, min: 70, max: 90 },
}
```
Can you guess what it means?
- We've added a option of type percentage
- Its minimum value is 70%
- Its maximum value is 90%
- Its default value is 80%
<Note>
There are different types of options, but percentages are the most common ones.
They are all documentation [in the API docs](/reference/api/config/#options).
</Note>
Let's do something similar for the width and length of our bib:
```js
options: {
neckRatio: { pct: 80, min: 70, max: 90 },
widthRatio: { pct: 45, min: 35, max: 55 },
lengthRatio: { pct: 50, min: 40, max: 65 },
}
```
- You've added `widthRatio` and `lengthRatio` options
- You've given all options sensible defauls
- You've given all options sensible maximum and minimum boundaries
<Note>
Later, you'll test-drive your pattern to see how it behaves when you adapt the options
between their minimum and maximum values. At that time, you can still tweak these values.
</Note>
Before you close the `config/index.js` file, make sure to update the `optionGroups` entry as follows:
```js
optionGroups: {
fit: ["neckRatio", "widthRatio", "lengthRatio"]
},
```
<Note>
The `optionGroups` entry does not do anything for your pattern as such.
Instead it signals to the frontend that this is how options should be grouped together and presented to the user.
</Note>
Because you have removed the `box` option, the pattern no longer draws a box. So let's start drawing your bib instead.

View file

@ -0,0 +1,85 @@
---
title: Adding options
order: 140
---
You know what your bib should look like, and you have the *head* measurement
to work with. But there's still a number of choices you have to make:
- How large should the neck opening be?
- How wide should the bib be?
- How long should the bib be?
You can make all of these choices for the user and set them in stone, so to speak.
But since you're designing a pattern in code, it's trivial to make your pattern
flexible and let the user decide. All you have to do is add options to your pattern.
## Add the neckRatio option
The first option we're going to add controls the ratio between the neck opening
and the head circumference. Let's call it `neckRatio`.
Open the config file at `config/index.js` and add this to the options:
```js
options: {
// Remove this size option
//size: { pct: 50, min: 10, max: 100 }
// And add the neckRatio options
neckRatio: { pct: 80, min: 70, max: 90 },
}
```
Can you guess what it means?
- We've added a option of type percentage
- Its minimum value is 70%
- Its maximum value is 90%
- Its default value is 80%
<Note>
There are different types of options, but percentages are the most common ones.
They are all documented [in the API docs](/reference/config/options).
</Note>
Let's do something similar for the width and length of our bib:
```js
options: {
neckRatio: { pct: 80, min: 70, max: 90 },
widthRatio: { pct: 45, min: 35, max: 55 },
lengthRatio: { pct: 50, min: 40, max: 65 },
}
```
- You've added `widthRatio` and `lengthRatio` options
- You've given all options sensible defauls
- You've given all options sensible maximum and minimum boundaries
<Note>
Later, you'll test-drive your pattern to see how it behaves when you adapt the options
between their minimum and maximum values. At that time, you can still tweak these values.
</Note>
Before you close the `config/index.js` file, make sure to update the `optionGroups` entry as follows:
```js
optionGroups: {
fit: ["neckRatio", "widthRatio", "lengthRatio"]
},
```
<Note>
The `optionGroups` entry does not do anything for your pattern as such.
Instead it signals to the frontend that this is how options should be grouped together and presented to the user.
</Note>
Because you have removed the `box` option, the pattern no longer draws a box.
So let's start drawing your bib instead.

View file

@ -0,0 +1,80 @@
---
title: 140|Adding options
---
You know what your bib should look like, and you have the *head* measurement to work with. But there's still a number of choices you have to make:
- How large should the neck opening be?
- How wide should the bib be?
- How long should the bib be?
You can make all of these choices for the user and set them in stone, so to speak.
But since you're designing a pattern in code, it's trivial to make your pattern flexible and let the user decide. All you have to do is add options to your pattern.
## Add the neckRatio option
The first option we're going to add controls the ratio between the neck opening and the head circumference. Let's call it `neckRatio`.
Open the config file at `config/index.js` and add this to the options:
```js
options: {
// Remove this size option
//size: { pct: 50, min: 10, max: 100 }
// And add the neckRatio options
neckRatio: { pct: 80, min: 70, max: 90 },
}
```
Can you guess what it means?
- We've added a option of type percentage
- Its minimum value is 70%
- Its maximum value is 90%
- Its default value is 80%
<Note>
There are different types of options, but percentages are the most common ones.
They are all documentation [in the API docs](/reference/api/config/#options).
</Note>
Let's do something similar for the width and length of our bib:
```js
options: {
neckRatio: { pct: 80, min: 70, max: 90 },
widthRatio: { pct: 45, min: 35, max: 55 },
lengthRatio: { pct: 50, min: 40, max: 65 },
}
```
- You've added `widthRatio` and `lengthRatio` options
- You've given all options sensible defauls
- You've given all options sensible maximum and minimum boundaries
<Note>
Later, you'll test-drive your pattern to see how it behaves when you adapt the options
between their minimum and maximum values. At that time, you can still tweak these values.
</Note>
Before you close the `config/index.js` file, make sure to update the `optionGroups` entry as follows:
```js
optionGroups: {
fit: ["neckRatio", "widthRatio", "lengthRatio"]
},
```
<Note>
The `optionGroups` entry does not do anything for your pattern as such.
Instead it signals to the frontend that this is how options should be grouped together and presented to the user.
</Note>
Because you have removed the `box` option, the pattern no longer draws a box. So let's start drawing your bib instead.

View file

@ -0,0 +1,79 @@
---
title: 140|Adding options
---
You know what your bib should look like, and you have the *head* measurement to work with. Mais il y a encore un certain nombre de choix que vous allez devoir faire :
- Quelle devrait être la largeur de l'encolure ?
- Quelle sera la largeur du bavoir ?
- Quelle longueur devra-t-il avoir ?
Vous pourriez faire ces choix à la place de l'utilisateur et les graver dans la pierre, pour ainsi dire.
Mais étant donné que vous concevez un patron sous forme de code, il est trivial de rendre votre patron flexible et de laisser le choix à l'utilisateur. Tout ce que vous avez à faire est d'ajouter des options à votre patron.
## Ajouter l'option neckRatio
La première option que nous allons ajouter contrôle le ratio entre l'encolure et le tour de tête. Appelons-la `neckRatio`.
Ouvrez le fichier de configuration à cette adresse `config/index.js` et ajoutez ceci aux options :
```js
options: {
// Supprimez cette option de taille (size)
//size: { pct: 50, min: 10, max: 100 }
// Et ajoutez l'option neckRatio
neckRatio: { pct: 80, min: 70, max: 90 },
}
```
Pouvez-vous devinez ce que cela signifie ?
- Nous avons ajouté une option de type pourcentage
- Sa valeur minimale est de 70%
- Sa valeur maximale est de 90%
- Sa valeur par défaut est de 80%
<Note>
Il y a différents types d'options, mais les pourcentages sont les plus communes.
They are all documentation [in the API docs](/reference/api/config/#options).
</Note>
Faisons quelque chose de similaire pour la largeur (width en anglais) et la longueur (length en anglais) de notre bavoir :
```js
options: {
neckRatio: { pct: 80, min: 70, max: 90 },
widthRatio: { pct: 45, min: 35, max: 55 },
lengthRatio: { pct: 50, min: 40, max: 65 },
}
```
- Vous avez ajouté les options `widthRatio` et `lengthRatio`
- Vous avez donné toutes les valeurs par défaut sensibles des options
- Vous avez donné toutes les valeurs sensibles pour les minima et les maxima des options
<Note>
Plus tard, vous testerez votre patron pour voir comment il se comporte lorsque vous modifierez les options entre leurs valeurs minimales et maximales. A cet instant, vous pouvez encore ajuster ces valeurs.
</Note>
Avant de fermer le fichier `config/index.js`, assurez-vous de mettre à jour l'entrée `optionGroups` comme suit :
```js
optionGroups: {
fit: ["neckRatio", "widthRatio", "lengthRatio"]
},
```
<Note>
The `optionGroups` entry does not do anything for your pattern as such.
Elle signale au frontend que c'est ainsi que les options devraient être rassemblées et présentées à l'utilisateur.
</Note>
Etant donnée que vous avez supprimé l'option `box`, le patron ne dessine plus une boîte. Alors commençons à dessiner votre bavoir à la place.

View file

@ -0,0 +1,79 @@
---
title: 140|Adding options
---
You know what your bib should look like, and you have the *head* measurement to work with. Maar je moet nog een aantal keuzes maken:
- Hoe groot moet de halsopening zijn?
- Hoe breed moet het slabbetje zijn?
- Hoe lang moet het slabbetje zijn?
Je kan al deze keuzes maken voor de gebruiker. Ze zijn dan 'in steen gebeiteld', om het zo maar te noemen.
Maar aangezien je een patroon aan het ontwerpen bent in code, is het een kleine moeite om je patroon flexibel te maken en de gebruiker te laten beslissen. Al wat je hoeft te doen, is opties toevoegen aan je patroon.
## De optie neckRatio toevoegen
De eerste optie die we gaan toevoegen bepaalt de verhouding tussen de halsopening en de hoofdomtrek. Laten we het `neckRatio` noemen.
Open het config-bestand in `config/index.js` en voeg dit toe bij de opties:
```js
options: {
// Verwijder deze maatoptie
//size: { pct: 50, min: 10, max: 100 }
// En voeg de opties neckRatio toe
neckRatio: { pct: 80, min: 70, max: 90 },
}
```
De betekenis hiervan kan je wel raden:
- We hebben type-percentage als optie toegevoegd
- De minimumwaarde is 70 %
- De maximumwaarde is 90 %
- De standaardwaarde is 80 %
<Note>
Er zijn verschillende types van opties, maar percentages zijn de meest voorkomende.
They are all documentation [in the API docs](/reference/api/config/#options).
</Note>
Laten we iets vergelijkbaars doen voor de breedte en lengte van het slabbetje:
```js
options: {
neckRatio: { pct: 80, min: 70, max: 90 },
widthRatio: { pct: 45, min: 35, max: 55 },
lengthRatio: { pct: 50, min: 40, max: 65 },
}
```
- Je hebt nu de opties `widthRatio` en `lengthRatio` toegevoegd
- Je hebt voor alle opties realistische standaardwaardes ingesteld
- Je hebt voor alle opties realistische maximum- en minimumgrenzen ingesteld
<Note>
Op een later moment ga je het patroon testen om te zien hoe het zich gedraagt wanneer je de opties aanpast tussen de minimum- en maximumwaardes. Op dat moment kan je de waarden nog altijd aanpassen.
</Note>
Let erop voordat je het `config/index.js`-bestand sluit, dat je de `optionGroups`-entry als volgt updatet:
```js
optionGroups: {
fit: ["neckRatio", "widthRatio", "lengthRatio"]
},
```
<Note>
The `optionGroups` entry does not do anything for your pattern as such.
Het geeft enkel aan de frontend aan dat opties op deze manier bij elkaar moeten worden gezet en aan de gebruiker worden getoond.
</Note>
Omdat je de `box`-optie hebt verwijderd, tekent het patroon nu geen kader meer. Laten we dus beginnen met je slabbetje te tekenen.