VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Flat import of markdown repo

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

67
markdown/dev/tutorials/pattern-design/rounding-the-corners/de.md Normal file
View file

@ -0,0 +1,67 @@
---
title: Rounding the corners
order: 240
---
We already know how to round corners, let the `round` macro do it:
```js
macro("round", {
from: points.topLeft,
to: points.bottomRight,
via: points.bottomLeft,
radius: points.bottomRight.x / 4,
prefix: "bottomLeft"
});
macro("round", {
from: points.bottomLeft,
to: points.topRight,
via: points.bottomRight,
radius: points.bottomRight.x / 4,
prefix: "bottomRight"
});
```
But there's still something to be learned here. If you look at our earlier use of the `round` macro, you'll notice that we used this line:
```js
render: true,
```
This instructs the `round` macro create a path that draws the rounded corner. Whereas by default, it merely constructs the points required to round the corner.
Typically, your rounded corner will be part of a larger path and so you don't want the macro to draw it. That's why the `round` macro's `render` property defaults to `false`.
We've left it out here, and you should also remove it from your earlier use of the `round` macro. We merely set `render` to `true` at that time so you could see what the macro was doing.
With our corners rounded, we should update our path. Fortunately, we merely have to update the start of it. Replace this:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeft)
.line(points.bottomRight)
.line(points.edgeRight)
```
With this:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeftStart)
.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd)
.line(points.bottomRightStart)
.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd)
.line(points.edgeRight)
```
and keep the rest of the path as it was.
The shape our bib is now completed:
<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />

72
markdown/dev/tutorials/pattern-design/rounding-the-corners/en.md Normal file
View file

@ -0,0 +1,72 @@
---
title: Rounding the corners
order: 240
---
We already know how to round corners, let the `round` macro do it:
```js
macro("round", {
from: points.topLeft,
to: points.bottomRight,
via: points.bottomLeft,
radius: points.bottomRight.x / 4,
prefix: "bottomLeft"
});
macro("round", {
from: points.bottomLeft,
to: points.topRight,
via: points.bottomRight,
radius: points.bottomRight.x / 4,
prefix: "bottomRight"
});
```
But there's still something to be learned here. If you look at our earlier use of the `round` macro,
you'll notice that we used this line:
```js
render: true,
```
This instructs the `round` macro create a path that draws the rounded corner.
Whereas by default, it merely constructs the points required to round the corner.
Typically, your rounded corner will be part of a larger path and so you don't want the macro
to draw it. That's why the `round` macro's `render` property defaults to `false`.
We've left it out here, and you should also remove it from your earlier use of the `round` macro.
We merely set `render` to `true` at that time so you could see what the macro was doing.
With our corners rounded, we should update our path.
Fortunately, we merely have to update the start of it. Replace this:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeft)
.line(points.bottomRight)
.line(points.edgeRight)
```
With this:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeftStart)
.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd)
.line(points.bottomRightStart)
.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd)
.line(points.edgeRight)
```
and keep the rest of the path as it was.
The shape our bib is now completed:
<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />

67
markdown/dev/tutorials/pattern-design/rounding-the-corners/es.md Normal file
View file

@ -0,0 +1,67 @@
---
title: Rounding the corners
order: 240
---
We already know how to round corners, let the `round` macro do it:
```js
macro("round", {
from: points.topLeft,
to: points.bottomRight,
via: points.bottomLeft,
radius: points.bottomRight.x / 4,
prefix: "bottomLeft"
});
macro("round", {
from: points.bottomLeft,
to: points.topRight,
via: points.bottomRight,
radius: points.bottomRight.x / 4,
prefix: "bottomRight"
});
```
But there's still something to be learned here. If you look at our earlier use of the `round` macro, you'll notice that we used this line:
```js
render: true,
```
This instructs the `round` macro create a path that draws the rounded corner. Whereas by default, it merely constructs the points required to round the corner.
Typically, your rounded corner will be part of a larger path and so you don't want the macro to draw it. That's why the `round` macro's `render` property defaults to `false`.
We've left it out here, and you should also remove it from your earlier use of the `round` macro. We merely set `render` to `true` at that time so you could see what the macro was doing.
With our corners rounded, we should update our path. Fortunately, we merely have to update the start of it. Replace this:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeft)
.line(points.bottomRight)
.line(points.edgeRight)
```
With this:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeftStart)
.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd)
.line(points.bottomRightStart)
.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd)
.line(points.edgeRight)
```
and keep the rest of the path as it was.
The shape our bib is now completed:
<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />

