From a4b184325aea5ecbc34315310367c44544da68c1 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 6 Oct 2024 11:49:14 +0200 Subject: [PATCH] wip: Work on design docs --- i18n/designs.mjs | 133 ++++ i18n/optiongroups.yaml | 15 + packages/react-components/package.json | 1 + .../src/linedrawings/aaron.mjs | 99 +++ .../src/linedrawings/albert.mjs | 99 +++ .../react-components/src/linedrawings/bee.mjs | 58 ++ .../src/linedrawings/bella.mjs | 99 +++ .../src/linedrawings/benjamin.mjs | 52 ++ .../src/linedrawings/bent.mjs | 99 +++ .../src/linedrawings/bibi.mjs | 99 +++ .../react-components/src/linedrawings/bob.mjs | 89 +++ .../src/linedrawings/breanna.mjs | 99 +++ .../src/linedrawings/brian.mjs | 99 +++ .../src/linedrawings/bruce.mjs | 99 +++ .../src/linedrawings/carlita.mjs | 375 +++++++++ .../src/linedrawings/carlton.mjs | 357 +++++++++ .../src/linedrawings/cathrin.mjs | 752 ++++++++++++++++++ .../src/linedrawings/charlie.mjs | 285 +++++++ .../src/linedrawings/cornelius.mjs | 476 +++++++++++ .../src/linedrawings/diana.mjs | 99 +++ .../src/linedrawings/florence.mjs | 58 ++ .../src/linedrawings/florent.mjs | 103 +++ .../src/linedrawings/gozer.mjs | 179 +++++ .../react-components/src/linedrawings/hi.mjs | 120 +++ .../src/linedrawings/holmes.mjs | 157 ++++ .../src/linedrawings/hortensia.mjs | 53 ++ .../src/linedrawings/huey.mjs | 99 +++ .../src/linedrawings/hugo.mjs | 99 +++ .../src/linedrawings/index.mjs | 143 ++++ .../src/linedrawings/lucy.mjs | 79 ++ .../src/linedrawings/lumina.mjs | 161 ++++ .../src/linedrawings/lumira.mjs | 179 +++++ .../src/linedrawings/lunetius.mjs | 58 ++ .../src/linedrawings/noble.mjs | 99 +++ .../src/linedrawings/shared.mjs | 44 + .../src/linedrawings/simon.mjs | 140 ++++ .../src/linedrawings/teagan.mjs | 99 +++ .../src/linedrawings/tristan.mjs | 87 ++ .../react-components/src/linedrawings/uma.mjs | 89 +++ .../src/linedrawings/umbra.mjs | 170 ++++ .../src/linedrawings/wahid.mjs | 117 +++ .../docs/designs/aaron/cutting/readme.mdx | 18 - .../docs/designs/aaron/fabric/readme.mdx | 14 - .../designs/aaron/instructions/readme.mdx | 11 +- .../designs/aaron/measurements/readme.mdx | 5 - .../docs/designs/aaron/needs/readme.mdx | 20 - .../docs/designs/aaron/notes/readme.mdx | 20 - .../docs/designs/aaron/options/readme.mdx | 6 +- sites/orgdocs/docs/designs/aaron/readme.mdx | 77 +- sites/orgdocs/src/css/custom.css | 13 + .../src/theme/MDXComponents/design-info.mjs | 409 ++++++---- 51 files changed, 6147 insertions(+), 263 deletions(-) create mode 100644 i18n/designs.mjs create mode 100644 i18n/optiongroups.yaml create mode 100644 packages/react-components/src/linedrawings/aaron.mjs create mode 100644 packages/react-components/src/linedrawings/albert.mjs create mode 100644 packages/react-components/src/linedrawings/bee.mjs create mode 100644 packages/react-components/src/linedrawings/bella.mjs create mode 100644 packages/react-components/src/linedrawings/benjamin.mjs create mode 100644 packages/react-components/src/linedrawings/bent.mjs create mode 100644 packages/react-components/src/linedrawings/bibi.mjs create mode 100644 packages/react-components/src/linedrawings/bob.mjs create mode 100644 packages/react-components/src/linedrawings/breanna.mjs create mode 100644 packages/react-components/src/linedrawings/brian.mjs create mode 100644 packages/react-components/src/linedrawings/bruce.mjs create mode 100644 packages/react-components/src/linedrawings/carlita.mjs create mode 100644 packages/react-components/src/linedrawings/carlton.mjs create mode 100644 packages/react-components/src/linedrawings/cathrin.mjs create mode 100644 packages/react-components/src/linedrawings/charlie.mjs create mode 100644 packages/react-components/src/linedrawings/cornelius.mjs create mode 100644 packages/react-components/src/linedrawings/diana.mjs create mode 100644 packages/react-components/src/linedrawings/florence.mjs create mode 100644 packages/react-components/src/linedrawings/florent.mjs create mode 100644 packages/react-components/src/linedrawings/gozer.mjs create mode 100644 packages/react-components/src/linedrawings/hi.mjs create mode 100644 packages/react-components/src/linedrawings/holmes.mjs create mode 100644 packages/react-components/src/linedrawings/hortensia.mjs create mode 100644 packages/react-components/src/linedrawings/huey.mjs create mode 100644 packages/react-components/src/linedrawings/hugo.mjs create mode 100644 packages/react-components/src/linedrawings/index.mjs create mode 100644 packages/react-components/src/linedrawings/lucy.mjs create mode 100644 packages/react-components/src/linedrawings/lumina.mjs create mode 100644 packages/react-components/src/linedrawings/lumira.mjs create mode 100644 packages/react-components/src/linedrawings/lunetius.mjs create mode 100644 packages/react-components/src/linedrawings/noble.mjs create mode 100644 packages/react-components/src/linedrawings/shared.mjs create mode 100644 packages/react-components/src/linedrawings/simon.mjs create mode 100644 packages/react-components/src/linedrawings/teagan.mjs create mode 100644 packages/react-components/src/linedrawings/tristan.mjs create mode 100644 packages/react-components/src/linedrawings/uma.mjs create mode 100644 packages/react-components/src/linedrawings/umbra.mjs create mode 100644 packages/react-components/src/linedrawings/wahid.mjs delete mode 100644 sites/orgdocs/docs/designs/aaron/cutting/readme.mdx delete mode 100644 sites/orgdocs/docs/designs/aaron/fabric/readme.mdx delete mode 100644 sites/orgdocs/docs/designs/aaron/measurements/readme.mdx delete mode 100644 sites/orgdocs/docs/designs/aaron/needs/readme.mdx delete mode 100644 sites/orgdocs/docs/designs/aaron/notes/readme.mdx diff --git a/i18n/designs.mjs b/i18n/designs.mjs new file mode 100644 index 00000000000..29b5c9ca341 --- /dev/null +++ b/i18n/designs.mjs @@ -0,0 +1,133 @@ +/* + * This file is auto-generated by the reconfigure script + * Any changes will be overwritten next time the repo is reconfigured + */ +import { i18n as aaron } from '@freesewing/aaron' +import { i18n as albert } from '@freesewing/albert' +import { i18n as bee } from '@freesewing/bee' +import { i18n as bella } from '@freesewing/bella' +import { i18n as benjamin } from '@freesewing/benjamin' +import { i18n as bent } from '@freesewing/bent' +import { i18n as bibi } from '@freesewing/bibi' +import { i18n as bob } from '@freesewing/bob' +import { i18n as breanna } from '@freesewing/breanna' +import { i18n as brian } from '@freesewing/brian' +import { i18n as bruce } from '@freesewing/bruce' +import { i18n as carlita } from '@freesewing/carlita' +import { i18n as carlton } from '@freesewing/carlton' +import { i18n as cathrin } from '@freesewing/cathrin' +import { i18n as charlie } from '@freesewing/charlie' +import { i18n as cornelius } from '@freesewing/cornelius' +import { i18n as diana } from '@freesewing/diana' +import { i18n as examples } from '@freesewing/examples' +import { i18n as florence } from '@freesewing/florence' +import { i18n as florent } from '@freesewing/florent' +import { i18n as gozer } from '@freesewing/gozer' +import { i18n as hi } from '@freesewing/hi' +import { i18n as holmes } from '@freesewing/holmes' +import { i18n as hortensia } from '@freesewing/hortensia' +import { i18n as huey } from '@freesewing/huey' +import { i18n as hugo } from '@freesewing/hugo' +import { i18n as jaeger } from '@freesewing/jaeger' +import { i18n as jane } from '@freesewing/jane' +import { i18n as legend } from '@freesewing/legend' +import { i18n as lily } from '@freesewing/lily' +import { i18n as lucy } from '@freesewing/lucy' +import { i18n as lumina } from '@freesewing/lumina' +import { i18n as lumira } from '@freesewing/lumira' +import { i18n as lunetius } from '@freesewing/lunetius' +import { i18n as magde } from '@freesewing/magde' +import { i18n as noble } from '@freesewing/noble' +import { i18n as octoplushy } from '@freesewing/octoplushy' +import { i18n as onyx } from '@freesewing/onyx' +import { i18n as opal } from '@freesewing/opal' +import { i18n as otis } from '@freesewing/otis' +import { i18n as paco } from '@freesewing/paco' +import { i18n as penelope } from '@freesewing/penelope' +import { i18n as plugintest } from '@freesewing/plugintest' +import { i18n as rendertest } from '@freesewing/rendertest' +import { i18n as sandy } from '@freesewing/sandy' +import { i18n as shelly } from '@freesewing/shelly' +import { i18n as shin } from '@freesewing/shin' +import { i18n as simon } from '@freesewing/simon' +import { i18n as simone } from '@freesewing/simone' +import { i18n as skully } from '@freesewing/skully' +import { i18n as sven } from '@freesewing/sven' +import { i18n as tamiko } from '@freesewing/tamiko' +import { i18n as teagan } from '@freesewing/teagan' +import { i18n as tiberius } from '@freesewing/tiberius' +import { i18n as titan } from '@freesewing/titan' +import { i18n as trayvon } from '@freesewing/trayvon' +import { i18n as tristan } from '@freesewing/tristan' +import { i18n as uma } from '@freesewing/uma' +import { i18n as umbra } from '@freesewing/umbra' +import { i18n as wahid } from '@freesewing/wahid' +import { i18n as walburga } from '@freesewing/walburga' +import { i18n as waralee } from '@freesewing/waralee' +import { i18n as yuri } from '@freesewing/yuri' + +export const designs = { + aaron: aaron.en, + albert: albert.en, + bee: bee.en, + bella: bella.en, + benjamin: benjamin.en, + bent: bent.en, + bibi: bibi.en, + bob: bob.en, + breanna: breanna.en, + brian: brian.en, + bruce: bruce.en, + carlita: carlita.en, + carlton: carlton.en, + cathrin: cathrin.en, + charlie: charlie.en, + cornelius: cornelius.en, + diana: diana.en, + examples: examples.en, + florence: florence.en, + florent: florent.en, + gozer: gozer.en, + hi: hi.en, + holmes: holmes.en, + hortensia: hortensia.en, + huey: huey.en, + hugo: hugo.en, + jaeger: jaeger.en, + jane: jane.en, + legend: legend.en, + lily: lily.en, + lucy: lucy.en, + lumina: lumina.en, + lumira: lumira.en, + lunetius: lunetius.en, + magde: magde.en, + noble: noble.en, + octoplushy: octoplushy.en, + onyx: onyx.en, + opal: opal.en, + otis: otis.en, + paco: paco.en, + penelope: penelope.en, + plugintest: plugintest.en, + rendertest: rendertest.en, + sandy: sandy.en, + shelly: shelly.en, + shin: shin.en, + simon: simon.en, + simone: simone.en, + skully: skully.en, + sven: sven.en, + tamiko: tamiko.en, + teagan: teagan.en, + tiberius: tiberius.en, + titan: titan.en, + trayvon: trayvon.en, + tristan: tristan.en, + uma: uma.en, + umbra: umbra.en, + wahid: wahid.en, + walburga: walburga.en, + waralee: waralee.en, + yuri: yuri.en, +} diff --git a/i18n/optiongroups.yaml b/i18n/optiongroups.yaml new file mode 100644 index 00000000000..c3c4653ea3d --- /dev/null +++ b/i18n/optiongroups.yaml @@ -0,0 +1,15 @@ +advanced: Advanced +backPockets: Back pockets +closure: Closure +collar: Collar +conditional: Conditional +construction: Construction +cuffs: Cuffs +darts: Darts +elastic: Elastic +fit: Fit +frontPockets: Front pockets +length: Length +pockets: Pockets +style: Style +test: Test diff --git a/packages/react-components/package.json b/packages/react-components/package.json index bd3d3304bfb..1b5fcb267f0 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -28,6 +28,7 @@ "./xray": "./src/pattern-xray/index.mjs", "./editor": "./src/editor/index.mjs", "./icons": "./src/editor/swizzle/components/icons.mjs", + "./linedrawings": "./src/linedrawings/index.mjs", "./popout": "./src/popout.mjs", "./methods": "./src/editor/swizzle/methods/index.mjs" }, diff --git a/packages/react-components/src/linedrawings/aaron.mjs b/packages/react-components/src/linedrawings/aaron.mjs new file mode 100644 index 00000000000..3bf81e6cf8a --- /dev/null +++ b/packages/react-components/src/linedrawings/aaron.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Aaron = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const AaronFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const AaronBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/albert.mjs b/packages/react-components/src/linedrawings/albert.mjs new file mode 100644 index 00000000000..4961d86af4f --- /dev/null +++ b/packages/react-components/src/linedrawings/albert.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Albert = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const AlbertFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const AlbertBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the front + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/bee.mjs b/packages/react-components/src/linedrawings/bee.mjs new file mode 100644 index 00000000000..995306e8a27 --- /dev/null +++ b/packages/react-components/src/linedrawings/bee.mjs @@ -0,0 +1,58 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bee = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const BeeFront = ({ + className = 'h-full max-w-full m-auto text-base-content linedrawing', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/bella.mjs b/packages/react-components/src/linedrawings/bella.mjs new file mode 100644 index 00000000000..3b5321c44bf --- /dev/null +++ b/packages/react-components/src/linedrawings/bella.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bella = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BellaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BellaBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the front + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/benjamin.mjs b/packages/react-components/src/linedrawings/benjamin.mjs new file mode 100644 index 00000000000..dab278d4454 --- /dev/null +++ b/packages/react-components/src/linedrawings/benjamin.mjs @@ -0,0 +1,52 @@ +import React from 'react' +import { LineDrawingWrapper } from './shared.mjs' + +const strokeScale = 0.5 + +export const Benjamin = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const BenjaminFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/bent.mjs b/packages/react-components/src/linedrawings/bent.mjs new file mode 100644 index 00000000000..cdba8c3b5f6 --- /dev/null +++ b/packages/react-components/src/linedrawings/bent.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bent = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BentFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BentBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/bibi.mjs b/packages/react-components/src/linedrawings/bibi.mjs new file mode 100644 index 00000000000..2f81c8f2aa6 --- /dev/null +++ b/packages/react-components/src/linedrawings/bibi.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bibi = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BibiFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BibiBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/bob.mjs b/packages/react-components/src/linedrawings/bob.mjs new file mode 100644 index 00000000000..bfdc0533853 --- /dev/null +++ b/packages/react-components/src/linedrawings/bob.mjs @@ -0,0 +1,89 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bob = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BobFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BobBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/breanna.mjs b/packages/react-components/src/linedrawings/breanna.mjs new file mode 100644 index 00000000000..cce23f46e41 --- /dev/null +++ b/packages/react-components/src/linedrawings/breanna.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Breanna = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BreannaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BreannaBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/brian.mjs b/packages/react-components/src/linedrawings/brian.mjs new file mode 100644 index 00000000000..878cfb0b85d --- /dev/null +++ b/packages/react-components/src/linedrawings/brian.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Brian = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BrianFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BrianBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/bruce.mjs b/packages/react-components/src/linedrawings/bruce.mjs new file mode 100644 index 00000000000..3a2c4d11f30 --- /dev/null +++ b/packages/react-components/src/linedrawings/bruce.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Bruce = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BruceFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BruceBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/carlita.mjs b/packages/react-components/src/linedrawings/carlita.mjs new file mode 100644 index 00000000000..53bf94ffed7 --- /dev/null +++ b/packages/react-components/src/linedrawings/carlita.mjs @@ -0,0 +1,375 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Carlita = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const CarlitaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const CarlitaBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/carlton.mjs b/packages/react-components/src/linedrawings/carlton.mjs new file mode 100644 index 00000000000..71a322dd17b --- /dev/null +++ b/packages/react-components/src/linedrawings/carlton.mjs @@ -0,0 +1,357 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Carlton = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const CarltonFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const CarltonBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/cathrin.mjs b/packages/react-components/src/linedrawings/cathrin.mjs new file mode 100644 index 00000000000..577116f16f5 --- /dev/null +++ b/packages/react-components/src/linedrawings/cathrin.mjs @@ -0,0 +1,752 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Cathrin = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const CathrinFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const CathrinBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/charlie.mjs b/packages/react-components/src/linedrawings/charlie.mjs new file mode 100644 index 00000000000..857773c3f22 --- /dev/null +++ b/packages/react-components/src/linedrawings/charlie.mjs @@ -0,0 +1,285 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Charlie = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const CharlieFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const CharlieBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/cornelius.mjs b/packages/react-components/src/linedrawings/cornelius.mjs new file mode 100644 index 00000000000..b19c6e80669 --- /dev/null +++ b/packages/react-components/src/linedrawings/cornelius.mjs @@ -0,0 +1,476 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Cornelius = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const CorneliusFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const CorneliusBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/diana.mjs b/packages/react-components/src/linedrawings/diana.mjs new file mode 100644 index 00000000000..7938f25e168 --- /dev/null +++ b/packages/react-components/src/linedrawings/diana.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Diana = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const DianaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const DianaBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/florence.mjs b/packages/react-components/src/linedrawings/florence.mjs new file mode 100644 index 00000000000..50bcdd302ad --- /dev/null +++ b/packages/react-components/src/linedrawings/florence.mjs @@ -0,0 +1,58 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Florence = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const FlorenceFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/florent.mjs b/packages/react-components/src/linedrawings/florent.mjs new file mode 100644 index 00000000000..2f0a22d5bca --- /dev/null +++ b/packages/react-components/src/linedrawings/florent.mjs @@ -0,0 +1,103 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Florent = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const FlorentFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/gozer.mjs b/packages/react-components/src/linedrawings/gozer.mjs new file mode 100644 index 00000000000..105fd118659 --- /dev/null +++ b/packages/react-components/src/linedrawings/gozer.mjs @@ -0,0 +1,179 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Gozer = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const GozerFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const GozerBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/hi.mjs b/packages/react-components/src/linedrawings/hi.mjs new file mode 100644 index 00000000000..39f342dc129 --- /dev/null +++ b/packages/react-components/src/linedrawings/hi.mjs @@ -0,0 +1,120 @@ +import React from 'react' +import { LineDrawingWrapper } from './shared.mjs' + +const strokeScale = 0.5 + +export const Hi = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const HiFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/holmes.mjs b/packages/react-components/src/linedrawings/holmes.mjs new file mode 100644 index 00000000000..d84c45891bb --- /dev/null +++ b/packages/react-components/src/linedrawings/holmes.mjs @@ -0,0 +1,157 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Holmes = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const HolmesFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/hortensia.mjs b/packages/react-components/src/linedrawings/hortensia.mjs new file mode 100644 index 00000000000..e3eba6a5c0f --- /dev/null +++ b/packages/react-components/src/linedrawings/hortensia.mjs @@ -0,0 +1,53 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Hortensia = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const HortensiaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/huey.mjs b/packages/react-components/src/linedrawings/huey.mjs new file mode 100644 index 00000000000..bc3954cb092 --- /dev/null +++ b/packages/react-components/src/linedrawings/huey.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Huey = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const HueyFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const HueyBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/hugo.mjs b/packages/react-components/src/linedrawings/hugo.mjs new file mode 100644 index 00000000000..fa1d1f5bf34 --- /dev/null +++ b/packages/react-components/src/linedrawings/hugo.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Hugo = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const HugoFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const HugoBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/index.mjs b/packages/react-components/src/linedrawings/index.mjs new file mode 100644 index 00000000000..3b8ff671ab9 --- /dev/null +++ b/packages/react-components/src/linedrawings/index.mjs @@ -0,0 +1,143 @@ +import { Aaron, AaronFront, AaronBack } from './aaron.mjs' +import { Albert, AlbertFront } from './albert.mjs' +import { Bee, BeeFront } from './bee.mjs' +import { Bella, BellaFront, BellaBack } from './bella.mjs' +import { Benjamin, BenjaminFront } from './benjamin.mjs' +import { Bent, BentFront, BentBack } from './bent.mjs' +import { Bibi, BibiFront, BibiBack } from './bibi.mjs' +import { Bob, BobFront, BobBack } from './bob.mjs' +import { Breanna, BreannaFront, BreannaBack } from './breanna.mjs' +import { Brian, BrianFront, BrianBack } from './brian.mjs' +import { Bruce, BruceFront, BruceBack } from './bruce.mjs' +import { Carlita, CarlitaFront, CarlitaBack } from './carlita.mjs' +import { Carlton, CarltonFront, CarltonBack } from './carlton.mjs' +import { Cathrin, CathrinFront, CathrinBack } from './cathrin.mjs' +import { Charlie, CharlieFront, CharlieBack } from './charlie.mjs' +import { Cornelius, CorneliusFront, CorneliusBack } from './cornelius.mjs' +import { Diana, DianaFront, DianaBack } from './diana.mjs' +import { Florence, FlorenceFront } from './florence.mjs' +import { Florent, FlorentFront } from './florent.mjs' +import { Gozer, GozerFront, GozerBack } from './gozer.mjs' +import { Hi, HiFront } from './hi.mjs' +import { Holmes, HolmesFront } from './holmes.mjs' +import { Hortensia, HortensiaFront } from './hortensia.mjs' +import { Huey, HueyFront, HueyBack } from './huey.mjs' +import { Hugo, HugoFront, HugoBack } from './hugo.mjs' +import { Lucy, LucyFront } from './lucy.mjs' +import { Lumina, LuminaFront, LuminaBack } from './lumina.mjs' +import { Lumira, LumiraFront, LumiraBack } from './lumira.mjs' +import { Lunetius, LunetiusFront } from './lunetius.mjs' +import { Noble, NobleFront, NobleBack } from './noble.mjs' +import { Simon, SimonFront, SimonBack } from './simon.mjs' +import { Teagan, TeaganFront, TeaganBack } from './teagan.mjs' +import { Tristan, TristanFront, TristanBack } from './tristan.mjs' +import { Uma, UmaFront, UmaBack } from './uma.mjs' +import { Umbra, UmbraFront, UmbraBack } from './umbra.mjs' +import { Wahid, WahidFront, WahidBack } from './wahid.mjs' + +export const lineDrawingsFront = { + aaron: AaronFront, + albert: AlbertFront, + bee: BeeFront, + bella: BellaFront, + benjamin: BenjaminFront, + bent: BentFront, + bibi: BibiFront, + bob: BobFront, + breanna: BreannaFront, + brian: BrianFront, + bruce: BruceFront, + carlita: CarlitaFront, + carlton: CarltonFront, + cathrin: CathrinFront, + charlie: CharlieFront, + cornelius: CorneliusFront, + diana: DianaFront, + florence: FlorenceFront, + florent: FlorentFront, + gozer: GozerFront, + hi: HiFront, + holmes: HolmesFront, + huey: HueyFront, + hugo: HugoFront, + lucy: LucyFront, + lumina: LuminaFront, + lumira: LumiraFront, + lunetius: LunetiusFront, + noble: NobleFront, + hortensia: HortensiaFront, + simon: SimonFront, + teagan: TeaganFront, + tristan: TristanFront, + uma: UmaFront, + umbra: UmbraFront, + wahid: WahidFront, +} + +export const lineDrawingsBack = { + aaron: AaronBack, + bella: BellaBack, + bent: BentBack, + bibi: BibiBack, + bob: BobBack, + breanna: BreannaBack, + brian: BrianBack, + bruce: BruceBack, + carlita: CarlitaBack, + carlton: CarltonBack, + cathrin: CathrinBack, + charlie: CharlieBack, + cornelius: CorneliusBack, + diana: DianaBack, + gozer: GozerBack, + huey: HueyBack, + hugo: HugoBack, + lumina: LuminaBack, + lumira: LumiraBack, + noble: NobleBack, + simon: SimonBack, + teagan: TeaganBack, + tristan: TristanBack, + uma: UmaBack, + umbra: UmbraBack, + wahid: WahidBack, +} + +export const lineDrawings = { + aaron: Aaron, + albert: Albert, + bee: Bee, + bella: Bella, + benjamin: Benjamin, + bent: Bent, + bibi: Bibi, + bob: Bob, + breanna: Breanna, + brian: Brian, + bruce: Bruce, + carlita: Carlita, + carlton: Carlton, + cathrin: Cathrin, + charlie: Charlie, + cornelius: Cornelius, + diana: Diana, + florence: Florence, + florent: Florent, + gozer: Gozer, + hi: Hi, + holmes: Holmes, + huey: Huey, + hugo: Hugo, + lucy: Lucy, + lumina: Lumina, + lumira: Lumira, + lunetius: Lunetius, + noble: Noble, + hortensia: Hortensia, + simon: Simon, + teagan: Teagan, + tristan: Tristan, + uma: Uma, + umbra: Umbra, + wahid: Wahid, +} diff --git a/packages/react-components/src/linedrawings/lucy.mjs b/packages/react-components/src/linedrawings/lucy.mjs new file mode 100644 index 00000000000..62c51c75b4a --- /dev/null +++ b/packages/react-components/src/linedrawings/lucy.mjs @@ -0,0 +1,79 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Lucy = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const LucyFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + +) diff --git a/packages/react-components/src/linedrawings/lumina.mjs b/packages/react-components/src/linedrawings/lumina.mjs new file mode 100644 index 00000000000..7548e00029a --- /dev/null +++ b/packages/react-components/src/linedrawings/lumina.mjs @@ -0,0 +1,161 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Lumina = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const LuminaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const LuminaBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/lumira.mjs b/packages/react-components/src/linedrawings/lumira.mjs new file mode 100644 index 00000000000..0f8555dabf7 --- /dev/null +++ b/packages/react-components/src/linedrawings/lumira.mjs @@ -0,0 +1,179 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Lumira = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const LumiraFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const LumiraBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/lunetius.mjs b/packages/react-components/src/linedrawings/lunetius.mjs new file mode 100644 index 00000000000..c0aa3562c78 --- /dev/null +++ b/packages/react-components/src/linedrawings/lunetius.mjs @@ -0,0 +1,58 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.6 + +export const Lunetius = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const LunetiusFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/noble.mjs b/packages/react-components/src/linedrawings/noble.mjs new file mode 100644 index 00000000000..38e9427779c --- /dev/null +++ b/packages/react-components/src/linedrawings/noble.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Noble = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const NobleFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const NobleBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the front + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/shared.mjs b/packages/react-components/src/linedrawings/shared.mjs new file mode 100644 index 00000000000..0b855a0a84f --- /dev/null +++ b/packages/react-components/src/linedrawings/shared.mjs @@ -0,0 +1,44 @@ +import React from 'react' + +/* + * A React component to wrap SVG linedrawings for FreeSewing designs + * + * @param design {string} - The (lowercase) name of a FreeSewing design + * @param className {string} - CSS classes to set on the svg tag + * + * @return LineDrawing as JSX + */ +export const LineDrawingWrapper = ({ + className = 'w-64', // CSS classes to apply + viewBox = '0 0 100 100', // SVG viewBox + stroke = 1, // Stroke to use + children = [], // The actual linedrawing +}) => ( + + {children} + +) + +/* + * Think stroke-width helper to ensure consistency across linedrawings + */ +export const thin = (stroke = 1) => ({ strokeWidth: stroke / 2 }) + +/* + * Think stroke-width helper to ensure consistency across linedrawings + */ +export const veryThin = (stroke = 1) => ({ strokeWidth: stroke / 3 }) + +/* + * Dashed stroke-dasharray helper to ensure consistency across linedrawings + */ +export const dashed = (stroke = 1) => ({ strokeDasharray: `${stroke * 1.2},${stroke * 0.8}` }) diff --git a/packages/react-components/src/linedrawings/simon.mjs b/packages/react-components/src/linedrawings/simon.mjs new file mode 100644 index 00000000000..1899d395367 --- /dev/null +++ b/packages/react-components/src/linedrawings/simon.mjs @@ -0,0 +1,140 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.35 + +export const Simon = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const SimonFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const SimonBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * Always use an id for defs that is unique to the design because if we have + * multiple linedrawings on the page, they share the same namespace and thus + * IDs will collide + */ +const defs = ( + + + + + + + + + +) + +/* + * SVG elements for the back + */ +const Front = ({ stroke }) => ( + <> + {defs} + + + + + + + + + + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + + + + +) diff --git a/packages/react-components/src/linedrawings/teagan.mjs b/packages/react-components/src/linedrawings/teagan.mjs new file mode 100644 index 00000000000..98ee99cac58 --- /dev/null +++ b/packages/react-components/src/linedrawings/teagan.mjs @@ -0,0 +1,99 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Teagan = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const TeaganFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const TeaganBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/packages/react-components/src/linedrawings/tristan.mjs b/packages/react-components/src/linedrawings/tristan.mjs new file mode 100644 index 00000000000..b0530254a80 --- /dev/null +++ b/packages/react-components/src/linedrawings/tristan.mjs @@ -0,0 +1,87 @@ +import React from 'react' +import { LineDrawingWrapper, thin } from './shared.mjs' + +const strokeScale = 0.5 + +export const Tristan = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const TristanFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const TristanBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/uma.mjs b/packages/react-components/src/linedrawings/uma.mjs new file mode 100644 index 00000000000..d685c64ad8d --- /dev/null +++ b/packages/react-components/src/linedrawings/uma.mjs @@ -0,0 +1,89 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Uma = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const UmaFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const UmaBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/umbra.mjs b/packages/react-components/src/linedrawings/umbra.mjs new file mode 100644 index 00000000000..601f7d95208 --- /dev/null +++ b/packages/react-components/src/linedrawings/umbra.mjs @@ -0,0 +1,170 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Umbra = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const UmbraFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const UmbraBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/packages/react-components/src/linedrawings/wahid.mjs b/packages/react-components/src/linedrawings/wahid.mjs new file mode 100644 index 00000000000..c8db87d0d5f --- /dev/null +++ b/packages/react-components/src/linedrawings/wahid.mjs @@ -0,0 +1,117 @@ +import React from 'react' +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.4 + +export const Wahid = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +export const WahidFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +export const WahidBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * Always use an id for defs that is unique to the design because if we have + * multiple linedrawings on the page, they share the same namespace and thus + * IDs will collide + */ +const defs = ( + + + + + + + + + +) + +/* + * React component for the front + */ +export const Front = ({ stroke }) => ( + <> + {defs} + + + + + + + + + + +) + +/* + * React component for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/sites/orgdocs/docs/designs/aaron/cutting/readme.mdx b/sites/orgdocs/docs/designs/aaron/cutting/readme.mdx deleted file mode 100644 index 06fc428dcce..00000000000 --- a/sites/orgdocs/docs/designs/aaron/cutting/readme.mdx +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: "Aaron A-Shirt: Cutting Instructions" ---- - -- Cut **1 back** on the fold -- Cut **1 front** on the fold -- Cut **3 strips** for neck opening and armhole binding - -:::warning - - -#### Caveats - -- There is no seam allowance on the armholes -- There is no seam allowance on the neck opening -- There is extra hem allowance at the hem - -::: diff --git a/sites/orgdocs/docs/designs/aaron/fabric/readme.mdx b/sites/orgdocs/docs/designs/aaron/fabric/readme.mdx deleted file mode 100644 index ac36c607b16..00000000000 --- a/sites/orgdocs/docs/designs/aaron/fabric/readme.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: "Aaron A-Shirt: Fabric Options" ---- - -An A-shirt is essentially underwear. And in that capacity, you want something that is comfortable, feels nice on your skin and breaths. - -Cotton with a hint of something stretchy, maybe rayon, or a fine knit. I suggest you go to the fabric store and feel around a bit. - -:::note - - -While stretch is not required, it does make sense for underwear. That being said, you can make this in a non-stretch, just make sure pick loose or casual fit. - -::: diff --git a/sites/orgdocs/docs/designs/aaron/instructions/readme.mdx b/sites/orgdocs/docs/designs/aaron/instructions/readme.mdx index 1da17fdefa2..672f0fa011a 100644 --- a/sites/orgdocs/docs/designs/aaron/instructions/readme.mdx +++ b/sites/orgdocs/docs/designs/aaron/instructions/readme.mdx @@ -1,5 +1,7 @@ --- -title: "Aaron A-Shirt: Sewing Instructions" +title: 'Aaron A-Shirt: Sewing Instructions' +sidebar_label: Sewing Instructions +sidebar_position: 20 --- ## Step 1: Close seams @@ -17,7 +19,6 @@ Fold the hem upwards, and sew it down. If you have a coverlock, use it. If not, :::note - ##### Fold only once, to avoid bulk Knitwear doesn't ravel, so you can simply fold this over once and sew it down, then neatly trim back the fabric. @@ -28,7 +29,6 @@ Knitwear doesn't ravel, so you can simply fold this over once and sew it down, t :::note - ##### About knit binding If you are new to [knit binding](/docs/sewing/knit-binding), you might read [this page on the subject](/docs/sewing/knit-binding). @@ -50,7 +50,6 @@ We are going to finish the arm and neck hole with [knit binding](/docs/sewing/kn :::note - This is the only part of making this A-shirt that requires a bit of practice. Don't worry, all you need to do is make a couple of these and you'll be a pro in no time. ::: @@ -82,7 +81,6 @@ We are going to sew 1.5cm from the edge. So be careful because this is not the s :::tip - The easy way to keep this 1.5cm distance is by using a seam gauge. Or do what I do, place a piece of marking tape on your sewing machine and mark a line on it 1.5cm from your needle. Then all you need to do is keep the edge of your fabric aligned with that line. @@ -146,7 +144,6 @@ From the right side of your fabric, sew along the inner edge of your binding (fu :::note - If you have a coverlock machine, that would be perfect for this seam ::: @@ -155,7 +152,6 @@ You'll have to, once again, stretch your binding a bit while doing this. But thi :::note - ##### Beware of the uneven feed As you feed your binding through your sewing machine, the feed dogs will pull the bottom layer (back of your binding) forward. @@ -176,7 +172,6 @@ On the inside of your A-shirt, trim back the knit binding against your seam to f :::note - Be careful not to cut a hole in your A-shirt. Seriously, this happened to me on more than one occasion. ::: diff --git a/sites/orgdocs/docs/designs/aaron/measurements/readme.mdx b/sites/orgdocs/docs/designs/aaron/measurements/readme.mdx deleted file mode 100644 index 85dacfd2a44..00000000000 --- a/sites/orgdocs/docs/designs/aaron/measurements/readme.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: "Aaron A-Shirt: Required Measurements" ---- - - diff --git a/sites/orgdocs/docs/designs/aaron/needs/readme.mdx b/sites/orgdocs/docs/designs/aaron/needs/readme.mdx deleted file mode 100644 index 23cc8247f7c..00000000000 --- a/sites/orgdocs/docs/designs/aaron/needs/readme.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: "Aaron A-Shirt: What You Need" ---- - -To make Aaron, you will need the following: - -- [Basic sewing supplies](/docs/sewing/basic-sewing-supplies) -- About 0.75 meters (0.8 yards) of a suitable fabric ([see Fabric options](/docs/designs/aaron/fabric)) - -:::note - - -#### A serger/overlock is nice, but optional - -As with all knitwear and stretch fabrics, a serger/overlock will make your life easier. - -If you do not have one of those, don't despair. You don't really need it. -Because these side seams and shoulder seams won't get stretched out, you can just sew them with a regular straight stitch. - -::: diff --git a/sites/orgdocs/docs/designs/aaron/notes/readme.mdx b/sites/orgdocs/docs/designs/aaron/notes/readme.mdx deleted file mode 100644 index a341eba014d..00000000000 --- a/sites/orgdocs/docs/designs/aaron/notes/readme.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: "Aaron A-Shirt: Designer Notes" ---- - -Aaron is -- like most patterns I design -- born out of necessity. I needed an -A-shirt to wear under shirts when it gets a bit colder, and I try to only wear -clothes made from FreeSewing patterns, so Aaron was born. - -Aaron's been around for many years and has been made by several people, so you -can consider this a staple of FreeSewing's design catalogue. - -On it's own, it's a rather straight-forward design. It extends [the Brian -block](/designs/brian) and has an array of options to tweak the outcome, - -There's a few things that are *special* about Aaron, FreeSewing trivia if you will: - -- Aaron is what I refer designers to when they have questions on how to do something. It's always first in the list (because it starts with double A), always the first to get new features, be migrated to a new version, and so on. Aaron is sort of FreeSewing's canary design. Everything that happens happens to Aaron first. -- I named this design `aaron` in memory of [Aaron Swartz](https://en.wikipedia.org/wiki/Aaron_Swartz). Rest in peace brother. - -joost diff --git a/sites/orgdocs/docs/designs/aaron/options/readme.mdx b/sites/orgdocs/docs/designs/aaron/options/readme.mdx index 14068515e3a..e585cf56a5e 100644 --- a/sites/orgdocs/docs/designs/aaron/options/readme.mdx +++ b/sites/orgdocs/docs/designs/aaron/options/readme.mdx @@ -1,5 +1,7 @@ --- -title: "Aaron A-Shirt: Design Options" +title: 'Aaron A-Shirt: Design Options' +sidebar_label: Design Options +sidebar_position: 10 --- - + diff --git a/sites/orgdocs/docs/designs/aaron/readme.mdx b/sites/orgdocs/docs/designs/aaron/readme.mdx index 54e1f9a3033..df5731610ea 100644 --- a/sites/orgdocs/docs/designs/aaron/readme.mdx +++ b/sites/orgdocs/docs/designs/aaron/readme.mdx @@ -1,5 +1,78 @@ --- -title: "Aaron A-Shirt" +title: 'Aaron A-Shirt' --- - + + +## Designer Notes {#notes} + +Aaron is -- like most patterns I design -- born out of necessity. I needed an +A-shirt to wear under shirts when it gets a bit colder, and I try to only wear +clothes made from FreeSewing patterns, so Aaron was born. + +Aaron's been around for many years and has been made by several people, so you +can consider this a staple of FreeSewing's design catalogue. + +On it's own, it's a rather straight-forward design. It extends [the Brian +block](/designs/brian) and has an array of options to tweak the outcome, + +There's a few things that are _special_ about Aaron, FreeSewing trivia if you will: + +- Aaron is what I refer designers to when they have questions on how to do + something. It's always first in the list (because it starts with double A), + always the first to get new features, be migrated to a new version, and so + on. Aaron is sort of FreeSewing's canary design. Everything that happens + happens to Aaron first. +- I named this design `aaron` in memory of [Aaron + Swartz](https://en.wikipedia.org/wiki/Aaron_Swartz). Rest in peace brother. + +joost + +## What You Need {#needs} + +To make Aaron, you will need the following: + +- [Basic sewing supplies](/docs/sewing/basic-sewing-supplies) +- About 0.75 meters (0.8 yards) of a suitable fabric ([see Fabric + options](#fabric)) + +:::note + +#### A serger/overlock is nice, but optional + +As with all knitwear and stretch fabrics, a serger/overlock will make your life +easier. + +If you do not have one of those, don't despair. You don't really need it. +Because these side seams and shoulder seams won't get stretched out, you can +just sew them with a regular straight stitch. +::: + +## Fabric Options {#fabric} + +An A-shirt is essentially underwear. And in that capacity, you want something +that is comfortable, feels nice on your skin and breaths. + +Cotton with a hint of something stretchy, maybe rayon, or a fine knit. I +suggest you go to the fabric store and feel around a bit. + +:::note +While stretch is not required, it does make sense for underwear. That being +said, you can make this in a non-stretch, just make sure pick loose or casual +fit. +::: + +## Cutting Instructions + +- Cut **1 back** on the fold +- Cut **1 front** on the fold +- Cut **3 strips** for neck opening and armhole binding + +:::warning + +#### Caveats + +- There is no seam allowance on the armholes +- There is no seam allowance on the neck opening +- There is extra hem allowance at the hem + ::: diff --git a/sites/orgdocs/src/css/custom.css b/sites/orgdocs/src/css/custom.css index 21a5437ed63..d80355535be 100644 --- a/sites/orgdocs/src/css/custom.css +++ b/sites/orgdocs/src/css/custom.css @@ -605,3 +605,16 @@ figure.develop.example div.develop { font-style: italic; margin-top: -1rem; } + +.tag, +.technique { + background: var(--ifm-color-primary); + padding: 0.2rem 0.5rem; + font-weight: bold; + color: var(--ifm-font-color-light); + border-radius: 0.5rem; +} + +.technique { + background: hsl(var(--pink-500)); +} diff --git a/sites/orgdocs/src/theme/MDXComponents/design-info.mjs b/sites/orgdocs/src/theme/MDXComponents/design-info.mjs index 1ef74e45099..49bc6c43cb0 100644 --- a/sites/orgdocs/src/theme/MDXComponents/design-info.mjs +++ b/sites/orgdocs/src/theme/MDXComponents/design-info.mjs @@ -1,35 +1,39 @@ import React, { Fragment } from 'react' import { designs, designInfo } from '@site/src/lib/designs.mjs' import { capitalize, optionsMenuStructure, optionType } from '@site/src/lib/utils.mjs' -import Link from '@docusaurus/Link'; +import Link from '@docusaurus/Link' +import { lineDrawings } from '@freesewing/react-components/linedrawings' +import { designs as designTranslations } from '../../../../../i18n/designs.mjs' +import measurementTranslations from '../../../../../i18n/measurements.yaml' +import optionGroupTranslations from '../../../../../i18n/optiongroups.yaml' +import Admonition from '@theme/Admonition' +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' -// Dependencies -//import { -// nsMerge, -// capitalize, -// optionsMenuStructure, -// optionType, -// cloudflareImageUrl, -// horFlexClasses, -//} from 'shared/utils.mjs' -//import { designs } from 'shared/config/designs.mjs' -//import { examples } from 'site/components/design-examples.mjs' -//// Hooks -//import { useTranslation } from 'next-i18next' -//import { useDesign } from 'site/hooks/use-design.mjs' -//import { useContext, Fragment } from 'react' -//// Context -//import { ModalContext } from 'shared/context/modal-context.mjs' -//// Components -//import { ModalWrapper } from 'shared/components/wrappers/modal.mjs' -//import { lineDrawings } from 'shared/components/designs/linedrawings/index.mjs' -//import { Difficulty } from 'shared/components/designs/difficulty.mjs' -//import { PageLink, AnchorLink, Link } from 'shared/components/link.mjs' -//import { DocsLink, DocsTitle } from 'shared/components/mdx/docs-helpers.mjs' -//import { Popout } from 'shared/components/popout/index.mjs' -//import { NewPatternIcon, DocsIcon } from 'shared/components/icons.mjs' -//import { DynamicMdx } from 'shared/components/mdx/dynamic.mjs' +const five = [0, 1, 2, 3, 4] +export const Difficulty = ({ score = 0, color = false }) => ( + <> + {five.map((i) => ( + + ๐Ÿงต + + ))} + +) + +const Cols = ({ children }) => ( +
+ {children} +
+) const Option = ({ id, option, design }) => optionType(option) === 'constant' ? null : ( @@ -40,7 +44,7 @@ const Option = ({ id, option, design }) => const OptionGroup = ({ id, group, design }) => (
  • - {t(`workbench:${id}`)} + {optionGroupTranslations[id]}
      {Object.entries(group).map(([sid, entry]) => entry.isGroup ? ( @@ -67,10 +71,47 @@ export const SimpleOptionsList = ({ options, design }) => { const t = (str) => str +const Info = ({ design, list }) => ( +
      +

      About {capitalize(design)}

      +

      {designTranslations[design].d}

      +
        + {list.map(({ emoji, href = false, text }) => ( +
      • + + {emoji} + + {href ? {text} : text} +
        • + ))} +
      +
      +) + +const Subtle = ({ children }) => ( + {children} +) + export const DesignInfo = ({ design }) => { const Design = designs[design][capitalize(design)] const config = Design.patternConfig - console.log(designInfo[design]) // Translate measurements const measies = { required: {}, optional: {} } @@ -82,170 +123,190 @@ export const DesignInfo = ({ design }) => { } // Linedrawing - //const LineDrawing = lineDrawings[design] - // ? lineDrawings[design] - // : ({ className }) =>
      - - // Docs content - const docsContent = ( - <> -

      {t('account:docs')}

      -
        -
      • - {`docs/designs/${design}`} -
        • -
      • - {`docs/designs/${design}/cutting`} -
        • -
      • - {`docs/designs/${design}/instructions`} -
        • -
      • - {`docs/designs/${design}/needs`} -
        • -
      • - {`docs/designs/${design}/fabric`} -
        • - {Object.keys(config.options).length > 0 ? ( -
      • - {`docs/designs/${design}/options`} -
        • - ) : null} -
      • - {`docs/designs/${design}/notes`} -
        • -
      - - ) + const LineDrawing = lineDrawings[design] + ? lineDrawings[design] + : ({ className }) =>
      return ( <> -
      #FreeSewing{capitalize(design)}
      -

      {t(`designs:${design}.d`)}

      - -
      -
      - {/* */} - {docsContent} -
      - -
      - - {t('tags:newThingPattern', { thing: capitalize(design) })} - - - {t('account:docs')} - -

      {t('account:specifications')}

      - -
      {t('account:design')}
      -
        - {typeof designInfo[design].design === 'string' - ?
      • {designInfo[design].design}
        • - : designInfo[design].design.map((person) => ( -
      • {person}
        • - )) - } -
      - -
      {t('account:code')}
      -
        - {typeof designInfo[design].code === 'string' - ?
      • {designInfo[design].code}
        • - : designInfo[design].code.map((person) => ( -
      • {person}
        • - )) - } -
      - -
      {t('tags:difficulty')}
      - {/**/} - -
      {t('tags:tags')}
      -
      - {designInfo[design].tags.map((tag) => ( - - {t(`tags:${tag}`)} + + + ( difficulty = {designInfo[design].difficulty}/5 ) - ))} -
      - -
      {t('techniques:techniques')}
      -
      - {designInfo[design].techniques.map((tech) => ( - - {t(`techniques:${tech}`)} + ), + }, + { + emoji: '๐Ÿท๏ธ', + text: ( + + {designInfo[design].tags.map((tag) => ( + + + {tag} + + + ))} + ( {designInfo[design].tags.length} tags ) - ))} -
      + ), + }, + { + emoji: '๐Ÿชก', + text: ( + + {designInfo[design].techniques.map((tag) => ( + + + {tag} + + + ))} + ( {designInfo[design].techniques.length} techniques ) + + ), + }, + { + emoji: '๐Ÿ“', + text: ( + + {typeof designInfo[design].design === 'string' ? ( + {designInfo[design].design} + ) : ( + designInfo[design].design + .map((person) => {person}) + .join(, ) + )} + + ( designer{typeof designInfo[design].design === 'string' ? '' : 's'} ) + + + ), + }, + { + emoji: '๐Ÿง‘โ€๐Ÿ’ป', + text: ( + + {typeof designInfo[design].code === 'string' ? ( + {designInfo[design].code} + ) : ( + designInfo[design].code + .map((person) => {person}) + .join(, ) + )} + + ( developer{typeof designInfo[design].code === 'string' ? '' : 's'} ) + + + ), + }, + { + emoji: '๐Ÿ’ก', + href: `/docs/designs/${design}/instructions/`, + text: `Sewing Instructions for ${capitalize(design)}`, + }, + { + emoji: 'โœ‚๏ธ', + href: `/docs/designs/${design}/instructions/`, + text: `Generate a bespoke sewing pattern for ${capitalize(design)}`, + }, + { + emoji: 'โค๏ธ', + text: ( + + + #FreeSewing{capitalize(design)} + + + ( Hashtag for social media ) + + + ), + }, + ]} + /> - {Object.keys(measies.required).length > 0 ? ( - <> -
      {t('account:requiredMeasurements')}
      -
        + + +
        + +
        +         + + +
        +

        Required Measurements

        +
          {Object.keys(measies.required) .sort() .map((m) => (
        • - {measies.required[m]} + {measurementTranslations[m]}
          • ))}
        - - ) : null} - - {Object.keys(measies.optional).length > 0 ? ( - <> -
        {t('account:optionalMeasurements')}
        -
          - {Object.keys(measies.optional) - .sort() - .map((m) => ( -
        • - - {measies.optional[m]} - -
          • - ))} -
        - - ) : null} - - {Object.keys(config.options).length > 0 ? ( - <> -
        {t('account:designOptions')}
        - - - ) : null} - -
        {t('account:parts')}
        -
          +
        + {Object.keys(measies.optional).length > 0 ? ( +
        +

        Optional Measurements

        +
          + {Object.keys(measies.optional) + .sort() + .map((m) => ( +
        • + + {measurementTranslations[m]} + +
          • + ))} +
        +
        + ) : null} +         +         + {Object.keys(config.options).length > 0 ? ( + + + + ) : null} + +
          {config.draftOrder.map((part) => (
        • {part}
          • ))}
        - - {Object.keys(config.plugins).length > 0 ? ( - <> -
        {t('account:plugins')}
        -
          - {Object.keys(config.plugins).map((plugin) => ( -
        • {plugin}
          • - ))} -
        - - ) : null} -
      -
      + + {Object.keys(config.plugins).length > 0 ? ( + +
        + {Object.keys(config.plugins).map((plugin) => ( +
      • {plugin}
        • + ))} +
      +       + ) : null} + ) }