wip: tweaks and custom components

sites/orgdocs/docs/_controltip.mdx

@@ -0,0 +1,11 @@
+:::tip User Experience
+
+The **User Experience** setting of your FreeSewing account will impact how you
+experience the FreeSewing website.
+
+By default, some of the more advanced features of this site are hidden to make
+it more easy for new users to find their way. If you want to sacrifice some of
+that simplicity to gain more power, you can update your User Experience setting
+accordingly.
+
+:::

sites/orgdocs/docs/about/pledge/motivation/readme.mdx

@@ -4,7 +4,6 @@ title: My reasoning behind FreeSewing's Revenue Pledge
 
 :::note
 
-
 This is a personal note by Joost De Cock -- the FreeSewing maintainer -- about
 his motivations for [the FreeSewing revenue pledge](/docs/about/pledge/)
 
@@ -20,7 +19,7 @@ I am very fortunate to have been born in Western Europe, to have a good job, and
 Could I use the money? Yes I could.
 Do I need the money? No I don't.
 
-##### The value of your support
+## The value of your support
 
 The main risk to FreeSewing is the same as any open source project out there: maintainer burnout.
 
@@ -31,7 +30,7 @@ When you become a FreeSewing Patron, you give more than money.
 To me, the main value is the message you send to me and other people working on this.
 And that message is: **Hey, you're doing a worthwhile thing. Keep up the good work**.
 
-##### The value of your money
+## The value of your money
 
 It is not _just_ about the money. But that doesn't mean the money is not important.
 Much to the contrary.
@@ -45,7 +44,7 @@ It makes this project not only fun to do, but also socially responsible.
 And I need that to convince myself that yes, it's OK to spend all my time doing this,
 because FreeSewing is a force for good.
 
-##### Charity is not sexy
+## Charity is not sexy
 
 Here's the tricky part: People give less once they know the money goes to charity.
 I wish it wasn't the case, but it is.
@@ -58,7 +57,7 @@ Yes, everything is free, and the money doesn't actually go to paying the server
 But that doesn't mean that these contributions are not crucial to the well-being of the project,
 or at the very least its maintainer (that would be me).
 
-##### Why MSF is my charity of choice
+## Why MSF is my charity of choice
 
 There's a lot of misery in the world. As I watch the news, I often feel my faith in humanity slipping.
 Some of the most vulnerable people on this planet seem largely abandoned by rich countries and supra-national organisations.

sites/orgdocs/docs/about/site/csets/readme.mdx

@@ -5,13 +5,13 @@ title: Curated measurements sets
 FreeSewing's **curated measurements sets** are a collection of
 measurements sets that represent real people.
 
-These sets are used by designers to test their designs on a variety of bodies, as
+These sets are used by designers to test their designs on a variety of bodies,
-well as by FreeSewing users to test the platform.
+as well as by FreeSewing users to test the platform.
 
 ## History
 
 FreeSewing is all about bespoke sewing patterns, so perpetuating the
-myth of *standard sizes* was never something we wanted to be part of.
+myth of _standard sizes_ was never something we wanted to be part of.
 
 In reality, having to take measurements prior to even being able to try the
 platform adds a lot of friction to the onboarding of new users. So at one
@@ -20,24 +20,27 @@ people could see what generating a pattern looked like without having to
 start measuring themselves.
 
 With the release of version 3 of FreeSewing, we wanted to move away from these
-*made up* measurements and instead work with the data of real people to test
+_made up_ measurements and instead work with the data of real people to test
 our platform.
 
 We now no longer present users who want to try out the site a range of
-*standard sizes* but rather a collection of measurements sets where they can 
+_standard sizes_ but rather a collection of measurements sets where they can
 pick the one that best represents their own body.
 
 ## Suggesting a measurements set for curation
 
-We rely on our community to submit measurements sets for curation. 
+We rely on our community to submit measurements sets for curation. If you have
-If you have a public measurements set on the site, you can suggest it for curation.
+a public measurements set on the site, you can suggest it for curation.
 
-To be part of our curated measurements sets collection, you should provide the following:
+To be part of our curated measurements sets collection, you should provide the
-
+following:
-- **All measurements** of the person. We do not accept incomplete sets as that would mean some designs would not work with them.
-- **The height** of the person. This helps users select a measurements set closest to their own body.
-- **A picture** of the person to be featured [in our line-up of curated measurements sets](/curated-sets). See below for tips.
 
+- **All measurements** of the person. We do not accept incomplete sets as that
+  would mean some designs would not work with them.
+- **The height** of the person. This helps users select a measurements set
+  closest to their own body.
+- **A picture** of the person to be featured [in our line-up of curated
+  measurements sets](/curated-sets). See below for tips.
 
 ## Tips for line-up pictures
 
@@ -50,29 +53,30 @@ Below are some tips on how to get good results:
 ### Don't stand too close to the camera
 
 For best results, ask a friend to take a picture from further away and zoom in.
