wip(fs.dev): More work on new dev site

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

@@ -10,7 +10,7 @@ import rendertest from '@freesewing/rendertest'
 import tutorial from '@freesewing/tutorial'
 
 
-const mdxCustomComponents = {
+const mdxCustomComponents = (app) => ({
   // Custom components
   DesignIterator,
   Example: props => <Example
@@ -20,7 +20,7 @@ const mdxCustomComponents = {
   Fixme: props => <Popout {...props} fixme />,
   Link: props => <Popout {...props} link />,
   Note: props => <Popout {...props} note />,
-  ReadMore,
+  ReadMore: props => <ReadMore {...props} app={app} />,
   Related: props => <Popout {...props} related />,
   Tip: props => <Popout {...props} tip />,
   Warning: props => <Popout {...props} warning />,
@@ -39,7 +39,7 @@ const mdxCustomComponents = {
     </Popout>
   ),
 
-}
+})
 
 export default mdxCustomComponents
 

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

@@ -1,4 +1,24 @@
-const ReadMore = props => <p>FIXME: Example still todo</p>
+import get from 'lodash.get'
+import orderBy from 'lodash.orderby'
+import Link from 'next/link'
+
+// Helper method to filter out the real children
+const currentChildren = current => Object.values(current)
+  .filter(entry => (typeof entry === 'object'))
+
+const ReadMore = props => {
+
+  const root = get(props.app.navigation, props.app.slug.split('/'))
+  const list = []
+  for (const page of currentChildren(root)) {
+    list.push(<li key={page.__slug}>
+      <Link href={`/${page.__slug}`}>
+        <a>{page.__title}</a>
+      </Link>
+    </li>)
+  }
+  return <ul>{list}</ul>
+}
 
 export default ReadMore
 

packages/freesewing.shared/components/popout.js

@@ -10,15 +10,15 @@ const colors = {
   none: '',
 }
 
-let forceTailwind = <p className="border-accent" />
+let forceTailwind = <p className="border-accent bg-accent" />
 forceTailwind = <p className="text-accent" />
-forceTailwind = <p className="border-secondary" />
+forceTailwind = <p className="border-secondary bg-secondary" />
 forceTailwind = <p className="text-secondary" />
-forceTailwind = <p className="border-error" />
+forceTailwind = <p className="border-error bg-error" />
 forceTailwind = <p className="text-error" />
-forceTailwind = <p className="border-warning" />
+forceTailwind = <p className="border-warning bg-warning" />
 forceTailwind = <p className="text-warning" />
-forceTailwind = <p className="border-info" />
+forceTailwind = <p className="border-info bg-info" />
 forceTailwind = <p className="text-info" />
 
 const Popout = (props) => {
@@ -29,7 +29,7 @@ const Popout = (props) => {
   const color = colors[type]
 
   return (
-    <div className="relative my-8">
+    <div className={`relative my-8 bg-${color} bg-opacity-5`}>
       <div className={`
         border-l-4 px-8 py-2 shadow border-${color}`}>
         <div className={`font-bold uppercase text-${color}`}>

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

@@ -28,7 +28,7 @@ const MdxWrapper = ({mdx, app, components={}}) => {
    * extra components via props
    */
   const allComponents = {
-    ...customComponents,
+    ...customComponents(app),
     ...components
   }
 

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

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import { useSwipeable } from 'react-swipeable'
-//import {themeChange} from "theme-change"
+import { useRouter } from 'next/router'
 //import Head from 'next/head'
 //import { useHotkeys } from 'react-hotkeys-hook'
 //import themes from '@/shared/themes'
-//import { useRouter } from 'next/router'
 //import config from '@/site/freesewing.config.js'
 // Shared components
 import Layout from 'shared/components/layouts/default'
@@ -24,8 +23,8 @@ const AppWrapper= props => {
     trackMouse: true
   })
 
-  //const router = useRouter()
-  //const path = router.asPath
+  const router = useRouter()
+  props.app.setSlug(router.asPath.slice(1))
   //const locale = router.locale || config.language
   //const tree = useNavigation(locale, path)