feat(shared): Support for translation in Dot custom component

markdown/dev/guides/markdown/custom-components/en.md

@@ -33,8 +33,10 @@ frontend [label="FreeSewing\nFrontend" shape="component" color="oc-violet"]
 user [label="User" shape="egg" color="oc-blue-2" style="filled"]
 extra [label="I am an example" shape="box" color="oc-pink-2"]
 dot [label="Me too!" shape="plaintext"]
+i18n [label="i18n:docs" shape="signature" color="oc-red"] 
 
 extra -> dot
+extra -> i18n
 dot -> db [lhead=cluster_pem dir=back]
 frontend -> api
 frontend -> strapi [color="oc-indigo"]
@@ -70,40 +72,26 @@ the custom component:
 <Dot plain>...</Dot>
 ```
 
-Which yields this result:
+Which does away with all the quirkyness:
 
 <Dot plain>
 ```dot
 rankdir="LR"
 compound=true
-subgraph cluster_pem {
-  label="I am a box"
-  fontsize=24
-  color="oc-gray"
-  style="dashed"
-  api [label="Backend API" shape="box3d" style="dashed" color="oc-teal"]
-  strapi [label="Strapi" shape="box3d" style="dashed" color="oc-teal"]
-  db [label="Database" shape="cylinder" style="dashed" color="oc-grape"]
-  api -> db
-  strapi -> db
-}
 
-frontend [label="FreeSewing\nFrontend" shape="component" color="oc-violet"]
+box1 [label="Plain" shape="box" color="oc-orange"]
-user [label="User" shape="egg" color="oc-blue-2" style="filled"]
+box2 [label="Boring!" shape="egg" color="oc-indigo"]
-extra [label="I am an example" shape="box" color="oc-pink-2"]
+box3 [label="Bleh" shape="box3d" color="oc-green"]
-dot [label="Me too!" shape="plaintext"]
 