-This helps avoid the *fisheye* effect that you get when taking a picture from up close.
+This helps avoid the _fisheye_ effect that you get when taking a picture from
+up close.
 
-<div className="grid grid-cols-2 gap-2">
+![A full-body picture of Joost taken from close](cset1.jpg 'A picture taken
+from close will give you this weird fish eye lens effect')
 
-![A full-body picture of Joost taken from close](cset1.jpg "A picture taken from close will give you this weird fish eye lens effect")
+![A full-body picture of Joost taken from further](cset2.jpg 'A picture taken
+from further and zoomed in will look a lot better')
 
-![A full-body picture of Joost taken from further](cset2.jpg "A picture taken from further and zoomed in will look a lot better")
+The fist picture is taken from (too) close. There's nothing really wrong with
+this picture, but it looks weird. That's because this is taken with a mobile
+phone and the wide angle on these types of cameras gives you this subtle fish
+eye effect.
 
-</div>
+The picture on the right was take further away with zoom. This is a much
-
+better representation of reality and the pose looks natural because the fish
-The picture on the left is taken from (too) close.
+eye effect is neutralized.
-There's nothing really wrong with this picture, but it looks weird. 
-That's because this is taken with a mobile phone and the wide angle on these types of cameras gives you this subtle fish eye effect.
-
-The picture on the right was take further away with zoom.
-This is a much better representation of reality and the pose looks natural because the fish eye effect is neutralized.
 
 #### Stand in front of a white background
 
 We will edit out the background of your picture like this:
 
-![A full-body picture of Joost on a white background](joost.png "A picture on a white background makes our life easier")
+![A full-body picture of Joost on a white background](joost.png 'A picture on a
-
+white background makes our life easier')
-So you can make that step a lit easier for us if you can pose in front of a white or plain background.
-
 
+So you can make that step a lit easier for us if you can pose in front of a
+white or plain background.

sites/orgdocs/docs/about/site/draft/core-settings/locale/readme.mdx

@@ -1,17 +0,0 @@
----
-title: Language
----
-
-This controls the language that will be used to translate text on your pattern.
-
-FreeSewing currently supports the following languages:
-
-- English
-- Spanish
-- French
-- German
-- Dutch
-- Ukrainian
-
-You can pick any of these and your pattern will be translated in this language.
-

sites/orgdocs/docs/about/site/draft/core-settings/readme.mdx

@@ -2,6 +2,8 @@
 title: Core Settings
 ---
 
+import ControlTip from '@site/docs/_controltip.mdx'
+
 The **Core Settings** menu allows you to tweak various aspects of the
 FreeSewing Core library, which -- under the hood -- generates your pattern for
 you.
@@ -14,4 +16,3 @@ what design you are generating a pattern for.
 <ReadMore />
 
 <ControlTip />
-

sites/orgdocs/docs/about/site/draft/readme.mdx

@@ -2,6 +2,8 @@
 title: How to generate bespoke sewing patterns
 ---
 
+import ControlTip from '@site/docs/_controltip.mdx'
+
 Generating custom sewing patterns based on your measurements is the flagship feature of our website.
 We provide an online environment that allows you to customize various aspects of your pattern.
 
@@ -56,4 +58,6 @@ This allows you to quickly verify the specific role of a setting or option witho
 
 ## Editor modes
 
-<Fixme>Complete these docs</Fixme>
+:::note FIXME
+Complete these docs
+:::

sites/orgdocs/docs/about/site/draft/ui-settings/readme.mdx

@@ -2,10 +2,11 @@
 title: UI Settings
 ---
 
+import ControlTip from '@site/docs/_controltip.mdx'
+
 The **UI Settings** menu allows you to tweak certain aspects of the user interface (UI).
 Those aspects are:
 
 <ReadMore />
 
 <ControlTip />
-

sites/orgdocs/docs/about/site/patterns/readme.mdx

@@ -14,7 +14,9 @@ With this, we can regenerate the pattern. So this is all we store.
 
 This also means that if a pattern goes through significant changes, or a new major version with breaking changes is released, we may no longer be able to generate the (old) pattern. For this reason, you should download the pattern as PDF or SVG and save it locally if you want to archive it.
 
-<Tldr compact> Backup your patterns if you intent to keep them for a long time</Tldr>
+:::tip
+Backup your patterns if you intent to keep them for a long time
+:::
 
 In addition to the settings required to recreate the pattern, patterns are stored with the following fields:
 

sites/orgdocs/docs/about/site/readme.mdx

@@ -5,20 +5,23 @@ title: Using the FreeSewing.org website
 On these pages, we'll paint a high-level picture of how to get the most out of the FreeSewing.org website.
 Most people will be most interested in [How to generate bespoke sewing patterns](/docs/about/site/draft/).
 
+:::tip Where can I download the patterns?
 
-<Comment by="joost">
+It can be frustrating for visitors who come here expecting a website where they
+can download sewing patterns that they can't seem to find the sewing patterns
+to download. Almost like hiding the _download button_ is some elaborate scheme
+to waste their time.
 
-##### Where can I download the patterns?
+I don't really know how to fix this because I cannot control people's
-
+expectations. FreeSewing.org is _very_ different from a website with some
-It can be frustrating for visitors who come here expecting a website where they can download sewing patterns that they can't seem to find the sewing patterns to download. Almost like hiding the *download button* is some elaborate scheme to waste their time.
+links to PDF sewing patterns. So if that's what you're expecting, we almost
-
+have to de-train you before we can talk about what this site offers.
-I don't really know how to fix this because I cannot control people's expectations.
-FreeSewing.org is _very_ different from a website with some links to PDF sewing patterns.
-So if that's what you're expecting, we almost have to de-train you before we can talk about what this site offers.
 
 So I'm not going to do that. I'm going to assume you are reading with an open mind.
 
-</Comment>
+joost
+
+:::
 
 ## Finding your way
 
@@ -35,7 +38,7 @@ On every page of FreeSewing.org is the same header with links to the most import
 In addition, the header also has buttons to change the **Theme** (or color scheme) and **Language** of the website.
 
 On mobile, the header is at the bottom of the page and because of space constraints not all of these links are shown.
-However, click the *hamburger icon* to open the menu that contains all of these links. 
+However, click the _hamburger icon_ to open the menu that contains all of these links.
 
 ## Signing up or Signing in
 
@@ -75,8 +78,6 @@ Click through to learn more about the following features:
 - [Bookmarks](/docs/about/site/bookmarks)
 - [API Keys](/docs/about/site/apikeys)
 
-
 ## Generating sewing patterns
 
 With that out of the way, let's move on to [How to generate bespoke sewing patterns](/docs/about/site/draft/).
-

sites/orgdocs/src/css/custom.css

@@ -331,6 +331,8 @@ svg.freesewing.pattern circle.stroke-xl {
   stroke-width: calc(var(--pattern-stroke-xl) * var(--pattern-scale));
 }
 
+svg.freesewing.pattern path.stroke-xxl,
+svg.freesewing.pattern circle.stroke-xxl,
 svg.freesewing.pattern path.stroke-2xl,
 svg.freesewing.pattern circle.stroke-2xl {
   stroke-width: calc(var(--pattern-stroke-2xl) * var(--pattern-scale));

sites/orgdocs/src/theme/MDXComponents/index.js

@@ -1,21 +1,22 @@
 // Ejected Docusaurus components
-import React from 'react';
+import React from 'react'
-import Head from '@docusaurus/Head';
+import Head from '@docusaurus/Head'
-import MDXCode from '@theme/MDXComponents/Code';
+import MDXCode from '@theme/MDXComponents/Code'
-import MDXA from '@theme/MDXComponents/A';
+import MDXA from '@theme/MDXComponents/A'
-import MDXPre from '@theme/MDXComponents/Pre';
+import MDXPre from '@theme/MDXComponents/Pre'
-import MDXDetails from '@theme/MDXComponents/Details';
+import MDXDetails from '@theme/MDXComponents/Details'
-import MDXHeading from '@theme/MDXComponents/Heading';
+import MDXHeading from '@theme/MDXComponents/Heading'
-import MDXUl from '@theme/MDXComponents/Ul';
+import MDXUl from '@theme/MDXComponents/Ul'
-import MDXLi from '@theme/MDXComponents/Li';
+import MDXLi from '@theme/MDXComponents/Li'
-import MDXImg from '@theme/MDXComponents/Img';
+import MDXImg from '@theme/MDXComponents/Img'
-import Admonition from '@theme/Admonition';
+import Admonition from '@theme/Admonition'
-import Mermaid from '@theme/Mermaid';
+import Mermaid from '@theme/Mermaid'
 // Other Docusaurus components
-import Tabs from '@theme/Tabs';
+import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem';
+import TabItem from '@theme/TabItem'
 // Custom FreeSewing components
 import { Example } from './example.mjs'
+import { Legend } from './legend.mjs'
 import { ReadMore } from './readmore.js'
 
 const MDXComponents = {
@@ -41,6 +42,7 @@ const MDXComponents = {
   TabItem,
   // Custom FreeSewing components
   Example,
+  Legend,
   ReadMore,
 }
 

sites/orgdocs/src/theme/MDXComponents/legend.mjs

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Legend as LegendDesign } from '@freesewing/legend'
+import { Pattern } from '@freesewing/react-components/pattern'
+
+export const Legend = ({ part = '' }) => {
+  const settings = {
+    only: [`legend.${part}`],
+    measurements: {
+      head: 370,
+    },
+  }
+  const pattern = new LegendDesign(settings).draft()
+
+  const patternProps = {
+    renderProps: pattern.getRenderProps(),
+    logs: pattern.getLogs(),
+  }
+
+  return (
+    <figure className="shadow p-2">
+      <Pattern {...patternProps} />
+    </figure>
+  )
+}