wip(dev): More changes for v3 docs

designs/examples/src/shared.mjs

@@ -7,7 +7,7 @@ export function box(part, w = 100, h = 50) {
   part.paths.box = new part.Path()
     .move(new part.Point(0, 0))
     .line(new part.Point(w, h))
-    .attr('class', 'hidden')
+    .setClass('hidden noxray')
 
   return part
 }

markdown/dev/reference/api/path/_curve/en.md

@@ -7,12 +7,16 @@ from the current position via two control points to a given endpoint.
 However, the start control point is identical to the current position,
 so you do not need to provide it.
 
+## Signature
+
 ```js
 Path path._curve(Point cp2, Point to)
 ```
 
 <Tip compact>This method is chainable as it returns the `Path` object</Tip>
 
+## Example
+
 <TabbedExample part="path__curve" caption="Example of the Path.\_curve() method">
 ```js
 ({ Point, points, Path, paths, part }) => {
@@ -33,19 +37,14 @@ Path path._curve(Point cp2, Point to)
 </TabbedExample>
 
 
-<Note>
+## Notes
 
-###### This method exists to save you some typing
+The main purpose of this method is to save your some typing,
-
+as the two following calls yield the same result:
-Note that the two following calls yield the same result:
 
 ```js
 path.curve(point1, point1, point2)
 path._curve(point1, point2)
 ```
 
-So the only purpose of this method is to save your some typing.
-
-</Note>
-
 

sites/shared/components/mdx/example/index.js

@@ -5,6 +5,7 @@ import { Tutorial } from '@freesewing/tutorial'
 import Svg from '../../workbench/draft/svg'
 import Defs from '../../workbench/draft/defs'
 import Stack from '../../workbench/draft/stack'
+import { useGist } from 'shared/hooks/useGist'
 
 export const examplePatterns = {
   examples: Examples,
@@ -12,32 +13,20 @@ export const examplePatterns = {
   //tutorial: Tutorial,
 }
 
-const Example = ({
+const Example = ({ app, part, pattern='examples', xray=false }) => {
-  app,
-  pattern='examples',
-  part,
-  gist={
-    settings: {
-      options: {},
-      measurements: { head: 390 },
-    },
-    _state: { xray: { enabled: false } }
-  },
-  updateGist,
-  unsetGist,
-  showInfo,
-  feedback,
-  xray=false,
-  measurements = { head: 390 },
-  hasRequiredMeasurements=true,
-}) => {
   const Pattern = examplePatterns[pattern]
+  // State for gist
+  const { gist, setGist, unsetGist, updateGist, gistReady, undoGist, resetGist } = useGist(
+    'example-mdx',
+    app
+  )
+
   if (xray) {
-    gist._state.xray.enabled = xray
+    gist._state.xray = { enabled: true }
-    gist.settings.margin = 20
+    gist.margin = 20
   }
-  if (part !== '') gist.settings.only = [ "examples."+part]
+  if (part !== '') gist.only = [ "examples."+part]
-  const draft = new Pattern(gist.settings)
+  const draft = new Pattern(gist)
   const patternProps = draft.draft().getRenderProps()
 
   return (
@@ -46,7 +35,8 @@ const Example = ({
       <style>{`:root { --pattern-scale: 1} ${patternProps.svg.style}`}</style>
       <g>
         {Object.keys(patternProps.stacks).map((stackName) => (
-          <Stack {...{ app, gist, updateGist, unsetGist, showInfo, patternProps }}
+          <Stack {...{ app, gist, updateGist, unsetGist, patternProps }}
+            showInfo={app.setPopup}
             key={stackName}
             stackName={stackName}
             stack={patternProps.stacks[stackName]}

sites/shared/components/mdx/example/tabbed.js

@@ -20,14 +20,14 @@ const patterns = {
   //tutorial: Tutorial,
 }
 
-const TabbedExample = ({pattern, part, children, caption, app }) => (
+const TabbedExample = ({ app, pattern, part, children, caption }) => (
-  <div>
+  <div className="my-8">
-  <Tabs tabs="Preview, Code, X-Ray">
+    <Tabs tabs="Preview, Code, X-Ray">
-    <Tab><Preview patterns={patterns} pattern={pattern} part={part} /></Tab>
+      <Tab><Preview patterns={patterns} pattern={pattern} part={part} app={app} /></Tab>
-    <Tab>{children}</Tab>
+      <Tab>{children}</Tab>
-    <Tab><Preview patterns={patterns} pattern={pattern} part={part} xray={true} showInfo={app.setPopup} /></Tab>
+      <Tab><Preview patterns={patterns} pattern={pattern} part={part} xray={true} app={app} /></Tab>
-  </Tabs>
+    </Tabs>
-  {caption && <div className="text-center italic -mt-4"><Md>{caption}</Md></div>}
+    {caption && <div className="text-center italic -mt-4"><Md>{caption}</Md></div>}
   </div>
 )
 

sites/shared/components/popout.js

@@ -26,7 +26,7 @@ const Popout = (props) => {
 
   return props.compact
     ? (
-      <div className={`relative my-4 bg-${color} bg-opacity-5 -ml-6 -mr-6 sm:ml-0 sm:mr-0 ${className}`}>
+      <div className={`relative my-8 bg-${color} bg-opacity-5 -ml-6 -mr-6 sm:ml-0 sm:mr-0 ${className}`}>
         <div className={`
           border-y-4 sm:border-0 sm:border-l-4 px-4
           shadow text-base border-${color}

