Docusaurus: metadata compatible with our existing frontmatter (#5846)

* make docusaurus metadata compatible with our existing frontmatter

docusaurus.config.ts

@@ -106,7 +106,6 @@ const config: Config = {
       } satisfies Preset.Options
     ],
   ],
-
   themeConfig: {
     image: '/docs/social/docs-social.png',
     navbar: {

src/theme/DocItem/Metadata/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PageMetadata } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
+
+import type { DocFrontMatter } from '@docusaurus/plugin-content-docs'
+
+type PrismaDocFrontMatter = DocFrontMatter & {
+  metaTitle?: string,
+  metaDescription?: string,
+}
+
+export default function DocItemMetadata(): JSX.Element {
+  const { metadata, frontMatter, assets } = useDoc();
+  const prismaFrontMatter = frontMatter as PrismaDocFrontMatter;
+  return (
+    <PageMetadata
+      title={prismaFrontMatter.metaTitle ?? prismaFrontMatter.title ?? metadata.title}
+      description={prismaFrontMatter.metaDescription ?? metadata.description}
+      keywords={frontMatter.keywords}
+      image={assets.image ?? frontMatter.image}
+    />
+  );
+}