wip simplified mdxComponents

Author: oddvernes

internal/components/src/mdx-components/mdx-components.module.css

@@ -0,0 +1,44 @@
+.heading {
+  position: relative;
+
+  &:hover {
+    & a {
+      opacity: 1;
+    }
+  }
+  & a {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0;
+    color: inherit;
+
+    & span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      &::after {
+        --link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.909 5.152a2.25 2.25 0 0 1 3.182 0l.757.757a2.25 2.25 0 0 1 0 3.182l-4.964 4.965a1.25 1.25 0 0 1-1.768 0L11.03 12.97a.75.75 0 1 0-1.06 1.06l1.085 1.086a2.75 2.75 0 0 0 3.89 0l4.964-4.964a3.75 3.75 0 0 0 0-5.304l-.757-.757-.53.53.53-.53a3.75 3.75 0 0 0-5.304 0l-.878.879a.75.75 0 0 0 1.06 1.06zm-1.964 3.732a2.75 2.75 0 0 0-3.89 0l-4.964 4.964a3.75 3.75 0 0 0 0 5.304l.513-.514-.513.514.757.757a3.75 3.75 0 0 0 5.304 0l.878-.879a.75.75 0 0 0-1.06-1.06l-.879.878a2.25 2.25 0 0 1-3.182 0l-.757-.757a2.25 2.25 0 0 1 0-3.182l4.964-4.965a1.25 1.25 0 0 1 1.768 0l1.086 1.086a.75.75 0 0 0 1.06-1.06z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+
+        content: '';
+        width: 100%;
+        height: 100%;
+        display: block;
+        mask: center / contain no-repeat var(--link-icon);
+        background: currentcolor;
+      }
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  max-width: 100%;
+
+  @media (max-width: 768px) {
+    max-width: 340px;
+  }
+}

internal/components/src/mdx-components/mdx-components.tsx

@@ -0,0 +1,120 @@
+import {
+  Card,
+  Details,
+  DetailsContent,
+  DetailsSummary,
+  Heading,
+  Link,
+  ListOrdered,
+  ListUnordered,
+  Paragraph,
+  type ParagraphProps,
+  Table,
+  TableBody,
+  TableCell,
+  TableFoot,
+  TableHead,
+  TableHeaderCell,
+  type TableProps,
+  TableRow,
+} from '@digdir/designsystemet-react';
+import { getMDXComponent } from 'mdx-bundler/dist/client';
+import { type ComponentType, type JSX, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link as RRLink } from 'react-router';
+import { CodeBlock } from '../code-block/code-block';
+import classes from './mdx-components.module.css';
+
+const defaultComponents = {
+  Details,
+  DetailsContent,
+  DetailsSummary,
+  Card,
+  Table: (props: TableProps) => (
+    <div className={classes.tableWrapper}>
+      <Table {...props} />
+    </div>
+  ),
+  TableHead,
+  TableRow,
+  TableHeaderCell,
+  TableBody,
+  TableFoot,
+  TableCell,
+  h1: (props: JSX.IntrinsicElements['h1']) => (
+    <Heading className={classes.heading} level={1} data-size='xl' {...props} />
+  ),
+  h2: (props: JSX.IntrinsicElements['h2']) => (
+    <Heading className={classes.heading} level={2} data-size='md' {...props} />
+  ),
+  h3: (props: JSX.IntrinsicElements['h3']) => (
+    <Heading className={classes.heading} level={3} data-size='sm' {...props} />
+  ),
+  h4: (props: JSX.IntrinsicElements['h4']) => (
+    <Heading className={classes.heading} level={4} data-size='xs' {...props} />
+  ),
+  h5: (props: JSX.IntrinsicElements['h5']) => (
+    <Heading className={classes.heading} level={5} data-size='xs' {...props} />
+  ),
+  h6: (props: JSX.IntrinsicElements['h6']) => (
+    <Heading className={classes.heading} level={6} data-size='xs' {...props} />
+  ),
+  ol: (props: JSX.IntrinsicElements['ol']) => <ListOrdered {...props} />,
+  ul: (props: JSX.IntrinsicElements['ul']) => <ListUnordered {...props} />,
+  p: (props: ParagraphProps) => <Paragraph {...props} />,
+  Link: ({ href, ...props }: JSX.IntrinsicElements['a']) => (
+    <Link {...props} asChild>
+      <RRLink to={href || ''}>{props.children}</RRLink>
+    </Link>
+  ),
+  a: ({ href, ...props }: JSX.IntrinsicElements['a']) => (
+    <Link {...props} asChild>
+      <RRLink to={href || ''}>{props.children}</RRLink>
+    </Link>
+  ),
+  pre: ({
+    children: {
+      props: { children = '', className = '' },
+    },
+  }) => {
+    return (
+      <CodeBlock language={className.replace('language-', '')}>
+        {children}
+      </CodeBlock>
+    );
+  },
+  table: (props: TableProps) => (
+    <div className={classes.tableWrapper}>
+      <Table data-color='neutral' border zebra {...props} />
+    </div>
+  ),
+};
+
+export const MDXComponents = ({
+  components,
+  code,
+}: {
+  components?: Record<string, ComponentType<unknown>>;
+  code?: string;
+}) => {
+  const { t } = useTranslation();
+  const Component = useMemo(() => {
+    if (!code) return null;
+    return getMDXComponent(code);
+  }, [code]);
+
+  return (
+    <>
+      {Component ? (
+        <Component
+          components={{
+            ...defaultComponents,
+            ...components,
+          }}
+        />
+      ) : (
+        t('mdx.error.loading')
+      )}
+    </>
+  );
+};