sites/shared/components/workbench/draft/path/index.js

@@ -188,7 +188,7 @@ const Curve = (props) => {
 }
 
 const MiniPath = props => {
-  const bbox = props.path.boundary()
+  const bbox = props.path.bbox()
   const id = `${props.partName}_${props.pathName}_mini}`
   const w = bbox.bottomRight.x - bbox.topLeft.x
   const h = bbox.bottomRight.y - bbox.topLeft.y
@@ -356,7 +356,7 @@ export const Attributes = ({ list }) => list
   ) : null
 
 export const pathInfo = (props) => {
-  const bbox = props.path.boundary()
+  const bbox = props.path.bbox()
 
   return (
     <div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
@@ -472,8 +472,11 @@ const XrayCurve = props => {
 }
 
 const XrayPath = props => {
+  const classes = props.path.attributes.get('class')
+  if (typeof classes === 'string' && classes.includes('noxray')) return null
   const ops = props.path.divide()
 
+
   return (
     <g>
       <path

sites/shared/hooks/useGist.js

@@ -8,8 +8,7 @@ import {useState} from 'react'
 // Generates a default design gist to start from
 export const defaultGist = (design, locale='en') => {
   const gist = {
-  design: design.config.data.name,
+  design,
-  version: design.config.version,
   ...defaultSettings,
   _state: {view: 'draft'}
   }
@@ -21,7 +20,7 @@ export const defaultGist = (design, locale='en') => {
 // generate the gist state and its handlers
 export function useGist(design, app) {
 	// get the localstorage state and setter
-	const [gist, _setGist, gistReady] = useLocalStorage(`${design.config.name}_gist`, defaultGist(design, app.locale));
+	const [gist, _setGist, gistReady] = useLocalStorage(`${design}_gist`, defaultGist(design, app.locale));
 	const [gistHistory, setGistHistory] = useState([]);
 	const [gistFuture, setGistFuture] = useState([]);
 

sites/shared/mdx/loader.js

@@ -72,7 +72,10 @@ const mdxLoader = async (language, site, slug, jargon) => {
         [rehypeJargon, { jargon, transform: jargonTransform }],
         [rehypeHighlight, { plainText: ['dot', 'http'] }],
         rehypeSlug,
-        rehypeAutolinkHeadings,
+        [rehypeAutolinkHeadings, {
+          behavior: 'wrap',
+          properties: { className: 'heading-autolink' }
+        }],
       ],
     })
   )

sites/shared/styles/globals.css

@@ -10,7 +10,7 @@
 
   /* Applied styles for common HTML tags */
   h1 { @apply text-base-content text-4xl py-5 font-bold lg:text-6xl }
-  h2 { @apply text-base-content text-3xl py-4 font-bold lg:text-4xl }
+  h2 { @apply text-base-content text-3xl pt-8 pb-2 my-8 font-bold lg:text-4xl border-b }
   h3 { @apply text-base-content text-2xl py-3 font-bold lg:text-3xl }
   h4 { @apply text-base-content text-xl py-2 font-bold lg:text-2xl }
   h5 { @apply text-base-content text-lg py-1 font-bold lg:text-xl }
@@ -27,15 +27,18 @@
   .mdx ol { @apply pl-4 list-decimal list-inside text-base-content }
   .mdx code { @apply bg-accent bg-opacity-10 px-2 rounded text-accent }
   .mdx pre code { @apply bg-inherit }
-  .mdx span.icon.icon-link:before {
+  .mdx a.heading-autolink {
-    content: '#';
+    color: currentColor;
-    font-size: 80%;
-    padding-right: 0.5rem;
     text-decoration: none;
-    text-decoration-line: none;
   }
-  .mdx a[aria-hidden="true"] {
+  .mdx a.heading-autolink:after {
-    text-decoration: none;
+    content: '';
+    color: hsl(var(--s));
+    font-size: 75%;
+    padding-left: 0.5rem;
+  }
+  .mdx a.heading-autolink:hover:after {
+    content: '#';
   }
   /* Watch out of P tags in the toc list */
   .mdx-toc ul li p {