-extra -> dot
+box1 -> box2
-dot -> db [lhead=cluster_pem dir=back]
+box1 -> box3 [dir=back style="dashed" label="Not a fan of this style"]
-frontend -> api
+box2 -> box3 
-frontend -> strapi [color="oc-indigo"]
-user -> frontend
 
 ```
 An example graph using the **Dot** custom component
 </Dot>
 
-### Help with colors
+### Using colors
 
 Colors make everything prettier, but dot expects you to specify them as you would in
 HTML, and juggling all those hex-codes becomes a chore.
@@ -121,9 +109,14 @@ component will also override that with `currentColor` so that the default also
 works in dark mode
 </Note>
 
-### Translation
+### Using translation
 
-<Fixme>Not yet implemented</Fixme>
+While freesewing.dev is only available in English, you can also use this on
+freesewing.org which uses translation. 
+
+You can use the `i18n:` prefix followed by the translation key. For example
+`i18n:docs` will look up the `docs` key in the default namespace. Whereas
+`i18n:errors:example` will lookup the `example` keys in the `errors` namespace.
 
 ## Example
 

packages/freesewing.dev/i18n.config.mjs

@@ -0,0 +1,3 @@
+import i18n from '../freesewing.shared/config/i18n.config.mjs'
+
+export default i18n()

packages/freesewing.dev/next.config.mjs

@@ -1,7 +1,7 @@
 import configBuilder from '../freesewing.shared/config/next.mjs'
-//import i18nConfig from './next-i18next.config.js'
+import i18nConfig from './next-i18next.config.js'
 
 const config = configBuilder('dev')
-//config.i18n = i18nConfig.i18n
+config.i18n = i18nConfig.i18n
 
 export default config

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

@@ -44,7 +44,7 @@ const MdxPage = props => {
           </div>
         )}
         <div className="px-0 xl:pl-8 2xl:pl-16">
-          <MdxWrapper mdx={props.mdx} app={app}/>
+          <MdxWrapper mdx={props.mdx} app={app} />
           <HelpUs mdx slug={`/${props.page.slug}`} />
         </div>
       </div>

packages/freesewing.dev/pages/_app.js

@@ -1,7 +1,6 @@
 import 'shared/styles/globals.css'
-//import { appWithTranslation } from 'next-i18next'
+import { appWithTranslation } from 'next-i18next'
 
 const FreeSewingDev = ({ Component, pageProps }) => <Component {...pageProps} />
 
-//export default appWithTranslation(FreeSewingDev)
+export default appWithTranslation(FreeSewingDev)
-export default FreeSewingDev

packages/freesewing.lab/i18n.config.mjs

@@ -1,3 +1,3 @@
 import i18n from '../freesewing.shared/config/i18n.config.mjs'
 
-export default i18n
+export default i18n()

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

@@ -4,7 +4,7 @@ import { Module, render } from 'viz.js/full.render.js'
 import coarse from './dot-rough.js'
 import Popout from 'shared/components/popout'
 import oc from 'open-color'
-//import { useTranslation } from 'next-i18next'
+import { useTranslation } from 'next-i18next'
 
 // Some regex voodoo to allow people to use open-color
 // colors like oc-orange-5 and make it 'just work'
@@ -18,30 +18,25 @@ const colorDot = dot => dot
 
 // More regex voodoo to handle translation
 // Looking for prefix i18n: and terminated by ther space of "
-// FIXME: Handle translation
+const regexC = /i18n:([^ "]+)/g
-//const regexC = /i18n:([^ "]+)/g
+const i18nDot = (dot, t) => dot.replace(regexC, (a,b) => t(b))
-//const getTranslation = (a, b, t) => {
-//  console.log({a,b}, t('aboutFreesewing'), t)
-//  return t('aboutFreesewing')
-//}
-//const i18nDot = (dot, t) => dot.replace(regexC, (a,b) => getTranslation(a, b, t))
 
 
 const Dot = props => {
 
-  //const { t } = useTranslation(['base'])
+  const { t } = useTranslation(['app'])
   const { plain=false } = props
 
   const wrapDot = dot => {
     if (dot.slice(0,7) === 'digraph') return dot
 
     return plain
-    ? `digraph G { bgcolor=transparent; ${colorDot(dot)} }`
+    ? `digraph G { bgcolor=transparent; ${i18nDot(colorDot(dot), t)} }`
     : `digraph G {
   graph [fontname = "Indie Flower"];
   node [fontname = "Indie Flower"];
   edge [fontname = "Indie Flower"];
-  bgcolor=transparent; ${colorDot(dot)} }`
+  bgcolor=transparent; ${i18nDot(colorDot(dot), t)} }`
   }
 
   // Extract code/caption from props

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

@@ -10,7 +10,7 @@ import rendertest from '@freesewing/rendertest'
 import tutorial from '@freesewing/tutorial'
 
 
-const mdxCustomComponents = (app) => ({
+const mdxCustomComponents = (app, t) => ({
   // Custom components
   Example: props => <Example
     {...props}

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

@@ -15,7 +15,7 @@ import customComponents from 'shared/components/mdx'
 // Previous-Next navigation
 import PrevNext from '../mdx/prev-next'
 
-const MdxWrapper = ({mdx, app, components={}}) => {
+const MdxWrapper = ({mdx, app, t, components={}}) => {
 
   const [mdxModule, setMdxModule] = useState()
 
@@ -31,7 +31,7 @@ const MdxWrapper = ({mdx, app, components={}}) => {
    * extra components via props
    */
   const allComponents = {
-    ...customComponents(app),
+    ...customComponents(app, t),
     ...components
   }
 

packages/freesewing.shared/config/i18n.config.mjs

@@ -1,13 +1,13 @@
 // See: https://github.com/isaachinman/next-i18next
 
-const i18n = {
+const i18n = (locales = ['en', 'de', 'es', 'fr', 'nl']) => ({
   defaultLocale: 'en',
-  locales: ['en', 'de', 'es', 'fr', 'nl'],
+  locales,
   defaultNS: 'app',
   interpolation: {
     prefix: '{',
     suffix: '}',
   }
-}
+})
 
 export default i18n