67
markdown/dev/tutorials/pattern-design/rounding-the-corners/fr.md Normal file
View file

@ -0,0 +1,67 @@
---
title: Arrondir les coins
order: 240
---
Nous savons déjà comment arrondir des coins, laissons la macro `round` s'en charger :
```js
macro("round", {
from: points.topLeft,
to: points.bottomRight,
via: points.bottomLeft,
radius: points.bottomRight.x / 4,
prefix: "bottomLeft"
});
macro("round", {
from: points.bottomLeft,
to: points.topRight,
via: points.bottomRight,
radius: points.bottomRight.x / 4,
prefix: "bottomRight"
});
```
Mais il y a encore quelque chose à apprendre ici. Si vous regardez comment nous avons employer la macro `round` précédemment, vous vous rendrez compte que nous avons utilisé cette ligne :
```js
render: true,
```
Cela instruit la macro `round` de créer un chemin qui dessine un coin arrondi. Alors que par défaut, elle ne fait que dessiner les points requis pour arrondir le coin.
Typiquement, votre coin arrondi fera partie d'un chemin plus large et vous ne voulez pas que la macro le dessine. C'est pourquoi la propriété `render` (rendu) de la macro `round` a sa valeur par défaut définie sur `false`.
Nous l'avons laissée là, et vous devriez aussi la retirer pour votre emploi précédent de la macro `round`. Nous avons réglé `render` sur `true` à ce moment pour que vous puissiez voir ce que la macro faisait.
Avec nos coins arrondis, nous devrions mettre à jour notre chemin. Fort heureusement, nous avons juste à mettre à jour le début de ce dernier. Remplacez ceci :
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeft)
.line(points.bottomRight)
.line(points.edgeRight)
```
Par ça :
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeftStart)
.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd)
.line(points.bottomRightStart)
.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd)
.line(points.edgeRight)
```
et gardez le reste du chemin tel qu'il était.
La forme de notre bavoir est maintenant finie :
<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />

67
markdown/dev/tutorials/pattern-design/rounding-the-corners/nl.md Normal file
View file

@ -0,0 +1,67 @@
---
title: De hoeken afronden
order: 240
---
We weten al hoe je hoeken afrondt; daar dient de `round`-macro voor:
```js
macro("round", {
from: points.topLeft,
to: points.bottomRight,
via: points.bottomLeft,
radius: points.bottomRight.x / 4,
prefix: "bottomLeft"
});
macro("round", {
from: points.bottomLeft,
to: points.topRight,
via: points.bottomRight,
radius: points.bottomRight.x / 4,
prefix: "bottomRight"
});
```
Maar hier kunnen we nog iets bijleren. Als je kijkt naar hoe we de `round`-macro hiervoor toegepast hebben, zie je dat we deze regel gebruikt hebben:
```js
render: true,
```
Dit geeft de `round`-macro de opdracht om een pad te creëren dat de afgeronde hoek tekent. Standaard doet de macro niet meer dan de punten te creëren die nodig zijn om de hoek af te ronden.
Meestal zal je afgeronde hoek deel uitmaken van een groter pad. Dan wil je niet dat de macro het ook nog eens tekent. Daarom staat de `render`-eigenschap van de `round`-macro standaard ingesteld als `false`.
Hier hebben we de `render`-eigenschap weggelaten, en dat zou je ook moeten doen in je vorige gebruik van de `round`-macro. We hebben hem toen alleen ingesteld als `true` om je te tonen wat de macro precies doet.
Nu onze hoeken afgerond zijn, moeten we ons pad updaten. Gelukkig hoeven we alleen maar het begin te updaten. Vervang dit:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeft)
.line(points.bottomRight)
.line(points.edgeRight)
```
Door dit:
```js
paths.seam = new Path()
.move(points.edgeLeft)
.line(points.bottomLeftStart)
.curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd)
.line(points.bottomRightStart)
.curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd)
.line(points.edgeRight)
```
en behoud de rest van het pad zoals het was.
De vorm van het slabbetje is nu afgewerkt:
<Example pattern="tutorial" part="step10" caption="That is looking a lot like a bib" />