wip(fs.dev): Work on mdx components

packages/freesewing.dev/pages/[...mdxslug].js

@@ -56,8 +56,7 @@ const MdxPage = props => {
    */
   return (
     <Page app={app} {...props.page}>
-      <ThemePicker app={app} />
-      <MdxWrapper mdx={props.mdx} />
+      <MdxWrapper mdx={props.mdx} app={app}/>
     </Page>
   )
 }

packages/freesewing.dev/pages/index.js

@@ -1,11 +1,18 @@
 import Page from 'shared/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import ThemePicker from 'shared/components/theme-picker.js'
+import Popout from 'shared/components/popout'
 
 export default (props) => {
   const app = useApp()
   return (
     <Page app={app} title='This is not a homepage'>
+    <Popout {...props} fixme>test</Popout>
+    <Popout {...props} link>test</Popout>
+    <Popout {...props} note>test</Popout>
+    <Popout {...props} related>test</Popout>
+    <Popout {...props} tip>test</Popout>
+    <Popout {...props} warning>test</Popout>
       <pre>{JSON.stringify(Object.keys(app.navigation.reference), null, 2)}</pre>
       <p className='px-8'>
         <button

packages/freesewing.shared/components/mdx/design-iterator.js

@@ -0,0 +1,8 @@
+import { list as designs } from '@freesewing/pattern-info'
+
+const DesignIterator = props => {
+  const Component = props.component
+  return designs.map(design => <Component design={design} />)
+}
+
+export default DesignIterator

packages/freesewing.shared/components/mdx/example.js

@@ -0,0 +1,4 @@
+const Example = props => <p>FIXME: Example still todo</p>
+
+export const Example
+

packages/freesewing.shared/components/mdx/figure.js

@@ -0,0 +1,8 @@
+const Figure = props => (
+  <figure>
+    <img src={props?.src} alt={props?.alt || ''} title={props?.title || ''} className="shadow-md"/>
+    <figcaption className="text-center italic">{props.title || 'FIXME: No title property set on this image'}</figcaption>
+  </figure>
+)
+
+export default Figure

packages/freesewing.shared/components/mdx/index.js

@@ -0,0 +1,30 @@
+import Popout from '../popout.js'
+import Highlight from './highlight.js'
+import YouTube from './youtube.js'
+import DesignIterator from './design-iterator.js'
+import Figure from './figure.js'
+import Example from './example.js'
+import ReadMore from './read-more.js'
+
+
+const mdxCustomComponents = {
+  // Custom components
+  DesignIterator,
+  Example,
+  Fixme: props => <Popout {...props} fixme />,
+  Link: props => <Popout {...props} link />,
+  Note: props => <Popout {...props} note />,
+  ReadMore,
+  Related: props => <Popout {...props} related />,
+  Tip: props => <Popout {...props} tip />,
+  Warning: props => <Popout {...props} warning />,
+  YouTube,
+  // Tailwind typography plugin overrides
+  h5: props => <h5 className="font-bold my-2">{props.children}</h5>,
+  h6: props => <h6 className="font-bold my-2 text-sm">{props.children}</h6>,
+  pre: props => <Highlight {...props} />,
+  //code: props => <Highlight {...props} tag='code'/>,
+}
+
+export default mdxCustomComponents
+

packages/freesewing.shared/components/mdx/note.js

@@ -1,17 +0,0 @@
-// Generates a ReadMore block
-export const ReadMore = props => (
-  <blockquote>
-    <h5>Read More</h5>
-    {props.children}
-  </blockquote>
-)
-
-export const Note = props => (
-  <blockquote classname={` `}>
-    <h5>Note</h5>
-  {props.children}
-  </blockquote>
-)
-export const Tip = () => <p>Tip</p>
-export const Example = () => <p>Example</p>
-

packages/freesewing.shared/components/mdx/read-more.js

@@ -0,0 +1,4 @@
+const ReadMore = props => <p>FIXME: Example still todo</p>
+
+export default ReadMore
+

packages/freesewing.shared/components/popout.js

@@ -10,6 +10,17 @@ const colors = {
   none: '',
 }
 
+let forceTailwind = <p className="border-accent" />
+forceTailwind = <p className="text-accent" />
+forceTailwind = <p className="border-secondary" />
+forceTailwind = <p className="text-secondary" />
+forceTailwind = <p className="border-error" />
+forceTailwind = <p className="text-error" />
+forceTailwind = <p className="border-warning" />
+forceTailwind = <p className="text-warning" />
+forceTailwind = <p className="border-info" />
+forceTailwind = <p className="text-info" />
+
 const Popout = (props) => {
   let type = 'none'
   for (const t in colors) {
@@ -20,8 +31,8 @@ const Popout = (props) => {
   return (
     <div className="relative my-4">
       <div className={`
-        border-l-4 px-8 py-2 prose lg:prose-lg bg-opacity-5 shadow border-${color} bg-${color}`}>
-        <div className={`font-bold opacity-50 uppercase`}>
+        border-l-4 px-8 py-2 prose lg:prose-lg shadow border-${color}`}>
+        <div className={`font-bold uppercase text-${color}`}>
           {type}
         </div>
         <div className="py-1 first:mt-0 popout-content">{props.children}</div>

packages/freesewing.shared/components/wrappers/mdx.js

@@ -10,27 +10,9 @@ import { run } from '@mdx-js/mdx'
 import * as runtime from 'react/jsx-runtime.js'
 
 // Components that are available in all MDX
-import { list as designs } from '@freesewing/pattern-info'
-import Popout from '../popout'
-import Highlight from '../mdx/highlight'
-import YouTube from '../mdx/youtube'
-//import * as dfltComponents from 'shared/components/elements/in-mdx'
+import customComponents from 'shared/components/mdx'
 
-const DesignIterator = props => {
-  const Component = props.component
-  return designs.map(design => <Component design={design} />)
-}
-
-const Figure = props => (
-  <figure>
-    <img src={props?.src} alt={props?.alt || ''} title={props?.title || ''} className="shadow-md"/>
-    <figcaption className="text-center italic">{props.title || 'FIXME: No title property set on this image'}</figcaption>
-  </figure>
-)
-
-const Example = props => <p>FIXME: Example still todo</p>
-
-const MdxWrapper = ({mdx, components={}}) => {
+const MdxWrapper = ({mdx, app, components={}}) => {
 
   const [mdxModule, setMdxModule] = useState()
 
@@ -40,31 +22,13 @@ const MdxWrapper = ({mdx, components={}}) => {
     })()
   }, [mdx])
 
-  const dfltComponents = {
-    Example,
-    Fixme: props => <Popout {...props} t={t} lang={lang} fixme />,
-    Note: props => <Popout {...props} t={t} lang={lang} note />,
-    Tip: props => <Popout {...props} t={t} lang={lang} tip />,
-    Related: props => <Popout {...props} t={t} lang={lang} related />,
-    Link: props => <Popout {...props} t={t} lang={lang} link />,
-    Warning: props => <Popout {...props} t={t} lang={lang} warning />,
-    YouTube,
-    // Tailwind typography plugin overrides
-    h5: props => <h5 className="font-bold my-2">{props.children}</h5>,
-    h6: props => <h6 className="font-bold my-2 text-sm">{props.children}</h6>,
-    pre: props => <Highlight {...props} />,
-    //code: props => <Highlight {...props} tag='code'/>,
-    DesignIterator,
-  }
-
-
   /*
    * We use some default components that are available
    * everywhere in MDX, but we also accept passing in
    * extra components via props
    */
   const allComponents = {
-    ...dfltComponents,
+    ...customComponents,
     ...components
   }