[examples/openspending][lg] - adding drd support (#928)

* [examples/openspending][lg] - adding drd support

* [examples/openspending][sm] - add data stories to header

examples/openspending/components/DataRichDocument.tsx

@@ -0,0 +1,21 @@
+import { MDXRemote } from 'next-mdx-remote';
+import dynamic from 'next/dynamic';
+import { Mermaid } from '@flowershow/core';
+
+// Custom components/renderers to pass to MDX.
+// Since the MDX files aren't loaded by webpack, they have no knowledge of how
+// to handle import statements. Instead, you must include components in scope
+// here.
+const components = {
+  Table: dynamic(() => import('@portaljs/components').then(mod => mod.Table)),
+  Catalog: dynamic(() => import('@portaljs/components').then(mod => mod.Catalog)),
+  mermaid: Mermaid,
+  Vega: dynamic(() => import('@portaljs/components').then(mod => mod.Vega)),
+  VegaLite: dynamic(() => import('@portaljs/components').then(mod => mod.VegaLite)),
+  LineChart: dynamic(() => import('@portaljs/components').then(mod => mod.LineChart)),
+  FlatUiTable: dynamic(() => import('@portaljs/components').then(mod => mod.FlatUiTable)),
+} as any;
+
+export default function DRD({ source }: { source: any }) {
+  return <MDXRemote {...source} components={components} />;
+}

examples/openspending/components/Header.tsx

@@ -23,6 +23,10 @@ export function Header() {
       title: 'Datasets',
       href: '/#datasets',
     },
+    {
+      title: 'Data Stories',
+      href: '/stories',
+    },
     {
       title: 'Blog',
       href: '/blog',
@@ -157,7 +161,7 @@ function Dropdown({ navItem }: { navItem: any }) {
                 >
                   <div className="py-1">
                     {navItem.children.map((item) => (
-                      <Menu.Item>
+                      <Menu.Item key={item.href}>
                         {({ active }) => (
                           <a
                             key={item.href}