chore(dev): Changes for v3
This commit is contained in:
joostdecock
parent
80880b7b4f
commit
d39c92828a
17 changed files with 275 additions and 2610 deletions
|
|
@ -1,231 +0,0 @@
|
|||
---
|
||||
title: FreeSewing version 3
|
||||
---
|
||||
|
||||
Since August 2022, we've been working on the next major version of FreeSewing:
|
||||
version 3 (_v3_). This guide presents a high level overview of the changes that
|
||||
are going into v3, why we're making them, and what to expect.
|
||||
|
||||
<Fixme compact>This guide is a work in process</Fixme>
|
||||
|
||||
If you're looking for a more hands-on list of changes between v2 and v3, please
|
||||
refer to [the v3 migration guide](/guides/v3/migration).
|
||||
|
||||
Once v3 is in production, this guide and the migration guide will become less relevant. For now,
|
||||
short of reading the code itself, they are your best source for the inside
|
||||
scoop on v3, unless you want to read the source code of course.
|
||||
|
||||
## Why a version 3 in the first place?
|
||||
|
||||
Before diving into the details, let's take a moment to go over some of the
|
||||
reasons why we decided to start work on v3, rather than keep working on the v2
|
||||
branch of FreeSewing.
|
||||
|
||||
FreeSewing practices [semantic versioning](https://semver.org/), which means
|
||||
that breaking changes require a new major version. In more practical terms, it
|
||||
means that new features or ideas that would require breaking changes are put on
|
||||
the back burner until enough of them accumulate that they start making a
|
||||
compelling case for putting out a new major version.
|
||||
|
||||
For FreeSewing v3, [our contributor call on 20 August
|
||||
2022](https://github.com/freesewing/freesewing/discussions/2582) marks the
|
||||
moment we decided that enough of our plans and ambitions were being held back
|
||||
by our inability to introduce breaking changes. So we agreed to turn the page
|
||||
and start working on v3.
|
||||
|
||||
## High-level goals
|
||||
|
||||
### Support for packs
|
||||
|
||||
The main driver for v3 was what was listed on [our
|
||||
roadmap](https://github.com/freesewing/freesewing/discussions/1278) as *Support
|
||||
for packs*. The idea initially focussed on publishing collections of re-usable
|
||||
pattern parts such as a *sleeve pack* or a *collar pack*. You would then be
|
||||
able to create new designs by combining a collar from the collar pack, some
|
||||
sleeves from the sleeve pack and so on.
|
||||
|
||||
As we iterated on this idea, it became clear that there was little added value
|
||||
in creating another type of container (a *pack*) and that it would be better if
|
||||
we made it easier to treat each design as a *pack*. In other words, allow
|
||||
people to combine parts from different designs in a seamless way.
|
||||
|
||||
Design inheritance was already possible in v2, but because the configuration
|
||||
was handled on the design level, it required careful re-configuration of
|
||||
(required) measurements, options, part dependencies, and so on. It was
|
||||
possible but came with a lot of friction.
|
||||
|
||||
So in v3, all configuration is moved to the part level, and a design is now not
|
||||
much more than a container object for a collection of parts. It is the parts
|
||||
themselves that configure what they need. This includes anything from the measurements they
|
||||
require, the options they provide, the plugins they use, and so on.
|
||||
|
||||
This way, you can pull a part out of a design, and all of its configuration,
|
||||
dependencies, plugins, and so on will follow.
|
||||
|
||||
This migration of the configuration from the design level to the part level is
|
||||
the biggest and most fundamental change between v2 and v3. It is also where
|
||||
most of the work needs to be done to port existing designs from v2 to v3.
|
||||
|
||||
### Improved developer experience
|
||||
|
||||
The effort to improve the developer experience started already in v2. We've
|
||||
shipped a new development environment based on NextJS (previously we used
|
||||
Create React App), and this has made designing patterns more frictionless both for
|
||||
stand-alone development as well as for people working with(in) [our
|
||||
monorepo](https://github.com/freesewing/freesewing).
|
||||
|
||||
We've also switched from Rollup to Esbuild as our bundler and in the process
|
||||
dumped Babel.
|
||||
|
||||
However, some of the changes we wanted to make to simplify things would have
|
||||
been breaking changes, so they were put on hold. Until now that is.
|
||||
|
||||
For example, in version 2 we shipped both CJS and ESM modules, and we relied
|
||||
on default exports.
|
||||
|
||||
In version 3, FreeSewing is ESM-only, and we only use named exports in the code
|
||||
we publish as they provide better IDE integration.
|
||||
|
||||
For many of our users, these choices are deep enough under the hood that they
|
||||
are unconcerned by them. But for contributors, things have gotten a lot more
|
||||
approachable. For one thing, we are also porting our websites to NextJS so that
|
||||
there's only one frontend development framework to familiarize yourself with.
|
||||
|
||||
Together, these changes not only provide a better developer experience and a more
|
||||
unified approach, but they've also slashed our build times. In that sense, v3 is
|
||||
(for now) the final chapter of our efforts to provide a better developer
|
||||
experience.
|
||||
|
||||
### Multisets, Stacks, and better support for sampling
|
||||
|
||||
Sampling is when FreeSewing drafts a number of variations of a given pattern
|
||||
and allows you to compare them by stacking the parts on top of each other. In
|
||||
v2 this was bolted on as an afterthought and as such was implemented in a somewhat
|
||||
hackish way.
|
||||
|
||||
In v2, only paths were sampled and you couldn't compare list options, among other
|
||||
restrictions. Improving this and making sampling cover the entire spectrum
|
||||
of what goes in a design has been on our roadmap for a while, but we were not
|
||||
able to do much without introducing breaking changes.
|
||||
|
||||
To handle this use-case in v3, we've added two new features that together open
|
||||
up a range of possibilities. One is support for _multisets_, and the other is
|
||||
support for _stacks_.
|
||||
|
||||
Multisets means you can pass a number of different sets of settings to a
|
||||
pattern, and core will draft the pattern for each set of settings.
|
||||
|
||||
Stacks allow you to designate different parts of your pattern --- or parts
|
||||
across different sets of settings --- as belonging to the same stack. When it's
|
||||
time to layout your pattern, core will stack them on top of each other, a bit
|
||||
like layers.
|
||||
|
||||
These two new features not only make sampling a lot more straight-forward, they
|
||||
also allow other possibilities such as drafting a pattern for two sets of
|
||||
measurements when dealing with an asymmetric body.
|
||||
|
||||
### Provide more generic extending capabilities, rather than tight-coupling with our frontend
|
||||
|
||||
This is something that works on two different levels.
|
||||
|
||||
One one hand, we've had some feature requests in v2 that were good ideas but a
|
||||
bit too specific to the user's setup for us to add them to core.
|
||||
|
||||
On the other hand, we had things in core and in a design's configuration that
|
||||
were tightly coupled to FreeSewing's own frontend (on freesewing.org) and not
|
||||
really relevant to people using our software for other purposes.
|
||||
|
||||
In v3, we wanted to keep our core library fully neutral. freesewing.org should
|
||||
not be a *special* case, so all the freesewing.org specific stuff had to go.
|
||||
Instead, all our users, including ourselves, should have the possibility to
|
||||
extend the software with the features they need for frontend integration.
|
||||
|
||||
Removing the freesewing.org specific stuff means that designs now no longer
|
||||
ship with any freesewing.org specific info. Instead, plugins can now further
|
||||
extend core with *store methods*, and we allow passing any data into the
|
||||
design that you can then access on the pattern object.
|
||||
|
||||
You can also add additional data to your part's options to further facilitate
|
||||
frontend integration. We've also added more lifecycle hooks to let people hook
|
||||
into the drafting process at different times in a pattern's lifecycle. And,
|
||||
we've improved the logging process as well as allowing people to plug in their own
|
||||
log handlers.
|
||||
|
||||
These changes make our core library less opinionated about how it should be
|
||||
integrated, and we're excited to see what people will come up with.
|
||||
|
||||
## New in the core API
|
||||
|
||||
The core API is -- for the most part -- unchanged in v3. What's changed is
|
||||
covered in [the migration guide](/guides/v3/migration). But there's a bunch of
|
||||
new things, and here is the list:
|
||||
|
||||
### New attributes
|
||||
|
||||
The following attributes have been added to the core API in v3:
|
||||
|
||||
#### On the `Pattern` object
|
||||
|
||||
- [Pattern.activePart](/reference/api/pattern#pattern-attributes)
|
||||
- [Pattern.activeSet](/reference/api/pattern#pattern-attributes)
|
||||
- [Pattern.designConfig](/reference/api/pattern#pattern-attributes)
|
||||
- [Pattern.designConfig](/reference/api/pattern#pattern-attributes)
|
||||
- [Pattern.patternConfig](/reference/api/pattern#pattern-attributes)
|
||||
- [Pattern.setStores](/reference/api/pattern#pattern-attributes)
|
||||
|
||||
### New methods
|
||||
|
||||
The following methods have been added to the core API in v3:
|
||||
|
||||
#### On the `Attributes` object
|
||||
|
||||
- [Attributes.addClass](/reference/api/attributes/addclass)
|
||||
- [Attributes.asPropsIfPrefixIs](/reference/api/attributes/aspropsifprefixis)
|
||||
- [Attributes.render](/reference/api/attributes/render)
|
||||
- [Attributes.renderAsCss](/reference/api/attributes/renderascss)
|
||||
- [Attributes.renderIfPrefixIs](/reference/api/attributes/renderifprefixis)
|
||||
|
||||
#### On the `Part` object
|
||||
|
||||
- [Part.hide](/reference/api/part/draft/hide)
|
||||
- [Part.setHidden](/reference/api/part/draft/sethidden)
|
||||
- [Part.unhide](/reference/api/part/draft/unhide)
|
||||
|
||||
#### On the `Path` object
|
||||
|
||||
- [Path.addClass](/reference/api/path/addclass)
|
||||
- [Path.addText](/reference/api/path/addtext)
|
||||
- [Path.hide](/reference/api/path/hide)
|
||||
- [Path.setClass](/reference/api/path/setclass)
|
||||
- [Path.setText](/reference/api/path/settext)
|
||||
- [Path.setHidden](/reference/api/path/sethidden)
|
||||
- [Path.smurve](/reference/api/path/smurve)
|
||||
- [Path.smurve_](/reference/api/path/smurve_)
|
||||
- [Path.unhide](/reference/api/path/unhide)
|
||||
|
||||
#### On the `Pattern` object
|
||||
|
||||
- [Pattern.addPart](/reference/api/pattern/addpart)
|
||||
- [Pattern.getConfig](/reference/api/pattern/getconfig)
|
||||
|
||||
|
||||
#### On the `Point` object
|
||||
|
||||
- [Point.addCircle](/reference/api/point/addcircle)
|
||||
- [Point.addText](/reference/api/point/addtext)
|
||||
- [Point.setCircle](/reference/api/point/setcircle)
|
||||
- [Point.setText](/reference/api/point/settext)
|
||||
|
||||
#### On the `Store` object
|
||||
|
||||
- [Store.extend](/reference/api/store/extend)
|
||||
- [Store.push](/reference/api/store/push)
|
||||
- [Store.remove](/reference/api/store/remove)
|
||||
|
||||
## Changes for developers
|
||||
|
||||
- FreeSewing is now ESM-only
|
||||
- We use named exports instead of default exports
|
||||
- We've switched from Rollup to Esbuild for our bundler
|
||||
- FreeSewing v3 requires NodeJS 16 or more recent
|
||||
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
---
|
||||
title: V3 migration guide
|
||||
---
|
||||
|
||||
This guide covers the migration from FreeSewing version 2 (v2) to FreeSewing
|
||||
version 3 (v3). It is intended for pattern designers and developers using our
|
||||
core library. But it is also a good source of information for anybody who wants
|
||||
to learn more about what's changed between v2 and v3 of FreeSewing.
|
||||
|
||||
The focus on this guide is on our core library, our designs, our monorepo, and
|
||||
other topics of interest to developers. It does not cover any changes to our
|
||||
website(s) or other more user-facing aspects.
|
||||
|
||||
<Fixme compact>
|
||||
|
||||
This guide is a work in process.
|
||||
ToDo:
|
||||
|
||||
- part level transforms
|
||||
- config overloading
|
||||
|
||||
</Fixme>
|
||||
|
||||
## Breaking changes
|
||||
|
||||
### ESM only
|
||||
|
||||
FreeSewing is now ESM only. We no longer publish CJS modules.
|
||||
|
||||
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 have any
|
||||
default exports.
|
||||
|
||||
Please refer to [the reference documentation](/reference/api#named-exports) to see what
|
||||
named exports are available.
|
||||
|
||||
### NodeJS 16 or more recent
|
||||
|
||||
FreeSewing now requires NodeJS version 16 or more recent.
|
||||
|
||||
### Removed packages
|
||||
|
||||
The following packages have been removed in v3:
|
||||
|
||||
- **@freesewing/pattern-info**
|
||||
- **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
|
||||
- **@freesewing/components**: These were depending on Material-UI and we no longer use it
|
||||
- **@freesewing/utils**: We no longer use these, or they are included elsewhere
|
||||
- **@freesewing/plugin-export-dxf**: DXF is kinda garbage, you deserve better
|
||||
- **@freesewing/plugin-validate**
|
||||
|
||||
### API changes
|
||||
|
||||
#### Use log instead of raise
|
||||
|
||||
The `raise` object that held methods for logging has been replaced by log:
|
||||
|
||||
```mjs
|
||||
// strikeout-start
|
||||
raise.warning('This raise object no longer exists')
|
||||
// strikeout-end
|
||||
// highlight-start
|
||||
raise.info('Use the log object instead')
|
||||
// highlight-end
|
||||
```
|
||||
|
||||
Note that `log` can be destructured in your draft method.
|
||||
Refer to [the `Store.log` documentation](/reference/api/store/log) for all details.
|
||||
|
||||
## Migrating designs
|
||||
|
||||
### Design configuration
|
||||
|
||||
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 it also allows you to pass in additional data:
|
||||
|
||||
```js
|
||||
import { Design } from '@freesewing/core' // Note: named export
|
||||
import { myPart1, myPart2 } from './parts.mjs'
|
||||
|
||||
export const MyDesign = new Design({
|
||||
parts: [ myPart1, myPart2 ],
|
||||
data: {
|
||||
anything: 'goes',
|
||||
this: {
|
||||
is: ['here', 'to', 'use' ]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
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
|
||||
`data` will be made available in the pattern store.
|
||||
|
||||
Obviously, we still need to know what measurements the design requires, what
|
||||
plugins it uses, what options it offers, and so on.
|
||||
|
||||
All of that is now configured at the part level.
|
||||
|
||||
### Part configuration
|
||||
|
||||
In v3 of FreeSewing __all__ configuration happens at the part level.
|
||||
|
||||
Refer to [the part configuration docs](/reference/api/part/config) for details
|
||||
on configuring parts.
|
||||
|
||||
Apart from being attached at the part level, changes in comparison to v2 include:
|
||||
|
||||
- The `name` property is mandatory in v3
|
||||
- The `dependencies` property v2 is named `after` in v3
|
||||
- The `inject` property in v2 is named `from` in v3
|
||||
- The `hide` property is [different from v2 and has gained more features](reference/api/part/config/hide) in v3
|
||||
- The `plugins` property is new
|
||||
|
||||
### File and directory structure changes
|
||||
|
||||
- Designs no longer use a `config` folder, instead keeping the config in the parts files.
|
||||
- We use `.mjs` extensions rather than `.js`
|
||||
|
||||
|
|
@ -15,11 +15,11 @@ when in doubt, go stand-alone. You can always change track later.
|
|||
|
||||
## Stand-alone
|
||||
|
||||
To setup the stand-alone development environment, you need NodeJS 16 or higher.
|
||||
To setup the stand-alone development environment, you need NodeJS 18 or higher.
|
||||
Then run:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design@next
|
||||
npx @freesewing/new-design
|
||||
```
|
||||
|
||||
This command will setup FreeSewing's stand-alone development environment.
|
||||
|
|
|
|||
|
|
@ -116,13 +116,9 @@ yarn new plugin
|
|||
With Node.js installed, all you need to do to setup the stand-alone development environment is run this command:
|
||||
|
||||
```bash
|
||||
npx @freesewing/new-design@next
|
||||
npx @freesewing/new-design
|
||||
```
|
||||
|
||||
<Fixme compact>
|
||||
Remove `@next` tag when v3 is released
|
||||
</Fixme>
|
||||
|
||||
After you've answered [some questions](#questions), it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ order: 20
|
|||
Now we will use `nvm` to install Node.js. Run the following command:
|
||||
|
||||
```bash
|
||||
nvm install lts/gallium
|
||||
nvm install lts/hydrogen
|
||||
```
|
||||
|
||||
This will install the so-called LTS version of Node.js 16 on your system.
|
||||
This will install the so-called LTS version of Node.js 18 on your system.
|
||||
|
||||
LTS versions -- short for Long Term Support -- are good Node.js versions
|
||||
to use because they are stable and supported for a long time.
|
||||
|
|
|
|||
|
|
@ -116,13 +116,9 @@ yarn new plugin
|
|||
With Node.js installed, all you need to do to setup the stand-alone development environment is run this command:
|
||||
|
||||
```bash
|
||||
npx @freesewing/new-design@next
|
||||
npx @freesewing/new-design
|
||||
```
|
||||
|
||||
<Fixme compact>
|
||||
Remove `@next` tag when v3 is releasedi
|
||||
</Fixme>
|
||||
|
||||
After you've answered [some questions](#questions), it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ order: 20
|
|||
Now we will use `nvm` to install Node.js. Run the following command:
|
||||
|
||||
```bash
|
||||
nvm install lts/gallium
|
||||
nvm install lts/hydrogen
|
||||
```
|
||||
|
||||
This will install the so-called LTS version of Node.js 16 on your system.
|
||||
This will install the so-called LTS version of Node.js 18 on your system.
|
||||
|
||||
LTS versions -- short for Long Term Support -- are good Node.js versions
|
||||
to use because they are stable and supported for a long time.
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ the screen or opening a new terminal.
|
|||
|
||||
Now that you have NVM installed, you can install Node.js. The latest version can be
|
||||
installed using `nvm install default`. You can also install a specific version
|
||||
using `nvm install v16.17.0`. For the purposes of debugging it can be useful to
|
||||
using `nvm install v18.17.0`. For the purposes of debugging it can be useful to
|
||||
have the same version of Node.js installed as the main project uses, which you can
|
||||
then activate using `nvm use <version>`. You can determine what version the
|
||||
FreeSewing project uses by checking
|
||||
|
|
@ -65,7 +65,7 @@ FreeSewing project uses by checking
|
|||
|
||||
<Warning> At the time this guide was written the latest version of Node.js/npm has
|
||||
a bug in the dependency resolution process which causes the freesewing project
|
||||
to fail to build. Use the latest LTS version (currently 16.17.0) or the specific
|
||||
to fail to build. Use the latest LTS version (currently 18.17.0) or the specific
|
||||
version used by the main project to avoid this issue. </Warning>
|
||||
|
||||
Node.js comes with the Node Package Manager (npm) by default which can be used to
|
||||
|
|
@ -139,7 +139,7 @@ rest of this process.
|
|||
Open a Powershell terminal or command prompt. Run `nvm ls available` to show
|
||||
versions that can be installed. Choose the appropriate version (you should use
|
||||
the same version as the freesewing project or latest LTS version) then run `nvm
|
||||
install 16.17.0` and `nvm use 16.17.0` (where `16.17.0` is the full version
|
||||
install 18.17.0` and `nvm use 18.17.0` (where `18.17.0` is the full version
|
||||
string of the version you wish to use) to activate the newly installed version.
|
||||
You will receive a prompt for elevated permissions and will need to accept it in
|
||||
order to activate the new version of Node.js.
|
||||
|
|
@ -147,7 +147,7 @@ order to activate the new version of Node.js.
|
|||
<Warning>
|
||||
At the time this guide was written the latest version of Node.js/npm has
|
||||
a bug in the dependency resolution process which causes the freesewing project
|
||||
to fail to build. Use the latest LTS version (currently 16.17.0) or the specific
|
||||
to fail to build. Use the latest LTS version (currently 18.17.0) or the specific
|
||||
version used by the main project to avoid this issue.
|
||||
</Warning>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,9 @@ the JavaScript ecosystem, I can summarize that entire section in this one-liner
|
|||
that sets up the FreeSewing development environment on your system:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design@next
|
||||
npx @freesewing/new-design
|
||||
```
|
||||
|
||||
<Fixme compact>Remove `@next` suffex once v3 is published</Fixme>
|
||||
|
||||
## Part 2: Parametric design
|
||||
|
||||
In [Part 2](/tutorials/pattern-design/part2) I will show you how to design a
|
||||
|
|
|
|||
|
|
@ -25,11 +25,9 @@ If you have NodeJS on your system, getting that development environment up
|
|||
and running takes only a single command:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design@next
|
||||
npx @freesewing/new-design
|
||||
```
|
||||
|
||||
<Fixme compact>Remove `@next` suffex once v3 is published</Fixme>
|
||||
|
||||
If you don't have NodeJS on your system --- or if you're not sure what
|
||||
NodeJS is to begin with --- read on to learn how to install it.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,8 @@ FreeSewing provides a development environment that visualizes your design for yo
|
|||
To set it up, I will open a terminal and enter the following command:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design@next
|
||||
npx @freesewing/new-design
|
||||
```
|
||||
<Fixme compact>Remove `@next` suffix once v3 is in production</Fixme>
|
||||
|
||||
It will ask if it is ok to install the development environment in a new folder
|
||||
named `freesewing`. You can accept the default, or pick a different folder name
|
||||
|
|
|
|||
3
sites/dev/components/layouts/bare.mjs
Normal file
3
sites/dev/components/layouts/bare.mjs
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export const ns = []
|
||||
|
||||
export const BareLayout = (props) => props.children
|
||||
|
|
@ -5,8 +5,13 @@ import Head from 'next/head'
|
|||
import { PageWrapper } from 'shared/components/wrappers/page.mjs'
|
||||
import { PageLink } from 'shared/components/link.mjs'
|
||||
import { Highlight } from 'shared/components/mdx/highlight.mjs'
|
||||
import { FreeSewingIcon } from 'shared/components/icons.mjs'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
FreeSewingIcon,
|
||||
CisFemaleIcon,
|
||||
CodeIcon,
|
||||
OpenSourceIcon,
|
||||
} from 'shared/components/icons.mjs'
|
||||
import { Link, CardLink } from 'shared/components/link.mjs'
|
||||
|
||||
const title = 'Welcome to FreeSewing.dev'
|
||||
|
||||
|
|
@ -16,17 +21,13 @@ const BoldLink = ({ href, children }) => (
|
|||
</a>
|
||||
)
|
||||
|
||||
const CardLink = ({ color = 'primary', href, title, text }) => (
|
||||
<div className={`p-1 bg-${color} rounded-none lg:rounded-xl lg:shadow flex flex-col`}>
|
||||
<Link
|
||||
href={href}
|
||||
className={`px-4 lg:px-8 py-10 rounded-none lg:rounded-lg block
|
||||
bg-base-100 text-base-content hover:bg-${color} hover:text-${color}-content
|
||||
transition-color duration-300 grow`}
|
||||
>
|
||||
<h2 className="mb-4 text-inherit">{title}</h2>
|
||||
<p className="font-medium text-inherit">{text}</p>
|
||||
</Link>
|
||||
const Card = ({ bg = 'bg-base-200', textColor = 'text-base-content', title, children, icon }) => (
|
||||
<div className={`px-8 ${bg} py-10 rounded-lg block ${textColor} shadow-lg grow`}>
|
||||
<h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium text-left">
|
||||
{title}
|
||||
{icon}
|
||||
</h2>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
@ -56,149 +57,43 @@ const HomePage = ({ page }) => (
|
|||
<title>{title}</title>
|
||||
</Head>
|
||||
|
||||
<div className="max-w-7xl m-auto px-0 mt-24 text-center">
|
||||
<div className="max-w-7xl m-auto px-0 mt-24">
|
||||
<FreeSewingIcon className="h-36 w-36 m-auto" />
|
||||
<h1 className="text-center font-heavy drop-shadow-md px-4">
|
||||
<span style={{ letterSpacing: '-0.2rem' }} className="text-5xl lg:text-6xl">
|
||||
FreeSewing
|
||||
</span>
|
||||
<span className="block text-sm lg:text-xl m-1">
|
||||
The library for parametric sewing patterns
|
||||
An open source Javascript library for parametric sewing patterns
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-col gap-8 lg:grid lg:grid-cols-3 lg:gap-4 mt-12">
|
||||
<div className="p-1 bg-gradient-to-tr from-accent to-primary rounded-none lg:rounded-xl lg:shadow flex flex-col">
|
||||
<div className="px-4 lg:px-8 bg-base-100 rounded-none lg:rounded-lg grow">
|
||||
<h2 className="mb-4">Custom-Fit Fashion</h2>
|
||||
<p className="font-medium">
|
||||
FreeSewing is the leading open source library for on-demand garment manufacturing.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
Loved by home sewers and fashion entrepreneurs alike, we provide the tech stack for
|
||||
your creative endeavours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-1 bg-gradient-to-tr from-info to-neutral rounded-none lg:rounded-xl lg:shadow flex flex-col">
|
||||
<div className="px-4 lg:px-8 bg-base-100 rounded-none lg:rounded-lg grow">
|
||||
<h2 className="mb-4">Patterns as Code</h2>
|
||||
<p className="font-medium">
|
||||
FreeSewing designs are implemented as code giving you unmatched power and flexibility.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
You can mix and match parts from different designs, extend them, or add options that
|
||||
turn one base design into many.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-1 bg-gradient-to-tr from-primary to-secondary rounded-none lg:rounded-xl lg:shadow flex flex-col">
|
||||
<div className="px-4 lg:px-8 bg-base-100 rounded-none lg:rounded-lg grow">
|
||||
<h2 className="mb-4">License: MIT</h2>
|
||||
<p className="font-medium">
|
||||
FreeSewing is an open source project under{' '}
|
||||
<BoldLink href="https://en.wikipedia.org/wiki/MIT_License">the MIT license</BoldLink>.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
Which means it is ok to use our code to help you put food on the table.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-0 bg-gradient-to-tr from-neutral to-primary mt-12 rounded-none lg:rounded-xl lg:shadow text-neutral-content">
|
||||
<div
|
||||
className="bg-cover bg-neutral w-full bg-center shadow rounded-none lg:rounded-xl"
|
||||
style={{ backgroundImage: 'url(/support.jpg)' }}
|
||||
<div className="flex flex-col gap-8 lg:grid lg:grid-cols-2 lg:gap-4 mt-12">
|
||||
<Card
|
||||
title="Custom-Fit Fashion"
|
||||
icon={<CisFemaleIcon className="w-12 h-12 shrink-0" fill stroke={0} />}
|
||||
>
|
||||
<div className="bg-neutral bg-opacity-50 p-4 py-12 rounded-none lg:rounded-xl">
|
||||
<h2 className="text-inherit mb-4">Support FreeSewing</h2>
|
||||
<p className="text-inherit font-medium max-w-sm m-auto drop-shadow-md text-lg">
|
||||
FreeSewing is fuelled by a voluntary subscription model
|
||||
</p>
|
||||
<p className="text-inherit font-medium max-w-prose max-w-sm m-auto text-lg">
|
||||
If you think what we do is worthwhile, and if you can spare a few coins each month
|
||||
without hardship, please support our work
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
role="button"
|
||||
className="btn btn-accent hover:btn-success px-12 ml-4 mb-8 btn-lg"
|
||||
href="https://freesewing.org/patrons/join"
|
||||
>
|
||||
Become a Patron
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-medium text-lg">
|
||||
FreeSewing is the leading open source library for on-demand garment manufacturing.
|
||||
</p>
|
||||
<p className="font-medium text-lg">
|
||||
Loved by home sewers and fashion entrepreneurs alike, we provide the tech stack for your
|
||||
creative endeavours.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card title="Patterns as Code" icon={<CodeIcon className="w-12 h-12 shrink-0" />}>
|
||||
<p className="font-medium text-lg">
|
||||
FreeSewing designs are implemented as code giving you unmatched power and flexibility.
|
||||
</p>
|
||||
<p className="font-medium text-lg">
|
||||
You can mix and match parts from different designs, extend them, or add options that
|
||||
turn one base design into many.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-5 lg:grid lg:grid-cols-3 lg:gap-4 mt-12">
|
||||
<CardLink
|
||||
color="primary"
|
||||
href="/tutorials/pattern-design"
|
||||
title="Design Tutorial"
|
||||
text="Step by step instructions to create your first FreeSewing design"
|
||||
/>
|
||||
<CardLink
|
||||
color="neutral"
|
||||
href="/reference/core"
|
||||
title="Core API"
|
||||
text="Reference documentation for our core library"
|
||||
/>
|
||||
<CardLink
|
||||
color="accent"
|
||||
href="/reference/backend"
|
||||
title="Backend API"
|
||||
text={
|
||||
<span>
|
||||
No backend?
|
||||
<br />
|
||||
No problem, you can use ours.
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-1 bg-gradient-to-tr from-neutral to-primary mt-12 rounded-none lg:rounded-xl lg:shadow text-neutral-content">
|
||||
<div className="flex flex-col gap-8 lg:grid lg:grid-cols-2">
|
||||
<div className="px-4 lg:px-12 pt-12 lg:py-12">
|
||||
<h2 className="text-inherit mb-4 text-center lg:text-left">
|
||||
FreeSewing v3: It's coming
|
||||
</h2>
|
||||
<p className="text-inherit font-medium text-center lg:text-left">
|
||||
The upcoming version 3 of FreeSewing is currently under development. All of the
|
||||
documentation here is being kept up-to-date with the upcoming v3 release.
|
||||
</p>
|
||||
<p className="text-inherit font-medium text-center lg:text-left">
|
||||
Visit <BoldLink href="https://v2.freesewing.dev/">v2.freesewing.dev</BoldLink> for the
|
||||
documentation for version 2 of FreeSewing.
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-4 lg:px-12 pb-12 lg:py-12">
|
||||
<h2 className="text-inherit mb-4 text-center lg:text-left">What's changed?</h2>
|
||||
<p className="text-inherit font-medium text-center lg:text-left">
|
||||
Check{' '}
|
||||
<BoldLink href="/guides/v3/migration">
|
||||
the FreeSewing version 3 migration guide
|
||||
</BoldLink>{' '}
|
||||
to learn about what is new in version 3 of FreeSewing, and what changes you should
|
||||
make in your own designs to port them to version 3.
|
||||
</p>
|
||||
<p className="text-inherit font-medium text-center lg:text-left">
|
||||
If you have any questions to which you can't find the answers here, please{' '}
|
||||
<BoldLink href="https://discord.freesewing.org/">reach out to us on Discord</BoldLink>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl m-auto mt-12 px-4">
|
||||
<h2 className="text-left lg:text-center mb-4">Using FreeSewing: TL;DR</h2>
|
||||
<h2 className="lg:text-center mb-4 mt-12">Using FreeSewing: TL;DR</h2>
|
||||
<div className="flex flex-row flex-wrap gap-4 justify-between">
|
||||
<div className="max-w-xl w-full">
|
||||
<h3>
|
||||
|
|
@ -207,7 +102,7 @@ const HomePage = ({ page }) => (
|
|||
<p>
|
||||
All you need is <strong>NodeJS</strong>; Then run:
|
||||
</p>
|
||||
<Highlight language="shell">npx @freesewing/new-design@next</Highlight>
|
||||
<Highlight language="shell">npx @freesewing/new-design</Highlight>
|
||||
<p>
|
||||
This command will setup the stand-alone FreeSewing development environment for you.{' '}
|
||||
<PageLink href="/tutorials/getting-started-linux/dev-setup" txt="Learn more" />.
|
||||
|
|
@ -238,34 +133,37 @@ const HomePage = ({ page }) => (
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl m-auto px-0 mt-12">
|
||||
<div className="p-1 bg-gradient-to-tr from-accent to-warning mt-24 rounded-none lg:rounded-xl lg:shadow mb-12">
|
||||
<div className="p-0 bg-base-100 rounded-none lg:rounded-lg">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2">
|
||||
<div className="px-4 lg:px-12 pt-12 lg:py-12">
|
||||
<h2 className="mb-4 text-center lg:text-left">Questions?</h2>
|
||||
<p className="font-medium text-center lg:text-left">
|
||||
When you have questions or find yourself scratching your head you can{' '}
|
||||
<b>
|
||||
<PageLink href="/contact" txt="contact us" />
|
||||
</b>{' '}
|
||||
in various ways.
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-4 lg:px-12 py-12">
|
||||
<h2 className="mb-4 text-center lg:text-left">Need Help?</h2>
|
||||
<p className="font-medium text-center lg:text-left">
|
||||
While we are all volunteers, we have a good track record of helping people. So{' '}
|
||||
<b>
|
||||
<PageLink href="/contact" txt="don't be shy" />
|
||||
</b>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-5 lg:grid lg:grid-cols-2 lg:gap-4 mt-12">
|
||||
<CardLink
|
||||
href="/reference/core"
|
||||
title="Core API"
|
||||
text="Reference documentation for our core library"
|
||||
/>
|
||||
<CardLink
|
||||
href="/reference/backend"
|
||||
title="Backend API"
|
||||
text={
|
||||
<span>
|
||||
No backend?
|
||||
<br />
|
||||
No problem, you can use ours.
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-5 lg:grid lg:grid-cols-2 lg:gap-4 mt-12 mb-24">
|
||||
<CardLink
|
||||
href="/tutorials/pattern-design"
|
||||
title="Design Tutorial"
|
||||
text="Step by step instructions to create your first FreeSewing design"
|
||||
/>
|
||||
<CardLink
|
||||
href="/support"
|
||||
title="Need Help?"
|
||||
text="Learn about the various ways you can reach out for help"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
|
|
|
|||
184
sites/dev/pages/support.mjs
Normal file
184
sites/dev/pages/support.mjs
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
// Dependencies
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { nsMerge } from 'shared/utils.mjs'
|
||||
import { freeSewingConfig as config } from 'shared/config/freesewing.config.mjs'
|
||||
// Hooks
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useState } from 'react'
|
||||
// Components
|
||||
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
||||
import { Joost } from 'shared/components/joost.mjs'
|
||||
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
||||
import { Breadcrumbs } from 'shared/components/navigation/sitenav.mjs'
|
||||
import {
|
||||
DiscordIcon,
|
||||
FacebookIcon,
|
||||
GitHubIcon,
|
||||
InstagramIcon,
|
||||
RedditIcon,
|
||||
TwitterIcon,
|
||||
YouTubeIcon,
|
||||
CommunityIcon,
|
||||
ChatIcon,
|
||||
EmailIcon,
|
||||
} from 'shared/components/icons.mjs'
|
||||
import { PleaseSubscribe, ns as subNs } from 'shared/components/patrons/please-subscribe.mjs'
|
||||
import { SupportForm, ns as supportNs } from 'shared/components/support.mjs'
|
||||
|
||||
// Translation namespaces used on this page
|
||||
const ns = nsMerge(pageNs, supportNs, subNs)
|
||||
|
||||
const SupportCard = ({ bg, textColor, title, icon, nr }) => (
|
||||
<div
|
||||
className={`px-4 bg-${bg} pt-2 pb-4 rounded-lg block ${textColor} shadow-lg
|
||||
grow w-full bg-gradient-to-tr from-${bg} from-10% to-primary`}
|
||||
>
|
||||
<h3 className="text-inherit font-heavy flex flex-row w-full items-center justify-between relative">
|
||||
<span
|
||||
className={`p-2 w-8 h-8 flex flex-col items-center justify-center shrink-0 rounded-full
|
||||
text-center p-0 py-2 bg-transparent text-${bg}-content border-2 border-base-100 text-xl mr-4`}
|
||||
>
|
||||
{nr}
|
||||
</span>
|
||||
{title}
|
||||
{icon}
|
||||
</h3>
|
||||
</div>
|
||||
)
|
||||
|
||||
const socialIcon = {
|
||||
discord: <DiscordIcon />,
|
||||
facebook: <FacebookIcon />,
|
||||
github: <GitHubIcon />,
|
||||
instagram: <InstagramIcon />,
|
||||
reddit: <RedditIcon />,
|
||||
twitter: <TwitterIcon />,
|
||||
youtube: <YouTubeIcon fill stroke={0} />,
|
||||
}
|
||||
|
||||
/*
|
||||
* Each page MUST be wrapped in the PageWrapper component.
|
||||
* You also MUST spread props.page into this wrapper component
|
||||
* when path and locale come from static props (as here)
|
||||
* or set them manually.
|
||||
*/
|
||||
const SupportPage = ({ page }) => {
|
||||
const { t } = useTranslation(ns)
|
||||
|
||||
const [request, setRequest] = useState(false)
|
||||
|
||||
const pageTitle = request ? t('createSupportRequest') : t('sections:support')
|
||||
|
||||
if (request)
|
||||
return (
|
||||
<PageWrapper {...page} title={pageTitle} layout={BareLayout}>
|
||||
<div className="max-w-7xl mx-auto mb-24 px-4 mt-16">
|
||||
<Breadcrumbs />
|
||||
<h1>{pageTitle}</h1>
|
||||
<SupportForm />
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
||||
return (
|
||||
<PageWrapper {...page} title={pageTitle} layout={BareLayout}>
|
||||
<div className="max-w-7xl mx-auto mb-24 px-4 mt-16">
|
||||
<Breadcrumbs />
|
||||
<h1>{pageTitle}</h1>
|
||||
<h2>{t('howCanWeSupportYou')}</h2>
|
||||
<div className="flex flex-row flex-wrap gap-4 lg:grid lg:grid-cols-3 lg:gap-8 justify-around -mt-4">
|
||||
{/* Community */}
|
||||
<div className="w-full md:max-w-md my-8">
|
||||
<SupportCard
|
||||
nr={1}
|
||||
bg="accent"
|
||||
textColor="text-accent-content"
|
||||
title={t('support:communitySupport')}
|
||||
icon={<CommunityIcon className="w-10 h-10 lg:w-14 lg:h-14 shrink-0" />}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:communitySupport1')}</p>
|
||||
<p className="font-normal text-inherit">{t('support:communitySupport2')}</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.keys(config.social)
|
||||
.sort()
|
||||
.map((key) => (
|
||||
<a
|
||||
className="btn btn-neutral btn-outline w-full flex flex-row items-center justify-between hover:btn-accent"
|
||||
href={config.social[key]}
|
||||
key={key}
|
||||
>
|
||||
{socialIcon[key.toLowerCase()]}
|
||||
{key}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contributors */}
|
||||
<div className="w-full md:max-w-md my-8">
|
||||
<SupportCard
|
||||
nr={2}
|
||||
bg="secondary"
|
||||
textColor="text-secondary-content"
|
||||
title={t('support:contributorSupport')}
|
||||
icon={<GitHubIcon className="w-10 h-10 lg:w-14 lg:h-14 shrink-0" />}
|
||||
/>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:contributorSupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:contributorSupport2')}</p>
|
||||
<button
|
||||
className="btn btn-secondary btn-lg w-full flex flex-row items-center justify-between"
|
||||
onClick={() => setRequest(true)}
|
||||
>
|
||||
<ChatIcon className="w-8 h-8" />
|
||||
{t('createSupportRequest')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Maintainer */}
|
||||
<div className="w-full md:max-w-md my-8">
|
||||
<SupportCard
|
||||
nr={3}
|
||||
bg="neutral"
|
||||
textColor="text-neutral-content"
|
||||
title={t('support:maintainerSupport')}
|
||||
icon={<Joost className="w-20 lg:w-28 shrink-0" stroke={1} />}
|
||||
/>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:maintainerSupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:maintainerSupport2')}</p>
|
||||
<a
|
||||
className="btn btn-neutral w-full flex flex-row items-center justify-between"
|
||||
href="mailto:joost@joost.at"
|
||||
>
|
||||
<EmailIcon className="w-8 h-8" />
|
||||
{t('emailAddress', { address: 'joost@joost.at' })}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="pb-8">{t('howCanYouSupportFreeSewing')}</h2>
|
||||
<div className="-mx-4 md:mx-auto">
|
||||
<PleaseSubscribe dense />
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default SupportPage
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, ns)),
|
||||
page: {
|
||||
locale,
|
||||
path: ['patrons', 'thanks'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,54 +1,3 @@
|
|||
// __SDEFILE__ - This file is a dependency for the stand-alone environment
|
||||
// This file is auto-generated by the prebuild script | Any changes will be overwritten
|
||||
export const designs = [
|
||||
'aaron',
|
||||
'albert',
|
||||
'bee',
|
||||
'bella',
|
||||
'benjamin',
|
||||
'bent',
|
||||
'bob',
|
||||
'breanna',
|
||||
'brian',
|
||||
'bruce',
|
||||
'carlita',
|
||||
'carlton',
|
||||
'cathrin',
|
||||
'charlie',
|
||||
'cornelius',
|
||||
'diana',
|
||||
'examples',
|
||||
'florence',
|
||||
'florent',
|
||||
'hi',
|
||||
'holmes',
|
||||
'hortensia',
|
||||
'huey',
|
||||
'hugo',
|
||||
'jaeger',
|
||||
'legend',
|
||||
'lucy',
|
||||
'lunetius',
|
||||
'magde',
|
||||
'noble',
|
||||
'octoplushy',
|
||||
'paco',
|
||||
'penelope',
|
||||
'plugintest',
|
||||
'rendertest',
|
||||
'sandy',
|
||||
'shin',
|
||||
'simon',
|
||||
'simone',
|
||||
'sven',
|
||||
'tamiko',
|
||||
'teagan',
|
||||
'tiberius',
|
||||
'titan',
|
||||
'trayvon',
|
||||
'uma',
|
||||
'wahid',
|
||||
'walburga',
|
||||
'waralee',
|
||||
'yuri',
|
||||
]
|
||||
export const designs = ["aaron","albert","bee","bella","benjamin","bent","bob","breanna","brian","bruce","carlita","carlton","cathrin","charlie","cornelius","diana","examples","florence","florent","hi","holmes","hortensia","huey","hugo","jaeger","legend","lucy","lunetius","magde","noble","octoplushy","paco","penelope","plugintest","rendertest","sandy","shin","simon","simone","sven","tamiko","teagan","tiberius","titan","trayvon","uma","wahid","walburga","waralee","yuri"]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue