VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Add various content types to docusaurus (#7231)

Browse source 
This brings blog posts, showcase posts, and newsletter editions into the Docusaurus site.

It also adds support for using TailwindCSS inside a container. So this will probably end up being the new freesewing.org site in v4.
This commit is contained in:
Joost De Cock 2024-11-18 11:05:16 +01:00 • committed by GitHub
parent ef8f68bcaf
commit 469eb43c95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
595 changed files with 20432 additions and 2469 deletions
Download patch file Download diff file Expand all files Collapse all files

35
sites/dev/docs/tutorials/pattern-design/part2/our-first-design/readme.mdx
View file

@ -1,14 +1,14 @@
---
title: Creating a new design
order: 10
sidebar_position: 10
---
The development environment has already setup various designs for us.
Since I am using the **From scratch** template, the files I want to edit live
Since I am using the **From scratch** template, the files I want to edit live
in `design/from-scratch`.
The design's main file is `design/from-scratch/src/index.mjs`, and our bib part
will live in `design/from-scratch/src/bib.mjs`.
will live in `design/from-scratch/src/bib.mjs`.
This `bib.mjs` file is where will be doing most of the work here in part 2 of this
tutorial. But let's start with the `index.mjs` file as an appetizer, because this
@ -37,7 +37,7 @@ Not too intimidating, is it?
## Imports
At the top of the file, we have a bunch of *imports*:
At the top of the file, we have a bunch of _imports_:
```src/index.mjs
import { Design } from '@freesewing/core'
@ -48,13 +48,13 @@ import { bib } from './bib.mjs'
An `import` is how JavaScript loads code from a different file. \
It essentially says: _import **something** from **somewhere**_:
| Something | Somewhere | Description |
| ---------:|:--------- |:----------- |
| `Design` | `@freesewing/core` | Loads the `Design` constructor from FreeSewing's core library |
| `i18n` | `../i18n/index.mjs` | Loads `i18n` from the `index.mjs` file in the `i18n` one level higher (these are the translations) |
| `bib` | `./bib.mjs` | Loads `bib` from the `bib.mjs` file in the same folder (this is our part) |
| Something | Somewhere | Description |
| --------: | :------------------ | :------------------------------------------------------------------------------------------------- |
| `Design` | `@freesewing/core` | Loads the `Design` constructor from FreeSewing's core library |
| `i18n` | `../i18n/index.mjs` | Loads `i18n` from the `index.mjs` file in the `i18n` one level higher (these are the translations) |
| `bib` | `./bib.mjs` | Loads `bib` from the `bib.mjs` file in the same folder (this is our part) |
As you can see, the *somewhere* can be different things. A local file like in
As you can see, the _somewhere_ can be different things. A local file like in
lines 2 and 3, or a package published on
[NPM](https://www.npmjs.com/package/@freesewing/core), in line 1.
@ -82,7 +82,7 @@ If you are not familiar with this syntax, you'll get the hang of it soon enough.
## Design constructor
Finally, the most interesting part of this file is the middle part where we are
Finally, the most interesting part of this file is the middle part where we are
creating a new design:
```src/index.mjs
@ -95,7 +95,7 @@ const FromScratch = new Design({
})
```
The `Design` that we imported on line 1 is a so-called **constructor**.
The `Design` that we imported on line 1 is a so-called **constructor**.
A constructor is a function that can create things out of nothing. Or,
to be more accurate, that you can use with the `new` keyword.
@ -105,8 +105,8 @@ It's a convention that constructor names start with an **C**apital letter.
:::
We are passing some info to this `Design` function, but the `data` we are
passing is optional. If we strip that away for a moment, and don't bother
assigning the result to a variable, we reveal the essence of what it takes to
passing is optional. If we strip that away for a moment, and don't bother
assigning the result to a variable, we reveal the essence of what it takes to
create a new FreeSewing design:
```src/index.mjs
@ -115,8 +115,8 @@ new Design({
})
```
In several places in this documentation, I will mention that *a design is not
much more than a thin wrapper around parts*. But I feel nothing drives
In several places in this documentation, I will mention that _a design is not
much more than a thin wrapper around parts_. But I feel nothing drives
that point home like seeing it in code like this.
To create a new design, we call the `Design` constructor and give it a list
@ -124,9 +124,8 @@ To create a new design, we call the `Design` constructor and give it a list
:::note RELATED
Refer to [the design reference documentation](/reference/api/design) for
Refer to [the design reference documentation](/reference/api/design) for
all details about what you can pass to the Design constructor.
:::
That's it. So let's look at where the real action is next: Our first part.