feat(shared): Added DocsTitle MDX component

sites/shared/components/mdx/docs-title.mjs

@@ -0,0 +1,19 @@
+import get from 'lodash.get'
+import { useNavigation } from 'site/hooks/use-navigation.mjs'
+
+const getPage = {
+  dev: (slug, nav) => get(nav, slug.split('/')),
+  org: (root, nav) => {
+    // Fixme: make this work for org
+    if (!root) return nav
+    if (root.indexOf('/') === -1) return nav[root]
+    return get(nav, root.split('/'))
+  },
+}
+
+export const DocsTitle = ({ slug, className = '', site = 'org' }) => {
+  const { siteNav } = useNavigation()
+  const page = getPage[site](slug, siteNav)
+
+  return page ? <span className={className}>{page.t}</span> : null
+}

sites/shared/components/mdx/index.mjs

@@ -8,6 +8,7 @@ import { TabbedExample as Example } from './tabbed-example.mjs'
 import { HttpMethod, HttpStatusCode } from './http.mjs'
 import { ControlTip } from '../control/tip.mjs'
 import { Legend } from './legend.mjs'
+import { DocsTitle } from './docs-title.mjs'
 import { V3Wip } from '../v3-wip.mjs'
 
 export const components = (site = 'org') => {
@@ -34,6 +35,7 @@ export const components = (site = 'org') => {
     Tabs,
     ControlTip,
     Example,
+    DocsTitle: (props) => <DocsTitle {...props} site={site} />,
   }
 
   return site === 'dev'